zurfyx-lexical-react 0.39.1-nightly.20251225.0

package/src/__tests__/unit/PlainRichTextPlugin.test.tsx

@@ -0,0 +1,246 @@
+/**
+ * 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 {HashtagNode} from '@lexical/hashtag';
+import {AutoLinkNode, LinkNode} from '@lexical/link';
+import {ListItemNode, ListNode} from '@lexical/list';
+import {OverflowNode} from '@lexical/overflow';
+import {LexicalComposer} from '@lexical/react/LexicalComposer';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {ContentEditable} from '@lexical/react/LexicalContentEditable';
+import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
+import {PlainTextPlugin} from '@lexical/react/LexicalPlainTextPlugin';
+import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
+import {HeadingNode, QuoteNode} from '@lexical/rich-text';
+import {TableCellNode, TableNode, TableRowNode} from '@lexical/table';
+import {$rootTextContent} from '@lexical/text';
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  $getSelection,
+  $isRangeSelection,
+  LexicalEditor,
+} from 'lexical';
+import * as React from 'react';
+import {createRoot, Root} from 'react-dom/client';
+import * as ReactTestUtils from 'shared/react-test-utils';
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+
+const RICH_TEXT_NODES = [
+  HeadingNode,
+  ListNode,
+  ListItemNode,
+  QuoteNode,
+  TableNode,
+  TableCellNode,
+  TableRowNode,
+  HashtagNode,
+  AutoLinkNode,
+  LinkNode,
+  OverflowNode,
+];
+
+describe('LexicalNodeHelpers tests', () => {
+  let container: HTMLDivElement | null = null;
+  let reactRoot: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    reactRoot = createRoot(container);
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container!);
+    container = null;
+
+    vi.restoreAllMocks();
+  });
+
+  for (const plugin of ['PlainTextPlugin', 'RichTextPlugin']) {
+    it(`${plugin} custom initialEditorState`, async () => {
+      let editor;
+
+      function GrabEditor() {
+        [editor] = useLexicalComposerContext();
+        return null;
+      }
+
+      const $initialEditorState = () => {
+        $getRoot().append(
+          $createParagraphNode().append($createTextNode('foo')),
+        );
+      };
+
+      function App() {
+        return (
+          <LexicalComposer
+            initialConfig={{
+              editorState: $initialEditorState,
+              namespace: '',
+              nodes: plugin === 'PlainTextPlugin' ? [] : RICH_TEXT_NODES,
+              onError: (err) => {
+                throw err;
+              },
+              theme: {},
+            }}>
+            <GrabEditor />
+            {plugin === 'PlainTextPlugin' ? (
+              <PlainTextPlugin
+                contentEditable={<ContentEditable />}
+                placeholder={null}
+                ErrorBoundary={LexicalErrorBoundary}
+              />
+            ) : (
+              <RichTextPlugin
+                contentEditable={<ContentEditable />}
+                placeholder={null}
+                ErrorBoundary={LexicalErrorBoundary}
+              />
+            )}
+          </LexicalComposer>
+        );
+      }
+
+      await ReactTestUtils.act(async () => {
+        reactRoot.render(<App />);
+      });
+
+      const text = editor!.getEditorState().read($rootTextContent);
+      expect(text).toBe('foo');
+    });
+  }
+
+  for (const plugin of ['PlainTextPlugin', 'RichTextPlugin']) {
+    it(`${plugin} custom initialEditorState`, async () => {
+      let editor;
+      const initialEditorStateJson = `
+      {"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"foo","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}
+      `;
+
+      function GrabEditor() {
+        [editor] = useLexicalComposerContext();
+        return null;
+      }
+
+      function App() {
+        return (
+          <LexicalComposer
+            initialConfig={{
+              editorState: initialEditorStateJson,
+              namespace: '',
+              nodes: plugin === 'PlainTextPlugin' ? [] : RICH_TEXT_NODES,
+              onError: (err) => {
+                throw err;
+              },
+              theme: {},
+            }}>
+            <GrabEditor />
+            {plugin === 'PlainTextPlugin' ? (
+              <PlainTextPlugin
+                contentEditable={<ContentEditable />}
+                placeholder={null}
+                ErrorBoundary={LexicalErrorBoundary}
+              />
+            ) : (
+              <RichTextPlugin
+                contentEditable={<ContentEditable />}
+                placeholder={null}
+                ErrorBoundary={LexicalErrorBoundary}
+              />
+            )}
+          </LexicalComposer>
+        );
+      }
+
+      await ReactTestUtils.act(async () => {
+        reactRoot.render(<App />);
+      });
+
+      await editor!.focus();
+
+      await editor!.getEditorState().read(() => {
+        expect($rootTextContent()).toBe('foo');
+
+        const selection = $getSelection();
+
+        if (!$isRangeSelection(selection)) {
+          return;
+        }
+
+        expect(selection.anchor.getNode().getTextContent()).toBe('foo');
+        expect(selection.focus.getNode().getTextContent()).toBe('foo');
+      });
+    });
+  }
+
+  for (const plugin of ['PlainTextPlugin', 'RichTextPlugin']) {
+    it(`${plugin} can hide placeholder when non-editable`, async () => {
+      let editor: LexicalEditor;
+
+      function GrabEditor() {
+        [editor] = useLexicalComposerContext();
+        return null;
+      }
+
+      function App() {
+        return (
+          <LexicalComposer
+            initialConfig={{
+              namespace: '',
+              nodes: plugin === 'PlainTextPlugin' ? [] : RICH_TEXT_NODES,
+              onError: (err) => {
+                throw err;
+              },
+              theme: {},
+            }}>
+            <GrabEditor />
+            {plugin === 'PlainTextPlugin' ? (
+              <PlainTextPlugin
+                contentEditable={<ContentEditable />}
+                placeholder={(isEditable) =>
+                  isEditable ? (
+                    <span className="placeholder">My placeholder</span>
+                  ) : null
+                }
+                ErrorBoundary={LexicalErrorBoundary}
+              />
+            ) : (
+              <RichTextPlugin
+                contentEditable={<ContentEditable />}
+                placeholder={(isEditable) =>
+                  isEditable ? (
+                    <span className="placeholder">My placeholder</span>
+                  ) : null
+                }
+                ErrorBoundary={LexicalErrorBoundary}
+              />
+            )}
+          </LexicalComposer>
+        );
+      }
+
+      await ReactTestUtils.act(async () => {
+        reactRoot.render(<App />);
+      });
+
+      function placeholderText() {
+        const placeholderContainer = container!.querySelector('.placeholder');
+        return placeholderContainer && placeholderContainer.textContent;
+      }
+
+      expect(placeholderText()).toBe('My placeholder');
+      await ReactTestUtils.act(async () => {
+        editor.setEditable(false);
+        reactRoot.render(<App />);
+      });
+      expect(placeholderText()).toBe(null);
+    });
+  }
+});

package/src/__tests__/unit/React19.test.tsx

@@ -0,0 +1,52 @@
+/**
+ * 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 * as React from 'react';
+import {createRoot, Root} from 'react-dom/client';
+import * as ReactTestUtils from 'shared/react-test-utils';
+import {beforeEach, describe, expect, test, vi} from 'vitest';
+
+const IS_REACT_19 = parseInt(React.version.split('.')[0], 10) >= 19;
+const OVERRIDE_REACT_VERSION = process.env.OVERRIDE_REACT_VERSION ?? '';
+
+describe(`React expectations (${React.version}) OVERRIDE_REACT_VERSION=${OVERRIDE_REACT_VERSION}`, () => {
+  let container: HTMLDivElement;
+  let reactRoot: Root;
+  beforeEach(() => {
+    container = document.createElement('div');
+    reactRoot = createRoot(container);
+    document.body.appendChild(container);
+  });
+  // This checks our assumption that we are testing against the correct version of React
+  // The inverse is not checked so the test doesn't fail when our dependencies
+  // are upgraded.
+  if (OVERRIDE_REACT_VERSION) {
+    test(`Expecting React >= 19`, () => {
+      expect(IS_REACT_19).toBe(true);
+    });
+  }
+  const cacheExpect = IS_REACT_19 ? 'cached' : 'not cached';
+  test(`StrictMode useMemo is ${cacheExpect}`, () => {
+    const memoFun = vi
+      .fn()
+      .mockReturnValueOnce('cached')
+      .mockReturnValue('not cached');
+    function MemoComponent() {
+      return React.useMemo(memoFun, []);
+    }
+    ReactTestUtils.act(() => {
+      reactRoot.render(
+        <React.StrictMode>
+          <MemoComponent />
+        </React.StrictMode>,
+      );
+    });
+    expect(container.textContent).toBe(cacheExpect);
+    expect(memoFun).toHaveBeenCalledTimes(2);
+  });
+});

package/src/__tests__/unit/ReactExtension.test.tsx

@@ -0,0 +1,32 @@
+/**
+ * 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 {buildEditorFromExtensions} from '@lexical/extension';
+import {ReactExtension} from '@lexical/react/ReactExtension';
+import {ReactPluginHostExtension} from '@lexical/react/ReactPluginHostExtension';
+import {describe, expect, it} from 'vitest';
+
+describe('ReactExtension', () => {
+  it('Requires a provider', () => {
+    expect(() =>
+      buildEditorFromExtensions({
+        dependencies: [ReactExtension],
+        name: '[root]',
+      }),
+    ).toThrow(
+      'No ReactProviderExtension detected. You must use ReactPluginHostExtension or LexicalExtensionComposer to host React extensions. The following extensions depend on ReactExtension: [root]',
+    );
+  });
+  it('Succeeds with a provider', () => {
+    expect(
+      buildEditorFromExtensions({
+        dependencies: [ReactExtension, ReactPluginHostExtension],
+        name: '[root]',
+      }),
+    ).toBeDefined();
+  });
+});

package/src/__tests__/unit/ReactPluginHostExtension.test.tsx

@@ -0,0 +1,137 @@
+/**
+ * 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 {
+  buildEditorFromExtensions,
+  configExtension,
+  type LexicalEditorWithDispose,
+} from '@lexical/extension';
+import {HistoryExtension} from '@lexical/history';
+import {TreeView} from '@lexical/react/LexicalTreeView';
+import {ReactExtension} from '@lexical/react/ReactExtension';
+import {
+  mountReactPluginComponent,
+  mountReactPluginHost,
+  ReactPluginHostExtension,
+} from '@lexical/react/ReactPluginHostExtension';
+import {RichTextExtension} from '@lexical/rich-text';
+import {
+  $createLineBreakNode,
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  type LexicalEditor,
+} from 'lexical';
+import {act} from 'shared/react-test-utils';
+import {afterEach, beforeEach, describe, expect, it, Mock, vi} from 'vitest';
+
+function $prepopulatedRichText() {
+  const root = $getRoot();
+  if (root.getFirstChild() !== null) {
+    return;
+  }
+
+  const paragraph = $createParagraphNode();
+  paragraph.append(
+    $createTextNode('Plain Text!'),
+    $createLineBreakNode(),
+    $createTextNode('Bold Text!').toggleFormat('bold'),
+  );
+  root.append(paragraph);
+}
+
+describe('configExtension', () => {
+  it('returns what is expected', () => {
+    const arg = configExtension(ReactExtension, {contentEditable: null});
+    expect(arg.length).toBe(2);
+    expect(arg[0]).toBe(ReactExtension);
+    expect(arg[1]).toEqual({contentEditable: null});
+  });
+});
+describe('ReactPluginHostExtension', () => {
+  let editor: LexicalEditorWithDispose;
+  let rootDom: HTMLDivElement & {__lexicalEditor?: LexicalEditor | null};
+  let treeDom: HTMLDivElement;
+  let cleanupFn: Mock;
+  let registerFn: Mock;
+  let pluginHostDom: HTMLDivElement;
+
+  beforeEach(async () => {
+    cleanupFn = vi.fn();
+    registerFn = vi.fn().mockReturnValue(cleanupFn);
+    expect(document.body.children.length).toBe(0);
+    await act(async () => {
+      rootDom = document.createElement('div');
+      rootDom.id = 'lexical-editor';
+      treeDom = document.createElement('div');
+      treeDom.id = 'lexical-state';
+      pluginHostDom = document.createElement('div');
+      pluginHostDom.id = 'react-plugin-host';
+
+      document.body.append(rootDom, pluginHostDom, treeDom);
+      editor = buildEditorFromExtensions({
+        $initialEditorState: $prepopulatedRichText,
+        // eslint-disable-next-line no-shadow
+        afterRegistration: (editor: LexicalEditor) => {
+          mountReactPluginHost(editor, pluginHostDom);
+          mountReactPluginComponent(editor, {
+            Component: TreeView,
+            domNode: treeDom,
+            key: 'tree-view',
+            props: {
+              editor,
+              timeTravelButtonClassName: 'debug-timetravel-button',
+              timeTravelPanelButtonClassName: 'debug-timetravel-panel-button',
+              timeTravelPanelClassName: 'debug-timetravel-panel',
+              timeTravelPanelSliderClassName: 'debug-timetravel-panel-slider',
+              treeTypeButtonClassName: 'debug-treetype-button',
+              viewClassName: 'tree-view-output',
+            },
+          });
+          editor.setRootElement(rootDom);
+          return registerFn();
+        },
+        dependencies: [
+          RichTextExtension,
+          HistoryExtension,
+          ReactPluginHostExtension,
+        ],
+        name: '[root]',
+        namespace: 'Vanilla JS Extension Demo',
+      });
+    });
+  });
+  afterEach(async () => {
+    await act(async () => {
+      editor.dispose();
+    });
+  });
+  it('creates an editor', async () => {
+    const EXPECT_HTML = `<p dir="auto"><span data-lexical-text="true">Plain Text!</span><br><strong data-lexical-text="true">Bold Text!</strong></p>`;
+    expect(editor.getRootElement()).toBe(rootDom);
+    expect(rootDom.__lexicalEditor).toBe(editor);
+    expect(rootDom.innerHTML).toEqual(EXPECT_HTML);
+    expect(treeDom.innerHTML).toMatch(/None dispatched/);
+    await act(async () => {
+      editor.dispose();
+    });
+    // All nodes are still in the document after dispose
+    expect(rootDom.isConnected).toBe(true);
+    expect(treeDom.isConnected).toBe(true);
+    expect(pluginHostDom.isConnected).toBe(true);
+    // The TreeView and plugin host are removed when the editor is cleaned up
+    expect(treeDom.innerHTML).toEqual('');
+    expect(pluginHostDom.innerHTML).toEqual('');
+    // The editor removes its contents too
+    expect(rootDom.__lexicalEditor).toBe(null);
+    expect(rootDom.innerHTML).toEqual('');
+    // Check the whole body for expectations
+    expect(document.body.innerHTML).toEqual(
+      `<div id="lexical-editor" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"></div><div id="react-plugin-host"></div><div id="lexical-state"></div>`,
+    );
+  });
+});

package/src/__tests__/unit/useLexicalCharacterLimit.test.ts

@@ -0,0 +1,194 @@
+/**
+ * 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 {
+  $createOverflowNode,
+  $isOverflowNode,
+  OverflowNode,
+} from '@lexical/overflow';
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getNodeByKey,
+  $getRoot,
+  $getSelection,
+  $isNodeSelection,
+  $isRangeSelection,
+  LexicalEditor,
+  NodeKey,
+  ParagraphNode,
+} from 'lexical';
+import {initializeUnitTest} from 'lexical/src/__tests__/utils';
+import {describe, expect, it} from 'vitest';
+
+import {$mergePrevious} from '../../shared/useCharacterLimit';
+
+describe('LexicalNodeHelpers tests', () => {
+  initializeUnitTest(
+    (testEnv) => {
+      describe('merge', () => {
+        function $initializeEditorWithLeftRightOverflowNodes(): [
+          NodeKey,
+          NodeKey,
+        ] {
+          const root = $getRoot();
+
+          const paragraph = $createParagraphNode();
+          const overflowLeft = $createOverflowNode();
+          const overflowRight = $createOverflowNode();
+
+          root.append(paragraph);
+
+          paragraph.append(overflowLeft);
+          paragraph.append(overflowRight);
+
+          return [overflowLeft.getKey(), overflowRight.getKey()];
+        }
+
+        it('merges an overflow node (left overflow selected)', async () => {
+          const editor: LexicalEditor = testEnv.editor;
+          let overflowLeftKey: NodeKey;
+          let overflowRightKey: NodeKey;
+
+          let text1Key: NodeKey;
+
+          await editor.update(() => {
+            [overflowLeftKey, overflowRightKey] =
+              $initializeEditorWithLeftRightOverflowNodes();
+
+            const overflowLeft = $getNodeByKey<OverflowNode>(overflowLeftKey)!;
+            const overflowRight =
+              $getNodeByKey<OverflowNode>(overflowRightKey)!;
+
+            const text1 = $createTextNode('1');
+            const text2 = $createTextNode('2');
+
+            const text3 = $createTextNode('3');
+            const text4 = $createTextNode('4');
+
+            text1Key = text1.getKey();
+
+            overflowLeft.append(text1, text2);
+
+            text2.toggleFormat('bold'); // Prevent merging with text1
+
+            overflowRight.append(text3, text4);
+
+            text4.toggleFormat('bold'); // Prevent merging with text3
+
+            overflowLeft.select(1, 1);
+          });
+
+          await editor.update(() => {
+            const paragraph = $getRoot().getFirstChild<ParagraphNode>()!;
+
+            const overflowRight =
+              $getNodeByKey<OverflowNode>(overflowRightKey)!;
+
+            $mergePrevious(overflowRight);
+
+            expect(paragraph.getChildrenSize()).toBe(1);
+            expect($isOverflowNode(paragraph.getFirstChild())).toBe(true);
+
+            const selection = $getSelection();
+
+            if (!$isRangeSelection(selection)) {
+              throw new Error('Lost selection');
+            }
+
+            if ($isNodeSelection(selection)) {
+              return;
+            }
+
+            expect(selection.anchor.key).toBe(text1Key);
+            expect(selection.anchor.offset).toBe(1);
+            expect(selection.focus.key).toBe(text1Key);
+            expect(selection.anchor.offset).toBe(1);
+          });
+        });
+
+        it('merges an overflow node (left-right overflow selected)', async () => {
+          const editor: LexicalEditor = testEnv.editor;
+          let overflowLeftKey: NodeKey;
+          let overflowRightKey: NodeKey;
+
+          let text2Key: NodeKey;
+          let text3Key: NodeKey;
+
+          await editor.update(() => {
+            [overflowLeftKey, overflowRightKey] =
+              $initializeEditorWithLeftRightOverflowNodes();
+            const overflowLeft = $getNodeByKey<OverflowNode>(overflowLeftKey)!;
+            const overflowRight =
+              $getNodeByKey<OverflowNode>(overflowRightKey)!;
+
+            const text1 = $createTextNode('1');
+            const text2 = $createTextNode('2');
+
+            const text3 = $createTextNode('3');
+            const text4 = $createTextNode('4');
+
+            text2Key = text2.getKey();
+            text3Key = text3.getKey();
+
+            overflowLeft.append(text1);
+            overflowLeft.append(text2);
+
+            text2.toggleFormat('bold'); // Prevent merging with text1
+
+            overflowRight.append(text3);
+            overflowRight.append(text4);
+
+            text4.toggleFormat('bold'); // Prevent merging with text3
+
+            overflowLeft.select(1, 1);
+
+            const selection = $getSelection();
+
+            if (!$isRangeSelection(selection)) {
+              return;
+            }
+
+            selection.focus.set(overflowRightKey, 1, 'element');
+          });
+
+          await editor.update(() => {
+            const paragraph = $getRoot().getFirstChild<ParagraphNode>()!;
+            const overflowRight =
+              $getNodeByKey<OverflowNode>(overflowRightKey)!;
+
+            $mergePrevious(overflowRight);
+
+            expect(paragraph.getChildrenSize()).toBe(1);
+            expect($isOverflowNode(paragraph.getFirstChild())).toBe(true);
+
+            const selection = $getSelection();
+
+            if (!$isRangeSelection(selection)) {
+              throw new Error('Lost selection');
+            }
+
+            if ($isNodeSelection(selection)) {
+              return;
+            }
+
+            expect(selection.anchor.key).toBe(text2Key);
+            expect(selection.anchor.offset).toBe(0);
+            expect(selection.focus.key).toBe(text3Key);
+            expect(selection.focus.offset).toBe(1);
+          });
+        });
+      });
+    },
+    {
+      namespace: '',
+      nodes: [OverflowNode],
+      theme: {},
+    },
+  );
+});