@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.
- package/LexicalAutoEmbedPlugin.d.ts +2 -2
- package/LexicalAutoEmbedPlugin.js.flow +4 -4
- package/LexicalDecoratorBlockNode.d.ts +2 -0
- package/LexicalDecoratorBlockNode.dev.js +7 -0
- package/LexicalDecoratorBlockNode.dev.mjs +7 -0
- package/LexicalDecoratorBlockNode.prod.js +1 -1
- package/LexicalDecoratorBlockNode.prod.mjs +1 -1
- package/LexicalDraggableBlockPlugin.dev.js +2 -4
- package/LexicalDraggableBlockPlugin.dev.mjs +2 -4
- package/LexicalDraggableBlockPlugin.prod.js +1 -1
- package/LexicalDraggableBlockPlugin.prod.mjs +1 -1
- package/LexicalExtensionComposer.d.ts +1 -1
- package/LexicalExtensionEditorComposer.d.ts +20 -0
- package/LexicalExtensionEditorComposer.dev.js +55 -0
- package/LexicalExtensionEditorComposer.dev.mjs +53 -0
- package/LexicalExtensionEditorComposer.js +11 -0
- package/LexicalExtensionEditorComposer.js.flow +27 -0
- package/{LexicalContextMenuPlugin.mjs → LexicalExtensionEditorComposer.mjs} +3 -4
- package/{LexicalContextMenuPlugin.node.mjs → LexicalExtensionEditorComposer.node.mjs} +2 -3
- package/LexicalExtensionEditorComposer.prod.js +9 -0
- package/LexicalExtensionEditorComposer.prod.mjs +9 -0
- package/LexicalHorizontalRulePlugin.d.ts +3 -0
- package/LexicalHorizontalRulePlugin.dev.js +4 -0
- package/LexicalHorizontalRulePlugin.dev.mjs +4 -0
- package/LexicalMarkdownShortcutPlugin.dev.js +4 -4
- package/LexicalMarkdownShortcutPlugin.dev.mjs +1 -1
- package/LexicalMarkdownShortcutPlugin.prod.js +1 -1
- package/LexicalMarkdownShortcutPlugin.prod.mjs +1 -1
- package/LexicalNodeContextMenuPlugin.dev.js +2 -4
- package/LexicalNodeContextMenuPlugin.dev.mjs +2 -4
- package/LexicalNodeContextMenuPlugin.prod.js +1 -1
- package/LexicalNodeContextMenuPlugin.prod.mjs +1 -1
- package/LexicalNodeEventPlugin.dev.js +2 -4
- package/LexicalNodeEventPlugin.dev.mjs +2 -4
- package/LexicalNodeEventPlugin.prod.js +1 -1
- package/LexicalNodeEventPlugin.prod.mjs +1 -1
- package/LexicalNodeMenuPlugin.d.ts +1 -1
- package/LexicalNodeMenuPlugin.dev.js +53 -2
- package/LexicalNodeMenuPlugin.dev.mjs +54 -3
- package/LexicalNodeMenuPlugin.js.flow +3 -2
- package/LexicalNodeMenuPlugin.prod.js +1 -1
- package/LexicalNodeMenuPlugin.prod.mjs +1 -1
- package/LexicalReactPluginHostExtension.dev.mjs +1 -1
- package/LexicalReactPluginHostExtension.prod.mjs +1 -1
- package/LexicalSelectionAlwaysOnDisplay.d.ts +1 -1
- package/LexicalTablePlugin.d.ts +1 -7
- package/LexicalTablePlugin.dev.js +2 -5
- package/LexicalTablePlugin.dev.mjs +2 -5
- package/LexicalTablePlugin.prod.js +1 -1
- package/LexicalTablePlugin.prod.mjs +1 -1
- package/LexicalTypeaheadMenuPlugin.d.ts +1 -1
- package/LexicalTypeaheadMenuPlugin.dev.js +53 -2
- package/LexicalTypeaheadMenuPlugin.dev.mjs +54 -3
- package/LexicalTypeaheadMenuPlugin.js.flow +8 -7
- package/LexicalTypeaheadMenuPlugin.prod.js +1 -1
- package/LexicalTypeaheadMenuPlugin.prod.mjs +1 -1
- package/README.md +2 -2
- package/changes.json +1 -1
- package/package.json +50 -50
- package/shared/LexicalMenu.d.ts +5 -4
- package/useExtensionComponent.d.ts +2 -0
- package/useLexicalExtensionComponent.dev.js +8 -0
- package/useLexicalExtensionComponent.dev.mjs +8 -2
- package/useLexicalExtensionComponent.mjs +3 -1
- package/useLexicalExtensionComponent.node.mjs +3 -1
- package/useLexicalExtensionComponent.prod.js +1 -1
- package/useLexicalExtensionComponent.prod.mjs +1 -1
- package/LexicalContextMenuPlugin.d.ts +0 -42
- package/LexicalContextMenuPlugin.dev.js +0 -526
- package/LexicalContextMenuPlugin.dev.mjs +0 -511
- package/LexicalContextMenuPlugin.js +0 -11
- package/LexicalContextMenuPlugin.js.flow +0 -13
- package/LexicalContextMenuPlugin.prod.js +0 -9
- 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(
|
|
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(
|
|
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(
|
|
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
|
|
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(
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
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
|
|
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"),
|
|
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
|
|
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,
|
|
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,
|
|
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};
|
package/LexicalTablePlugin.d.ts
CHANGED
|
@@ -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,
|
|
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
|
|
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
|
|
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");
|
|
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
|
|
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;
|