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.

Sign up for GitHub

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

Jump to bottom

Improved paste of content into quote nodes #1297

Merged
merged 1 commit into from
Jul 3, 2024
Merged

Improved paste of content into quote nodes #1297

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions packages/koenig-lexical/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
"@lexical/selection": "0.14.2",
"@lexical/text": "0.14.2",
"@lexical/utils": "0.14.2",
"@lexical/html": "0.14.2",
"@lezer/highlight": "^1.1.3",
"@playwright/test": "^1.33.0",
"@prettier/sync": "^0.3.0",
Expand Down
41 changes: 41 additions & 0 deletions packages/koenig-lexical/src/plugins/KoenigBehaviourPlugin.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ import {
PASTE_COMMAND,
createCommand
} from 'lexical';
import {$generateNodesFromDOM} from '@lexical/html';
import {$generateNodesFromSerializedNodes, $insertGeneratedNodes} from '@lexical/clipboard';
import {$insertAndSelectNode} from '../utils/$insertAndSelectNode';
import {
$isAtStartOfDocument,
Expand Down Expand Up @@ -1281,6 +1283,45 @@ function useKoenigBehaviour({editor, containerElem, cursorDidExitAtTop, isNested

const text = clipboardEvent?.clipboardData?.getData(MIME_TEXT_PLAIN);
const html = clipboardEvent?.clipboardData?.getData(MIME_TEXT_HTML);
const lexical = clipboardEvent?.clipboardData?.getData('application/x-lexical-editor');

const selection = $getSelection();

// if current selection is an empty quote, make sure a
// paste with a single paragraph doesn't clear the quote formatting
const anchorNode = selection.anchor.getNode();
if (($isQuoteNode(anchorNode) || $isAsideNode(anchorNode)) && anchorNode.isEmpty() && selection && $isRangeSelection(selection) && selection.isCollapsed()) {
let nodes;

if (lexical) {
const {namespace, nodes: pastedNodes} = JSON.parse(lexical);
if (namespace === 'KoenigEditor') {
// completely empty paragraph nodes can be copied when selection hits end of paragraph,
// exclude those so they don't interfere
const filteredNodes = pastedNodes?.filter?.(n => n.type === 'paragraph' && n.children.length > 0) || [];

if (filteredNodes.length === 1 && filteredNodes[0].type === 'paragraph') {
nodes = $generateNodesFromSerializedNodes(filteredNodes[0].children);
}
}
} else if (html) {
const dom = new DOMParser().parseFromString(html, 'text/html');

dom.querySelectorAll('body > br').forEach(br => br.remove());

const pastedNodes = $generateNodesFromDOM(editor, dom);

if (pastedNodes.length === 1 && $isParagraphNode(pastedNodes[0])) {
nodes = pastedNodes[0].getChildren();
}
}

if (nodes && Array.isArray(nodes) && nodes.length > 0) {
$insertGeneratedNodes(editor, nodes, selection);
return true;
}
}

// TODO: replace with better regex to include more protocols like mailto, ftp, etc
const linkMatch = text?.match(/^(https?:\/\/[^\s]+)$/);

Expand Down
206 changes: 205 additions & 1 deletion packages/koenig-lexical/test/e2e/paste-behaviour.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import fs from 'fs';
import {assertHTML, ctrlOrCmd, focusEditor, html, initialize, insertCard, paste, pasteHtml, pasteText} from '../utils/e2e';
import {assertHTML, ctrlOrCmd, focusEditor, html, initialize, insertCard, paste, pasteHtml, pasteLexical, pasteText} from '../utils/e2e';
import {expect, test} from '@playwright/test';

test.describe('Paste behaviour', async () => {
Expand Down Expand Up @@ -307,6 +307,210 @@ test.describe('Paste behaviour', async () => {
});
});

test.describe('Quotes', function () {
test.describe('Lexical paste', function () {
test('keeps quote formatting when pasting text node', async function () {
const copiedLexical = {namespace: 'KoenigEditor', nodes: [{
detail: 0,
format: 0,
mode: 'normal',
style: '',
text: 'There\'s a whole lot to discover in this editor. Let us help you settle in.',
type: 'extended-text',
version: 1
}]};

await focusEditor(page);
await page.keyboard.type('> ');
await expect(page.locator('[data-lexical-editor] blockquote')).toBeVisible();
await pasteLexical(page, JSON.stringify(copiedLexical));
await expect(page.locator('[data-lexical-editor] blockquote')).toBeVisible();
});

test('keeps quote formatting when pasting single paragraph', async function () {
const copiedLexical = {namespace: 'KoenigEditor', nodes: [{
children: [{
detail: 0,
format: 0,
mode: 'normal',
style: '',
text: 'There\'s a whole lot to discover in this editor. Let us help you settle in.',
type: 'extended-text',
version: 1
}],
direction: 'ltr',
format: '',
indent: 0,
type: 'paragraph',
version: 1
}]};

await focusEditor(page);
await page.keyboard.type('> ');
await expect(page.locator('[data-lexical-editor] blockquote')).toBeVisible();
await pasteLexical(page, JSON.stringify(copiedLexical));
await expect(page.locator('[data-lexical-editor] blockquote')).toBeVisible();
});

test('keeps quote formatting when pasting single paragraph with trailing empty paragraph', async function () {
const copiedLexical = {namespace: 'KoenigEditor', nodes: [{
children: [{
detail: 0,
format: 0,
mode: 'normal',
style: '',
text: 'There\'s a whole lot to discover in this editor. Let us help you settle in.',
type: 'extended-text',
version: 1
}],
direction: 'ltr',
format: '',
indent: 0,
type: 'paragraph',
version: 1
}, {
children: [],
direction: 'ltr',
format: '',
indent: 0,
type: 'paragraph',
version: 1
}]};

await focusEditor(page);
await page.keyboard.type('> ');
await expect(page.locator('[data-lexical-editor] blockquote')).toBeVisible();
await pasteLexical(page, JSON.stringify(copiedLexical));
await expect(page.locator('[data-lexical-editor] blockquote')).toBeVisible();
});

test('handles paste of text nodes with links', async function () {
const copiedLexical = {namespace: 'KoenigEditor', nodes: [
{
detail: 0,
format: 0,
mode: 'normal',
style: '',
text: 'For the full list of markdown references, check ',
type: 'extended-text',
version: 1
},
{
children: [
{
detail: 0,
format: 0,
mode: 'normal',
style: '',
text: 'ghost.org/changelog/markdown/',
type: 'extended-text',
version: 1
}
],
direction: 'ltr',
format: '',
indent: 0,
type: 'link',
version: 1,
rel: null,
target: null,
title: null,
url: 'https://ghost.org/changelog/markdown/'
},
{
detail: 0,
format: 0,
mode: 'normal',
style: '',
text: '.',
type: 'extended-text',
version: 1
}
]};

await focusEditor(page);
await page.keyboard.type('> ');
await expect(page.locator('[data-lexical-editor] blockquote')).toBeVisible();
await pasteLexical(page, JSON.stringify(copiedLexical));

await assertHTML(page, html`
<blockquote dir="ltr">
<span data-lexical-text="true">For the full list of markdown references, check</span>
<a href="https://ghost.org/changelog/markdown/" dir="ltr">
<span data-lexical-text="true">ghost.org/changelog/markdown/</span>
</a>
<span data-lexical-text="true">.</span>
</blockquote>
`);
});

test('handles paragraph paste onto non-empty quote', async function () {
const copiedLexical = {namespace: 'KoenigEditor', nodes: [{
children: [{
detail: 0,
format: 0,
mode: 'normal',
style: '',
text: 'There\'s a whole lot to discover in this editor. Let us help you settle in.',
type: 'extended-text',
version: 1
}],
direction: 'ltr',
format: '',
indent: 0,
type: 'paragraph',
version: 1
}]};

await focusEditor(page);
await page.keyboard.type('> ');
await page.keyboard.type('Some text ');
await expect(page.locator('[data-lexical-editor] blockquote')).toBeVisible();
await pasteLexical(page, JSON.stringify(copiedLexical));

await assertHTML(page, html`
<blockquote dir="ltr">
<span data-lexical-text="true">
Some text There's a whole lot to discover in this editor. Let us help you settle in.
</span>
</blockquote>
`);
});
});

test.describe('HTML paste', function () {
test('keeps quote formatting when pasting text', async function () {
const copiedHtml = `<meta charset='utf-8'><span>Nam viverra blandit massa id vehicula.</span>`;

await focusEditor(page);
await page.keyboard.type('> ');
await expect(page.locator('[data-lexical-editor] blockquote')).toBeVisible();
await pasteHtml(page, copiedHtml);

await assertHTML(page, html`
<blockquote dir="ltr">
<span data-lexical-text="true">Nam viverra blandit massa id vehicula.</span>
</blockquote>
`);
});

test('keeps quote formatting when pasting single paragraph', async function () {
const copiedHtml = `<meta charset='utf-8'><p>Nam viverra blandit massa id vehicula.</p><br>`;

await focusEditor(page);
await page.keyboard.type('> ');
await expect(page.locator('[data-lexical-editor] blockquote')).toBeVisible();
await pasteHtml(page, copiedHtml);

await assertHTML(page, html`
<blockquote dir="ltr">
<span data-lexical-text="true">Nam viverra blandit massa id vehicula.</span>
</blockquote>
`);
});
});
});

test.describe('Office.com Word', function () {
test('supports basic text formatting', async function () {
const copiedHtml = fs.readFileSync('test/e2e/fixtures/paste/office-com-text-formats.html', 'utf8');
Expand Down
Loading