Passing JSX elements as props to components

[chrahe]

Hello everyone,

say you have a component with props that accept either text or other JSX elements, for example:

<Card
  title={"Downloading..."}
  subtitle={<ProgressBar progress={progress} />}
>
  This is the content of the card
</Card>

(The title and subtitle props are rendered into specific places in the card layout and the children go into the main content area of the card.)

To render this into the editor in a way that makes all of the slots interactively editable, I would expect to provide NestedLexicalEditors to each of the slots to be filled and wire them up to the corresponding prop/attribute. However, expression props are stored as strings and not parsed, preventing the nested editors from reading and modifying the expression, even if it is a JSX element.

I've done a bit of digging and my best guess is that mdast-util-mdx-jsx would need to explicitly support parsing expressions in props if they are JSX elements. I'm not very confident in my understanding of the mdast architecture though and don't think I would be able to make such a change myself without investing more time than I can allocate at the moment.

The only workaround I can think of is to nest an entire editor inside the prop slot that uses the value of the prop as its Markdown source, but that seems rather expensive. Has anyone tried to do something like this before? Or maybe does MDXEditor have another hook or component that would be useful in my case, to convert to/from markdown in a nested editor?

Thanks in advance for any advice! :)