diff --git a/packages/lexical-playground/__tests__/e2e/AutoLinks.spec.mjs b/packages/lexical-playground/__tests__/e2e/AutoLinks.spec.mjs index f02109bb3a9..009106e963d 100644 --- a/packages/lexical-playground/__tests__/e2e/AutoLinks.spec.mjs +++ b/packages/lexical-playground/__tests__/e2e/AutoLinks.spec.mjs @@ -165,6 +165,7 @@ test.describe('Auto Links', () => { await selectAll(page); await click(page, '.link'); + await click(page, '.link-confirm'); await assertHTML( page, diff --git a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/LinksHTMLCopyAndPaste.spec.mjs b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/LinksHTMLCopyAndPaste.spec.mjs index 8958b3359d5..2489924c190 100644 --- a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/LinksHTMLCopyAndPaste.spec.mjs +++ b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/LinksHTMLCopyAndPaste.spec.mjs @@ -21,7 +21,6 @@ import { assertSelection, click, copyToClipboard, - focus, focusEditor, html, initialize, @@ -42,7 +41,6 @@ test.describe('HTML Links CopyAndPaste', () => { }; await pasteFromClipboard(page, clipboard); - await assertHTML( page, html` @@ -66,6 +64,7 @@ test.describe('HTML Links CopyAndPaste', () => { await selectAll(page); + // unlink await click(page, '.link'); await assertHTML( @@ -78,10 +77,8 @@ test.describe('HTML Links CopyAndPaste', () => { ); await click(page, '.link'); - await click(page, '.link-edit'); - await focus(page, '.link-input'); await page.keyboard.type('facebook.com'); - await page.keyboard.press('Enter'); + await click(page, '.link-confirm'); await assertHTML( page, @@ -268,6 +265,7 @@ test.describe('HTML Links CopyAndPaste', () => { await page.keyboard.type('Link text'); await selectAll(page); await click(page, '.link'); + await click(page, '.link-confirm'); await moveRight(page, 1); await moveLeft(page, 4); @@ -308,6 +306,7 @@ test.describe('HTML Links CopyAndPaste', () => { await page.keyboard.type('Link text'); await selectAll(page); await click(page, '.link'); + await click(page, '.link-confirm'); await moveRight(page, 1); await moveLeft(page, 4); @@ -353,6 +352,7 @@ test.describe('HTML Links CopyAndPaste', () => { await page.keyboard.type('Link text'); await selectAll(page); await click(page, '.link'); + await click(page, '.link-confirm'); await moveRight(page, 1); await moveLeft(page, 4); @@ -399,6 +399,7 @@ test.describe('HTML Links CopyAndPaste', () => { await page.keyboard.type('Link text'); await selectAll(page); await click(page, '.link'); + await click(page, '.link-confirm'); await moveRight(page, 1); await moveLeft(page, 4); diff --git a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/lexical/CopyAndPaste.spec.mjs b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/lexical/CopyAndPaste.spec.mjs index 72debfad081..bbda6085ff2 100644 --- a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/lexical/CopyAndPaste.spec.mjs +++ b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/lexical/CopyAndPaste.spec.mjs @@ -792,6 +792,7 @@ test.describe('CopyAndPaste', () => { await page.keyboard.type('Hello'); await selectAll(page); await click(page, '.link'); + await click(page, '.link-confirm'); await page.keyboard.press('ArrowRight'); await page.keyboard.press('Space'); await page.keyboard.type('World'); diff --git a/packages/lexical-playground/__tests__/e2e/Links.spec.mjs b/packages/lexical-playground/__tests__/e2e/Links.spec.mjs index adacd1b05b0..bddd2355035 100644 --- a/packages/lexical-playground/__tests__/e2e/Links.spec.mjs +++ b/packages/lexical-playground/__tests__/e2e/Links.spec.mjs @@ -55,6 +55,7 @@ test.describe('Links', () => { // link await click(page, '.link'); + await click(page, '.link-confirm'); await assertHTML( page, @@ -191,6 +192,7 @@ test.describe('Links', () => { // link await click(page, '.link'); + await click(page, '.link-confirm'); await assertHTML( page, @@ -311,6 +313,7 @@ test.describe('Links', () => { // link await click(page, '.link'); + await click(page, '.link-confirm'); await assertHTML( page, @@ -378,6 +381,7 @@ test.describe('Links', () => { // link await click(page, '.link'); + await click(page, '.link-confirm'); await moveLeft(page, 1); @@ -432,6 +436,7 @@ test.describe('Links', () => { // link await click(page, '.link'); + await click(page, '.link-confirm'); await assertHTML( page, @@ -522,6 +527,7 @@ test.describe('Links', () => { // link await click(page, '.link'); + await click(page, '.link-confirm'); await assertHTML( page, @@ -565,6 +571,7 @@ test.describe('Links', () => { // link await click(page, '.link'); + await click(page, '.link-confirm'); await selectCharacters(page, 'left', 1); await page.keyboard.type('a'); @@ -592,6 +599,7 @@ test.describe('Links', () => { // link await click(page, '.link'); + await click(page, '.link-confirm'); await selectCharacters(page, 'right', 1); await page.keyboard.type('a'); @@ -654,6 +662,7 @@ test.describe('Links', () => { await moveLeft(page, 'b'.length); await selectCharacters(page, 'left', 1); await click(page, '.link'); + await click(page, '.link-confirm'); // Insert a character directly before the link await moveLeft(page, 1); @@ -730,6 +739,7 @@ test.describe('Links', () => { await moveLeft(page, 1); await selectCharacters(page, 'left', 1); await click(page, '.link'); + await click(page, '.link-confirm'); // Insert a character directly before the link await moveLeft(page, 1); @@ -803,6 +813,7 @@ test.describe('Links', () => { // Turn 'b' into a link await selectCharacters(page, 'left', 1); await click(page, '.link'); + await click(page, '.link-confirm'); // Insert a character directly before the link await moveLeft(page, 1); @@ -880,6 +891,7 @@ test.describe('Links', () => { await moveLeft(page, 'b'.length); await selectCharacters(page, 'left', 1); await click(page, '.link'); + await click(page, '.link-confirm'); // Insert a character directly after the link await moveRight(page, 1); @@ -955,6 +967,7 @@ test.describe('Links', () => { await moveLeft(page, 1); await selectCharacters(page, 'left', 1); await click(page, '.link'); + await click(page, '.link-confirm'); // Insert a character directly after the link await moveRight(page, 1); @@ -1030,6 +1043,7 @@ test.describe('Links', () => { // Turn 'b' into a link await selectCharacters(page, 'left', 1); await click(page, '.link'); + await click(page, '.link-confirm'); // Insert a character directly after the link await moveRight(page, 1); @@ -1157,6 +1171,7 @@ test.describe('Links', () => { // link await click(page, '.link'); + await click(page, '.link-confirm'); await assertHTML( page, @@ -1237,6 +1252,7 @@ test.describe('Links', () => { // Make it a link await click(page, '.link'); + await click(page, '.link-confirm'); await assertHTML( page, @@ -1330,6 +1346,7 @@ test.describe('Links', () => { // Make it a link await click(page, '.link'); + await click(page, '.link-confirm'); await assertHTML( page, @@ -1420,6 +1437,8 @@ test.describe('Links', () => { await selectAll(page); await click(page, '.link'); + await click(page, '.link-confirm'); + await assertHTML( page, `

{ ); await click(page, '.link'); + await click(page, '.link-confirm'); + await assertHTML( page, html` @@ -1534,6 +1555,8 @@ test.describe('Links', () => { await selectCharacters(page, 'left', 'Awesome Website'.length); await click(page, '.link'); + await click(page, '.link-confirm'); + await assertHTML( page, ` @@ -1602,6 +1625,7 @@ test.describe('Links', () => { // link await click(page, '.link'); + await click(page, '.link-confirm'); await assertHTML( page, @@ -1629,8 +1653,8 @@ test.describe('Links', () => { }); } else { await assertSelection(page, { - anchorOffset: 6, - anchorPath: [0, 0, 0], + anchorOffset: 0, + anchorPath: [0, 1], focusOffset: 5, focusPath: [0, 1, 0, 0], }); @@ -1666,7 +1690,7 @@ test.describe('Links', () => { } else { await assertSelection(page, { anchorOffset: 0, - anchorPath: [0, 1], + anchorPath: [0, 1, 0, 0], focusOffset: 5, focusPath: [0, 1, 0, 0], }); @@ -1716,6 +1740,7 @@ test.describe('Links', () => { // link await click(page, '.link'); + await click(page, '.link-confirm'); await assertHTML( page, @@ -1742,13 +1767,20 @@ test.describe('Links', () => { focusOffset: 0, focusPath: [0, 1, 0, 0], }); - } else { + } else if (browserName === 'chromium') { await assertSelection(page, { anchorOffset: 5, anchorPath: [0, 1, 0, 0], focusOffset: 6, focusPath: [0, 0, 0], }); + } else { + await assertSelection(page, { + anchorOffset: 5, + anchorPath: [0, 1, 0, 0], + focusOffset: 0, + focusPath: [0, 1], + }); } await setURL(page, 'facebook.com'); @@ -1778,13 +1810,20 @@ test.describe('Links', () => { focusOffset: 0, focusPath: [0, 1, 0, 0], }); - } else { + } else if (browserName === 'chromium') { await assertSelection(page, { anchorOffset: 5, anchorPath: [0, 1, 0, 0], focusOffset: 0, focusPath: [0, 1], }); + } else { + await assertSelection(page, { + anchorOffset: 5, + anchorPath: [0, 1, 0, 0], + focusOffset: 0, + focusPath: [0, 1, 0, 0], + }); } // unlink @@ -1819,6 +1858,7 @@ test.describe('Links', () => { await selectCharacters(page, 'left', 5); await click(page, '.link'); + await click(page, '.link-confirm'); await assertHTML( page, @@ -1873,6 +1913,7 @@ test.describe('Links', () => { await selectAll(page); await click(page, '.link'); + await click(page, '.link-confirm'); await assertHTML( page, @@ -1903,6 +1944,7 @@ test.describe('Links', () => { await page.keyboard.type('Hello awesome'); await selectAll(page); await click(page, '.link'); + await click(page, '.link-confirm'); await page.keyboard.press('ArrowRight'); await page.keyboard.type('world'); @@ -1944,6 +1986,7 @@ test.describe('Links', () => { await page.keyboard.type('some'); await selectAll(page); await click(page, '.link'); + await click(page, '.link-confirm'); await page.keyboard.press('ArrowRight'); await page.keyboard.type(' world'); @@ -1980,6 +2023,7 @@ test.describe('Links', () => { await page.keyboard.type('Hello awesome'); await selectAll(page); await click(page, '.link'); + await click(page, '.link-confirm'); await page.keyboard.press('ArrowRight'); await page.keyboard.type(' world'); @@ -2011,6 +2055,7 @@ test.describe('Links', () => { await page.keyboard.type('Hello awesome'); await selectAll(page); await click(page, '.link'); + await click(page, '.link-confirm'); await page.keyboard.press('ArrowRight'); await page.keyboard.type(' world'); diff --git a/packages/lexical-playground/__tests__/regression/1083-backspace-with-element-at-front.spec.mjs b/packages/lexical-playground/__tests__/regression/1083-backspace-with-element-at-front.spec.mjs index df6dd93a3fe..adca688f6d3 100644 --- a/packages/lexical-playground/__tests__/regression/1083-backspace-with-element-at-front.spec.mjs +++ b/packages/lexical-playground/__tests__/regression/1083-backspace-with-element-at-front.spec.mjs @@ -32,6 +32,7 @@ test.describe('Regression test #1083', () => { await page.keyboard.type('Hello'); await selectAll(page); await click(page, '.link'); + await click(page, '.link-confirm'); await moveToLineEnd(page); await page.keyboard.type('World'); @@ -77,6 +78,7 @@ test.describe('Regression test #1083', () => { await page.keyboard.type('Hello'); await selectCharacters(page, 'left', 'Hello'.length); await click(page, '.link'); + await click(page, '.link-confirm'); await moveToLineEnd(page); await page.keyboard.type('World'); diff --git a/packages/lexical-playground/__tests__/regression/3136-insert-nodes-adjacent-to-inline.spec.mjs b/packages/lexical-playground/__tests__/regression/3136-insert-nodes-adjacent-to-inline.spec.mjs index 52655a3ac9b..91eb4c9df92 100644 --- a/packages/lexical-playground/__tests__/regression/3136-insert-nodes-adjacent-to-inline.spec.mjs +++ b/packages/lexical-playground/__tests__/regression/3136-insert-nodes-adjacent-to-inline.spec.mjs @@ -38,6 +38,7 @@ test.describe('Regression test #3136', () => { await page.keyboard.type('link'); await selectCharacters(page, 'left', 'link'.length); await click(page, '.link'); + await click(page, '.link-confirm'); // Select non-link text so that selection ends just before the link await moveLeft(page, 5); @@ -78,6 +79,7 @@ test.describe('Regression test #3136', () => { await page.keyboard.type('link'); await selectCharacters(page, 'left', 'link'.length); await click(page, '.link'); + await click(page, '.link-confirm'); // Non-link text await moveRight(page, 1); diff --git a/packages/lexical-playground/__tests__/regression/5251-paste-into-inline-element.spec.mjs b/packages/lexical-playground/__tests__/regression/5251-paste-into-inline-element.spec.mjs index 87b4fec2853..38be80d7478 100644 --- a/packages/lexical-playground/__tests__/regression/5251-paste-into-inline-element.spec.mjs +++ b/packages/lexical-playground/__tests__/regression/5251-paste-into-inline-element.spec.mjs @@ -49,6 +49,7 @@ test.describe('Regression test #5251', () => { await moveToPrevWord(page); await selectCharacters(page, 'right', 'World'.length); await click(page, '.link'); + await click(page, '.link-confirm'); // Copy "Hello bold" await moveToLineBeginning(page); diff --git a/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx b/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx index 8878ce0c078..c3aa5b09162 100644 --- a/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx +++ b/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx @@ -797,11 +797,13 @@ export default function ToolbarPlugin({ const insertLink = useCallback(() => { if (!isLink) { + setIsLinkEditMode(true); editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl('https://')); } else { + setIsLinkEditMode(false); editor.dispatchCommand(TOGGLE_LINK_COMMAND, null); } - }, [editor, isLink]); + }, [editor, isLink, setIsLinkEditMode]); const onCodeLanguageSelect = useCallback( (value: string) => {