zurfyx-lexical-react 0.39.1-nightly.20251225.0

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

@@ -0,0 +1,101 @@
+/**
+ * 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

@@ -0,0 +1,129 @@
+/**
+ * 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

@@ -0,0 +1,264 @@
+/**
+ * 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

@@ -0,0 +1,85 @@
+/**
+ * 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>`,
+    );
+  });
+});