[lexical-react] Fix autolink styles on creation (#6069)

facebook · May 9, 2024 · 3dfd2b7 · 3dfd2b7
1 parent 5b20765
commit 3dfd2b7
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 4 deletions.
diff --git a/packages/lexical-playground/__tests__/e2e/AutoLinks.spec.mjs b/packages/lexical-playground/__tests__/e2e/AutoLinks.spec.mjs
@@ -331,4 +331,55 @@ test.describe('Auto Links', () => {
       {ignoreClasses: true},
     );
   });
+
+  test('Can convert url-like text with styles into links', async ({
+    page,
+    isPlainText,
+  }) => {
+    test.skip(isPlainText);
+    await focusEditor(page);
+
+    //increase font size
+    await click(page, '.font-increment');
+    await click(page, '.font-increment');
+
+    await page.keyboard.type('Hellohttp://example.com and more');
+
+    await assertHTML(
+      page,
+      html`
+        <p dir="ltr">
+          <span style="font-size: 19px;" data-lexical-text="true">
+            Hellohttp://example.com and more
+          </span>
+        </p>
+      `,
+      undefined,
+      {ignoreClasses: true},
+    );
+
+    // Add space before link text
+    await moveToLineBeginning(page);
+    await moveRight(page, 5);
+    await page.keyboard.type(' ');
+
+    await assertHTML(
+      page,
+      html`
+        <p dir="ltr">
+          <span style="font-size: 19px;" data-lexical-text="true">Hello</span>
+          <a href="http://example.com" dir="ltr">
+            <span style="font-size: 19px;" data-lexical-text="true">
+              http://example.com
+            </span>
+          </a>
+          <span style="font-size: 19px;" data-lexical-text="true">
+            and more
+          </span>
+        </p>
+      `,
+      undefined,
+      {ignoreClasses: true},
+    );
+  });
 });
diff --git a/packages/lexical-react/src/LexicalAutoLinkPlugin.ts b/packages/lexical-react/src/LexicalAutoLinkPlugin.ts
@@ -179,7 +179,7 @@ function extractMatchingNodes(
   ];
 }
 
-function createAutoLinkNode(
+function $createAutoLinkNode_(
   nodes: TextNode[],
   startIndex: number,
   endIndex: number,
@@ -200,6 +200,7 @@ function createAutoLinkNode(
     const textNode = $createTextNode(match.text);
     textNode.setFormat(linkTextNode.getFormat());
     textNode.setDetail(linkTextNode.getDetail());
+    textNode.setStyle(linkTextNode.getStyle());
     linkNode.append(textNode);
     linkTextNode.replace(linkNode);
     return remainingTextNode;
@@ -240,6 +241,7 @@ function createAutoLinkNode(
     const textNode = $createTextNode(firstLinkTextNode.getTextContent());
     textNode.setFormat(firstLinkTextNode.getFormat());
     textNode.setDetail(firstLinkTextNode.getDetail());
+    textNode.setStyle(firstLinkTextNode.getStyle());
     linkNode.append(textNode, ...linkNodes);
     // it does not preserve caret position if caret was at the first text node
     // so we need to restore caret position
@@ -256,7 +258,7 @@ function createAutoLinkNode(
   return undefined;
 }
 
-function handleLinkCreation(
+function $handleLinkCreation(
   nodes: TextNode[],
   matchers: Array<LinkMatcher>,
   onChange: ChangeHandler,
@@ -290,7 +292,7 @@ function handleLinkCreation(
 
       const actualMatchStart = invalidMatchEnd + matchStart - matchingOffset;
       const actualMatchEnd = invalidMatchEnd + matchEnd - matchingOffset;
-      const remainingTextNode = createAutoLinkNode(
+      const remainingTextNode = $createAutoLinkNode_(
         matchingNodes,
         actualMatchStart,
         actualMatchEnd,
@@ -449,7 +451,7 @@ function useAutoLink(
               !$isAutoLinkNode(previous))
           ) {
             const textNodesToMatch = getTextNodesToMatch(textNode);
-            handleLinkCreation(textNodesToMatch, matchers, onChangeWrapped);
+            $handleLinkCreation(textNodesToMatch, matchers, onChangeWrapped);
           }
 
           handleBadNeighbors(textNode, matchers, onChangeWrapped);