Fix to count tabs as list indentation on importing markdown (#5706)

facebook · Mar 16, 2024 · 76fc0c3 · 76fc0c3
1 parent a0701ae
commit 76fc0c3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/packages/lexical-markdown/src/MarkdownTransformers.ts b/packages/lexical-markdown/src/MarkdownTransformers.ts
@@ -98,6 +98,23 @@ const createBlockNode = (
 // TODO: should be an option
 const LIST_INDENT_SIZE = 4;
 
+function getIndent(whitespaces: string): number {
+  const tabs = whitespaces.match(/\t/g);
+  const spaces = whitespaces.match(/ /g);
+
+  let indent = 0;
+
+  if (tabs) {
+    indent += tabs.length;
+  }
+
+  if (spaces) {
+    indent += Math.floor(spaces.length / LIST_INDENT_SIZE);
+  }
+
+  return indent;
+}
+
 const listReplace = (listType: ListType): ElementTransformer['replace'] => {
   return (parentNode, children, match) => {
     const previousNode = parentNode.getPreviousSibling();
@@ -130,7 +147,7 @@ const listReplace = (listType: ListType): ElementTransformer['replace'] => {
     }
     listItem.append(...children);
     listItem.select(0, 0);
-    const indent = Math.floor(match[1].length / LIST_INDENT_SIZE);
+    const indent = getIndent(match[1]);
     if (indent) {
       listItem.setIndent(indent);
     }

diff --git a/packages/lexical-markdown/src/__tests__/unit/LexicalMarkdown.test.ts b/packages/lexical-markdown/src/__tests__/unit/LexicalMarkdown.test.ts
@@ -79,6 +79,12 @@ describe('Markdown', () => {
       html: '<ul><li value="1"><span style="white-space: pre-wrap;">Level 1</span></li><li value="2"><ul><li value="1"><span style="white-space: pre-wrap;">Level 2</span></li><li value="2"><ul><li value="1"><span style="white-space: pre-wrap;">Level 3</span></li></ul></li></ul></li></ul><p><span style="white-space: pre-wrap;">Hello world</span></p>',
       md: '- Level 1\n    - Level 2\n        - Level 3\n\nHello world',
     },
+    // List indentation with tabs, Import only: export will use "    " only for one level of indentation
+    {
+      html: '<ul><li value="1"><span style="white-space: pre-wrap;">Level 1</span></li><li value="2"><ul><li value="1"><span style="white-space: pre-wrap;">Level 2</span></li><li value="2"><ul><li value="1"><span style="white-space: pre-wrap;">Level 3</span></li></ul></li></ul></li></ul><p><span style="white-space: pre-wrap;">Hello world</span></p>',
+      md: '- Level 1\n\t- Level 2\n  \t  - Level 3\n\nHello world',
+      skipExport: true,
+    },
     {
       // Import only: export will use "-" instead of "*"
       html: '<ul><li value="1"><span style="white-space: pre-wrap;">Level 1</span></li><li value="2"><ul><li value="1"><span style="white-space: pre-wrap;">Level 2</span></li><li value="2"><ul><li value="1"><span style="white-space: pre-wrap;">Level 3</span></li></ul></li></ul></li></ul><p><span style="white-space: pre-wrap;">Hello world</span></p>',