Error handling and fallback to source editor

[dave-db]

The docs say:

The diff-source plugin can be used as an "escape hatch" for potentially invalid markdown. Out of the box, the plugin will attach listeners to the markdown conversion, and, if it fails, will display an error message suggesting the user to switch to source mode and fix the problem there. If the user fixes the problem, then switching to rich text mode will work and the content will be displayed correctly.

But I'm not seeing this behaviour at all. I've hit a number of issues integrating the editor with a large corpus of legacy mdx content, and have seen a lot of processing errors (JSX component used but not imported, badly named directives, arbitrary html in the markdown), and unless I wrap the editor in an ErrorBoundary (which I would anyway), the errors bubble all the way to the top of my Next.js app. I can't see how to set the editor to fallback into source mode on encountering an error, even trying to do it manually via the onError prop and either setting a viewModeState or even using usePublisher.

Even trying to trap these errors in the Boundary and falling back to an instance of the editor with viewMode=source and suppressHtmlProcessing=true doesn't work - the errors still occur, and the browser locks in a constant error/fallback/error cycle. At no point does it seem to ever trigger the onError prop.

What am I doing wrong?

    <MDXEditor
      className={`${styles.editor} ${editorTheme}-theme`}
      contentEditableClassName={classes}
      markdown={value}
      onChange={onChange}
      onError={onError}
      toMarkdownOptions={{
        bullet: '-',
        listItemIndent: 'one',
        emphasis: '_',
        rule: '-',
        incrementListMarker: false,
      }}
      plugins={[
        frontmatterPlugin(),
        diffSourcePlugin({
          diffMarkdown: oldMdxContent,
          viewMode: 'rich-text',
        }),
        jsxPlugin({ jsxComponentDescriptors }),
        codeBlockPlugin({
          codeBlockEditorDescriptors: [FallbackCodeEditorDescriptor],
          defaultCodeBlockLanguage: 'tsx',
        }),
        codeMirrorPlugin({
          codeBlockLanguages,
        }),
        directivesPlugin({
          directiveDescriptors: [AdmonitionDirectiveDescriptor],
        }),
        headingsPlugin(),
        listsPlugin(),
        linkPlugin(),
        linkDialogPlugin({
          linkAutocompleteSuggestions: pageList.map((p) => p.pathname),
        }),
        imagePlugin({
          imageUploadHandler: async (image: File) => {
            const { filePath } = await onUpload([image]);
            return filePath;
          },
          imageAutocompleteSuggestions: uploads,
        }),
        tablePlugin(),
        quotePlugin(),
        thematicBreakPlugin(),
        toolbarPlugin({
          toolbarContents: () => (
            <DiffSourceToggleWrapper>
              <BlockTypeSelect />
              <BoldItalicUnderlineToggles />
              {/* <ChangeAdmonitionType /> */}
              {/* <ChangeCodeMirrorLanguage /> */}
              <CodeToggle />
              <CreateLink />
              <InsertAdmonition />
              <InsertCodeBlock />
              {/* <InsertFrontmatter /> */}
              <InsertImage />
              <InsertTable />
              <InsertThematicBreak />
              <ListsToggle />
              <UndoRedo />
            </DiffSourceToggleWrapper>
          ),
        }),
        markdownShortcutPlugin(),
      ]}
    />

"@mdxeditor/editor": "^2.3.2",

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 22.6.0: Fri Sep 15 13:39:52 PDT 2023; root:xnu-8796.141.3.700.8~1/RELEASE_X86_64
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.4
  eslint-config-next: 14.0.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3

No error boundary around editor

With error boundary and custom message

[petyosi]

Can you paste/link some content you have trouble with? I think I know what goes on, but I need to ensure that this is properly handled. Great if you can include something that would cause as many of errors you've encountered as possible.

[dave-db]

Hi, thanks for replying. Here's some example content:

---
title: Content example
layout: page
---

<NpmInfo packageName="@scope/package-name" />

## Controlling

There are may ways to control.

<Tabs>
  <Tab>
    <h3>Option 1</h3>

    <a href="/pathname">Link to more</a>
  </Tab>
  <Tab>
    <h3>Option 2</h3>

    <a href="/pathname">Link to other</a>
  </Tab>
</Tabs>

:::info

**Everyone should comply where possible with WCAG 2.1 / AA Standards.**

:::


<Stack gap="sm">
  <CollapsibleCard>
    How do we find out more?
    <a
      href="https://www.w3.org/WAI/fundamentals/accessibility-intro/"
      target="_blank"
      rel="noreferrer noopener"
    >W3C's Introduction to Web Accessibility</a>.
  </CollapsibleCard>
</Stack>


:::important

Think hard before performing actions. Actions can be risky.

:::

> A final quote

I've added componentDescriptors for all the big JSX components with some props - NpmInfo, Tabs, Tab, Stack, CollapsibleCard

[petyosi]

Thanks, that's super helpful. I will test this and most likely publish a fix in a day or two.

[dave-db]

Thank you very much. I've hit a couple of other minor issues along the way, I'll raise those separately for triage.

[petyosi]

@dave-db just published v2.3.3 that bundles any errors due to missing directives, JSX descriptors and code blocks into the markdown import process. As a result, you should be able to see the source editor fallback mechanism working - at least it did with the configuration and the sample source you sent.

Keep me posted if you discover more of those. My goal is to make the editor as resilient as possible in cases of unknown content.

[petyosi]

Thanks, just pushed a fix, please test the latest version.

[dave-db]

Suffering some connection issues at the moment, will check as soon as I can

[dave-db]

Fixed! Thank you again 👍

[dave-db]

Here's another unknown content error. This mdx document contained a link to an arbitrary video url:

Find your video at:

https://player.evideo.com/video?video-id={your-video-id}

The part in {curly braces} blew up the editor, but not the MDX processor (mdx-js evaluateSync), which rendered it fine unescaped. The editor error was:

Error: Cannot handle unknown node `mdxTextExpression`
    at Object.unknown (webpack-internal:///(:3000/admin/app-pages-browser)/./node_modules/@mdxeditor/editor/node_modules/mdast-util-to-markdown/lib/index.js:120:11)
    at Object.one [as handle] (webpack-internal:///(:3000/admin/app-pages-browser)/./node_modules/zwitch/index.js:112:17)
    at toMarkdown (webpack-internal:///(:3000/admin/app-pages-browser)/./node_modules/@mdxeditor/editor/node_modules/mdast-util-to-markdown/lib/index.js:85:24)
    at visit (webpack-internal:///(:3000/admin/app-pages-browser)/./node_modules/@mdxeditor/editor/dist/importMarkdownToLexical.js:78:156)
    at eval (webpack-internal:///(:3000/admin/app-pages-browser)/./node_modules/@mdxeditor/editor/dist/importMarkdownToLexical.js:68:45)

[petyosi]

This seems to be an unrelated problem, can you open a separate issue? Give me some reproduction there, I will what's to be done. Most likely, this is treated as a JSX expression, maybe there's no way to have that and JSX.