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

package/src/LexicalDraggableBlockPlugin.tsx

@@ -1,481 +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 {eventFiles} from '@lexical/rich-text';
-import {calculateZoomLevel, isHTMLElement, mergeRegister} from '@lexical/utils';
-import {
-  $getNearestNodeFromDOMNode,
-  $getNodeByKey,
-  $getRoot,
-  COMMAND_PRIORITY_HIGH,
-  COMMAND_PRIORITY_LOW,
-  DRAGOVER_COMMAND,
-  DROP_COMMAND,
-  LexicalEditor,
-} from 'lexical';
-import {
-  DragEvent as ReactDragEvent,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import {createPortal} from 'react-dom';
-
-import {Point} from './shared/point';
-import {Rectangle} from './shared/rect';
-
-const SPACE = 4;
-const TARGET_LINE_HALF_HEIGHT = 2;
-const DRAG_DATA_FORMAT = 'application/x-lexical-drag-block';
-const TEXT_BOX_HORIZONTAL_PADDING = 28;
-
-const Downward = 1;
-const Upward = -1;
-const Indeterminate = 0;
-
-let prevIndex = Infinity;
-
-function getCurrentIndex(keysLength: number): number {
-  if (keysLength === 0) {
-    return Infinity;
-  }
-  if (prevIndex >= 0 && prevIndex < keysLength) {
-    return prevIndex;
-  }
-
-  return Math.floor(keysLength / 2);
-}
-
-function getTopLevelNodeKeys(editor: LexicalEditor): string[] {
-  return editor.getEditorState().read(() => $getRoot().getChildrenKeys());
-}
-
-function getCollapsedMargins(elem: HTMLElement): {
-  marginTop: number;
-  marginBottom: number;
-} {
-  const getMargin = (
-    element: Element | null,
-    margin: 'marginTop' | 'marginBottom',
-  ): number =>
-    element ? parseFloat(window.getComputedStyle(element)[margin]) : 0;
-
-  const {marginTop, marginBottom} = window.getComputedStyle(elem);
-  const prevElemSiblingMarginBottom = getMargin(
-    elem.previousElementSibling,
-    'marginBottom',
-  );
-  const nextElemSiblingMarginTop = getMargin(
-    elem.nextElementSibling,
-    'marginTop',
-  );
-  const collapsedTopMargin = Math.max(
-    parseFloat(marginTop),
-    prevElemSiblingMarginBottom,
-  );
-  const collapsedBottomMargin = Math.max(
-    parseFloat(marginBottom),
-    nextElemSiblingMarginTop,
-  );
-
-  return {marginBottom: collapsedBottomMargin, marginTop: collapsedTopMargin};
-}
-
-function getBlockElement(
-  anchorElem: HTMLElement,
-  editor: LexicalEditor,
-  event: MouseEvent,
-  useEdgeAsDefault = false,
-): HTMLElement | null {
-  const anchorElementRect = anchorElem.getBoundingClientRect();
-  const topLevelNodeKeys = getTopLevelNodeKeys(editor);
-
-  let blockElem: HTMLElement | null = null;
-
-  editor.getEditorState().read(() => {
-    if (useEdgeAsDefault) {
-      const [firstNode, lastNode] = [
-        editor.getElementByKey(topLevelNodeKeys[0]),
-        editor.getElementByKey(topLevelNodeKeys[topLevelNodeKeys.length - 1]),
-      ];
-
-      const [firstNodeRect, lastNodeRect] = [
-        firstNode != null ? firstNode.getBoundingClientRect() : undefined,
-        lastNode != null ? lastNode.getBoundingClientRect() : undefined,
-      ];
-
-      if (firstNodeRect && lastNodeRect) {
-        const firstNodeZoom = calculateZoomLevel(firstNode);
-        const lastNodeZoom = calculateZoomLevel(lastNode);
-        if (event.y / firstNodeZoom < firstNodeRect.top) {
-          blockElem = firstNode;
-        } else if (event.y / lastNodeZoom > lastNodeRect.bottom) {
-          blockElem = lastNode;
-        }
-
-        if (blockElem) {
-          return;
-        }
-      }
-    }
-
-    let index = getCurrentIndex(topLevelNodeKeys.length);
-    let direction = Indeterminate;
-
-    while (index >= 0 && index < topLevelNodeKeys.length) {
-      const key = topLevelNodeKeys[index];
-      const elem = editor.getElementByKey(key);
-      if (elem === null) {
-        break;
-      }
-      const zoom = calculateZoomLevel(elem);
-      const point = new Point(event.x / zoom, event.y / zoom);
-      const domRect = Rectangle.fromDOM(elem);
-      const {marginTop, marginBottom} = getCollapsedMargins(elem);
-      const rect = domRect.generateNewRect({
-        bottom: domRect.bottom + marginBottom,
-        left: anchorElementRect.left,
-        right: anchorElementRect.right,
-        top: domRect.top - marginTop,
-      });
-
-      const {
-        result,
-        reason: {isOnTopSide, isOnBottomSide},
-      } = rect.contains(point);
-
-      if (result) {
-        blockElem = elem;
-        prevIndex = index;
-        break;
-      }
-
-      if (direction === Indeterminate) {
-        if (isOnTopSide) {
-          direction = Upward;
-        } else if (isOnBottomSide) {
-          direction = Downward;
-        } else {
-          // stop search block element
-          direction = Infinity;
-        }
-      }
-
-      index += direction;
-    }
-  });
-
-  return blockElem;
-}
-
-function setMenuPosition(
-  targetElem: HTMLElement | null,
-  floatingElem: HTMLElement,
-  anchorElem: HTMLElement,
-) {
-  if (!targetElem) {
-    floatingElem.style.opacity = '0';
-    floatingElem.style.transform = 'translate(-10000px, -10000px)';
-    return;
-  }
-
-  const targetRect = targetElem.getBoundingClientRect();
-  const targetStyle = window.getComputedStyle(targetElem);
-  const floatingElemRect = floatingElem.getBoundingClientRect();
-  const anchorElementRect = anchorElem.getBoundingClientRect();
-
-  // top left
-  let targetCalculateHeight: number = parseInt(targetStyle.lineHeight, 10);
-  if (isNaN(targetCalculateHeight)) {
-    // middle
-    targetCalculateHeight = targetRect.bottom - targetRect.top;
-  }
-  const top =
-    targetRect.top +
-    (targetCalculateHeight - floatingElemRect.height) / 2 -
-    anchorElementRect.top +
-    anchorElem.scrollTop;
-
-  const left = SPACE;
-
-  floatingElem.style.opacity = '1';
-  floatingElem.style.transform = `translate(${left}px, ${top}px)`;
-}
-
-function setDragImage(
-  dataTransfer: DataTransfer,
-  draggableBlockElem: HTMLElement,
-) {
-  const {transform} = draggableBlockElem.style;
-
-  // Remove dragImage borders
-  draggableBlockElem.style.transform = 'translateZ(0)';
-  dataTransfer.setDragImage(draggableBlockElem, 0, 0);
-
-  setTimeout(() => {
-    draggableBlockElem.style.transform = transform;
-  });
-}
-
-function setTargetLine(
-  targetLineElem: HTMLElement,
-  targetBlockElem: HTMLElement,
-  mouseY: number,
-  anchorElem: HTMLElement,
-) {
-  const {top: targetBlockElemTop, height: targetBlockElemHeight} =
-    targetBlockElem.getBoundingClientRect();
-  const {top: anchorTop, width: anchorWidth} =
-    anchorElem.getBoundingClientRect();
-  const {marginTop, marginBottom} = getCollapsedMargins(targetBlockElem);
-  let lineTop = targetBlockElemTop;
-  if (mouseY >= targetBlockElemTop) {
-    lineTop += targetBlockElemHeight + marginBottom / 2;
-  } else {
-    lineTop -= marginTop / 2;
-  }
-
-  const top =
-    lineTop - anchorTop - TARGET_LINE_HALF_HEIGHT + anchorElem.scrollTop;
-  const left = TEXT_BOX_HORIZONTAL_PADDING - SPACE;
-
-  targetLineElem.style.transform = `translate(${left}px, ${top}px)`;
-  targetLineElem.style.width = `${
-    anchorWidth - (TEXT_BOX_HORIZONTAL_PADDING - SPACE) * 2
-  }px`;
-  targetLineElem.style.opacity = '.4';
-}
-
-function hideTargetLine(targetLineElem: HTMLElement | null) {
-  if (targetLineElem) {
-    targetLineElem.style.opacity = '0';
-    targetLineElem.style.transform = 'translate(-10000px, -10000px)';
-  }
-}
-
-function useDraggableBlockMenu(
-  editor: LexicalEditor,
-  anchorElem: HTMLElement,
-  menuRef: React.RefObject<HTMLElement | null>,
-  targetLineRef: React.RefObject<HTMLElement | null>,
-  isEditable: boolean,
-  menuComponent: ReactNode,
-  targetLineComponent: ReactNode,
-  isOnMenu: (element: HTMLElement) => boolean,
-  onElementChanged?: (element: HTMLElement | null) => void,
-): JSX.Element {
-  const scrollerElem = anchorElem.parentElement;
-
-  const isDraggingBlockRef = useRef<boolean>(false);
-  const [draggableBlockElem, setDraggableBlockElemState] =
-    useState<HTMLElement | null>(null);
-
-  const setDraggableBlockElem = useCallback(
-    (elem: HTMLElement | null) => {
-      setDraggableBlockElemState(elem);
-      if (onElementChanged) {
-        onElementChanged(elem);
-      }
-    },
-    [onElementChanged],
-  );
-
-  useEffect(() => {
-    function onMouseMove(event: MouseEvent) {
-      const target = event.target;
-      if (!isHTMLElement(target)) {
-        setDraggableBlockElem(null);
-        return;
-      }
-
-      if (isOnMenu(target)) {
-        return;
-      }
-
-      const _draggableBlockElem = getBlockElement(anchorElem, editor, event);
-
-      setDraggableBlockElem(_draggableBlockElem);
-    }
-
-    function onMouseLeave() {
-      setDraggableBlockElem(null);
-    }
-
-    if (scrollerElem != null) {
-      scrollerElem.addEventListener('mousemove', onMouseMove);
-      scrollerElem.addEventListener('mouseleave', onMouseLeave);
-    }
-
-    return () => {
-      if (scrollerElem != null) {
-        scrollerElem.removeEventListener('mousemove', onMouseMove);
-        scrollerElem.removeEventListener('mouseleave', onMouseLeave);
-      }
-    };
-  }, [scrollerElem, anchorElem, editor, isOnMenu, setDraggableBlockElem]);
-
-  useEffect(() => {
-    if (menuRef.current) {
-      setMenuPosition(draggableBlockElem, menuRef.current, anchorElem);
-    }
-  }, [anchorElem, draggableBlockElem, menuRef]);
-
-  useEffect(() => {
-    function onDragover(event: DragEvent): boolean {
-      if (!isDraggingBlockRef.current) {
-        return false;
-      }
-      const [isFileTransfer] = eventFiles(event);
-      if (isFileTransfer) {
-        return false;
-      }
-      const {pageY, target} = event;
-      if (!isHTMLElement(target)) {
-        return false;
-      }
-      const targetBlockElem = getBlockElement(anchorElem, editor, event, true);
-      const targetLineElem = targetLineRef.current;
-      if (targetBlockElem === null || targetLineElem === null) {
-        return false;
-      }
-      setTargetLine(
-        targetLineElem,
-        targetBlockElem,
-        pageY / calculateZoomLevel(target),
-        anchorElem,
-      );
-      // Prevent default event to be able to trigger onDrop events
-      event.preventDefault();
-      return true;
-    }
-
-    function $onDrop(event: DragEvent): boolean {
-      if (!isDraggingBlockRef.current) {
-        return false;
-      }
-      const [isFileTransfer] = eventFiles(event);
-      if (isFileTransfer) {
-        return false;
-      }
-      const {target, dataTransfer, pageY} = event;
-      const dragData =
-        dataTransfer != null ? dataTransfer.getData(DRAG_DATA_FORMAT) : '';
-      const draggedNode = $getNodeByKey(dragData);
-      if (!draggedNode) {
-        return false;
-      }
-      if (!isHTMLElement(target)) {
-        return false;
-      }
-      const targetBlockElem = getBlockElement(anchorElem, editor, event, true);
-      if (!targetBlockElem) {
-        return false;
-      }
-      const targetNode = $getNearestNodeFromDOMNode(targetBlockElem);
-      if (!targetNode) {
-        return false;
-      }
-      if (targetNode === draggedNode) {
-        return true;
-      }
-      const targetBlockElemTop = targetBlockElem.getBoundingClientRect().top;
-      if (pageY / calculateZoomLevel(target) >= targetBlockElemTop) {
-        targetNode.insertAfter(draggedNode);
-      } else {
-        targetNode.insertBefore(draggedNode);
-      }
-      setDraggableBlockElem(null);
-
-      return true;
-    }
-
-    return mergeRegister(
-      editor.registerCommand(
-        DRAGOVER_COMMAND,
-        (event) => {
-          return onDragover(event);
-        },
-        COMMAND_PRIORITY_LOW,
-      ),
-      editor.registerCommand(
-        DROP_COMMAND,
-        (event) => {
-          return $onDrop(event);
-        },
-        COMMAND_PRIORITY_HIGH,
-      ),
-    );
-  }, [anchorElem, editor, targetLineRef, setDraggableBlockElem]);
-
-  function onDragStart(event: ReactDragEvent<HTMLDivElement>): void {
-    const dataTransfer = event.dataTransfer;
-    if (!dataTransfer || !draggableBlockElem) {
-      return;
-    }
-    setDragImage(dataTransfer, draggableBlockElem);
-    let nodeKey = '';
-    editor.update(() => {
-      const node = $getNearestNodeFromDOMNode(draggableBlockElem);
-      if (node) {
-        nodeKey = node.getKey();
-      }
-    });
-    isDraggingBlockRef.current = true;
-    dataTransfer.setData(DRAG_DATA_FORMAT, nodeKey);
-  }
-
-  function onDragEnd(): void {
-    isDraggingBlockRef.current = false;
-    hideTargetLine(targetLineRef.current);
-  }
-  return createPortal(
-    <>
-      <div draggable={true} onDragStart={onDragStart} onDragEnd={onDragEnd}>
-        {isEditable && menuComponent}
-      </div>
-      {targetLineComponent}
-    </>,
-    anchorElem,
-  );
-}
-
-export function DraggableBlockPlugin_EXPERIMENTAL({
-  anchorElem = document.body,
-  menuRef,
-  targetLineRef,
-  menuComponent,
-  targetLineComponent,
-  isOnMenu,
-  onElementChanged,
-}: {
-  anchorElem?: HTMLElement;
-  menuRef: React.RefObject<HTMLElement | null>;
-  targetLineRef: React.RefObject<HTMLElement | null>;
-  menuComponent: ReactNode;
-  targetLineComponent: ReactNode;
-  isOnMenu: (element: HTMLElement) => boolean;
-  onElementChanged?: (element: HTMLElement | null) => void;
-}): JSX.Element {
-  const [editor] = useLexicalComposerContext();
-  return useDraggableBlockMenu(
-    editor,
-    anchorElem,
-    menuRef,
-    targetLineRef,
-    editor._editable,
-    menuComponent,
-    targetLineComponent,
-    isOnMenu,
-    onElementChanged,
-  );
-}

package/src/LexicalEditorRefPlugin.tsx

@@ -1,40 +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 {LexicalEditor} from 'lexical';
-import {RefObject} from 'react';
-import * as React from 'react';
-
-/**
- *
- * Use this plugin to access the editor instance outside of the
- * LexicalComposer. This can help with things like buttons or other
- * UI components that need to update or read EditorState but need to
- * be positioned outside the LexicalComposer in the React tree.
- */
-export function EditorRefPlugin({
-  editorRef,
-}: {
-  editorRef:
-    | React.RefCallback<LexicalEditor>
-    | RefObject<LexicalEditor | null | undefined>;
-}): null {
-  const [editor] = useLexicalComposerContext();
-
-  React.useEffect(() => {
-    if (typeof editorRef === 'function') {
-      editorRef(editor);
-    } else if (typeof editorRef === 'object') {
-      editorRef.current = editor;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor]);
-
-  return null;
-}

package/src/LexicalErrorBoundary.tsx

@@ -1,39 +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 * as React from 'react';
-import {ErrorBoundary as ReactErrorBoundary} from 'react-error-boundary';
-
-export type LexicalErrorBoundaryProps = {
-  children: JSX.Element;
-  onError: (error: Error) => void;
-};
-
-export function LexicalErrorBoundary({
-  children,
-  onError,
-}: LexicalErrorBoundaryProps): JSX.Element {
-  return (
-    <ReactErrorBoundary
-      fallback={
-        <div
-          style={{
-            border: '1px solid #f00',
-            color: '#f00',
-            padding: '8px',
-          }}>
-          An error was thrown.
-        </div>
-      }
-      onError={onError}>
-      {children}
-    </ReactErrorBoundary>
-  );
-}

package/src/LexicalExtensionComposer.tsx

@@ -1,117 +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 {
-  getExtensionDependencyFromEditor,
-  LexicalBuilder,
-} from '@lexical/extension';
-import {ReactConfig, ReactExtension} from '@lexical/react/ReactExtension';
-import {ReactProviderExtension} from '@lexical/react/ReactProviderExtension';
-import {type AnyLexicalExtensionArgument, configExtension} from 'lexical';
-import {useEffect, useMemo} from 'react';
-
-export interface LexicalExtensionComposerProps {
-  /**
-   * Your root extension, typically defined with {@link defineExtension}
-   */
-  extension: AnyLexicalExtensionArgument;
-  /**
-   * Any children will have access to useLexicalComposerContext (e.g. for React plug-ins or UX)
-   */
-  children: React.ReactNode;
-  /**
-   * Override the default ContentEditable that is rendered as the first child of the
-   * composer. If this is null, then it is your responsibility to render a ContentEditable
-   * elsewhere in the tree. This is equivalent to
-   * `configExtension(ReactExtension, {contentEditable})` in your extension dependencies.
-   */
-  contentEditable?: ReactConfig['contentEditable'];
-}
-
-/**
- * The equivalent of LexicalComposer for an extension. Make sure that your extension
- * argument is stable (e.g. using module scope or useMemo) so
- * that you are not re-creating the editor on every render!
- *
- * @example
- * Module scoped extension
- * ```tsx
- * const extension = defineExtension({
- *   name: "[root]",
- *   dependencies: [RichTextExtension, HistoryExtension, EmojiExtension]
- * });
- * function MyEditor({ children }) {
- *   return (<LexicalExtensionComposer extension={extension}>{children}</LexicalExtensionComposer>);
- * }
- * ```
- *
- * @example
- * useMemo extension
- * ```tsx
- * function MyEditor({ emojiBaseUrl, children }) {
- *   const extension = useMemo(() => {
- *     return defineExtension({
- *       name: "[root]",
- *       dependencies: [
- *         RichTextExtension,
- *         HistoryExtension,
- *         configExtension(EmojiExtension, { emojiBaseUrl }),
- *       ],
- *     });
- *   }, [emojiBaseUrl]);
- *   return (<LexicalExtensionComposer extension={extension}>{children}</LexicalExtensionComposer>);
- * }
- * ```
- *
- * @example
- * Incorrect usage with unstable extension
- * ```tsx
- * function MyBrokenEditor({ emojiBaseUrl }) {
- *   // This argument is not stable, the editor is re-created every render and
- *   // all state is lost!
- *   const extension = defineExtension({
- *     name: "[root]",
- *     dependencies: [RichTextExtension, HistoryExtension, EmojiExtension]
- *   });
- *   return (<LexicalExtensionComposer extension={extension}>{children}</LexicalExtensionComposer>);
- * }
- * ```
- */
-export function LexicalExtensionComposer({
-  extension,
-  children,
-  contentEditable,
-}: LexicalExtensionComposerProps) {
-  const editor = useMemo(() => {
-    const builder = LexicalBuilder.fromExtensions([
-      ReactProviderExtension,
-      configExtension(
-        ReactExtension,
-        contentEditable === undefined ? {} : {contentEditable},
-      ),
-      extension,
-    ]);
-    return builder.buildEditor();
-  }, [contentEditable, extension]);
-  useEffect(() => {
-    // Strict mode workaround
-    let didMount = false;
-    queueMicrotask(() => {
-      didMount = true;
-    });
-    return () => {
-      if (didMount) {
-        editor.dispose();
-      }
-    };
-  }, [editor]);
-  const {Component} = getExtensionDependencyFromEditor(
-    editor,
-    ReactExtension,
-  ).output;
-  return <Component>{children}</Component>;
-}

package/src/LexicalHashtagPlugin.ts

@@ -1,26 +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 {HashtagNode, registerLexicalHashtag} from '@lexical/hashtag';
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {useEffect} from 'react';
-
-export function HashtagPlugin(): JSX.Element | null {
-  const [editor] = useLexicalComposerContext();
-
-  useEffect(() => {
-    if (!editor.hasNodes([HashtagNode])) {
-      throw new Error('HashtagPlugin: HashtagNode not registered on editor');
-    }
-    return registerLexicalHashtag(editor);
-  }, [editor]);
-
-  return null;
-}