@payloadcms/richtext-lexical 3.0.0-canary.f83d96a → 3.0.0-canary.ff8c8fd

package/dist/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/LexicalMenu.js

@@ -1,401 +1,384 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import { mergeRegister } from '@lexical/utils';
 import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_LOW, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND, createCommand } from 'lexical';
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 const baseClass = 'slash-menu-popup';
-const scrollIntoViewIfNeeded = (target)=>{
-    const typeaheadContainerNode = document.getElementById('slash-menu');
-    if (!typeaheadContainerNode) return;
-    const typeaheadRect = typeaheadContainerNode.getBoundingClientRect();
-    if (typeaheadRect.top + typeaheadRect.height > window.innerHeight) {
-        typeaheadContainerNode.scrollIntoView({
-            block: 'center'
-        });
-    }
-    if (typeaheadRect.top < 0) {
-        typeaheadContainerNode.scrollIntoView({
-            block: 'center'
-        });
-    }
-    target.scrollIntoView({
-        block: 'nearest'
+const scrollIntoViewIfNeeded = target => {
+  const typeaheadContainerNode = document.getElementById('slash-menu');
+  if (!typeaheadContainerNode) return;
+  const typeaheadRect = typeaheadContainerNode.getBoundingClientRect();
+  if (typeaheadRect.top + typeaheadRect.height > window.innerHeight) {
+    typeaheadContainerNode.scrollIntoView({
+      block: 'center'
+    });
+  }
+  if (typeaheadRect.top < 0) {
+    typeaheadContainerNode.scrollIntoView({
+      block: 'center'
     });
+  }
+  target.scrollIntoView({
+    block: 'nearest'
+  });
 };
 /**
  * Walk backwards along user input and forward through entity title to try
  * and replace more of the user's text with entity.
- */ function getFullMatchOffset(documentText, entryText, offset) {
-    let triggerOffset = offset;
-    for(let i = triggerOffset; i <= entryText.length; i++){
-        if (documentText.substring(documentText.length - i) === entryText.substring(0, i)) {
-            triggerOffset = i;
-        }
+ */
+function getFullMatchOffset(documentText, entryText, offset) {
+  let triggerOffset = offset;
+  for (let i = triggerOffset; i <= entryText.length; i++) {
+    if (documentText.substring(documentText.length - i) === entryText.substring(0, i)) {
+      triggerOffset = i;
     }
-    return triggerOffset;
+  }
+  return triggerOffset;
 }
 /**
  * Split Lexical TextNode and return a new TextNode only containing matched text.
  * Common use cases include: removing the node, replacing with a new node.
- */ function $splitNodeContainingQuery(match) {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
-        return null;
-    }
-    const anchor = selection.anchor;
-    if (anchor.type !== 'text') {
-        return null;
-    }
-    const anchorNode = anchor.getNode();
-    if (!anchorNode.isSimpleText()) {
-        return null;
-    }
-    const selectionOffset = anchor.offset;
-    const textContent = anchorNode.getTextContent().slice(0, selectionOffset);
-    // eslint-disable-next-line react/destructuring-assignment
-    const characterOffset = match.replaceableString.length;
-    // eslint-disable-next-line react/destructuring-assignment
-    const queryOffset = getFullMatchOffset(textContent, match.matchingString, characterOffset);
-    const startOffset = selectionOffset - queryOffset;
-    if (startOffset < 0) {
-        return null;
-    }
-    let newNode;
-    if (startOffset === 0) {
-        [newNode] = anchorNode.splitText(selectionOffset);
-    } else {
-        [, newNode] = anchorNode.splitText(startOffset, selectionOffset);
-    }
-    return newNode;
+ */
+function $splitNodeContainingQuery(match) {
+  const selection = $getSelection();
+  if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+    return null;
+  }
+  const anchor = selection.anchor;
+  if (anchor.type !== 'text') {
+    return null;
+  }
+  const anchorNode = anchor.getNode();
+  if (!anchorNode.isSimpleText()) {
+    return null;
+  }
+  const selectionOffset = anchor.offset;
+  const textContent = anchorNode.getTextContent().slice(0, selectionOffset);
+  const characterOffset = match.replaceableString.length;
+  const queryOffset = getFullMatchOffset(textContent, match.matchingString, characterOffset);
+  const startOffset = selectionOffset - queryOffset;
+  if (startOffset < 0) {
+    return null;
+  }
+  let newNode;
+  if (startOffset === 0) {
+    [newNode] = anchorNode.splitText(selectionOffset);
+  } else {
+    [, newNode] = anchorNode.splitText(startOffset, selectionOffset);
+  }
+  return newNode;
 }
 // Got from https://stackoverflow.com/a/42543908/2013580
 export 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;
+  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;
     }
-    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;
-        }
+    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) {
+      return parent;
     }
-    return document.body;
+  }
+  return document.body;
 }
 function isTriggerVisibleInNearestScrollContainer(targetElement, containerElement) {
-    const tRect = targetElement.getBoundingClientRect();
-    const cRect = containerElement.getBoundingClientRect();
-    return tRect.top > cRect.top && tRect.top < cRect.bottom;
+  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.
 export function useDynamicPositioning(resolution, targetElement, onReposition, onVisibilityChange) {
-    const [editor] = useLexicalComposerContext();
-    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
+  const $ = _c(7);
+  const [editor] = useLexicalComposerContext();
+  let t0;
+  let t1;
+  if ($[0] !== targetElement || $[1] !== resolution || $[2] !== editor || $[3] !== onReposition || $[4] !== onVisibilityChange) {
+    t0 = () => {
+      if (targetElement != null && resolution != null) {
+        const rootElement = editor.getRootElement();
+        const rootScrollParent = rootElement != null ? getScrollParent(rootElement, false) : document.body;
+        let ticking;
+        ticking = false;
+        let previousIsInView;
+        previousIsInView = isTriggerVisibleInNearestScrollContainer(targetElement, rootScrollParent);
+        const handleScroll = function () {
+          if (!ticking) {
+            window.requestAnimationFrame(function () {
+              onReposition();
+              ticking = false;
             });
-            resizeObserver.observe(targetElement);
-            return ()=>{
-                resizeObserver.unobserve(targetElement);
-                window.removeEventListener('resize', onReposition);
-                document.removeEventListener('scroll', handleScroll, true);
-            };
-        }
-    }, [
-        targetElement,
-        editor,
-        onVisibilityChange,
-        onReposition,
-        resolution
-    ]);
-}
-export const SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND = createCommand('SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND');
-export function LexicalMenu({ anchorElementRef, close, editor, // groups filtering is already handled in SlashMenu/index.tsx. Thus, groups always contains the matching items.
-groups, menuRenderFn, onSelectItem, resolution, shouldSplitNodeWithQuery = false }) {
-    const [selectedItemKey, setSelectedItemKey] = useState(null);
-    const matchingString = resolution.match && resolution.match.matchingString || '';
-    const updateSelectedItem = useCallback((item)=>{
-        const rootElem = editor.getRootElement();
-        if (rootElem !== null) {
-            rootElem.setAttribute('aria-activedescendant', `${baseClass}__item-${item.key}`);
-            setSelectedItemKey(item.key);
-        }
-    }, [
-        editor
-    ]);
-    const setSelectedItemKeyToFirstMatchingItem = useCallback(()=>{
-        // set selected item to the first of the matching ones
-        if (groups !== null && matchingString != null) {
-            // groups filtering is already handled in SlashMenu/index.tsx. Thus, groups always contains the matching items.
-            const allItems = groups.flatMap((group)=>group.items);
-            if (allItems.length) {
-                const firstMatchingItem = allItems[0];
-                updateSelectedItem(firstMatchingItem);
+            ticking = true;
+          }
+          const isInView = isTriggerVisibleInNearestScrollContainer(targetElement, rootScrollParent);
+          if (isInView !== previousIsInView) {
+            previousIsInView = isInView;
+            if (onVisibilityChange != null) {
+              onVisibilityChange(isInView);
             }
-        }
-    }, [
-        groups,
-        updateSelectedItem,
-        matchingString
-    ]);
-    useEffect(()=>{
-        setSelectedItemKeyToFirstMatchingItem();
-    }, [
-        matchingString,
-        setSelectedItemKeyToFirstMatchingItem
-    ]);
-    const selectItemAndCleanUp = useCallback((selectedItem)=>{
-        editor.update(()=>{
-            const textNodeContainingQuery = resolution.match != null && shouldSplitNodeWithQuery ? $splitNodeContainingQuery(resolution.match) : null;
-            onSelectItem(selectedItem, textNodeContainingQuery, close, resolution.match ? resolution.match.matchingString : '');
+          }
+        };
+        const resizeObserver = new ResizeObserver(onReposition);
+        window.addEventListener("resize", onReposition);
+        document.addEventListener("scroll", handleScroll, {
+          capture: true,
+          passive: true
         });
-    }, [
-        editor,
-        shouldSplitNodeWithQuery,
-        resolution.match,
-        onSelectItem,
-        close
-    ]);
-    useEffect(()=>{
-        return ()=>{
-            const rootElem = editor.getRootElement();
-            if (rootElem !== null) {
-                rootElem.removeAttribute('aria-activedescendant');
-            }
+        resizeObserver.observe(targetElement);
+        return () => {
+          resizeObserver.unobserve(targetElement);
+          window.removeEventListener("resize", onReposition);
+          document.removeEventListener("scroll", handleScroll, true);
         };
-    }, [
-        editor
-    ]);
-    useLayoutEffect(()=>{
-        if (groups === null) {
-            setSelectedItemKey(null);
-        } else if (selectedItemKey === null) {
-            setSelectedItemKeyToFirstMatchingItem();
+      }
+    };
+    t1 = [targetElement, editor, onVisibilityChange, onReposition, resolution];
+    $[0] = targetElement;
+    $[1] = resolution;
+    $[2] = editor;
+    $[3] = onReposition;
+    $[4] = onVisibilityChange;
+    $[5] = t0;
+    $[6] = t1;
+  } else {
+    t0 = $[5];
+    t1 = $[6];
+  }
+  useEffect(t0, t1);
+}
+export const SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND = createCommand('SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND');
+export function LexicalMenu({
+  anchorElementRef,
+  close,
+  editor,
+  // groups filtering is already handled in SlashMenu/index.tsx. Thus, groups always contains the matching items.
+  groups,
+  menuRenderFn,
+  onSelectItem,
+  resolution,
+  shouldSplitNodeWithQuery = false
+}) {
+  const [selectedItemKey, setSelectedItemKey] = useState(null);
+  const matchingString = resolution.match && resolution.match.matchingString || '';
+  const updateSelectedItem = useCallback(item => {
+    const rootElem = editor.getRootElement();
+    if (rootElem !== null) {
+      rootElem.setAttribute('aria-activedescendant', `${baseClass}__item-${item.key}`);
+      setSelectedItemKey(item.key);
+    }
+  }, [editor]);
+  const setSelectedItemKeyToFirstMatchingItem = useCallback(() => {
+    // set selected item to the first of the matching ones
+    if (groups !== null && matchingString != null) {
+      // groups filtering is already handled in SlashMenu/index.tsx. Thus, groups always contains the matching items.
+      const allItems = groups.flatMap(group => group.items);
+      if (allItems.length) {
+        const firstMatchingItem = allItems[0];
+        updateSelectedItem(firstMatchingItem);
+      }
+    }
+  }, [groups, updateSelectedItem, matchingString]);
+  useEffect(() => {
+    setSelectedItemKeyToFirstMatchingItem();
+  }, [matchingString, setSelectedItemKeyToFirstMatchingItem]);
+  const selectItemAndCleanUp = useCallback(selectedItem => {
+    editor.update(() => {
+      const textNodeContainingQuery = resolution.match != null && shouldSplitNodeWithQuery ? $splitNodeContainingQuery(resolution.match) : null;
+      onSelectItem(selectedItem, textNodeContainingQuery, close, resolution.match ? resolution.match.matchingString : '');
+    });
+  }, [editor, shouldSplitNodeWithQuery, resolution.match, onSelectItem, close]);
+  useEffect(() => {
+    return () => {
+      const rootElem_0 = editor.getRootElement();
+      if (rootElem_0 !== null) {
+        rootElem_0.removeAttribute('aria-activedescendant');
+      }
+    };
+  }, [editor]);
+  useLayoutEffect(() => {
+    if (groups === null) {
+      setSelectedItemKey(null);
+    } else if (selectedItemKey === null) {
+      setSelectedItemKeyToFirstMatchingItem();
+    }
+  }, [groups, selectedItemKey, updateSelectedItem, setSelectedItemKeyToFirstMatchingItem]);
+  useEffect(() => {
+    return mergeRegister(editor.registerCommand(SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND, ({
+      item: item_0
+    }) => {
+      if (item_0.ref && item_0.ref.current != null) {
+        scrollIntoViewIfNeeded(item_0.ref.current);
+        return true;
+      }
+      return false;
+    }, COMMAND_PRIORITY_LOW));
+  }, [editor, updateSelectedItem]);
+  useEffect(() => {
+    return mergeRegister(editor.registerCommand(KEY_ARROW_DOWN_COMMAND, payload => {
+      const event = payload;
+      if (groups !== null && groups.length && selectedItemKey !== null) {
+        const allItems_0 = groups.flatMap(group_0 => group_0.items);
+        const selectedIndex = allItems_0.findIndex(item_1 => item_1.key === selectedItemKey);
+        const newSelectedIndex = selectedIndex !== allItems_0.length - 1 ? selectedIndex + 1 : 0;
+        const newSelectedItem = allItems_0[newSelectedIndex];
+        updateSelectedItem(newSelectedItem);
+        if (newSelectedItem.ref != null && newSelectedItem.ref.current) {
+          editor.dispatchCommand(SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND, {
+            index: newSelectedIndex,
+            item: newSelectedItem
+          });
         }
-    }, [
-        groups,
-        selectedItemKey,
-        updateSelectedItem,
-        setSelectedItemKeyToFirstMatchingItem
-    ]);
-    useEffect(()=>{
-        return mergeRegister(editor.registerCommand(SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND, ({ item })=>{
-            if (item.ref && item.ref.current != null) {
-                scrollIntoViewIfNeeded(item.ref.current);
-                return true;
-            }
-            return false;
-        }, COMMAND_PRIORITY_LOW));
-    }, [
-        editor,
-        updateSelectedItem
-    ]);
-    useEffect(()=>{
-        return mergeRegister(editor.registerCommand(KEY_ARROW_DOWN_COMMAND, (payload)=>{
-            const event = payload;
-            if (groups !== null && groups.length && selectedItemKey !== null) {
-                const allItems = groups.flatMap((group)=>group.items);
-                const selectedIndex = allItems.findIndex((item)=>item.key === selectedItemKey);
-                const newSelectedIndex = selectedIndex !== allItems.length - 1 ? selectedIndex + 1 : 0;
-                const newSelectedItem = allItems[newSelectedIndex];
-                updateSelectedItem(newSelectedItem);
-                if (newSelectedItem.ref != null && newSelectedItem.ref.current) {
-                    editor.dispatchCommand(SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND, {
-                        index: newSelectedIndex,
-                        item: newSelectedItem
-                    });
-                }
-                event.preventDefault();
-                event.stopImmediatePropagation();
-            }
-            return true;
-        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_UP_COMMAND, (payload)=>{
-            const event = payload;
-            if (groups !== null && groups.length && selectedItemKey !== null) {
-                const allItems = groups.flatMap((group)=>group.items);
-                const selectedIndex = allItems.findIndex((item)=>item.key === selectedItemKey);
-                const newSelectedIndex = selectedIndex !== 0 ? selectedIndex - 1 : allItems.length - 1;
-                const newSelectedItem = allItems[newSelectedIndex];
-                updateSelectedItem(newSelectedItem);
-                if (newSelectedItem.ref != null && newSelectedItem.ref.current) {
-                    scrollIntoViewIfNeeded(newSelectedItem.ref.current);
-                }
-                event.preventDefault();
-                event.stopImmediatePropagation();
-            }
-            return true;
-        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ESCAPE_COMMAND, (payload)=>{
-            const event = payload;
-            event.preventDefault();
-            event.stopImmediatePropagation();
-            close();
-            return true;
-        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_TAB_COMMAND, (payload)=>{
-            const event = payload;
-            if (groups === null || selectedItemKey === null) {
-                return false;
-            }
-            const allItems = groups.flatMap((group)=>group.items);
-            const selectedItem = allItems.find((item)=>item.key === selectedItemKey);
-            if (!selectedItem) {
-                return false;
-            }
-            event.preventDefault();
-            event.stopImmediatePropagation();
-            selectItemAndCleanUp(selectedItem);
-            return true;
-        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ENTER_COMMAND, (event)=>{
-            if (groups === null || selectedItemKey === null) {
-                return false;
-            }
-            const allItems = groups.flatMap((group)=>group.items);
-            const selectedItem = allItems.find((item)=>item.key === selectedItemKey);
-            if (!selectedItem) {
-                return false;
-            }
-            if (event !== null) {
-                event.preventDefault();
-                event.stopImmediatePropagation();
-            }
-            selectItemAndCleanUp(selectedItem);
-            return true;
-        }, COMMAND_PRIORITY_LOW));
-    }, [
-        selectItemAndCleanUp,
-        close,
-        editor,
-        groups,
-        selectedItemKey,
-        updateSelectedItem
-    ]);
-    const listItemProps = useMemo(()=>({
-            groups,
-            selectItemAndCleanUp,
-            selectedItemKey,
-            setSelectedItemKey
-        }), [
-        selectItemAndCleanUp,
-        selectedItemKey,
-        groups
-    ]);
-    return menuRenderFn(anchorElementRef, listItemProps, resolution.match ? resolution.match.matchingString : '');
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+      return true;
+    }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_UP_COMMAND, payload_0 => {
+      const event_0 = payload_0;
+      if (groups !== null && groups.length && selectedItemKey !== null) {
+        const allItems_1 = groups.flatMap(group_1 => group_1.items);
+        const selectedIndex_0 = allItems_1.findIndex(item_2 => item_2.key === selectedItemKey);
+        const newSelectedIndex_0 = selectedIndex_0 !== 0 ? selectedIndex_0 - 1 : allItems_1.length - 1;
+        const newSelectedItem_0 = allItems_1[newSelectedIndex_0];
+        updateSelectedItem(newSelectedItem_0);
+        if (newSelectedItem_0.ref != null && newSelectedItem_0.ref.current) {
+          scrollIntoViewIfNeeded(newSelectedItem_0.ref.current);
+        }
+        event_0.preventDefault();
+        event_0.stopImmediatePropagation();
+      }
+      return true;
+    }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ESCAPE_COMMAND, payload_1 => {
+      const event_1 = payload_1;
+      event_1.preventDefault();
+      event_1.stopImmediatePropagation();
+      close();
+      return true;
+    }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_TAB_COMMAND, payload_2 => {
+      const event_2 = payload_2;
+      if (groups === null || selectedItemKey === null) {
+        return false;
+      }
+      const allItems_2 = groups.flatMap(group_2 => group_2.items);
+      const selectedItem_0 = allItems_2.find(item_3 => item_3.key === selectedItemKey);
+      if (!selectedItem_0) {
+        return false;
+      }
+      event_2.preventDefault();
+      event_2.stopImmediatePropagation();
+      selectItemAndCleanUp(selectedItem_0);
+      return true;
+    }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ENTER_COMMAND, event_3 => {
+      if (groups === null || selectedItemKey === null) {
+        return false;
+      }
+      const allItems_3 = groups.flatMap(group_3 => group_3.items);
+      const selectedItem_1 = allItems_3.find(item_4 => item_4.key === selectedItemKey);
+      if (!selectedItem_1) {
+        return false;
+      }
+      if (event_3 !== null) {
+        event_3.preventDefault();
+        event_3.stopImmediatePropagation();
+      }
+      selectItemAndCleanUp(selectedItem_1);
+      return true;
+    }, COMMAND_PRIORITY_LOW));
+  }, [selectItemAndCleanUp, close, editor, groups, selectedItemKey, updateSelectedItem]);
+  const listItemProps = useMemo(() => ({
+    groups,
+    selectItemAndCleanUp,
+    selectedItemKey,
+    setSelectedItemKey
+  }), [selectItemAndCleanUp, selectedItemKey, groups]);
+  return menuRenderFn(anchorElementRef, listItemProps, resolution.match ? resolution.match.matchingString : '');
 }
 export function useMenuAnchorRef(anchorElem, resolution, setResolution, className) {
-    const [editor] = useLexicalComposerContext();
-    const anchorElementRef = useRef(document.createElement('div'));
-    const positionMenu = useCallback(()=>{
-        const rootElement = editor.getRootElement();
-        const containerDiv = anchorElementRef.current;
-        const VERTICAL_OFFSET = 32;
-        const menuEle = containerDiv.firstChild;
-        if (rootElement !== null && resolution !== null) {
-            const { height, width } = resolution.getRect();
-            let { left, top } = resolution.getRect();
-            const rawTop = top;
-            top -= anchorElem.getBoundingClientRect().top + window.scrollY;
-            left -= anchorElem.getBoundingClientRect().left + window.scrollX;
-            containerDiv.style.left = `${left + window.scrollX}px`;
-            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 = `${rootElementRect.right - menuWidth + window.scrollX}px`;
-                }
-                const wouldGoOffBottomOfScreen = rawTop + menuHeight + VERTICAL_OFFSET > window.innerHeight;
-                //const wouldGoOffBottomOfContainer = top + menuHeight > rootElementRect.bottom
-                const wouldGoOffTopOfScreen = rawTop < 0;
-                // Position slash menu above the cursor instead of below (default) if it would otherwise go off the bottom of the screen.
-                if (wouldGoOffBottomOfScreen && !wouldGoOffTopOfScreen) {
-                    const margin = 24;
-                    containerDiv.style.top = `${top + VERTICAL_OFFSET - menuHeight + window.scrollY - (height + margin)}px`;
-                } else {
-                    containerDiv.style.top = `${top + window.scrollY + VERTICAL_OFFSET}px`;
-                }
-            }
-            if (!containerDiv.isConnected) {
-                if (className != null) {
-                    containerDiv.className = className;
-                }
-                containerDiv.setAttribute('aria-label', 'Slash menu');
-                containerDiv.setAttribute('id', 'slash-menu');
-                containerDiv.setAttribute('role', 'listbox');
-                containerDiv.style.display = 'block';
-                containerDiv.style.position = 'absolute';
-                anchorElem.append(containerDiv);
-            }
-            anchorElementRef.current = containerDiv;
-            rootElement.setAttribute('aria-controls', 'slash-menu');
+  const [editor] = useLexicalComposerContext();
+  const anchorElementRef = useRef(document.createElement('div'));
+  const positionMenu = useCallback(() => {
+    const rootElement = editor.getRootElement();
+    const containerDiv = anchorElementRef.current;
+    const VERTICAL_OFFSET = 32;
+    const menuEle = containerDiv.firstChild;
+    if (rootElement !== null && resolution !== null) {
+      const {
+        height,
+        width
+      } = resolution.getRect();
+      let {
+        left,
+        top
+      } = resolution.getRect();
+      const rawTop = top;
+      top -= anchorElem.getBoundingClientRect().top + window.scrollY;
+      left -= anchorElem.getBoundingClientRect().left + window.scrollX;
+      containerDiv.style.left = `${left + window.scrollX}px`;
+      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 = `${rootElementRect.right - menuWidth + window.scrollX}px`;
         }
-    }, [
-        editor,
-        resolution,
-        className,
-        anchorElem
-    ]);
-    useEffect(()=>{
-        const rootElement = editor.getRootElement();
-        if (resolution !== null) {
-            positionMenu();
-            return ()=>{
-                if (rootElement !== null) {
-                    rootElement.removeAttribute('aria-controls');
-                }
-                const containerDiv = anchorElementRef.current;
-                if (containerDiv !== null && containerDiv.isConnected) {
-                    containerDiv.remove();
-                }
-            };
+        const wouldGoOffBottomOfScreen = rawTop + menuHeight + VERTICAL_OFFSET > window.innerHeight;
+        //const wouldGoOffBottomOfContainer = top + menuHeight > rootElementRect.bottom
+        const wouldGoOffTopOfScreen = rawTop < 0;
+        // Position slash menu above the cursor instead of below (default) if it would otherwise go off the bottom of the screen.
+        if (wouldGoOffBottomOfScreen && !wouldGoOffTopOfScreen) {
+          const margin = 24;
+          containerDiv.style.top = `${top + VERTICAL_OFFSET - menuHeight + window.scrollY - (height + margin)}px`;
+        } else {
+          containerDiv.style.top = `${top + window.scrollY + VERTICAL_OFFSET}px`;
         }
-    }, [
-        editor,
-        positionMenu,
-        resolution
-    ]);
-    const onVisibilityChange = useCallback((isInView)=>{
-        if (resolution !== null) {
-            if (!isInView) {
-                setResolution(null);
-            }
+      }
+      if (!containerDiv.isConnected) {
+        if (className != null) {
+          containerDiv.className = className;
         }
-    }, [
-        resolution,
-        setResolution
-    ]);
-    useDynamicPositioning(resolution, anchorElementRef.current, positionMenu, onVisibilityChange);
-    return anchorElementRef;
+        containerDiv.setAttribute('aria-label', 'Slash menu');
+        containerDiv.setAttribute('id', 'slash-menu');
+        containerDiv.setAttribute('role', 'listbox');
+        containerDiv.style.display = 'block';
+        containerDiv.style.position = 'absolute';
+        anchorElem.append(containerDiv);
+      }
+      anchorElementRef.current = containerDiv;
+      rootElement.setAttribute('aria-controls', 'slash-menu');
+    }
+  }, [editor, resolution, className, anchorElem]);
+  useEffect(() => {
+    const rootElement_0 = editor.getRootElement();
+    if (resolution !== null) {
+      positionMenu();
+      return () => {
+        if (rootElement_0 !== null) {
+          rootElement_0.removeAttribute('aria-controls');
+        }
+        const containerDiv_0 = anchorElementRef.current;
+        if (containerDiv_0 !== null && containerDiv_0.isConnected) {
+          containerDiv_0.remove();
+        }
+      };
+    }
+  }, [editor, positionMenu, resolution]);
+  const onVisibilityChange = useCallback(isInView => {
+    if (resolution !== null) {
+      if (!isInView) {
+        setResolution(null);
+      }
+    }
+  }, [resolution, setResolution]);
+  useDynamicPositioning(resolution, anchorElementRef.current, positionMenu, onVisibilityChange);
+  return anchorElementRef;
 }
-
 //# sourceMappingURL=LexicalMenu.js.map