Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛 Fixed duplicate text when pasting URL on selection with multiple formats #1157

Merged
merged 1 commit into from
Feb 7, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 3 additions & 8 deletions packages/koenig-lexical/src/plugins/KoenigBehaviourPlugin.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {$createAsideNode, $isAsideNode} from '../nodes/AsideNode';
import {$createCodeBlockNode} from '../nodes/CodeBlockNode';
import {$createEmbedNode} from '../nodes/EmbedNode';
import {$createHeadingNode, $createQuoteNode, $isQuoteNode} from '@lexical/rich-text';
import {$createLinkNode, $isLinkNode} from '@lexical/link';
import {$createLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND} from '@lexical/link';
import {
$createNodeSelection,
$createParagraphNode,
Expand Down Expand Up @@ -1310,14 +1310,9 @@ function useKoenigBehaviour({editor, containerElem, cursorDidExitAtTop, isNested
const nodeContent = node.getTextContent();

if (selectionContent.length > 0) {
const link = linkMatch[1];
const url = linkMatch[1];
if ($isRangeSelection(selection)) {
const textNode = selection.extract()[0];
const linkNode = $createLinkNode(link);
const linkTextNode = $createTextNode(selectionContent);
linkTextNode.setFormat(textNode.getFormat());
linkNode.append(linkTextNode);
textNode.replace(linkNode);
editor.dispatchCommand(TOGGLE_LINK_COMMAND, {url, rel: null});
}
return true;
}
Expand Down
38 changes: 38 additions & 0 deletions packages/koenig-lexical/test/e2e/paste-behaviour.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,44 @@ test.describe('Paste behaviour', async () => {
`);
});

test('pasted on selected text containing formats converts to link', async function () {
await focusEditor(page);
await page.keyboard.type('Text with ');
await page.keyboard.press(`${ctrlOrCmd()}+B`);
await page.keyboard.type('bold');
await page.keyboard.press(`${ctrlOrCmd()}+B`);
await page.keyboard.type(' and ');
await page.keyboard.press(`${ctrlOrCmd()}+I`);
await page.keyboard.type('italic');
await page.keyboard.press(`${ctrlOrCmd()}+I`);
await page.keyboard.type(' text.');

await assertHTML(page, html`
<p dir="ltr">
<span data-lexical-text="true">Text with </span>
<strong data-lexical-text="true">bold</strong>
<span data-lexical-text="true"> and </span>
<em data-lexical-text="true">italic</em>
<span data-lexical-text="true"> text.</span>
</p>
`);

await page.keyboard.press(`${ctrlOrCmd()}+A`);
await pasteText(page, 'https://ghost.org');

await assertHTML(page, html`
<p dir="ltr">
<a href="https://ghost.org" dir="ltr">
<span data-lexical-text="true">Text with </span>
<strong data-lexical-text="true">bold</strong>
<span data-lexical-text="true"> and </span>
<em data-lexical-text="true">italic</em>
<span data-lexical-text="true"> text.</span>
</a>
</p>
`);
});

test('pasted on selected text within a nested editor converts to link', async function () {
await focusEditor(page);
await page.keyboard.type('/callout', {delay: 10});
Expand Down
Loading