github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-11-22 06:38:26 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Lexical: Got a range of Editor tests working

Browse Source
This commit is contained in:
Dan Brown 2024-09-18 17:31:51 +01:00
parent 22d078b47f
commit ccd486f2a9
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
26 changed files with 116 additions and 486 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
jest.config.ts
View File

@ -93,10 +93,13 @@ const config: Config = {
// "node"
// ],
modulePaths: ['/home/dan/web/bookstack/'],
modulePaths: ['./'],
// A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths),
moduleNameMapper: {
'lexical/shared/invariant': 'resources/js/wysiwyg/lexical/core/shared/__mocks__/invariant',
...pathsToModuleNameMapper(compilerOptions.paths),
},
// An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
// modulePathIgnorePatterns: [],

7
resources/js/wysiwyg/lexical/core/LexicalEditor.ts
View File

@ -1236,6 +1236,13 @@ export class LexicalEditor {
}
}
/**
* Commits any currently pending updates scheduled for the editor.
*/
commitUpdates(): void {
$commitPendingUpdates(this);
}
/**
* Removes focus from the editor.
*/

144
resources/js/wysiwyg/lexical/core/__tests__/unit/CodeBlock.test.ts
View File

@ -1,144 +0,0 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
import {$insertDataTransferForRichText} from '@lexical/clipboard';
import {
$createParagraphNode,
$getRoot,
$getSelection,
$isRangeSelection,
} from 'lexical';
import {
DataTransferMock,
initializeUnitTest,
invariant,
} from 'lexical/__tests__/utils';
describe('CodeBlock tests', () => {
initializeUnitTest(
(testEnv) => {
beforeEach(async () => {
const {editor} = testEnv;
await editor.update(() => {
const root = $getRoot();
const paragraph = $createParagraphNode();
root.append(paragraph);
paragraph.select();
});
});
/**
* Code example for tests:
*
* function run() {
* return [null, undefined, 2, ""];
* }
*
*/
const EXPECTED_HTML = `<code spellcheck="false" dir="ltr"><span data-lexical-text="true">function run() {</span><br><span data-lexical-text="true"> return [null, undefined, 2, ""];</span><br><span data-lexical-text="true">}</span></code>`;
const CODE_PASTING_TESTS = [
{
expectedHTML: EXPECTED_HTML,
name: 'VS Code',
pastedHTML: `<meta charset='utf-8'><div style="color: #d4d4d4;background-color: #1e1e1e;font-family: Menlo, Monaco, 'Courier New', monospace;font-weight: normal;font-size: 12px;line-height: 18px;white-space: pre;"><div><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">run</span><span style="color: #d4d4d4;">() {</span></div><div><span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">return</span><span style="color: #d4d4d4;"> [</span><span style="color: #569cd6;">null</span><span style="color: #d4d4d4;">, </span><span style="color: #569cd6;">undefined</span><span style="color: #d4d4d4;">, </span><span style="color: #b5cea8;">2</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">""</span><span style="color: #d4d4d4;">];</span></div><div><span style="color: #d4d4d4;">}</span></div></div>`,
},
{
expectedHTML: EXPECTED_HTML,
name: 'Quip',
pastedHTML: `<meta charset='utf-8'><pre>function run() {<br> return [null, undefined, 2, ""];<br>}</pre>`,
},
{
expectedHTML: EXPECTED_HTML,
name: 'WebStorm / Idea',
pastedHTML: `<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"></head><body><pre style="background-color:#2b2b2b;color:#a9b7c6;font-family:'JetBrains Mono',monospace;font-size:9.8pt;"><span style="color:#cc7832;">function&#32;</span><span style="color:#ffc66d;">run</span>()&#32;{<br>&#32;&#32;<span style="color:#cc7832;">return&#32;</span>[<span style="color:#cc7832;">null,&#32;undefined,&#32;</span><span style="color:#6897bb;">2</span><span style="color:#cc7832;">,&#32;</span><span style="color:#6a8759;">""</span>]<span style="color:#cc7832;">;<br></span>}</pre></body></html>`,
},
{
expectedHTML: `<code spellcheck="false" dir="ltr"><strong class="editor-text-bold" data-lexical-text="true">function</strong><span data-lexical-text="true"> run() {</span><br><span data-lexical-text="true"> </span><strong class="editor-text-bold" data-lexical-text="true">return</strong><span data-lexical-text="true"> [</span><strong class="editor-text-bold" data-lexical-text="true">null</strong><span data-lexical-text="true">, </span><strong class="editor-text-bold" data-lexical-text="true">undefined</strong><span data-lexical-text="true">, 2, ""];</span><br><span data-lexical-text="true">}</span></code>`,
name: 'Postman IDE',
pastedHTML: `<meta charset='utf-8'><div style="color: #000000;background-color: #fffffe;font-family: Menlo, Monaco, 'Courier New', monospace;font-weight: normal;font-size: 12px;line-height: 18px;white-space: pre;"><div><span style="color: #800555;font-weight: bold;">function</span><span style="color: #000000;"> run() {</span></div><div><span style="color: #000000;"> </span><span style="color: #800555;font-weight: bold;">return</span><span style="color: #000000;"> [</span><span style="color: #800555;font-weight: bold;">null</span><span style="color: #000000;">, </span><span style="color: #800555;font-weight: bold;">undefined</span><span style="color: #000000;">, </span><span style="color: #ff00aa;">2</span><span style="color: #000000;">, </span><span style="color: #2a00ff;">""</span><span style="color: #000000;">];</span></div><div><span style="color: #000000;">}</span></div></div>`,
},
{
expectedHTML: EXPECTED_HTML,
name: 'Slack message',
pastedHTML: `<meta charset='utf-8'><pre class="c-mrkdwn__pre" data-stringify-type="pre" style="box-sizing: inherit; margin: 4px 0px; padding: 8px; --saf-0:rgba(var(--sk_foreground_low,29,28,29),0.13); font-size: 12px; line-height: 1.50001; font-variant-ligatures: none; white-space: pre-wrap; word-break: break-word; word-break: normal; tab-size: 4; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace !important; border: 1px solid var(--saf-0); border-radius: 4px; background: rgba(var(--sk_foreground_min,29,28,29),0.04); counter-reset: list-0 0 list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; color: rgb(29, 28, 29); font-style: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">function run() {\n return [null, undefined, 2, ""];\n}</pre>`,
},
{
expectedHTML: `<code spellcheck="false" dir="ltr"><span data-lexical-text="true">const Lexical = requireCond('gk', 'runtime_is_dev', {</span><br><span data-lexical-text="true"> true: 'Lexical.dev',</span><br><span data-lexical-text="true"> false: 'Lexical.prod',</span><br><span data-lexical-text="true">});</span></code>`,
name: 'CodeHub',
pastedHTML: `<meta charset='utf-8'><div style="color: #000000;background-color: #fffffe;font-family: 'monaco,monospace', Menlo, Monaco, 'Courier New', monospace;font-weight: normal;font-size: 13px;line-height: 20px;white-space: pre;"><div><span style="color: #ff0000;">const</span><span style="color: #000000;"> </span><span style="color: #800000;">Lexical</span><span style="color: #000000;"> = </span><span style="color: #383838;">requireCond</span><span style="color: #000000;">(</span><span style="color: #863b00;">'gk'</span><span style="color: #000000;">, </span><span style="color: #863b00;">'runtime_is_dev'</span><span style="color: #000000;">, {</span></div><div><span style="color: #000000;"> </span><span style="color: #863b00;">true</span><span style="color: #000000;">: </span><span style="color: #863b00;">'Lexical.dev'</span><span style="color: #000000;">,</span></div><div><span style="color: #000000;"> </span><span style="color: #863b00;">false</span><span style="color: #000000;">: </span><span style="color: #863b00;">'Lexical.prod'</span><span style="color: #000000;">,</span></div><div><span style="color: #000000;">});</span></div></div>`,
},
{
expectedHTML: EXPECTED_HTML,
name: 'GitHub / Gist',
pastedHTML: `<meta charset='utf-8'><table class="highlight tab-size js-file-line-container js-code-nav-container js-tagsearch-file" data-tab-size="8" data-paste-markdown-skip="" data-tagsearch-lang="JavaScript" data-tagsearch-path="example.js" style="box-sizing: border-box; border-spacing: 0px; border-collapse: collapse; tab-size: 8; color: rgb(36, 41, 47); font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><tbody style="box-sizing: border-box;"><tr style="box-sizing: border-box;"><td id="file-example-js-LC1" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: ui-monospace, SFMono-Regular, &quot;SF Mono&quot;, Menlo, Consolas, &quot;Liberation Mono&quot;, monospace; font-size: 12px; color: var(--color-fg-default); overflow-wrap: normal; white-space: pre;"><span class="pl-k" style="box-sizing: border-box; color: var(--color-prettylights-syntax-keyword);">function</span> <span class="pl-en" style="box-sizing: border-box; color: var(--color-prettylights-syntax-entity);">run</span><span class="pl-kos" style="box-sizing: border-box;">(</span><span class="pl-kos" style="box-sizing: border-box;">)</span> <span class="pl-kos" style="box-sizing: border-box;">{</span></td></tr><tr style="box-sizing: border-box; background-color: transparent;"><td id="file-example-js-L2" class="blob-num js-line-number js-code-nav-line-number" data-line-number="2" style="box-sizing: border-box; padding: 0px 10px; width: 50px; min-width: 50px; font-family: ui-monospace, SFMono-Regular, &quot;SF Mono&quot;, Menlo, Consolas, &quot;Liberation Mono&quot;, monospace; font-size: 12px; line-height: 20px; color: var(--color-fg-subtle); text-align: right; white-space: nowrap; vertical-align: top; cursor: pointer; user-select: none;"></td><td id="file-example-js-LC2" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: ui-monospace, SFMono-Regular, &quot;SF Mono&quot;, Menlo, Consolas, &quot;Liberation Mono&quot;, monospace; font-size: 12px; color: var(--color-fg-default); overflow-wrap: normal; white-space: pre;"> <span class="pl-k" style="box-sizing: border-box; color: var(--color-prettylights-syntax-keyword);">return</span> <span class="pl-kos" style="box-sizing: border-box;">[</span><span class="pl-c1" style="box-sizing: border-box; color: var(--color-prettylights-syntax-constant);">null</span><span class="pl-kos" style="box-sizing: border-box;">,</span> <span class="pl-c1" style="box-sizing: border-box; color: var(--color-prettylights-syntax-constant);">undefined</span><span class="pl-kos" style="box-sizing: border-box;">,</span> <span class="pl-c1" style="box-sizing: border-box; color: var(--color-prettylights-syntax-constant);">2</span><span class="pl-kos" style="box-sizing: border-box;">,</span> <span class="pl-s" style="box-sizing: border-box; color: var(--color-prettylights-syntax-string);">""</span><span class="pl-kos" style="box-sizing: border-box;">]</span><span class="pl-kos" style="box-sizing: border-box;">;</span></td></tr><tr style="box-sizing: border-box;"><td id="file-example-js-L3" class="blob-num js-line-number js-code-nav-line-number" data-line-number="3" style="box-sizing: border-box; padding: 0px 10px; width: 50px; min-width: 50px; font-family: ui-monospace, SFMono-Regular, &quot;SF Mono&quot;, Menlo, Consolas, &quot;Liberation Mono&quot;, monospace; font-size: 12px; line-height: 20px; color: var(--color-fg-subtle); text-align: right; white-space: nowrap; vertical-align: top; cursor: pointer; user-select: none;"></td><td id="file-example-js-LC3" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: ui-monospace, SFMono-Regular, &quot;SF Mono&quot;, Menlo, Consolas, &quot;Liberation Mono&quot;, monospace; font-size: 12px; color: var(--color-fg-default); overflow-wrap: normal; white-space: pre;"><span class="pl-kos" style="box-sizing: border-box;">}</span></td></tr></tbody></table>`,
},
{
expectedHTML: `<p><code spellcheck="false" data-lexical-text="true"><span>12</span></code></p>`,
name: 'Single line <code>',
pastedHTML: `<meta charset='utf-8'><code>12</code>`,
},
{
expectedHTML: `<code spellcheck="false"><span data-lexical-text="true">1</span><br><span data-lexical-text="true">2</span></code>`,
name: 'Multiline <code>',
// TODO This is not correct. This resembles how Lexical exports code right now but
// semantically it should be wrapped in a pre
pastedHTML: `<meta charset='utf-8'><code>1<br>2</code>`,
},
{
expectedHTML: `<p dir="ltr"><strong class="editor-text-bold editor-text-italic editor-text-underline" data-lexical-text="true">Hello </strong><sub data-lexical-text="true"><strong class="editor-text-bold editor-text-italic">World </strong></sub><sup data-lexical-text="true"><strong class="editor-text-bold editor-text-italic editor-text-underline">Lexical</strong></sup></p>`,
name: 'Multiple text formats',
pastedHTML: `<strong style="font-weight: 700; font-style: italic; text-decoration: underline; color: rgb(0, 0, 0); font-size: 15px; text-align: left; text-indent: 0px; background-color: rgb(255, 255, 255);">Hello </strong><sub style="color: rgb(0, 0, 0); font-style: normal; font-weight: 400; text-align: left; text-indent: 0px; background-color: rgb(255, 255, 255);"><strong style="font-weight: 700; font-style: italic; text-decoration: line-through; font-size: 0.8em; vertical-align: sub !important;">World </strong></sub><sup style="color: rgb(0, 0, 0); font-style: normal; font-weight: 400; text-align: left; text-indent: 0px; background-color: rgb(255, 255, 255);"><strong style="font-weight: 700; font-style: italic; text-decoration: underline line-through; font-size: 0.8em; vertical-align: super;">Lexical</strong></sup>`,
},
{
expectedHTML: `<h1 dir="ltr"><span data-lexical-text="true">My document</span></h1>`,
name: 'Title from Google Docs',
pastedHTML: `<meta charset='utf-8'><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-whatever"><span style="font-size:26pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">My document</span></b>`,
},
{
expectedHTML: `<h1 dir="ltr"><span data-lexical-text="true">My document</span></h1>`,
name: 'Title from Google Docs Wrapped in Paragraph',
pastedHTML: `<meta charset='utf-8'><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-wjatever"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:3pt;"><span style="font-size:26pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">My document</span></p></b>`,
},
{
expectedHTML: `<p dir="ltr"><sub data-lexical-text="true"><span>subscript</span></sub><span data-lexical-text="true"> and </span><sup data-lexical-text="true"><span>superscript</span></sup></p>`,
name: 'Subscript and Superscript',
pastedHTML: `<b style="font-weight:normal;" id="docs-internal-guid-374b5f9d-7fff-9120-bcb0-1f5c1b6d59fa"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;"><span style="font-size:0.6em;vertical-align:sub;">subscript</span></span><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;"> and </span><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;"><span style="font-size:0.6em;vertical-align:super;">superscript</span></span></b>`,
},
];
CODE_PASTING_TESTS.forEach((testCase, i) => {
test(`Code block html paste: ${testCase.name}`, async () => {
const {editor} = testEnv;
const dataTransfer = new DataTransferMock();
dataTransfer.setData('text/html', testCase.pastedHTML);
await editor.update(() => {
const selection = $getSelection();
invariant(
$isRangeSelection(selection),
'isRangeSelection(selection)',
);
$insertDataTransferForRichText(dataTransfer, selection, editor);
});
expect(testEnv.innerHTML).toBe(testCase.expectedHTML);
});
});
},
{
namespace: 'test',
theme: {
text: {
bold: 'editor-text-bold',
italic: 'editor-text-italic',
underline: 'editor-text-underline',
},
},
},
);
});

2
resources/js/wysiwyg/lexical/core/__tests__/unit/HTMLCopyAndPaste.test.ts
View File

@ -17,7 +17,7 @@ import {
DataTransferMock,
initializeUnitTest,
invariant,
} from 'lexical/src/__tests__/utils';
} from 'lexical/__tests__/utils';
describe('HTMLCopyAndPaste tests', () => {
initializeUnitTest(

348
resources/js/wysiwyg/lexical/core/__tests__/unit/LexicalEditor.test.ts
View File

@ -57,11 +57,13 @@ import {
describe('LexicalEditor tests', () => {
let container: HTMLElement;
let reactRoot: Root;
function setContainerChild(el: HTMLElement) {
container.innerHTML = '';
container.append(el);
}
beforeEach(() => {
container = document.createElement('div');
reactRoot = createRoot(container);
document.body.appendChild(container);
});
@ -74,49 +76,33 @@ describe('LexicalEditor tests', () => {
});
function useLexicalEditor(
rootElementRef: React.RefObject<HTMLDivElement>,
rootElement: HTMLDivElement,
onError?: (error: Error) => void,
nodes?: ReadonlyArray<Klass<LexicalNode> | LexicalNodeReplacement>,
) {
const editor = useMemo(
() =>
createTestEditor({
nodes: nodes ?? [],
onError: onError || jest.fn(),
theme: {
text: {
bold: 'editor-text-bold',
italic: 'editor-text-italic',
underline: 'editor-text-underline',
},
},
}),
[onError, nodes],
);
useEffect(() => {
const rootElement = rootElementRef.current;
editor.setRootElement(rootElement);
}, [rootElementRef, editor]);
const editor = createTestEditor({
nodes: nodes ?? [],
onError: onError || jest.fn(),
theme: {
text: {
bold: 'editor-text-bold',
italic: 'editor-text-italic',
underline: 'editor-text-underline',
},
},
});
editor.setRootElement(rootElement);
return editor;
}
let editor: LexicalEditor;
function init(onError?: (error: Error) => void) {
const ref = createRef<HTMLDivElement>();
const edContainer = document.createElement('div');
edContainer.setAttribute('contenteditable', 'true');
function TestBase() {
editor = useLexicalEditor(ref, onError);
return <div ref={ref} contentEditable={true} />;
}
ReactTestUtils.act(() => {
reactRoot.render(<TestBase />);
});
setContainerChild(edContainer);
editor = useLexicalEditor(edContainer, onError);
}
async function update(fn: () => void) {
@ -870,21 +856,12 @@ describe('LexicalEditor tests', () => {
});
it('Should be able to update an editor state without a root element', () => {
const ref = createRef<HTMLDivElement>();
const element = document.createElement('div');
element.setAttribute('contenteditable', 'true');
setContainerChild(element);
function TestBase({element}: {element: HTMLElement | null}) {
editor = useMemo(() => createTestEditor(), []);
editor = createTestEditor();
useEffect(() => {
editor.setRootElement(element);
}, [element]);
return <div ref={ref} contentEditable={true} />;
}
ReactTestUtils.act(() => {
reactRoot.render(<TestBase element={null} />);
});
editor.update(() => {
const root = $getRoot();
const paragraph = $createParagraphNode();
@ -895,9 +872,7 @@ describe('LexicalEditor tests', () => {
expect(container.innerHTML).toBe('<div contenteditable="true"></div>');
ReactTestUtils.act(() => {
reactRoot.render(<TestBase element={ref.current} />);
});
editor.setRootElement(element);
expect(container.innerHTML).toBe(
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">This works!</span></p></div>',
@ -945,57 +920,48 @@ describe('LexicalEditor tests', () => {
const rootListener = jest.fn();
const updateListener = jest.fn();
function TestBase({changeElement}: {changeElement: boolean}) {
editor = useMemo(() => createTestEditor(), []);
let editorInstance = createTestEditor();
editorInstance.registerRootListener(rootListener);
editorInstance.registerUpdateListener(updateListener);
useEffect(() => {
editor.update(() => {
const root = $getRoot();
const firstChild = root.getFirstChild() as ParagraphNode | null;
const text = changeElement ? 'Change successful' : 'Not changed';
let edContainer: HTMLElement = document.createElement('div');
edContainer.setAttribute('contenteditable', 'true');
setContainerChild(edContainer);
editorInstance.setRootElement(edContainer);
if (firstChild === null) {
const paragraph = $createParagraphNode();
const textNode = $createTextNode(text);
paragraph.append(textNode);
root.append(paragraph);
} else {
const textNode = firstChild.getFirstChild() as TextNode;
textNode.setTextContent(text);
}
});
}, [changeElement]);
function runUpdate(changeElement: boolean) {
editorInstance.update(() => {
const root = $getRoot();
const firstChild = root.getFirstChild() as ParagraphNode | null;
const text = changeElement ? 'Change successful' : 'Not changed';
useEffect(() => {
return editor.registerRootListener(rootListener);
}, []);
useEffect(() => {
return editor.registerUpdateListener(updateListener);
}, []);
const ref = useCallback((node: HTMLElement | null) => {
editor.setRootElement(node);
}, []);
return changeElement ? (
<span ref={ref} contentEditable={true} />
) : (
<div ref={ref} contentEditable={true} />
);
if (firstChild === null) {
const paragraph = $createParagraphNode();
const textNode = $createTextNode(text);
paragraph.append(textNode);
root.append(paragraph);
} else {
const textNode = firstChild.getFirstChild() as TextNode;
textNode.setTextContent(text);
}
});
}
await ReactTestUtils.act(() => {
reactRoot.render(<TestBase changeElement={false} />);
});
setContainerChild(edContainer);
editorInstance.setRootElement(edContainer);
runUpdate(false);
editorInstance.commitUpdates();
expect(container.innerHTML).toBe(
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">Not changed</span></p></div>',
);
await ReactTestUtils.act(() => {
reactRoot.render(<TestBase changeElement={true} />);
});
edContainer = document.createElement('span');
edContainer.setAttribute('contenteditable', 'true');
runUpdate(true);
editorInstance.setRootElement(edContainer);
setContainerChild(edContainer);
editorInstance.commitUpdates();
expect(rootListener).toHaveBeenCalledTimes(3);
expect(updateListener).toHaveBeenCalledTimes(3);
@ -1026,178 +992,6 @@ describe('LexicalEditor tests', () => {
});
}
describe('With node decorators', () => {
function useDecorators() {
const [decorators, setDecorators] = useState(() =>
editor.getDecorators<ReactNode>(),
);
// Subscribe to changes
useEffect(() => {
return editor.registerDecoratorListener<ReactNode>((nextDecorators) => {
setDecorators(nextDecorators);
});
}, []);
const decoratedPortals = useMemo(
() =>
Object.keys(decorators).map((nodeKey) => {
const reactDecorator = decorators[nodeKey];
const element = editor.getElementByKey(nodeKey)!;
return createPortal(reactDecorator, element);
}),
[decorators],
);
return decoratedPortals;
}
afterEach(async () => {
// Clean up so we are not calling setState outside of act
await ReactTestUtils.act(async () => {
reactRoot.render(null);
await Promise.resolve().then();
});
});
it('Should correctly render React component into Lexical node #1', async () => {
const listener = jest.fn();
function Test() {
editor = useMemo(() => createTestEditor(), []);
useEffect(() => {
editor.registerRootListener(listener);
}, []);
const ref = useCallback((node: HTMLDivElement | null) => {
editor.setRootElement(node);
}, []);
const decorators = useDecorators();
return (
<>
<div ref={ref} contentEditable={true} />
{decorators}
</>
);
}
ReactTestUtils.act(() => {
reactRoot.render(<Test />);
});
// Update the editor with the decorator
await ReactTestUtils.act(async () => {
await editor.update(() => {
const paragraph = $createParagraphNode();
const test = $createTestDecoratorNode();
paragraph.append(test);
$getRoot().append(paragraph);
});
});
expect(listener).toHaveBeenCalledTimes(1);
expect(container.innerHTML).toBe(
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p>' +
'<span data-lexical-decorator="true"><span>Hello world</span></span><br></p></div>',
);
});
it('Should correctly render React component into Lexical node #2', async () => {
const listener = jest.fn();
function Test({divKey}: {divKey: number}): JSX.Element {
function TestPlugin() {
[editor] = useLexicalComposerContext();
useEffect(() => {
return editor.registerRootListener(listener);
}, []);
return null;
}
return (
<TestComposer>
<RichTextPlugin
contentEditable={
// @ts-ignore
// eslint-disable-next-line jsx-a11y/aria-role
<ContentEditable key={divKey} role={null} spellCheck={null} />
}
placeholder={null}
ErrorBoundary={LexicalErrorBoundary}
/>
<TestPlugin />
</TestComposer>
);
}
await ReactTestUtils.act(async () => {
reactRoot.render(<Test divKey={0} />);
// Wait for update to complete
await Promise.resolve().then();
});
expect(listener).toHaveBeenCalledTimes(1);
expect(container.innerHTML).toBe(
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><br></p></div>',
);
await ReactTestUtils.act(async () => {
reactRoot.render(<Test divKey={1} />);
// Wait for update to complete
await Promise.resolve().then();
});
expect(listener).toHaveBeenCalledTimes(5);
expect(container.innerHTML).toBe(
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><br></p></div>',
);
// Wait for update to complete
await Promise.resolve().then();
editor.getEditorState().read(() => {
const root = $getRoot();
const paragraph = root.getFirstChild()!;
expect(root).toEqual({
__cachedText: '',
__dir: null,
__first: paragraph.getKey(),
__format: 0,
__indent: 0,
__key: 'root',
__last: paragraph.getKey(),
__next: null,
__parent: null,
__prev: null,
__size: 1,
__style: '',
__type: 'root',
});
expect(paragraph).toEqual({
__dir: null,
__first: null,
__format: 0,
__indent: 0,
__key: paragraph.getKey(),
__last: null,
__next: null,
__parent: 'root',
__prev: null,
__size: 0,
__style: '',
__textFormat: 0,
__textStyle: '',
__type: 'paragraph',
});
});
});
});
describe('parseEditorState()', () => {
let originalText: TextNode;
let parsedParagraph: ParagraphNode;
@ -1872,10 +1666,12 @@ describe('LexicalEditor tests', () => {
});
it('mutation listener set for original node should work with the replaced node', async () => {
const ref = createRef<HTMLDivElement>();
function TestBase() {
editor = useLexicalEditor(ref, undefined, [
const edContainer = document.createElement('div');
edContainer.contentEditable = 'true';
editor = useLexicalEditor(edContainer, undefined, [
TestTextNode,
{
replace: TextNode,
@ -1884,12 +1680,10 @@ describe('LexicalEditor tests', () => {
},
]);
return <div ref={ref} contentEditable={true} />;
return edContainer;
}
ReactTestUtils.act(() => {
reactRoot.render(<TestBase />);
});
setContainerChild(TestBase());
const textNodeMutations = jest.fn();
const textNodeMutationsB = jest.fn();
@ -1969,10 +1763,12 @@ describe('LexicalEditor tests', () => {
});
it('mutation listener should work with the replaced node', async () => {
const ref = createRef<HTMLDivElement>();
function TestBase() {
editor = useLexicalEditor(ref, undefined, [
const edContainer = document.createElement('div');
edContainer.contentEditable = 'true';
editor = useLexicalEditor(edContainer, undefined, [
TestTextNode,
{
replace: TextNode,
@ -1981,12 +1777,10 @@ describe('LexicalEditor tests', () => {
},
]);
return <div ref={ref} contentEditable={true} />;
return edContainer;
}
ReactTestUtils.act(() => {
reactRoot.render(<TestBase />);
});
setContainerChild(TestBase());
const textNodeMutations = jest.fn();
const textNodeMutationsB = jest.fn();
@ -2581,6 +2375,8 @@ describe('LexicalEditor tests', () => {
expect(false).toBe('unreachable');
});
newEditor.commitUpdates();
expect(onError).toHaveBeenCalledWith(
expect.objectContaining({
message: expect.stringMatching(/TestTextNode.*re-use key.*TextNode/),

2
resources/js/wysiwyg/lexical/core/__tests__/unit/LexicalListPlugin.test.tsx
View File

@ -20,7 +20,7 @@ import {
expectHtmlToBeEqual,
html,
TestComposer,
} from 'lexical/src/__tests__/utils';
} from 'lexical/__tests__/utils';
import {createRoot, Root} from 'react-dom/client';
import * as ReactTestUtils from 'lexical/shared/react-test-utils';

54
resources/js/wysiwyg/lexical/core/__tests__/utils/index.ts
View File

@ -29,7 +29,6 @@ import {
SerializedTextNode,
TextNode,
} from 'lexical';
import * as ReactTestUtils from 'lexical/shared/react-test-utils';
import {
CreateEditorArgs,
@ -89,38 +88,13 @@ export function initializeUnitTest(
testEnv.container = document.createElement('div');
document.body.appendChild(testEnv.container);
const useLexicalEditor = (
rootElementRef: React.RefObject<HTMLDivElement>,
) => {
const lexicalEditor = React.useMemo(() => {
const lexical = createTestEditor(editorConfig);
return lexical;
}, []);
const editorEl = document.createElement('div');
editorEl.contentEditable = 'true';
testEnv.container.append(editorEl);
React.useEffect(() => {
const rootElement = rootElementRef.current;
lexicalEditor.setRootElement(rootElement);
}, [rootElementRef, lexicalEditor]);
return lexicalEditor;
};
const Editor = () => {
testEnv.editor = useLexicalEditor(ref);
const context = createLexicalComposerContext(
null,
editorConfig?.theme ?? {},
);
return (
<LexicalComposerContext.Provider value={[testEnv.editor, context]}>
<div ref={ref} contentEditable={true} />
{plugins}
</LexicalComposerContext.Provider>
);
};
ReactTestUtils.act(() => {
createRoot(testEnv.container).render(<Editor />);
});
const lexicalEditor = createTestEditor(editorConfig);
lexicalEditor.setRootElement(editorEl);
testEnv.editor = lexicalEditor;
});
afterEach(() => {
@ -381,7 +355,7 @@ export function $createTestExcludeFromCopyElementNode(): TestExcludeFromCopyElem
export type SerializedTestDecoratorNode = SerializedLexicalNode;
export class TestDecoratorNode extends DecoratorNode<JSX.Element> {
export class TestDecoratorNode extends DecoratorNode<HTMLElement> {
static getType(): string {
return 'test_decorator';
}
@ -433,32 +407,26 @@ export class TestDecoratorNode extends DecoratorNode<JSX.Element> {
}
decorate() {
return <Decorator text={'Hello world'} />;
const decorator = document.createElement('span');
decorator.textContent = 'Hello world';
return decorator;
}
}
function Decorator({text}: {text: string}): JSX.Element {
return <span>{text}</span>;
}
export function $createTestDecoratorNode(): TestDecoratorNode {
return new TestDecoratorNode();
}
const DEFAULT_NODES: NonNullable<InitialConfigType['nodes']> = [
const DEFAULT_NODES: NonNullable<ReadonlyArray<Klass<LexicalNode> | LexicalNodeReplacement>> = [
HeadingNode,
ListNode,
ListItemNode,
QuoteNode,
CodeNode,
TableNode,
TableCellNode,
TableRowNode,
HashtagNode,
CodeHighlightNode,
AutoLinkNode,
LinkNode,
OverflowNode,
TestElementNode,
TestSegmentedNode,
TestExcludeFromCopyElementNode,

2
resources/js/wysiwyg/lexical/link/__tests__/unit/LexicalAutoLinkNode.test.ts
View File

@ -20,7 +20,7 @@ import {
SerializedParagraphNode,
TextNode,
} from 'lexical/src';
import {initializeUnitTest} from 'lexical/src/__tests__/utils';
import {initializeUnitTest} from 'lexical/__tests__/utils';
const editorConfig = Object.freeze({
namespace: '',

2
resources/js/wysiwyg/lexical/link/__tests__/unit/LexicalLinkNode.test.ts
View File

@ -20,7 +20,7 @@ import {
SerializedParagraphNode,
TextNode,
} from 'lexical/src';
import {initializeUnitTest} from 'lexical/src/__tests__/utils';
import {initializeUnitTest} from 'lexical/__tests__/utils';
const editorConfig = Object.freeze({
namespace: '',

2
resources/js/wysiwyg/lexical/list/__tests__/unit/LexicalListItemNode.test.ts
View File

@ -16,7 +16,7 @@ import {
expectHtmlToBeEqual,
html,
initializeUnitTest,
} from 'lexical/src/__tests__/utils';
} from 'lexical/__tests__/utils';
import {
$createListItemNode,

2
resources/js/wysiwyg/lexical/list/__tests__/unit/LexicalListNode.test.ts
View File

@ -6,7 +6,7 @@
*
*/
import {ParagraphNode, TextNode} from 'lexical';
import {initializeUnitTest} from 'lexical/src/__tests__/utils';
import {initializeUnitTest} from 'lexical/__tests__/utils';
import {
$createListItemNode,

2
resources/js/wysiwyg/lexical/list/__tests__/unit/utils.test.ts
View File

@ -6,7 +6,7 @@
*
*/
import {$createParagraphNode, $getRoot} from 'lexical';
import {initializeUnitTest} from 'lexical/src/__tests__/utils';
import {initializeUnitTest} from 'lexical/__tests__/utils';
import {$createListItemNode, $createListNode} from '../..';
import {$getListDepth, $getTopListNode, $isLastItemInList} from '../../utils';

2
resources/js/wysiwyg/lexical/rich-text/__tests__/unit/LexicalHeadingNode.test.ts
View File

@ -18,7 +18,7 @@ import {
ParagraphNode,
RangeSelection,
} from 'lexical';
import {initializeUnitTest} from 'lexical/src/__tests__/utils';
import {initializeUnitTest} from 'lexical/__tests__/utils';
const editorConfig = Object.freeze({
namespace: '',

2
resources/js/wysiwyg/lexical/rich-text/__tests__/unit/LexicalQuoteNode.test.ts
View File

@ -8,7 +8,7 @@
import {$createQuoteNode, QuoteNode} from '@lexical/rich-text';
import {$createRangeSelection, $getRoot, ParagraphNode} from 'lexical';
import {initializeUnitTest} from 'lexical/src/__tests__/utils';
import {initializeUnitTest} from 'lexical/__tests__/utils';
const editorConfig = Object.freeze({
namespace: '',

2
resources/js/wysiwyg/lexical/selection/__tests__/unit/LexicalSelection.test.tsx
View File

@ -50,7 +50,7 @@ import {
initializeClipboard,
invariant,
TestComposer,
} from 'lexical/src/__tests__/utils';
} from 'lexical/__tests__/utils';
import {createRoot, Root} from 'react-dom/client';
import * as ReactTestUtils from 'lexical/shared/react-test-utils';

2
resources/js/wysiwyg/lexical/selection/__tests__/unit/LexicalSelectionHelpers.test.ts
View File

@ -41,7 +41,7 @@ import {
createTestHeadlessEditor,
invariant,
TestDecoratorNode,
} from 'lexical/src/__tests__/utils';
} from 'lexical/__tests__/utils';
import {$setAnchorPoint, $setFocusPoint} from '../utils';

2
resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableCellNode.test.ts
View File

@ -7,7 +7,7 @@
*/
import {$createTableCellNode, TableCellHeaderStates} from '@lexical/table';
import {initializeUnitTest} from 'lexical/src/__tests__/utils';
import {initializeUnitTest} from 'lexical/__tests__/utils';
const editorConfig = Object.freeze({
namespace: '',

2
resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableNode.test.tsx
View File

@ -28,7 +28,7 @@ import {
DataTransferMock,
initializeUnitTest,
invariant,
} from 'lexical/src/__tests__/utils';
} from 'lexical/__tests__/utils';
import {$getElementForTableNode, TableNode} from '../../LexicalTableNode';

2
resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableRowNode.test.ts
View File

@ -7,7 +7,7 @@
*/
import {$createTableRowNode} from '@lexical/table';
import {initializeUnitTest} from 'lexical/src/__tests__/utils';
import {initializeUnitTest} from 'lexical/__tests__/utils';
const editorConfig = Object.freeze({
namespace: '',

2
resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableSelection.test.tsx
View File

@ -18,7 +18,7 @@ import {
RootNode,
TextNode,
} from 'lexical';
import {createTestEditor} from 'lexical/src/__tests__/utils';
import {createTestEditor} from 'lexical/__tests__/utils';
import {createRef, useEffect, useMemo} from 'react';
import {createRoot, Root} from 'react-dom/client';
import * as ReactTestUtils from 'lexical/shared/react-test-utils';

2
resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalEventHelpers.test.tsx
View File

@ -23,7 +23,7 @@ import {
} from '@lexical/selection/src/__tests__/utils';
import {TableCellNode, TableNode, TableRowNode} from '@lexical/table';
import {LexicalEditor} from 'lexical';
import {initializeClipboard, TestComposer} from 'lexical/src/__tests__/utils';
import {initializeClipboard, TestComposer} from 'lexical/__tests__/utils';
import {createRoot} from 'react-dom/client';
import * as ReactTestUtils from 'lexical/shared/react-test-utils';

2
resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalNodeHelpers.test.ts
View File

@ -19,7 +19,7 @@ import {
$createTestElementNode,
initializeUnitTest,
invariant,
} from 'lexical/src/__tests__/utils';
} from 'lexical/__tests__/utils';
import {$dfs} from '../..';

2
resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalRootHelpers.test.ts
View File

@ -12,7 +12,7 @@ import {
$rootTextContent,
} from '@lexical/text';
import {$createParagraphNode, $createTextNode, $getRoot} from 'lexical';
import {initializeUnitTest} from 'lexical/src/__tests__/utils';
import {initializeUnitTest} from 'lexical/__tests__/utils';
describe('LexicalRootHelpers tests', () => {
initializeUnitTest((testEnv) => {

2
resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalUtilsKlassEqual.test.ts
View File

@ -7,7 +7,7 @@
*/
import {objectKlassEquals} from '@lexical/utils';
import {initializeUnitTest} from 'lexical/src/__tests__/utils';
import {initializeUnitTest} from 'lexical/__tests__/utils';
class MyEvent extends Event {}

2
resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalUtilsSplitNode.test.tsx
View File

@ -10,7 +10,7 @@ import type {ElementNode, LexicalEditor} from 'lexical';
import {$generateHtmlFromNodes, $generateNodesFromDOM} from '@lexical/html';
import {$getRoot, $isElementNode} from 'lexical';
import {createTestEditor} from 'lexical/src/__tests__/utils';
import {createTestEditor} from 'lexical/__tests__/utils';
import {$splitNode} from '../../index';

2
resources/js/wysiwyg/lexical/utils/__tests__/unit/LexlcaiUtilsInsertNodeToNearestRoot.test.tsx
View File

@ -18,7 +18,7 @@ import {
import {
$createTestDecoratorNode,
createTestEditor,
} from 'lexical/src/__tests__/utils';
} from 'lexical/__tests__/utils';
import {$insertNodeToNearestRoot} from '../..';