[lexical-markdown] Fix: Prevent Link Transformer from consuming preceding text

Author: Sa-Te

packages/lexical-list/src/LexicalListItemNode.ts

@@ -6,7 +6,6 @@
  *
  */
 
-import type {ListType} from './';
 import type {
   BaseSelection,
   DOMConversionOutput,
@@ -40,8 +39,8 @@ import {
 } from 'lexical';
 import invariant from 'shared/invariant';
 
-import {$createListNode, $isListNode} from './';
 import {$handleIndent, $handleOutdent, mergeLists} from './formatList';
+import {$createListNode, $isListNode, type ListType} from './LexicalListNode';
 import {isNestedListNode} from './utils';
 
 export type SerializedListItemNode = Spread<
@@ -326,8 +325,14 @@ export class ListItemNode extends ElementNode {
         // if the list node is nested, we just want to remove it,
         // effectively unindenting it.
         listNode.remove();
-        listNodeParent.select();
+
+        const paragraphChildren = paragraph.getChildren();
+        listNodeParent.append(...paragraphChildren);
+
+        // Ensure cursor is placed correctly at the end of the merged content
+        listNodeParent.selectEnd();
       } else {
+        // top level list with 1 item, we want to convert it to a paragraph
         listNode.insertBefore(paragraph);
         listNode.remove();
         // If we have selection on the list item, we'll need to move it
@@ -343,8 +348,10 @@ export class ListItemNode extends ElementNode {
         if (focus.type === 'element' && focus.getNode().is(this)) {
           focus.set(key, focus.offset, 'element');
         }
+        paragraph.select();
       }
     } else {
+      // list here has multiple items, we just un-indent this specific item
       listNode.insertBefore(paragraph);
       this.remove();
     }

packages/lexical-list/src/__tests__/unit/LexicalListNode.test.ts

@@ -6,11 +6,21 @@
  *
  */
 import {$createLinkNode, $isLinkNode, LinkNode} from '@lexical/link';
-import {$createTextNode, $getRoot, ParagraphNode, TextNode} from 'lexical';
+import {
+  $createRangeSelection,
+  $createTextNode,
+  $getRoot,
+  $isTextNode,
+  $setSelection,
+  DELETE_CHARACTER_COMMAND,
+  ParagraphNode,
+  TextNode,
+} from 'lexical';
 import {
   expectHtmlToBeEqual,
   html,
   initializeUnitTest,
+  invariant,
 } from 'lexical/src/__tests__/utils';
 import {waitForReact} from 'packages/lexical-react/src/__tests__/unit/utils';
 import {describe, expect, test} from 'vitest';
@@ -424,6 +434,95 @@ describe('LexicalListNode tests', () => {
         expect(bulletList.__listType).toBe('bullet');
       });
     });
+
+    test('Deleting selection across parent and nested list item should remove nested list', async () => {
+      const {editor} = testEnv;
+      await editor.update(() => {
+        const root = $getRoot();
+        const mainList = $createListNode('number');
+        const parentItem = $createListItemNode();
+        parentItem.append($createTextNode('Parent Item'));
+
+        const nestedList = $createListNode('number');
+        const nestedItem = $createListItemNode();
+        nestedItem.append($createTextNode('Child Item'));
+
+        //build the tree
+        nestedList.append(nestedItem);
+        parentItem.append(nestedList);
+        mainList.append(parentItem);
+        root.append(mainList);
+      });
+
+      await editor.update(() => {
+        const root = $getRoot();
+        const mainList = root.getFirstChildOrThrow();
+        invariant($isListNode(mainList), 'Expected mainList to be a ListNode');
+
+        const parentItem = mainList.getFirstChildOrThrow();
+        invariant(
+          $isListItemNode(parentItem),
+          'Expected parentItem to be a ListItemNode',
+        );
+
+        // The text node inside Parent ("Parent")
+        const parentText = parentItem.getFirstChildOrThrow();
+
+        // The nested list is the second child of parentItem
+        const nestedList = parentItem.getLastChild();
+        invariant($isListNode(nestedList), 'Expected nested list');
+
+        const nestedItem = nestedList.getFirstChildOrThrow();
+        invariant(
+          $isListItemNode(nestedItem),
+          'Expected nestedItem to be a ListItemNode',
+        );
+
+        const childText = nestedItem.getFirstChildOrThrow();
+        invariant(
+          $isTextNode(childText),
+          'Expected childText to be a TextNode',
+        );
+
+        const selection = $createRangeSelection();
+        selection.anchor.set(parentText.getKey(), 0, 'text'); // Start of "Parent"
+        selection.focus.set(
+          childText.getKey(),
+          childText.getTextContentSize(),
+          'text',
+        ); // End of "Child"
+
+        $setSelection(selection);
+
+        editor.dispatchCommand(DELETE_CHARACTER_COMMAND, true);
+      });
+
+      await editor.update(() => {
+        const root = $getRoot();
+        const mainList = root.getFirstChildOrThrow();
+        invariant($isListNode(mainList), 'Expected mainList to be a ListNode');
+
+        // We expect the Parent Item to still exist (maybe empty),
+        // but the Nested List inside it should be destroyed.
+        const parentItem = mainList.getFirstChildOrThrow();
+        invariant(
+          $isListItemNode(parentItem),
+          'Expected parentItem to be a ListItemNode',
+        );
+        // Debugging helper: Print what remains
+        // console.log(JSON.stringify(parentItem.exportJSON(), null, 2));
+
+        const children = parentItem.getChildren();
+
+        // If the bug exists, this will likely fail because the nested list is still there
+        // or the structure is corrupted.
+        const hasNestedList = children.some((node) => $isListNode(node));
+        expect(hasNestedList).toBe(false);
+
+        // Optionally, check if the text is gone too
+        expect(parentItem.getTextContent()).toBe('');
+      });
+    });
   });
 });
 

packages/lexical-markdown/src/MarkdownTransformers.ts

@@ -681,6 +681,18 @@ export const LINK: TextMatchTransformer = {
     /(?:\[(.+?)\])(?:\((?:([^()\s]+)(?:\s"((?:[^"]*\\")*[^"]*)"\s*)?)\))$/,
   replace: (textNode, match) => {
     const [, linkText, linkUrl, linkTitle] = match;
+    const matchText = match[0];
+
+    const textContent = textNode.getTextContent();
+    const localMatchIndex = textContent.indexOf(matchText);
+    if (localMatchIndex === -1) {
+      return;
+    }
+
+    //split only if necessary
+    if (localMatchIndex > 0) {
+      textNode = textNode.splitText(localMatchIndex)[1];
+    }
     const linkNode = $createLinkNode(linkUrl, {title: linkTitle});
     const openBracketAmount = linkText.split('[').length - 1;
     const closeBracketAmount = linkText.split(']').length - 1;

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

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import {createHeadlessEditor} from '@lexical/headless';
+import {LinkNode} from '@lexical/link';
+import {$createParagraphNode, $createTextNode, $getRoot} from 'lexical';
+import {describe, expect, test} from 'vitest';
+
+import {LINK} from '../../MarkdownTransformers';
+
+describe('MarkdownLinkBug', () => {
+  test('Expect text BEFORE a markdown link to be preserved', () => {
+    const editor = createHeadlessEditor({
+      nodes: [LinkNode],
+      onError(error) {},
+    });
+
+    editor.update(() => {
+      // creating a scenario: "Start [test](url)"
+      const root = $getRoot();
+      const paragraph = $createParagraphNode();
+      const textNode = $createTextNode('Start [test](url)');
+      paragraph.append(textNode);
+      root.append(paragraph);
+
+      const match = LINK.regExp.exec(textNode.getTextContent());
+
+      expect(match).not.toBeNull();
+      if (match) {
+        LINK.replace!(textNode, match);
+      }
+
+      // paragraph should now contain a text node with "Start " and a link node with "test"
+      const children = paragraph.getChildren();
+      expect(children.length).toBe(2);
+      expect(children[0].getTextContent()).toBe('Start ');
+      expect(children[1].getTextContent()).toBe('test');
+      expect(children[1]).toBeInstanceOf(LinkNode);
+    });
+  });
+});