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

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

@@ -1,101 +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 {LexicalCollaboration} from '@lexical/react/LexicalCollaborationContext';
-import {CollaborationPlugin} from '@lexical/react/LexicalCollaborationPlugin';
-import {LexicalComposer} from '@lexical/react/LexicalComposer';
-import {ContentEditable} from '@lexical/react/LexicalContentEditable';
-import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
-import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
-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';
-import * as Y from 'yjs';
-
-describe(`LexicalCollaborationPlugin`, () => {
-  let container: HTMLDivElement;
-  let reactRoot: Root;
-
-  const editorConfig = Object.freeze({
-    // NOTE: This is critical for collaboration plugin to set editor state to null. It
-    // would indicate that the editor should not try to set any default state
-    // (not even empty one), and let collaboration plugin do it instead
-    editorState: null,
-    namespace: 'Test editor',
-    nodes: [],
-    // Handling of errors during update
-    onError(error: Error) {
-      throw error;
-    },
-  });
-
-  beforeEach(() => {
-    container = document.createElement('div');
-    reactRoot = createRoot(container);
-    document.body.appendChild(container);
-  });
-
-  test(`providerFactory called only once`, () => {
-    const providerFactory = vi.fn(
-      (id: string, yjsDocMap: Map<string, Y.Doc>) => {
-        const doc = new Y.Doc();
-        yjsDocMap.set(id, doc);
-
-        return {
-          awareness: {
-            getLocalState: () => null,
-            getStates: () => new Map(),
-            off: () => {},
-            on: () => {},
-            setLocalState: () => {},
-            setLocalStateField: () => {},
-          },
-          connect: () => {},
-          disconnect: () => {},
-          off: () => {},
-          on: () => {},
-        };
-      },
-    );
-    function MemoComponent() {
-      return (
-        <LexicalCollaboration>
-          <LexicalComposer initialConfig={editorConfig}>
-            {/* With CollaborationPlugin - we MUST NOT use @lexical/react/LexicalHistoryPlugin */}
-            <CollaborationPlugin
-              id="lexical/react-rich-collab"
-              providerFactory={providerFactory}
-              // Unless you have a way to avoid race condition between 2+ users trying to do bootstrap simultaneously
-              // you should never try to bootstrap on client. It's better to perform bootstrap within Yjs server.
-              shouldBootstrap={false}
-            />
-            <RichTextPlugin
-              contentEditable={<ContentEditable className="editor-input" />}
-              placeholder={
-                <div className="editor-placeholder">
-                  Enter some rich text...
-                </div>
-              }
-              ErrorBoundary={LexicalErrorBoundary}
-            />
-          </LexicalComposer>
-        </LexicalCollaboration>
-      );
-    }
-    ReactTestUtils.act(() => {
-      reactRoot.render(
-        <React.StrictMode>
-          <MemoComponent />
-        </React.StrictMode>,
-      );
-    });
-
-    expect(providerFactory).toHaveBeenCalledTimes(1);
-  });
-});

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

@@ -1,129 +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 {LexicalComposer} from '@lexical/react/LexicalComposer';
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {
-  $createParagraphNode,
-  $createTextNode,
-  $getRoot,
-  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';
-
-describe('LexicalComposer 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();
-  });
-
-  it('LexicalComposerContext', async () => {
-    const theme = {};
-
-    function TestPlugin() {
-      const [, contextTheme] = useLexicalComposerContext();
-      expect(contextTheme.getTheme()).toBe(theme);
-      return null;
-    }
-
-    function App() {
-      return (
-        <LexicalComposer
-          initialConfig={{
-            namespace: '',
-            nodes: [],
-            onError: (err) => {
-              throw err;
-            },
-            theme,
-          }}>
-          <TestPlugin />
-        </LexicalComposer>
-      );
-    }
-
-    await ReactTestUtils.act(async () => {
-      reactRoot.render(<App />);
-    });
-  });
-
-  describe('LexicalComposerContext editor identity', () => {
-    (
-      [
-        {name: 'StrictMode', size: 2},
-        {name: 'Fragment', size: 1},
-      ] as const
-    ).forEach(({name, size}) => {
-      const Wrapper = React[name];
-      const editors = new Set<LexicalEditor>();
-      const pluginEditors = new Set<LexicalEditor>();
-      function Plugin() {
-        pluginEditors.add(useLexicalComposerContext()[0]);
-        return null;
-      }
-      function App() {
-        return (
-          <LexicalComposer
-            initialConfig={{
-              editorState(editor) {
-                editors.add(editor);
-                editor.update(() => {
-                  const p = $createParagraphNode();
-                  p.append($createTextNode('initial state'));
-                  $getRoot().append(p);
-                });
-              },
-              namespace: '',
-              nodes: [],
-              onError: (err) => {
-                throw err;
-              },
-            }}>
-            <Plugin />
-          </LexicalComposer>
-        );
-      }
-      it(`renders ${size} editors under ${name}`, async () => {
-        await ReactTestUtils.act(async () => {
-          reactRoot.render(
-            <Wrapper>
-              <App />
-            </Wrapper>,
-          );
-        });
-        // 2 editors may be created since useMemo is still called twice,
-        // but only one result is used!
-        expect(editors.size).toBe(size);
-        [...editors].forEach((editor, i) => {
-          // This confirms that editorState() was only called once per editor,
-          // otherwise you could see 'initial stateinitial state'.
-          expect([
-            i,
-            editor.getEditorState().read(() => $getRoot().getTextContent()),
-          ]).toEqual([i, 'initial state']);
-        });
-        // Only one context is created in both cases though!
-        expect(pluginEditors.size).toBe(1);
-      });
-    });
-  });
-});

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

@@ -1,264 +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 {ContentEditableElement} from '@lexical/react/LexicalContentEditable';
-import {axe, toHaveNoViolations} from 'jest-axe';
-import {createEditor, LexicalEditor} from 'lexical';
-import {createRoot, Root} from 'react-dom/client';
-import * as ReactTestUtils from 'shared/react-test-utils';
-import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
-
-describe('ContentEditableElement tests', () => {
-  let container: HTMLDivElement | null = null;
-  let reactRoot: Root;
-  let editor: LexicalEditor;
-
-  beforeEach(() => {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-    reactRoot = createRoot(container);
-
-    editor = createEditor({
-      namespace: 'ContentEditableElement',
-      onError: (error) => {
-        throw error;
-      },
-    });
-  });
-
-  afterEach(async () => {
-    if (container) {
-      await ReactTestUtils.act(async () => {
-        reactRoot.unmount();
-      });
-      document.body.removeChild(container);
-    }
-    editor.setRootElement(null); //editor cleanup
-  });
-
-  it('renders the correct ARIA attributes when editable', async () => {
-    await ReactTestUtils.act(async () => {
-      reactRoot.render(
-        <ContentEditableElement
-          editor={editor}
-          ariaLabelledBy="test-label"
-          role="textbox"
-        />,
-      );
-    });
-
-    const element = container!.querySelector('[role="textbox"]')!;
-    expect(element.getAttribute('aria-labelledby')).toBe('test-label');
-    expect(element.getAttribute('contenteditable')).toBe('true');
-  });
-
-  it('renders aria-labelledby attribute correctly', async () => {
-    await ReactTestUtils.act(async () => {
-      reactRoot.render(
-        <ContentEditableElement
-          editor={editor}
-          aria-labelledby="TEST" // original  issue
-          className="ContentEditable__root"
-        />,
-      );
-    });
-
-    const element = container!.querySelector('.ContentEditable__root')!;
-    expect(element.getAttribute('aria-labelledby')).toBe('TEST');
-  });
-
-  it('renders the correct ARIA attributes for different roles', async () => {
-    const roles = ['textbox', 'combobox', 'listbox', 'spinbutton'];
-
-    for (const role of roles) {
-      await ReactTestUtils.act(async () => {
-        reactRoot.render(
-          <ContentEditableElement editor={editor} role={role} />,
-        );
-      });
-
-      const element = container!.querySelector(`[role="${role}"]`)!;
-      expect(element.getAttribute('role')).toBe(role);
-    }
-  });
-  it('renders optional ARIA attributes when provided', async () => {
-    await ReactTestUtils.act(async () => {
-      reactRoot.render(
-        <ContentEditableElement
-          editor={editor}
-          ariaDescribedBy="test-description"
-          role="textbox"
-        />,
-      );
-    });
-
-    const element = container!.querySelector('[role="textbox"]')!;
-    expect(element.getAttribute('aria-describedby')).toBe('test-description'); // Check aria-describedby
-  });
-
-  it('renders aria-expanded correctly for role combobox', async () => {
-    await ReactTestUtils.act(async () => {
-      reactRoot.render(
-        <ContentEditableElement
-          editor={editor}
-          role="combobox"
-          ariaExpanded={true} // Provide ariaExpanded
-        />,
-      );
-    });
-
-    const element = container!.querySelector('[role="combobox"]')!;
-
-    expect(element.getAttribute('aria-expanded')).toBe('true'); // Verify that aria-expanded is correctly set.
-  });
-
-  it('renders aria-invalid and aria-required correctly', async () => {
-    await ReactTestUtils.act(async () => {
-      reactRoot.render(
-        <ContentEditableElement
-          editor={editor}
-          ariaInvalid="true" // Mark as invalid
-          ariaRequired={true} // Mark as required
-          role="textbox"
-        />,
-      );
-    });
-
-    const element = container!.querySelector('[role="textbox"]')!;
-    expect(element.getAttribute('aria-invalid')).toBe('true'); // Verify aria-invalid
-    expect(element.getAttribute('aria-required')).toBe('true'); // Verify aria-required
-  });
-
-  it('applies custom attributes and styles correctly', async () => {
-    await ReactTestUtils.act(async () => {
-      reactRoot.render(
-        <ContentEditableElement
-          editor={editor}
-          role="textbox"
-          data-testid="test-element"
-          style={{color: 'red', fontSize: '16px'}}
-        />,
-      );
-    });
-
-    const element = container!.querySelector('[role="textbox"]') as HTMLElement;
-    expect(element.getAttribute('data-testid')).toBe('test-element'); // Verify custom data attribute
-    expect(element.style.color).toBe('red'); // Verify inline styles
-    expect(element.style.fontSize).toBe('16px'); // Verify inline styles
-  });
-
-  it('renders aria-invalid and aria-required correctly when set to false', async () => {
-    await ReactTestUtils.act(async () => {
-      reactRoot.render(
-        <ContentEditableElement
-          editor={editor}
-          ariaInvalid="false" // Not invalid
-          ariaRequired={false} // Not required
-          role="textbox"
-        />,
-      );
-    });
-
-    const element = container!.querySelector('[role="textbox"]')!;
-    expect(element.getAttribute('aria-invalid')).toBe('false'); // Verify aria-invalid
-    expect(element.getAttribute('aria-required')).toBe('false'); // Verify aria-required
-  });
-
-  it('renders custom data attributes correctly', async () => {
-    await ReactTestUtils.act(async () => {
-      reactRoot.render(
-        <ContentEditableElement
-          editor={editor}
-          role="textbox"
-          data-testid="test-element"
-          data-custom-attribute="custom-value"
-        />,
-      );
-    });
-
-    const element = container!.querySelector('[role="textbox"]')!;
-    expect(element.getAttribute('data-testid')).toBe('test-element'); // Verify custom data attribute
-    expect(element.getAttribute('data-custom-attribute')).toBe('custom-value'); // Verify custom data attribute
-  });
-
-  it('registers and cleans up root element properly', async () => {
-    let rootElement: HTMLElement | null = null;
-    editor.setRootElement = vi.fn((element) => {
-      rootElement = element;
-    });
-
-    await ReactTestUtils.act(async () => {
-      reactRoot.render(
-        <ContentEditableElement editor={editor} role="textbox" />,
-      );
-    });
-
-    const element = container!.querySelector('[role="textbox"]')!;
-    expect(rootElement).toBe(element); // Verify registration.
-
-    await ReactTestUtils.act(async () => {
-      reactRoot.unmount(); // Unmount the component.
-    });
-
-    expect(rootElement).toBeNull(); // Verify cleanup.
-  });
-
-  it('renders the correct spellCheck attribute for different values', async () => {
-    const spellCheckValues = [true, false];
-
-    for (const spellCheck of spellCheckValues) {
-      await ReactTestUtils.act(async () => {
-        reactRoot.render(
-          <ContentEditableElement
-            editor={editor}
-            spellCheck={spellCheck}
-            role="textbox"
-          />,
-        );
-      });
-
-      const element = container!.querySelector('[role="textbox"]')!;
-      expect(element.getAttribute('spellcheck')).toBe(spellCheck.toString());
-    }
-  });
-
-  it('should have no accessibility violations', async () => {
-    expect.extend(toHaveNoViolations);
-
-    await ReactTestUtils.act(async () => {
-      reactRoot.render(
-        <ContentEditableElement
-          editor={editor}
-          role="textbox"
-          ariaLabel="Text editor"
-        />,
-      );
-    });
-
-    const results = await axe(container!);
-    expect(results).toHaveNoViolations();
-  });
-
-  it('should have no accessibility violations when not editable', async () => {
-    expect.extend(toHaveNoViolations);
-    editor.setEditable(false);
-
-    await ReactTestUtils.act(async () => {
-      reactRoot.render(
-        <ContentEditableElement
-          editor={editor}
-          role="textbox"
-          ariaLabel="Text editor"
-        />,
-      );
-    });
-
-    const results = await axe(container!);
-    expect(results).toHaveNoViolations();
-  });
-});

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

@@ -1,85 +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 {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {LexicalExtensionComposer} from '@lexical/react/LexicalExtensionComposer';
-import {RichTextExtension} from '@lexical/rich-text';
-import {
-  $createParagraphNode,
-  $createTextNode,
-  $getRoot,
-  defineExtension,
-} from 'lexical';
-import {useEffect} from 'react';
-import {createRoot, type Root} from 'react-dom/client';
-import * as ReactTestUtils from 'shared/react-test-utils';
-import {afterEach, beforeEach, describe, expect, it} from 'vitest';
-
-describe('LexicalExtensionComposer', () => {
-  const extension = defineExtension({
-    dependencies: [RichTextExtension],
-    name: '[root]',
-  });
-  function MyEditor({children}: {children?: React.ReactNode}) {
-    return (
-      <LexicalExtensionComposer extension={extension}>
-        {children}
-      </LexicalExtensionComposer>
-    );
-  }
-  let container: HTMLElement;
-  let reactRoot: Root;
-
-  beforeEach(() => {
-    container = document.createElement('div');
-    ReactTestUtils.act(() => {
-      reactRoot = createRoot(container);
-    });
-    document.body.appendChild(container);
-  });
-  afterEach(() => {
-    ReactTestUtils.act(() => {
-      reactRoot.unmount();
-    });
-    document.body.removeChild(container);
-    // container = null;
-  });
-  it('Renders', () => {
-    ReactTestUtils.act(() => {
-      reactRoot.render(<MyEditor />);
-    });
-    expect(container.innerHTML).toEqual(
-      `<div contenteditable="true" role="textbox" spellcheck="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="auto"><br></p></div>`,
-    );
-  });
-  it('Provides a context', async () => {
-    function InitialPlugin() {
-      const [editor] = useLexicalComposerContext();
-      useEffect(() => {
-        editor.update(() => {
-          $getRoot()
-            .clear()
-            .append(
-              $createParagraphNode().append($createTextNode('Initial text')),
-            );
-        });
-      }, [editor]);
-      return null;
-    }
-    await ReactTestUtils.act(async () => {
-      reactRoot.render(
-        <MyEditor>
-          <InitialPlugin />
-        </MyEditor>,
-      );
-      await Promise.resolve().then();
-    });
-    expect(container.innerHTML).toEqual(
-      `<div contenteditable="true" role="textbox" spellcheck="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="auto"><span data-lexical-text="true">Initial text</span></p></div>`,
-    );
-  });
-});