@lexical/react 0.36.2 → 0.36.3-nightly.20251003.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/LexicalCollaborationPlugin.d.ts +17 -4
- package/LexicalCollaborationPlugin.dev.js +186 -56
- package/LexicalCollaborationPlugin.dev.mjs +188 -59
- package/LexicalCollaborationPlugin.mjs +2 -1
- package/LexicalCollaborationPlugin.node.mjs +2 -1
- package/LexicalCollaborationPlugin.prod.js +1 -1
- package/LexicalCollaborationPlugin.prod.mjs +1 -1
- package/LexicalContextMenuPlugin.dev.js +17 -3
- package/LexicalContextMenuPlugin.dev.mjs +17 -3
- package/LexicalContextMenuPlugin.prod.js +1 -1
- package/LexicalContextMenuPlugin.prod.mjs +1 -1
- package/LexicalNodeMenuPlugin.dev.js +17 -3
- package/LexicalNodeMenuPlugin.dev.mjs +17 -3
- package/LexicalNodeMenuPlugin.prod.js +1 -1
- package/LexicalNodeMenuPlugin.prod.mjs +1 -1
- package/LexicalTypeaheadMenuPlugin.dev.js +17 -3
- package/LexicalTypeaheadMenuPlugin.dev.mjs +17 -3
- package/LexicalTypeaheadMenuPlugin.prod.js +1 -1
- package/LexicalTypeaheadMenuPlugin.prod.mjs +1 -1
- package/package.json +18 -18
- package/shared/useYjsCollaboration.d.ts +9 -1
|
@@ -7,4 +7,5 @@
|
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
const mod = await (process.env.NODE_ENV !== 'production' ? import('./LexicalCollaborationPlugin.dev.mjs') : import('./LexicalCollaborationPlugin.prod.mjs'));
|
|
10
|
-
export const CollaborationPlugin = mod.CollaborationPlugin;
|
|
10
|
+
export const CollaborationPlugin = mod.CollaborationPlugin;
|
|
11
|
+
export const CollaborationPluginV2__EXPERIMENTAL = mod.CollaborationPluginV2__EXPERIMENTAL;
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
"use strict";var e=require("@lexical/react/LexicalCollaborationContext"),t=require("@lexical/react/LexicalComposerContext"),o=require("@lexical/yjs"),r=require("react"),n=require("@lexical/utils"),s=require("lexical"),a=require("react-dom"),c=require("yjs"),i=require("react/jsx-runtime");function u(e){var t=Object.create(null);if(e)for(var o in e)t[o]=e[o];return t.default=e,t}var l=u(r);function d(e,t,n,u,l,d,
|
|
9
|
+
"use strict";var e=require("@lexical/react/LexicalCollaborationContext"),t=require("@lexical/react/LexicalComposerContext"),o=require("@lexical/yjs"),r=require("react"),n=require("@lexical/utils"),s=require("lexical"),a=require("react-dom"),c=require("yjs"),i=require("react/jsx-runtime");function u(e){var t=Object.create(null);if(e)for(var o in e)t[o]=e[o];return t.default=e,t}var l=u(r);function d(e,t,n,a,i,u,l,d,E,p,g,_,M=o.syncCursorPositions){const R=r.useRef(!1),D=r.useCallback(()=>{const{root:t}=d;l&&t.isEmpty()&&0===t._xmlText._length&&m(e,g)},[d,e,g,l]);return r.useEffect(()=>{const{root:t}=d,r=(e,t)=>{const r=t.origin;if(r!==d){const t=r instanceof c.UndoManager;o.syncYjsChangesToLexical(d,n,e,t,M)}};t.getSharedType().observeDeep(r);const a=e.registerUpdateListener(({prevEditorState:e,editorState:t,dirtyLeaves:r,dirtyElements:a,normalizedNodes:c,tags:i})=>{i.has(s.SKIP_COLLAB_TAG)||o.syncLexicalUpdateToYjs(d,n,e,t,a,r,c,i)});return()=>{t.getSharedType().unobserveDeep(r),a()}},[d,n,e,E,a,t,M]),r.useEffect(()=>{const o=o=>{!function(e,t){if(e.update(()=>{const e=s.$getRoot();e.clear(),e.select()},{tag:s.SKIP_COLLAB_TAG}),null==t.cursors)return;const o=t.cursors;if(null==o)return;const r=t.cursorsContainer;if(null==r)return;const n=Array.from(o.values());for(let e=0;e<n.length;e++){const t=n[e].selection;if(t&&null!=t.selections){const o=t.selections;for(let t=0;t<o.length;t++)r.removeChild(o[e])}}}(e,d),E(o),a.set(t,o),R.current=!0},r=()=>{R.current=!1};return n.on("reload",o),n.on("sync",r),()=>{n.off("reload",o),n.off("sync",r)}},[d,n,e,E,a,t]),f(e,n,i,u,R,_,D),C(d,p)}function f(e,t,n,a,c,i,u){const l=r.useCallback(()=>t.connect(),[t]),d=r.useCallback(()=>{try{t.disconnect()}catch(e){}},[t]);r.useEffect(()=>{const r=({status:t})=>{e.dispatchCommand(o.CONNECTED_COMMAND,"connected"===t)},s=e=>{e&&!1===c.current&&u&&u()};o.initLocalState(t,n,a,document.activeElement===e.getRootElement(),i||{}),t.on("status",r),t.on("sync",s);const f=l();return()=>{!1===c.current&&(f?f.then(d):d()),t.off("sync",s),t.off("status",r)}},[e,t,n,a,c,i,u,l,d]),r.useEffect(()=>e.registerCommand(o.TOGGLE_CONNECT_COMMAND,e=>(e?(console.log("Collaboration connected!"),l()):(console.log("Collaboration disconnected!"),d()),!0),s.COMMAND_PRIORITY_EDITOR),[l,d,e])}function C(e,t){return r.useMemo(()=>a.createPortal(i.jsx("div",{ref:t=>{e.cursorsContainer=t}}),t&&t.current||document.body),[e,t])}function E(e,t,a,c,i){r.useEffect(()=>n.mergeRegister(e.registerCommand(s.FOCUS_COMMAND,()=>(o.setLocalStateFocus(t,a,c,!0,i||{}),!1),s.COMMAND_PRIORITY_EDITOR),e.registerCommand(s.BLUR_COMMAND,()=>(o.setLocalStateFocus(t,a,c,!1,i||{}),!1),s.COMMAND_PRIORITY_EDITOR)),[c,e,a,t,i])}function p(e,t){r.useEffect(()=>n.mergeRegister(e.registerCommand(s.UNDO_COMMAND,()=>(t.undo(),!0),s.COMMAND_PRIORITY_EDITOR),e.registerCommand(s.REDO_COMMAND,()=>(t.redo(),!0),s.COMMAND_PRIORITY_EDITOR)));const o=r.useCallback(()=>{t.clear()},[t]);return l.useEffect(()=>{const o=()=>{e.dispatchCommand(s.CAN_UNDO_COMMAND,t.undoStack.length>0),e.dispatchCommand(s.CAN_REDO_COMMAND,t.redoStack.length>0)};return t.on("stack-item-added",o),t.on("stack-item-popped",o),t.on("stack-cleared",o),()=>{t.off("stack-item-added",o),t.off("stack-item-popped",o),t.off("stack-cleared",o)}},[e,t]),o}function m(e,t){e.update(()=>{const o=s.$getRoot();if(o.isEmpty())if(t)switch(typeof t){case"string":{const o=e.parseEditorState(t);e.setEditorState(o,{tag:s.HISTORY_MERGE_TAG});break}case"object":e.setEditorState(t,{tag:s.HISTORY_MERGE_TAG});break;case"function":e.update(()=>{s.$getRoot().isEmpty()&&t(e)},{tag:s.HISTORY_MERGE_TAG})}else{const t=s.$createParagraphNode();o.append(t);const{activeElement:r}=document;(null!==s.$getSelection()||null!==r&&r===e.getRootElement())&&t.select()}},{tag:s.HISTORY_MERGE_TAG})}function g({editor:e,id:t,provider:n,yjsDocMap:s,name:a,color:c,shouldBootstrap:i,cursorsContainerRef:u,initialEditorState:l,awarenessData:f,collabContext:C,binding:m,setDoc:g,syncCursorPositionsFn:_}){const M=d(e,t,n,s,a,c,i,m,g,u,l,f,_);return function(e,t){p(e,r.useMemo(()=>o.createUndoManager(t,t.root.getSharedType()),[t]))}(e,m),E(e,n,a,c,f),M}const _=(e,t)=>{r.useEffect(()=>(e.isCollabActive=!0,()=>{null==t._parentEditor&&(e.isCollabActive=!1)}),[e,t])};exports.CollaborationPlugin=function({id:n,providerFactory:s,shouldBootstrap:a,username:c,cursorColor:u,cursorsContainerRef:l,initialEditorState:d,excludedProperties:f,awarenessData:C,syncCursorPositionsFn:E}){const p=r.useRef(!1),m=r.useRef(!1),M=e.useCollaborationContext(c,u),{yjsDocMap:R,name:D,color:O}=M,[T]=t.useLexicalComposerContext();_(M,T);const[x,y]=r.useState(),[A,N]=r.useState();r.useEffect(()=>{if(m.current)return;m.current=!0;const e=s(n,R);return y(e),N(R.get(n)),()=>{e.disconnect()}},[n,s,R]);const[S,b]=r.useState();return r.useEffect(()=>{if(!x)return;if(p.current)return;p.current=!0;const e=o.createBinding(T,x,n,A||R.get(n),R,f);return b(e),()=>{e.root.destroy(e)}},[T,x,n,R,A,f]),x&&S?i.jsx(g,{awarenessData:C,binding:S,collabContext:M,color:O,cursorsContainerRef:l,editor:T,id:n,initialEditorState:d,name:D,provider:x,setDoc:N,shouldBootstrap:a,yjsDocMap:R,syncCursorPositionsFn:E}):i.jsx(i.Fragment,{})},exports.CollaborationPluginV2__EXPERIMENTAL=function({id:n,doc:a,provider:i,__shouldBootstrapUnsafe:u,username:l,cursorColor:d,cursorsContainerRef:g,excludedProperties:M,awarenessData:R}){const D=e.useCollaborationContext(l,d),{yjsDocMap:O,name:T,color:x}=D,[y]=t.useLexicalComposerContext();_(D,y);const A=function(e,t,n,a,i,u,l,d={}){const{awarenessData:C,excludedProperties:E,rootName:p,__shouldBootstrapUnsafe:g}=d,_=r.useMemo(()=>({current:!1}),[]),M=r.useMemo(()=>o.createBindingV2__EXPERIMENTAL(e,t,n,i,{excludedProperties:E,rootName:p}),[e,t,n,i,E,p]);r.useEffect(()=>(i.set(t,n),()=>{i.delete(t)}),[n,i,t]);const R=r.useCallback(()=>{const{root:t}=M;g&&0===t._length&&m(e)},[M,e,g]);return r.useEffect(()=>{const{root:t}=M,{awareness:r}=a,n=(e,t)=>{const r=t.origin;if(r!==M){const n=r instanceof c.UndoManager;o.syncYjsChangesToLexicalV2__EXPERIMENTAL(M,a,e,t,n)}};t.observeDeep(n);const i=e.registerUpdateListener(({prevEditorState:e,editorState:t,dirtyElements:r,normalizedNodes:n,tags:c})=>{c.has(s.SKIP_COLLAB_TAG)||o.syncLexicalUpdateToYjsV2__EXPERIMENTAL(M,a,e,t,r,n,c)}),u=()=>{o.syncCursorPositions(M,a)};return r.on("update",u),()=>{t.unobserveDeep(n),i(),r.off("update",u)}},[M,a,e]),f(e,a,u,l,_,C,R),M}(y,n,a,i,O,T,x,{__shouldBootstrapUnsafe:u,awarenessData:R,excludedProperties:M});return function(e,t){p(e,r.useMemo(()=>o.createUndoManager(t,t.root),[t]))}(y,A),E(y,i,T,x,R),C(A,g)};
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
import{useCollaborationContext as t}from"@lexical/react/LexicalCollaborationContext";import{useLexicalComposerContext as e}from"@lexical/react/LexicalComposerContext";import{syncCursorPositions as o,
|
|
9
|
+
import{useCollaborationContext as t}from"@lexical/react/LexicalCollaborationContext";import{useLexicalComposerContext as e}from"@lexical/react/LexicalComposerContext";import{syncCursorPositions as o,syncLexicalUpdateToYjs as r,createUndoManager as n,setLocalStateFocus as s,createBindingV2__EXPERIMENTAL as c,syncLexicalUpdateToYjsV2__EXPERIMENTAL as a,syncYjsChangesToLexical as i,initLocalState as d,TOGGLE_CONNECT_COMMAND as l,syncYjsChangesToLexicalV2__EXPERIMENTAL as u,CONNECTED_COMMAND as m,createBinding as f}from"@lexical/yjs";import*as p from"react";import{useRef as g,useCallback as C,useEffect as y,useMemo as h,useState as x}from"react";import{mergeRegister as E}from"@lexical/utils";import{SKIP_COLLAB_TAG as v,FOCUS_COMMAND as b,COMMAND_PRIORITY_EDITOR as D,BLUR_COMMAND as S,$getRoot as k,HISTORY_MERGE_TAG as _,$createParagraphNode as j,$getSelection as w,UNDO_COMMAND as P,REDO_COMMAND as B,CAN_UNDO_COMMAND as R,CAN_REDO_COMMAND as L}from"lexical";import{createPortal as U}from"react-dom";import{UndoManager as F}from"yjs";import{jsx as M,Fragment as N}from"react/jsx-runtime";function T(t,e,n,s,c,a,d,l,u,m,f,p,h=o){const x=g(!1),E=C(()=>{const{root:e}=l;d&&e.isEmpty()&&0===e._xmlText._length&&H(t,f)},[l,t,f,d]);return y(()=>{const{root:e}=l,o=(t,e)=>{const o=e.origin;if(o!==l){i(l,n,t,o instanceof F,h)}};e.getSharedType().observeDeep(o);const s=t.registerUpdateListener(({prevEditorState:t,editorState:e,dirtyLeaves:o,dirtyElements:s,normalizedNodes:c,tags:a})=>{a.has(v)||r(l,n,t,e,s,o,c,a)});return()=>{e.getSharedType().unobserveDeep(o),s()}},[l,n,t,u,s,e,h]),y(()=>{const o=o=>{!function(t,e){if(t.update(()=>{const t=k();t.clear(),t.select()},{tag:v}),null==e.cursors)return;const o=e.cursors;if(null==o)return;const r=e.cursorsContainer;if(null==r)return;const n=Array.from(o.values());for(let t=0;t<n.length;t++){const e=n[t].selection;if(e&&null!=e.selections){const o=e.selections;for(let e=0;e<o.length;e++)r.removeChild(o[t])}}}(t,l),u(o),s.set(e,o),x.current=!0},r=()=>{x.current=!1};return n.on("reload",o),n.on("sync",r),()=>{n.off("reload",o),n.off("sync",r)}},[l,n,t,u,s,e]),A(t,n,c,a,x,p,E),z(l,m)}function A(t,e,o,r,n,s,c){const a=C(()=>e.connect(),[e]),i=C(()=>{try{e.disconnect()}catch(t){}},[e]);y(()=>{const l=({status:e})=>{t.dispatchCommand(m,"connected"===e)},u=t=>{t&&!1===n.current&&c&&c()};d(e,o,r,document.activeElement===t.getRootElement(),s||{}),e.on("status",l),e.on("sync",u);const f=a();return()=>{!1===n.current&&(f?f.then(i):i()),e.off("sync",u),e.off("status",l)}},[t,e,o,r,n,s,c,a,i]),y(()=>t.registerCommand(l,t=>(t?(console.log("Collaboration connected!"),a()):(console.log("Collaboration disconnected!"),i()),!0),D),[a,i,t])}function z(t,e){return h(()=>U(M("div",{ref:e=>{t.cursorsContainer=e}}),e&&e.current||document.body),[t,e])}function q(t,e,o,r,n){y(()=>E(t.registerCommand(b,()=>(s(e,o,r,!0,n||{}),!1),D),t.registerCommand(S,()=>(s(e,o,r,!1,n||{}),!1),D)),[r,t,o,e,n])}function G(t,e){y(()=>E(t.registerCommand(P,()=>(e.undo(),!0),D),t.registerCommand(B,()=>(e.redo(),!0),D)));const o=C(()=>{e.clear()},[e]);return p.useEffect(()=>{const o=()=>{t.dispatchCommand(R,e.undoStack.length>0),t.dispatchCommand(L,e.redoStack.length>0)};return e.on("stack-item-added",o),e.on("stack-item-popped",o),e.on("stack-cleared",o),()=>{e.off("stack-item-added",o),e.off("stack-item-popped",o),e.off("stack-cleared",o)}},[t,e]),o}function H(t,e){t.update(()=>{const o=k();if(o.isEmpty())if(e)switch(typeof e){case"string":{const o=t.parseEditorState(e);t.setEditorState(o,{tag:_});break}case"object":t.setEditorState(e,{tag:_});break;case"function":t.update(()=>{k().isEmpty()&&e(t)},{tag:_})}else{const e=j();o.append(e);const{activeElement:r}=document;(null!==w()||null!==r&&r===t.getRootElement())&&e.select()}},{tag:_})}function I({id:o,providerFactory:r,shouldBootstrap:n,username:s,cursorColor:c,cursorsContainerRef:a,initialEditorState:i,excludedProperties:d,awarenessData:l,syncCursorPositionsFn:u}){const m=g(!1),p=g(!1),C=t(s,c),{yjsDocMap:h,name:E,color:v}=C,[b]=e();O(C,b);const[D,S]=x(),[k,_]=x();y(()=>{if(p.current)return;p.current=!0;const t=r(o,h);return S(t),_(h.get(o)),()=>{t.disconnect()}},[o,r,h]);const[j,w]=x();return y(()=>{if(!D)return;if(m.current)return;m.current=!0;const t=f(b,D,o,k||h.get(o),h,d);return w(t),()=>{t.root.destroy(t)}},[b,D,o,h,k,d]),D&&j?M(J,{awarenessData:l,binding:j,collabContext:C,color:v,cursorsContainerRef:a,editor:b,id:o,initialEditorState:i,name:E,provider:D,setDoc:_,shouldBootstrap:n,yjsDocMap:h,syncCursorPositionsFn:u}):M(N,{})}function J({editor:t,id:e,provider:o,yjsDocMap:r,name:s,color:c,shouldBootstrap:a,cursorsContainerRef:i,initialEditorState:d,awarenessData:l,collabContext:u,binding:m,setDoc:f,syncCursorPositionsFn:p}){const g=T(t,e,o,r,s,c,a,m,f,i,d,l,p);return function(t,e){G(t,h(()=>n(e,e.root.getSharedType()),[e]))}(t,m),q(t,o,s,c,l),g}function K({id:r,doc:s,provider:i,__shouldBootstrapUnsafe:d,username:l,cursorColor:m,cursorsContainerRef:f,excludedProperties:p,awarenessData:g}){const x=t(l,m),{yjsDocMap:E,name:b,color:D}=x,[S]=e();O(x,S);const k=function(t,e,r,n,s,i,d,l={}){const{awarenessData:m,excludedProperties:f,rootName:p,__shouldBootstrapUnsafe:g}=l,x=h(()=>({current:!1}),[]),E=h(()=>c(t,e,r,s,{excludedProperties:f,rootName:p}),[t,e,r,s,f,p]);y(()=>(s.set(e,r),()=>{s.delete(e)}),[r,s,e]);const b=C(()=>{const{root:e}=E;g&&0===e._length&&H(t)},[E,t,g]);return y(()=>{const{root:e}=E,{awareness:r}=n,s=(t,e)=>{const o=e.origin;o!==E&&u(E,n,t,e,o instanceof F)};e.observeDeep(s);const c=t.registerUpdateListener(({prevEditorState:t,editorState:e,dirtyElements:o,normalizedNodes:r,tags:s})=>{s.has(v)||a(E,n,t,e,o,r,s)}),i=()=>{o(E,n)};return r.on("update",i),()=>{e.unobserveDeep(s),c(),r.off("update",i)}},[E,n,t]),A(t,n,i,d,x,m,b),E}(S,r,s,i,E,b,D,{__shouldBootstrapUnsafe:d,awarenessData:g,excludedProperties:p});return function(t,e){G(t,h(()=>n(e,e.root),[e]))}(S,k),q(S,i,b,D,g),z(k,f)}const O=(t,e)=>{y(()=>(t.isCollabActive=!0,()=>{null==e._parentEditor&&(t.isCollabActive=!1)}),[t,e])};export{I as CollaborationPlugin,K as CollaborationPluginV2__EXPERIMENTAL};
|
|
@@ -223,7 +223,9 @@ function LexicalMenu({
|
|
|
223
223
|
commandPriority = lexical.COMMAND_PRIORITY_LOW,
|
|
224
224
|
preselectFirstItem = true
|
|
225
225
|
}) {
|
|
226
|
-
const [
|
|
226
|
+
const [rawSelectedIndex, setHighlightedIndex] = React.useState(null);
|
|
227
|
+
// Clamp highlighted index if options list shrinks
|
|
228
|
+
const selectedIndex = rawSelectedIndex !== null ? Math.min(options.length - 1, rawSelectedIndex) : null;
|
|
227
229
|
const matchingString = resolution.match && resolution.match.matchingString;
|
|
228
230
|
React.useEffect(() => {
|
|
229
231
|
if (preselectFirstItem) {
|
|
@@ -276,7 +278,13 @@ function LexicalMenu({
|
|
|
276
278
|
const newSelectedIndex = selectedIndex === null ? 0 : selectedIndex !== options.length - 1 ? selectedIndex + 1 : 0;
|
|
277
279
|
updateSelectedIndex(newSelectedIndex);
|
|
278
280
|
const option = options[newSelectedIndex];
|
|
279
|
-
if (option
|
|
281
|
+
if (!option) {
|
|
282
|
+
updateSelectedIndex(-1);
|
|
283
|
+
event.preventDefault();
|
|
284
|
+
event.stopImmediatePropagation();
|
|
285
|
+
return true;
|
|
286
|
+
}
|
|
287
|
+
if (option.ref && option.ref.current) {
|
|
280
288
|
editor.dispatchCommand(SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND, {
|
|
281
289
|
index: newSelectedIndex,
|
|
282
290
|
option
|
|
@@ -292,7 +300,13 @@ function LexicalMenu({
|
|
|
292
300
|
const newSelectedIndex = selectedIndex === null ? options.length - 1 : selectedIndex !== 0 ? selectedIndex - 1 : options.length - 1;
|
|
293
301
|
updateSelectedIndex(newSelectedIndex);
|
|
294
302
|
const option = options[newSelectedIndex];
|
|
295
|
-
if (option
|
|
303
|
+
if (!option) {
|
|
304
|
+
updateSelectedIndex(-1);
|
|
305
|
+
event.preventDefault();
|
|
306
|
+
event.stopImmediatePropagation();
|
|
307
|
+
return true;
|
|
308
|
+
}
|
|
309
|
+
if (option.ref && option.ref.current) {
|
|
296
310
|
scrollIntoViewIfNeeded(option.ref.current);
|
|
297
311
|
}
|
|
298
312
|
event.preventDefault();
|
|
@@ -209,7 +209,9 @@ function LexicalMenu({
|
|
|
209
209
|
commandPriority = COMMAND_PRIORITY_LOW,
|
|
210
210
|
preselectFirstItem = true
|
|
211
211
|
}) {
|
|
212
|
-
const [
|
|
212
|
+
const [rawSelectedIndex, setHighlightedIndex] = useState(null);
|
|
213
|
+
// Clamp highlighted index if options list shrinks
|
|
214
|
+
const selectedIndex = rawSelectedIndex !== null ? Math.min(options.length - 1, rawSelectedIndex) : null;
|
|
213
215
|
const matchingString = resolution.match && resolution.match.matchingString;
|
|
214
216
|
useEffect(() => {
|
|
215
217
|
if (preselectFirstItem) {
|
|
@@ -262,7 +264,13 @@ function LexicalMenu({
|
|
|
262
264
|
const newSelectedIndex = selectedIndex === null ? 0 : selectedIndex !== options.length - 1 ? selectedIndex + 1 : 0;
|
|
263
265
|
updateSelectedIndex(newSelectedIndex);
|
|
264
266
|
const option = options[newSelectedIndex];
|
|
265
|
-
if (option
|
|
267
|
+
if (!option) {
|
|
268
|
+
updateSelectedIndex(-1);
|
|
269
|
+
event.preventDefault();
|
|
270
|
+
event.stopImmediatePropagation();
|
|
271
|
+
return true;
|
|
272
|
+
}
|
|
273
|
+
if (option.ref && option.ref.current) {
|
|
266
274
|
editor.dispatchCommand(SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND, {
|
|
267
275
|
index: newSelectedIndex,
|
|
268
276
|
option
|
|
@@ -278,7 +286,13 @@ function LexicalMenu({
|
|
|
278
286
|
const newSelectedIndex = selectedIndex === null ? options.length - 1 : selectedIndex !== 0 ? selectedIndex - 1 : options.length - 1;
|
|
279
287
|
updateSelectedIndex(newSelectedIndex);
|
|
280
288
|
const option = options[newSelectedIndex];
|
|
281
|
-
if (option
|
|
289
|
+
if (!option) {
|
|
290
|
+
updateSelectedIndex(-1);
|
|
291
|
+
event.preventDefault();
|
|
292
|
+
event.stopImmediatePropagation();
|
|
293
|
+
return true;
|
|
294
|
+
}
|
|
295
|
+
if (option.ref && option.ref.current) {
|
|
282
296
|
scrollIntoViewIfNeeded(option.ref.current);
|
|
283
297
|
}
|
|
284
298
|
event.preventDefault();
|
|
@@ -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"),
|
|
9
|
+
"use strict";var e=require("@lexical/react/LexicalComposerContext"),t=require("@lexical/utils"),n=require("lexical"),o=require("react"),l=require("react/jsx-runtime");function r(e){var t=Object.create(null);if(e)for(var n in e)t[n]=e[n];return t.default=e,t}var i=r(o);const u="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,s=u?o.useLayoutEffect:o.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(),o=t.getBoundingClientRect();return n.top>=o.top-6&&n.top<=o.bottom+6}function m(t,n,l,r){const[i]=e.useLexicalComposerContext();o.useEffect(()=>{if(null!=n&&null!=t){const e=i.getRootElement(),t=null!=e?function(e){let t=getComputedStyle(e);const n="absolute"===t.position,o=/(auto|scroll)/;if("fixed"===t.position)return document.body;for(let l=e;l=l.parentElement;)if(t=getComputedStyle(l),(!n||"static"!==t.position)&&o.test(t.overflow+t.overflowY+t.overflowX))return l;return document.body}(e):document.body;let o=!1,u=a(n,t);const s=function(){o||(window.requestAnimationFrame(function(){l(),o=!1}),o=!0);const e=a(n,t);e!==u&&(u=e,null!=r&&r(e))},c=new ResizeObserver(l);return window.addEventListener("resize",l),document.addEventListener("scroll",s,{capture:!0,passive:!0}),c.observe(n),()=>{c.unobserve(n),window.removeEventListener("resize",l),document.removeEventListener("scroll",s,!0)}}},[n,i,r,l,t])}const d=n.createCommand("SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND");function f({close:e,editor:l,anchorElementRef:r,resolution:i,options:u,menuRenderFn:a,onSelectOption:m,shouldSplitNodeWithQuery:f=!1,commandPriority:p=n.COMMAND_PRIORITY_LOW,preselectFirstItem:g=!0}){const[h,C]=o.useState(null),E=null!==h?Math.min(u.length-1,h):null,v=i.match&&i.match.matchingString;o.useEffect(()=>{g&&C(0)},[v,g]);const R=o.useCallback(t=>{l.update(()=>{const o=null!=i.match&&f?function(e){const t=n.$getSelection();if(!n.$isRangeSelection(t)||!t.isCollapsed())return null;const o=t.anchor;if("text"!==o.type)return null;const l=o.getNode();if(!l.isSimpleText())return null;const r=o.offset,i=l.getTextContent().slice(0,r),u=e.replaceableString.length,s=r-function(e,t,n){let o=n;for(let n=o;n<=t.length;n++)e.slice(-n)===t.substring(0,n)&&(o=n);return o}(i,e.matchingString,u);if(s<0)return null;let c;return 0===s?[c]=l.splitText(r):[,c]=l.splitText(s,r),c}(i.match):null;m(t,o,e,i.match?i.match.matchingString:"")})},[l,f,i.match,m,e]),b=o.useCallback(e=>{const t=l.getRootElement();null!==t&&(t.setAttribute("aria-activedescendant","typeahead-item-"+e),C(e))},[l]);o.useEffect(()=>()=>{const e=l.getRootElement();null!==e&&e.removeAttribute("aria-activedescendant")},[l]),s(()=>{null===u?C(null):null===E&&g&&b(0)},[u,E,b,g]),o.useEffect(()=>t.mergeRegister(l.registerCommand(d,({option:e})=>!(!e.ref||null==e.ref.current)&&(c(e.ref.current),!0),p)),[l,b,p]),o.useEffect(()=>t.mergeRegister(l.registerCommand(n.KEY_ARROW_DOWN_COMMAND,e=>{const t=e;if(null!==u&&u.length){const e=null===E?0:E!==u.length-1?E+1:0;b(e);const n=u[e];if(!n)return b(-1),t.preventDefault(),t.stopImmediatePropagation(),!0;n.ref&&n.ref.current&&l.dispatchCommand(d,{index:e,option:n}),t.preventDefault(),t.stopImmediatePropagation()}return!0},p),l.registerCommand(n.KEY_ARROW_UP_COMMAND,e=>{const t=e;if(null!==u&&u.length){const e=null===E?u.length-1:0!==E?E-1:u.length-1;b(e);const n=u[e];if(!n)return b(-1),t.preventDefault(),t.stopImmediatePropagation(),!0;n.ref&&n.ref.current&&c(n.ref.current),t.preventDefault(),t.stopImmediatePropagation()}return!0},p),l.registerCommand(n.KEY_ESCAPE_COMMAND,t=>{const n=t;return n.preventDefault(),n.stopImmediatePropagation(),e(),!0},p),l.registerCommand(n.KEY_TAB_COMMAND,e=>{const t=e;return null!==u&&null!==E&&null!=u[E]&&(t.preventDefault(),t.stopImmediatePropagation(),R(u[E]),!0)},p),l.registerCommand(n.KEY_ENTER_COMMAND,e=>null!==u&&null!==E&&null!=u[E]&&(null!==e&&(e.preventDefault(),e.stopImmediatePropagation()),R(u[E]),!0),p)),[R,e,l,u,E,b,p]);return a(r,o.useMemo(()=>({options:u,selectOptionAndCleanUp:R,selectedIndex:E,setHighlightedIndex:C}),[R,E,u]),i.match?i.match.matchingString:"")}function p(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.LexicalContextMenuPlugin=function({options:r,onWillOpen:s,onClose:c,onOpen:a,onSelectOption:d,menuRenderFn:g,anchorClassName:h,commandPriority:C=n.COMMAND_PRIORITY_LOW,parent:E}){const[v]=e.useLexicalComposerContext(),[R,b]=o.useState(null),w=i.useRef(null),x=function(t,n,l,r=(u?document.body:void 0),i=!0){const[s]=e.useLexicalComposerContext(),c=u?document.createElement("div"):null,a=o.useRef(c),d=o.useCallback(()=>{if(null===a.current||void 0===r)return;a.current.style.top=a.current.style.bottom;const e=s.getRootElement(),n=a.current,o=n.firstChild;if(null!==e&&null!==t){const{left:u,top:s,width:c,height:m}=t.getRect(),d=a.current.offsetHeight;if(n.style.top=`${s+d+3+(i?window.pageYOffset:0)}px`,n.style.left=`${u+window.pageXOffset}px`,n.style.height=`${m}px`,n.style.width=`${c}px`,null!==o){o.style.top=`${s}`;const t=o.getBoundingClientRect(),l=t.height,r=t.width,c=e.getBoundingClientRect();u+r>c.right&&(n.style.left=`${c.right-r+window.pageXOffset}px`),(s+l>window.innerHeight||s+l>c.bottom)&&s-c.top>l+m&&(n.style.top=`${s-l-m+(i?window.pageYOffset:0)}px`)}n.isConnected||(p(n,l),r.append(n)),n.setAttribute("id","typeahead-menu"),e.setAttribute("aria-controls","typeahead-menu")}},[s,t,i,l,r]);o.useEffect(()=>{const e=s.getRootElement();return null!==t&&d(),()=>{null!==e&&e.removeAttribute("aria-controls");const t=a.current;null!==t&&t.isConnected&&(t.remove(),t.removeAttribute("id"))}},[s,d,t]);const f=o.useCallback(e=>{null!==t&&(e||n(null))},[t,n]);return m(t,a.current,d,f),null!=c&&c===a.current&&(p(c,l),null!=r&&r.append(c)),a}(R,b,h,E),O=o.useCallback(()=>{b(null),null!=c&&null!==R&&c()},[c,R]),y=o.useCallback(e=>{b(e),null!=a&&null===R&&a(e)},[a,R]),A=o.useCallback(e=>{e.preventDefault(),null!=s&&s(e);const n=t.calculateZoomLevel(e.target);y({getRect:()=>new DOMRect(e.clientX/n,e.clientY/n,1,1)})},[y,s]),M=o.useCallback(e=>{null!==R&&null!=w.current&&null!=e.target&&n.isDOMNode(e.target)&&!w.current.contains(e.target)&&O()},[O,R]);return o.useEffect(()=>{const e=v.getRootElement();if(e)return e.addEventListener("contextmenu",A),()=>e.removeEventListener("contextmenu",A)},[v,A]),o.useEffect(()=>(document.addEventListener("click",M),()=>document.removeEventListener("click",M)),[v,M]),null===x.current||null===R||null===v?null:l.jsx(f,{close:O,resolution:R,editor:v,anchorElementRef:x,options:r,menuRenderFn:(e,t)=>g(e,t,{setMenuRef:e=>{w.current=e}}),onSelectOption:d,commandPriority:C})},exports.MenuOption=class{key;ref;constructor(e){this.key=e,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(e){this.ref={current:e}}};
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
import{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{mergeRegister as e,calculateZoomLevel as n}from"@lexical/utils";import{createCommand as o,COMMAND_PRIORITY_LOW as l,KEY_ARROW_DOWN_COMMAND as r,KEY_ARROW_UP_COMMAND as i,KEY_ESCAPE_COMMAND as u,KEY_TAB_COMMAND as c,KEY_ENTER_COMMAND as s,$getSelection as a,$isRangeSelection as m,isDOMNode as d}from"lexical";import*as p from"react";import{useLayoutEffect as f,useEffect as g,useRef as h,useCallback as v,useState as w,useMemo as y}from"react";import{jsx as b}from"react/jsx-runtime";const C="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,E=C?f:g;class R{key;ref;constructor(t){this.key=t,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(t){this.ref={current:t}}}const x=t=>{const e=document.getElementById("typeahead-menu");if(!e)return;const n=e.getBoundingClientRect();n.top+n.height>window.innerHeight&&e.scrollIntoView({block:"center"}),n.top<0&&e.scrollIntoView({block:"center"}),t.scrollIntoView({block:"nearest"})};function
|
|
9
|
+
import{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{mergeRegister as e,calculateZoomLevel as n}from"@lexical/utils";import{createCommand as o,COMMAND_PRIORITY_LOW as l,KEY_ARROW_DOWN_COMMAND as r,KEY_ARROW_UP_COMMAND as i,KEY_ESCAPE_COMMAND as u,KEY_TAB_COMMAND as c,KEY_ENTER_COMMAND as s,$getSelection as a,$isRangeSelection as m,isDOMNode as d}from"lexical";import*as p from"react";import{useLayoutEffect as f,useEffect as g,useRef as h,useCallback as v,useState as w,useMemo as y}from"react";import{jsx as b}from"react/jsx-runtime";const C="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,E=C?f:g;class R{key;ref;constructor(t){this.key=t,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(t){this.ref={current:t}}}const x=t=>{const e=document.getElementById("typeahead-menu");if(!e)return;const n=e.getBoundingClientRect();n.top+n.height>window.innerHeight&&e.scrollIntoView({block:"center"}),n.top<0&&e.scrollIntoView({block:"center"}),t.scrollIntoView({block:"nearest"})};function I(t,e){const n=t.getBoundingClientRect(),o=e.getBoundingClientRect();return n.top>=o.top-6&&n.top<=o.bottom+6}function O(e,n,o,l){const[r]=t();g(()=>{if(null!=n&&null!=e){const t=r.getRootElement(),e=null!=t?function(t){let e=getComputedStyle(t);const n="absolute"===e.position,o=/(auto|scroll)/;if("fixed"===e.position)return document.body;for(let l=t;l=l.parentElement;)if(e=getComputedStyle(l),(!n||"static"!==e.position)&&o.test(e.overflow+e.overflowY+e.overflowX))return l;return document.body}(t):document.body;let i=!1,u=I(n,e);const c=function(){i||(window.requestAnimationFrame(function(){o(),i=!1}),i=!0);const t=I(n,e);t!==u&&(u=t,null!=l&&l(t))},s=new ResizeObserver(o);return window.addEventListener("resize",o),document.addEventListener("scroll",c,{capture:!0,passive:!0}),s.observe(n),()=>{s.unobserve(n),window.removeEventListener("resize",o),document.removeEventListener("scroll",c,!0)}}},[n,r,l,o,e])}const A=o("SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND");function S({close:t,editor:n,anchorElementRef:o,resolution:d,options:p,menuRenderFn:f,onSelectOption:h,shouldSplitNodeWithQuery:b=!1,commandPriority:C=l,preselectFirstItem:R=!0}){const[I,O]=w(null),S=null!==I?Math.min(p.length-1,I):null,P=d.match&&d.match.matchingString;g(()=>{R&&O(0)},[P,R]);const D=v(e=>{n.update(()=>{const n=null!=d.match&&b?function(t){const e=a();if(!m(e)||!e.isCollapsed())return null;const n=e.anchor;if("text"!==n.type)return null;const o=n.getNode();if(!o.isSimpleText())return null;const l=n.offset,r=o.getTextContent().slice(0,l),i=t.replaceableString.length,u=l-function(t,e,n){let o=n;for(let n=o;n<=e.length;n++)t.slice(-n)===e.substring(0,n)&&(o=n);return o}(r,t.matchingString,i);if(u<0)return null;let c;return 0===u?[c]=o.splitText(l):[,c]=o.splitText(u,l),c}(d.match):null;h(e,n,t,d.match?d.match.matchingString:"")})},[n,b,d.match,h,t]),L=v(t=>{const e=n.getRootElement();null!==e&&(e.setAttribute("aria-activedescendant","typeahead-item-"+t),O(t))},[n]);g(()=>()=>{const t=n.getRootElement();null!==t&&t.removeAttribute("aria-activedescendant")},[n]),E(()=>{null===p?O(null):null===S&&R&&L(0)},[p,S,L,R]),g(()=>e(n.registerCommand(A,({option:t})=>!(!t.ref||null==t.ref.current)&&(x(t.ref.current),!0),C)),[n,L,C]),g(()=>e(n.registerCommand(r,t=>{const e=t;if(null!==p&&p.length){const t=null===S?0:S!==p.length-1?S+1:0;L(t);const o=p[t];if(!o)return L(-1),e.preventDefault(),e.stopImmediatePropagation(),!0;o.ref&&o.ref.current&&n.dispatchCommand(A,{index:t,option:o}),e.preventDefault(),e.stopImmediatePropagation()}return!0},C),n.registerCommand(i,t=>{const e=t;if(null!==p&&p.length){const t=null===S?p.length-1:0!==S?S-1:p.length-1;L(t);const n=p[t];if(!n)return L(-1),e.preventDefault(),e.stopImmediatePropagation(),!0;n.ref&&n.ref.current&&x(n.ref.current),e.preventDefault(),e.stopImmediatePropagation()}return!0},C),n.registerCommand(u,e=>{const n=e;return n.preventDefault(),n.stopImmediatePropagation(),t(),!0},C),n.registerCommand(c,t=>{const e=t;return null!==p&&null!==S&&null!=p[S]&&(e.preventDefault(),e.stopImmediatePropagation(),D(p[S]),!0)},C),n.registerCommand(s,t=>null!==p&&null!==S&&null!=p[S]&&(null!==t&&(t.preventDefault(),t.stopImmediatePropagation()),D(p[S]),!0),C)),[D,t,n,p,S,L,C]);return f(o,y(()=>({options:p,selectOptionAndCleanUp:D,selectedIndex:S,setHighlightedIndex:O}),[D,S,p]),d.match?d.match.matchingString:"")}function P(t,e){null!=e&&(t.className=e),t.setAttribute("aria-label","Typeahead menu"),t.setAttribute("role","listbox"),t.style.display="block",t.style.position="absolute"}function D({options:e,onWillOpen:o,onClose:r,onOpen:i,onSelectOption:u,menuRenderFn:c,anchorClassName:s,commandPriority:a=l,parent:m}){const[f]=t(),[y,E]=w(null),R=p.useRef(null),x=function(e,n,o,l=(C?document.body:void 0),r=!0){const[i]=t(),u=C?document.createElement("div"):null,c=h(u),s=v(()=>{if(null===c.current||void 0===l)return;c.current.style.top=c.current.style.bottom;const t=i.getRootElement(),n=c.current,u=n.firstChild;if(null!==t&&null!==e){const{left:i,top:s,width:a,height:m}=e.getRect(),d=c.current.offsetHeight;if(n.style.top=`${s+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=`${s}`;const e=u.getBoundingClientRect(),o=e.height,l=e.width,c=t.getBoundingClientRect();i+l>c.right&&(n.style.left=`${c.right-l+window.pageXOffset}px`),(s+o>window.innerHeight||s+o>c.bottom)&&s-c.top>o+m&&(n.style.top=`${s-o-m+(r?window.pageYOffset:0)}px`)}n.isConnected||(P(n,o),l.append(n)),n.setAttribute("id","typeahead-menu"),t.setAttribute("aria-controls","typeahead-menu")}},[i,e,r,o,l]);g(()=>{const t=i.getRootElement();return null!==e&&s(),()=>{null!==t&&t.removeAttribute("aria-controls");const e=c.current;null!==e&&e.isConnected&&(e.remove(),e.removeAttribute("id"))}},[i,s,e]);const a=v(t=>{null!==e&&(t||n(null))},[e,n]);return O(e,c.current,s,a),null!=u&&u===c.current&&(P(u,o),null!=l&&l.append(u)),c}(y,E,s,m),I=v(()=>{E(null),null!=r&&null!==y&&r()},[r,y]),A=v(t=>{E(t),null!=i&&null===y&&i(t)},[i,y]),D=v(t=>{t.preventDefault(),null!=o&&o(t);const e=n(t.target);A({getRect:()=>new DOMRect(t.clientX/e,t.clientY/e,1,1)})},[A,o]),L=v(t=>{null!==y&&null!=R.current&&null!=t.target&&d(t.target)&&!R.current.contains(t.target)&&I()},[I,y]);return g(()=>{const t=f.getRootElement();if(t)return t.addEventListener("contextmenu",D),()=>t.removeEventListener("contextmenu",D)},[f,D]),g(()=>(document.addEventListener("click",L),()=>document.removeEventListener("click",L)),[f,L]),null===x.current||null===y||null===f?null:b(S,{close:I,resolution:y,editor:f,anchorElementRef:x,options:e,menuRenderFn:(t,e)=>c(t,e,{setMenuRef:t=>{R.current=t}}),onSelectOption:u,commandPriority:a})}export{D as LexicalContextMenuPlugin,R as MenuOption};
|
|
@@ -231,7 +231,9 @@ function LexicalMenu({
|
|
|
231
231
|
commandPriority = lexical.COMMAND_PRIORITY_LOW,
|
|
232
232
|
preselectFirstItem = true
|
|
233
233
|
}) {
|
|
234
|
-
const [
|
|
234
|
+
const [rawSelectedIndex, setHighlightedIndex] = React.useState(null);
|
|
235
|
+
// Clamp highlighted index if options list shrinks
|
|
236
|
+
const selectedIndex = rawSelectedIndex !== null ? Math.min(options.length - 1, rawSelectedIndex) : null;
|
|
235
237
|
const matchingString = resolution.match && resolution.match.matchingString;
|
|
236
238
|
React.useEffect(() => {
|
|
237
239
|
if (preselectFirstItem) {
|
|
@@ -284,7 +286,13 @@ function LexicalMenu({
|
|
|
284
286
|
const newSelectedIndex = selectedIndex === null ? 0 : selectedIndex !== options.length - 1 ? selectedIndex + 1 : 0;
|
|
285
287
|
updateSelectedIndex(newSelectedIndex);
|
|
286
288
|
const option = options[newSelectedIndex];
|
|
287
|
-
if (option
|
|
289
|
+
if (!option) {
|
|
290
|
+
updateSelectedIndex(-1);
|
|
291
|
+
event.preventDefault();
|
|
292
|
+
event.stopImmediatePropagation();
|
|
293
|
+
return true;
|
|
294
|
+
}
|
|
295
|
+
if (option.ref && option.ref.current) {
|
|
288
296
|
editor.dispatchCommand(SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND, {
|
|
289
297
|
index: newSelectedIndex,
|
|
290
298
|
option
|
|
@@ -300,7 +308,13 @@ function LexicalMenu({
|
|
|
300
308
|
const newSelectedIndex = selectedIndex === null ? options.length - 1 : selectedIndex !== 0 ? selectedIndex - 1 : options.length - 1;
|
|
301
309
|
updateSelectedIndex(newSelectedIndex);
|
|
302
310
|
const option = options[newSelectedIndex];
|
|
303
|
-
if (option
|
|
311
|
+
if (!option) {
|
|
312
|
+
updateSelectedIndex(-1);
|
|
313
|
+
event.preventDefault();
|
|
314
|
+
event.stopImmediatePropagation();
|
|
315
|
+
return true;
|
|
316
|
+
}
|
|
317
|
+
if (option.ref && option.ref.current) {
|
|
304
318
|
scrollIntoViewIfNeeded(option.ref.current);
|
|
305
319
|
}
|
|
306
320
|
event.preventDefault();
|
|
@@ -229,7 +229,9 @@ function LexicalMenu({
|
|
|
229
229
|
commandPriority = COMMAND_PRIORITY_LOW,
|
|
230
230
|
preselectFirstItem = true
|
|
231
231
|
}) {
|
|
232
|
-
const [
|
|
232
|
+
const [rawSelectedIndex, setHighlightedIndex] = useState(null);
|
|
233
|
+
// Clamp highlighted index if options list shrinks
|
|
234
|
+
const selectedIndex = rawSelectedIndex !== null ? Math.min(options.length - 1, rawSelectedIndex) : null;
|
|
233
235
|
const matchingString = resolution.match && resolution.match.matchingString;
|
|
234
236
|
useEffect(() => {
|
|
235
237
|
if (preselectFirstItem) {
|
|
@@ -282,7 +284,13 @@ function LexicalMenu({
|
|
|
282
284
|
const newSelectedIndex = selectedIndex === null ? 0 : selectedIndex !== options.length - 1 ? selectedIndex + 1 : 0;
|
|
283
285
|
updateSelectedIndex(newSelectedIndex);
|
|
284
286
|
const option = options[newSelectedIndex];
|
|
285
|
-
if (option
|
|
287
|
+
if (!option) {
|
|
288
|
+
updateSelectedIndex(-1);
|
|
289
|
+
event.preventDefault();
|
|
290
|
+
event.stopImmediatePropagation();
|
|
291
|
+
return true;
|
|
292
|
+
}
|
|
293
|
+
if (option.ref && option.ref.current) {
|
|
286
294
|
editor.dispatchCommand(SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND, {
|
|
287
295
|
index: newSelectedIndex,
|
|
288
296
|
option
|
|
@@ -298,7 +306,13 @@ function LexicalMenu({
|
|
|
298
306
|
const newSelectedIndex = selectedIndex === null ? options.length - 1 : selectedIndex !== 0 ? selectedIndex - 1 : options.length - 1;
|
|
299
307
|
updateSelectedIndex(newSelectedIndex);
|
|
300
308
|
const option = options[newSelectedIndex];
|
|
301
|
-
if (option
|
|
309
|
+
if (!option) {
|
|
310
|
+
updateSelectedIndex(-1);
|
|
311
|
+
event.preventDefault();
|
|
312
|
+
event.stopImmediatePropagation();
|
|
313
|
+
return true;
|
|
314
|
+
}
|
|
315
|
+
if (option.ref && option.ref.current) {
|
|
302
316
|
scrollIntoViewIfNeeded(option.ref.current);
|
|
303
317
|
}
|
|
304
318
|
event.preventDefault();
|
|
@@ -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"),o=require("@lexical/utils"),l=require("react/jsx-runtime");const r="startTransition";const i="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,u=i?n.useLayoutEffect:n.useEffect;const s=e=>{const t=document.getElementById("typeahead-menu");if(!t)return;const n=t.getBoundingClientRect();n.top+n.height>window.innerHeight&&t.scrollIntoView({block:"center"}),n.top<0&&t.scrollIntoView({block:"center"}),e.scrollIntoView({block:"nearest"})};function c(e,t){const n=e.getBoundingClientRect(),o=t.getBoundingClientRect();return n.top>=o.top-6&&n.top<=o.bottom+6}function a(t,o,l,r){const[i]=e.useLexicalComposerContext();n.useEffect(()=>{if(null!=o&&null!=t){const e=i.getRootElement(),t=null!=e?function(e){let t=getComputedStyle(e);const n="absolute"===t.position,o=/(auto|scroll)/;if("fixed"===t.position)return document.body;for(let l=e;l=l.parentElement;)if(t=getComputedStyle(l),(!n||"static"!==t.position)&&o.test(t.overflow+t.overflowY+t.overflowX))return l;return document.body}(e):document.body;let n=!1,u=c(o,t);const s=function(){n||(window.requestAnimationFrame(function(){l(),n=!1}),n=!0);const e=c(o,t);e!==u&&(u=e,null!=r&&r(e))},a=new ResizeObserver(l);return window.addEventListener("resize",l),document.addEventListener("scroll",s,{capture:!0,passive:!0}),a.observe(o),()=>{a.unobserve(o),window.removeEventListener("resize",l),document.removeEventListener("scroll",s,!0)}}},[o,i,r,l,t])}const d=t.createCommand("SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND");function m({close:e,editor:l,anchorElementRef:r,resolution:i,options:c,menuRenderFn:a,onSelectOption:m,shouldSplitNodeWithQuery:f=!1,commandPriority:p=t.COMMAND_PRIORITY_LOW,preselectFirstItem:g=!0}){const[h,C]=n.useState(null),E=null!==h?Math.min(c.length-1,h):null,y=i.match&&i.match.matchingString;n.useEffect(()=>{g&&C(0)},[y,g]);const b=n.useCallback(n=>{l.update(()=>{const o=null!=i.match&&f?function(e){const n=t.$getSelection();if(!t.$isRangeSelection(n)||!n.isCollapsed())return null;const o=n.anchor;if("text"!==o.type)return null;const l=o.getNode();if(!l.isSimpleText())return null;const r=o.offset,i=l.getTextContent().slice(0,r),u=e.replaceableString.length,s=r-function(e,t,n){let o=n;for(let n=o;n<=t.length;n++)e.slice(-n)===t.substring(0,n)&&(o=n);return o}(i,e.matchingString,u);if(s<0)return null;let c;return 0===s?[c]=l.splitText(r):[,c]=l.splitText(s,r),c}(i.match):null;m(n,o,e,i.match?i.match.matchingString:"")})},[l,f,i.match,m,e]),R=n.useCallback(e=>{const t=l.getRootElement();null!==t&&(t.setAttribute("aria-activedescendant","typeahead-item-"+e),C(e))},[l]);n.useEffect(()=>()=>{const e=l.getRootElement();null!==e&&e.removeAttribute("aria-activedescendant")},[l]),u(()=>{null===c?C(null):null===E&&g&&R(0)},[c,E,R,g]),n.useEffect(()=>o.mergeRegister(l.registerCommand(d,({option:e})=>!(!e.ref||null==e.ref.current)&&(s(e.ref.current),!0),p)),[l,R,p]),n.useEffect(()=>o.mergeRegister(l.registerCommand(t.KEY_ARROW_DOWN_COMMAND,e=>{const t=e;if(null!==c&&c.length){const e=null===E?0:E!==c.length-1?E+1:0;R(e);const n=c[e];if(!n)return R(-1),t.preventDefault(),t.stopImmediatePropagation(),!0;n.ref&&n.ref.current&&l.dispatchCommand(d,{index:e,option:n}),t.preventDefault(),t.stopImmediatePropagation()}return!0},p),l.registerCommand(t.KEY_ARROW_UP_COMMAND,e=>{const t=e;if(null!==c&&c.length){const e=null===E?c.length-1:0!==E?E-1:c.length-1;R(e);const n=c[e];if(!n)return R(-1),t.preventDefault(),t.stopImmediatePropagation(),!0;n.ref&&n.ref.current&&s(n.ref.current),t.preventDefault(),t.stopImmediatePropagation()}return!0},p),l.registerCommand(t.KEY_ESCAPE_COMMAND,t=>{const n=t;return n.preventDefault(),n.stopImmediatePropagation(),e(),!0},p),l.registerCommand(t.KEY_TAB_COMMAND,e=>{const t=e;return null!==c&&null!==E&&null!=c[E]&&(t.preventDefault(),t.stopImmediatePropagation(),b(c[E]),!0)},p),l.registerCommand(t.KEY_ENTER_COMMAND,e=>null!==c&&null!==E&&null!=c[E]&&(null!==e&&(e.preventDefault(),e.stopImmediatePropagation()),b(c[E]),!0),p)),[b,e,l,c,E,R,p]);return a(r,n.useMemo(()=>({options:c,selectOptionAndCleanUp:b,selectedIndex:E,setHighlightedIndex:C}),[b,E,c]),i.match?i.match.matchingString:"")}function f(e,t){null!=t&&(e.className=t),e.setAttribute("aria-label","Typeahead menu"),e.setAttribute("role","listbox"),e.style.display="block",e.style.position="absolute"}exports.LexicalNodeMenuPlugin=function({options:o,nodeKey:u,onClose:s,onOpen:c,onSelectOption:d,menuRenderFn:p,anchorClassName:g,commandPriority:h=t.COMMAND_PRIORITY_LOW,parent:C}){const[E]=e.useLexicalComposerContext(),[y,b]=n.useState(null),R=function(t,o,l,r=(i?document.body:void 0),u=!0){const[s]=e.useLexicalComposerContext(),c=i?document.createElement("div"):null,d=n.useRef(c),m=n.useCallback(()=>{if(null===d.current||void 0===r)return;d.current.style.top=d.current.style.bottom;const e=s.getRootElement(),n=d.current,o=n.firstChild;if(null!==e&&null!==t){const{left:i,top:s,width:c,height:a}=t.getRect(),m=d.current.offsetHeight;if(n.style.top=`${s+m+3+(u?window.pageYOffset:0)}px`,n.style.left=`${i+window.pageXOffset}px`,n.style.height=`${a}px`,n.style.width=`${c}px`,null!==o){o.style.top=`${s}`;const t=o.getBoundingClientRect(),l=t.height,r=t.width,c=e.getBoundingClientRect();i+r>c.right&&(n.style.left=`${c.right-r+window.pageXOffset}px`),(s+l>window.innerHeight||s+l>c.bottom)&&s-c.top>l+a&&(n.style.top=`${s-l-a+(u?window.pageYOffset:0)}px`)}n.isConnected||(f(n,l),r.append(n)),n.setAttribute("id","typeahead-menu"),e.setAttribute("aria-controls","typeahead-menu")}},[s,t,u,l,r]);n.useEffect(()=>{const e=s.getRootElement();return null!==t&&m(),()=>{null!==e&&e.removeAttribute("aria-controls");const t=d.current;null!==t&&t.isConnected&&(t.remove(),t.removeAttribute("id"))}},[s,m,t]);const p=n.useCallback(e=>{null!==t&&(e||o(null))},[t,o]);return a(t,d.current,m,p),null!=c&&c===d.current&&(f(c,l),null!=r&&r.append(c)),d}(y,b,g,C),w=n.useCallback(()=>{b(null),null!=s&&null!==y&&s()},[s,y]),v=n.useCallback(e=>{b(e),null!=c&&null===y&&c(e)},[c,y]),x=n.useCallback(()=>{u?E.update(()=>{const e=t.$getNodeByKey(u),o=E.getElementByKey(u);var l;null!=e&&null!=o&&null==y&&(l=()=>v({getRect:()=>o.getBoundingClientRect()}),r in n?n[r](l):l())}):null==u&&null!=y&&w()},[w,E,u,v,y]);return n.useEffect(()=>{x()},[x,u]),n.useEffect(()=>{if(null!=u)return E.registerUpdateListener(({dirtyElements:e})=>{e.get(u)&&x()})},[E,x,u]),null===R.current||null===y||null===E?null:l.jsx(m,{close:w,resolution:y,editor:E,anchorElementRef:R,options:o,menuRenderFn:p,onSelectOption:d,commandPriority:h})},exports.MenuOption=class{key;ref;constructor(e){this.key=e,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(e){this.ref={current:e}}};
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
import{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{createCommand as e,COMMAND_PRIORITY_LOW as n,KEY_ARROW_DOWN_COMMAND as o,KEY_ARROW_UP_COMMAND as l,KEY_ESCAPE_COMMAND as r,KEY_TAB_COMMAND as i,KEY_ENTER_COMMAND as u,$getSelection as s,$isRangeSelection as c,$getNodeByKey as a}from"lexical";import m,{useLayoutEffect as d,useEffect as p,useRef as f,useCallback as g,useState as h,useMemo as y}from"react";import{mergeRegister as w}from"@lexical/utils";import{jsx as v}from"react/jsx-runtime";const b="startTransition";const C="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,x=C?d:p;class E{key;ref;constructor(t){this.key=t,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(t){this.ref={current:t}}}const R=t=>{const e=document.getElementById("typeahead-menu");if(!e)return;const n=e.getBoundingClientRect();n.top+n.height>window.innerHeight&&e.scrollIntoView({block:"center"}),n.top<0&&e.scrollIntoView({block:"center"}),t.scrollIntoView({block:"nearest"})};function I(t,e){const n=t.getBoundingClientRect(),o=e.getBoundingClientRect();return n.top>=o.top-6&&n.top<=o.bottom+6}function O(e,n,o,l){const[r]=t();p(()=>{if(null!=n&&null!=e){const t=r.getRootElement(),e=null!=t?function(t){let e=getComputedStyle(t);const n="absolute"===e.position,o=/(auto|scroll)/;if("fixed"===e.position)return document.body;for(let l=t;l=l.parentElement;)if(e=getComputedStyle(l),(!n||"static"!==e.position)&&o.test(e.overflow+e.overflowY+e.overflowX))return l;return document.body}(t):document.body;let i=!1,u=I(n,e);const s=function(){i||(window.requestAnimationFrame(function(){o(),i=!1}),i=!0);const t=I(n,e);t!==u&&(u=t,null!=l&&l(t))},c=new ResizeObserver(o);return window.addEventListener("resize",o),document.addEventListener("scroll",s,{capture:!0,passive:!0}),c.observe(n),()=>{c.unobserve(n),window.removeEventListener("resize",o),document.removeEventListener("scroll",s,!0)}}},[n,r,l,o,e])}const A=e("SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND");function S({close:t,editor:e,anchorElementRef:a,resolution:m,options:d,menuRenderFn:f,onSelectOption:v,shouldSplitNodeWithQuery:b=!1,commandPriority:C=n,preselectFirstItem:E=!0}){const[I,O]=h(null),S=m.match&&m.match.matchingString;p(()=>{E&&O(0)},[
|
|
9
|
+
import{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{createCommand as e,COMMAND_PRIORITY_LOW as n,KEY_ARROW_DOWN_COMMAND as o,KEY_ARROW_UP_COMMAND as l,KEY_ESCAPE_COMMAND as r,KEY_TAB_COMMAND as i,KEY_ENTER_COMMAND as u,$getSelection as s,$isRangeSelection as c,$getNodeByKey as a}from"lexical";import m,{useLayoutEffect as d,useEffect as p,useRef as f,useCallback as g,useState as h,useMemo as y}from"react";import{mergeRegister as w}from"@lexical/utils";import{jsx as v}from"react/jsx-runtime";const b="startTransition";const C="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,x=C?d:p;class E{key;ref;constructor(t){this.key=t,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(t){this.ref={current:t}}}const R=t=>{const e=document.getElementById("typeahead-menu");if(!e)return;const n=e.getBoundingClientRect();n.top+n.height>window.innerHeight&&e.scrollIntoView({block:"center"}),n.top<0&&e.scrollIntoView({block:"center"}),t.scrollIntoView({block:"nearest"})};function I(t,e){const n=t.getBoundingClientRect(),o=e.getBoundingClientRect();return n.top>=o.top-6&&n.top<=o.bottom+6}function O(e,n,o,l){const[r]=t();p(()=>{if(null!=n&&null!=e){const t=r.getRootElement(),e=null!=t?function(t){let e=getComputedStyle(t);const n="absolute"===e.position,o=/(auto|scroll)/;if("fixed"===e.position)return document.body;for(let l=t;l=l.parentElement;)if(e=getComputedStyle(l),(!n||"static"!==e.position)&&o.test(e.overflow+e.overflowY+e.overflowX))return l;return document.body}(t):document.body;let i=!1,u=I(n,e);const s=function(){i||(window.requestAnimationFrame(function(){o(),i=!1}),i=!0);const t=I(n,e);t!==u&&(u=t,null!=l&&l(t))},c=new ResizeObserver(o);return window.addEventListener("resize",o),document.addEventListener("scroll",s,{capture:!0,passive:!0}),c.observe(n),()=>{c.unobserve(n),window.removeEventListener("resize",o),document.removeEventListener("scroll",s,!0)}}},[n,r,l,o,e])}const A=e("SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND");function S({close:t,editor:e,anchorElementRef:a,resolution:m,options:d,menuRenderFn:f,onSelectOption:v,shouldSplitNodeWithQuery:b=!1,commandPriority:C=n,preselectFirstItem:E=!0}){const[I,O]=h(null),S=null!==I?Math.min(d.length-1,I):null,P=m.match&&m.match.matchingString;p(()=>{E&&O(0)},[P,E]);const D=g(n=>{e.update(()=>{const e=null!=m.match&&b?function(t){const e=s();if(!c(e)||!e.isCollapsed())return null;const n=e.anchor;if("text"!==n.type)return null;const o=n.getNode();if(!o.isSimpleText())return null;const l=n.offset,r=o.getTextContent().slice(0,l),i=t.replaceableString.length,u=l-function(t,e,n){let o=n;for(let n=o;n<=e.length;n++)t.slice(-n)===e.substring(0,n)&&(o=n);return o}(r,t.matchingString,i);if(u<0)return null;let a;return 0===u?[a]=o.splitText(l):[,a]=o.splitText(u,l),a}(m.match):null;v(n,e,t,m.match?m.match.matchingString:"")})},[e,b,m.match,v,t]),T=g(t=>{const n=e.getRootElement();null!==n&&(n.setAttribute("aria-activedescendant","typeahead-item-"+t),O(t))},[e]);p(()=>()=>{const t=e.getRootElement();null!==t&&t.removeAttribute("aria-activedescendant")},[e]),x(()=>{null===d?O(null):null===S&&E&&T(0)},[d,S,T,E]),p(()=>w(e.registerCommand(A,({option:t})=>!(!t.ref||null==t.ref.current)&&(R(t.ref.current),!0),C)),[e,T,C]),p(()=>w(e.registerCommand(o,t=>{const n=t;if(null!==d&&d.length){const t=null===S?0:S!==d.length-1?S+1:0;T(t);const o=d[t];if(!o)return T(-1),n.preventDefault(),n.stopImmediatePropagation(),!0;o.ref&&o.ref.current&&e.dispatchCommand(A,{index:t,option:o}),n.preventDefault(),n.stopImmediatePropagation()}return!0},C),e.registerCommand(l,t=>{const e=t;if(null!==d&&d.length){const t=null===S?d.length-1:0!==S?S-1:d.length-1;T(t);const n=d[t];if(!n)return T(-1),e.preventDefault(),e.stopImmediatePropagation(),!0;n.ref&&n.ref.current&&R(n.ref.current),e.preventDefault(),e.stopImmediatePropagation()}return!0},C),e.registerCommand(r,e=>{const n=e;return n.preventDefault(),n.stopImmediatePropagation(),t(),!0},C),e.registerCommand(i,t=>{const e=t;return null!==d&&null!==S&&null!=d[S]&&(e.preventDefault(),e.stopImmediatePropagation(),D(d[S]),!0)},C),e.registerCommand(u,t=>null!==d&&null!==S&&null!=d[S]&&(null!==t&&(t.preventDefault(),t.stopImmediatePropagation()),D(d[S]),!0),C)),[D,t,e,d,S,T,C]);return f(a,y(()=>({options:d,selectOptionAndCleanUp:D,selectedIndex:S,setHighlightedIndex:O}),[D,S,d]),m.match?m.match.matchingString:"")}function P(t,e){null!=e&&(t.className=e),t.setAttribute("aria-label","Typeahead menu"),t.setAttribute("role","listbox"),t.style.display="block",t.style.position="absolute"}function D({options:e,nodeKey:o,onClose:l,onOpen:r,onSelectOption:i,menuRenderFn:u,anchorClassName:s,commandPriority:c=n,parent:d}){const[y]=t(),[w,x]=h(null),E=function(e,n,o,l=(C?document.body:void 0),r=!0){const[i]=t(),u=C?document.createElement("div"):null,s=f(u),c=g(()=>{if(null===s.current||void 0===l)return;s.current.style.top=s.current.style.bottom;const t=i.getRootElement(),n=s.current,u=n.firstChild;if(null!==t&&null!==e){const{left:i,top:c,width:a,height:m}=e.getRect(),d=s.current.offsetHeight;if(n.style.top=`${c+d+3+(r?window.pageYOffset:0)}px`,n.style.left=`${i+window.pageXOffset}px`,n.style.height=`${m}px`,n.style.width=`${a}px`,null!==u){u.style.top=`${c}`;const e=u.getBoundingClientRect(),o=e.height,l=e.width,s=t.getBoundingClientRect();i+l>s.right&&(n.style.left=`${s.right-l+window.pageXOffset}px`),(c+o>window.innerHeight||c+o>s.bottom)&&c-s.top>o+m&&(n.style.top=`${c-o-m+(r?window.pageYOffset:0)}px`)}n.isConnected||(P(n,o),l.append(n)),n.setAttribute("id","typeahead-menu"),t.setAttribute("aria-controls","typeahead-menu")}},[i,e,r,o,l]);p(()=>{const t=i.getRootElement();return null!==e&&c(),()=>{null!==t&&t.removeAttribute("aria-controls");const e=s.current;null!==e&&e.isConnected&&(e.remove(),e.removeAttribute("id"))}},[i,c,e]);const a=g(t=>{null!==e&&(t||n(null))},[e,n]);return O(e,s.current,c,a),null!=u&&u===s.current&&(P(u,o),null!=l&&l.append(u)),s}(w,x,s,d),R=g(()=>{x(null),null!=l&&null!==w&&l()},[l,w]),I=g(t=>{x(t),null!=r&&null===w&&r(t)},[r,w]),A=g(()=>{o?y.update(()=>{const t=a(o),e=y.getElementByKey(o);var n;null!=t&&null!=e&&null==w&&(n=()=>I({getRect:()=>e.getBoundingClientRect()}),b in m?m[b](n):n())}):null==o&&null!=w&&R()},[R,y,o,I,w]);return p(()=>{A()},[A,o]),p(()=>{if(null!=o)return y.registerUpdateListener(({dirtyElements:t})=>{t.get(o)&&A()})},[y,A,o]),null===E.current||null===w||null===y?null:v(S,{close:R,resolution:w,editor:y,anchorElementRef:E,options:e,menuRenderFn:u,onSelectOption:i,commandPriority:c})}export{D as LexicalNodeMenuPlugin,E as MenuOption};
|
|
@@ -231,7 +231,9 @@ function LexicalMenu({
|
|
|
231
231
|
commandPriority = lexical.COMMAND_PRIORITY_LOW,
|
|
232
232
|
preselectFirstItem = true
|
|
233
233
|
}) {
|
|
234
|
-
const [
|
|
234
|
+
const [rawSelectedIndex, setHighlightedIndex] = React.useState(null);
|
|
235
|
+
// Clamp highlighted index if options list shrinks
|
|
236
|
+
const selectedIndex = rawSelectedIndex !== null ? Math.min(options.length - 1, rawSelectedIndex) : null;
|
|
235
237
|
const matchingString = resolution.match && resolution.match.matchingString;
|
|
236
238
|
React.useEffect(() => {
|
|
237
239
|
if (preselectFirstItem) {
|
|
@@ -284,7 +286,13 @@ function LexicalMenu({
|
|
|
284
286
|
const newSelectedIndex = selectedIndex === null ? 0 : selectedIndex !== options.length - 1 ? selectedIndex + 1 : 0;
|
|
285
287
|
updateSelectedIndex(newSelectedIndex);
|
|
286
288
|
const option = options[newSelectedIndex];
|
|
287
|
-
if (option
|
|
289
|
+
if (!option) {
|
|
290
|
+
updateSelectedIndex(-1);
|
|
291
|
+
event.preventDefault();
|
|
292
|
+
event.stopImmediatePropagation();
|
|
293
|
+
return true;
|
|
294
|
+
}
|
|
295
|
+
if (option.ref && option.ref.current) {
|
|
288
296
|
editor.dispatchCommand(SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND$1, {
|
|
289
297
|
index: newSelectedIndex,
|
|
290
298
|
option
|
|
@@ -300,7 +308,13 @@ function LexicalMenu({
|
|
|
300
308
|
const newSelectedIndex = selectedIndex === null ? options.length - 1 : selectedIndex !== 0 ? selectedIndex - 1 : options.length - 1;
|
|
301
309
|
updateSelectedIndex(newSelectedIndex);
|
|
302
310
|
const option = options[newSelectedIndex];
|
|
303
|
-
if (option
|
|
311
|
+
if (!option) {
|
|
312
|
+
updateSelectedIndex(-1);
|
|
313
|
+
event.preventDefault();
|
|
314
|
+
event.stopImmediatePropagation();
|
|
315
|
+
return true;
|
|
316
|
+
}
|
|
317
|
+
if (option.ref && option.ref.current) {
|
|
304
318
|
scrollIntoViewIfNeeded(option.ref.current);
|
|
305
319
|
}
|
|
306
320
|
event.preventDefault();
|
|
@@ -229,7 +229,9 @@ function LexicalMenu({
|
|
|
229
229
|
commandPriority = COMMAND_PRIORITY_LOW,
|
|
230
230
|
preselectFirstItem = true
|
|
231
231
|
}) {
|
|
232
|
-
const [
|
|
232
|
+
const [rawSelectedIndex, setHighlightedIndex] = useState(null);
|
|
233
|
+
// Clamp highlighted index if options list shrinks
|
|
234
|
+
const selectedIndex = rawSelectedIndex !== null ? Math.min(options.length - 1, rawSelectedIndex) : null;
|
|
233
235
|
const matchingString = resolution.match && resolution.match.matchingString;
|
|
234
236
|
useEffect(() => {
|
|
235
237
|
if (preselectFirstItem) {
|
|
@@ -282,7 +284,13 @@ function LexicalMenu({
|
|
|
282
284
|
const newSelectedIndex = selectedIndex === null ? 0 : selectedIndex !== options.length - 1 ? selectedIndex + 1 : 0;
|
|
283
285
|
updateSelectedIndex(newSelectedIndex);
|
|
284
286
|
const option = options[newSelectedIndex];
|
|
285
|
-
if (option
|
|
287
|
+
if (!option) {
|
|
288
|
+
updateSelectedIndex(-1);
|
|
289
|
+
event.preventDefault();
|
|
290
|
+
event.stopImmediatePropagation();
|
|
291
|
+
return true;
|
|
292
|
+
}
|
|
293
|
+
if (option.ref && option.ref.current) {
|
|
286
294
|
editor.dispatchCommand(SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND$1, {
|
|
287
295
|
index: newSelectedIndex,
|
|
288
296
|
option
|
|
@@ -298,7 +306,13 @@ function LexicalMenu({
|
|
|
298
306
|
const newSelectedIndex = selectedIndex === null ? options.length - 1 : selectedIndex !== 0 ? selectedIndex - 1 : options.length - 1;
|
|
299
307
|
updateSelectedIndex(newSelectedIndex);
|
|
300
308
|
const option = options[newSelectedIndex];
|
|
301
|
-
if (option
|
|
309
|
+
if (!option) {
|
|
310
|
+
updateSelectedIndex(-1);
|
|
311
|
+
event.preventDefault();
|
|
312
|
+
event.stopImmediatePropagation();
|
|
313
|
+
return true;
|
|
314
|
+
}
|
|
315
|
+
if (option.ref && option.ref.current) {
|
|
302
316
|
scrollIntoViewIfNeeded(option.ref.current);
|
|
303
317
|
}
|
|
304
318
|
event.preventDefault();
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
"use strict";var e=require("@lexical/react/LexicalComposerContext"),t=require("lexical"),n=require("react"),o=require("@lexical/utils"),
|
|
9
|
+
"use strict";var e=require("@lexical/react/LexicalComposerContext"),t=require("lexical"),n=require("react"),o=require("@lexical/utils"),r=require("react/jsx-runtime");const l="startTransition";const i="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,s=i?n.useLayoutEffect:n.useEffect;const u=e=>{const t=document.getElementById("typeahead-menu");if(!t)return;const n=t.getBoundingClientRect();n.top+n.height>window.innerHeight&&t.scrollIntoView({block:"center"}),n.top<0&&t.scrollIntoView({block:"center"}),e.scrollIntoView({block:"nearest"})};function c(e,t){const n=e.getBoundingClientRect(),o=t.getBoundingClientRect();return n.top>=o.top-6&&n.top<=o.bottom+6}function a(t,o,r,l){const[i]=e.useLexicalComposerContext();n.useEffect(()=>{if(null!=o&&null!=t){const e=i.getRootElement(),t=null!=e?function(e){let t=getComputedStyle(e);const n="absolute"===t.position,o=/(auto|scroll)/;if("fixed"===t.position)return document.body;for(let r=e;r=r.parentElement;)if(t=getComputedStyle(r),(!n||"static"!==t.position)&&o.test(t.overflow+t.overflowY+t.overflowX))return r;return document.body}(e):document.body;let n=!1,s=c(o,t);const u=function(){n||(window.requestAnimationFrame(function(){r(),n=!1}),n=!0);const e=c(o,t);e!==s&&(s=e,null!=l&&l(e))},a=new ResizeObserver(r);return window.addEventListener("resize",r),document.addEventListener("scroll",u,{capture:!0,passive:!0}),a.observe(o),()=>{a.unobserve(o),window.removeEventListener("resize",r),document.removeEventListener("scroll",u,!0)}}},[o,i,l,r,t])}const d=t.createCommand("SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND");function f({close:e,editor:r,anchorElementRef:l,resolution:i,options:c,menuRenderFn:a,onSelectOption:f,shouldSplitNodeWithQuery:m=!1,commandPriority:p=t.COMMAND_PRIORITY_LOW,preselectFirstItem:g=!0}){const[h,C]=n.useState(null),E=null!==h?Math.min(c.length-1,h):null,x=i.match&&i.match.matchingString;n.useEffect(()=>{g&&C(0)},[x,g]);const y=n.useCallback(n=>{r.update(()=>{const o=null!=i.match&&m?function(e){const n=t.$getSelection();if(!t.$isRangeSelection(n)||!n.isCollapsed())return null;const o=n.anchor;if("text"!==o.type)return null;const r=o.getNode();if(!r.isSimpleText())return null;const l=o.offset,i=r.getTextContent().slice(0,l),s=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}(i,e.matchingString,s);if(u<0)return null;let c;return 0===u?[c]=r.splitText(l):[,c]=r.splitText(u,l),c}(i.match):null;f(n,o,e,i.match?i.match.matchingString:"")})},[r,m,i.match,f,e]),O=n.useCallback(e=>{const t=r.getRootElement();null!==t&&(t.setAttribute("aria-activedescendant","typeahead-item-"+e),C(e))},[r]);n.useEffect(()=>()=>{const e=r.getRootElement();null!==e&&e.removeAttribute("aria-activedescendant")},[r]),s(()=>{null===c?C(null):null===E&&g&&O(0)},[c,E,O,g]),n.useEffect(()=>o.mergeRegister(r.registerCommand(d,({option:e})=>!(!e.ref||null==e.ref.current)&&(u(e.ref.current),!0),p)),[r,O,p]),n.useEffect(()=>o.mergeRegister(r.registerCommand(t.KEY_ARROW_DOWN_COMMAND,e=>{const t=e;if(null!==c&&c.length){const e=null===E?0:E!==c.length-1?E+1:0;O(e);const n=c[e];if(!n)return O(-1),t.preventDefault(),t.stopImmediatePropagation(),!0;n.ref&&n.ref.current&&r.dispatchCommand(d,{index:e,option:n}),t.preventDefault(),t.stopImmediatePropagation()}return!0},p),r.registerCommand(t.KEY_ARROW_UP_COMMAND,e=>{const t=e;if(null!==c&&c.length){const e=null===E?c.length-1:0!==E?E-1:c.length-1;O(e);const n=c[e];if(!n)return O(-1),t.preventDefault(),t.stopImmediatePropagation(),!0;n.ref&&n.ref.current&&u(n.ref.current),t.preventDefault(),t.stopImmediatePropagation()}return!0},p),r.registerCommand(t.KEY_ESCAPE_COMMAND,t=>{const n=t;return n.preventDefault(),n.stopImmediatePropagation(),e(),!0},p),r.registerCommand(t.KEY_TAB_COMMAND,e=>{const t=e;return null!==c&&null!==E&&null!=c[E]&&(t.preventDefault(),t.stopImmediatePropagation(),y(c[E]),!0)},p),r.registerCommand(t.KEY_ENTER_COMMAND,e=>null!==c&&null!==E&&null!=c[E]&&(null!==e&&(e.preventDefault(),e.stopImmediatePropagation()),y(c[E]),!0),p)),[y,e,r,c,E,O,p]);return a(l,n.useMemo(()=>({options:c,selectOptionAndCleanUp:y,selectedIndex:E,setHighlightedIndex:C}),[y,E,c]),i.match?i.match.matchingString:"")}function m(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"}const p="\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;";const g=t.createCommand("SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND");exports.LexicalTypeaheadMenuPlugin=function({options:o,onQueryChange:s,onSelectOption:u,onOpen:c,onClose:d,menuRenderFn:p,triggerFn:g,anchorClassName:h,commandPriority:C=t.COMMAND_PRIORITY_LOW,parent:E,preselectFirstItem:x=!0,ignoreEntityBoundary:y=!1}){const[O]=e.useLexicalComposerContext(),[b,w]=n.useState(null),R=function(t,o,r,l=(i?document.body:void 0),s=!0){const[u]=e.useLexicalComposerContext(),c=i?document.createElement("div"):null,d=n.useRef(c),f=n.useCallback(()=>{if(null===d.current||void 0===l)return;d.current.style.top=d.current.style.bottom;const e=u.getRootElement(),n=d.current,o=n.firstChild;if(null!==e&&null!==t){const{left:i,top:u,width:c,height:a}=t.getRect(),f=d.current.offsetHeight;if(n.style.top=`${u+f+3+(s?window.pageYOffset:0)}px`,n.style.left=`${i+window.pageXOffset}px`,n.style.height=`${a}px`,n.style.width=`${c}px`,null!==o){o.style.top=`${u}`;const t=o.getBoundingClientRect(),r=t.height,l=t.width,c=e.getBoundingClientRect();i+l>c.right&&(n.style.left=`${c.right-l+window.pageXOffset}px`),(u+r>window.innerHeight||u+r>c.bottom)&&u-c.top>r+a&&(n.style.top=`${u-r-a+(s?window.pageYOffset:0)}px`)}n.isConnected||(m(n,r),l.append(n)),n.setAttribute("id","typeahead-menu"),e.setAttribute("aria-controls","typeahead-menu")}},[u,t,s,r,l]);n.useEffect(()=>{const e=u.getRootElement();return null!==t&&f(),()=>{null!==e&&e.removeAttribute("aria-controls");const t=d.current;null!==t&&t.isConnected&&(t.remove(),t.removeAttribute("id"))}},[u,f,t]);const p=n.useCallback(e=>{null!==t&&(e||o(null))},[t,o]);return a(t,d.current,f,p),null!=c&&c===d.current&&(m(c,r),null!=l&&l.append(c)),d}(b,w,h,E),v=n.useCallback(()=>{w(null),null!=d&&null!==b&&d()},[d,b]),S=n.useCallback(e=>{w(e),null!=c&&null===b&&c(e)},[c,b]);return n.useEffect(()=>{const e=O.registerUpdateListener(()=>{O.getEditorState().read(()=>{if(!O.isEditable())return void v();const e=O._window||window,o=e.document.createRange(),r=t.$getSelection(),i=function(e){let n=null;return e.getEditorState().read(()=>{const e=t.$getSelection();t.$isRangeSelection(e)&&(n=function(e){const t=e.anchor;if("text"!==t.type)return null;const n=t.getNode();if(!n.isSimpleText())return null;const o=t.offset;return n.getTextContent().slice(0,o)}(e))}),n}(O);if(!t.$isRangeSelection(r)||!r.isCollapsed()||null===i||null===o)return void v();const u=g(i,O);if(s(u?u.matchingString:null),null!==u&&(y||!function(e,n){return 0===n&&e.getEditorState().read(()=>{const e=t.$getSelection();if(t.$isRangeSelection(e)){const n=e.anchor.getNode().getPreviousSibling();return t.$isTextNode(n)&&n.isTextEntity()}return!1})}(O,u.leadOffset))){const r=function(e,n,o){const r=t.getDOMSelection(o);if(null===r||!r.isCollapsed)return!1;const l=r.anchorNode,i=e,s=r.anchorOffset;if(null==l||null==s)return!1;try{n.setStart(l,i),n.setEnd(l,s)}catch(e){return!1}return!0}(u.leadOffset,o,e);if(null!==r)return c=()=>S({getRect:()=>o.getBoundingClientRect(),match:u}),void(l in n?n[l](c):c())}var c;v()})});return()=>{e()}},[O,g,s,b,v,S,y]),n.useEffect(()=>O.registerEditableListener(e=>{e||v()}),[O,v]),null===b||null===O||null===R.current?null:r.jsx(f,{close:v,resolution:b,editor:O,anchorElementRef:R,options:o,menuRenderFn:p,shouldSplitNodeWithQuery:!0,onSelectOption:u,commandPriority:C,preselectFirstItem:x})},exports.MenuOption=class{key;ref;constructor(e){this.key=e,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(e){this.ref={current:e}}},exports.PUNCTUATION=p,exports.SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND=g,exports.getScrollParent=function(e,t){let n=getComputedStyle(e);const o="absolute"===n.position,r=t?/(auto|scroll|hidden)/:/(auto|scroll)/;if("fixed"===n.position)return document.body;for(let t=e;t=t.parentElement;)if(n=getComputedStyle(t),(!o||"static"!==n.position)&&r.test(n.overflow+n.overflowY+n.overflowX))return t;return document.body},exports.useBasicTypeaheadTriggerMatch=function(e,{minLength:t=1,maxLength:o=75,punctuation:r=p,allowWhitespace:l=!1}){return n.useCallback(n=>{const i=new RegExp("(^|\\s|\\()(["+e+"]((?:"+("[^"+e+r+(l?"":"\\s")+"]")+"){0,"+o+"}))$").exec(n);if(null!==i){const e=i[1],n=i[3];if(n.length>=t)return{leadOffset:i.index+e.length,matchingString:n,replaceableString:i[2]}}return null},[l,e,r,o,t])},exports.useDynamicPositioning=a;
|