@depup/lexical__react 0.41.0-depup.0 → 0.42.0-depup.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/LexicalAutoEmbedPlugin.d.ts +2 -2
  2. package/LexicalAutoEmbedPlugin.js.flow +4 -4
  3. package/LexicalDecoratorBlockNode.d.ts +2 -0
  4. package/LexicalDecoratorBlockNode.dev.js +7 -0
  5. package/LexicalDecoratorBlockNode.dev.mjs +7 -0
  6. package/LexicalDecoratorBlockNode.prod.js +1 -1
  7. package/LexicalDecoratorBlockNode.prod.mjs +1 -1
  8. package/LexicalDraggableBlockPlugin.dev.js +2 -4
  9. package/LexicalDraggableBlockPlugin.dev.mjs +2 -4
  10. package/LexicalDraggableBlockPlugin.prod.js +1 -1
  11. package/LexicalDraggableBlockPlugin.prod.mjs +1 -1
  12. package/LexicalExtensionComposer.d.ts +1 -1
  13. package/LexicalExtensionEditorComposer.d.ts +20 -0
  14. package/LexicalExtensionEditorComposer.dev.js +55 -0
  15. package/LexicalExtensionEditorComposer.dev.mjs +53 -0
  16. package/LexicalExtensionEditorComposer.js +11 -0
  17. package/LexicalExtensionEditorComposer.js.flow +27 -0
  18. package/{LexicalContextMenuPlugin.mjs → LexicalExtensionEditorComposer.mjs} +3 -4
  19. package/{LexicalContextMenuPlugin.node.mjs → LexicalExtensionEditorComposer.node.mjs} +2 -3
  20. package/LexicalExtensionEditorComposer.prod.js +9 -0
  21. package/LexicalExtensionEditorComposer.prod.mjs +9 -0
  22. package/LexicalHorizontalRulePlugin.d.ts +3 -0
  23. package/LexicalHorizontalRulePlugin.dev.js +4 -0
  24. package/LexicalHorizontalRulePlugin.dev.mjs +4 -0
  25. package/LexicalMarkdownShortcutPlugin.dev.js +4 -4
  26. package/LexicalMarkdownShortcutPlugin.dev.mjs +1 -1
  27. package/LexicalMarkdownShortcutPlugin.prod.js +1 -1
  28. package/LexicalMarkdownShortcutPlugin.prod.mjs +1 -1
  29. package/LexicalNodeContextMenuPlugin.dev.js +2 -4
  30. package/LexicalNodeContextMenuPlugin.dev.mjs +2 -4
  31. package/LexicalNodeContextMenuPlugin.prod.js +1 -1
  32. package/LexicalNodeContextMenuPlugin.prod.mjs +1 -1
  33. package/LexicalNodeEventPlugin.dev.js +2 -4
  34. package/LexicalNodeEventPlugin.dev.mjs +2 -4
  35. package/LexicalNodeEventPlugin.prod.js +1 -1
  36. package/LexicalNodeEventPlugin.prod.mjs +1 -1
  37. package/LexicalNodeMenuPlugin.d.ts +1 -1
  38. package/LexicalNodeMenuPlugin.dev.js +53 -2
  39. package/LexicalNodeMenuPlugin.dev.mjs +54 -3
  40. package/LexicalNodeMenuPlugin.js.flow +3 -2
  41. package/LexicalNodeMenuPlugin.prod.js +1 -1
  42. package/LexicalNodeMenuPlugin.prod.mjs +1 -1
  43. package/LexicalReactPluginHostExtension.dev.mjs +1 -1
  44. package/LexicalReactPluginHostExtension.prod.mjs +1 -1
  45. package/LexicalSelectionAlwaysOnDisplay.d.ts +1 -1
  46. package/LexicalTablePlugin.d.ts +1 -7
  47. package/LexicalTablePlugin.dev.js +2 -5
  48. package/LexicalTablePlugin.dev.mjs +2 -5
  49. package/LexicalTablePlugin.prod.js +1 -1
  50. package/LexicalTablePlugin.prod.mjs +1 -1
  51. package/LexicalTypeaheadMenuPlugin.d.ts +1 -1
  52. package/LexicalTypeaheadMenuPlugin.dev.js +53 -2
  53. package/LexicalTypeaheadMenuPlugin.dev.mjs +54 -3
  54. package/LexicalTypeaheadMenuPlugin.js.flow +8 -7
  55. package/LexicalTypeaheadMenuPlugin.prod.js +1 -1
  56. package/LexicalTypeaheadMenuPlugin.prod.mjs +1 -1
  57. package/README.md +2 -2
  58. package/changes.json +1 -1
  59. package/package.json +50 -50
  60. package/shared/LexicalMenu.d.ts +5 -4
  61. package/useExtensionComponent.d.ts +2 -0
  62. package/useLexicalExtensionComponent.dev.js +8 -0
  63. package/useLexicalExtensionComponent.dev.mjs +8 -2
  64. package/useLexicalExtensionComponent.mjs +3 -1
  65. package/useLexicalExtensionComponent.node.mjs +3 -1
  66. package/useLexicalExtensionComponent.prod.js +1 -1
  67. package/useLexicalExtensionComponent.prod.mjs +1 -1
  68. package/LexicalContextMenuPlugin.d.ts +0 -42
  69. package/LexicalContextMenuPlugin.dev.js +0 -526
  70. package/LexicalContextMenuPlugin.dev.mjs +0 -511
  71. package/LexicalContextMenuPlugin.js +0 -11
  72. package/LexicalContextMenuPlugin.js.flow +0 -13
  73. package/LexicalContextMenuPlugin.prod.js +0 -9
  74. package/LexicalContextMenuPlugin.prod.mjs +0 -9
@@ -6,4 +6,4 @@
6
6
  *
7
7
  */
8
8
 
9
- import{useFloating as e,autoUpdate as t,offset as n,flip as s,shift as i,useRole as l,useDismiss as o,useListNavigation as r,useTypeahead as a,useInteractions as c,FloatingPortal as m,FloatingOverlay as d,FloatingFocusManager as h}from"@floating-ui/react";import{useLexicalComposerContext as p}from"@lexical/react/LexicalComposerContext";import{$getNearestNodeFromDOMNode as u}from"lexical";import{forwardRef as f,useState as y,useRef as x,useEffect as g,createElement as b}from"react";import{jsx as k,jsxs as $}from"react/jsx-runtime";class w{key;ref;constructor(e){this.key=e,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(e){this.ref={current:e}}}class N extends w{type;title;icon;disabled;$onSelect;$showOn;constructor(e,t){super(e),this.type="item",this.title=e,this.disabled=t.disabled??!1,this.icon=t.icon??null,this.$onSelect=t.$onSelect,t.$showOn&&(this.$showOn=t.$showOn)}}class O extends w{type;$showOn;constructor(e){super("_separator"),this.type="separator",e&&e.$showOn&&(this.$showOn=e.$showOn)}}const C=f(({className:e,disabled:t,...n},s)=>k("hr",{className:e})),v=f(({className:e,label:t,disabled:n,icon:s,...i},l)=>$("button",{...i,className:e,ref:l,role:"menuitem",disabled:n,children:[s,t]})),R=f(({items:f,className:$,itemClassName:w,separatorClassName:N},O)=>{const[R]=p(),[E,S]=y(null),[I,L]=y(!1),P=x([]),F=x([]),{refs:M,floatingStyles:X,context:Y}=e({middleware:[n({alignmentAxis:4,mainAxis:5}),s({fallbackPlacements:["left-start"]}),i({padding:10})],onOpenChange:L,open:I,placement:"right-start",strategy:"fixed",whileElementsMounted:t}),A=l(Y,{role:"menu"}),j=o(Y),B=r(Y,{activeIndex:E,listRef:P,onNavigate:S}),D=a(Y,{activeIndex:E,enabled:I,listRef:F,onMatch:S}),{getFloatingProps:U,getItemProps:_}=c([A,j,B,D]),[q,z]=y([]);return g(()=>{function e(e){e.preventDefault(),M.setPositionReference({getBoundingClientRect:()=>({bottom:e.clientY,height:0,left:e.clientX,right:e.clientX,top:e.clientY,width:0,x:e.clientX,y:e.clientY})});let t=[];f&&R.read(()=>{const n=u(e.target);n&&(t=f.filter(e=>!e.$showOn||e.$showOn(n)))});const n=t.map((e,t)=>"separator"===e.type?{className:N,key:e.key+"-"+t,type:e.type}:{className:w,disabled:e.disabled,icon:e.icon,key:e.key,label:e.title,onClick:()=>R.update(()=>e.$onSelect()),title:e.title,type:e.type});F.current=n.map(e=>e.key),z(n),L(!0)}return R.registerRootListener((t,n)=>{null!==n&&n.removeEventListener("contextmenu",e),null!==t&&t.addEventListener("contextmenu",e)})},[f,w,N,M,R]),k(m,{children:I&&k(d,{lockScroll:!0,children:k(h,{context:Y,initialFocus:M.floating,children:k("div",{className:$,ref:M.setFloating,style:X,...U(),children:q.map((e,t)=>"item"===e.type?b(v,{..._({...e,onClick(){e.onClick(),L(!1)},onMouseUp(){e.onClick(),L(!1)},ref(e){P.current[t]=e},tabIndex:E===t?0:-1}),key:e.key}):"separator"===e.type?b(C,{..._({...e,ref(e){P.current[t]=e},tabIndex:E===t?0:-1}),key:e.key}):void 0)})})})})});export{N as NodeContextMenuOption,R as NodeContextMenuPlugin,O as NodeContextMenuSeparator};
9
+ import{useFloating as e,autoUpdate as t,offset as n,flip as s,shift as i,useRole as l,useDismiss as o,useListNavigation as r,useTypeahead as a,useInteractions as c,FloatingPortal as m,FloatingOverlay as d,FloatingFocusManager as h}from"@floating-ui/react";import{useLexicalComposerContext as p}from"@lexical/react/LexicalComposerContext";import{$getNearestNodeFromDOMNode as u}from"lexical";import{forwardRef as f,useState as y,useRef as x,useEffect as g,createElement as b}from"react";import{jsx as k,jsxs as $}from"react/jsx-runtime";class w{key;ref;constructor(e){this.key=e,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(e){this.ref={current:e}}}class N extends w{type;title;icon;disabled;$onSelect;$showOn;constructor(e,t){super(e),this.type="item",this.title=e,this.disabled=t.disabled??!1,this.icon=t.icon??null,this.$onSelect=t.$onSelect,t.$showOn&&(this.$showOn=t.$showOn)}}class O extends w{type;$showOn;constructor(e){super("_separator"),this.type="separator",e&&e.$showOn&&(this.$showOn=e.$showOn)}}const C=f(({className:e,disabled:t,...n},s)=>k("hr",{className:e})),v=f(({className:e,label:t,disabled:n,icon:s,...i},l)=>$("button",{...i,className:e,ref:l,role:"menuitem",disabled:n,children:[s,t]})),R=f(({items:f,className:$,itemClassName:w,separatorClassName:N},O)=>{const[R]=p(),[E,S]=y(null),[I,L]=y(!1),P=x([]),F=x([]),{refs:M,floatingStyles:X,context:Y}=e({middleware:[n({alignmentAxis:4,mainAxis:5}),s({fallbackPlacements:["left-start"]}),i({padding:10})],onOpenChange:L,open:I,placement:"right-start",strategy:"fixed",whileElementsMounted:t}),A=l(Y,{role:"menu"}),j=o(Y),B=r(Y,{activeIndex:E,listRef:P,onNavigate:S}),D=a(Y,{activeIndex:E,enabled:I,listRef:F,onMatch:S}),{getFloatingProps:U,getItemProps:_}=c([A,j,B,D]),[q,z]=y([]);return g(()=>{function e(e){e.preventDefault(),M.setPositionReference({getBoundingClientRect:()=>({bottom:e.clientY,height:0,left:e.clientX,right:e.clientX,top:e.clientY,width:0,x:e.clientX,y:e.clientY})});let t=[];f&&R.read(()=>{const n=u(e.target);n&&(t=f.filter(e=>!e.$showOn||e.$showOn(n)))});const n=t.map((e,t)=>"separator"===e.type?{className:N,key:e.key+"-"+t,type:e.type}:{className:w,disabled:e.disabled,icon:e.icon,key:e.key,label:e.title,onClick:()=>R.update(()=>e.$onSelect()),title:e.title,type:e.type});F.current=n.map(e=>e.key),z(n),L(!0)}return R.registerRootListener(t=>{if(null!==t)return t.addEventListener("contextmenu",e),()=>t.removeEventListener("contextmenu",e)})},[f,w,N,M,R]),k(m,{children:I&&k(d,{lockScroll:!0,children:k(h,{context:Y,initialFocus:M.floating,children:k("div",{className:$,ref:M.setFloating,style:X,...U(),children:q.map((e,t)=>"item"===e.type?b(v,{..._({...e,onClick(){e.onClick(),L(!1)},onMouseUp(){e.onClick(),L(!1)},ref(e){P.current[t]=e},tabIndex:E===t?0:-1}),key:e.key}):"separator"===e.type?b(C,{..._({...e,ref(e){P.current[t]=e},tabIndex:E===t?0:-1}),key:e.key}):void 0)})})})})});export{N as NodeContextMenuOption,R as NodeContextMenuPlugin,O as NodeContextMenuSeparator};
@@ -44,12 +44,10 @@ function NodeEventPlugin({
44
44
  }
45
45
  });
46
46
  };
47
- return editor.registerRootListener((rootElement, prevRootElement) => {
47
+ return editor.registerRootListener(rootElement => {
48
48
  if (rootElement) {
49
49
  rootElement.addEventListener(eventType, onEvent, isCaptured);
50
- }
51
- if (prevRootElement) {
52
- prevRootElement.removeEventListener(eventType, onEvent, isCaptured);
50
+ return () => rootElement.removeEventListener(eventType, onEvent, isCaptured);
53
51
  }
54
52
  });
55
53
  // We intentionally don't respect changes to eventType.
@@ -42,12 +42,10 @@ function NodeEventPlugin({
42
42
  }
43
43
  });
44
44
  };
45
- return editor.registerRootListener((rootElement, prevRootElement) => {
45
+ return editor.registerRootListener(rootElement => {
46
46
  if (rootElement) {
47
47
  rootElement.addEventListener(eventType, onEvent, isCaptured);
48
- }
49
- if (prevRootElement) {
50
- prevRootElement.removeEventListener(eventType, onEvent, isCaptured);
48
+ return () => rootElement.removeEventListener(eventType, onEvent, isCaptured);
51
49
  }
52
50
  });
53
51
  // We intentionally don't respect changes to eventType.
@@ -6,4 +6,4 @@
6
6
  *
7
7
  */
8
8
 
9
- "use strict";var e=require("@lexical/react/LexicalComposerContext"),t=require("@lexical/utils"),n=require("lexical"),r=require("react");const o=new Set(["mouseenter","mouseleave"]);exports.NodeEventPlugin=function({nodeType:i,eventType:s,eventListener:u}){const[c]=e.useLexicalComposerContext(),l=r.useRef(u);return l.current=u,r.useEffect(()=>{const e=o.has(s),r=r=>{c.update(()=>{const o=n.$getNearestNodeFromDOMNode(r.target);if(null!==o){const n=e?o instanceof i?o:null:t.$findMatchingParent(o,e=>e instanceof i);if(null!==n)return void l.current(r,c,n.getKey())}})};return c.registerRootListener((t,n)=>{t&&t.addEventListener(s,r,e),n&&n.removeEventListener(s,r,e)})},[c,i]),null};
9
+ "use strict";var e=require("@lexical/react/LexicalComposerContext"),t=require("@lexical/utils"),n=require("lexical"),r=require("react");const i=new Set(["mouseenter","mouseleave"]);exports.NodeEventPlugin=function({nodeType:o,eventType:s,eventListener:u}){const[c]=e.useLexicalComposerContext(),l=r.useRef(u);return l.current=u,r.useEffect(()=>{const e=i.has(s),r=r=>{c.update(()=>{const i=n.$getNearestNodeFromDOMNode(r.target);if(null!==i){const n=e?i instanceof o?i:null:t.$findMatchingParent(i,e=>e instanceof o);if(null!==n)return void l.current(r,c,n.getKey())}})};return c.registerRootListener(t=>{if(t)return t.addEventListener(s,r,e),()=>t.removeEventListener(s,r,e)})},[c,o]),null};
@@ -6,4 +6,4 @@
6
6
  *
7
7
  */
8
8
 
9
- import{useLexicalComposerContext as e}from"@lexical/react/LexicalComposerContext";import{$findMatchingParent as t}from"@lexical/utils";import{$getNearestNodeFromDOMNode as n}from"lexical";import{useRef as r,useEffect as o}from"react";const i=new Set(["mouseenter","mouseleave"]);function l({nodeType:l,eventType:s,eventListener:c}){const[u]=e(),a=r(c);return a.current=c,o(()=>{const e=i.has(s),r=r=>{u.update(()=>{const o=n(r.target);if(null!==o){const n=e?o instanceof l?o:null:t(o,e=>e instanceof l);if(null!==n)return void a.current(r,u,n.getKey())}})};return u.registerRootListener((t,n)=>{t&&t.addEventListener(s,r,e),n&&n.removeEventListener(s,r,e)})},[u,l]),null}export{l as NodeEventPlugin};
9
+ import{useLexicalComposerContext as e}from"@lexical/react/LexicalComposerContext";import{$findMatchingParent as t}from"@lexical/utils";import{$getNearestNodeFromDOMNode as n}from"lexical";import{useRef as r,useEffect as o}from"react";const i=new Set(["mouseenter","mouseleave"]);function l({nodeType:l,eventType:s,eventListener:c}){const[u]=e(),a=r(c);return a.current=c,o(()=>{const e=i.has(s),r=r=>{u.update(()=>{const o=n(r.target);if(null!==o){const n=e?o instanceof l?o:null:t(o,e=>e instanceof l);if(null!==n)return void a.current(r,u,n.getKey())}})};return u.registerRootListener(t=>{if(t)return t.addEventListener(s,r,e),()=>t.removeEventListener(s,r,e)})},[u,l]),null}export{l as NodeEventPlugin};
@@ -13,9 +13,9 @@ export type NodeMenuPluginProps<TOption extends MenuOption> = {
13
13
  onSelectOption: (option: TOption, textNodeContainingQuery: TextNode | null, closeMenu: () => void, matchingString: string) => void;
14
14
  options: Array<TOption>;
15
15
  nodeKey: NodeKey | null;
16
+ menuRenderFn?: MenuRenderFn<TOption>;
16
17
  onClose?: () => void;
17
18
  onOpen?: (resolution: MenuResolution) => void;
18
- menuRenderFn: MenuRenderFn<TOption>;
19
19
  anchorClassName?: string;
20
20
  commandPriority?: CommandListenerPriority;
21
21
  parent?: HTMLElement;
@@ -12,6 +12,7 @@ var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
12
12
  var lexical = require('lexical');
13
13
  var React = require('react');
14
14
  var utils = require('@lexical/utils');
15
+ var ReactDOM = require('react-dom');
15
16
  var jsxRuntime = require('react/jsx-runtime');
16
17
 
17
18
  /**
@@ -70,6 +71,8 @@ const useLayoutEffectImpl = CAN_USE_DOM ? React.useLayoutEffect : React.useEffec
70
71
  class MenuOption {
71
72
  key;
72
73
  ref;
74
+ icon;
75
+ title;
73
76
  constructor(key) {
74
77
  this.key = key;
75
78
  this.ref = {
@@ -219,13 +222,39 @@ function useDynamicPositioning(resolution, targetElement, onReposition, onVisibi
219
222
  }, [targetElement, editor, onVisibilityChange, onReposition, resolution]);
220
223
  }
221
224
  const SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND = lexical.createCommand('SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND');
225
+ function MenuItem({
226
+ index,
227
+ isSelected,
228
+ onClick,
229
+ onMouseEnter,
230
+ option
231
+ }) {
232
+ let className = 'item';
233
+ if (isSelected) {
234
+ className += ' selected';
235
+ }
236
+ return /*#__PURE__*/jsxRuntime.jsxs("li", {
237
+ tabIndex: -1,
238
+ className: className,
239
+ ref: option.setRefElement,
240
+ role: "option",
241
+ "aria-selected": isSelected,
242
+ id: 'typeahead-item-' + index,
243
+ onMouseEnter: onMouseEnter,
244
+ onClick: onClick,
245
+ children: [option.icon, /*#__PURE__*/jsxRuntime.jsx("span", {
246
+ className: "text",
247
+ children: option.title
248
+ })]
249
+ }, option.key);
250
+ }
222
251
  function LexicalMenu({
223
252
  close,
224
253
  editor,
225
254
  anchorElementRef,
226
255
  resolution,
227
256
  options,
228
- menuRenderFn,
257
+ menuRenderFn: menuRenderFnProp,
229
258
  onSelectOption,
230
259
  shouldSplitNodeWithQuery = false,
231
260
  commandPriority = lexical.COMMAND_PRIORITY_LOW,
@@ -253,6 +282,25 @@ function LexicalMenu({
253
282
  setHighlightedIndex(index);
254
283
  }
255
284
  }, [editor]);
285
+ const defaultMenuRenderFn = React.useCallback(() => {
286
+ return anchorElementRef.current && options.length ? /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/jsxRuntime.jsx("div", {
287
+ className: "typeahead-popover mentions-menu",
288
+ children: /*#__PURE__*/jsxRuntime.jsx("ul", {
289
+ children: options.map((option, i) => /*#__PURE__*/jsxRuntime.jsx(MenuItem, {
290
+ index: i,
291
+ isSelected: selectedIndex === i,
292
+ onClick: () => {
293
+ setHighlightedIndex(i);
294
+ selectOptionAndCleanUp(option);
295
+ },
296
+ onMouseEnter: () => {
297
+ setHighlightedIndex(i);
298
+ },
299
+ option: option
300
+ }, option.key))
301
+ })
302
+ }), anchorElementRef.current) : null;
303
+ }, [anchorElementRef, options, selectedIndex, selectOptionAndCleanUp, setHighlightedIndex]);
256
304
  React.useEffect(() => {
257
305
  return () => {
258
306
  const rootElem = editor.getRootElement();
@@ -354,7 +402,10 @@ function LexicalMenu({
354
402
  selectedIndex,
355
403
  setHighlightedIndex
356
404
  }), [selectOptionAndCleanUp, selectedIndex, options]);
357
- return menuRenderFn(anchorElementRef, listItemProps, resolution.match ? resolution.match.matchingString : '');
405
+ if (menuRenderFnProp != null) {
406
+ return menuRenderFnProp(anchorElementRef, listItemProps, resolution.match ? resolution.match.matchingString : '');
407
+ }
408
+ return defaultMenuRenderFn();
358
409
  }
359
410
  function setContainerDivAttributes(containerDiv, className) {
360
411
  if (className != null) {
@@ -10,7 +10,8 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
10
10
  import { createCommand, COMMAND_PRIORITY_LOW, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND, KEY_ENTER_COMMAND, $getSelection, $isRangeSelection, $getNodeByKey } from 'lexical';
11
11
  import React, { useLayoutEffect, useEffect, useRef, useCallback, useState, useMemo } from 'react';
12
12
  import { mergeRegister } from '@lexical/utils';
13
- import { jsx } from 'react/jsx-runtime';
13
+ import ReactDOM from 'react-dom';
14
+ import { jsx, jsxs } from 'react/jsx-runtime';
14
15
 
15
16
  /**
16
17
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -68,6 +69,8 @@ const useLayoutEffectImpl = CAN_USE_DOM ? useLayoutEffect : useEffect;
68
69
  class MenuOption {
69
70
  key;
70
71
  ref;
72
+ icon;
73
+ title;
71
74
  constructor(key) {
72
75
  this.key = key;
73
76
  this.ref = {
@@ -217,13 +220,39 @@ function useDynamicPositioning(resolution, targetElement, onReposition, onVisibi
217
220
  }, [targetElement, editor, onVisibilityChange, onReposition, resolution]);
218
221
  }
219
222
  const SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND = createCommand('SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND');
223
+ function MenuItem({
224
+ index,
225
+ isSelected,
226
+ onClick,
227
+ onMouseEnter,
228
+ option
229
+ }) {
230
+ let className = 'item';
231
+ if (isSelected) {
232
+ className += ' selected';
233
+ }
234
+ return /*#__PURE__*/jsxs("li", {
235
+ tabIndex: -1,
236
+ className: className,
237
+ ref: option.setRefElement,
238
+ role: "option",
239
+ "aria-selected": isSelected,
240
+ id: 'typeahead-item-' + index,
241
+ onMouseEnter: onMouseEnter,
242
+ onClick: onClick,
243
+ children: [option.icon, /*#__PURE__*/jsx("span", {
244
+ className: "text",
245
+ children: option.title
246
+ })]
247
+ }, option.key);
248
+ }
220
249
  function LexicalMenu({
221
250
  close,
222
251
  editor,
223
252
  anchorElementRef,
224
253
  resolution,
225
254
  options,
226
- menuRenderFn,
255
+ menuRenderFn: menuRenderFnProp,
227
256
  onSelectOption,
228
257
  shouldSplitNodeWithQuery = false,
229
258
  commandPriority = COMMAND_PRIORITY_LOW,
@@ -251,6 +280,25 @@ function LexicalMenu({
251
280
  setHighlightedIndex(index);
252
281
  }
253
282
  }, [editor]);
283
+ const defaultMenuRenderFn = useCallback(() => {
284
+ return anchorElementRef.current && options.length ? /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/jsx("div", {
285
+ className: "typeahead-popover mentions-menu",
286
+ children: /*#__PURE__*/jsx("ul", {
287
+ children: options.map((option, i) => /*#__PURE__*/jsx(MenuItem, {
288
+ index: i,
289
+ isSelected: selectedIndex === i,
290
+ onClick: () => {
291
+ setHighlightedIndex(i);
292
+ selectOptionAndCleanUp(option);
293
+ },
294
+ onMouseEnter: () => {
295
+ setHighlightedIndex(i);
296
+ },
297
+ option: option
298
+ }, option.key))
299
+ })
300
+ }), anchorElementRef.current) : null;
301
+ }, [anchorElementRef, options, selectedIndex, selectOptionAndCleanUp, setHighlightedIndex]);
254
302
  useEffect(() => {
255
303
  return () => {
256
304
  const rootElem = editor.getRootElement();
@@ -352,7 +400,10 @@ function LexicalMenu({
352
400
  selectedIndex,
353
401
  setHighlightedIndex
354
402
  }), [selectOptionAndCleanUp, selectedIndex, options]);
355
- return menuRenderFn(anchorElementRef, listItemProps, resolution.match ? resolution.match.matchingString : '');
403
+ if (menuRenderFnProp != null) {
404
+ return menuRenderFnProp(anchorElementRef, listItemProps, resolution.match ? resolution.match.matchingString : '');
405
+ }
406
+ return defaultMenuRenderFn();
356
407
  }
357
408
  function setContainerDivAttributes(containerDiv, className) {
358
409
  if (className != null) {
@@ -24,6 +24,7 @@ export type MenuResolution = {
24
24
  declare export class MenuOption {
25
25
  key: string;
26
26
  ref: {current: HTMLElement | null};
27
+ title: string;
27
28
  constructor(key: string): void;
28
29
  setRefElement(element: HTMLElement | null): void;
29
30
  }
@@ -37,7 +38,7 @@ export type MenuRenderFn<TOption> = (
37
38
  options: Array<TOption>,
38
39
  },
39
40
  matchingString: string,
40
- ) => React.Portal | React.MixedElement | null;
41
+ ) => React$Portal | React.MixedElement | null;
41
42
 
42
43
  export type TriggerFn = (
43
44
  text: string,
@@ -53,9 +54,9 @@ type NodeMenuPluginProps<TOption> = {
53
54
  ) => void,
54
55
  options: Array<TOption>,
55
56
  nodeKey: NodeKey | null,
57
+ menuRenderFn?: MenuRenderFn<TOption>,
56
58
  onClose?: () => void,
57
59
  onOpen?: (resolution: MenuResolution) => void,
58
- menuRenderFn: MenuRenderFn<TOption>,
59
60
  anchorClassName?: string,
60
61
  };
61
62
 
@@ -6,4 +6,4 @@
6
6
  *
7
7
  */
8
8
 
9
- "use strict";var e=require("@lexical/react/LexicalComposerContext"),t=require("lexical"),n=require("react"),o=require("@lexical/utils"),l=require("react/jsx-runtime");const r="startTransition";const i="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,u=i?n.useLayoutEffect:n.useEffect;const s=e=>{const t=document.getElementById("typeahead-menu");if(!t)return;const n=t.getBoundingClientRect();n.top+n.height>window.innerHeight&&t.scrollIntoView({block:"center"}),n.top<0&&t.scrollIntoView({block:"center"}),e.scrollIntoView({block:"nearest"})};function c(e,t){const n=e.getBoundingClientRect(),o=t.getBoundingClientRect();return n.top>=o.top-6&&n.top<=o.bottom+6}function a(t,o,l,r){const[i]=e.useLexicalComposerContext();n.useEffect(()=>{if(null!=o&&null!=t){const e=i.getRootElement(),t=null!=e?function(e){let t=getComputedStyle(e);const n="absolute"===t.position,o=/(auto|scroll)/;if("fixed"===t.position)return document.body;for(let l=e;l=l.parentElement;)if(t=getComputedStyle(l),(!n||"static"!==t.position)&&o.test(t.overflow+t.overflowY+t.overflowX))return l;return document.body}(e):document.body;let n=!1,u=c(o,t);const s=function(){n||(window.requestAnimationFrame(function(){l(),n=!1}),n=!0);const e=c(o,t);e!==u&&(u=e,null!=r&&r(e))},a=new ResizeObserver(l);return window.addEventListener("resize",l),document.addEventListener("scroll",s,{capture:!0,passive:!0}),a.observe(o),()=>{a.unobserve(o),window.removeEventListener("resize",l),document.removeEventListener("scroll",s,!0)}}},[o,i,r,l,t])}const d=t.createCommand("SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND");function m({close:e,editor:l,anchorElementRef:r,resolution:i,options:c,menuRenderFn:a,onSelectOption:m,shouldSplitNodeWithQuery:f=!1,commandPriority:p=t.COMMAND_PRIORITY_LOW,preselectFirstItem:g=!0}){const[h,C]=n.useState(null),E=null!==h?Math.min(c.length-1,h):null,y=i.match&&i.match.matchingString;n.useEffect(()=>{g&&C(0)},[y,g]);const b=n.useCallback(n=>{l.update(()=>{const o=null!=i.match&&f?function(e){const n=t.$getSelection();if(!t.$isRangeSelection(n)||!n.isCollapsed())return null;const o=n.anchor;if("text"!==o.type)return null;const l=o.getNode();if(!l.isSimpleText())return null;const r=o.offset,i=l.getTextContent().slice(0,r),u=e.replaceableString.length,s=r-function(e,t,n){let o=n;for(let n=o;n<=t.length;n++)e.slice(-n)===t.substring(0,n)&&(o=n);return o}(i,e.matchingString,u);if(s<0)return null;let c;return 0===s?[c]=l.splitText(r):[,c]=l.splitText(s,r),c}(i.match):null;m(n,o,e,i.match?i.match.matchingString:"")})},[l,f,i.match,m,e]),R=n.useCallback(e=>{const t=l.getRootElement();null!==t&&(t.setAttribute("aria-activedescendant","typeahead-item-"+e),C(e))},[l]);n.useEffect(()=>()=>{const e=l.getRootElement();null!==e&&e.removeAttribute("aria-activedescendant")},[l]),u(()=>{null===c?C(null):null===E&&g&&R(0)},[c,E,R,g]),n.useEffect(()=>o.mergeRegister(l.registerCommand(d,({option:e})=>!(!e.ref||null==e.ref.current)&&(s(e.ref.current),!0),p)),[l,R,p]),n.useEffect(()=>o.mergeRegister(l.registerCommand(t.KEY_ARROW_DOWN_COMMAND,e=>{const t=e;if(null!==c&&c.length){const e=null===E?0:E!==c.length-1?E+1:0;R(e);const n=c[e];if(!n)return R(-1),t.preventDefault(),t.stopImmediatePropagation(),!0;n.ref&&n.ref.current&&l.dispatchCommand(d,{index:e,option:n}),t.preventDefault(),t.stopImmediatePropagation()}return!0},p),l.registerCommand(t.KEY_ARROW_UP_COMMAND,e=>{const t=e;if(null!==c&&c.length){const e=null===E?c.length-1:0!==E?E-1:c.length-1;R(e);const n=c[e];if(!n)return R(-1),t.preventDefault(),t.stopImmediatePropagation(),!0;n.ref&&n.ref.current&&s(n.ref.current),t.preventDefault(),t.stopImmediatePropagation()}return!0},p),l.registerCommand(t.KEY_ESCAPE_COMMAND,t=>{const n=t;return n.preventDefault(),n.stopImmediatePropagation(),e(),!0},p),l.registerCommand(t.KEY_TAB_COMMAND,e=>{const t=e;return null!==c&&null!==E&&null!=c[E]&&(t.preventDefault(),t.stopImmediatePropagation(),b(c[E]),!0)},p),l.registerCommand(t.KEY_ENTER_COMMAND,e=>null!==c&&null!==E&&null!=c[E]&&(null!==e&&(e.preventDefault(),e.stopImmediatePropagation()),b(c[E]),!0),p)),[b,e,l,c,E,R,p]);return a(r,n.useMemo(()=>({options:c,selectOptionAndCleanUp:b,selectedIndex:E,setHighlightedIndex:C}),[b,E,c]),i.match?i.match.matchingString:"")}function f(e,t){null!=t&&(e.className=t),e.setAttribute("aria-label","Typeahead menu"),e.setAttribute("role","listbox"),e.style.display="block",e.style.position="absolute"}exports.LexicalNodeMenuPlugin=function({options:o,nodeKey:u,onClose:s,onOpen:c,onSelectOption:d,menuRenderFn:p,anchorClassName:g,commandPriority:h=t.COMMAND_PRIORITY_LOW,parent:C}){const[E]=e.useLexicalComposerContext(),[y,b]=n.useState(null),R=function(t,o,l,r=(i?document.body:void 0),u=!0){const[s]=e.useLexicalComposerContext(),c=i?document.createElement("div"):null,d=n.useRef(c),m=n.useCallback(()=>{if(null===d.current||void 0===r)return;d.current.style.top=d.current.style.bottom;const e=s.getRootElement(),n=d.current,o=n.firstChild;if(null!==e&&null!==t){const{left:i,top:s,width:c,height:a}=t.getRect(),m=d.current.offsetHeight;if(n.style.top=`${s+m+3+(u?window.pageYOffset:0)}px`,n.style.left=`${i+window.pageXOffset}px`,n.style.height=`${a}px`,n.style.width=`${c}px`,null!==o){o.style.top=`${s}`;const t=o.getBoundingClientRect(),l=t.height,r=t.width,c=e.getBoundingClientRect();i+r>c.right&&(n.style.left=`${c.right-r+window.pageXOffset}px`),(s+l>window.innerHeight||s+l>c.bottom)&&s-c.top>l+a&&(n.style.top=`${s-l-a+(u?window.pageYOffset:0)}px`)}n.isConnected||(f(n,l),r.append(n)),n.setAttribute("id","typeahead-menu"),e.setAttribute("aria-controls","typeahead-menu")}},[s,t,u,l,r]);n.useEffect(()=>{const e=s.getRootElement();return null!==t&&m(),()=>{null!==e&&e.removeAttribute("aria-controls");const t=d.current;null!==t&&t.isConnected&&(t.remove(),t.removeAttribute("id"))}},[s,m,t]);const p=n.useCallback(e=>{null!==t&&(e||o(null))},[t,o]);return a(t,d.current,m,p),null!=c&&c===d.current&&(f(c,l),null!=r&&r.append(c)),d}(y,b,g,C),w=n.useCallback(()=>{b(null),null!=s&&null!==y&&s()},[s,y]),v=n.useCallback(e=>{b(e),null!=c&&null===y&&c(e)},[c,y]),x=n.useCallback(()=>{u?E.update(()=>{const e=t.$getNodeByKey(u),o=E.getElementByKey(u);var l;null!=e&&null!=o&&null==y&&(l=()=>v({getRect:()=>o.getBoundingClientRect()}),r in n?n[r](l):l())}):null==u&&null!=y&&w()},[w,E,u,v,y]);return n.useEffect(()=>{x()},[x,u]),n.useEffect(()=>{if(null!=u)return E.registerUpdateListener(({dirtyElements:e})=>{e.get(u)&&x()})},[E,x,u]),null===R.current||null===y||null===E?null:l.jsx(m,{close:w,resolution:y,editor:E,anchorElementRef:R,options:o,menuRenderFn:p,onSelectOption:d,commandPriority:h})},exports.MenuOption=class{key;ref;constructor(e){this.key=e,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(e){this.ref={current:e}}};
9
+ "use strict";var e=require("@lexical/react/LexicalComposerContext"),t=require("lexical"),n=require("react"),l=require("@lexical/utils"),o=require("react-dom"),r=require("react/jsx-runtime");const i="startTransition";const s="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,u=s?n.useLayoutEffect:n.useEffect;const c=e=>{const t=document.getElementById("typeahead-menu");if(!t)return;const n=t.getBoundingClientRect();n.top+n.height>window.innerHeight&&t.scrollIntoView({block:"center"}),n.top<0&&t.scrollIntoView({block:"center"}),e.scrollIntoView({block:"nearest"})};function a(e,t){const n=e.getBoundingClientRect(),l=t.getBoundingClientRect();return n.top>=l.top-6&&n.top<=l.bottom+6}function d(t,l,o,r){const[i]=e.useLexicalComposerContext();n.useEffect(()=>{if(null!=l&&null!=t){const e=i.getRootElement(),t=null!=e?function(e){let t=getComputedStyle(e);const n="absolute"===t.position,l=/(auto|scroll)/;if("fixed"===t.position)return document.body;for(let o=e;o=o.parentElement;)if(t=getComputedStyle(o),(!n||"static"!==t.position)&&l.test(t.overflow+t.overflowY+t.overflowX))return o;return document.body}(e):document.body;let n=!1,s=a(l,t);const u=function(){n||(window.requestAnimationFrame(function(){o(),n=!1}),n=!0);const e=a(l,t);e!==s&&(s=e,null!=r&&r(e))},c=new ResizeObserver(o);return window.addEventListener("resize",o),document.addEventListener("scroll",u,{capture:!0,passive:!0}),c.observe(l),()=>{c.unobserve(l),window.removeEventListener("resize",o),document.removeEventListener("scroll",u,!0)}}},[l,i,r,o,t])}const m=t.createCommand("SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND");function p({index:e,isSelected:t,onClick:n,onMouseEnter:l,option:o}){let i="item";return t&&(i+=" selected"),r.jsxs("li",{tabIndex:-1,className:i,ref:o.setRefElement,role:"option","aria-selected":t,id:"typeahead-item-"+e,onMouseEnter:l,onClick:n,children:[o.icon,r.jsx("span",{className:"text",children:o.title})]},o.key)}function f({close:e,editor:i,anchorElementRef:s,resolution:a,options:d,menuRenderFn:f,onSelectOption:g,shouldSplitNodeWithQuery:h=!1,commandPriority:C=t.COMMAND_PRIORITY_LOW,preselectFirstItem:E=!0}){const[y,x]=n.useState(null),b=null!==y?Math.min(d.length-1,y):null,R=a.match&&a.match.matchingString;n.useEffect(()=>{E&&x(0)},[R,E]);const v=n.useCallback(n=>{i.update(()=>{const l=null!=a.match&&h?function(e){const n=t.$getSelection();if(!t.$isRangeSelection(n)||!n.isCollapsed())return null;const l=n.anchor;if("text"!==l.type)return null;const o=l.getNode();if(!o.isSimpleText())return null;const r=l.offset,i=o.getTextContent().slice(0,r),s=e.replaceableString.length,u=r-function(e,t,n){let l=n;for(let n=l;n<=t.length;n++)e.slice(-n)===t.substring(0,n)&&(l=n);return l}(i,e.matchingString,s);if(u<0)return null;let c;return 0===u?[c]=o.splitText(r):[,c]=o.splitText(u,r),c}(a.match):null;g(n,l,e,a.match?a.match.matchingString:"")})},[i,h,a.match,g,e]),w=n.useCallback(e=>{const t=i.getRootElement();null!==t&&(t.setAttribute("aria-activedescendant","typeahead-item-"+e),x(e))},[i]),O=n.useCallback(()=>s.current&&d.length?o.createPortal(r.jsx("div",{className:"typeahead-popover mentions-menu",children:r.jsx("ul",{children:d.map((e,t)=>r.jsx(p,{index:t,isSelected:b===t,onClick:()=>{x(t),v(e)},onMouseEnter:()=>{x(t)},option:e},e.key))})}),s.current):null,[s,d,b,v,x]);n.useEffect(()=>()=>{const e=i.getRootElement();null!==e&&e.removeAttribute("aria-activedescendant")},[i]),u(()=>{null===d?x(null):null===b&&E&&w(0)},[d,b,w,E]),n.useEffect(()=>l.mergeRegister(i.registerCommand(m,({option:e})=>!(!e.ref||null==e.ref.current)&&(c(e.ref.current),!0),C)),[i,w,C]),n.useEffect(()=>l.mergeRegister(i.registerCommand(t.KEY_ARROW_DOWN_COMMAND,e=>{const t=e;if(null!==d&&d.length){const e=null===b?0:b!==d.length-1?b+1:0;w(e);const n=d[e];if(!n)return w(-1),t.preventDefault(),t.stopImmediatePropagation(),!0;n.ref&&n.ref.current&&i.dispatchCommand(m,{index:e,option:n}),t.preventDefault(),t.stopImmediatePropagation()}return!0},C),i.registerCommand(t.KEY_ARROW_UP_COMMAND,e=>{const t=e;if(null!==d&&d.length){const e=null===b?d.length-1:0!==b?b-1:d.length-1;w(e);const n=d[e];if(!n)return w(-1),t.preventDefault(),t.stopImmediatePropagation(),!0;n.ref&&n.ref.current&&c(n.ref.current),t.preventDefault(),t.stopImmediatePropagation()}return!0},C),i.registerCommand(t.KEY_ESCAPE_COMMAND,t=>{const n=t;return n.preventDefault(),n.stopImmediatePropagation(),e(),!0},C),i.registerCommand(t.KEY_TAB_COMMAND,e=>{const t=e;return null!==d&&null!==b&&null!=d[b]&&(t.preventDefault(),t.stopImmediatePropagation(),v(d[b]),!0)},C),i.registerCommand(t.KEY_ENTER_COMMAND,e=>null!==d&&null!==b&&null!=d[b]&&(null!==e&&(e.preventDefault(),e.stopImmediatePropagation()),v(d[b]),!0),C)),[v,e,i,d,b,w,C]);const A=n.useMemo(()=>({options:d,selectOptionAndCleanUp:v,selectedIndex:b,setHighlightedIndex:x}),[v,b,d]);return null!=f?f(s,A,a.match?a.match.matchingString:""):O()}function g(e,t){null!=t&&(e.className=t),e.setAttribute("aria-label","Typeahead menu"),e.setAttribute("role","listbox"),e.style.display="block",e.style.position="absolute"}exports.LexicalNodeMenuPlugin=function({options:l,nodeKey:o,onClose:u,onOpen:c,onSelectOption:a,menuRenderFn:m,anchorClassName:p,commandPriority:h=t.COMMAND_PRIORITY_LOW,parent:C}){const[E]=e.useLexicalComposerContext(),[y,x]=n.useState(null),b=function(t,l,o,r=(s?document.body:void 0),i=!0){const[u]=e.useLexicalComposerContext(),c=s?document.createElement("div"):null,a=n.useRef(c),m=n.useCallback(()=>{if(null===a.current||void 0===r)return;a.current.style.top=a.current.style.bottom;const e=u.getRootElement(),n=a.current,l=n.firstChild;if(null!==e&&null!==t){const{left:s,top:u,width:c,height:d}=t.getRect(),m=a.current.offsetHeight;if(n.style.top=`${u+m+3+(i?window.pageYOffset:0)}px`,n.style.left=`${s+window.pageXOffset}px`,n.style.height=`${d}px`,n.style.width=`${c}px`,null!==l){l.style.top=`${u}`;const t=l.getBoundingClientRect(),o=t.height,r=t.width,c=e.getBoundingClientRect();s+r>c.right&&(n.style.left=`${c.right-r+window.pageXOffset}px`),(u+o>window.innerHeight||u+o>c.bottom)&&u-c.top>o+d&&(n.style.top=`${u-o-d+(i?window.pageYOffset:0)}px`)}n.isConnected||(g(n,o),r.append(n)),n.setAttribute("id","typeahead-menu"),e.setAttribute("aria-controls","typeahead-menu")}},[u,t,i,o,r]);n.useEffect(()=>{const e=u.getRootElement();return null!==t&&m(),()=>{null!==e&&e.removeAttribute("aria-controls");const t=a.current;null!==t&&t.isConnected&&(t.remove(),t.removeAttribute("id"))}},[u,m,t]);const p=n.useCallback(e=>{null!==t&&(e||l(null))},[t,l]);return d(t,a.current,m,p),null!=c&&c===a.current&&(g(c,o),null!=r&&r.append(c)),a}(y,x,p,C),R=n.useCallback(()=>{x(null),null!=u&&null!==y&&u()},[u,y]),v=n.useCallback(e=>{x(e),null!=c&&null===y&&c(e)},[c,y]),w=n.useCallback(()=>{o?E.update(()=>{const e=t.$getNodeByKey(o),l=E.getElementByKey(o);var r;null!=e&&null!=l&&null==y&&(r=()=>v({getRect:()=>l.getBoundingClientRect()}),i in n?n[i](r):r())}):null==o&&null!=y&&R()},[R,E,o,v,y]);return n.useEffect(()=>{w()},[w,o]),n.useEffect(()=>{if(null!=o)return E.registerUpdateListener(({dirtyElements:e})=>{e.get(o)&&w()})},[E,w,o]),null===b.current||null===y||null===E?null:r.jsx(f,{close:R,resolution:y,editor:E,anchorElementRef:b,options:l,menuRenderFn:m,onSelectOption:a,commandPriority:h})},exports.MenuOption=class{key;ref;icon;title;constructor(e){this.key=e,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(e){this.ref={current:e}}};
@@ -6,4 +6,4 @@
6
6
  *
7
7
  */
8
8
 
9
- import{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{createCommand as e,COMMAND_PRIORITY_LOW as n,KEY_ARROW_DOWN_COMMAND as o,KEY_ARROW_UP_COMMAND as l,KEY_ESCAPE_COMMAND as r,KEY_TAB_COMMAND as i,KEY_ENTER_COMMAND as u,$getSelection as s,$isRangeSelection as c,$getNodeByKey as a}from"lexical";import m,{useLayoutEffect as d,useEffect as p,useRef as f,useCallback as g,useState as h,useMemo as y}from"react";import{mergeRegister as w}from"@lexical/utils";import{jsx as v}from"react/jsx-runtime";const b="startTransition";const C="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,x=C?d:p;class E{key;ref;constructor(t){this.key=t,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(t){this.ref={current:t}}}const R=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 I(t,e){const n=t.getBoundingClientRect(),o=e.getBoundingClientRect();return n.top>=o.top-6&&n.top<=o.bottom+6}function O(e,n,o,l){const[r]=t();p(()=>{if(null!=n&&null!=e){const t=r.getRootElement(),e=null!=t?function(t){let e=getComputedStyle(t);const n="absolute"===e.position,o=/(auto|scroll)/;if("fixed"===e.position)return document.body;for(let l=t;l=l.parentElement;)if(e=getComputedStyle(l),(!n||"static"!==e.position)&&o.test(e.overflow+e.overflowY+e.overflowX))return l;return document.body}(t):document.body;let i=!1,u=I(n,e);const s=function(){i||(window.requestAnimationFrame(function(){o(),i=!1}),i=!0);const t=I(n,e);t!==u&&(u=t,null!=l&&l(t))},c=new ResizeObserver(o);return window.addEventListener("resize",o),document.addEventListener("scroll",s,{capture:!0,passive:!0}),c.observe(n),()=>{c.unobserve(n),window.removeEventListener("resize",o),document.removeEventListener("scroll",s,!0)}}},[n,r,l,o,e])}const A=e("SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND");function S({close:t,editor:e,anchorElementRef:a,resolution:m,options:d,menuRenderFn:f,onSelectOption:v,shouldSplitNodeWithQuery:b=!1,commandPriority:C=n,preselectFirstItem:E=!0}){const[I,O]=h(null),S=null!==I?Math.min(d.length-1,I):null,P=m.match&&m.match.matchingString;p(()=>{E&&O(0)},[P,E]);const D=g(n=>{e.update(()=>{const e=null!=m.match&&b?function(t){const e=s();if(!c(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.slice(-n)===e.substring(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;v(n,e,t,m.match?m.match.matchingString:"")})},[e,b,m.match,v,t]),T=g(t=>{const n=e.getRootElement();null!==n&&(n.setAttribute("aria-activedescendant","typeahead-item-"+t),O(t))},[e]);p(()=>()=>{const t=e.getRootElement();null!==t&&t.removeAttribute("aria-activedescendant")},[e]),x(()=>{null===d?O(null):null===S&&E&&T(0)},[d,S,T,E]),p(()=>w(e.registerCommand(A,({option:t})=>!(!t.ref||null==t.ref.current)&&(R(t.ref.current),!0),C)),[e,T,C]),p(()=>w(e.registerCommand(o,t=>{const n=t;if(null!==d&&d.length){const t=null===S?0:S!==d.length-1?S+1:0;T(t);const o=d[t];if(!o)return T(-1),n.preventDefault(),n.stopImmediatePropagation(),!0;o.ref&&o.ref.current&&e.dispatchCommand(A,{index:t,option:o}),n.preventDefault(),n.stopImmediatePropagation()}return!0},C),e.registerCommand(l,t=>{const e=t;if(null!==d&&d.length){const t=null===S?d.length-1:0!==S?S-1:d.length-1;T(t);const n=d[t];if(!n)return T(-1),e.preventDefault(),e.stopImmediatePropagation(),!0;n.ref&&n.ref.current&&R(n.ref.current),e.preventDefault(),e.stopImmediatePropagation()}return!0},C),e.registerCommand(r,e=>{const n=e;return n.preventDefault(),n.stopImmediatePropagation(),t(),!0},C),e.registerCommand(i,t=>{const e=t;return null!==d&&null!==S&&null!=d[S]&&(e.preventDefault(),e.stopImmediatePropagation(),D(d[S]),!0)},C),e.registerCommand(u,t=>null!==d&&null!==S&&null!=d[S]&&(null!==t&&(t.preventDefault(),t.stopImmediatePropagation()),D(d[S]),!0),C)),[D,t,e,d,S,T,C]);return f(a,y(()=>({options:d,selectOptionAndCleanUp:D,selectedIndex:S,setHighlightedIndex:O}),[D,S,d]),m.match?m.match.matchingString:"")}function P(t,e){null!=e&&(t.className=e),t.setAttribute("aria-label","Typeahead menu"),t.setAttribute("role","listbox"),t.style.display="block",t.style.position="absolute"}function D({options:e,nodeKey:o,onClose:l,onOpen:r,onSelectOption:i,menuRenderFn:u,anchorClassName:s,commandPriority:c=n,parent:d}){const[y]=t(),[w,x]=h(null),E=function(e,n,o,l=(C?document.body:void 0),r=!0){const[i]=t(),u=C?document.createElement("div"):null,s=f(u),c=g(()=>{if(null===s.current||void 0===l)return;s.current.style.top=s.current.style.bottom;const t=i.getRootElement(),n=s.current,u=n.firstChild;if(null!==t&&null!==e){const{left:i,top:c,width:a,height:m}=e.getRect(),d=s.current.offsetHeight;if(n.style.top=`${c+d+3+(r?window.pageYOffset:0)}px`,n.style.left=`${i+window.pageXOffset}px`,n.style.height=`${m}px`,n.style.width=`${a}px`,null!==u){u.style.top=`${c}`;const e=u.getBoundingClientRect(),o=e.height,l=e.width,s=t.getBoundingClientRect();i+l>s.right&&(n.style.left=`${s.right-l+window.pageXOffset}px`),(c+o>window.innerHeight||c+o>s.bottom)&&c-s.top>o+m&&(n.style.top=`${c-o-m+(r?window.pageYOffset:0)}px`)}n.isConnected||(P(n,o),l.append(n)),n.setAttribute("id","typeahead-menu"),t.setAttribute("aria-controls","typeahead-menu")}},[i,e,r,o,l]);p(()=>{const t=i.getRootElement();return null!==e&&c(),()=>{null!==t&&t.removeAttribute("aria-controls");const e=s.current;null!==e&&e.isConnected&&(e.remove(),e.removeAttribute("id"))}},[i,c,e]);const a=g(t=>{null!==e&&(t||n(null))},[e,n]);return O(e,s.current,c,a),null!=u&&u===s.current&&(P(u,o),null!=l&&l.append(u)),s}(w,x,s,d),R=g(()=>{x(null),null!=l&&null!==w&&l()},[l,w]),I=g(t=>{x(t),null!=r&&null===w&&r(t)},[r,w]),A=g(()=>{o?y.update(()=>{const t=a(o),e=y.getElementByKey(o);var n;null!=t&&null!=e&&null==w&&(n=()=>I({getRect:()=>e.getBoundingClientRect()}),b in m?m[b](n):n())}):null==o&&null!=w&&R()},[R,y,o,I,w]);return p(()=>{A()},[A,o]),p(()=>{if(null!=o)return y.registerUpdateListener(({dirtyElements:t})=>{t.get(o)&&A()})},[y,A,o]),null===E.current||null===w||null===y?null:v(S,{close:R,resolution:w,editor:y,anchorElementRef:E,options:e,menuRenderFn:u,onSelectOption:i,commandPriority:c})}export{D as LexicalNodeMenuPlugin,E as MenuOption};
9
+ import{useLexicalComposerContext as e}from"@lexical/react/LexicalComposerContext";import{createCommand as t,COMMAND_PRIORITY_LOW as n,KEY_ARROW_DOWN_COMMAND as o,KEY_ARROW_UP_COMMAND as l,KEY_ESCAPE_COMMAND as r,KEY_TAB_COMMAND as i,KEY_ENTER_COMMAND as u,$getSelection as s,$isRangeSelection as c,$getNodeByKey as a}from"lexical";import m,{useLayoutEffect as d,useEffect as p,useRef as f,useCallback as g,useState as h,useMemo as y}from"react";import{mergeRegister as v}from"@lexical/utils";import w from"react-dom";import{jsx as b,jsxs as C}from"react/jsx-runtime";const x="startTransition";const E="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,R=E?d:p;class I{key;ref;icon;title;constructor(e){this.key=e,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(e){this.ref={current:e}}}const O=e=>{const t=document.getElementById("typeahead-menu");if(!t)return;const n=t.getBoundingClientRect();n.top+n.height>window.innerHeight&&t.scrollIntoView({block:"center"}),n.top<0&&t.scrollIntoView({block:"center"}),e.scrollIntoView({block:"nearest"})};function S(e,t){const n=e.getBoundingClientRect(),o=t.getBoundingClientRect();return n.top>=o.top-6&&n.top<=o.bottom+6}function A(t,n,o,l){const[r]=e();p(()=>{if(null!=n&&null!=t){const e=r.getRootElement(),t=null!=e?function(e){let t=getComputedStyle(e);const n="absolute"===t.position,o=/(auto|scroll)/;if("fixed"===t.position)return document.body;for(let l=e;l=l.parentElement;)if(t=getComputedStyle(l),(!n||"static"!==t.position)&&o.test(t.overflow+t.overflowY+t.overflowX))return l;return document.body}(e):document.body;let i=!1,u=S(n,t);const s=function(){i||(window.requestAnimationFrame(function(){o(),i=!1}),i=!0);const e=S(n,t);e!==u&&(u=e,null!=l&&l(e))},c=new ResizeObserver(o);return window.addEventListener("resize",o),document.addEventListener("scroll",s,{capture:!0,passive:!0}),c.observe(n),()=>{c.unobserve(n),window.removeEventListener("resize",o),document.removeEventListener("scroll",s,!0)}}},[n,r,l,o,t])}const P=t("SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND");function k({index:e,isSelected:t,onClick:n,onMouseEnter:o,option:l}){let r="item";return t&&(r+=" selected"),C("li",{tabIndex:-1,className:r,ref:l.setRefElement,role:"option","aria-selected":t,id:"typeahead-item-"+e,onMouseEnter:o,onClick:n,children:[l.icon,b("span",{className:"text",children:l.title})]},l.key)}function N({close:e,editor:t,anchorElementRef:a,resolution:m,options:d,menuRenderFn:f,onSelectOption:C,shouldSplitNodeWithQuery:x=!1,commandPriority:E=n,preselectFirstItem:I=!0}){const[S,A]=h(null),N=null!==S?Math.min(d.length-1,S):null,D=m.match&&m.match.matchingString;p(()=>{I&&A(0)},[D,I]);const T=g(n=>{t.update(()=>{const t=null!=m.match&&x?function(e){const t=s();if(!c(t)||!t.isCollapsed())return null;const n=t.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=e.replaceableString.length,u=l-function(e,t,n){let o=n;for(let n=o;n<=t.length;n++)e.slice(-n)===t.substring(0,n)&&(o=n);return o}(r,e.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;C(n,t,e,m.match?m.match.matchingString:"")})},[t,x,m.match,C,e]),B=g(e=>{const n=t.getRootElement();null!==n&&(n.setAttribute("aria-activedescendant","typeahead-item-"+e),A(e))},[t]),L=g(()=>a.current&&d.length?w.createPortal(b("div",{className:"typeahead-popover mentions-menu",children:b("ul",{children:d.map((e,t)=>b(k,{index:t,isSelected:N===t,onClick:()=>{A(t),T(e)},onMouseEnter:()=>{A(t)},option:e},e.key))})}),a.current):null,[a,d,N,T,A]);p(()=>()=>{const e=t.getRootElement();null!==e&&e.removeAttribute("aria-activedescendant")},[t]),R(()=>{null===d?A(null):null===N&&I&&B(0)},[d,N,B,I]),p(()=>v(t.registerCommand(P,({option:e})=>!(!e.ref||null==e.ref.current)&&(O(e.ref.current),!0),E)),[t,B,E]),p(()=>v(t.registerCommand(o,e=>{const n=e;if(null!==d&&d.length){const e=null===N?0:N!==d.length-1?N+1:0;B(e);const o=d[e];if(!o)return B(-1),n.preventDefault(),n.stopImmediatePropagation(),!0;o.ref&&o.ref.current&&t.dispatchCommand(P,{index:e,option:o}),n.preventDefault(),n.stopImmediatePropagation()}return!0},E),t.registerCommand(l,e=>{const t=e;if(null!==d&&d.length){const e=null===N?d.length-1:0!==N?N-1:d.length-1;B(e);const n=d[e];if(!n)return B(-1),t.preventDefault(),t.stopImmediatePropagation(),!0;n.ref&&n.ref.current&&O(n.ref.current),t.preventDefault(),t.stopImmediatePropagation()}return!0},E),t.registerCommand(r,t=>{const n=t;return n.preventDefault(),n.stopImmediatePropagation(),e(),!0},E),t.registerCommand(i,e=>{const t=e;return null!==d&&null!==N&&null!=d[N]&&(t.preventDefault(),t.stopImmediatePropagation(),T(d[N]),!0)},E),t.registerCommand(u,e=>null!==d&&null!==N&&null!=d[N]&&(null!==e&&(e.preventDefault(),e.stopImmediatePropagation()),T(d[N]),!0),E)),[T,e,t,d,N,B,E]);const $=y(()=>({options:d,selectOptionAndCleanUp:T,selectedIndex:N,setHighlightedIndex:A}),[T,N,d]);return null!=f?f(a,$,m.match?m.match.matchingString:""):L()}function D(e,t){null!=t&&(e.className=t),e.setAttribute("aria-label","Typeahead menu"),e.setAttribute("role","listbox"),e.style.display="block",e.style.position="absolute"}function T({options:t,nodeKey:o,onClose:l,onOpen:r,onSelectOption:i,menuRenderFn:u,anchorClassName:s,commandPriority:c=n,parent:d}){const[y]=e(),[v,w]=h(null),C=function(t,n,o,l=(E?document.body:void 0),r=!0){const[i]=e(),u=E?document.createElement("div"):null,s=f(u),c=g(()=>{if(null===s.current||void 0===l)return;s.current.style.top=s.current.style.bottom;const e=i.getRootElement(),n=s.current,u=n.firstChild;if(null!==e&&null!==t){const{left:i,top:c,width:a,height:m}=t.getRect(),d=s.current.offsetHeight;if(n.style.top=`${c+d+3+(r?window.pageYOffset:0)}px`,n.style.left=`${i+window.pageXOffset}px`,n.style.height=`${m}px`,n.style.width=`${a}px`,null!==u){u.style.top=`${c}`;const t=u.getBoundingClientRect(),o=t.height,l=t.width,s=e.getBoundingClientRect();i+l>s.right&&(n.style.left=`${s.right-l+window.pageXOffset}px`),(c+o>window.innerHeight||c+o>s.bottom)&&c-s.top>o+m&&(n.style.top=`${c-o-m+(r?window.pageYOffset:0)}px`)}n.isConnected||(D(n,o),l.append(n)),n.setAttribute("id","typeahead-menu"),e.setAttribute("aria-controls","typeahead-menu")}},[i,t,r,o,l]);p(()=>{const e=i.getRootElement();return null!==t&&c(),()=>{null!==e&&e.removeAttribute("aria-controls");const t=s.current;null!==t&&t.isConnected&&(t.remove(),t.removeAttribute("id"))}},[i,c,t]);const a=g(e=>{null!==t&&(e||n(null))},[t,n]);return A(t,s.current,c,a),null!=u&&u===s.current&&(D(u,o),null!=l&&l.append(u)),s}(v,w,s,d),R=g(()=>{w(null),null!=l&&null!==v&&l()},[l,v]),I=g(e=>{w(e),null!=r&&null===v&&r(e)},[r,v]),O=g(()=>{o?y.update(()=>{const e=a(o),t=y.getElementByKey(o);var n;null!=e&&null!=t&&null==v&&(n=()=>I({getRect:()=>t.getBoundingClientRect()}),x in m?m[x](n):n())}):null==o&&null!=v&&R()},[R,y,o,I,v]);return p(()=>{O()},[O,o]),p(()=>{if(null!=o)return y.registerUpdateListener(({dirtyElements:e})=>{e.get(o)&&O()})},[y,O,o]),null===C.current||null===v||null===y?null:b(N,{close:R,resolution:v,editor:y,anchorElementRef:C,options:t,menuRenderFn:u,onSelectOption:i,commandPriority:c})}export{T as LexicalNodeMenuPlugin,I as MenuOption};
@@ -10,7 +10,7 @@ import { untracked, signal, getExtensionDependencyFromEditor, effect } from '@le
10
10
  import { ReactExtension } from '@lexical/react/ReactExtension';
11
11
  import { ReactProviderExtension } from '@lexical/react/ReactProviderExtension';
12
12
  import { mergeRegister } from '@lexical/utils';
13
- import { createCommand, defineExtension, configExtension, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_EDITOR } from 'lexical';
13
+ import { createCommand, defineExtension, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_EDITOR, configExtension } from 'lexical';
14
14
  import { useState, useEffect, Suspense } from 'react';
15
15
  import { createPortal } from 'react-dom';
16
16
  import { createRoot } from 'react-dom/client';
@@ -6,4 +6,4 @@
6
6
  *
7
7
  */
8
8
 
9
- import{untracked as e,signal as n,getExtensionDependencyFromEditor as t,effect as o}from"@lexical/extension";import{ReactExtension as r}from"@lexical/react/ReactExtension";import{ReactProviderExtension as i}from"@lexical/react/ReactProviderExtension";import{mergeRegister as l}from"@lexical/utils";import{createCommand as u,defineExtension as c,configExtension as a,COMMAND_PRIORITY_CRITICAL as s,COMMAND_PRIORITY_EDITOR as m}from"lexical";import{useState as p,useEffect as d,Suspense as f}from"react";import{createPortal as g}from"react-dom";import{createRoot as x}from"react-dom/client";import{jsx as h,Fragment as P}from"react/jsx-runtime";function v(e,n){const{props:o,extension:r,...i}=n,{Component:l}=t(e,r).output;C(e,{...i,element:o?h(l,{...o}):null})}function R(e,n){const{Component:t,props:o,...r}=n;C(e,{...r,element:o?h(t,{...o}):null})}function C(e,n){t(e,M).output.mountReactPlugin(n)}function _(e,n){t(e,M).output.mountReactPluginHost(n)}const E=u("REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND"),O=u("REACT_PLUGIN_HOST_MOUNT_PLUGIN_COMMAND");const M=c({build:(e,t,o)=>({mountReactPlugin:n=>{e.dispatchCommand(O,n)},mountReactPluginHost:n=>e.dispatchCommand(E,{root:x(n)}),mountedPluginsStore:n({plugins:new Map})}),dependencies:[i,a(r,{decorators:[function({context:[e]}){const{mountedPluginsStore:n}=t(e,M).output,{ErrorBoundary:i}=t(e,r).config,l=e._onError.bind(e),[{plugins:u},c]=p(()=>n.peek());d(()=>o(()=>c(n.value)),[n]);const a=[];for(const{key:e,element:n,domNode:t}of u.values()){if(!n)continue;const o=h(i,{onError:l,children:h(f,{fallback:null,children:n})},e);a.push(t?g(o,t,e):o)}return a.length>0?h(P,{children:a}):null}]})],name:"@lexical/react/ReactPluginHost",register(n,t,o){let i;const{mountedPluginsStore:u}=o.getOutput(),{Component:c}=o.getDependency(r).output;return l(()=>{i&&i.unmount(),e(()=>{u.value.plugins.clear()})},n.registerCommand(O,n=>(e(()=>{const{plugins:e}=u.value;e.set(n.key,n),u.value={plugins:e}}),!1),s),n.registerCommand(E,e=>(void 0!==i&&function(e,...n){const t=new URL("https://lexical.dev/docs/error"),o=new URLSearchParams;o.append("code",e);for(const e of n)o.append("v",e);throw t.search=o.toString(),Error(`Minified Lexical error #${e}; visit ${t.toString()} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)}(322),i=e.root,i.render(h(c,{contentEditable:null})),!0),m))}});export{O as REACT_PLUGIN_HOST_MOUNT_PLUGIN_COMMAND,E as REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND,M as ReactPluginHostExtension,v as mountReactExtensionComponent,R as mountReactPluginComponent,C as mountReactPluginElement,_ as mountReactPluginHost};
9
+ import{untracked as e,signal as n,getExtensionDependencyFromEditor as t,effect as o}from"@lexical/extension";import{ReactExtension as r}from"@lexical/react/ReactExtension";import{ReactProviderExtension as i}from"@lexical/react/ReactProviderExtension";import{mergeRegister as l}from"@lexical/utils";import{createCommand as u,defineExtension as c,COMMAND_PRIORITY_CRITICAL as a,COMMAND_PRIORITY_EDITOR as s,configExtension as m}from"lexical";import{useState as p,useEffect as d,Suspense as f}from"react";import{createPortal as g}from"react-dom";import{createRoot as x}from"react-dom/client";import{jsx as h,Fragment as P}from"react/jsx-runtime";function v(e,n){const{props:o,extension:r,...i}=n,{Component:l}=t(e,r).output;C(e,{...i,element:o?h(l,{...o}):null})}function R(e,n){const{Component:t,props:o,...r}=n;C(e,{...r,element:o?h(t,{...o}):null})}function C(e,n){t(e,M).output.mountReactPlugin(n)}function _(e,n){t(e,M).output.mountReactPluginHost(n)}const E=u("REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND"),O=u("REACT_PLUGIN_HOST_MOUNT_PLUGIN_COMMAND");const M=c({build:(e,t,o)=>({mountReactPlugin:n=>{e.dispatchCommand(O,n)},mountReactPluginHost:n=>e.dispatchCommand(E,{root:x(n)}),mountedPluginsStore:n({plugins:new Map})}),dependencies:[i,m(r,{decorators:[function({context:[e]}){const{mountedPluginsStore:n}=t(e,M).output,{ErrorBoundary:i}=t(e,r).config,l=e._onError.bind(e),[{plugins:u},c]=p(()=>n.peek());d(()=>o(()=>c(n.value)),[n]);const a=[];for(const{key:e,element:n,domNode:t}of u.values()){if(!n)continue;const o=h(i,{onError:l,children:h(f,{fallback:null,children:n})},e);a.push(t?g(o,t,e):o)}return a.length>0?h(P,{children:a}):null}]})],name:"@lexical/react/ReactPluginHost",register(n,t,o){let i;const{mountedPluginsStore:u}=o.getOutput(),{Component:c}=o.getDependency(r).output;return l(()=>{i&&i.unmount(),e(()=>{u.value.plugins.clear()})},n.registerCommand(O,n=>(e(()=>{const{plugins:e}=u.value;e.set(n.key,n),u.value={plugins:e}}),!1),a),n.registerCommand(E,e=>(void 0!==i&&function(e,...n){const t=new URL("https://lexical.dev/docs/error"),o=new URLSearchParams;o.append("code",e);for(const e of n)o.append("v",e);throw t.search=o.toString(),Error(`Minified Lexical error #${e}; visit ${t.toString()} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)}(322),i=e.root,i.render(h(c,{contentEditable:null})),!0),s))}});export{O as REACT_PLUGIN_HOST_MOUNT_PLUGIN_COMMAND,E as REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND,M as ReactPluginHostExtension,v as mountReactExtensionComponent,R as mountReactPluginComponent,C as mountReactPluginElement,_ as mountReactPluginHost};
@@ -6,7 +6,7 @@
6
6
  *
7
7
  */
8
8
  type Props = Readonly<{
9
- onReposition?: (node: Array<HTMLElement>) => void;
9
+ onReposition?: (node: readonly HTMLElement[]) => void;
10
10
  }>;
11
11
  export declare function SelectionAlwaysOnDisplay({ onReposition }: Props): null;
12
12
  export {};
@@ -30,12 +30,6 @@ export interface TablePluginProps {
30
30
  * @experimental Nested tables are not officially supported.
31
31
  */
32
32
  hasNestedTables?: boolean;
33
- /**
34
- * When `true` (default `false`), nested tables will be resized to fit the width of the parent table cell.
35
- *
36
- * @experimental Nested tables are not officially supported.
37
- */
38
- hasFitNestedTables?: boolean;
39
33
  }
40
34
  /**
41
35
  * A plugin to enable all of the features of Lexical's TableNode.
@@ -43,4 +37,4 @@ export interface TablePluginProps {
43
37
  * @param props - See type for documentation
44
38
  * @returns An element to render in your LexicalComposer
45
39
  */
46
- export declare function TablePlugin({ hasCellMerge, hasCellBackgroundColor, hasTabHandler, hasHorizontalScroll, hasNestedTables, hasFitNestedTables, }: TablePluginProps): JSX.Element | null;
40
+ export declare function TablePlugin({ hasCellMerge, hasCellBackgroundColor, hasTabHandler, hasHorizontalScroll, hasNestedTables, }: TablePluginProps): JSX.Element | null;
@@ -32,8 +32,7 @@ function TablePlugin({
32
32
  hasCellBackgroundColor = true,
33
33
  hasTabHandler = true,
34
34
  hasHorizontalScroll = false,
35
- hasNestedTables = false,
36
- hasFitNestedTables = false
35
+ hasNestedTables = false
37
36
  }) {
38
37
  const [editor] = LexicalComposerContext.useLexicalComposerContext();
39
38
  react.useEffect(() => {
@@ -46,11 +45,9 @@ function TablePlugin({
46
45
  }
47
46
  }, [editor, hasHorizontalScroll]);
48
47
  const hasNestedTablesSignal = usePropSignal(hasNestedTables);
49
- const hasFitNestedTablesSignal = usePropSignal(hasFitNestedTables);
50
48
  react.useEffect(() => table.registerTablePlugin(editor, {
51
- hasFitNestedTables: hasFitNestedTablesSignal,
52
49
  hasNestedTables: hasNestedTablesSignal
53
- }), [editor, hasNestedTablesSignal, hasFitNestedTablesSignal]);
50
+ }), [editor, hasNestedTablesSignal]);
54
51
  react.useEffect(() => table.registerTableSelectionObserver(editor, hasTabHandler), [editor, hasTabHandler]);
55
52
 
56
53
  // Unmerge cells when the feature isn't enabled
@@ -30,8 +30,7 @@ function TablePlugin({
30
30
  hasCellBackgroundColor = true,
31
31
  hasTabHandler = true,
32
32
  hasHorizontalScroll = false,
33
- hasNestedTables = false,
34
- hasFitNestedTables = false
33
+ hasNestedTables = false
35
34
  }) {
36
35
  const [editor] = useLexicalComposerContext();
37
36
  useEffect(() => {
@@ -44,11 +43,9 @@ function TablePlugin({
44
43
  }
45
44
  }, [editor, hasHorizontalScroll]);
46
45
  const hasNestedTablesSignal = usePropSignal(hasNestedTables);
47
- const hasFitNestedTablesSignal = usePropSignal(hasFitNestedTables);
48
46
  useEffect(() => registerTablePlugin(editor, {
49
- hasFitNestedTables: hasFitNestedTablesSignal,
50
47
  hasNestedTables: hasNestedTablesSignal
51
- }), [editor, hasNestedTablesSignal, hasFitNestedTablesSignal]);
48
+ }), [editor, hasNestedTablesSignal]);
52
49
  useEffect(() => registerTableSelectionObserver(editor, hasTabHandler), [editor, hasTabHandler]);
53
50
 
54
51
  // Unmerge cells when the feature isn't enabled
@@ -6,4 +6,4 @@
6
6
  *
7
7
  */
8
8
 
9
- "use strict";var e=require("@lexical/extension"),r=require("@lexical/react/LexicalComposerContext"),l=require("@lexical/table"),s=require("react");function t(r){const[l]=s.useState(()=>e.signal(r));return l.peek()!==r&&(l.value=r),l}exports.TablePlugin=function({hasCellMerge:e=!0,hasCellBackgroundColor:a=!0,hasTabHandler:o=!0,hasHorizontalScroll:n=!1,hasNestedTables:i=!1,hasFitNestedTables:c=!1}){const[u]=r.useLexicalComposerContext();s.useEffect(()=>{l.$isScrollableTablesActive(u)!==n&&(l.setScrollableTablesActive(u,n),u.registerNodeTransform(l.TableNode,()=>{})())},[u,n]);const b=t(i),f=t(c);return s.useEffect(()=>l.registerTablePlugin(u,{hasFitNestedTables:f,hasNestedTables:b}),[u,b,f]),s.useEffect(()=>l.registerTableSelectionObserver(u,o),[u,o]),s.useEffect(()=>{if(!e)return l.registerTableCellUnmergeTransform(u)},[u,e]),s.useEffect(()=>{if(!a)return u.registerNodeTransform(l.TableCellNode,e=>{null!==e.getBackgroundColor()&&e.setBackgroundColor(null)})},[u,a,e]),null};
9
+ "use strict";var e=require("@lexical/extension"),r=require("@lexical/react/LexicalComposerContext"),l=require("@lexical/table"),s=require("react");exports.TablePlugin=function({hasCellMerge:t=!0,hasCellBackgroundColor:a=!0,hasTabHandler:o=!0,hasHorizontalScroll:n=!1,hasNestedTables:i=!1}){const[c]=r.useLexicalComposerContext();s.useEffect(()=>{l.$isScrollableTablesActive(c)!==n&&(l.setScrollableTablesActive(c,n),c.registerNodeTransform(l.TableNode,()=>{})())},[c,n]);const u=function(r){const[l]=s.useState(()=>e.signal(r));l.peek()!==r&&(l.value=r);return l}(i);return s.useEffect(()=>l.registerTablePlugin(c,{hasNestedTables:u}),[c,u]),s.useEffect(()=>l.registerTableSelectionObserver(c,o),[c,o]),s.useEffect(()=>{if(!t)return l.registerTableCellUnmergeTransform(c)},[c,t]),s.useEffect(()=>{if(!a)return c.registerNodeTransform(l.TableCellNode,e=>{null!==e.getBackgroundColor()&&e.setBackgroundColor(null)})},[c,a,t]),null};
@@ -6,4 +6,4 @@
6
6
  *
7
7
  */
8
8
 
9
- import{signal as e}from"@lexical/extension";import{useLexicalComposerContext as r}from"@lexical/react/LexicalComposerContext";import{$isScrollableTablesActive as o,setScrollableTablesActive as t,TableNode as l,registerTablePlugin as a,registerTableSelectionObserver as s,registerTableCellUnmergeTransform as n,TableCellNode as i}from"@lexical/table";import{useEffect as c,useState as u}from"react";function m({hasCellMerge:e=!0,hasCellBackgroundColor:u=!0,hasTabHandler:m=!0,hasHorizontalScroll:f=!1,hasNestedTables:h=!1,hasFitNestedTables:g=!1}){const[p]=r();c(()=>{o(p)!==f&&(t(p,f),p.registerNodeTransform(l,()=>{})())},[p,f]);const x=d(h),C=d(g);return c(()=>a(p,{hasFitNestedTables:C,hasNestedTables:x}),[p,x,C]),c(()=>s(p,m),[p,m]),c(()=>{if(!e)return n(p)},[p,e]),c(()=>{if(!u)return p.registerNodeTransform(i,e=>{null!==e.getBackgroundColor()&&e.setBackgroundColor(null)})},[p,u,e]),null}function d(r){const[o]=u(()=>e(r));return o.peek()!==r&&(o.value=r),o}export{m as TablePlugin};
9
+ import{signal as e}from"@lexical/extension";import{useLexicalComposerContext as r}from"@lexical/react/LexicalComposerContext";import{$isScrollableTablesActive as o,setScrollableTablesActive as l,TableNode as t,registerTablePlugin as a,registerTableSelectionObserver as n,registerTableCellUnmergeTransform as s,TableCellNode as i}from"@lexical/table";import{useEffect as c,useState as u}from"react";function m({hasCellMerge:m=!0,hasCellBackgroundColor:f=!0,hasTabHandler:d=!0,hasHorizontalScroll:g=!1,hasNestedTables:p=!1}){const[x]=r();c(()=>{o(x)!==g&&(l(x,g),x.registerNodeTransform(t,()=>{})())},[x,g]);const C=function(r){const[o]=u(()=>e(r));o.peek()!==r&&(o.value=r);return o}(p);return c(()=>a(x,{hasNestedTables:C}),[x,C]),c(()=>n(x,d),[x,d]),c(()=>{if(!m)return s(x)},[x,m]),c(()=>{if(!f)return x.registerNodeTransform(i,e=>{null!==e.getBackgroundColor()&&e.setBackgroundColor(null)})},[x,f,m]),null}export{m as TablePlugin};
@@ -26,8 +26,8 @@ export type TypeaheadMenuPluginProps<TOption extends MenuOption> = {
26
26
  onQueryChange: (matchingString: string | null) => void;
27
27
  onSelectOption: (option: TOption, textNodeContainingQuery: TextNode | null, closeMenu: () => void, matchingString: string) => void;
28
28
  options: Array<TOption>;
29
- menuRenderFn: MenuRenderFn<TOption>;
30
29
  triggerFn: TriggerFn;
30
+ menuRenderFn?: MenuRenderFn<TOption>;
31
31
  onOpen?: (resolution: MenuResolution) => void;
32
32
  onClose?: () => void;
33
33
  anchorClassName?: string;