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

package/src/LexicalNodeContextMenuPlugin.tsx

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

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

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

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

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

@@ -1,65 +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 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;
-  }
-}