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

package/src/shared/mergeRefs.ts

@@ -1,20 +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 {Ref} from 'react';
-
-export function mergeRefs<T>(...refs: Ref<T>[]): (value: null | T) => void {
-  return (value) => {
-    for (const ref of refs) {
-      if (typeof ref === 'function') {
-        ref(value);
-      } else if (ref != null) {
-        ref.current = value;
-      }
-    }
-  };
-}

package/src/shared/point.ts

@@ -1,55 +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.
- *
- */
-export class Point {
-  private readonly _x: number;
-  private readonly _y: number;
-
-  constructor(x: number, y: number) {
-    this._x = x;
-    this._y = y;
-  }
-
-  get x(): number {
-    return this._x;
-  }
-
-  get y(): number {
-    return this._y;
-  }
-
-  public equals({x, y}: Point): boolean {
-    return this.x === x && this.y === y;
-  }
-
-  public calcDeltaXTo({x}: Point): number {
-    return this.x - x;
-  }
-
-  public calcDeltaYTo({y}: Point): number {
-    return this.y - y;
-  }
-
-  public calcHorizontalDistanceTo(point: Point): number {
-    return Math.abs(this.calcDeltaXTo(point));
-  }
-
-  public calcVerticalDistance(point: Point): number {
-    return Math.abs(this.calcDeltaYTo(point));
-  }
-
-  public calcDistanceTo(point: Point): number {
-    return Math.sqrt(
-      Math.pow(this.calcDeltaXTo(point), 2) +
-        Math.pow(this.calcDeltaYTo(point), 2),
-    );
-  }
-}
-
-export function isPoint(x: unknown): x is Point {
-  return x instanceof Point;
-}

package/src/shared/rect.ts

@@ -1,158 +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 {isPoint, Point} from './point';
-
-type ContainsPointReturn = {
-  result: boolean;
-  reason: {
-    isOnTopSide: boolean;
-    isOnBottomSide: boolean;
-    isOnLeftSide: boolean;
-    isOnRightSide: boolean;
-  };
-};
-
-export class Rectangle {
-  private readonly _left: number;
-  private readonly _top: number;
-  private readonly _right: number;
-  private readonly _bottom: number;
-
-  constructor(left: number, top: number, right: number, bottom: number) {
-    const [physicTop, physicBottom] =
-      top <= bottom ? [top, bottom] : [bottom, top];
-
-    const [physicLeft, physicRight] =
-      left <= right ? [left, right] : [right, left];
-
-    this._top = physicTop;
-    this._right = physicRight;
-    this._left = physicLeft;
-    this._bottom = physicBottom;
-  }
-
-  get top(): number {
-    return this._top;
-  }
-
-  get right(): number {
-    return this._right;
-  }
-
-  get bottom(): number {
-    return this._bottom;
-  }
-
-  get left(): number {
-    return this._left;
-  }
-
-  get width(): number {
-    return Math.abs(this._left - this._right);
-  }
-
-  get height(): number {
-    return Math.abs(this._bottom - this._top);
-  }
-
-  public equals({top, left, bottom, right}: Rectangle): boolean {
-    return (
-      top === this._top &&
-      bottom === this._bottom &&
-      left === this._left &&
-      right === this._right
-    );
-  }
-
-  public contains({x, y}: Point): ContainsPointReturn;
-  public contains({top, left, bottom, right}: Rectangle): boolean;
-  public contains(target: Point | Rectangle): boolean | ContainsPointReturn {
-    if (isPoint(target)) {
-      const {x, y} = target;
-
-      const isOnTopSide = y < this._top;
-      const isOnBottomSide = y > this._bottom;
-      const isOnLeftSide = x < this._left;
-      const isOnRightSide = x > this._right;
-
-      const result =
-        !isOnTopSide && !isOnBottomSide && !isOnLeftSide && !isOnRightSide;
-
-      return {
-        reason: {
-          isOnBottomSide,
-          isOnLeftSide,
-          isOnRightSide,
-          isOnTopSide,
-        },
-        result,
-      };
-    } else {
-      const {top, left, bottom, right} = target;
-
-      return (
-        top >= this._top &&
-        top <= this._bottom &&
-        bottom >= this._top &&
-        bottom <= this._bottom &&
-        left >= this._left &&
-        left <= this._right &&
-        right >= this._left &&
-        right <= this._right
-      );
-    }
-  }
-
-  public intersectsWith(rect: Rectangle): boolean {
-    const {left: x1, top: y1, width: w1, height: h1} = rect;
-    const {left: x2, top: y2, width: w2, height: h2} = this;
-    const maxX = x1 + w1 >= x2 + w2 ? x1 + w1 : x2 + w2;
-    const maxY = y1 + h1 >= y2 + h2 ? y1 + h1 : y2 + h2;
-    const minX = x1 <= x2 ? x1 : x2;
-    const minY = y1 <= y2 ? y1 : y2;
-    return maxX - minX <= w1 + w2 && maxY - minY <= h1 + h2;
-  }
-
-  public generateNewRect({
-    left = this.left,
-    top = this.top,
-    right = this.right,
-    bottom = this.bottom,
-  }): Rectangle {
-    return new Rectangle(left, top, right, bottom);
-  }
-
-  static fromLTRB(
-    left: number,
-    top: number,
-    right: number,
-    bottom: number,
-  ): Rectangle {
-    return new Rectangle(left, top, right, bottom);
-  }
-
-  static fromLWTH(
-    left: number,
-    width: number,
-    top: number,
-    height: number,
-  ): Rectangle {
-    return new Rectangle(left, top, left + width, top + height);
-  }
-
-  static fromPoints(startPoint: Point, endPoint: Point): Rectangle {
-    const {y: top, x: left} = startPoint;
-    const {y: bottom, x: right} = endPoint;
-    return Rectangle.fromLTRB(left, top, right, bottom);
-  }
-
-  static fromDOM(dom: HTMLElement): Rectangle {
-    const {top, width, left, height} = dom.getBoundingClientRect();
-    return Rectangle.fromLWTH(left, width, top, height);
-  }
-}

package/src/shared/types.ts

@@ -1,106 +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 {LexicalComposerContextWithEditor} from '@lexical/react/LexicalComposerContext';
-import type {JSX} from 'react';
-
-export interface EditorChildrenComponentProps {
-  context: LexicalComposerContextWithEditor;
-  contentEditable: null | JSX.Element;
-  children?: React.ReactNode;
-}
-
-export type EditorChildrenComponentType = (
-  props: EditorChildrenComponentProps,
-) => JSX.Element | null;
-
-export interface DecoratorComponentProps {
-  context: LexicalComposerContextWithEditor;
-}
-export type DecoratorComponentType =
-  | JSX.Element
-  | ((props: DecoratorComponentProps) => JSX.Element | null);
-
-export interface EditorComponentProps {
-  /**
-   * The EditorChildrenComponent from the config
-   */
-  EditorChildrenComponent: EditorChildrenComponentType;
-  /**
-   * The children to pass to EditorChildrenComponent
-   */
-  children?: React.ReactNode;
-  /**
-   * contentEditable from the config
-   */
-  contentEditable: JSX.Element | null;
-  /**
-   * ErrorBoundary from the config
-   */
-  ErrorBoundary: ErrorBoundaryType;
-}
-
-export type EditorComponentType = (
-  /** Optional overrides to any of the props, typically only children is used */
-  props: Partial<EditorComponentProps>,
-) => JSX.Element;
-
-export interface ReactConfig {
-  /**
-   * The default root element of the editor as JSX. Uses `<ContentEditable />`
-   * from \@lexical/react/ContentEditable by default,
-   * but may be null or another component.
-   *
-   * This component is responsible for calling `editor.setRootElement(elem)`.
-   */
-  contentEditable: JSX.Element | null;
-  /**
-   * The ErrorBoundary used for rendering decorators in the editor. By default
-   * it is `ErrorBoundary` from \@lexical/react/ErrorBoundary.
-   */
-  ErrorBoundary: ErrorBoundaryType;
-  /**
-   * The component that renders the children of the editor context, by default
-   * it is {@link DefaultEditorChildrenComponent} which takes the given props
-   * and renders them in this order:
-   *
-   * - contentEditable
-   * - children
-   */
-  EditorChildrenComponent: EditorChildrenComponentType;
-
-  /**
-   * An array of JSX or components that return JSX that should be rendered
-   * as children of Component. These will be merged by array concatenation.
-   */
-  decorators: readonly DecoratorComponentType[];
-}
-
-export interface ReactOutputs {
-  /**
-   * The editor component, this can be used by Extensions that depend on this to
-   * render the editor such as {@link ReactPluginHostExtension} or internally by
-   * {@link LexicalExtensionComposer}.
-   *
-   * All props have defaults based on the config and editor state, but may be
-   * overridden.
-   */
-  Component: EditorComponentType;
-  /**
-   * This is equivalent to useLexicalComposerContext() from \@lexical/react/LexicalComposerContext.
-   */
-  context: LexicalComposerContextWithEditor;
-}
-
-export interface ErrorBoundaryProps {
-  children: JSX.Element;
-  onError: (error: Error) => void;
-}
-
-export type ErrorBoundaryType =
-  | React.ComponentClass<ErrorBoundaryProps>
-  | React.FC<ErrorBoundaryProps>;

package/src/shared/useCanShowPlaceholder.ts

@@ -1,49 +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 {LexicalEditor} from 'lexical';
-
-import {$canShowPlaceholderCurry} from '@lexical/text';
-import {mergeRegister} from '@lexical/utils';
-import {useState} from 'react';
-import useLayoutEffect from 'shared/useLayoutEffect';
-
-function canShowPlaceholderFromCurrentEditorState(
-  editor: LexicalEditor,
-): boolean {
-  const currentCanShowPlaceholder = editor
-    .getEditorState()
-    .read($canShowPlaceholderCurry(editor.isComposing()));
-
-  return currentCanShowPlaceholder;
-}
-
-export function useCanShowPlaceholder(editor: LexicalEditor): boolean {
-  const [canShowPlaceholder, setCanShowPlaceholder] = useState(() =>
-    canShowPlaceholderFromCurrentEditorState(editor),
-  );
-
-  useLayoutEffect(() => {
-    function resetCanShowPlaceholder() {
-      const currentCanShowPlaceholder =
-        canShowPlaceholderFromCurrentEditorState(editor);
-      setCanShowPlaceholder(currentCanShowPlaceholder);
-    }
-    resetCanShowPlaceholder();
-    return mergeRegister(
-      editor.registerUpdateListener(() => {
-        resetCanShowPlaceholder();
-      }),
-      editor.registerEditableListener(() => {
-        resetCanShowPlaceholder();
-      }),
-    );
-  }, [editor]);
-
-  return canShowPlaceholder;
-}

package/src/shared/useCharacterLimit.ts

@@ -1,315 +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 {LexicalEditor, LexicalNode} from 'lexical';
-
-import {
-  $createOverflowNode,
-  $isOverflowNode,
-  OverflowNode,
-} from '@lexical/overflow';
-import {$rootTextContent} from '@lexical/text';
-import {
-  $dfs,
-  $findMatchingParent,
-  $unwrapNode,
-  mergeRegister,
-} from '@lexical/utils';
-import {
-  $getSelection,
-  $isElementNode,
-  $isLeafNode,
-  $isRangeSelection,
-  $isTextNode,
-  $setSelection,
-  COMMAND_PRIORITY_LOW,
-  DELETE_CHARACTER_COMMAND,
-  HISTORY_MERGE_TAG,
-} from 'lexical';
-import {useEffect} from 'react';
-import invariant from 'shared/invariant';
-
-type OptionalProps = {
-  remainingCharacters?: (characters: number) => void;
-  strlen?: (input: string) => number;
-};
-
-export function useCharacterLimit(
-  editor: LexicalEditor,
-  maxCharacters: number,
-  optional: OptionalProps = Object.freeze({}),
-): void {
-  const {
-    strlen = (input) => input.length,
-    // UTF-16
-    remainingCharacters = () => {
-      return;
-    },
-  } = optional;
-
-  useEffect(() => {
-    if (!editor.hasNodes([OverflowNode])) {
-      invariant(
-        false,
-        'useCharacterLimit: OverflowNode not registered on editor',
-      );
-    }
-  }, [editor]);
-
-  useEffect(() => {
-    let text = editor.getEditorState().read($rootTextContent);
-    let lastComputedTextLength = 0;
-
-    return mergeRegister(
-      editor.registerTextContentListener((currentText: string) => {
-        text = currentText;
-      }),
-      editor.registerUpdateListener(({dirtyLeaves, dirtyElements}) => {
-        const isComposing = editor.isComposing();
-        const hasContentChanges =
-          dirtyLeaves.size > 0 || dirtyElements.size > 0;
-
-        if (isComposing || !hasContentChanges) {
-          return;
-        }
-
-        const textLength = strlen(text);
-        const textLengthAboveThreshold =
-          textLength > maxCharacters ||
-          (lastComputedTextLength !== null &&
-            lastComputedTextLength > maxCharacters);
-        const diff = maxCharacters - textLength;
-
-        remainingCharacters(diff);
-
-        if (lastComputedTextLength === null || textLengthAboveThreshold) {
-          const offset = findOffset(text, maxCharacters, strlen);
-          editor.update(
-            () => {
-              $wrapOverflowedNodes(offset);
-            },
-            {
-              tag: HISTORY_MERGE_TAG,
-            },
-          );
-        }
-
-        lastComputedTextLength = textLength;
-      }),
-      editor.registerCommand(
-        DELETE_CHARACTER_COMMAND,
-        (isBackward) => {
-          const selection = $getSelection();
-          if (!$isRangeSelection(selection)) {
-            return false;
-          }
-          const anchorNode = selection.anchor.getNode();
-          const overflow = anchorNode.getParent();
-          const overflowParent = overflow ? overflow.getParent() : null;
-          const parentNext = overflowParent
-            ? overflowParent.getNextSibling()
-            : null;
-          selection.deleteCharacter(isBackward);
-          if (overflowParent && overflowParent.isEmpty()) {
-            overflowParent.remove();
-          } else if ($isElementNode(parentNext) && parentNext.isEmpty()) {
-            parentNext.remove();
-          }
-          return true;
-        },
-        COMMAND_PRIORITY_LOW,
-      ),
-    );
-  }, [editor, maxCharacters, remainingCharacters, strlen]);
-}
-
-function findOffset(
-  text: string,
-  maxCharacters: number,
-  strlen: (input: string) => number,
-): number {
-  const Segmenter = Intl.Segmenter;
-  let offsetUtf16 = 0;
-  let offset = 0;
-
-  if (typeof Segmenter === 'function') {
-    const segmenter = new Segmenter();
-    const graphemes = segmenter.segment(text);
-
-    for (const {segment: grapheme} of graphemes) {
-      const nextOffset = offset + strlen(grapheme);
-
-      if (nextOffset > maxCharacters) {
-        break;
-      }
-
-      offset = nextOffset;
-      offsetUtf16 += grapheme.length;
-    }
-  } else {
-    const codepoints = Array.from(text);
-    const codepointsLength = codepoints.length;
-
-    for (let i = 0; i < codepointsLength; i++) {
-      const codepoint = codepoints[i];
-      const nextOffset = offset + strlen(codepoint);
-
-      if (nextOffset > maxCharacters) {
-        break;
-      }
-
-      offset = nextOffset;
-      offsetUtf16 += codepoint.length;
-    }
-  }
-
-  return offsetUtf16;
-}
-
-function $wrapOverflowedNodes(offset: number): void {
-  const dfsNodes = $dfs();
-  const dfsNodesLength = dfsNodes.length;
-  let accumulatedLength = 0;
-
-  for (let i = 0; i < dfsNodesLength; i += 1) {
-    const {node} = dfsNodes[i];
-
-    const needsOverflowParent =
-      $isLeafNode(node) && !$findMatchingParent(node, $isOverflowNode);
-
-    if ($isOverflowNode(node)) {
-      const previousLength = accumulatedLength;
-      const nextLength = accumulatedLength + node.getTextContentSize();
-
-      if (nextLength <= offset) {
-        const parent = node.getParent();
-        const previousSibling = node.getPreviousSibling();
-        const nextSibling = node.getNextSibling();
-        $unwrapNode(node);
-        const selection = $getSelection();
-
-        // Restore selection when the overflow children are removed
-        if (
-          $isRangeSelection(selection) &&
-          (!selection.anchor.getNode().isAttached() ||
-            !selection.focus.getNode().isAttached())
-        ) {
-          if ($isTextNode(previousSibling)) {
-            previousSibling.select();
-          } else if ($isTextNode(nextSibling)) {
-            nextSibling.select();
-          } else if (parent !== null) {
-            parent.select();
-          }
-        }
-      } else if (previousLength < offset) {
-        const descendant = node.getFirstDescendant();
-        const descendantLength =
-          descendant !== null ? descendant.getTextContentSize() : 0;
-        const previousPlusDescendantLength = previousLength + descendantLength;
-        // For simple text we can redimension the overflow into a smaller and more accurate
-        // container
-        const firstDescendantIsSimpleText =
-          $isTextNode(descendant) && descendant.isSimpleText();
-        const firstDescendantDoesNotOverflow =
-          previousPlusDescendantLength <= offset;
-
-        if (firstDescendantIsSimpleText || firstDescendantDoesNotOverflow) {
-          $unwrapNode(node);
-        }
-      }
-    } else if (needsOverflowParent) {
-      const previousAccumulatedLength = accumulatedLength;
-      accumulatedLength += node.getTextContentSize();
-
-      if (accumulatedLength > offset && !$isOverflowNode(node.getParent())) {
-        const previousSelection = $getSelection();
-        let overflowNode;
-
-        // For simple text we can improve the limit accuracy by splitting the TextNode
-        // on the split point
-        if (
-          previousAccumulatedLength < offset &&
-          $isTextNode(node) &&
-          node.isSimpleText()
-        ) {
-          const [, overflowedText] = node.splitText(
-            offset - previousAccumulatedLength,
-          );
-          overflowNode = $wrapNode(overflowedText);
-        } else {
-          overflowNode = $wrapNode(node);
-        }
-
-        if (previousSelection !== null) {
-          $setSelection(previousSelection);
-        }
-
-        $mergePrevious(overflowNode);
-      }
-    }
-  }
-}
-
-function $wrapNode(node: LexicalNode): OverflowNode {
-  const overflowNode = $createOverflowNode();
-  node.replace(overflowNode);
-  overflowNode.append(node);
-  return overflowNode;
-}
-
-export function $mergePrevious(overflowNode: OverflowNode): void {
-  const previousNode = overflowNode.getPreviousSibling();
-
-  if (!$isOverflowNode(previousNode)) {
-    return;
-  }
-
-  const firstChild = overflowNode.getFirstChild();
-  const previousNodeChildren = previousNode.getChildren();
-  const previousNodeChildrenLength = previousNodeChildren.length;
-
-  if (firstChild === null) {
-    overflowNode.append(...previousNodeChildren);
-  } else {
-    for (let i = 0; i < previousNodeChildrenLength; i++) {
-      firstChild.insertBefore(previousNodeChildren[i]);
-    }
-  }
-
-  const selection = $getSelection();
-
-  if ($isRangeSelection(selection)) {
-    const anchor = selection.anchor;
-    const anchorNode = anchor.getNode();
-    const focus = selection.focus;
-    const focusNode = anchor.getNode();
-
-    if (anchorNode.is(previousNode)) {
-      anchor.set(overflowNode.getKey(), anchor.offset, 'element');
-    } else if (anchorNode.is(overflowNode)) {
-      anchor.set(
-        overflowNode.getKey(),
-        previousNodeChildrenLength + anchor.offset,
-        'element',
-      );
-    }
-
-    if (focusNode.is(previousNode)) {
-      focus.set(overflowNode.getKey(), focus.offset, 'element');
-    } else if (focusNode.is(overflowNode)) {
-      focus.set(
-        overflowNode.getKey(),
-        previousNodeChildrenLength + focus.offset,
-        'element',
-      );
-    }
-  }
-
-  previousNode.remove();
-}