// "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: [],
}
}
+ /**
+ * Commits any currently pending updates scheduled for the editor.
+ */
+ commitUpdates(): void {
+ $commitPendingUpdates(this);
+ }
+
/**
* Removes focus from the editor.
*/
+++ /dev/null
-/**
- * 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 </span><span style="color:#ffc66d;">run</span>() {<br>  <span style="color:#cc7832;">return </span>[<span style="color:#cc7832;">null, undefined, </span><span style="color:#6897bb;">2</span><span style="color:#cc7832;">, </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, "Courier New", 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, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; 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, "SF Mono", Menlo, Consolas, "Liberation Mono", 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, "SF Mono", Menlo, Consolas, "Liberation Mono", 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, "SF Mono", Menlo, Consolas, "Liberation Mono", 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, "SF Mono", Menlo, Consolas, "Liberation Mono", 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, "SF Mono", Menlo, Consolas, "Liberation Mono", 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',
- },
- },
- },
- );
-});
DataTransferMock,
initializeUnitTest,
invariant,
-} from 'lexical/src/__tests__/utils';
+} from 'lexical/__tests__/utils';
describe('HTMLCopyAndPaste tests', () => {
initializeUnitTest(
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);
});
});
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) {
});
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();
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>',
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';
-
- 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]);
-
- useEffect(() => {
- return editor.registerRootListener(rootListener);
- }, []);
-
- useEffect(() => {
- return editor.registerUpdateListener(updateListener);
- }, []);
+ let edContainer: HTMLElement = document.createElement('div');
+ edContainer.setAttribute('contenteditable', 'true');
+ setContainerChild(edContainer);
+ editorInstance.setRootElement(edContainer);
- const ref = useCallback((node: HTMLElement | null) => {
- editor.setRootElement(node);
- }, []);
+ function runUpdate(changeElement: boolean) {
+ editorInstance.update(() => {
+ const root = $getRoot();
+ const firstChild = root.getFirstChild() as ParagraphNode | null;
+ const text = changeElement ? 'Change successful' : 'Not changed';
- 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);
});
}
- 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;
});
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,
},
]);
- return <div ref={ref} contentEditable={true} />;
+ return edContainer;
}
- ReactTestUtils.act(() => {
- reactRoot.render(<TestBase />);
- });
+ setContainerChild(TestBase());
const textNodeMutations = jest.fn();
const textNodeMutationsB = jest.fn();
});
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,
},
]);
- return <div ref={ref} contentEditable={true} />;
+ return edContainer;
}
- ReactTestUtils.act(() => {
- reactRoot.render(<TestBase />);
- });
+ setContainerChild(TestBase());
const textNodeMutations = jest.fn();
const textNodeMutationsB = jest.fn();
expect(false).toBe('unreachable');
});
+ newEditor.commitUpdates();
+
expect(onError).toHaveBeenCalledWith(
expect.objectContaining({
message: expect.stringMatching(/TestTextNode.*re-use key.*TextNode/),
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';
SerializedTextNode,
TextNode,
} from 'lexical';
-import * as ReactTestUtils from 'lexical/shared/react-test-utils';
import {
CreateEditorArgs,
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;
- }, []);
-
- 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>
- );
- };
+ const editorEl = document.createElement('div');
+ editorEl.contentEditable = 'true';
+ testEnv.container.append(editorEl);
- ReactTestUtils.act(() => {
- createRoot(testEnv.container).render(<Editor />);
- });
+ const lexicalEditor = createTestEditor(editorConfig);
+ lexicalEditor.setRootElement(editorEl);
+ testEnv.editor = lexicalEditor;
});
afterEach(() => {
export type SerializedTestDecoratorNode = SerializedLexicalNode;
-export class TestDecoratorNode extends DecoratorNode<JSX.Element> {
+export class TestDecoratorNode extends DecoratorNode<HTMLElement> {
static getType(): string {
return 'test_decorator';
}
}
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,
SerializedParagraphNode,
TextNode,
} from 'lexical/src';
-import {initializeUnitTest} from 'lexical/src/__tests__/utils';
+import {initializeUnitTest} from 'lexical/__tests__/utils';
const editorConfig = Object.freeze({
namespace: '',
SerializedParagraphNode,
TextNode,
} from 'lexical/src';
-import {initializeUnitTest} from 'lexical/src/__tests__/utils';
+import {initializeUnitTest} from 'lexical/__tests__/utils';
const editorConfig = Object.freeze({
namespace: '',
expectHtmlToBeEqual,
html,
initializeUnitTest,
-} from 'lexical/src/__tests__/utils';
+} from 'lexical/__tests__/utils';
import {
$createListItemNode,
*
*/
import {ParagraphNode, TextNode} from 'lexical';
-import {initializeUnitTest} from 'lexical/src/__tests__/utils';
+import {initializeUnitTest} from 'lexical/__tests__/utils';
import {
$createListItemNode,
*
*/
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';
ParagraphNode,
RangeSelection,
} from 'lexical';
-import {initializeUnitTest} from 'lexical/src/__tests__/utils';
+import {initializeUnitTest} from 'lexical/__tests__/utils';
const editorConfig = Object.freeze({
namespace: '',
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: '',
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';
createTestHeadlessEditor,
invariant,
TestDecoratorNode,
-} from 'lexical/src/__tests__/utils';
+} from 'lexical/__tests__/utils';
import {$setAnchorPoint, $setFocusPoint} from '../utils';
*/
import {$createTableCellNode, TableCellHeaderStates} from '@lexical/table';
-import {initializeUnitTest} from 'lexical/src/__tests__/utils';
+import {initializeUnitTest} from 'lexical/__tests__/utils';
const editorConfig = Object.freeze({
namespace: '',
DataTransferMock,
initializeUnitTest,
invariant,
-} from 'lexical/src/__tests__/utils';
+} from 'lexical/__tests__/utils';
import {$getElementForTableNode, TableNode} from '../../LexicalTableNode';
*/
import {$createTableRowNode} from '@lexical/table';
-import {initializeUnitTest} from 'lexical/src/__tests__/utils';
+import {initializeUnitTest} from 'lexical/__tests__/utils';
const editorConfig = Object.freeze({
namespace: '',
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';
} 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';
$createTestElementNode,
initializeUnitTest,
invariant,
-} from 'lexical/src/__tests__/utils';
+} from 'lexical/__tests__/utils';
import {$dfs} from '../..';
$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) => {
*/
import {objectKlassEquals} from '@lexical/utils';
-import {initializeUnitTest} from 'lexical/src/__tests__/utils';
+import {initializeUnitTest} from 'lexical/__tests__/utils';
class MyEvent extends Event {}
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';
import {
$createTestDecoratorNode,
createTestEditor,
-} from 'lexical/src/__tests__/utils';
+} from 'lexical/__tests__/utils';
import {$insertNodeToNearestRoot} from '../..';
projects / bookstack / commitdiff