markdown: use " \n" as the representation for LineBreakNode

In Markdown, single newlines are irrelevant for presentation. They are only for the editing convenience of the author. In HTML and the Lexical composer, a LineBreakNode / `<br>` tag represent a line break in the presentation of the content. Currently, the equivalence with single newlines causes the markdown representation to not be accurate to the composer view or HTML generated or imported. In Markdown, you can create a line break in the presentation and achieve the desired effect by ending a line with two spaces (followed by a newline). Update the import/export to do this.
facebook · Oct 10, 2023 · 7d994a2 · 7d994a2
1 parent 9a679ec
commit 7d994a2
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 16 deletions.
diff --git a/packages/lexical-markdown/src/MarkdownExport.ts b/packages/lexical-markdown/src/MarkdownExport.ts
@@ -110,7 +110,7 @@ function exportChildren(
     }
 
     if ($isLineBreakNode(child)) {
-      output.push('\n');
+      output.push('  \n');
     } else if ($isTextNode(child)) {
       output.push(
         exportTextFormat(child, child.getTextContent(), textTransformersIndex),

diff --git a/packages/lexical-markdown/src/MarkdownImport.ts b/packages/lexical-markdown/src/MarkdownImport.ts
@@ -117,14 +117,17 @@ function importBlocks(
   const textNode = $createTextNode(lineTextTrimmed);
   const elementNode = $createParagraphNode();
   elementNode.append(textNode);
+  if (lineText.endsWith('  ')) {
+    elementNode.append($createLineBreakNode());
+  }
   rootNode.append(elementNode);
 
   for (const {regExp, replace} of elementTransformers) {
     const match = lineText.match(regExp);
 
     if (match) {
-      textNode.setTextContent(lineText.slice(match[0].length));
-      replace(elementNode, [textNode], match, true);
+      textNode.setTextContent(lineText.slice(match[0].length).trimEnd());
+      replace(elementNode, elementNode.getChildren(), match, true);
       break;
     }
   }
@@ -157,10 +160,11 @@ function importBlocks(
       }
 
       if (targetNode != null && targetNode.getTextContentSize() > 0) {
-        targetNode.splice(targetNode.getChildrenSize(), 0, [
-          $createLineBreakNode(),
-          ...elementNode.getChildren(),
-        ]);
+        targetNode.splice(
+          targetNode.getChildrenSize(),
+          0,
+          elementNode.getChildren(),
+        );
         elementNode.remove();
       }
     }

diff --git a/packages/lexical-markdown/src/MarkdownTransformers.ts b/packages/lexical-markdown/src/MarkdownTransformers.ts
@@ -28,7 +28,6 @@ import {
   QuoteNode,
 } from '@lexical/rich-text';
 import {
-  $createLineBreakNode,
   $createTextNode,
   $isTextNode,
   ElementNode,
@@ -206,10 +205,7 @@ export const QUOTE: ElementTransformer = {
     if (isImport) {
       const previousNode = parentNode.getPreviousSibling();
       if ($isQuoteNode(previousNode)) {
-        previousNode.splice(previousNode.getChildrenSize(), 0, [
-          $createLineBreakNode(),
-          ...children,
-        ]);
+        previousNode.splice(previousNode.getChildrenSize(), 0, children);
         previousNode.select(0, 0);
         parentNode.remove();
         return;

diff --git a/packages/lexical-markdown/src/__tests__/unit/LexicalMarkdown.test.ts b/packages/lexical-markdown/src/__tests__/unit/LexicalMarkdown.test.ts
@@ -60,16 +60,16 @@ describe('Markdown', () => {
     {
       // Multiline paragraphs
       html: '<p><span style="white-space: pre-wrap;">Hello</span><br><span style="white-space: pre-wrap;">world</span><br><span style="white-space: pre-wrap;">!</span></p>',
-      md: ['Hello', 'world', '!'].join('\n'),
+      md: ['Hello  ', 'world  ', '!'].join('\n'),
     },
     {
       html: '<blockquote><span style="white-space: pre-wrap;">Hello</span><br><span style="white-space: pre-wrap;">world!</span></blockquote>',
-      md: '> Hello\n> world!',
+      md: '> Hello  \n> world!',
     },
     {
       // Miltiline list items
       html: '<ul><li value="1"><span style="white-space: pre-wrap;">Hello</span></li><li value="2"><span style="white-space: pre-wrap;">world</span><br><span style="white-space: pre-wrap;">!</span><br><span style="white-space: pre-wrap;">!</span></li></ul>',
-      md: '- Hello\n- world\n!\n!',
+      md: '- Hello\n- world  \n!  \n!',
     },
     {
       html: '<ul><li value="1"><span style="white-space: pre-wrap;">Hello</span></li><li value="2"><span style="white-space: pre-wrap;">world</span></li></ul>',
@@ -174,7 +174,7 @@ describe('Markdown', () => {
     {
       // Import only: multiline quote will be prefixed with ">" on each line during export
       html: '<blockquote><span style="white-space: pre-wrap;">Hello</span><br><span style="white-space: pre-wrap;">world</span><br><span style="white-space: pre-wrap;">!</span></blockquote>',
-      md: '> Hello\nworld\n!',
+      md: '> Hello  \nworld  \n!',
       skipExport: true,
     },
     {