Supply custom markdown construct for specific JSX component?

[Bryce-Davidson]

Hi there 👋
Saw this library on Reddit and was thrilled!

I'm trying to allow the user to write reference a JSX component in the editor such as <ImageGrid links={[...]} />and have the specified JSX component render in the rich text editor, just as using the Warning block functions in the example.

I noticed this excerpt in the docs, but am not quite sure where to start. Any guidance would be greatly appreciated 🙏

Notice that when creating your own visitor, you might have to implement a new Lexical node (and, potentially, a React component that acts as an editor) as well. To do so, consult the Lexical docs, and browse the MDXEditor source code itself for further details on how this can be done.

Thanks,
Bryce

[Bryce-Davidson]

This file seems to define how to use JSX components

https://github.com/mdx-editor/editor/blob/main/src/types/JsxComponentDescriptors.ts#L22

[Bryce-Davidson]

Tried to get it working with this and only end up with an editable region in the editor.

<MDXEditor
        markdown={markdown}
        onChange={(md) => {
          setMarkdown(md);
        }}
        toolbarComponents={[ToolbarComponents.BlockTypeSelect]}
        contentEditableClassName="prose"
        jsxComponentDescriptors={[
          {
            name: "Test",
            kind: "flow",
            source: "./Test",
            defaultExport: true,
            props: [],
          },
        ]}
      />

[petyosi]

Hey @Bryce-Davidson ,

Thank you very much for giving the component a try. My assumption is that you would like to implement a custom editor for a specific JSX component. That's possible, and I would like to make it more convenient as the component evolves.

Let me outline the steps necessary right now:

1. You need to create a visitor that detects the specific mdast node in the import process and pass that visitor. Here's how the default JSX visitor looks. Then, pass a custom array (with your visitor set before the default one) to the markdownParseOptions.visitors prop. This is explained in further detail in this doc.
2. The visitor should create a Lexical node that acts as the "model" for the specific editor. There's quite the boilerplate involved, and the lexical docs themselves are quite limited, but you can take a look at how the current JsxNode (it features a nested editor) looks. There are some cool nodes (along with their components) in the lexical playground.
3. Next, you will need the UI component that acts as an editor. There are some in the link above, and here are the built-in ones from the MDXEditor - maybe the table one is close to what you're looking for.
4. Finally, (that's easy) you need an export visitor to serialize the Lexical node back to markdown. Here's how the default one looks.

I'm happy to help you further in your implementation process, the component is in its early stage, and there are plenty of things to improve in the API and in the docs.

Cheers!

[petyosi]

The JSX element handling has received a lot of attention in v0.11.0. Take a look at this document.