@depup/lexical__react 0.41.0-depup.0 → 0.43.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/LexicalAutoFocusPlugin.js.flow +1 -1
- package/LexicalBlockWithAlignableContents.js.flow +2 -2
- package/LexicalClearEditorPlugin.js.flow +1 -1
- package/LexicalComposer.js.flow +2 -2
- package/LexicalContentEditable.js.flow +6 -6
- 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.js.flow +1 -1
- package/LexicalDraggableBlockPlugin.prod.js +1 -1
- package/LexicalDraggableBlockPlugin.prod.mjs +1 -1
- package/LexicalEditorRefPlugin.d.ts +1 -1
- package/LexicalEditorRefPlugin.dev.js +0 -1
- package/LexicalEditorRefPlugin.dev.mjs +0 -1
- package/LexicalEditorRefPlugin.js.flow +1 -1
- package/LexicalErrorBoundary.js.flow +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/LexicalHorizontalRulePlugin.js.flow +1 -1
- package/LexicalLinkPlugin.js.flow +1 -1
- 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/LexicalNestedComposer.js.flow +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/LexicalPlainTextPlugin.dev.js +0 -3
- package/LexicalPlainTextPlugin.dev.mjs +0 -3
- package/LexicalReactExtension.dev.js +1 -3
- package/LexicalReactExtension.dev.mjs +1 -3
- package/LexicalReactExtension.js.flow +1 -1
- package/LexicalReactPluginHostExtension.dev.mjs +1 -1
- package/LexicalReactPluginHostExtension.js.flow +3 -3
- package/LexicalReactPluginHostExtension.prod.mjs +1 -1
- package/LexicalRichTextPlugin.dev.js +0 -3
- package/LexicalRichTextPlugin.dev.mjs +0 -3
- package/LexicalSelectionAlwaysOnDisplay.d.ts +1 -1
- package/LexicalTabIndentationPlugin.js.flow +1 -1
- package/LexicalTablePlugin.d.ts +1 -7
- package/LexicalTablePlugin.dev.js +2 -5
- package/LexicalTablePlugin.dev.mjs +2 -5
- package/LexicalTablePlugin.js.flow +1 -1
- 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 +80 -50
- package/shared/LexicalMenu.d.ts +5 -4
- package/useExtensionComponent.d.ts +2 -0
- package/useExtensionSignalValue.d.ts +61 -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/useLexicalExtensionSignalValue.dev.js +84 -0
- package/useLexicalExtensionSignalValue.dev.mjs +81 -0
- package/useLexicalExtensionSignalValue.js +11 -0
- package/useLexicalExtensionSignalValue.js.flow +18 -0
- package/useLexicalExtensionSignalValue.mjs +13 -0
- package/useLexicalExtensionSignalValue.node.mjs +11 -0
- package/useLexicalExtensionSignalValue.prod.js +9 -0
- package/useLexicalExtensionSignalValue.prod.mjs +9 -0
- package/useLexicalTextEntity.js.flow +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
|
@@ -22,6 +22,10 @@ var react = require('react');
|
|
|
22
22
|
*
|
|
23
23
|
*/
|
|
24
24
|
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* @deprecated A pure Lexical implementation is available in `@lexical/extension` as HorizontalRuleExtension
|
|
28
|
+
*/
|
|
25
29
|
function HorizontalRulePlugin() {
|
|
26
30
|
const [editor] = LexicalComposerContext.useLexicalComposerContext();
|
|
27
31
|
react.useEffect(() => {
|
|
@@ -20,6 +20,10 @@ import { useEffect } from 'react';
|
|
|
20
20
|
*
|
|
21
21
|
*/
|
|
22
22
|
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* @deprecated A pure Lexical implementation is available in `@lexical/extension` as HorizontalRuleExtension
|
|
26
|
+
*/
|
|
23
27
|
function HorizontalRulePlugin() {
|
|
24
28
|
const [editor] = useLexicalComposerContext();
|
|
25
29
|
useEffect(() => {
|
|
@@ -8,9 +8,9 @@
|
|
|
8
8
|
|
|
9
9
|
'use strict';
|
|
10
10
|
|
|
11
|
+
var extension = require('@lexical/extension');
|
|
11
12
|
var markdown = require('@lexical/markdown');
|
|
12
13
|
var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
|
|
13
|
-
var LexicalHorizontalRuleNode = require('@lexical/react/LexicalHorizontalRuleNode');
|
|
14
14
|
var react = require('react');
|
|
15
15
|
|
|
16
16
|
/**
|
|
@@ -22,13 +22,13 @@ var react = require('react');
|
|
|
22
22
|
*/
|
|
23
23
|
|
|
24
24
|
const HR = {
|
|
25
|
-
dependencies: [
|
|
25
|
+
dependencies: [extension.HorizontalRuleNode],
|
|
26
26
|
export: node => {
|
|
27
|
-
return
|
|
27
|
+
return extension.$isHorizontalRuleNode(node) ? '***' : null;
|
|
28
28
|
},
|
|
29
29
|
regExp: /^(---|\*\*\*|___)\s?$/,
|
|
30
30
|
replace: (parentNode, _1, _2, isImport) => {
|
|
31
|
-
const line =
|
|
31
|
+
const line = extension.$createHorizontalRuleNode();
|
|
32
32
|
|
|
33
33
|
// TODO: Get rid of isImport flag
|
|
34
34
|
if (isImport || parentNode.getNextSibling() != null) {
|
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
+
import { HorizontalRuleNode, $createHorizontalRuleNode, $isHorizontalRuleNode } from '@lexical/extension';
|
|
9
10
|
import { TRANSFORMERS, registerMarkdownShortcuts } from '@lexical/markdown';
|
|
10
11
|
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
|
|
11
|
-
import { HorizontalRuleNode, $createHorizontalRuleNode, $isHorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
|
|
12
12
|
import { useEffect } from 'react';
|
|
13
13
|
|
|
14
14
|
/**
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
"use strict";var e=require("@lexical/
|
|
9
|
+
"use strict";var e=require("@lexical/extension"),r=require("@lexical/markdown"),t=require("@lexical/react/LexicalComposerContext"),o=require("react");const l=[{dependencies:[e.HorizontalRuleNode],export:r=>e.$isHorizontalRuleNode(r)?"***":null,regExp:/^(---|\*\*\*|___)\s?$/,replace:(r,t,o,l)=>{const n=e.$createHorizontalRuleNode();l||null!=r.getNextSibling()?r.replace(n):r.insertBefore(n),n.selectNext()},type:"element"},...r.TRANSFORMERS];exports.DEFAULT_TRANSFORMERS=l,exports.MarkdownShortcutPlugin=function({transformers:e=l}){const[n]=t.useLexicalComposerContext();return o.useEffect(()=>r.registerMarkdownShortcuts(n,e),[n,e]),null};
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
import{
|
|
9
|
+
import{HorizontalRuleNode as e,$createHorizontalRuleNode as r,$isHorizontalRuleNode as t}from"@lexical/extension";import{TRANSFORMERS as o,registerMarkdownShortcuts as n}from"@lexical/markdown";import{useLexicalComposerContext as l}from"@lexical/react/LexicalComposerContext";import{useEffect as c}from"react";const i=[{dependencies:[e],export:e=>t(e)?"***":null,regExp:/^(---|\*\*\*|___)\s?$/,replace:(e,t,o,n)=>{const l=r();n||null!=e.getNextSibling()?e.replace(l):e.insertBefore(l),l.selectNext()},type:"element"},...o];function m({transformers:e=i}){const[r]=l();return c(()=>n(r,e),[r,e]),null}export{i as DEFAULT_TRANSFORMERS,m as MarkdownShortcutPlugin};
|
|
@@ -18,7 +18,7 @@ export type LexicalNestedComposerProps = {
|
|
|
18
18
|
children?: React.Node;
|
|
19
19
|
initialEditor: LexicalEditor;
|
|
20
20
|
initialTheme?: EditorThemeClasses;
|
|
21
|
-
initialNodes?:
|
|
21
|
+
initialNodes?: ReadonlyArray<Class<LexicalNode> | LexicalNodeReplacement>;
|
|
22
22
|
skipCollabChecks?: void | true;
|
|
23
23
|
skipEditableListener?: void | true;
|
|
24
24
|
};
|
|
@@ -193,12 +193,10 @@ const NodeContextMenuPlugin = /*#__PURE__*/react.forwardRef(({
|
|
|
193
193
|
setRenderItems(renderableItems);
|
|
194
194
|
setIsOpen(true);
|
|
195
195
|
}
|
|
196
|
-
return editor.registerRootListener(
|
|
197
|
-
if (prevRootElement !== null) {
|
|
198
|
-
prevRootElement.removeEventListener('contextmenu', onContextMenu);
|
|
199
|
-
}
|
|
196
|
+
return editor.registerRootListener(rootElement => {
|
|
200
197
|
if (rootElement !== null) {
|
|
201
198
|
rootElement.addEventListener('contextmenu', onContextMenu);
|
|
199
|
+
return () => rootElement.removeEventListener('contextmenu', onContextMenu);
|
|
202
200
|
}
|
|
203
201
|
});
|
|
204
202
|
}, [items, itemClassName, separatorClassName, refs, editor]);
|
|
@@ -191,12 +191,10 @@ const NodeContextMenuPlugin = /*#__PURE__*/forwardRef(({
|
|
|
191
191
|
setRenderItems(renderableItems);
|
|
192
192
|
setIsOpen(true);
|
|
193
193
|
}
|
|
194
|
-
return editor.registerRootListener(
|
|
195
|
-
if (prevRootElement !== null) {
|
|
196
|
-
prevRootElement.removeEventListener('contextmenu', onContextMenu);
|
|
197
|
-
}
|
|
194
|
+
return editor.registerRootListener(rootElement => {
|
|
198
195
|
if (rootElement !== null) {
|
|
199
196
|
rootElement.addEventListener('contextmenu', onContextMenu);
|
|
197
|
+
return () => rootElement.removeEventListener('contextmenu', onContextMenu);
|
|
200
198
|
}
|
|
201
199
|
});
|
|
202
200
|
}, [items, itemClassName, separatorClassName, refs, editor]);
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
"use strict";var e=require("@floating-ui/react"),t=require("@lexical/react/LexicalComposerContext"),s=require("lexical"),n=require("react"),i=require("react/jsx-runtime");class a{key;ref;constructor(e){this.key=e,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(e){this.ref={current:e}}}const
|
|
9
|
+
"use strict";var e=require("@floating-ui/react"),t=require("@lexical/react/LexicalComposerContext"),s=require("lexical"),n=require("react"),i=require("react/jsx-runtime");class a{key;ref;constructor(e){this.key=e,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(e){this.ref={current:e}}}const o=n.forwardRef(({className:e,disabled:t,...s},n)=>i.jsx("hr",{className:e})),r=n.forwardRef(({className:e,label:t,disabled:s,icon:n,...a},o)=>i.jsxs("button",{...a,className:e,ref:o,role:"menuitem",disabled:s,children:[n,t]})),l=n.forwardRef(({items:a,className:l,itemClassName:c,separatorClassName:u},d)=>{const[m]=t.useLexicalComposerContext(),[p,h]=n.useState(null),[f,x]=n.useState(!1),y=n.useRef([]),g=n.useRef([]),{refs:N,floatingStyles:b,context:k}=e.useFloating({middleware:[e.offset({alignmentAxis:4,mainAxis:5}),e.flip({fallbackPlacements:["left-start"]}),e.shift({padding:10})],onOpenChange:x,open:f,placement:"right-start",strategy:"fixed",whileElementsMounted:e.autoUpdate}),w=e.useRole(k,{role:"menu"}),C=e.useDismiss(k),$=e.useListNavigation(k,{activeIndex:p,listRef:y,onNavigate:h}),O=e.useTypeahead(k,{activeIndex:p,enabled:f,listRef:g,onMatch:h}),{getFloatingProps:R,getItemProps:v}=e.useInteractions([w,C,$,O]),[S,E]=n.useState([]);return n.useEffect(()=>{function e(e){e.preventDefault(),N.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=[];a&&m.read(()=>{const n=s.$getNearestNodeFromDOMNode(e.target);n&&(t=a.filter(e=>!e.$showOn||e.$showOn(n)))});const n=t.map((e,t)=>"separator"===e.type?{className:u,key:e.key+"-"+t,type:e.type}:{className:c,disabled:e.disabled,icon:e.icon,key:e.key,label:e.title,onClick:()=>m.update(()=>e.$onSelect()),title:e.title,type:e.type});g.current=n.map(e=>e.key),E(n),x(!0)}return m.registerRootListener(t=>{if(null!==t)return t.addEventListener("contextmenu",e),()=>t.removeEventListener("contextmenu",e)})},[a,c,u,N,m]),i.jsx(e.FloatingPortal,{children:f&&i.jsx(e.FloatingOverlay,{lockScroll:!0,children:i.jsx(e.FloatingFocusManager,{context:k,initialFocus:N.floating,children:i.jsx("div",{className:l,ref:N.setFloating,style:b,...R(),children:S.map((e,t)=>"item"===e.type?n.createElement(r,{...v({...e,onClick(){e.onClick(),x(!1)},onMouseUp(){e.onClick(),x(!1)},ref(e){y.current[t]=e},tabIndex:p===t?0:-1}),key:e.key}):"separator"===e.type?n.createElement(o,{...v({...e,ref(e){y.current[t]=e},tabIndex:p===t?0:-1}),key:e.key}):void 0)})})})})});exports.NodeContextMenuOption=class extends a{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)}},exports.NodeContextMenuPlugin=l,exports.NodeContextMenuSeparator=class extends a{type;$showOn;constructor(e){super("_separator"),this.type="separator",e&&e.$showOn&&(this.$showOn=e.$showOn)}};
|
|
@@ -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};
|
|
@@ -183,9 +183,6 @@ function useCanShowPlaceholder(editor) {
|
|
|
183
183
|
function usePlainTextSetup(editor) {
|
|
184
184
|
useLayoutEffectImpl(() => {
|
|
185
185
|
return utils.mergeRegister(plainText.registerPlainText(editor), dragon.registerDragonSupport(editor));
|
|
186
|
-
|
|
187
|
-
// We only do this for init
|
|
188
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
189
186
|
}, [editor]);
|
|
190
187
|
}
|
|
191
188
|
|
|
@@ -181,9 +181,6 @@ function useCanShowPlaceholder(editor) {
|
|
|
181
181
|
function usePlainTextSetup(editor) {
|
|
182
182
|
useLayoutEffectImpl(() => {
|
|
183
183
|
return mergeRegister(registerPlainText(editor), registerDragonSupport(editor));
|
|
184
|
-
|
|
185
|
-
// We only do this for init
|
|
186
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
187
184
|
}, [editor]);
|
|
188
185
|
}
|
|
189
186
|
|
|
@@ -91,9 +91,7 @@ function buildEditorComponent(config, context) {
|
|
|
91
91
|
const configDecorators = react.useMemo(() => rawConfigDecorators.map((decorator, i) => /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary, {
|
|
92
92
|
onError: e => {
|
|
93
93
|
editor._onError(e);
|
|
94
|
-
}
|
|
95
|
-
// eslint-disable-next-line react/no-array-index-key -- no natural key
|
|
96
|
-
,
|
|
94
|
+
},
|
|
97
95
|
children: /*#__PURE__*/jsxRuntime.jsx(react.Suspense, {
|
|
98
96
|
fallback: null,
|
|
99
97
|
children: decorator
|