How to insert a jsx element to a container jsx element

[larryro]

Thank you for your hard work. The mdx-editor is really cool.

Recently, I have been trying to use this editor in the company's project. I need to heavily utilize JSX components, but I have encountered some issues.

I have two jsx components, one of which acts as a container.
Card - act as the child component
Grid - act as the container component

When I insert the child components into the container component via the buttons in the toolbar, an error occurs.

Reproduce Code: https://github.com/larryro/mdx-editor-in-cra/blob/master/src/Example.tsx

[github-actions]

🎉 This issue has been resolved in version 1.11.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[petyosi]

Thank you very much for the reproduction - this is a very good use case, it helped me track a few outstanding problems with the JSX behavior.

I just pushed a fix that addresses the error you encounter + few other inconsistencies when it comes to reporting the updates of the nested editor. Your code is right, the only thing which I believe you might need is to:

1. Make the content of the grid separated with new lines
2. add block prop to the NestedLexicalEditor.

See the commit above, it includes a slightly modified version of your code.

Let me know if you encounter any more troubles with your integration. With a reproduction like you have, I should be able to help you.

[larryro]

Thank you very much for the reproduction - this is a very good use case, it helped me track a few outstanding problems with the JSX behavior.

I just pushed a fix that addresses the error you encounter + few other inconsistencies when it comes to reporting the updates of the nested editor. Your code is right, the only thing which I believe you might need is to:

1. Make the content of the grid separated with new lines
2. add block prop to the NestedLexicalEditor.

See the commit above, it includes a slightly modified version of your code.

Let me know if you encounter any more troubles with your integration. With a reproduction like you have, I should be able to help you.

Thank you very much for your quick response and code fix, the efficiency is amazing. I have done some simple tests and it is working very well so far.Additionally, I found two minor issues:

1. The Card component is not imported.
2. If a grid is nested within another grid, the editor will not display an error but it will not automatically convert it to markdown. Currently, I don't have a use case for this scenario, but I think it would be a great feature if it could be implemented.

@petyosi

[larryro]

Thank you very much for the reproduction - this is a very good use case, it helped me track a few outstanding problems with the JSX behavior.
I just pushed a fix that addresses the error you encounter + few other inconsistencies when it comes to reporting the updates of the nested editor. Your code is right, the only thing which I believe you might need is to:

1. Make the content of the grid separated with new lines
2. add block prop to the NestedLexicalEditor.

See the commit above, it includes a slightly modified version of your code.
Let me know if you encounter any more troubles with your integration. With a reproduction like you have, I should be able to help you.

Thank you very much for your quick response and code fix, the efficiency is amazing. I have done some simple tests and it is working very well so far.Additionally, I found two minor issues:

1. The Card component is not imported.
2. If a grid is nested within another grid, the editor will not display an error but it will not automatically convert it to markdown. Currently, I don't have a use case for this scenario, but I think it would be a great feature if it could be implemented.

@petyosi

Updates

Sorry, nested grid issue, it may be because I forgot to add the block prop in nestedEditor.It works well now.

The issue of Card component not being imported still persists.

[github-actions]

🎉 This issue has been resolved in version 1.11.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[petyosi]

Thanks for that report. Pushed a fix. FYI: I've noted two other things I would like to improve in that scenario:

• JSX - nested editor with block does not accept one-liner markdown. Could be solved.
• Inserting JSX leaves too much whitespace around.