zurfyx-lexical-react 0.39.1-nightly.20251225.0

package/src/LexicalNodeContextMenuPlugin.tsx

@@ -0,0 +1,316 @@
+/**
+ * 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 {
+  autoUpdate,
+  flip,
+  FloatingFocusManager,
+  FloatingOverlay,
+  FloatingPortal,
+  offset,
+  shift,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useListNavigation,
+  useRole,
+  useTypeahead,
+} from '@floating-ui/react';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {$getNearestNodeFromDOMNode, LexicalNode} from 'lexical';
+import {forwardRef, JSX, RefObject, useEffect, useRef, useState} from 'react';
+
+class MenuOption {
+  key: string;
+  ref?: RefObject<HTMLElement | null>;
+
+  constructor(key: string) {
+    this.key = key;
+    this.ref = {current: null};
+    this.setRefElement = this.setRefElement.bind(this);
+  }
+
+  setRefElement(element: HTMLElement | null) {
+    this.ref = {current: element};
+  }
+}
+
+class NodeContextMenuOption extends MenuOption {
+  type: string;
+  title: string;
+  icon: JSX.Element | null;
+  disabled: boolean;
+  $onSelect: () => void;
+  $showOn?: (node: LexicalNode) => boolean;
+
+  constructor(
+    title: string,
+    options: {
+      disabled?: boolean;
+      icon?: JSX.Element;
+      $onSelect: () => void;
+      $showOn?: (node: LexicalNode) => boolean;
+    },
+  ) {
+    super(title);
+    this.type = 'item';
+    this.title = title;
+    this.disabled = options.disabled ?? false;
+    this.icon = options.icon ?? null;
+    this.$onSelect = options.$onSelect;
+    if (options.$showOn) {
+      this.$showOn = options.$showOn;
+    }
+  }
+}
+
+class NodeContextMenuSeparator extends MenuOption {
+  type: string;
+  $showOn?: (node: LexicalNode) => boolean;
+
+  constructor(options?: {$showOn?: (node: LexicalNode) => boolean}) {
+    super('_separator');
+    this.type = 'separator';
+    if (options && options.$showOn) {
+      this.$showOn = options.$showOn;
+    }
+  }
+}
+
+const ContextMenuSeparatorItem = forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    disabled?: boolean;
+  }
+>(({className, disabled, ...props}, ref) => {
+  return <hr className={className} />;
+});
+
+const ContextMenuItem = forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    label?: string;
+    disabled?: boolean;
+    icon?: JSX.Element | null;
+  }
+>(({className, label, disabled, icon, ...props}, ref) => {
+  return (
+    <button
+      {...props}
+      className={className}
+      ref={ref}
+      role="menuitem"
+      disabled={disabled}>
+      {icon}
+      {label}
+    </button>
+  );
+});
+
+type ContextMenuType = NodeContextMenuOption | NodeContextMenuSeparator;
+
+interface MenuSeparatorType {
+  className: string;
+  key: string;
+  type: string;
+}
+
+interface MenuItemType extends MenuSeparatorType {
+  disabled: boolean;
+  label: string;
+  onClick: () => void;
+  title: string;
+}
+
+type MenuType = MenuItemType | MenuSeparatorType;
+
+interface Props {
+  label?: string;
+  nested?: boolean;
+  itemClassName?: string;
+  separatorClassName?: string;
+  items: ContextMenuType[];
+}
+
+const NodeContextMenuPlugin = forwardRef<
+  HTMLButtonElement,
+  Props & React.HTMLProps<HTMLButtonElement>
+>(({items, className, itemClassName, separatorClassName}, forwardedRef) => {
+  const [editor] = useLexicalComposerContext();
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const listItemsRef = useRef<Array<HTMLButtonElement | null>>([]);
+  const listContentRef = useRef<Array<string | null>>([]);
+
+  const {refs, floatingStyles, context} = useFloating({
+    middleware: [
+      offset({alignmentAxis: 4, mainAxis: 5}),
+      flip({
+        fallbackPlacements: ['left-start'],
+      }),
+      shift({padding: 10}),
+    ],
+    onOpenChange: setIsOpen,
+    open: isOpen,
+    placement: 'right-start',
+    strategy: 'fixed',
+    whileElementsMounted: autoUpdate,
+  });
+
+  const role = useRole(context, {role: 'menu'});
+  const dismiss = useDismiss(context);
+  const listNavigation = useListNavigation(context, {
+    activeIndex,
+    listRef: listItemsRef,
+    onNavigate: setActiveIndex,
+  });
+  const typeahead = useTypeahead(context, {
+    activeIndex,
+    enabled: isOpen,
+    listRef: listContentRef,
+    onMatch: setActiveIndex,
+  });
+
+  const {getFloatingProps, getItemProps} = useInteractions([
+    role,
+    dismiss,
+    listNavigation,
+    typeahead,
+  ]);
+
+  const [renderItems, setRenderItems] = useState<MenuType[]>([]);
+
+  useEffect(() => {
+    function onContextMenu(e: MouseEvent) {
+      e.preventDefault();
+
+      refs.setPositionReference({
+        getBoundingClientRect() {
+          return {
+            bottom: e.clientY,
+            height: 0,
+            left: e.clientX,
+            right: e.clientX,
+            top: e.clientY,
+            width: 0,
+            x: e.clientX,
+            y: e.clientY,
+          };
+        },
+      });
+
+      let visibleItems: ContextMenuType[] = [];
+      if (items) {
+        editor.read(() => {
+          const node = $getNearestNodeFromDOMNode(e.target as Element);
+          if (node) {
+            visibleItems = items!.filter((option) =>
+              option.$showOn ? option.$showOn(node) : true,
+            );
+          }
+        });
+      }
+
+      const renderableItems = visibleItems.map((option, index) => {
+        if (option.type === 'separator') {
+          return {
+            className: separatorClassName,
+            key: option.key + '-' + index,
+            type: option.type,
+          };
+        } else {
+          return {
+            className: itemClassName,
+            disabled: (option as NodeContextMenuOption).disabled,
+            icon: (option as NodeContextMenuOption).icon,
+            key: option.key,
+            label: (option as NodeContextMenuOption).title,
+            onClick: () =>
+              editor.update(() =>
+                (option as NodeContextMenuOption).$onSelect(),
+              ),
+            title: (option as NodeContextMenuOption).title,
+            type: option.type,
+          };
+        }
+      }) as MenuType[];
+
+      listContentRef.current = renderableItems.map((item) => item.key);
+
+      setRenderItems(renderableItems);
+
+      setIsOpen(true);
+    }
+
+    return editor.registerRootListener((rootElement, prevRootElement) => {
+      if (prevRootElement !== null) {
+        prevRootElement.removeEventListener('contextmenu', onContextMenu);
+      }
+      if (rootElement !== null) {
+        rootElement.addEventListener('contextmenu', onContextMenu);
+      }
+    });
+  }, [items, itemClassName, separatorClassName, refs, editor]);
+
+  return (
+    <FloatingPortal>
+      {isOpen && (
+        <FloatingOverlay lockScroll={true}>
+          <FloatingFocusManager context={context} initialFocus={refs.floating}>
+            <div
+              className={className}
+              ref={refs.setFloating}
+              style={floatingStyles}
+              {...getFloatingProps()}>
+              {renderItems.map((item, index) => {
+                if (item.type === 'item') {
+                  return (
+                    <ContextMenuItem
+                      {...getItemProps({
+                        ...item,
+                        onClick() {
+                          (item as MenuItemType).onClick();
+                          setIsOpen(false);
+                        },
+                        onMouseUp() {
+                          (item as MenuItemType).onClick();
+                          setIsOpen(false);
+                        },
+                        ref(node: HTMLButtonElement) {
+                          listItemsRef.current[index] = node;
+                        },
+                        tabIndex: activeIndex === index ? 0 : -1,
+                      })}
+                      key={item.key}
+                    />
+                  );
+                } else if (item.type === 'separator') {
+                  return (
+                    <ContextMenuSeparatorItem
+                      {...getItemProps({
+                        ...item,
+                        ref(node: HTMLButtonElement) {
+                          listItemsRef.current[index] = node;
+                        },
+                        tabIndex: activeIndex === index ? 0 : -1,
+                      })}
+                      key={item.key}
+                    />
+                  );
+                }
+              })}
+            </div>
+          </FloatingFocusManager>
+        </FloatingOverlay>
+      )}
+    </FloatingPortal>
+  );
+});
+
+export {NodeContextMenuOption, NodeContextMenuPlugin, NodeContextMenuSeparator};

package/src/LexicalNodeEventPlugin.ts

@@ -0,0 +1,73 @@
+/**
+ * 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 {Klass, LexicalEditor, LexicalNode, NodeKey} from 'lexical';
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {$findMatchingParent} from '@lexical/utils';
+import {$getNearestNodeFromDOMNode} from 'lexical';
+import {useEffect, useRef} from 'react';
+
+const capturedEvents = new Set<string>(['mouseenter', 'mouseleave']);
+
+export function NodeEventPlugin({
+  nodeType,
+  eventType,
+  eventListener,
+}: {
+  nodeType: Klass<LexicalNode>;
+  eventType: string;
+  eventListener: (
+    event: Event,
+    editor: LexicalEditor,
+    nodeKey: NodeKey,
+  ) => void;
+}): null {
+  const [editor] = useLexicalComposerContext();
+  const listenerRef = useRef(eventListener);
+
+  listenerRef.current = eventListener;
+
+  useEffect(() => {
+    const isCaptured = capturedEvents.has(eventType);
+
+    const onEvent = (event: Event) => {
+      editor.update(() => {
+        const nearestNode = $getNearestNodeFromDOMNode(event.target as Element);
+        if (nearestNode !== null) {
+          const targetNode = isCaptured
+            ? nearestNode instanceof nodeType
+              ? nearestNode
+              : null
+            : $findMatchingParent(
+                nearestNode,
+                (node) => node instanceof nodeType,
+              );
+          if (targetNode !== null) {
+            listenerRef.current(event, editor, targetNode.getKey());
+            return;
+          }
+        }
+      });
+    };
+
+    return editor.registerRootListener((rootElement, prevRootElement) => {
+      if (rootElement) {
+        rootElement.addEventListener(eventType, onEvent, isCaptured);
+      }
+
+      if (prevRootElement) {
+        prevRootElement.removeEventListener(eventType, onEvent, isCaptured);
+      }
+    });
+    // We intentionally don't respect changes to eventType.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, nodeType]);
+
+  return null;
+}

package/src/LexicalNodeMenuPlugin.tsx

@@ -0,0 +1,130 @@
+/**
+ * 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 {MenuRenderFn, MenuResolution} from './shared/LexicalMenu';
+import type {JSX} from 'react';
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {
+  $getNodeByKey,
+  COMMAND_PRIORITY_LOW,
+  CommandListenerPriority,
+  NodeKey,
+  TextNode,
+} from 'lexical';
+import {useCallback, useEffect, useState} from 'react';
+import * as React from 'react';
+import {startTransition} from 'shared/reactPatches';
+
+import {LexicalMenu, MenuOption, useMenuAnchorRef} from './shared/LexicalMenu';
+
+export type NodeMenuPluginProps<TOption extends MenuOption> = {
+  onSelectOption: (
+    option: TOption,
+    textNodeContainingQuery: TextNode | null,
+    closeMenu: () => void,
+    matchingString: string,
+  ) => void;
+  options: Array<TOption>;
+  nodeKey: NodeKey | null;
+  onClose?: () => void;
+  onOpen?: (resolution: MenuResolution) => void;
+  menuRenderFn: MenuRenderFn<TOption>;
+  anchorClassName?: string;
+  commandPriority?: CommandListenerPriority;
+  parent?: HTMLElement;
+};
+
+export function LexicalNodeMenuPlugin<TOption extends MenuOption>({
+  options,
+  nodeKey,
+  onClose,
+  onOpen,
+  onSelectOption,
+  menuRenderFn,
+  anchorClassName,
+  commandPriority = COMMAND_PRIORITY_LOW,
+  parent,
+}: NodeMenuPluginProps<TOption>): JSX.Element | null {
+  const [editor] = useLexicalComposerContext();
+  const [resolution, setResolution] = useState<MenuResolution | null>(null);
+  const anchorElementRef = useMenuAnchorRef(
+    resolution,
+    setResolution,
+    anchorClassName,
+    parent,
+  );
+
+  const closeNodeMenu = useCallback(() => {
+    setResolution(null);
+    if (onClose != null && resolution !== null) {
+      onClose();
+    }
+  }, [onClose, resolution]);
+
+  const openNodeMenu = useCallback(
+    (res: MenuResolution) => {
+      setResolution(res);
+      if (onOpen != null && resolution === null) {
+        onOpen(res);
+      }
+    },
+    [onOpen, resolution],
+  );
+
+  const positionOrCloseMenu = useCallback(() => {
+    if (nodeKey) {
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey);
+        const domElement = editor.getElementByKey(nodeKey);
+        if (node != null && domElement != null) {
+          if (resolution == null) {
+            startTransition(() =>
+              openNodeMenu({
+                getRect: () => domElement.getBoundingClientRect(),
+              }),
+            );
+          }
+        }
+      });
+    } else if (nodeKey == null && resolution != null) {
+      closeNodeMenu();
+    }
+  }, [closeNodeMenu, editor, nodeKey, openNodeMenu, resolution]);
+
+  useEffect(() => {
+    positionOrCloseMenu();
+  }, [positionOrCloseMenu, nodeKey]);
+
+  useEffect(() => {
+    if (nodeKey != null) {
+      return editor.registerUpdateListener(({dirtyElements}) => {
+        if (dirtyElements.get(nodeKey)) {
+          positionOrCloseMenu();
+        }
+      });
+    }
+  }, [editor, positionOrCloseMenu, nodeKey]);
+
+  return anchorElementRef.current === null ||
+    resolution === null ||
+    editor === null ? null : (
+    <LexicalMenu
+      close={closeNodeMenu}
+      resolution={resolution}
+      editor={editor}
+      anchorElementRef={anchorElementRef}
+      options={options}
+      menuRenderFn={menuRenderFn}
+      onSelectOption={onSelectOption}
+      commandPriority={commandPriority}
+    />
+  );
+}
+
+export {MenuOption, MenuRenderFn, MenuResolution};

package/src/LexicalOnChangePlugin.ts

@@ -0,0 +1,51 @@
+/**
+ * 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 {EditorState, LexicalEditor} from 'lexical';
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {HISTORY_MERGE_TAG} from 'lexical';
+import useLayoutEffect from 'shared/useLayoutEffect';
+
+export function OnChangePlugin({
+  ignoreHistoryMergeTagChange = true,
+  ignoreSelectionChange = false,
+  onChange,
+}: {
+  ignoreHistoryMergeTagChange?: boolean;
+  ignoreSelectionChange?: boolean;
+  onChange: (
+    editorState: EditorState,
+    editor: LexicalEditor,
+    tags: Set<string>,
+  ) => void;
+}): null {
+  const [editor] = useLexicalComposerContext();
+
+  useLayoutEffect(() => {
+    if (onChange) {
+      return editor.registerUpdateListener(
+        ({editorState, dirtyElements, dirtyLeaves, prevEditorState, tags}) => {
+          if (
+            (ignoreSelectionChange &&
+              dirtyElements.size === 0 &&
+              dirtyLeaves.size === 0) ||
+            (ignoreHistoryMergeTagChange && tags.has(HISTORY_MERGE_TAG)) ||
+            prevEditorState.isEmpty()
+          ) {
+            return;
+          }
+
+          onChange(editorState, editor, tags);
+        },
+      );
+    }
+  }, [editor, ignoreHistoryMergeTagChange, ignoreSelectionChange, onChange]);
+
+  return null;
+}

package/src/LexicalPlainTextPlugin.tsx

@@ -0,0 +1,65 @@
+/**
+ * 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 {JSX} from 'react';
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {useLexicalEditable} from '@lexical/react/useLexicalEditable';
+
+import {
+  type ErrorBoundaryType,
+  LegacyDecorators,
+} from './shared/LegacyDecorators';
+import {useCanShowPlaceholder} from './shared/useCanShowPlaceholder';
+import {usePlainTextSetup} from './shared/usePlainTextSetup';
+
+export function PlainTextPlugin({
+  contentEditable,
+  // TODO Remove. This property is now part of ContentEditable
+  placeholder = null,
+  ErrorBoundary,
+}: {
+  contentEditable: JSX.Element;
+  placeholder?:
+    | ((isEditable: boolean) => null | JSX.Element)
+    | null
+    | JSX.Element;
+  ErrorBoundary: ErrorBoundaryType;
+}): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+  usePlainTextSetup(editor);
+
+  return (
+    <>
+      {contentEditable}
+      <Placeholder content={placeholder} />
+      <LegacyDecorators editor={editor} ErrorBoundary={ErrorBoundary} />
+    </>
+  );
+}
+
+// TODO Remove
+function Placeholder({
+  content,
+}: {
+  content: ((isEditable: boolean) => null | JSX.Element) | null | JSX.Element;
+}): null | JSX.Element {
+  const [editor] = useLexicalComposerContext();
+  const showPlaceholder = useCanShowPlaceholder(editor);
+  const editable = useLexicalEditable();
+
+  if (!showPlaceholder) {
+    return null;
+  }
+
+  if (typeof content === 'function') {
+    return content(editable);
+  } else {
+    return content;
+  }
+}

package/src/LexicalRichTextPlugin.tsx

@@ -0,0 +1,65 @@
+/**
+ * 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 {JSX} from 'react';
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {useLexicalEditable} from '@lexical/react/useLexicalEditable';
+
+import {
+  type ErrorBoundaryType,
+  LegacyDecorators,
+} from './shared/LegacyDecorators';
+import {useCanShowPlaceholder} from './shared/useCanShowPlaceholder';
+import {useRichTextSetup} from './shared/useRichTextSetup';
+
+export function RichTextPlugin({
+  contentEditable,
+  // TODO Remove. This property is now part of ContentEditable
+  placeholder = null,
+  ErrorBoundary,
+}: {
+  contentEditable: JSX.Element;
+  placeholder?:
+    | ((isEditable: boolean) => null | JSX.Element)
+    | null
+    | JSX.Element;
+  ErrorBoundary: ErrorBoundaryType;
+}): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+  useRichTextSetup(editor);
+
+  return (
+    <>
+      {contentEditable}
+      <Placeholder content={placeholder} />
+      <LegacyDecorators editor={editor} ErrorBoundary={ErrorBoundary} />
+    </>
+  );
+}
+
+// TODO remove
+function Placeholder({
+  content,
+}: {
+  content: ((isEditable: boolean) => null | JSX.Element) | null | JSX.Element;
+}): null | JSX.Element {
+  const [editor] = useLexicalComposerContext();
+  const showPlaceholder = useCanShowPlaceholder(editor);
+  const editable = useLexicalEditable();
+
+  if (!showPlaceholder) {
+    return null;
+  }
+
+  if (typeof content === 'function') {
+    return content(editable);
+  } else {
+    return content;
+  }
+}