mdx-editor / editor

A rich text editor React component for markdown

Home Page:https://mdxeditor.dev

Repository from Github https://github.commdx-editor/editorRepository from Github https://github.commdx-editor/editor

[BUG] two paragraphs being added to the editor when using setMarkdown with empty string

aduccig opened this issue Β· comments

  • I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
  • I have read the documentation and cannot find an answer.

Describe the bug
Hi! πŸ‘‹

Firstly, thanks for your work on this project! πŸ™‚

Today I used patch-package to patch @mdxeditor/editor@3.19.3 for the project I'm working on.

When using setMarkdown$ function setting the value as empty string (''), it automatically creates a new line after inserting the text.

Reproduction
Start from https://codesandbox.io/p/sandbox/mdx-editor-base-forked-knpmkf to reproduce the problem so that I can observe the issue on my side and make sure that the fix reliably addresses it.

To Reproduce
Steps to reproduce the behavior:

  1. Set up MDXEditor in a file
  2. Then use setMarkdown('') method (you can use by instantiating a ref and using the method)
  3. After type anything to the editor OR use insertMarkdown
  4. See that there is two <p> in the elements, it should be only one

Expected behavior
It should validate if the value is an empty string and not add the new empty line.

Desktop (please complete the following information):

  • OS: macOS Sequoia 15.1
  • Browser: Chrome and Safari

Additional context

Here is the diff that solved my problem:

diff --git a/node_modules/@mdxeditor/editor/dist/plugins/core/MdastParagraphVisitor.js b/node_modules/@mdxeditor/editor/dist/plugins/core/MdastParagraphVisitor.js
index 778755d..b8a0239 100644
--- a/node_modules/@mdxeditor/editor/dist/plugins/core/MdastParagraphVisitor.js
+++ b/node_modules/@mdxeditor/editor/dist/plugins/core/MdastParagraphVisitor.js
@@ -5,7 +5,7 @@ const MdastParagraphVisitor = {
   visitNode: function({ mdastNode, lexicalParent, actions }) {
     if (lexicalTypesThatShouldSkipParagraphs.includes(lexicalParent.getType())) {
       actions.visitChildren(mdastNode, lexicalParent);
-    } else {
+    } else if (mdastNode.children.length > 0) {
       actions.addAndStepInto($createParagraphNode());
     }
   }

Why are you inserting an empty string?

Sorry, didn't catch the notification.

I'm trying to clean the whole text area to an blank state. My use case is a chat message, and when the user send the message it I need it to clean the message box.
It doesn't allow undefined or null, so that's why i'm inserting an empty string.