search

mdx-editor / editor

A rich text editor React component for markdown
https://mdxeditor.dev
MIT License
1.63k stars 131 forks source link

[BUG] Custom JSX `NestedLexicalEditor` does not render well #430

Closed Melvynx closed 3 weeks ago

Melvynx commented 3 months ago

First, thanks you very much for this tool.

Describe the bug I create a custom MdxZodEditor that takes a Zod schema and renders the component with settings. Everything works well, except the children component seems to create a not-valid Markdown output.

Reproduction

I created a full repository of the demo here: https://github.com/Melvynx/mdx-remote-bug-reproduction

To Reproduce Steps to reproduce the behavior:

  1. Go to /demo in the NextJS app.
  2. Click on 'Spoiler' in the toolbar.
  3. Open the Spoiler and add text and a block of code.
  4. Refresh the page.
  5. See the error.

Expected behavior The output must be a valid Markdown output.

Screenshots I uploaded a video demo here:

https://github.com/mdx-editor/editor/assets/56388157/0097e37e-d62c-4abb-b22c-c8ffe7a2781e

Desktop (please complete the following information):

Additional context In the repository, I have added all my code about the Zod Editor and everything to try and test.

noteverseio commented 3 months ago

I believe JSX and nested editor together have some issue to render complex markdown content, you can use Directive and nested editor to achieve the same thing, which works perfectly based on my experience :)

petyosi commented 3 months ago

@Melvynx I am getting a lost in the complexity of your example. It looks weird to me that the code block remains on the same line as the rest of the content.

I tried to simplify things down to this sandbox, and, as far as I can tell, it works as expected. Can you replicate the problem here?

https://github.com/mdx-editor/editor/assets/13347/b5493d7c-f79b-4441-80c4-361355ae2004

Melvynx commented 2 months ago

Hi @petyosi, thank you. I know with the GenericJsxEditor everything seems to work, but I am trying to create a more complex and custom JSX editor without using the GenericJsxEditor. There is a lack of documentation for that.

petyosi commented 2 months ago

I do understand that, but I need your help in narrowing down the problematic part of your setup - it is quite complicated and I am lost in it. Can you pinpoint the difference between your implementation and the GenerixJsxEditor (source) and what you're doing that causes the problem?

Melvynx commented 3 weeks ago

Sorry, my fault. I use the wrong kind :(