@lexical/react 0.5.0 → 0.5.1-next.1

package/LexicalTypeaheadMenuPlugin.dev.js

@@ -213,12 +213,90 @@ function 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 LexicalPopoverMenu({
   close,
   editor,
-  anchorElement,
+  anchorElementRef,
   resolution,
   options,
   menuRenderFn,
@@ -258,6 +336,18 @@ function LexicalPopoverMenu({
       updateSelectedIndex(0);
     }
   }, [options, selectedIndex, updateSelectedIndex]);
+  React.useEffect(() => {
+    return utils.mergeRegister(editor.registerCommand(SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND, ({
+      option
+    }) => {
+      if (option.ref && option.ref.current != null) {
+        scrollIntoViewIfNeeded(option.ref.current);
+        return true;
+      }
+
+      return false;
+    }, lexical.COMMAND_PRIORITY_LOW));
+  }, [editor, updateSelectedIndex]);
   React.useEffect(() => {
     return utils.mergeRegister(editor.registerCommand(lexical.KEY_ARROW_DOWN_COMMAND, payload => {
       const event = payload;
@@ -268,7 +358,10 @@ function LexicalPopoverMenu({
         const option = options[newSelectedIndex];
 
         if (option.ref != null && option.ref.current) {
-          scrollIntoViewIfNeeded(option.ref.current);
+          editor.dispatchCommand(SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND, {
+            index: newSelectedIndex,
+            option
+          });
         }
 
         event.preventDefault();
@@ -276,7 +369,7 @@ function LexicalPopoverMenu({
       }
 
       return true;
-    }, lexical.COMMAND_PRIORITY_NORMAL), editor.registerCommand(lexical.KEY_ARROW_UP_COMMAND, payload => {
+    }, lexical.COMMAND_PRIORITY_CRITICAL), editor.registerCommand(lexical.KEY_ARROW_UP_COMMAND, payload => {
       const event = payload;
 
       if (options !== null && options.length && selectedIndex !== null) {
@@ -293,13 +386,13 @@ function LexicalPopoverMenu({
       }
 
       return true;
-    }, lexical.COMMAND_PRIORITY_NORMAL), editor.registerCommand(lexical.KEY_ESCAPE_COMMAND, payload => {
+    }, lexical.COMMAND_PRIORITY_CRITICAL), editor.registerCommand(lexical.KEY_ESCAPE_COMMAND, payload => {
       const event = payload;
       event.preventDefault();
       event.stopImmediatePropagation();
       close();
       return true;
-    }, lexical.COMMAND_PRIORITY_NORMAL), editor.registerCommand(lexical.KEY_TAB_COMMAND, payload => {
+    }, lexical.COMMAND_PRIORITY_CRITICAL), editor.registerCommand(lexical.KEY_TAB_COMMAND, payload => {
       const event = payload;
 
       if (options === null || selectedIndex === null || options[selectedIndex] == null) {
@@ -310,7 +403,7 @@ function LexicalPopoverMenu({
       event.stopImmediatePropagation();
       selectOptionAndCleanUp(options[selectedIndex]);
       return true;
-    }, lexical.COMMAND_PRIORITY_NORMAL), editor.registerCommand(lexical.KEY_ENTER_COMMAND, event => {
+    }, lexical.COMMAND_PRIORITY_CRITICAL), editor.registerCommand(lexical.KEY_ENTER_COMMAND, event => {
       if (options === null || selectedIndex === null || options[selectedIndex] == null) {
         return false;
       }
@@ -322,14 +415,15 @@ function LexicalPopoverMenu({
 
       selectOptionAndCleanUp(options[selectedIndex]);
       return true;
-    }, lexical.COMMAND_PRIORITY_NORMAL));
+    }, lexical.COMMAND_PRIORITY_CRITICAL));
   }, [selectOptionAndCleanUp, close, editor, options, selectedIndex, updateSelectedIndex]);
   const listItemProps = React.useMemo(() => ({
+    options,
     selectOptionAndCleanUp,
     selectedIndex,
     setHighlightedIndex
-  }), [selectOptionAndCleanUp, selectedIndex]);
-  return menuRenderFn(anchorElement, listItemProps, resolution.match.matchingString);
+  }), [selectOptionAndCleanUp, selectedIndex, options]);
+  return menuRenderFn(anchorElementRef, listItemProps, resolution.match.matchingString);
 }
 
 function useBasicTypeaheadTriggerMatch(trigger, {
@@ -358,51 +452,68 @@ function useBasicTypeaheadTriggerMatch(trigger, {
   }, [maxLength, minLength, trigger]);
 }
 
-function useAnchorElementRef(resolution) {
+function useMenuAnchorRef(resolution, setResolution, className) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const anchorElementRef = React.useRef(document.createElement('div'));
-  React.useEffect(() => {
+  const positionMenu = React.useCallback(() => {
     const rootElement = editor.getRootElement();
+    const containerDiv = anchorElementRef.current;
+
+    if (rootElement !== null && resolution !== null) {
+      const {
+        left,
+        top,
+        width,
+        height
+      } = resolution.getRect();
+      containerDiv.style.top = `${top + window.pageYOffset}px`;
+      containerDiv.style.left = `${left + window.pageXOffset}px`;
+      containerDiv.style.height = `${height}px`;
+      containerDiv.style.width = `${width}px`;
+
+      if (!containerDiv.isConnected) {
+        if (className != null) {
+          containerDiv.className = className;
+        }
 
-    function positionMenu() {
-      const containerDiv = anchorElementRef.current;
-      containerDiv.setAttribute('aria-label', 'Typeahead menu');
-      containerDiv.setAttribute('id', 'typeahead-menu');
-      containerDiv.setAttribute('role', 'listbox');
-
-      if (rootElement !== null && resolution !== null) {
-        const {
-          left,
-          top,
-          width,
-          height
-        } = resolution.getRect();
-        containerDiv.style.top = `${top + height + 5 + window.pageYOffset}px`;
-        containerDiv.style.left = `${left + (resolution.position === 'start' ? 0 : width) + window.pageXOffset}px`;
+        containerDiv.setAttribute('aria-label', 'Typeahead menu');
+        containerDiv.setAttribute('id', 'typeahead-menu');
+        containerDiv.setAttribute('role', 'listbox');
         containerDiv.style.display = 'block';
         containerDiv.style.position = 'absolute';
-
-        if (!containerDiv.isConnected) {
-          document.body.append(containerDiv);
-        }
-
-        anchorElementRef.current = containerDiv;
-        rootElement.setAttribute('aria-controls', 'typeahead-menu');
+        document.body.append(containerDiv);
       }
+
+      anchorElementRef.current = containerDiv;
+      rootElement.setAttribute('aria-controls', 'typeahead-menu');
     }
+  }, [editor, resolution, className]);
+  React.useEffect(() => {
+    const rootElement = editor.getRootElement();
 
     if (resolution !== null) {
       positionMenu();
-      window.addEventListener('resize', positionMenu);
       return () => {
-        window.removeEventListener('resize', positionMenu);
-
         if (rootElement !== null) {
           rootElement.removeAttribute('aria-controls');
         }
+
+        const containerDiv = anchorElementRef.current;
+
+        if (containerDiv !== null && containerDiv.isConnected) {
+          containerDiv.remove();
+        }
       };
     }
-  }, [editor, resolution]);
+  }, [editor, positionMenu, resolution]);
+  const onVisibilityChange = React.useCallback(isInView => {
+    if (resolution !== null) {
+      if (!isInView) {
+        setResolution(null);
+      }
+    }
+  }, [resolution, setResolution]);
+  useDynamicPositioning(resolution, anchorElementRef.current, positionMenu, onVisibilityChange);
   return anchorElementRef;
 }
 
@@ -410,13 +521,29 @@ function LexicalTypeaheadMenuPlugin({
   options,
   onQueryChange,
   onSelectOption,
+  onOpen,
+  onClose,
   menuRenderFn,
   triggerFn,
-  position = 'start'
+  anchorClassName
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const [resolution, setResolution] = React.useState(null);
-  const anchorElementRef = useAnchorElementRef(resolution);
+  const anchorElementRef = useMenuAnchorRef(resolution, setResolution, anchorClassName);
+  const closeTypeahead = React.useCallback(() => {
+    setResolution(null);
+
+    if (onClose != null && resolution !== null) {
+      onClose();
+    }
+  }, [onClose, resolution]);
+  const openTypeahead = React.useCallback(res => {
+    setResolution(res);
+
+    if (onOpen != null && resolution === null) {
+      onOpen(res);
+    }
+  }, [onOpen, resolution]);
   React.useEffect(() => {
     let activeRange = document.createRange();
 
@@ -427,7 +554,7 @@ function LexicalTypeaheadMenuPlugin({
         const text = getQueryTextForSearch(editor);
 
         if (!lexical.$isRangeSelection(selection) || !selection.isCollapsed() || text === null || range === null) {
-          setResolution(null);
+          closeTypeahead();
           return;
         }
 
@@ -438,16 +565,15 @@ function LexicalTypeaheadMenuPlugin({
           const isRangePositioned = tryToPositionRange(match.leadOffset, range);
 
           if (isRangePositioned !== null) {
-            startTransition(() => setResolution({
+            startTransition(() => openTypeahead({
               getRect: () => range.getBoundingClientRect(),
-              match,
-              position
+              match
             }));
             return;
           }
         }
 
-        setResolution(null);
+        closeTypeahead();
       });
     };
 
@@ -456,15 +582,12 @@ function LexicalTypeaheadMenuPlugin({
       activeRange = null;
       removeUpdateListener();
     };
-  }, [editor, triggerFn, onQueryChange, resolution, position]);
-  const closeTypeahead = React.useCallback(() => {
-    setResolution(null);
-  }, []);
+  }, [editor, triggerFn, onQueryChange, resolution, closeTypeahead, openTypeahead]);
   return resolution === null || editor === null ? null : /*#__PURE__*/React.createElement(LexicalPopoverMenu, {
     close: closeTypeahead,
     resolution: resolution,
     editor: editor,
-    anchorElement: anchorElementRef.current,
+    anchorElementRef: anchorElementRef,
     options: options,
     menuRenderFn: menuRenderFn,
     onSelectOption: onSelectOption
@@ -473,14 +596,29 @@ function LexicalTypeaheadMenuPlugin({
 function LexicalNodeMenuPlugin({
   options,
   nodeKey,
-  position = 'end',
   onClose,
+  onOpen,
   onSelectOption,
-  menuRenderFn
+  menuRenderFn,
+  anchorClassName
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const [resolution, setResolution] = React.useState(null);
-  const anchorElementRef = useAnchorElementRef(resolution);
+  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]);
   React.useEffect(() => {
     if (nodeKey && resolution == null) {
       editor.update(() => {
@@ -489,26 +627,25 @@ function LexicalNodeMenuPlugin({
 
         if (node != null && domElement != null) {
           const text = node.getTextContent();
-          startTransition(() => setResolution({
+          startTransition(() => openNodeMenu({
             getRect: () => domElement.getBoundingClientRect(),
             match: {
               leadOffset: text.length,
               matchingString: text,
               replaceableString: text
-            },
-            position
+            }
           }));
         }
       });
     } else if (nodeKey == null && resolution != null) {
-      setResolution(null);
+      closeNodeMenu();
     }
-  }, [editor, nodeKey, position, resolution]);
+  }, [closeNodeMenu, editor, nodeKey, openNodeMenu, resolution]);
   return resolution === null || editor === null ? null : /*#__PURE__*/React.createElement(LexicalPopoverMenu, {
-    close: onClose,
+    close: closeNodeMenu,
     resolution: resolution,
     editor: editor,
-    anchorElement: anchorElementRef.current,
+    anchorElementRef: anchorElementRef,
     options: options,
     menuRenderFn: menuRenderFn,
     onSelectOption: onSelectOption
@@ -518,5 +655,8 @@ function LexicalNodeMenuPlugin({
 exports.LexicalNodeMenuPlugin = LexicalNodeMenuPlugin;
 exports.LexicalTypeaheadMenuPlugin = LexicalTypeaheadMenuPlugin;
 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

@@ -7,7 +7,7 @@
  * @flow strict
  */
 
-import type {LexicalEditor, NodeKey, TextNode} from 'lexical';
+import type {LexicalCommand, LexicalEditor, NodeKey, TextNode} from 'lexical';
 import * as React from 'react';
 
 export type QueryMatch = {
@@ -26,40 +26,33 @@ export const PUNCTUATION: string =
 
 declare export class TypeaheadOption {
   key: string;
-  ref: React$ElementRef<HTMLElement | null>;
+  ref: {current: HTMLElement | null};
   constructor(key: string): void;
   setRefElement(element: HTMLElement | null): void;
 }
 
+declare export var SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND: LexicalCommand<{
+  index: number,
+  option: TypeaheadOption,
+}>;
+
 export type MenuRenderFn<TOption> = (
-  anchorElement: HTMLElement | null,
+  anchorElementRef: {current: HTMLElement | null},
   itemProps: {
     selectedIndex: number | null,
     selectOptionAndCleanUp: (option: TOption) => void,
     setHighlightedIndex: (index: number) => void,
+    options: Array<TOption>,
   },
   matchingString: string,
 ) => React.Portal | React.MixedElement | null;
 
-const scrollIntoViewIfNeeded = (target: HTMLElement) => {
-  const container = document.getElementById('typeahead-menu');
-  if (container) {
-    const containerRect = container.getBoundingClientRect();
-    const targetRect = target.getBoundingClientRect();
-    if (targetRect.bottom > containerRect.bottom) {
-      target.scrollIntoView(false);
-    } else if (targetRect.top < containerRect.top) {
-      target.scrollIntoView();
-    }
-  }
-};
-
 declare export function useBasicTypeaheadTriggerMatch(
   trigger: string,
   options: {minLength?: number, maxLength?: number},
 ): TriggerFn;
 
-export type TypeaheadMenuPluginArgs<TOption> = {
+export type TypeaheadMenuPluginProps<TOption> = {
   onQueryChange: (matchingString: string | null) => void,
   onSelectOption: (
     option: TOption,
@@ -70,6 +63,9 @@ export type TypeaheadMenuPluginArgs<TOption> = {
   options: Array<TOption>,
   menuRenderFn: MenuRenderFn<TOption>,
   triggerFn: TriggerFn,
+  onOpen?: (resolution: Resolution) => void,
+  onClose?: () => void,
+  anchorClassName?: string,
 };
 
 export type TriggerFn = (
@@ -78,10 +74,10 @@ export type TriggerFn = (
 ) => QueryMatch | null;
 
 declare export function LexicalTypeaheadMenuPlugin<TOption>(
-  options: TypeaheadMenuPluginArgs<TOption>,
+  options: TypeaheadMenuPluginProps<TOption>,
 ): React.MixedElement | null;
 
-type NodeMenuPluginArgs<TOption> = {
+type NodeMenuPluginProps<TOption> = {
   onSelectOption: (
     option: TOption,
     textNodeContainingQuery: TextNode | null,
@@ -90,10 +86,12 @@ type NodeMenuPluginArgs<TOption> = {
   ) => void,
   options: Array<TOption>,
   nodeKey: NodeKey | null,
-  onClose: () => void,
+  onClose?: () => void,
+  onOpen?: (resolution: Resolution) => void,
   menuRenderFn: MenuRenderFn<TOption>,
+  anchorClassName?: string,
 };
 
 declare export function LexicalNodeMenuPlugin<TOption>(
-  options: NodeMenuPluginArgs<TOption>,
+  options: NodeMenuPluginProps<TOption>,
 ): React.MixedElement | null;

package/LexicalTypeaheadMenuPlugin.prod.js

@@ -4,19 +4,23 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var m=require("@lexical/react/LexicalComposerContext"),n=require("@lexical/utils"),v=require("lexical"),w=require("react"),x="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?w.useLayoutEffect:w.useEffect;class y{constructor(b){this.key=b;this.ref={current:null};this.setRefElement=this.setRefElement.bind(this)}setRefElement(b){this.ref={current:b}}}
-let z=b=>{var a=document.getElementById("typeahead-menu");if(a){a=a.getBoundingClientRect();const c=b.getBoundingClientRect();c.bottom>a.bottom?b.scrollIntoView(!1):c.top<a.top&&b.scrollIntoView()}};function C(b,a){var c=window.getSelection();if(null===c||!c.isCollapsed)return!1;let d=c.anchorNode;c=c.anchorOffset;if(null==d||null==c)return!1;try{a.setStart(d,b),a.setEnd(d,c)}catch(e){return!1}return!0}
-function D(b){let a=null;b.getEditorState().read(()=>{var c=v.$getSelection();if(v.$isRangeSelection(c)){var d=c.anchor;"text"!==d.type?a=null:(c=d.getNode(),c.isSimpleText()?(d=d.offset,a=c.getTextContent().slice(0,d)):a=null)}});return a}
-function E(b,a){b=v.$getSelection();if(!v.$isRangeSelection(b)||!b.isCollapsed())return null;var c=b.anchor;if("text"!==c.type)return null;b=c.getNode();if(!b.isSimpleText())return null;c=c.offset;let d=b.getTextContent().slice(0,c);var e=a.matchingString;a=a.replaceableString.length;for(let h=a;h<=e.length;h++)d.substr(-h)===e.substr(0,h)&&(a=h);a=c-a;if(0>a)return null;let k;0===a?[k]=b.splitText(c):[,k]=b.splitText(a,c);return k}
-function F(b,a){return 0!==a?!1:b.getEditorState().read(()=>{var c=v.$getSelection();return v.$isRangeSelection(c)?(c=c.anchor.getNode().getPreviousSibling(),v.$isTextNode(c)&&c.isTextEntity()):!1})}function G(b){w.startTransition?w.startTransition(b):b()}
-function H({close:b,editor:a,anchorElement:c,resolution:d,options:e,menuRenderFn:k,onSelectOption:h}){let [f,p]=w.useState(null);w.useEffect(()=>{p(0)},[d.match.matchingString]);let q=w.useCallback(g=>{a.update(()=>{const l=E(a,d.match);h(g,l,b,d.match.matchingString)})},[b,a,d.match,h]),r=w.useCallback(g=>{const l=a.getRootElement();null!==l&&(l.setAttribute("aria-activedescendant","typeahead-item-"+g),p(g))},[a]);w.useEffect(()=>()=>{let g=a.getRootElement();null!==g&&g.removeAttribute("aria-activedescendant")},
-[a]);x(()=>{null===e?p(null):null===f&&r(0)},[e,f,r]);w.useEffect(()=>n.mergeRegister(a.registerCommand(v.KEY_ARROW_DOWN_COMMAND,g=>{if(null!==e&&e.length&&null!==f){var l=f!==e.length-1?f+1:0;r(l);l=e[l];null!=l.ref&&l.ref.current&&z(l.ref.current);g.preventDefault();g.stopImmediatePropagation()}return!0},v.COMMAND_PRIORITY_NORMAL),a.registerCommand(v.KEY_ARROW_UP_COMMAND,g=>{if(null!==e&&e.length&&null!==f){var l=0!==f?f-1:e.length-1;r(l);l=e[l];null!=l.ref&&l.ref.current&&z(l.ref.current);g.preventDefault();
-g.stopImmediatePropagation()}return!0},v.COMMAND_PRIORITY_NORMAL),a.registerCommand(v.KEY_ESCAPE_COMMAND,g=>{g.preventDefault();g.stopImmediatePropagation();b();return!0},v.COMMAND_PRIORITY_NORMAL),a.registerCommand(v.KEY_TAB_COMMAND,g=>{if(null===e||null===f||null==e[f])return!1;g.preventDefault();g.stopImmediatePropagation();q(e[f]);return!0},v.COMMAND_PRIORITY_NORMAL),a.registerCommand(v.KEY_ENTER_COMMAND,g=>{if(null===e||null===f||null==e[f])return!1;null!==g&&(g.preventDefault(),g.stopImmediatePropagation());
-q(e[f]);return!0},v.COMMAND_PRIORITY_NORMAL)),[q,b,a,e,f,r]);let t=w.useMemo(()=>({selectOptionAndCleanUp:q,selectedIndex:f,setHighlightedIndex:p}),[q,f]);return k(c,t,d.match.matchingString)}
-function I(b){let [a]=m.useLexicalComposerContext(),c=w.useRef(document.createElement("div"));w.useEffect(()=>{function d(){let k=c.current;k.setAttribute("aria-label","Typeahead menu");k.setAttribute("id","typeahead-menu");k.setAttribute("role","listbox");if(null!==e&&null!==b){let {left:h,top:f,width:p,height:q}=b.getRect();k.style.top=`${f+q+5+window.pageYOffset}px`;k.style.left=`${h+("start"===b.position?0:p)+window.pageXOffset}px`;k.style.display="block";k.style.position="absolute";k.isConnected||
-document.body.append(k);c.current=k;e.setAttribute("aria-controls","typeahead-menu")}}let e=a.getRootElement();if(null!==b)return d(),window.addEventListener("resize",d),()=>{window.removeEventListener("resize",d);null!==e&&e.removeAttribute("aria-controls")}},[a,b]);return c}
-exports.LexicalNodeMenuPlugin=function({options:b,nodeKey:a,position:c="end",onClose:d,onSelectOption:e,menuRenderFn:k}){let [h]=m.useLexicalComposerContext(),[f,p]=w.useState(null),q=I(f);w.useEffect(()=>{a&&null==f?h.update(()=>{let r=v.$getNodeByKey(a),t=h.getElementByKey(a);if(null!=r&&null!=t){let g=r.getTextContent();G(()=>p({getRect:()=>t.getBoundingClientRect(),match:{leadOffset:g.length,matchingString:g,replaceableString:g},position:c}))}}):null==a&&null!=f&&p(null)},[h,a,c,f]);return null===
-f||null===h?null:w.createElement(H,{close:d,resolution:f,editor:h,anchorElement:q.current,options:b,menuRenderFn:k,onSelectOption:e})};
-exports.LexicalTypeaheadMenuPlugin=function({options:b,onQueryChange:a,onSelectOption:c,menuRenderFn:d,triggerFn:e,position:k="start"}){let [h]=m.useLexicalComposerContext(),[f,p]=w.useState(null),q=I(f);w.useEffect(()=>{let t=document.createRange(),g=h.registerUpdateListener(()=>{h.getEditorState().read(()=>{const l=t,A=v.$getSelection(),B=D(h);if(v.$isRangeSelection(A)&&A.isCollapsed()&&null!==B&&null!==l){var u=e(B,h);a(u?u.matchingString:null);null===u||F(h,u.leadOffset)||null===C(u.leadOffset,
-l)?p(null):G(()=>p({getRect:()=>l.getBoundingClientRect(),match:u,position:k}))}else p(null)})});return()=>{t=null;g()}},[h,e,a,f,k]);let r=w.useCallback(()=>{p(null)},[]);return null===f||null===h?null:w.createElement(H,{close:r,resolution:f,editor:h,anchorElement:q.current,options:b,menuRenderFn:d,onSelectOption:c})};exports.PUNCTUATION="\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;";exports.TypeaheadOption=y;
-exports.useBasicTypeaheadTriggerMatch=function(b,{minLength:a=1,maxLength:c=75}){return w.useCallback(d=>{d=(new RegExp("(^|\\s|\\()(["+b+"]((?:[^"+(b+"\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;\\s]){0,")+c+"}))$")).exec(d);if(null!==d){let e=d[1],k=d[3];if(k.length>=a)return{leadOffset:d.index+e.length,matchingString:k,replaceableString:d[2]}}return null},[c,a,b])}
+'use strict';var k=require("@lexical/react/LexicalComposerContext"),n=require("@lexical/utils"),w=require("lexical"),x=require("react"),z="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?x.useLayoutEffect:x.useEffect;class A{constructor(b){this.key=b;this.ref={current:null};this.setRefElement=this.setRefElement.bind(this)}setRefElement(b){this.ref={current:b}}}
+let B=b=>{var a=document.getElementById("typeahead-menu");if(a){a=a.getBoundingClientRect();const c=b.getBoundingClientRect();c.bottom>a.bottom?b.scrollIntoView(!1):c.top<a.top&&b.scrollIntoView()}};function C(b,a){var c=window.getSelection();if(null===c||!c.isCollapsed)return!1;let e=c.anchorNode;c=c.anchorOffset;if(null==e||null==c)return!1;try{a.setStart(e,b),a.setEnd(e,c)}catch(f){return!1}return!0}
+function D(b){let a=null;b.getEditorState().read(()=>{var c=w.$getSelection();if(w.$isRangeSelection(c)){var e=c.anchor;"text"!==e.type?a=null:(c=e.getNode(),c.isSimpleText()?(e=e.offset,a=c.getTextContent().slice(0,e)):a=null)}});return a}
+function E(b,a){b=w.$getSelection();if(!w.$isRangeSelection(b)||!b.isCollapsed())return null;var c=b.anchor;if("text"!==c.type)return null;b=c.getNode();if(!b.isSimpleText())return null;c=c.offset;let e=b.getTextContent().slice(0,c);var f=a.matchingString;a=a.replaceableString.length;for(let p=a;p<=f.length;p++)e.substr(-p)===f.substr(0,p)&&(a=p);a=c-a;if(0>a)return null;let q;0===a?[q]=b.splitText(c):[,q]=b.splitText(a,c);return q}
+function F(b,a){return 0!==a?!1:b.getEditorState().read(()=>{var c=w.$getSelection();return w.$isRangeSelection(c)?(c=c.anchor.getNode().getPreviousSibling(),w.$isTextNode(c)&&c.isTextEntity()):!1})}function G(b){x.startTransition?x.startTransition(b):b()}
+function J(b,a){let c=getComputedStyle(b),e="absolute"===c.position;a=a?/(auto|scroll|hidden)/:/(auto|scroll)/;if("fixed"===c.position)return document.body;for(;b=b.parentElement;)if(c=getComputedStyle(b),(!e||"static"!==c.position)&&a.test(c.overflow+c.overflowY+c.overflowX))return b;return document.body}function K(b,a){b=b.getBoundingClientRect();a=a.getBoundingClientRect();return b.top>a.top&&b.top<a.bottom}
+function L(b,a,c,e){let [f]=k.useLexicalComposerContext();x.useEffect(()=>{if(null!=a&&null!=b){let q=f.getRootElement(),p=null!=q?J(q,!1):document.body,g=!1,d=K(a,p),m=function(){g||(window.requestAnimationFrame(function(){c();g=!1}),g=!0);const t=K(a,p);t!==d&&(d=t,null!=e&&e(t))},r=new ResizeObserver(c);window.addEventListener("resize",c);document.addEventListener("scroll",m,{capture:!0,passive:!0});r.observe(a);return()=>{r.unobserve(a);window.removeEventListener("resize",c);document.removeEventListener("scroll",
+m)}}},[a,f,e,c,b])}let M=w.createCommand("SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND");
+function N({close:b,editor:a,anchorElementRef:c,resolution:e,options:f,menuRenderFn:q,onSelectOption:p}){let [g,d]=x.useState(null);x.useEffect(()=>{d(0)},[e.match.matchingString]);let m=x.useCallback(h=>{a.update(()=>{const l=E(a,e.match);p(h,l,b,e.match.matchingString)})},[b,a,e.match,p]),r=x.useCallback(h=>{const l=a.getRootElement();null!==l&&(l.setAttribute("aria-activedescendant","typeahead-item-"+h),d(h))},[a]);x.useEffect(()=>()=>{let h=a.getRootElement();null!==h&&h.removeAttribute("aria-activedescendant")},
+[a]);z(()=>{null===f?d(null):null===g&&r(0)},[f,g,r]);x.useEffect(()=>n.mergeRegister(a.registerCommand(M,({option:h})=>h.ref&&null!=h.ref.current?(B(h.ref.current),!0):!1,w.COMMAND_PRIORITY_LOW)),[a,r]);x.useEffect(()=>n.mergeRegister(a.registerCommand(w.KEY_ARROW_DOWN_COMMAND,h=>{if(null!==f&&f.length&&null!==g){let l=g!==f.length-1?g+1:0;r(l);let u=f[l];null!=u.ref&&u.ref.current&&a.dispatchCommand(M,{index:l,option:u});h.preventDefault();h.stopImmediatePropagation()}return!0},w.COMMAND_PRIORITY_CRITICAL),
+a.registerCommand(w.KEY_ARROW_UP_COMMAND,h=>{if(null!==f&&f.length&&null!==g){var l=0!==g?g-1:f.length-1;r(l);l=f[l];null!=l.ref&&l.ref.current&&B(l.ref.current);h.preventDefault();h.stopImmediatePropagation()}return!0},w.COMMAND_PRIORITY_CRITICAL),a.registerCommand(w.KEY_ESCAPE_COMMAND,h=>{h.preventDefault();h.stopImmediatePropagation();b();return!0},w.COMMAND_PRIORITY_CRITICAL),a.registerCommand(w.KEY_TAB_COMMAND,h=>{if(null===f||null===g||null==f[g])return!1;h.preventDefault();h.stopImmediatePropagation();
+m(f[g]);return!0},w.COMMAND_PRIORITY_CRITICAL),a.registerCommand(w.KEY_ENTER_COMMAND,h=>{if(null===f||null===g||null==f[g])return!1;null!==h&&(h.preventDefault(),h.stopImmediatePropagation());m(f[g]);return!0},w.COMMAND_PRIORITY_CRITICAL)),[m,b,a,f,g,r]);let t=x.useMemo(()=>({options:f,selectOptionAndCleanUp:m,selectedIndex:g,setHighlightedIndex:d}),[m,g,f]);return q(c,t,e.match.matchingString)}
+function O(b,a,c){let [e]=k.useLexicalComposerContext(),f=x.useRef(document.createElement("div")),q=x.useCallback(()=>{const g=e.getRootElement(),d=f.current;if(null!==g&&null!==b){const {left:m,top:r,width:t,height:h}=b.getRect();d.style.top=`${r+window.pageYOffset}px`;d.style.left=`${m+window.pageXOffset}px`;d.style.height=`${h}px`;d.style.width=`${t}px`;d.isConnected||(null!=c&&(d.className=c),d.setAttribute("aria-label","Typeahead menu"),d.setAttribute("id","typeahead-menu"),d.setAttribute("role",
+"listbox"),d.style.display="block",d.style.position="absolute",document.body.append(d));f.current=d;g.setAttribute("aria-controls","typeahead-menu")}},[e,b,c]);x.useEffect(()=>{let g=e.getRootElement();if(null!==b)return q(),()=>{null!==g&&g.removeAttribute("aria-controls");let d=f.current;null!==d&&d.isConnected&&d.remove()}},[e,q,b]);let p=x.useCallback(g=>{null!==b&&(g||a(null))},[b,a]);L(b,f.current,q,p);return f}
+exports.LexicalNodeMenuPlugin=function({options:b,nodeKey:a,onClose:c,onOpen:e,onSelectOption:f,menuRenderFn:q,anchorClassName:p}){let [g]=k.useLexicalComposerContext(),[d,m]=x.useState(null);p=O(d,m,p);let r=x.useCallback(()=>{m(null);null!=c&&null!==d&&c()},[c,d]),t=x.useCallback(h=>{m(h);null!=e&&null===d&&e(h)},[e,d]);x.useEffect(()=>{a&&null==d?g.update(()=>{let h=w.$getNodeByKey(a),l=g.getElementByKey(a);if(null!=h&&null!=l){let u=h.getTextContent();G(()=>t({getRect:()=>l.getBoundingClientRect(),
+match:{leadOffset:u.length,matchingString:u,replaceableString:u}}))}}):null==a&&null!=d&&r()},[r,g,a,t,d]);return null===d||null===g?null:x.createElement(N,{close:r,resolution:d,editor:g,anchorElementRef:p,options:b,menuRenderFn:q,onSelectOption:f})};
+exports.LexicalTypeaheadMenuPlugin=function({options:b,onQueryChange:a,onSelectOption:c,onOpen:e,onClose:f,menuRenderFn:q,triggerFn:p,anchorClassName:g}){let [d]=k.useLexicalComposerContext(),[m,r]=x.useState(null);g=O(m,r,g);let t=x.useCallback(()=>{r(null);null!=f&&null!==m&&f()},[f,m]),h=x.useCallback(l=>{r(l);null!=e&&null===m&&e(l)},[e,m]);x.useEffect(()=>{let l=document.createRange(),u=d.registerUpdateListener(()=>{d.getEditorState().read(()=>{const y=l,H=w.$getSelection(),I=D(d);if(w.$isRangeSelection(H)&&
+H.isCollapsed()&&null!==I&&null!==y){var v=p(I,d);a(v?v.matchingString:null);null===v||F(d,v.leadOffset)||null===C(v.leadOffset,y)?t():G(()=>h({getRect:()=>y.getBoundingClientRect(),match:v}))}else t()})});return()=>{l=null;u()}},[d,p,a,m,t,h]);return null===m||null===d?null:x.createElement(N,{close:t,resolution:m,editor:d,anchorElementRef:g,options:b,menuRenderFn:q,onSelectOption:c})};exports.PUNCTUATION="\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;";
+exports.SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND=M;exports.TypeaheadOption=A;exports.getScrollParent=J;exports.useBasicTypeaheadTriggerMatch=function(b,{minLength:a=1,maxLength:c=75}){return x.useCallback(e=>{e=(new RegExp("(^|\\s|\\()(["+b+"]((?:[^"+(b+"\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;\\s]){0,")+c+"}))$")).exec(e);if(null!==e){let f=e[1],q=e[3];if(q.length>=a)return{leadOffset:e.index+f.length,matchingString:q,replaceableString:e[2]}}return null},[c,a,b])};
+exports.useDynamicPositioning=L

package/README.md

@@ -73,11 +73,11 @@ function Editor() {
 
 return (
     <LexicalComposer initialConfig={initialConfig}>
-      <LexicalPlainTextPlugin
-        contentEditable={<LexicalContentEditable />}
+      <PlainTextPlugin
+        contentEditable={<ContentEditable />}
         placeholder={<div>Enter some text...</div>}
       />
-      <LexicalOnChangePlugin onChange={onChange} />
+      <OnChangePlugin onChange={onChange} />
       <HistoryPlugin />
       <MyCustomAutoFocusPlugin />
     </LexicalComposer>

package/package.json

@@ -8,28 +8,28 @@
     "rich-text"
   ],
   "license": "MIT",
-  "version": "0.5.0",
+  "version": "0.5.1-next.1",
   "dependencies": {
-    "@lexical/clipboard": "0.5.0",
-    "@lexical/code": "0.5.0",
-    "@lexical/dragon": "0.5.0",
-    "@lexical/hashtag": "0.5.0",
-    "@lexical/history": "0.5.0",
-    "@lexical/link": "0.5.0",
-    "@lexical/list": "0.5.0",
-    "@lexical/mark": "0.5.0",
-    "@lexical/markdown": "0.5.0",
-    "@lexical/overflow": "0.5.0",
-    "@lexical/plain-text": "0.5.0",
-    "@lexical/rich-text": "0.5.0",
-    "@lexical/selection": "0.5.0",
-    "@lexical/table": "0.5.0",
-    "@lexical/text": "0.5.0",
-    "@lexical/utils": "0.5.0",
-    "@lexical/yjs": "0.5.0"
+    "@lexical/clipboard": "0.5.1-next.1",
+    "@lexical/code": "0.5.1-next.1",
+    "@lexical/dragon": "0.5.1-next.1",
+    "@lexical/hashtag": "0.5.1-next.1",
+    "@lexical/history": "0.5.1-next.1",
+    "@lexical/link": "0.5.1-next.1",
+    "@lexical/list": "0.5.1-next.1",
+    "@lexical/mark": "0.5.1-next.1",
+    "@lexical/markdown": "0.5.1-next.1",
+    "@lexical/overflow": "0.5.1-next.1",
+    "@lexical/plain-text": "0.5.1-next.1",
+    "@lexical/rich-text": "0.5.1-next.1",
+    "@lexical/selection": "0.5.1-next.1",
+    "@lexical/table": "0.5.1-next.1",
+    "@lexical/text": "0.5.1-next.1",
+    "@lexical/utils": "0.5.1-next.1",
+    "@lexical/yjs": "0.5.1-next.1"
   },
   "peerDependencies": {
-    "lexical": "0.5.0",
+    "lexical": "0.5.1-next.1",
     "react": ">=17.x",
     "react-dom": ">=17.x"
   },