mdx-editor / editor

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

[BUG] onChange is not fired when inserting new white line #518

Closed wouterlemcke closed 1 week ago

wouterlemcke commented 1 week ago

We do some comparison when the markdown is changed. We need to know what happend. For that we compare the old (state) value with the new one.

However we noticed then when you insert one or multiple white lines (hitting enter-key), the onChange is not fired. When you then continue typing regular stuff, the whitelines are part of the markdown (as they should).

I would expect the onChange to fire for really every change you (can) make

petyosi commented 1 week ago

The component automatically trims its content when emitting the change - in general, this should not be a problem, because the markdown parsers would yield the same result, but I might be wrong here. How is that affecting you?

wouterlemcke commented 1 week ago

We're implementing tagging / mentioning (like https://github.com/signavio/react-mentions), but then also supporting a range of other mark down elements.

On change we compare the old state with the new text to see what you changed. If the new char is a @, we open the taggable user list. However because the onchange is not fired for the white lines, when you type any char after the white lines it still detects the white line as the new char.

Probably there are better ways of doing this, but after wrestling with plugins and lexical for more then 2 days I gave up and started implement it like this. It works perfectly for us, except for this white line issue

wouterlemcke commented 1 week ago

the ref.getMarkDown() also returns the text trimmed. I get the idea and in most situations it's probably fine, but for us it's an issue right now 😅

petyosi commented 1 week ago

You should be using the Lexical API for that purpose. I think they have a nice example of mentions in the playground that you can start with.