zurfyx-lexical-react 0.39.1-nightly.20251225.0

package/src/LexicalHistoryPlugin.ts

@@ -0,0 +1,31 @@
+/**
+ * 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 type {HistoryState} from '@lexical/history';
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+
+import {useHistory} from './shared/useHistory';
+
+export {createEmptyHistoryState} from '@lexical/history';
+
+export type {HistoryState};
+
+export function HistoryPlugin({
+  delay,
+  externalHistoryState,
+}: {
+  delay?: number;
+  externalHistoryState?: HistoryState;
+}): null {
+  const [editor] = useLexicalComposerContext();
+
+  useHistory(editor, externalHistoryState, delay);
+
+  return null;
+}

package/src/LexicalHorizontalRuleNode.tsx

@@ -0,0 +1,123 @@
+/**
+ * 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 type {DOMConversionMap, DOMConversionOutput, NodeKey} from 'lexical';
+import type {JSX} from 'react';
+
+import {
+  $isHorizontalRuleNode,
+  HorizontalRuleNode as BaseHorizontalRuleNode,
+  INSERT_HORIZONTAL_RULE_COMMAND,
+  type SerializedHorizontalRuleNode,
+} from '@lexical/extension';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {useLexicalNodeSelection} from '@lexical/react/useLexicalNodeSelection';
+import {
+  addClassNamesToElement,
+  mergeRegister,
+  removeClassNamesFromElement,
+} from '@lexical/utils';
+import {
+  $applyNodeReplacement,
+  CLICK_COMMAND,
+  COMMAND_PRIORITY_LOW,
+} from 'lexical';
+import * as React from 'react';
+import {useEffect} from 'react';
+
+export {
+  $isHorizontalRuleNode,
+  INSERT_HORIZONTAL_RULE_COMMAND,
+  type SerializedHorizontalRuleNode,
+};
+
+function HorizontalRuleComponent({nodeKey}: {nodeKey: NodeKey}) {
+  const [editor] = useLexicalComposerContext();
+  const [isSelected, setSelected, clearSelection] =
+    useLexicalNodeSelection(nodeKey);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerCommand(
+        CLICK_COMMAND,
+        (event: MouseEvent) => {
+          const hrElem = editor.getElementByKey(nodeKey);
+
+          if (event.target === hrElem) {
+            if (!event.shiftKey) {
+              clearSelection();
+            }
+            setSelected(!isSelected);
+            return true;
+          }
+
+          return false;
+        },
+        COMMAND_PRIORITY_LOW,
+      ),
+    );
+  }, [clearSelection, editor, isSelected, nodeKey, setSelected]);
+
+  useEffect(() => {
+    const hrElem = editor.getElementByKey(nodeKey);
+    const isSelectedClassName = editor._config.theme.hrSelected ?? 'selected';
+
+    if (hrElem !== null) {
+      if (isSelected) {
+        addClassNamesToElement(hrElem, isSelectedClassName);
+      } else {
+        removeClassNamesFromElement(hrElem, isSelectedClassName);
+      }
+    }
+  }, [editor, isSelected, nodeKey]);
+
+  return null;
+}
+
+/**
+ * @deprecated A pure Lexical implementation is available in `@lexical/extension` as HorizontalRuleExtension
+ */
+export class HorizontalRuleNode extends BaseHorizontalRuleNode {
+  static getType(): string {
+    return 'horizontalrule';
+  }
+
+  static clone(node: HorizontalRuleNode): HorizontalRuleNode {
+    return new HorizontalRuleNode(node.__key);
+  }
+
+  static importJSON(
+    serializedNode: SerializedHorizontalRuleNode,
+  ): HorizontalRuleNode {
+    return $createHorizontalRuleNode().updateFromJSON(serializedNode);
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      hr: () => ({
+        conversion: $convertHorizontalRuleElement,
+        priority: 0,
+      }),
+    };
+  }
+
+  decorate(): JSX.Element {
+    return <HorizontalRuleComponent nodeKey={this.__key} />;
+  }
+}
+
+function $convertHorizontalRuleElement(): DOMConversionOutput {
+  return {node: $createHorizontalRuleNode()};
+}
+
+/**
+ * @deprecated A pure Lexical implementation is available in `@lexical/extension` as HorizontalRuleExtension
+ */
+export function $createHorizontalRuleNode(): HorizontalRuleNode {
+  return $applyNodeReplacement(new HorizontalRuleNode());
+}

package/src/LexicalHorizontalRulePlugin.ts

@@ -0,0 +1,49 @@
+/**
+ * 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 {
+  $createHorizontalRuleNode,
+  INSERT_HORIZONTAL_RULE_COMMAND,
+} from '@lexical/react/LexicalHorizontalRuleNode';
+import {$insertNodeToNearestRoot} from '@lexical/utils';
+import {
+  $getSelection,
+  $isRangeSelection,
+  COMMAND_PRIORITY_EDITOR,
+} from 'lexical';
+import {useEffect} from 'react';
+
+export function HorizontalRulePlugin(): null {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    return editor.registerCommand(
+      INSERT_HORIZONTAL_RULE_COMMAND,
+      (type) => {
+        const selection = $getSelection();
+
+        if (!$isRangeSelection(selection)) {
+          return false;
+        }
+
+        const focusNode = selection.focus.getNode();
+
+        if (focusNode !== null) {
+          const horizontalRuleNode = $createHorizontalRuleNode();
+          $insertNodeToNearestRoot(horizontalRuleNode);
+        }
+
+        return true;
+      },
+      COMMAND_PRIORITY_EDITOR,
+    );
+  }, [editor]);
+
+  return null;
+}

package/src/LexicalLinkPlugin.ts

@@ -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 {namedSignals} from '@lexical/extension';
+import {type LinkAttributes, LinkNode, registerLink} from '@lexical/link';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {useEffect} from 'react';
+
+type Props = {
+  validateUrl?: (url: string) => boolean;
+  attributes?: LinkAttributes;
+};
+
+export function LinkPlugin({validateUrl, attributes}: Props): null {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    if (!editor.hasNodes([LinkNode])) {
+      throw new Error('LinkPlugin: LinkNode not registered on editor');
+    }
+  });
+  useEffect(() => {
+    return registerLink(editor, namedSignals({attributes, validateUrl}));
+  }, [editor, validateUrl, attributes]);
+
+  return null;
+}

package/src/LexicalListPlugin.ts

@@ -0,0 +1,49 @@
+/**
+ * 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 {
+  ListItemNode,
+  ListNode,
+  registerListStrictIndentTransform,
+} from '@lexical/list';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {useEffect} from 'react';
+
+import {useList} from './shared/useList';
+
+export interface ListPluginProps {
+  /**
+   * When `true`, enforces strict indentation rules for list items, ensuring consistent structure.
+   * When `false` (default), indentation is more flexible.
+   */
+  hasStrictIndent?: boolean;
+}
+
+export function ListPlugin({hasStrictIndent = false}: ListPluginProps): null {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    if (!editor.hasNodes([ListNode, ListItemNode])) {
+      throw new Error(
+        'ListPlugin: ListNode and/or ListItemNode not registered on editor',
+      );
+    }
+  }, [editor]);
+
+  useEffect(() => {
+    if (!hasStrictIndent) {
+      return;
+    }
+
+    return registerListStrictIndentTransform(editor);
+  }, [editor, hasStrictIndent]);
+
+  useList(editor);
+
+  return null;
+}

package/src/LexicalMarkdownShortcutPlugin.tsx

@@ -0,0 +1,55 @@
+/**
+ * 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 type {ElementTransformer, Transformer} from '@lexical/markdown';
+import type {LexicalNode} from 'lexical';
+
+import {registerMarkdownShortcuts, TRANSFORMERS} from '@lexical/markdown';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {
+  $createHorizontalRuleNode,
+  $isHorizontalRuleNode,
+  HorizontalRuleNode,
+} from '@lexical/react/LexicalHorizontalRuleNode';
+import {useEffect} from 'react';
+
+const HR: ElementTransformer = {
+  dependencies: [HorizontalRuleNode],
+  export: (node: LexicalNode) => {
+    return $isHorizontalRuleNode(node) ? '***' : null;
+  },
+  regExp: /^(---|\*\*\*|___)\s?$/,
+  replace: (parentNode, _1, _2, isImport) => {
+    const line = $createHorizontalRuleNode();
+
+    // TODO: Get rid of isImport flag
+    if (isImport || parentNode.getNextSibling() != null) {
+      parentNode.replace(line);
+    } else {
+      parentNode.insertBefore(line);
+    }
+
+    line.selectNext();
+  },
+  type: 'element',
+};
+export const DEFAULT_TRANSFORMERS = [HR, ...TRANSFORMERS];
+
+export function MarkdownShortcutPlugin({
+  transformers = DEFAULT_TRANSFORMERS,
+}: Readonly<{
+  transformers?: Array<Transformer>;
+}>): null {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    return registerMarkdownShortcuts(editor, transformers);
+  }, [editor, transformers]);
+
+  return null;
+}

package/src/LexicalNestedComposer.tsx

@@ -0,0 +1,215 @@
+/**
+ * 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 type {LexicalComposerContextType} from '@lexical/react/LexicalComposerContext';
+import type {EditableListener} from 'lexical';
+import type {JSX} from 'react';
+
+import {CollaborationContext} from '@lexical/react/LexicalCollaborationContext';
+import {
+  createLexicalComposerContext,
+  LexicalComposerContext,
+} from '@lexical/react/LexicalComposerContext';
+import {
+  createSharedNodeState,
+  EditorThemeClasses,
+  getRegisteredNode,
+  getTransformSetFromKlass,
+  Klass,
+  LexicalEditor,
+  LexicalNode,
+  LexicalNodeReplacement,
+} from 'lexical';
+import * as React from 'react';
+import {ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
+import invariant from 'shared/invariant';
+import warnOnlyOnce from 'shared/warnOnlyOnce';
+
+export interface LexicalNestedComposerProps {
+  /**
+   * Any children (e.g. plug-ins) for this editor. Note that the nested editor
+   * does not inherit any plug-ins or registrations from those plug-ins (such
+   * as transforms and command listeners that may be necessary for correct
+   * operation of those nodes) from the parent editor. If you are using nodes
+   * that require plug-ins they must also be instantiated here.
+   */
+  children?: ReactNode;
+  /**
+   * The nested editor, created outside of this component (typically in the
+   * implementation of a LexicalNode) with {@link createEditor}
+   */
+  initialEditor: LexicalEditor;
+  /**
+   * Optionally overwrite the theme of the initialEditor
+   */
+  initialTheme?: EditorThemeClasses;
+  /**
+   * @deprecated This feature is not safe or correctly implemented and will be
+   * removed in v0.32.0. The only correct time to configure the nodes is when
+   * creating the initialEditor.
+   *
+   * @example
+   * ```ts
+   * // This is normally in the implementation of a LexicalNode that
+   * // owns the nested editor
+   * editor = createEditor({nodes: [], parentEditor: $getEditor()});
+   * ```
+   */
+  initialNodes?: ReadonlyArray<Klass<LexicalNode> | LexicalNodeReplacement>;
+  /**
+   * If this is not explicitly set to true, and the collab plugin is active,
+   * rendering the children of this component will not happen until collab is ready.
+   */
+  skipCollabChecks?: undefined | true;
+  /**
+   * If this is not explicitly set to true, the editable state of the nested
+   * editor will automatically follow the parent editor's editable state.
+   * When set to true, the nested editor is responsible for managing its own
+   * editable state.
+   *
+   * Available since v0.29.0
+   */
+  skipEditableListener?: undefined | true;
+}
+
+const initialNodesWarning = warnOnlyOnce(
+  `LexicalNestedComposer initialNodes is deprecated and will be removed in v0.32.0, it has never worked correctly.\nYou can configure your editor's nodes with createEditor({nodes: [], parentEditor: $getEditor()})`,
+);
+const explicitNamespaceWarning = warnOnlyOnce(
+  `LexicalNestedComposer initialEditor should explicitly initialize its namespace when the node configuration differs from the parentEditor. For backwards compatibility, the namespace will be initialized from parentEditor until v0.32.0, but this has always had incorrect copy/paste behavior when the configuration differed.\nYou can configure your editor's namespace with createEditor({namespace: 'nested-editor-namespace', nodes: [], parentEditor: $getEditor()}).`,
+);
+
+export function LexicalNestedComposer({
+  initialEditor,
+  children,
+  initialNodes,
+  initialTheme,
+  skipCollabChecks,
+  skipEditableListener,
+}: LexicalNestedComposerProps): JSX.Element {
+  const wasCollabPreviouslyReadyRef = useRef(false);
+  const parentContext = useContext(LexicalComposerContext);
+
+  if (parentContext == null) {
+    invariant(false, 'Unexpected parent context null on a nested composer');
+  }
+
+  const [parentEditor, {getTheme: getParentTheme}] = parentContext;
+
+  const composerContext: [LexicalEditor, LexicalComposerContextType] = useMemo(
+    () => {
+      const composerTheme: EditorThemeClasses | undefined =
+        initialTheme || getParentTheme() || undefined;
+
+      const context: LexicalComposerContextType = createLexicalComposerContext(
+        parentContext,
+        composerTheme,
+      );
+
+      if (composerTheme !== undefined) {
+        initialEditor._config.theme = composerTheme;
+      }
+
+      initialEditor._parentEditor = initialEditor._parentEditor || parentEditor;
+      const createEditorArgs = initialEditor._createEditorArgs;
+      const explicitNamespace = createEditorArgs && createEditorArgs.namespace;
+
+      if (!initialNodes) {
+        if (!(createEditorArgs && createEditorArgs.nodes)) {
+          const parentNodes = (initialEditor._nodes = new Map(
+            parentEditor._nodes,
+          ));
+          if (!explicitNamespace) {
+            // This is the only safe situation to inherit the parent's namespace
+            initialEditor._config.namespace = parentEditor._config.namespace;
+          }
+          for (const [type, entry] of parentNodes) {
+            initialEditor._nodes.set(type, {
+              exportDOM: entry.exportDOM,
+              klass: entry.klass,
+              replace: entry.replace,
+              replaceWithKlass: entry.replaceWithKlass,
+              sharedNodeState: createSharedNodeState(entry.klass),
+              transforms: getTransformSetFromKlass(entry.klass),
+            });
+          }
+        } else if (!explicitNamespace) {
+          explicitNamespaceWarning();
+          initialEditor._config.namespace = parentEditor._config.namespace;
+        }
+      } else {
+        initialNodesWarning();
+        if (!explicitNamespace) {
+          explicitNamespaceWarning();
+          initialEditor._config.namespace = parentEditor._config.namespace;
+        }
+        for (let klass of initialNodes) {
+          let replace = null;
+          let replaceWithKlass = null;
+
+          if (typeof klass !== 'function') {
+            const options = klass;
+            klass = options.replace;
+            replace = options.with;
+            replaceWithKlass = options.withKlass || null;
+          }
+          const registeredKlass = getRegisteredNode(
+            initialEditor,
+            klass.getType(),
+          );
+
+          initialEditor._nodes.set(klass.getType(), {
+            exportDOM: registeredKlass ? registeredKlass.exportDOM : undefined,
+            klass,
+            replace,
+            replaceWithKlass,
+            sharedNodeState: createSharedNodeState(klass),
+            transforms: getTransformSetFromKlass(klass),
+          });
+        }
+      }
+
+      return [initialEditor, context];
+    },
+
+    // We only do this for init
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  // If collaboration is enabled, make sure we don't render the children until the collaboration subdocument is ready.
+  const collabContext = useContext(CollaborationContext);
+  const {isCollabActive, yjsDocMap} = collabContext ?? {};
+
+  const isCollabReady =
+    skipCollabChecks ||
+    wasCollabPreviouslyReadyRef.current ||
+    (yjsDocMap && yjsDocMap.has(initialEditor.getKey()));
+
+  useEffect(() => {
+    if (isCollabReady) {
+      wasCollabPreviouslyReadyRef.current = true;
+    }
+  }, [isCollabReady]);
+
+  // Update `isEditable` state of nested editor in response to the same change on parent editor.
+  useEffect(() => {
+    if (!skipEditableListener) {
+      const editableListener: EditableListener = (editable) =>
+        initialEditor.setEditable(editable);
+      editableListener(parentEditor.isEditable());
+      return parentEditor.registerEditableListener(editableListener);
+    }
+  }, [initialEditor, parentEditor, skipEditableListener]);
+
+  return (
+    <LexicalComposerContext.Provider value={composerContext}>
+      {!isCollabActive || isCollabReady ? children : null}
+    </LexicalComposerContext.Provider>
+  );
+}