zurfyx-lexical-react 0.39.1-nightly.20251225.0 → 0.39.1-nightly.20251225.1

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

@@ -1,246 +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 {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

@@ -1,52 +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 * 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

@@ -1,32 +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 {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

@@ -1,137 +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 {
-  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

@@ -1,194 +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 {
-  $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: {},
-    },
-  );
-});