@lexical/react 0.10.0 → 0.11.1

package/LexicalTypeaheadMenuPlugin.dev.js

@@ -7,9 +7,9 @@
 'use strict';
 
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
-var utils = require('@lexical/utils');
 var lexical = require('lexical');
 var React = require('react');
+var utils = require('@lexical/utils');
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -37,8 +37,7 @@ var useLayoutEffect = useLayoutEffectImpl;
  * LICENSE file in the root directory of this source tree.
  *
  */
-const PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
-class TypeaheadOption {
+class MenuOption {
   constructor(key) {
     this.key = key;
     this.ref = {
@@ -76,62 +75,6 @@ const scrollIntoViewIfNeeded = target => {
     block: 'nearest'
   });
 };
-
-function getTextUpToAnchor(selection) {
-  const anchor = selection.anchor;
-
-  if (anchor.type !== 'text') {
-    return null;
-  }
-
-  const anchorNode = anchor.getNode();
-
-  if (!anchorNode.isSimpleText()) {
-    return null;
-  }
-
-  const anchorOffset = anchor.offset;
-  return anchorNode.getTextContent().slice(0, anchorOffset);
-}
-
-function tryToPositionRange(leadOffset, range) {
-  const domSelection = window.getSelection();
-
-  if (domSelection === null || !domSelection.isCollapsed) {
-    return false;
-  }
-
-  const anchorNode = domSelection.anchorNode;
-  const startOffset = leadOffset;
-  const endOffset = domSelection.anchorOffset;
-
-  if (anchorNode == null || endOffset == null) {
-    return false;
-  }
-
-  try {
-    range.setStart(anchorNode, startOffset);
-    range.setEnd(anchorNode, endOffset);
-  } catch (error) {
-    return false;
-  }
-
-  return true;
-}
-
-function getQueryTextForSearch(editor) {
-  let text = null;
-  editor.getEditorState().read(() => {
-    const selection = lexical.$getSelection();
-
-    if (!lexical.$isRangeSelection(selection)) {
-      return;
-    }
-
-    text = getTextUpToAnchor(selection);
-  });
-  return text;
-}
 /**
  * Walk backwards along user input and forward through entity title to try
  * and replace more of the user's text with entity.
@@ -155,7 +98,7 @@ function getFullMatchOffset(documentText, entryText, offset) {
  */
 
 
-function splitNodeContainingQuery(editor, match) {
+function $splitNodeContainingQuery(match) {
   const selection = lexical.$getSelection();
 
   if (!lexical.$isRangeSelection(selection) || !selection.isCollapsed()) {
@@ -193,37 +136,10 @@ function splitNodeContainingQuery(editor, match) {
   }
 
   return newNode;
-}
-
-function isSelectionOnEntityBoundary(editor, offset) {
-  if (offset !== 0) {
-    return false;
-  }
-
-  return editor.getEditorState().read(() => {
-    const selection = lexical.$getSelection();
-
-    if (lexical.$isRangeSelection(selection)) {
-      const anchor = selection.anchor;
-      const anchorNode = anchor.getNode();
-      const prevSibling = anchorNode.getPreviousSibling();
-      return lexical.$isTextNode(prevSibling) && prevSibling.isTextEntity();
-    }
-
-    return false;
-  });
-}
-
-function startTransition(callback) {
-  if (React.startTransition) {
-    React.startTransition(callback);
-  } else {
-    callback();
-  }
 } // Got from https://stackoverflow.com/a/42543908/2013580
 
 
-function getScrollParent(element, includeHidden) {
+function getScrollParent$1(element, includeHidden) {
   let style = getComputedStyle(element);
   const excludeStaticParent = style.position === 'absolute';
   const overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
@@ -247,21 +163,21 @@ function getScrollParent(element, includeHidden) {
   return document.body;
 }
 
-function isTriggerVisibleInNearestScrollContainer(targetElement, containerElement) {
+function isTriggerVisibleInNearestScrollContainer$1(targetElement, containerElement) {
   const tRect = targetElement.getBoundingClientRect();
   const cRect = containerElement.getBoundingClientRect();
   return tRect.top > cRect.top && tRect.top < cRect.bottom;
 } // Reposition the menu on scroll, window resize, and element resize.
 
 
-function useDynamicPositioning(resolution, targetElement, onReposition, onVisibilityChange) {
+function useDynamicPositioning$1(resolution, targetElement, onReposition, onVisibilityChange) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   React.useEffect(() => {
     if (targetElement != null && resolution != null) {
       const rootElement = editor.getRootElement();
-      const rootScrollParent = rootElement != null ? getScrollParent(rootElement, false) : document.body;
+      const rootScrollParent = rootElement != null ? getScrollParent$1(rootElement, false) : document.body;
       let ticking = false;
-      let previousIsInView = isTriggerVisibleInNearestScrollContainer(targetElement, rootScrollParent);
+      let previousIsInView = isTriggerVisibleInNearestScrollContainer$1(targetElement, rootScrollParent);
 
       const handleScroll = function () {
         if (!ticking) {
@@ -272,7 +188,7 @@ function useDynamicPositioning(resolution, targetElement, onReposition, onVisibi
           ticking = true;
         }
 
-        const isInView = isTriggerVisibleInNearestScrollContainer(targetElement, rootScrollParent);
+        const isInView = isTriggerVisibleInNearestScrollContainer$1(targetElement, rootScrollParent);
 
         if (isInView !== previousIsInView) {
           previousIsInView = isInView;
@@ -298,27 +214,28 @@ function useDynamicPositioning(resolution, targetElement, onReposition, onVisibi
     }
   }, [targetElement, editor, onVisibilityChange, onReposition, resolution]);
 }
-const SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND = lexical.createCommand('SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND');
-
-function LexicalPopoverMenu({
+const SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND$1 = lexical.createCommand('SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND');
+function LexicalMenu({
   close,
   editor,
   anchorElementRef,
   resolution,
   options,
   menuRenderFn,
-  onSelectOption
+  onSelectOption,
+  shouldSplitNodeWithQuery = false
 }) {
   const [selectedIndex, setHighlightedIndex] = React.useState(null);
+  const matchingString = resolution.match && resolution.match.matchingString;
   React.useEffect(() => {
     setHighlightedIndex(0);
-  }, [resolution.match.matchingString]);
+  }, [matchingString]);
   const selectOptionAndCleanUp = React.useCallback(selectedEntry => {
     editor.update(() => {
-      const textNodeContainingQuery = splitNodeContainingQuery(editor, resolution.match);
-      onSelectOption(selectedEntry, textNodeContainingQuery, close, resolution.match.matchingString);
+      const textNodeContainingQuery = resolution.match != null && shouldSplitNodeWithQuery ? $splitNodeContainingQuery(resolution.match) : null;
+      onSelectOption(selectedEntry, textNodeContainingQuery, close, resolution.match ? resolution.match.matchingString : '');
     });
-  }, [close, editor, resolution.match, onSelectOption]);
+  }, [editor, shouldSplitNodeWithQuery, resolution.match, onSelectOption, close]);
   const updateSelectedIndex = React.useCallback(index => {
     const rootElem = editor.getRootElement();
 
@@ -344,7 +261,7 @@ function LexicalPopoverMenu({
     }
   }, [options, selectedIndex, updateSelectedIndex]);
   React.useEffect(() => {
-    return utils.mergeRegister(editor.registerCommand(SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND, ({
+    return utils.mergeRegister(editor.registerCommand(SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND$1, ({
       option
     }) => {
       if (option.ref && option.ref.current != null) {
@@ -365,7 +282,7 @@ function LexicalPopoverMenu({
         const option = options[newSelectedIndex];
 
         if (option.ref != null && option.ref.current) {
-          editor.dispatchCommand(SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND, {
+          editor.dispatchCommand(SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND$1, {
             index: newSelectedIndex,
             option
           });
@@ -430,41 +347,15 @@ function LexicalPopoverMenu({
     selectedIndex,
     setHighlightedIndex
   }), [selectOptionAndCleanUp, selectedIndex, options]);
-  return menuRenderFn(anchorElementRef, listItemProps, resolution.match.matchingString);
-}
-
-function useBasicTypeaheadTriggerMatch(trigger, {
-  minLength = 1,
-  maxLength = 75
-}) {
-  return React.useCallback(text => {
-    const validChars = '[^' + trigger + PUNCTUATION + '\\s]';
-    const TypeaheadTriggerRegex = new RegExp('(^|\\s|\\()(' + '[' + trigger + ']' + '((?:' + validChars + '){0,' + maxLength + '})' + ')$');
-    const match = TypeaheadTriggerRegex.exec(text);
-
-    if (match !== null) {
-      const maybeLeadingWhitespace = match[1];
-      const matchingString = match[3];
-
-      if (matchingString.length >= minLength) {
-        return {
-          leadOffset: match.index + maybeLeadingWhitespace.length,
-          matchingString,
-          replaceableString: match[2]
-        };
-      }
-    }
-
-    return null;
-  }, [maxLength, minLength, trigger]);
+  return menuRenderFn(anchorElementRef, listItemProps, resolution.match ? resolution.match.matchingString : '');
 }
-
 function useMenuAnchorRef(resolution, setResolution, className) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const anchorElementRef = React.useRef(document.createElement('div'));
   const positionMenu = React.useCallback(() => {
     const rootElement = editor.getRootElement();
     const containerDiv = anchorElementRef.current;
+    const menuEle = containerDiv.firstChild;
 
     if (rootElement !== null && resolution !== null) {
       const {
@@ -478,6 +369,23 @@ function useMenuAnchorRef(resolution, setResolution, className) {
       containerDiv.style.height = `${height}px`;
       containerDiv.style.width = `${width}px`;
 
+      if (menuEle !== null) {
+        const menuRect = menuEle.getBoundingClientRect();
+        const menuHeight = menuRect.height;
+        const menuWidth = menuRect.width;
+        const rootElementRect = rootElement.getBoundingClientRect();
+
+        if (left + menuWidth > rootElementRect.right) {
+          containerDiv.style.left = `${left - menuWidth + window.pageXOffset}px`;
+        }
+
+        const margin = 10;
+
+        if ((top + menuHeight > window.innerHeight || top + menuHeight > rootElementRect.bottom) && top - rootElementRect.top > menuHeight) {
+          containerDiv.style.top = `${top - menuHeight + window.pageYOffset - (height + margin)}px`;
+        }
+      }
+
       if (!containerDiv.isConnected) {
         if (className != null) {
           containerDiv.className = className;
@@ -520,10 +428,204 @@ function useMenuAnchorRef(resolution, setResolution, className) {
       }
     }
   }, [resolution, setResolution]);
-  useDynamicPositioning(resolution, anchorElementRef.current, positionMenu, onVisibilityChange);
+  useDynamicPositioning$1(resolution, anchorElementRef.current, positionMenu, onVisibilityChange);
   return anchorElementRef;
 }
 
+/**
+ * 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.
+ *
+ */
+const PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
+
+function getTextUpToAnchor(selection) {
+  const anchor = selection.anchor;
+
+  if (anchor.type !== 'text') {
+    return null;
+  }
+
+  const anchorNode = anchor.getNode();
+
+  if (!anchorNode.isSimpleText()) {
+    return null;
+  }
+
+  const anchorOffset = anchor.offset;
+  return anchorNode.getTextContent().slice(0, anchorOffset);
+}
+
+function tryToPositionRange(leadOffset, range) {
+  const domSelection = window.getSelection();
+
+  if (domSelection === null || !domSelection.isCollapsed) {
+    return false;
+  }
+
+  const anchorNode = domSelection.anchorNode;
+  const startOffset = leadOffset;
+  const endOffset = domSelection.anchorOffset;
+
+  if (anchorNode == null || endOffset == null) {
+    return false;
+  }
+
+  try {
+    range.setStart(anchorNode, startOffset);
+    range.setEnd(anchorNode, endOffset);
+  } catch (error) {
+    return false;
+  }
+
+  return true;
+}
+
+function getQueryTextForSearch(editor) {
+  let text = null;
+  editor.getEditorState().read(() => {
+    const selection = lexical.$getSelection();
+
+    if (!lexical.$isRangeSelection(selection)) {
+      return;
+    }
+
+    text = getTextUpToAnchor(selection);
+  });
+  return text;
+}
+
+function isSelectionOnEntityBoundary(editor, offset) {
+  if (offset !== 0) {
+    return false;
+  }
+
+  return editor.getEditorState().read(() => {
+    const selection = lexical.$getSelection();
+
+    if (lexical.$isRangeSelection(selection)) {
+      const anchor = selection.anchor;
+      const anchorNode = anchor.getNode();
+      const prevSibling = anchorNode.getPreviousSibling();
+      return lexical.$isTextNode(prevSibling) && prevSibling.isTextEntity();
+    }
+
+    return false;
+  });
+}
+
+function startTransition(callback) {
+  if (React.startTransition) {
+    React.startTransition(callback);
+  } else {
+    callback();
+  }
+} // Got from https://stackoverflow.com/a/42543908/2013580
+
+
+function getScrollParent(element, includeHidden) {
+  let style = getComputedStyle(element);
+  const excludeStaticParent = style.position === 'absolute';
+  const overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
+
+  if (style.position === 'fixed') {
+    return document.body;
+  }
+
+  for (let parent = element; parent = parent.parentElement;) {
+    style = getComputedStyle(parent);
+
+    if (excludeStaticParent && style.position === 'static') {
+      continue;
+    }
+
+    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) {
+      return parent;
+    }
+  }
+
+  return document.body;
+}
+
+function isTriggerVisibleInNearestScrollContainer(targetElement, containerElement) {
+  const tRect = targetElement.getBoundingClientRect();
+  const cRect = containerElement.getBoundingClientRect();
+  return tRect.top > cRect.top && tRect.top < cRect.bottom;
+} // Reposition the menu on scroll, window resize, and element resize.
+
+
+function useDynamicPositioning(resolution, targetElement, onReposition, onVisibilityChange) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  React.useEffect(() => {
+    if (targetElement != null && resolution != null) {
+      const rootElement = editor.getRootElement();
+      const rootScrollParent = rootElement != null ? getScrollParent(rootElement, false) : document.body;
+      let ticking = false;
+      let previousIsInView = isTriggerVisibleInNearestScrollContainer(targetElement, rootScrollParent);
+
+      const handleScroll = function () {
+        if (!ticking) {
+          window.requestAnimationFrame(function () {
+            onReposition();
+            ticking = false;
+          });
+          ticking = true;
+        }
+
+        const isInView = isTriggerVisibleInNearestScrollContainer(targetElement, rootScrollParent);
+
+        if (isInView !== previousIsInView) {
+          previousIsInView = isInView;
+
+          if (onVisibilityChange != null) {
+            onVisibilityChange(isInView);
+          }
+        }
+      };
+
+      const resizeObserver = new ResizeObserver(onReposition);
+      window.addEventListener('resize', onReposition);
+      document.addEventListener('scroll', handleScroll, {
+        capture: true,
+        passive: true
+      });
+      resizeObserver.observe(targetElement);
+      return () => {
+        resizeObserver.unobserve(targetElement);
+        window.removeEventListener('resize', onReposition);
+        document.removeEventListener('scroll', handleScroll);
+      };
+    }
+  }, [targetElement, editor, onVisibilityChange, onReposition, resolution]);
+}
+const SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND = lexical.createCommand('SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND');
+function useBasicTypeaheadTriggerMatch(trigger, {
+  minLength = 1,
+  maxLength = 75
+}) {
+  return React.useCallback(text => {
+    const validChars = '[^' + trigger + PUNCTUATION + '\\s]';
+    const TypeaheadTriggerRegex = new RegExp('(^|\\s|\\()(' + '[' + trigger + ']' + '((?:' + validChars + '){0,' + maxLength + '})' + ')$');
+    const match = TypeaheadTriggerRegex.exec(text);
+
+    if (match !== null) {
+      const maybeLeadingWhitespace = match[1];
+      const matchingString = match[3];
+
+      if (matchingString.length >= minLength) {
+        return {
+          leadOffset: match.index + maybeLeadingWhitespace.length,
+          matchingString,
+          replaceableString: match[2]
+        };
+      }
+    }
+
+    return null;
+  }, [maxLength, minLength, trigger]);
+}
 function LexicalTypeaheadMenuPlugin({
   options,
   onQueryChange,
@@ -587,97 +689,22 @@ function LexicalTypeaheadMenuPlugin({
       removeUpdateListener();
     };
   }, [editor, triggerFn, onQueryChange, resolution, closeTypeahead, openTypeahead]);
-  return resolution === null || editor === null ? null : /*#__PURE__*/React.createElement(LexicalPopoverMenu, {
+  return resolution === null || editor === null ? null : /*#__PURE__*/React.createElement(LexicalMenu, {
     close: closeTypeahead,
     resolution: resolution,
     editor: editor,
     anchorElementRef: anchorElementRef,
     options: options,
     menuRenderFn: menuRenderFn,
-    onSelectOption: onSelectOption
-  });
-}
-function LexicalNodeMenuPlugin({
-  options,
-  nodeKey,
-  onClose,
-  onOpen,
-  onSelectOption,
-  menuRenderFn,
-  anchorClassName
-}) {
-  const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [resolution, setResolution] = React.useState(null);
-  const anchorElementRef = useMenuAnchorRef(resolution, setResolution, anchorClassName);
-  const closeNodeMenu = React.useCallback(() => {
-    setResolution(null);
-
-    if (onClose != null && resolution !== null) {
-      onClose();
-    }
-  }, [onClose, resolution]);
-  const openNodeMenu = React.useCallback(res => {
-    setResolution(res);
-
-    if (onOpen != null && resolution === null) {
-      onOpen(res);
-    }
-  }, [onOpen, resolution]);
-  const positionOrCloseMenu = React.useCallback(() => {
-    if (nodeKey) {
-      editor.update(() => {
-        const node = lexical.$getNodeByKey(nodeKey);
-        const domElement = editor.getElementByKey(nodeKey);
-
-        if (node != null && domElement != null) {
-          const text = node.getTextContent();
-
-          if (resolution == null || resolution.match.matchingString !== text) {
-            startTransition(() => openNodeMenu({
-              getRect: () => domElement.getBoundingClientRect(),
-              match: {
-                leadOffset: text.length,
-                matchingString: text,
-                replaceableString: text
-              }
-            }));
-          }
-        }
-      });
-    } else if (nodeKey == null && resolution != null) {
-      closeNodeMenu();
-    }
-  }, [closeNodeMenu, editor, nodeKey, openNodeMenu, resolution]);
-  React.useEffect(() => {
-    positionOrCloseMenu();
-  }, [positionOrCloseMenu, nodeKey]);
-  React.useEffect(() => {
-    if (nodeKey != null) {
-      return editor.registerUpdateListener(({
-        dirtyElements
-      }) => {
-        if (dirtyElements.get(nodeKey)) {
-          positionOrCloseMenu();
-        }
-      });
-    }
-  }, [editor, positionOrCloseMenu, nodeKey]);
-  return resolution === null || editor === null ? null : /*#__PURE__*/React.createElement(LexicalPopoverMenu, {
-    close: closeNodeMenu,
-    resolution: resolution,
-    editor: editor,
-    anchorElementRef: anchorElementRef,
-    options: options,
-    menuRenderFn: menuRenderFn,
+    shouldSplitNodeWithQuery: true,
     onSelectOption: onSelectOption
   });
 }
 
-exports.LexicalNodeMenuPlugin = LexicalNodeMenuPlugin;
 exports.LexicalTypeaheadMenuPlugin = LexicalTypeaheadMenuPlugin;
+exports.MenuOption = MenuOption;
 exports.PUNCTUATION = PUNCTUATION;
 exports.SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND = SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND;
-exports.TypeaheadOption = TypeaheadOption;
 exports.getScrollParent = getScrollParent;
 exports.useBasicTypeaheadTriggerMatch = useBasicTypeaheadTriggerMatch;
 exports.useDynamicPositioning = useDynamicPositioning;

package/LexicalTypeaheadMenuPlugin.js.flow

@@ -10,21 +10,21 @@
 import type {LexicalCommand, LexicalEditor, NodeKey, TextNode} from 'lexical';
 import * as React from 'react';
 
-export type QueryMatch = {
+export type MenuTextMatch = {
   leadOffset: number,
   matchingString: string,
   replaceableString: string,
 };
 
-export type Resolution = {
-  match: QueryMatch,
+export type MenuResolution = {
+  match?: MenuTextMatch,
   getRect: () => ClientRect,
 };
 
 export const PUNCTUATION: string =
   '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
 
-declare export class TypeaheadOption {
+declare export class MenuOption {
   key: string;
   ref: {current: HTMLElement | null};
   constructor(key: string): void;
@@ -33,7 +33,7 @@ declare export class TypeaheadOption {
 
 declare export var SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND: LexicalCommand<{
   index: number,
-  option: TypeaheadOption,
+  option: MenuOption,
 }>;
 
 export type MenuRenderFn<TOption> = (
@@ -63,7 +63,7 @@ export type TypeaheadMenuPluginProps<TOption> = {
   options: Array<TOption>,
   menuRenderFn: MenuRenderFn<TOption>,
   triggerFn: TriggerFn,
-  onOpen?: (resolution: Resolution) => void,
+  onOpen?: (resolution: MenuResolution) => void,
   onClose?: () => void,
   anchorClassName?: string,
 };
@@ -71,27 +71,8 @@ export type TypeaheadMenuPluginProps<TOption> = {
 export type TriggerFn = (
   text: string,
   editor: LexicalEditor,
-) => QueryMatch | null;
+) => MenuTextMatch | null;
 
 declare export function LexicalTypeaheadMenuPlugin<TOption>(
   options: TypeaheadMenuPluginProps<TOption>,
 ): React.MixedElement | null;
-
-type NodeMenuPluginProps<TOption> = {
-  onSelectOption: (
-    option: TOption,
-    textNodeContainingQuery: TextNode | null,
-    closeMenu: () => void,
-    matchingString: string,
-  ) => void,
-  options: Array<TOption>,
-  nodeKey: NodeKey | null,
-  onClose?: () => void,
-  onOpen?: (resolution: Resolution) => void,
-  menuRenderFn: MenuRenderFn<TOption>,
-  anchorClassName?: string,
-};
-
-declare export function LexicalNodeMenuPlugin<TOption>(
-  options: NodeMenuPluginProps<TOption>,
-): React.MixedElement | null;