@lexical/react 0.13.0 → 0.14.0

package/LexicalContentEditable.dev.js

@@ -68,7 +68,11 @@ function ContentEditable({
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const [isEditable, setEditable] = React.useState(false);
   const ref = React.useCallback(rootElement => {
-    editor.setRootElement(rootElement);
+    // defaultView is required for a root element.
+    // In multi-window setups, the defaultView may not exist at certain points.
+    if (rootElement && rootElement.ownerDocument && rootElement.ownerDocument.defaultView) {
+      editor.setRootElement(rootElement);
+    }
   }, [editor]);
   useLayoutEffect(() => {
     setEditable(editor.isEditable());

package/LexicalContentEditable.esm.js

@@ -0,0 +1,10 @@
+/**
+ * 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 * as modDev from './LexicalContentEditable.dev.esm.js';
+import * as modProd from './LexicalContentEditable.prod.esm.js';
+const mod = process.env.NODE_ENV === 'development' ? modDev : modProd;
+export const ContentEditable = mod.ContentEditable;

package/LexicalContentEditable.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict'
-const LexicalContentEditable = process.env.NODE_ENV === 'development' ? require('./LexicalContentEditable.dev.js') : require('./LexicalContentEditable.prod.js')
+const LexicalContentEditable = process.env.NODE_ENV === 'development' ? require('./LexicalContentEditable.dev.js') : require('./LexicalContentEditable.prod.js');
 module.exports = LexicalContentEditable;

package/LexicalContentEditable.prod.esm.js

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import{useLexicalComposerContext as e}from"@lexical/react/LexicalComposerContext";import*as a from"react";import{useLayoutEffect as t,useEffect as i,useState as r,useCallback as o}from"react";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var t=arguments[a];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e},n.apply(this,arguments)}var d="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?t:i;function l({ariaActiveDescendant:t,ariaAutoComplete:i,ariaControls:l,ariaDescribedBy:c,ariaExpanded:s,ariaLabel:u,ariaLabelledBy:b,ariaMultiline:m,ariaOwns:p,ariaRequired:f,autoCapitalize:v,className:w,id:y,role:x="textbox",spellCheck:C=!0,style:E,tabIndex:h,"data-testid":L,...O}){const[g]=e(),[D,j]=r(!1),k=o((e=>{e&&e.ownerDocument&&e.ownerDocument.defaultView&&g.setRootElement(e)}),[g]);return d((()=>(j(g.isEditable()),g.registerEditableListener((e=>{j(e)})))),[g]),a.createElement("div",n({},O,{"aria-activedescendant":D?t:void 0,"aria-autocomplete":D?i:"none","aria-controls":D?l:void 0,"aria-describedby":c,"aria-expanded":D&&"combobox"===x?!!s:void 0,"aria-label":u,"aria-labelledby":b,"aria-multiline":m,"aria-owns":D?p:void 0,"aria-readonly":!D||void 0,"aria-required":f,autoCapitalize:v,className:w,contentEditable:D,"data-testid":L,id:y,ref:k,role:x,spellCheck:C,style:E,tabIndex:h}))}export{l as ContentEditable};

package/LexicalContentEditable.prod.js

@@ -4,6 +4,6 @@
  * 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 c=require("@lexical/react/LexicalComposerContext"),h=require("react");function n(){n=Object.assign?Object.assign.bind():function(g){for(var d=1;d<arguments.length;d++){var e=arguments[d],b;for(b in e)Object.prototype.hasOwnProperty.call(e,b)&&(g[b]=e[b])}return g};return n.apply(this,arguments)}var p="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?h.useLayoutEffect:h.useEffect;
-exports.ContentEditable=function({ariaActiveDescendant:g,ariaAutoComplete:d,ariaControls:e,ariaDescribedBy:b,ariaExpanded:q,ariaLabel:r,ariaLabelledBy:t,ariaMultiline:u,ariaOwns:v,ariaRequired:w,autoCapitalize:x,className:y,id:z,role:l="textbox",spellCheck:A=!0,style:B,tabIndex:C,"data-testid":D,...E}){let [f]=c.useLexicalComposerContext(),[a,m]=h.useState(!1),F=h.useCallback(k=>{f.setRootElement(k)},[f]);p(()=>{m(f.isEditable());return f.registerEditableListener(k=>{m(k)})},[f]);return h.createElement("div",
-n({},E,{"aria-activedescendant":a?g:void 0,"aria-autocomplete":a?d:"none","aria-controls":a?e:void 0,"aria-describedby":b,"aria-expanded":a?"combobox"===l?!!q:void 0:void 0,"aria-label":r,"aria-labelledby":t,"aria-multiline":u,"aria-owns":a?v:void 0,"aria-readonly":a?void 0:!0,"aria-required":w,autoCapitalize:x,className:y,contentEditable:a,"data-testid":D,id:z,ref:F,role:l,spellCheck:A,style:B,tabIndex:C}))}
+'use strict';var d=require("@lexical/react/LexicalComposerContext"),k=require("react");function n(){n=Object.assign?Object.assign.bind():function(h){for(var e=1;e<arguments.length;e++){var f=arguments[e],b;for(b in f)Object.prototype.hasOwnProperty.call(f,b)&&(h[b]=f[b])}return h};return n.apply(this,arguments)}var p="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?k.useLayoutEffect:k.useEffect;
+exports.ContentEditable=function({ariaActiveDescendant:h,ariaAutoComplete:e,ariaControls:f,ariaDescribedBy:b,ariaExpanded:q,ariaLabel:r,ariaLabelledBy:t,ariaMultiline:u,ariaOwns:v,ariaRequired:w,autoCapitalize:x,className:y,id:z,role:l="textbox",spellCheck:A=!0,style:B,tabIndex:C,"data-testid":D,...E}){let [g]=d.useLexicalComposerContext(),[a,m]=k.useState(!1),F=k.useCallback(c=>{c&&c.ownerDocument&&c.ownerDocument.defaultView&&g.setRootElement(c)},[g]);p(()=>{m(g.isEditable());return g.registerEditableListener(c=>
+{m(c)})},[g]);return k.createElement("div",n({},E,{"aria-activedescendant":a?h:void 0,"aria-autocomplete":a?e:"none","aria-controls":a?f:void 0,"aria-describedby":b,"aria-expanded":a?"combobox"===l?!!q:void 0:void 0,"aria-label":r,"aria-labelledby":t,"aria-multiline":u,"aria-owns":a?v:void 0,"aria-readonly":a?void 0:!0,"aria-required":w,autoCapitalize:x,className:y,contentEditable:a,"data-testid":D,id:z,ref:F,role:l,spellCheck:A,style:B,tabIndex:C}))}

package/LexicalContextMenuPlugin.dev.esm.js

@@ -0,0 +1,455 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { createCommand, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND, KEY_ENTER_COMMAND, COMMAND_PRIORITY_LOW, $getSelection, $isRangeSelection } from 'lexical';
+import * as React from 'react';
+import { useLayoutEffect as useLayoutEffect$1, useEffect, useState, useCallback, useMemo, useRef } from 'react';
+import { mergeRegister } from '@lexical/utils';
+
+/**
+ * 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 CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+
+/**
+ * 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 useLayoutEffectImpl = CAN_USE_DOM ? useLayoutEffect$1 : useEffect;
+var useLayoutEffect = useLayoutEffectImpl;
+
+/**
+ * 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.
+ *
+ */
+class MenuOption {
+  constructor(key) {
+    this.key = key;
+    this.ref = {
+      current: null
+    };
+    this.setRefElement = this.setRefElement.bind(this);
+  }
+  setRefElement(element) {
+    this.ref = {
+      current: element
+    };
+  }
+}
+const scrollIntoViewIfNeeded = target => {
+  const typeaheadContainerNode = document.getElementById('typeahead-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.substr(-i) === entryText.substr(0, i)) {
+      triggerOffset = i;
+    }
+  }
+  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);
+  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
+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] = 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
+      });
+      resizeObserver.observe(targetElement);
+      return () => {
+        resizeObserver.unobserve(targetElement);
+        window.removeEventListener('resize', onReposition);
+        document.removeEventListener('scroll', handleScroll, true);
+      };
+    }
+  }, [targetElement, editor, onVisibilityChange, onReposition, resolution]);
+}
+const SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND = createCommand('SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND');
+function LexicalMenu({
+  close,
+  editor,
+  anchorElementRef,
+  resolution,
+  options,
+  menuRenderFn,
+  onSelectOption,
+  shouldSplitNodeWithQuery = false,
+  commandPriority = COMMAND_PRIORITY_LOW
+}) {
+  const [selectedIndex, setHighlightedIndex] = useState(null);
+  const matchingString = resolution.match && resolution.match.matchingString;
+  useEffect(() => {
+    setHighlightedIndex(0);
+  }, [matchingString]);
+  const selectOptionAndCleanUp = useCallback(selectedEntry => {
+    editor.update(() => {
+      const textNodeContainingQuery = resolution.match != null && shouldSplitNodeWithQuery ? $splitNodeContainingQuery(resolution.match) : null;
+      onSelectOption(selectedEntry, textNodeContainingQuery, close, resolution.match ? resolution.match.matchingString : '');
+    });
+  }, [editor, shouldSplitNodeWithQuery, resolution.match, onSelectOption, close]);
+  const updateSelectedIndex = useCallback(index => {
+    const rootElem = editor.getRootElement();
+    if (rootElem !== null) {
+      rootElem.setAttribute('aria-activedescendant', 'typeahead-item-' + index);
+      setHighlightedIndex(index);
+    }
+  }, [editor]);
+  useEffect(() => {
+    return () => {
+      const rootElem = editor.getRootElement();
+      if (rootElem !== null) {
+        rootElem.removeAttribute('aria-activedescendant');
+      }
+    };
+  }, [editor]);
+  useLayoutEffect(() => {
+    if (options === null) {
+      setHighlightedIndex(null);
+    } else if (selectedIndex === null) {
+      updateSelectedIndex(0);
+    }
+  }, [options, selectedIndex, updateSelectedIndex]);
+  useEffect(() => {
+    return 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;
+    }, commandPriority));
+  }, [editor, updateSelectedIndex, commandPriority]);
+  useEffect(() => {
+    return mergeRegister(editor.registerCommand(KEY_ARROW_DOWN_COMMAND, payload => {
+      const event = payload;
+      if (options !== null && options.length && selectedIndex !== null) {
+        const newSelectedIndex = selectedIndex !== options.length - 1 ? selectedIndex + 1 : 0;
+        updateSelectedIndex(newSelectedIndex);
+        const option = options[newSelectedIndex];
+        if (option.ref != null && option.ref.current) {
+          editor.dispatchCommand(SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND, {
+            index: newSelectedIndex,
+            option
+          });
+        }
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+      return true;
+    }, commandPriority), editor.registerCommand(KEY_ARROW_UP_COMMAND, payload => {
+      const event = payload;
+      if (options !== null && options.length && selectedIndex !== null) {
+        const newSelectedIndex = selectedIndex !== 0 ? selectedIndex - 1 : options.length - 1;
+        updateSelectedIndex(newSelectedIndex);
+        const option = options[newSelectedIndex];
+        if (option.ref != null && option.ref.current) {
+          scrollIntoViewIfNeeded(option.ref.current);
+        }
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+      return true;
+    }, commandPriority), editor.registerCommand(KEY_ESCAPE_COMMAND, payload => {
+      const event = payload;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      close();
+      return true;
+    }, commandPriority), editor.registerCommand(KEY_TAB_COMMAND, payload => {
+      const event = payload;
+      if (options === null || selectedIndex === null || options[selectedIndex] == null) {
+        return false;
+      }
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      selectOptionAndCleanUp(options[selectedIndex]);
+      return true;
+    }, commandPriority), editor.registerCommand(KEY_ENTER_COMMAND, event => {
+      if (options === null || selectedIndex === null || options[selectedIndex] == null) {
+        return false;
+      }
+      if (event !== null) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+      selectOptionAndCleanUp(options[selectedIndex]);
+      return true;
+    }, commandPriority));
+  }, [selectOptionAndCleanUp, close, editor, options, selectedIndex, updateSelectedIndex, commandPriority]);
+  const listItemProps = useMemo(() => ({
+    options,
+    selectOptionAndCleanUp,
+    selectedIndex,
+    setHighlightedIndex
+  }), [selectOptionAndCleanUp, selectedIndex, options]);
+  return menuRenderFn(anchorElementRef, listItemProps, resolution.match ? resolution.match.matchingString : '');
+}
+function useMenuAnchorRef(resolution, setResolution, className, parent = document.body) {
+  const [editor] = useLexicalComposerContext();
+  const anchorElementRef = useRef(document.createElement('div'));
+  const positionMenu = useCallback(() => {
+    anchorElementRef.current.style.top = anchorElementRef.current.style.bottom;
+    const rootElement = editor.getRootElement();
+    const containerDiv = anchorElementRef.current;
+    const menuEle = containerDiv.firstChild;
+    if (rootElement !== null && resolution !== null) {
+      const {
+        left,
+        top,
+        width,
+        height
+      } = resolution.getRect();
+      const anchorHeight = anchorElementRef.current.offsetHeight; // use to position under anchor
+      containerDiv.style.top = `${top + window.pageYOffset + anchorHeight + 3}px`;
+      containerDiv.style.left = `${left + window.pageXOffset}px`;
+      containerDiv.style.height = `${height}px`;
+      containerDiv.style.width = `${width}px`;
+      if (menuEle !== null) {
+        menuEle.style.top = `${top}`;
+        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.pageXOffset}px`;
+        }
+        if ((top + menuHeight > window.innerHeight || top + menuHeight > rootElementRect.bottom) && top - rootElementRect.top > menuHeight) {
+          containerDiv.style.top = `${top - menuHeight + window.pageYOffset - height}px`;
+        }
+      }
+      if (!containerDiv.isConnected) {
+        if (className != null) {
+          containerDiv.className = className;
+        }
+        containerDiv.setAttribute('aria-label', 'Typeahead menu');
+        containerDiv.setAttribute('id', 'typeahead-menu');
+        containerDiv.setAttribute('role', 'listbox');
+        containerDiv.style.display = 'block';
+        containerDiv.style.position = 'absolute';
+        parent.append(containerDiv);
+      }
+      anchorElementRef.current = containerDiv;
+      rootElement.setAttribute('aria-controls', 'typeahead-menu');
+    }
+  }, [editor, resolution, className, parent]);
+  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();
+        }
+      };
+    }
+  }, [editor, positionMenu, resolution]);
+  const onVisibilityChange = useCallback(isInView => {
+    if (resolution !== null) {
+      if (!isInView) {
+        setResolution(null);
+      }
+    }
+  }, [resolution, setResolution]);
+  useDynamicPositioning(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 PRE_PORTAL_DIV_SIZE = 1;
+function LexicalContextMenuPlugin({
+  options,
+  onClose,
+  onOpen,
+  onSelectOption,
+  menuRenderFn: contextMenuRenderFn,
+  anchorClassName,
+  commandPriority = COMMAND_PRIORITY_LOW,
+  parent
+}) {
+  const [editor] = useLexicalComposerContext();
+  const [resolution, setResolution] = useState(null);
+  const menuRef = React.useRef(null);
+  const anchorElementRef = useMenuAnchorRef(resolution, setResolution, anchorClassName, parent);
+  const closeNodeMenu = useCallback(() => {
+    setResolution(null);
+    if (onClose != null && resolution !== null) {
+      onClose();
+    }
+  }, [onClose, resolution]);
+  const openNodeMenu = useCallback(res => {
+    setResolution(res);
+    if (onOpen != null && resolution === null) {
+      onOpen(res);
+    }
+  }, [onOpen, resolution]);
+  const handleContextMenu = useCallback(event => {
+    event.preventDefault();
+    openNodeMenu({
+      getRect: () => new DOMRect(event.clientX, event.clientY, PRE_PORTAL_DIV_SIZE, PRE_PORTAL_DIV_SIZE)
+    });
+  }, [openNodeMenu]);
+  const handleClick = useCallback(event => {
+    if (resolution !== null && menuRef.current != null && event.target != null && !menuRef.current.contains(event.target)) {
+      closeNodeMenu();
+    }
+  }, [closeNodeMenu, resolution]);
+  useEffect(() => {
+    const editorElement = editor.getRootElement();
+    if (editorElement) {
+      editorElement.addEventListener('contextmenu', handleContextMenu);
+      return () => editorElement.removeEventListener('contextmenu', handleContextMenu);
+    }
+  }, [editor, handleContextMenu]);
+  useEffect(() => {
+    document.addEventListener('click', handleClick);
+    return () => document.removeEventListener('click', handleClick);
+  }, [editor, handleClick]);
+  return resolution === null || editor === null ? null : /*#__PURE__*/React.createElement(LexicalMenu, {
+    close: closeNodeMenu,
+    resolution: resolution,
+    editor: editor,
+    anchorElementRef: anchorElementRef,
+    options: options,
+    menuRenderFn: (anchorRef, itemProps) => contextMenuRenderFn(anchorRef, itemProps, {
+      setMenuRef: ref => {
+        menuRef.current = ref;
+      }
+    }),
+    onSelectOption: onSelectOption,
+    commandPriority: commandPriority
+  });
+}
+
+export { LexicalContextMenuPlugin, MenuOption };

package/LexicalContextMenuPlugin.dev.js

@@ -54,7 +54,9 @@ class MenuOption {
 }
 const scrollIntoViewIfNeeded = target => {
   const typeaheadContainerNode = document.getElementById('typeahead-menu');
-  if (!typeaheadContainerNode) return;
+  if (!typeaheadContainerNode) {
+    return;
+  }
   const typeaheadRect = typeaheadContainerNode.getBoundingClientRect();
   if (typeaheadRect.top + typeaheadRect.height > window.innerHeight) {
     typeaheadContainerNode.scrollIntoView({

package/LexicalContextMenuPlugin.esm.js

@@ -0,0 +1,11 @@
+/**
+ * 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 * as modDev from './LexicalContextMenuPlugin.dev.esm.js';
+import * as modProd from './LexicalContextMenuPlugin.prod.esm.js';
+const mod = process.env.NODE_ENV === 'development' ? modDev : modProd;
+export const LexicalContextMenuPlugin = mod.LexicalContextMenuPlugin;
+export const MenuOption = mod.MenuOption;

package/LexicalContextMenuPlugin.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict'
-const LexicalContextMenuPlugin = process.env.NODE_ENV === 'development' ? require('./LexicalContextMenuPlugin.dev.js') : require('./LexicalContextMenuPlugin.prod.js')
+const LexicalContextMenuPlugin = process.env.NODE_ENV === 'development' ? require('./LexicalContextMenuPlugin.dev.js') : require('./LexicalContextMenuPlugin.prod.js');
 module.exports = LexicalContextMenuPlugin;

package/LexicalContextMenuPlugin.prod.esm.js

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{createCommand as e,KEY_ARROW_DOWN_COMMAND as n,KEY_ARROW_UP_COMMAND as o,KEY_ESCAPE_COMMAND as l,KEY_TAB_COMMAND as r,KEY_ENTER_COMMAND as i,COMMAND_PRIORITY_LOW as u,$getSelection as c,$isRangeSelection as s}from"lexical";import*as a from"react";import{useLayoutEffect as m,useEffect as d,useState as p,useCallback as f,useMemo as g,useRef as h}from"react";import{mergeRegister as w}from"@lexical/utils";var v="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?m:d;class y{constructor(t){this.key=t,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(t){this.ref={current:t}}}const b=t=>{const e=document.getElementById("typeahead-menu");if(!e)return;const n=e.getBoundingClientRect();n.top+n.height>window.innerHeight&&e.scrollIntoView({block:"center"}),n.top<0&&e.scrollIntoView({block:"center"}),t.scrollIntoView({block:"nearest"})};function E(t,e){const n=t.getBoundingClientRect(),o=e.getBoundingClientRect();return n.top>o.top&&n.top<o.bottom}function C(e,n,o,l){const[r]=t();d((()=>{if(null!=n&&null!=e){const t=r.getRootElement(),e=null!=t?function(t,e){let n=getComputedStyle(t);const o="absolute"===n.position,l=e?/(auto|scroll|hidden)/:/(auto|scroll)/;if("fixed"===n.position)return document.body;for(let e=t;e=e.parentElement;)if(n=getComputedStyle(e),(!o||"static"!==n.position)&&l.test(n.overflow+n.overflowY+n.overflowX))return e;return document.body}(t,!1):document.body;let i=!1,u=E(n,e);const c=function(){i||(window.requestAnimationFrame((function(){o(),i=!1})),i=!0);const t=E(n,e);t!==u&&(u=t,null!=l&&l(t))},s=new ResizeObserver(o);return window.addEventListener("resize",o),document.addEventListener("scroll",c,{capture:!0,passive:!0}),s.observe(n),()=>{s.unobserve(n),window.removeEventListener("resize",o),document.removeEventListener("scroll",c,!0)}}}),[n,r,l,o,e])}const R=e("SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND");function x({close:t,editor:e,anchorElementRef:a,resolution:m,options:h,menuRenderFn:y,onSelectOption:E,shouldSplitNodeWithQuery:C=!1,commandPriority:x=u}){const[O,I]=p(null),S=m.match&&m.match.matchingString;d((()=>{I(0)}),[S]);const A=f((n=>{e.update((()=>{const e=null!=m.match&&C?function(t){const e=c();if(!s(e)||!e.isCollapsed())return null;const n=e.anchor;if("text"!==n.type)return null;const o=n.getNode();if(!o.isSimpleText())return null;const l=n.offset,r=o.getTextContent().slice(0,l),i=t.replaceableString.length,u=l-function(t,e,n){let o=n;for(let n=o;n<=e.length;n++)t.substr(-n)===e.substr(0,n)&&(o=n);return o}(r,t.matchingString,i);if(u<0)return null;let a;return 0===u?[a]=o.splitText(l):[,a]=o.splitText(u,l),a}(m.match):null;E(n,e,t,m.match?m.match.matchingString:"")}))}),[e,C,m.match,E,t]),L=f((t=>{const n=e.getRootElement();null!==n&&(n.setAttribute("aria-activedescendant","typeahead-item-"+t),I(t))}),[e]);d((()=>()=>{const t=e.getRootElement();null!==t&&t.removeAttribute("aria-activedescendant")}),[e]),v((()=>{null===h?I(null):null===O&&L(0)}),[h,O,L]),d((()=>w(e.registerCommand(R,(({option:t})=>!(!t.ref||null==t.ref.current)&&(b(t.ref.current),!0)),x))),[e,L,x]),d((()=>w(e.registerCommand(n,(t=>{const n=t;if(null!==h&&h.length&&null!==O){const t=O!==h.length-1?O+1:0;L(t);const o=h[t];null!=o.ref&&o.ref.current&&e.dispatchCommand(R,{index:t,option:o}),n.preventDefault(),n.stopImmediatePropagation()}return!0}),x),e.registerCommand(o,(t=>{const e=t;if(null!==h&&h.length&&null!==O){const t=0!==O?O-1:h.length-1;L(t);const n=h[t];null!=n.ref&&n.ref.current&&b(n.ref.current),e.preventDefault(),e.stopImmediatePropagation()}return!0}),x),e.registerCommand(l,(e=>{const n=e;return n.preventDefault(),n.stopImmediatePropagation(),t(),!0}),x),e.registerCommand(r,(t=>{const e=t;return null!==h&&null!==O&&null!=h[O]&&(e.preventDefault(),e.stopImmediatePropagation(),A(h[O]),!0)}),x),e.registerCommand(i,(t=>null!==h&&null!==O&&null!=h[O]&&(null!==t&&(t.preventDefault(),t.stopImmediatePropagation()),A(h[O]),!0)),x))),[A,t,e,h,O,L,x]);return y(a,g((()=>({options:h,selectOptionAndCleanUp:A,selectedIndex:O,setHighlightedIndex:I})),[A,O,h]),m.match?m.match.matchingString:"")}function O({options:e,onClose:n,onOpen:o,onSelectOption:l,menuRenderFn:r,anchorClassName:i,commandPriority:c=u,parent:s}){const[m]=t(),[g,w]=p(null),v=a.useRef(null),y=function(e,n,o,l=document.body){const[r]=t(),i=h(document.createElement("div")),u=f((()=>{i.current.style.top=i.current.style.bottom;const t=r.getRootElement(),n=i.current,u=n.firstChild;if(null!==t&&null!==e){const{left:r,top:c,width:s,height:a}=e.getRect(),m=i.current.offsetHeight;if(n.style.top=`${c+window.pageYOffset+m+3}px`,n.style.left=`${r+window.pageXOffset}px`,n.style.height=`${a}px`,n.style.width=`${s}px`,null!==u){u.style.top=`${c}`;const e=u.getBoundingClientRect(),o=e.height,l=e.width,i=t.getBoundingClientRect();r+l>i.right&&(n.style.left=`${i.right-l+window.pageXOffset}px`),(c+o>window.innerHeight||c+o>i.bottom)&&c-i.top>o&&(n.style.top=c-o+window.pageYOffset-a+"px")}n.isConnected||(null!=o&&(n.className=o),n.setAttribute("aria-label","Typeahead menu"),n.setAttribute("id","typeahead-menu"),n.setAttribute("role","listbox"),n.style.display="block",n.style.position="absolute",l.append(n)),i.current=n,t.setAttribute("aria-controls","typeahead-menu")}}),[r,e,o,l]);d((()=>{const t=r.getRootElement();if(null!==e)return u(),()=>{null!==t&&t.removeAttribute("aria-controls");const e=i.current;null!==e&&e.isConnected&&e.remove()}}),[r,u,e]);const c=f((t=>{null!==e&&(t||n(null))}),[e,n]);return C(e,i.current,u,c),i}(g,w,i,s),b=f((()=>{w(null),null!=n&&null!==g&&n()}),[n,g]),E=f((t=>{w(t),null!=o&&null===g&&o(t)}),[o,g]),R=f((t=>{t.preventDefault(),E({getRect:()=>new DOMRect(t.clientX,t.clientY,1,1)})}),[E]),O=f((t=>{null===g||null==v.current||null==t.target||v.current.contains(t.target)||b()}),[b,g]);return d((()=>{const t=m.getRootElement();if(t)return t.addEventListener("contextmenu",R),()=>t.removeEventListener("contextmenu",R)}),[m,R]),d((()=>(document.addEventListener("click",O),()=>document.removeEventListener("click",O))),[m,O]),null===g||null===m?null:a.createElement(x,{close:b,resolution:g,editor:m,anchorElementRef:y,options:e,menuRenderFn:(t,e)=>r(t,e,{setMenuRef:t=>{v.current=t}}),onSelectOption:l,commandPriority:c})}export{O as LexicalContextMenuPlugin,y as MenuOption};

package/LexicalDecoratorBlockNode.dev.esm.js

@@ -0,0 +1,46 @@
+/**
+ * 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 { DecoratorNode } from 'lexical';
+
+/**
+ * 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.
+ *
+ */
+class DecoratorBlockNode extends DecoratorNode {
+  constructor(format, key) {
+    super(key);
+    this.__format = format || '';
+  }
+  exportJSON() {
+    return {
+      format: this.__format || '',
+      type: 'decorator-block',
+      version: 1
+    };
+  }
+  createDOM() {
+    return document.createElement('div');
+  }
+  updateDOM() {
+    return false;
+  }
+  setFormat(format) {
+    const self = this.getWritable();
+    self.__format = format;
+  }
+  isInline() {
+    return false;
+  }
+}
+function $isDecoratorBlockNode(node) {
+  return node instanceof DecoratorBlockNode;
+}
+
+export { $isDecoratorBlockNode, DecoratorBlockNode };

package/LexicalDecoratorBlockNode.esm.js

@@ -0,0 +1,11 @@
+/**
+ * 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 * as modDev from './LexicalDecoratorBlockNode.dev.esm.js';
+import * as modProd from './LexicalDecoratorBlockNode.prod.esm.js';
+const mod = process.env.NODE_ENV === 'development' ? modDev : modProd;
+export const $isDecoratorBlockNode = mod.$isDecoratorBlockNode;
+export const DecoratorBlockNode = mod.DecoratorBlockNode;

package/LexicalDecoratorBlockNode.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict'
-const LexicalDecoratorBlockNode = process.env.NODE_ENV === 'development' ? require('./LexicalDecoratorBlockNode.dev.js') : require('./LexicalDecoratorBlockNode.prod.js')
+const LexicalDecoratorBlockNode = process.env.NODE_ENV === 'development' ? require('./LexicalDecoratorBlockNode.dev.js') : require('./LexicalDecoratorBlockNode.prod.js');
 module.exports = LexicalDecoratorBlockNode;

package/LexicalDecoratorBlockNode.prod.esm.js

@@ -0,0 +1,7 @@
+/**
+ * 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{DecoratorNode as t}from"lexical";class r extends t{constructor(t,r){super(r),this.__format=t||""}exportJSON(){return{format:this.__format||"",type:"decorator-block",version:1}}createDOM(){return document.createElement("div")}updateDOM(){return!1}setFormat(t){this.getWritable().__format=t}isInline(){return!1}}function e(t){return t instanceof r}export{e as $isDecoratorBlockNode,r as DecoratorBlockNode};