[lexical-text][lexical-playground] Bug Fix: Text entity transforms settle between text nodes of other formats (re-land of #9686)

.changeset/lexical-text-entity-node-state.md

@@ -0,0 +1,12 @@
+---
+'lexical': patch
+'@lexical/text': patch
+---
+
+[fix] `registerLexicalTextEntity` keeps the NodeState of a text entity (a hashtag, a keyword) that stops matching and becomes text, such as comment ids stored as NodeState, instead of dropping it
+
+The NodeState also comes back when that text is made an entity again in the same update, and plain text keeps its NodeState when it becomes an entity (state that `createNode` gives the entity wins). A token or segmented entity that text follows keeps its NodeState as well: it is turned back into text with it, and after twice in one update (or in updates batched into one commit) it is kept (taking the text its match extends into only when that text would merge with it), instead of looping forever. Editing inside a segmented node (typing, or removing a range that starts or ends in it) keeps its NodeState and detail too.
+
+Verify: put a comment (or any NodeState) on a hashtag, type right before it or delete its `#`, and check that its characters keep the comment.
+
+Verify also: type inside a segmented mention (or delete a range that starts in it) and check that the text left keeps its NodeState and `unmergeable` detail; paste ` #tag` right after a comment and check that the hashtag is not added to the comment.

.changeset/lexical-text-entity-settle.md

@@ -0,0 +1,11 @@
+---
+'@lexical/text': patch
+---
+
+[fix] `registerLexicalTextEntity` no longer loops forever ("One or more transforms are endlessly triggering additional transforms") when typing splits text that sits between two text nodes of other formats, such as a keyword in plain text between two bold words
+
+A match at the start of a text node is now left as text when the text node before it would turn it straight back into text.
+
+A hashtag or other entity right after text in another format is now turned back into text when typing makes it touch that text (`b#tag`), as a fresh parse would.
+
+Verify: text entities (hashtags, mentions, keywords) right after text in another format or style, before and after typing next to them.

packages/lexical-mark/src/__tests__/unit/MarkStateExtension.test.ts

@@ -898,6 +898,71 @@ describe('MarkStateExtension', () => {
       }
     });
 
+    test('a hashtag inserted at the edge of a marked run is not marked, like MarkNode', () => {
+      // The inserted text lands in the marked node, and the hashtag
+      // transform splits the hashtag off with a copy of that node's ids
+      // (which the hashtag keeps): those are not the inserted text's own
+      const cases: [string, number, string, string, string][] = [
+        [
+          'pasted after',
+          3,
+          ' #tag',
+          'paragraph("see"[c1] " " "#tag" " more")',
+          'paragraph(mark[c1]("see") " " "#tag" " more")',
+        ],
+        [
+          'code after',
+          3,
+          ' #tag',
+          'paragraph("see"[c1] " " "#tag" " more")',
+          'paragraph(mark[c1]("see") " " "#tag" " more")',
+        ],
+        [
+          'code before',
+          0,
+          '#tag ',
+          // As on main: the space lands in the text with "see"
+          'paragraph("#tag" " see"[c1] " more")',
+          'paragraph("#tag" " " mark[c1]("see") " more")',
+        ],
+      ];
+      for (const [how, at, text, expected, expectedWithMarkNode] of cases) {
+        for (const withMarkNode of [false, true]) {
+          const editor = buildEditorFromExtensions(
+            defineExtension({
+              dependencies: [
+                RichTextExtension,
+                HashtagExtension,
+                MarkExtension,
+                ...(withMarkNode ? [] : [MarkStateExtension]),
+              ],
+              name: '[root]',
+            }),
+          );
+          update(editor, () => $init('see more'));
+          update(editor, () => {
+            const selection = $select(0, 3);
+            if (withMarkNode) {
+              $wrapSelectionInMarkNode(selection, false, 'c1');
+            } else {
+              $addMarkID('c1', selection);
+            }
+          });
+          update(editor, () => $select(at));
+          if (how.startsWith('pasted')) {
+            editor.dispatchCommand(PASTE_COMMAND, pasteEvent(text));
+          } else {
+            update(editor, () => $select(at).insertText(text));
+          }
+          expect([how, withMarkNode, tree(editor)]).toEqual([
+            how,
+            withMarkNode,
+            withMarkNode ? expectedWithMarkNode : expected,
+          ]);
+        }
+      }
+    });
+
     test('pasted Lexical data keeps its ids after a marked hashtag', () => {
       // Pasted or inserted content with the same ids as the hashtag is not
       // taken for text split off it: its ids are a value of its own, not

packages/lexical-playground/__tests__/e2e/Hashtags.spec.mjs

@@ -6,12 +6,14 @@
  *
  */
 
-import {moveLeft} from '../keyboardShortcuts/index.mjs';
+import {moveLeft, toggleBold} from '../keyboardShortcuts/index.mjs';
 import {
   assertHTML,
   assertSelection,
   click,
+  expect,
   focusEditor,
+  getPageOrFrame,
   html,
   initialize,
   pasteFromClipboard,
@@ -83,6 +85,128 @@ test.describe('Hashtags', () => {
 
   test.describe(() => {
     test.skip(({isPlainText}) => isPlainText);
+
+    test('Typing hashtags between bold text settles', async ({page}) => {
+      // Hashtags next to bold text: "#foo" touches the bold "a" before it, so
+      // it is no hashtag, and "#bar" after a space is one. Typing a space
+      // inside "#foobar", between bold "a" and a hashtag before bold "!",
+      // keeps it that way. This settled before #9637's fix too (text after a
+      // hashtag only extends it); the keyword test below reproduces #9637.
+      await focusEditor(page);
+      await toggleBold(page);
+      await page.keyboard.type('a');
+      await toggleBold(page);
+      await page.keyboard.type('#foo #bar');
+      await assertHTML(
+        page,
+        html`
+          <p class="PlaygroundEditorTheme__paragraph" dir="auto">
+            <strong
+              class="PlaygroundEditorTheme__textBold"
+              data-lexical-text="true">
+              a
+            </strong>
+            <span data-lexical-text="true">#foo</span>
+            <span
+              class="PlaygroundEditorTheme__hashtag"
+              data-lexical-text="true">
+              #bar
+            </span>
+          </p>
+        `,
+      );
+
+      await expect(
+        getPageOrFrame(page).locator('div[contenteditable="true"] p').first(),
+      ).toHaveText('a#foo #bar');
+
+      await page.keyboard.press('Enter');
+      await toggleBold(page);
+      await page.keyboard.type('a');
+      await toggleBold(page);
+      await page.keyboard.type('#foobar #baz');
+      await toggleBold(page);
+      await page.keyboard.type('!');
+      await moveLeft(page, 9);
+      await page.keyboard.type(' ');
+      await assertHTML(
+        page,
+        html`
+          <p class="PlaygroundEditorTheme__paragraph" dir="auto">
+            <strong
+              class="PlaygroundEditorTheme__textBold"
+              data-lexical-text="true">
+              a
+            </strong>
+            <span data-lexical-text="true">#foo</span>
+            <span
+              class="PlaygroundEditorTheme__hashtag"
+              data-lexical-text="true">
+              #bar
+            </span>
+          </p>
+          <p class="PlaygroundEditorTheme__paragraph" dir="auto">
+            <strong
+              class="PlaygroundEditorTheme__textBold"
+              data-lexical-text="true">
+              a
+            </strong>
+            <span data-lexical-text="true">#foo bar</span>
+            <span
+              class="PlaygroundEditorTheme__hashtag"
+              data-lexical-text="true">
+              #baz
+            </span>
+            <strong
+              class="PlaygroundEditorTheme__textBold"
+              data-lexical-text="true">
+              !
+            </strong>
+          </p>
+        `,
+      );
+      await expect(
+        getPageOrFrame(page).locator('div[contenteditable="true"] p').nth(1),
+      ).toHaveText('a#foo bar #baz!');
+    });
+    test('Typing a space between two keywords between bold text settles', async ({
+      page,
+    }) => {
+      // #9637: neither "congrats" is a keyword, as each touches a bold
+      // letter. Before, the space was dropped with "One or more transforms
+      // are endlessly triggering additional transforms".
+      await focusEditor(page);
+      await toggleBold(page);
+      await page.keyboard.type('x');
+      await toggleBold(page);
+      await page.keyboard.type('congratscongrats');
+      await toggleBold(page);
+      await page.keyboard.type('y');
+      await moveLeft(page, 9);
+      await page.keyboard.type(' ');
+      await assertHTML(
+        page,
+        html`
+          <p class="PlaygroundEditorTheme__paragraph" dir="auto">
+            <strong
+              class="PlaygroundEditorTheme__textBold"
+              data-lexical-text="true">
+              x
+            </strong>
+            <span data-lexical-text="true">congrats congrats</span>
+            <strong
+              class="PlaygroundEditorTheme__textBold"
+              data-lexical-text="true">
+              y
+            </strong>
+          </p>
+        `,
+      );
+      await expect(
+        getPageOrFrame(page).locator('div[contenteditable="true"] p').first(),
+      ).toHaveText('xcongrats congratsy');
+    });
+
     test('Should not break when pasting multiple matches', async ({page}) => {
       await focusEditor(page);