chore: fix tests, add new tests

Author: AlessioGr

packages/lexical-markdown/src/MarkdownImport.ts

@@ -128,18 +128,41 @@ function $importMultiline(
       while (endLineIndex < linesLength) {
         const closeMatch = lines[endLineIndex].match(regExpEnd);
 
-        // all lines between the open and close match
-        const linesInBetween =
-          startLineIndex !== endLineIndex
-            ? lines.slice(startLineIndex + 1, endLineIndex)
-            : [
-                lines[startLineIndex].slice(
-                  openMatch[0].length - 1,
-                  -closeMatch[0].length - 1,
-                ),
-              ];
-
         if (closeMatch) {
+          // everything between the open and close match, not including the matches, split up by lines
+          const linesInBetween = [];
+
+          if (startLineIndex === endLineIndex) {
+            // In case the end regex matches the same thing as the start regex, we need to continue searching - this is not the actual end
+            if (closeMatch.index === endLineIndex) {
+              endLineIndex++;
+              continue;
+            }
+
+            linesInBetween.push(
+              lines[startLineIndex].slice(
+                openMatch[0].length,
+                -closeMatch[0].length,
+              ),
+            );
+          } else {
+            for (let i = startLineIndex; i <= endLineIndex; i++) {
+              if (i === startLineIndex) {
+                const text = lines[i].slice(openMatch[0].length);
+                if (text.length) {
+                  linesInBetween.push(text);
+                }
+              } else if (i === endLineIndex) {
+                const text = lines[i].slice(0, -closeMatch[0].length);
+                if (text.length) {
+                  linesInBetween.push(text);
+                }
+              } else {
+                linesInBetween.push(lines[i]);
+              }
+            }
+          }
+
           if (
             replace(rootNode, openMatch, closeMatch, linesInBetween) !== false
           ) {

packages/lexical-markdown/src/__tests__/unit/LexicalMarkdown.test.ts

@@ -35,8 +35,8 @@ const MDX_HTML_TRANSFORMER: MultilineElementTransformer = {
     }
     return null; // Run next transformer
   },
-  regExpEnd: /<(\w+)[^>]*>/,
-  regExpStart: /<\/(\w+)>/,
+  regExpEnd: /<\/(\w+)\s*>/,
+  regExpStart: /<(\w+)[^>]*>/,
   replace: (rootNode, openMatch, closeMatch, linesInBetween) => {
     if (openMatch[1] === 'MyComponent') {
       const codeBlockNode = $createCodeNode(openMatch[1]);
@@ -99,7 +99,7 @@ describe('Markdown', () => {
       md: '> Hello\n> world!',
     },
     {
-      // Miltiline list items
+      // Multiline 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!',
     },
@@ -213,6 +213,11 @@ describe('Markdown', () => {
       md: 'Hello ~~__*world*__~~!',
       skipExport: true,
     },
+    /*{
+      html: '<pre spellcheck="false"><span style="white-space: pre-wrap;">Inline Code</span></pre>',
+      md: '```Inline Code```',
+    },*/
+    // TODO: This test currently fails. Fix it
     {
       html: '<pre spellcheck="false"><span style="white-space: pre-wrap;">Code</span></pre>',
       md: '```\nCode\n```',
@@ -267,6 +272,11 @@ describe('Markdown', () => {
       html: '<p><span style="white-space: pre-wrap;">Some HTML in mdx:</span></p><pre spellcheck="false" data-language="MyComponent"><span style="white-space: pre-wrap;">From HTML: Some Text</span></pre>',
       md: 'Some HTML in mdx:\n\n<MyComponent>Some Text</MyComponent>',
     },
+    {
+      customTransformers: [MDX_HTML_TRANSFORMER],
+      html: '<p><span style="white-space: pre-wrap;">Some HTML in mdx:</span></p><pre spellcheck="false" data-language="MyComponent"><span style="white-space: pre-wrap;">From HTML: Line 1\nSome Text</span></pre>',
+      md: 'Some HTML in mdx:\n\n<MyComponent>Line 1\nSome Text</MyComponent>',
+    },
   ];
 
   const HIGHLIGHT_TEXT_MATCH_IMPORT: TextMatchTransformer = {