Fail-proof/fallback way of rendering any kind of content/code

[samlhuillier]

Is there some kind of setup/plugin config you'd recommend for trying to render as many different file formats as possible? I'm building a note taking app in which some notes contain weird bits of unstructured code and I get weird lexical errors. I've tried various plugin configs including the ALL_PLUGINS config that I found somewhere in the docs. Can anyone point me in the right direction in terms of the optimal setup for fail proof rendering?

Also, something I'm now noticing is that often times pasting markdown works fine but passing the same in through the content prop fails. (I'm using Vite in an electron app btw for this)
Many thanks :)

[petyosi]

I should be able to help you further if you give some concrete examples of the issues you're facing. Can you replicate the problem you have currently in a code sandbox? You can fork this one.

[samlhuillier]

Hey thanks for getting back to me! I've modified your sandbox slightly to include a file upload which then attempts to populate the MDXEditor component:

export default function App() {
  const [markdown, setMarkdown] = useState<any>("hello world");
  const ref = useRef<MDXEditorMethods>(null);
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const handleFileChange = (event: any) => {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        if (e.target?.result && typeof e.target.result === "string") {
          setMarkdown(e.target.result);
          ref.current?.setMarkdown(e.target.result);
        }
      };
      reader.readAsText(file);
    }
  };
  return (
    <div>
      <input type="file" onChange={handleFileChange} accept=".md" />
      <MDXEditor
        ref={ref}
        markdown={markdown}
        onChange={setMarkdown}
        plugins={[
          headingsPlugin(),
          listsPlugin(),
          toolbarPlugin({
            toolbarContents: () => (
              <>
                <BoldItalicUnderlineToggles />
                <ListsToggle />
              </>
            ),
          }),
        ]}
      />
    </div>
  );
}

(I tried sharing the sandbox but the generated link didn't seem to open to the modifications i made)
App.md
Job Applications winter 2021.md

The files that I upload are attached to this and both fail. (I'm not too fussed about code getting rendered to look like code, a more critical requirement is just generically being able to render any kind of characters.)

[samlhuillier]

Or even trying to set the editor to have something like this makes it fail:

<!---->

[petyosi]

Thank you, that was useful. I managed to allocate some time today to do a deeper dive on the way errors are handled. In fact, I used one of your examples, as it revealed an interesting case with the default jsx parser. Now, parsing JSX as markdown is obviously not possible, but, if you're using the diff/source mode you will be able to let the users edit the content somehow.

Take a look at the newly published help article on the matters and test the latest release. Happy to continue this conversation further.

[samlhuillier]

Thank you for looking into this for me. I will implement your suggestions in the coming days and get back to you if any issues arise :)