diff --git a/packages/lexical-playground/__tests__/e2e/AutoLinks.spec.mjs b/packages/lexical-playground/__tests__/e2e/AutoLinks.spec.mjs index 916b1bfc644..b13e2e4a70a 100644 --- 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` +

+ + Hellohttp://example.com and more + +

+ `, + undefined, + {ignoreClasses: true}, + ); + + // Add space before link text + await moveToLineBeginning(page); + await moveRight(page, 5); + await page.keyboard.type(' '); + + await assertHTML( + page, + html` +

+ Hello + + + http://example.com + + + + and more + +

+ `, + undefined, + {ignoreClasses: true}, + ); + }); }); diff --git a/packages/lexical-react/src/LexicalAutoLinkPlugin.ts b/packages/lexical-react/src/LexicalAutoLinkPlugin.ts index 37c080f72f9..63e7212b5b2 100644 --- 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, 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);