;
}): JSX.Element | null {
const [editor] = useLexicalComposerContext();
- return useFloatingTextFormatToolbar(editor, anchorElem);
+ return useFloatingTextFormatToolbar(editor, anchorElem, setIsLinkEditMode);
}
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) => {
From 57553453582c1e16284c099c07f85bd15a76cacc Mon Sep 17 00:00:00 2001
From: wnhlee <2wheeh@gmail.com>
Date: Sun, 7 Jan 2024 16:07:09 +0900
Subject: [PATCH 2/6] accordingly fix tests
---
.../__tests__/e2e/AutoLinks.spec.mjs | 1 +
.../__tests__/e2e/Links.spec.mjs | 31 +++++++++++++++++++
2 files changed, 32 insertions(+)
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/Links.spec.mjs b/packages/lexical-playground/__tests__/e2e/Links.spec.mjs
index adacd1b05b0..521ee37e304 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,
@@ -1716,6 +1740,7 @@ test.describe('Links', () => {
// link
await click(page, '.link');
+ await click(page, '.link-confirm');
await assertHTML(
page,
@@ -1819,6 +1844,7 @@ test.describe('Links', () => {
await selectCharacters(page, 'left', 5);
await click(page, '.link');
+ await click(page, '.link-confirm');
await assertHTML(
page,
@@ -1873,6 +1899,7 @@ test.describe('Links', () => {
await selectAll(page);
await click(page, '.link');
+ await click(page, '.link-confirm');
await assertHTML(
page,
@@ -1903,6 +1930,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 +1972,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 +2009,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 +2041,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');
From 32ec9d30a4e903a8649d907948b5667561f29ef9 Mon Sep 17 00:00:00 2001
From: wnhlee <2wheeh@gmail.com>
Date: Sun, 7 Jan 2024 16:47:54 +0900
Subject: [PATCH 3/6] revert floating one
---
packages/lexical-playground/src/Editor.tsx | 1 -
.../FloatingTextFormatToolbarPlugin/index.tsx | 12 ++----------
2 files changed, 2 insertions(+), 11 deletions(-)
diff --git a/packages/lexical-playground/src/Editor.tsx b/packages/lexical-playground/src/Editor.tsx
index acbea2123f3..af278d36820 100644
--- a/packages/lexical-playground/src/Editor.tsx
+++ b/packages/lexical-playground/src/Editor.tsx
@@ -215,7 +215,6 @@ export default function Editor(): JSX.Element {
/>
>
)}
diff --git a/packages/lexical-playground/src/plugins/FloatingTextFormatToolbarPlugin/index.tsx b/packages/lexical-playground/src/plugins/FloatingTextFormatToolbarPlugin/index.tsx
index 1a9b72e0827..b1f00176654 100644
--- a/packages/lexical-playground/src/plugins/FloatingTextFormatToolbarPlugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/FloatingTextFormatToolbarPlugin/index.tsx
@@ -22,7 +22,7 @@ import {
LexicalEditor,
SELECTION_CHANGE_COMMAND,
} from 'lexical';
-import {Dispatch, useCallback, useEffect, useRef, useState} from 'react';
+import {useCallback, useEffect, useRef, useState} from 'react';
import * as React from 'react';
import {createPortal} from 'react-dom';
@@ -42,7 +42,6 @@ function TextFormatFloatingToolbar({
isStrikethrough,
isSubscript,
isSuperscript,
- setIsLinkEditMode,
}: {
editor: LexicalEditor;
anchorElem: HTMLElement;
@@ -54,16 +53,13 @@ function TextFormatFloatingToolbar({
isSubscript: boolean;
isSuperscript: boolean;
isUnderline: boolean;
- setIsLinkEditMode: Dispatch;
}): JSX.Element {
const popupCharStylesEditorRef = useRef(null);
const insertLink = useCallback(() => {
if (!isLink) {
- setIsLinkEditMode(true);
editor.dispatchCommand(TOGGLE_LINK_COMMAND, 'https://');
} else {
- setIsLinkEditMode(false);
editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
}
}, [editor, isLink]);
@@ -274,7 +270,6 @@ function TextFormatFloatingToolbar({
function useFloatingTextFormatToolbar(
editor: LexicalEditor,
anchorElem: HTMLElement,
- setIsLinkEditMode: Dispatch,
): JSX.Element | null {
const [isText, setIsText] = useState(false);
const [isLink, setIsLink] = useState(false);
@@ -382,7 +377,6 @@ function useFloatingTextFormatToolbar(
isSuperscript={isSuperscript}
isUnderline={isUnderline}
isCode={isCode}
- setIsLinkEditMode={setIsLinkEditMode}
/>,
anchorElem,
);
@@ -390,11 +384,9 @@ function useFloatingTextFormatToolbar(
export default function FloatingTextFormatToolbarPlugin({
anchorElem = document.body,
- setIsLinkEditMode,
}: {
anchorElem?: HTMLElement;
- setIsLinkEditMode: Dispatch;
}): JSX.Element | null {
const [editor] = useLexicalComposerContext();
- return useFloatingTextFormatToolbar(editor, anchorElem, setIsLinkEditMode);
+ return useFloatingTextFormatToolbar(editor, anchorElem);
}
From 6ed818600d59b183104ea1f0a94a9ef88e6e5f29 Mon Sep 17 00:00:00 2001
From: wnhlee <2wheeh@gmail.com>
Date: Sun, 7 Jan 2024 16:50:26 +0900
Subject: [PATCH 4/6] cover other tests
---
.../e2e/CopyAndPaste/html/LinksHTMLCopyAndPaste.spec.mjs | 5 +++++
.../__tests__/e2e/CopyAndPaste/lexical/CopyAndPaste.spec.mjs | 1 +
.../regression/1083-backspace-with-element-at-front.spec.mjs | 2 ++
.../regression/3136-insert-nodes-adjacent-to-inline.spec.mjs | 2 ++
.../regression/5251-paste-into-inline-element.spec.mjs | 1 +
5 files changed, 11 insertions(+)
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..44a8673a8c5 100644
--- a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/LinksHTMLCopyAndPaste.spec.mjs
+++ b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/LinksHTMLCopyAndPaste.spec.mjs
@@ -67,6 +67,7 @@ test.describe('HTML Links CopyAndPaste', () => {
await selectAll(page);
await click(page, '.link');
+ await click(page, '.link-confirm');
await assertHTML(
page,
@@ -268,6 +269,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 +310,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 +356,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 +403,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__/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);
From c04fb5805bec626977b21710e38e5809e64fc651 Mon Sep 17 00:00:00 2001
From: wnhlee <2wheeh@gmail.com>
Date: Sun, 7 Jan 2024 17:08:22 +0900
Subject: [PATCH 5/6] cover copyandpaste
---
.../e2e/CopyAndPaste/html/LinksHTMLCopyAndPaste.spec.mjs | 8 ++------
1 file changed, 2 insertions(+), 6 deletions(-)
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 44a8673a8c5..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,8 +64,8 @@ test.describe('HTML Links CopyAndPaste', () => {
await selectAll(page);
+ // unlink
await click(page, '.link');
- await click(page, '.link-confirm');
await assertHTML(
page,
@@ -79,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,
From 5613e8454ce4823612c3c0f566dc09445695fda2 Mon Sep 17 00:00:00 2001
From: wnhlee <2wheeh@gmail.com>
Date: Sun, 7 Jan 2024 19:52:09 +0900
Subject: [PATCH 6/6] fix selection assertion
---
.../__tests__/e2e/Links.spec.mjs | 24 +++++++++++++++----
1 file changed, 19 insertions(+), 5 deletions(-)
diff --git a/packages/lexical-playground/__tests__/e2e/Links.spec.mjs b/packages/lexical-playground/__tests__/e2e/Links.spec.mjs
index 521ee37e304..bddd2355035 100644
--- a/packages/lexical-playground/__tests__/e2e/Links.spec.mjs
+++ b/packages/lexical-playground/__tests__/e2e/Links.spec.mjs
@@ -1653,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],
});
@@ -1690,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],
});
@@ -1767,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');
@@ -1803,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