@lexical/react 0.7.7 → 0.7.8

package/LexicalTypeaheadMenuPlugin.dev.js

@@ -57,22 +57,26 @@ class TypeaheadOption {
 
 const scrollIntoViewIfNeeded = target => {
   const container = document.getElementById('typeahead-menu');
+  if (!container) return;
+  const typeaheadContainerNode = container.querySelector('.typeahead-popover');
+  if (!typeaheadContainerNode) return;
+  const typeaheadRect = typeaheadContainerNode.getBoundingClientRect();
+
+  if (typeaheadRect.top + typeaheadRect.height > window.innerHeight) {
+    typeaheadContainerNode.scrollIntoView({
+      block: 'center'
+    });
+  }
 
-  if (container) {
-    const parentNode = target.parentNode;
-
-    if (parentNode && /auto|scroll/.test(getComputedStyle(parentNode).overflow)) {
-      const parentRect = parentNode.getBoundingClientRect();
-
-      if (parentRect.top + parentRect.height > window.innerHeight) {
-        parentNode.scrollIntoView(false);
-      }
-
-      parentNode.scrollTop = target.offsetTop - target.clientHeight;
-    } else {
-      target.scrollIntoView(false);
-    }
+  if (typeaheadRect.top < 0) {
+    typeaheadContainerNode.scrollIntoView({
+      block: 'center'
+    });
   }
+
+  target.scrollIntoView({
+    block: 'nearest'
+  });
 };
 
 function getTextUpToAnchor(selection) {

package/LexicalTypeaheadMenuPlugin.prod.js

@@ -4,23 +4,23 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var k=require("@lexical/react/LexicalComposerContext"),n=require("@lexical/utils"),w=require("lexical"),x=require("react"),y="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?x.useLayoutEffect:x.useEffect;class z{constructor(b){this.key=b;this.ref={current:null};this.setRefElement=this.setRefElement.bind(this)}setRefElement(b){this.ref={current:b}}}
-let A=b=>{if(document.getElementById("typeahead-menu")){const a=b.parentNode;if(a&&/auto|scroll/.test(getComputedStyle(a).overflow)){const c=a.getBoundingClientRect();c.top+c.height>window.innerHeight&&a.scrollIntoView(!1);a.scrollTop=b.offsetTop-b.clientHeight}else b.scrollIntoView(!1)}};function B(b,a){var c=window.getSelection();if(null===c||!c.isCollapsed)return!1;let e=c.anchorNode;c=c.anchorOffset;if(null==e||null==c)return!1;try{a.setStart(e,b),a.setEnd(e,c)}catch(f){return!1}return!0}
-function C(b){let a=null;b.getEditorState().read(()=>{var c=w.$getSelection();if(w.$isRangeSelection(c)){var e=c.anchor;"text"!==e.type?a=null:(c=e.getNode(),c.isSimpleText()?(e=e.offset,a=c.getTextContent().slice(0,e)):a=null)}});return a}
-function D(b,a){b=w.$getSelection();if(!w.$isRangeSelection(b)||!b.isCollapsed())return null;var c=b.anchor;if("text"!==c.type)return null;b=c.getNode();if(!b.isSimpleText())return null;c=c.offset;let e=b.getTextContent().slice(0,c);var f=a.matchingString;a=a.replaceableString.length;for(let p=a;p<=f.length;p++)e.substr(-p)===f.substr(0,p)&&(a=p);a=c-a;if(0>a)return null;let q;0===a?[q]=b.splitText(c):[,q]=b.splitText(a,c);return q}
-function E(b,a){return 0!==a?!1:b.getEditorState().read(()=>{var c=w.$getSelection();return w.$isRangeSelection(c)?(c=c.anchor.getNode().getPreviousSibling(),w.$isTextNode(c)&&c.isTextEntity()):!1})}function F(b){x.startTransition?x.startTransition(b):b()}
-function I(b,a){let c=getComputedStyle(b),e="absolute"===c.position;a=a?/(auto|scroll|hidden)/:/(auto|scroll)/;if("fixed"===c.position)return document.body;for(;b=b.parentElement;)if(c=getComputedStyle(b),(!e||"static"!==c.position)&&a.test(c.overflow+c.overflowY+c.overflowX))return b;return document.body}function J(b,a){b=b.getBoundingClientRect();a=a.getBoundingClientRect();return b.top>a.top&&b.top<a.bottom}
-function K(b,a,c,e){let [f]=k.useLexicalComposerContext();x.useEffect(()=>{if(null!=a&&null!=b){let q=f.getRootElement(),p=null!=q?I(q,!1):document.body,g=!1,d=J(a,p),l=function(){g||(window.requestAnimationFrame(function(){c();g=!1}),g=!0);const t=J(a,p);t!==d&&(d=t,null!=e&&e(t))},r=new ResizeObserver(c);window.addEventListener("resize",c);document.addEventListener("scroll",l,{capture:!0,passive:!0});r.observe(a);return()=>{r.unobserve(a);window.removeEventListener("resize",c);document.removeEventListener("scroll",
-l)}}},[a,f,e,c,b])}let L=w.createCommand("SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND");
-function M({close:b,editor:a,anchorElementRef:c,resolution:e,options:f,menuRenderFn:q,onSelectOption:p}){let [g,d]=x.useState(null);x.useEffect(()=>{d(0)},[e.match.matchingString]);let l=x.useCallback(h=>{a.update(()=>{const m=D(a,e.match);p(h,m,b,e.match.matchingString)})},[b,a,e.match,p]),r=x.useCallback(h=>{const m=a.getRootElement();null!==m&&(m.setAttribute("aria-activedescendant","typeahead-item-"+h),d(h))},[a]);x.useEffect(()=>()=>{let h=a.getRootElement();null!==h&&h.removeAttribute("aria-activedescendant")},
+'use strict';var k=require("@lexical/react/LexicalComposerContext"),n=require("@lexical/utils"),w=require("lexical"),x=require("react"),y="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?x.useLayoutEffect:x.useEffect;class z{constructor(c){this.key=c;this.ref={current:null};this.setRefElement=this.setRefElement.bind(this)}setRefElement(c){this.ref={current:c}}}
+let A=c=>{var a=document.getElementById("typeahead-menu");if(a&&(a=a.querySelector(".typeahead-popover"))){var b=a.getBoundingClientRect();b.top+b.height>window.innerHeight&&a.scrollIntoView({block:"center"});0>b.top&&a.scrollIntoView({block:"center"});c.scrollIntoView({block:"nearest"})}};function B(c,a){var b=window.getSelection();if(null===b||!b.isCollapsed)return!1;let e=b.anchorNode;b=b.anchorOffset;if(null==e||null==b)return!1;try{a.setStart(e,c),a.setEnd(e,b)}catch(f){return!1}return!0}
+function C(c){let a=null;c.getEditorState().read(()=>{var b=w.$getSelection();if(w.$isRangeSelection(b)){var e=b.anchor;"text"!==e.type?a=null:(b=e.getNode(),b.isSimpleText()?(e=e.offset,a=b.getTextContent().slice(0,e)):a=null)}});return a}
+function D(c,a){c=w.$getSelection();if(!w.$isRangeSelection(c)||!c.isCollapsed())return null;var b=c.anchor;if("text"!==b.type)return null;c=b.getNode();if(!c.isSimpleText())return null;b=b.offset;let e=c.getTextContent().slice(0,b);var f=a.matchingString;a=a.replaceableString.length;for(let p=a;p<=f.length;p++)e.substr(-p)===f.substr(0,p)&&(a=p);a=b-a;if(0>a)return null;let q;0===a?[q]=c.splitText(b):[,q]=c.splitText(a,b);return q}
+function E(c,a){return 0!==a?!1:c.getEditorState().read(()=>{var b=w.$getSelection();return w.$isRangeSelection(b)?(b=b.anchor.getNode().getPreviousSibling(),w.$isTextNode(b)&&b.isTextEntity()):!1})}function F(c){x.startTransition?x.startTransition(c):c()}
+function I(c,a){let b=getComputedStyle(c),e="absolute"===b.position;a=a?/(auto|scroll|hidden)/:/(auto|scroll)/;if("fixed"===b.position)return document.body;for(;c=c.parentElement;)if(b=getComputedStyle(c),(!e||"static"!==b.position)&&a.test(b.overflow+b.overflowY+b.overflowX))return c;return document.body}function J(c,a){c=c.getBoundingClientRect();a=a.getBoundingClientRect();return c.top>a.top&&c.top<a.bottom}
+function K(c,a,b,e){let [f]=k.useLexicalComposerContext();x.useEffect(()=>{if(null!=a&&null!=c){let q=f.getRootElement(),p=null!=q?I(q,!1):document.body,g=!1,d=J(a,p),l=function(){g||(window.requestAnimationFrame(function(){b();g=!1}),g=!0);const t=J(a,p);t!==d&&(d=t,null!=e&&e(t))},r=new ResizeObserver(b);window.addEventListener("resize",b);document.addEventListener("scroll",l,{capture:!0,passive:!0});r.observe(a);return()=>{r.unobserve(a);window.removeEventListener("resize",b);document.removeEventListener("scroll",
+l)}}},[a,f,e,b,c])}let L=w.createCommand("SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND");
+function M({close:c,editor:a,anchorElementRef:b,resolution:e,options:f,menuRenderFn:q,onSelectOption:p}){let [g,d]=x.useState(null);x.useEffect(()=>{d(0)},[e.match.matchingString]);let l=x.useCallback(h=>{a.update(()=>{const m=D(a,e.match);p(h,m,c,e.match.matchingString)})},[c,a,e.match,p]),r=x.useCallback(h=>{const m=a.getRootElement();null!==m&&(m.setAttribute("aria-activedescendant","typeahead-item-"+h),d(h))},[a]);x.useEffect(()=>()=>{let h=a.getRootElement();null!==h&&h.removeAttribute("aria-activedescendant")},
 [a]);y(()=>{null===f?d(null):null===g&&r(0)},[f,g,r]);x.useEffect(()=>n.mergeRegister(a.registerCommand(L,({option:h})=>h.ref&&null!=h.ref.current?(A(h.ref.current),!0):!1,w.COMMAND_PRIORITY_LOW)),[a,r]);x.useEffect(()=>n.mergeRegister(a.registerCommand(w.KEY_ARROW_DOWN_COMMAND,h=>{if(null!==f&&f.length&&null!==g){let m=g!==f.length-1?g+1:0;r(m);let u=f[m];null!=u.ref&&u.ref.current&&a.dispatchCommand(L,{index:m,option:u});h.preventDefault();h.stopImmediatePropagation()}return!0},w.COMMAND_PRIORITY_LOW),
-a.registerCommand(w.KEY_ARROW_UP_COMMAND,h=>{if(null!==f&&f.length&&null!==g){var m=0!==g?g-1:f.length-1;r(m);m=f[m];null!=m.ref&&m.ref.current&&A(m.ref.current);h.preventDefault();h.stopImmediatePropagation()}return!0},w.COMMAND_PRIORITY_LOW),a.registerCommand(w.KEY_ESCAPE_COMMAND,h=>{h.preventDefault();h.stopImmediatePropagation();b();return!0},w.COMMAND_PRIORITY_LOW),a.registerCommand(w.KEY_TAB_COMMAND,h=>{if(null===f||null===g||null==f[g])return!1;h.preventDefault();h.stopImmediatePropagation();
-l(f[g]);return!0},w.COMMAND_PRIORITY_LOW),a.registerCommand(w.KEY_ENTER_COMMAND,h=>{if(null===f||null===g||null==f[g])return!1;null!==h&&(h.preventDefault(),h.stopImmediatePropagation());l(f[g]);return!0},w.COMMAND_PRIORITY_LOW)),[l,b,a,f,g,r]);let t=x.useMemo(()=>({options:f,selectOptionAndCleanUp:l,selectedIndex:g,setHighlightedIndex:d}),[l,g,f]);return q(c,t,e.match.matchingString)}
-function N(b,a,c){let [e]=k.useLexicalComposerContext(),f=x.useRef(document.createElement("div")),q=x.useCallback(()=>{const g=e.getRootElement(),d=f.current;if(null!==g&&null!==b){const {left:l,top:r,width:t,height:h}=b.getRect();d.style.top=`${r+window.pageYOffset}px`;d.style.left=`${l+window.pageXOffset}px`;d.style.height=`${h}px`;d.style.width=`${t}px`;d.isConnected||(null!=c&&(d.className=c),d.setAttribute("aria-label","Typeahead menu"),d.setAttribute("id","typeahead-menu"),d.setAttribute("role",
-"listbox"),d.style.display="block",d.style.position="absolute",document.body.append(d));f.current=d;g.setAttribute("aria-controls","typeahead-menu")}},[e,b,c]);x.useEffect(()=>{let g=e.getRootElement();if(null!==b)return q(),()=>{null!==g&&g.removeAttribute("aria-controls");let d=f.current;null!==d&&d.isConnected&&d.remove()}},[e,q,b]);let p=x.useCallback(g=>{null!==b&&(g||a(null))},[b,a]);K(b,f.current,q,p);return f}
-exports.LexicalNodeMenuPlugin=function({options:b,nodeKey:a,onClose:c,onOpen:e,onSelectOption:f,menuRenderFn:q,anchorClassName:p}){let [g]=k.useLexicalComposerContext(),[d,l]=x.useState(null);p=N(d,l,p);let r=x.useCallback(()=>{l(null);null!=c&&null!==d&&c()},[c,d]),t=x.useCallback(h=>{l(h);null!=e&&null===d&&e(h)},[e,d]);x.useEffect(()=>{a&&null==d?g.update(()=>{let h=w.$getNodeByKey(a),m=g.getElementByKey(a);if(null!=h&&null!=m){let u=h.getTextContent();F(()=>t({getRect:()=>m.getBoundingClientRect(),
-match:{leadOffset:u.length,matchingString:u,replaceableString:u}}))}}):null==a&&null!=d&&r()},[r,g,a,t,d]);return null===d||null===g?null:x.createElement(M,{close:r,resolution:d,editor:g,anchorElementRef:p,options:b,menuRenderFn:q,onSelectOption:f})};
-exports.LexicalTypeaheadMenuPlugin=function({options:b,onQueryChange:a,onSelectOption:c,onOpen:e,onClose:f,menuRenderFn:q,triggerFn:p,anchorClassName:g}){let [d]=k.useLexicalComposerContext(),[l,r]=x.useState(null);g=N(l,r,g);let t=x.useCallback(()=>{r(null);null!=f&&null!==l&&f()},[f,l]),h=x.useCallback(m=>{r(m);null!=e&&null===l&&e(m)},[e,l]);x.useEffect(()=>{let m=d.registerUpdateListener(()=>{d.getEditorState().read(()=>{const u=document.createRange(),G=w.$getSelection(),H=C(d);if(w.$isRangeSelection(G)&&
-G.isCollapsed()&&null!==H&&null!==u){var v=p(H,d);a(v?v.matchingString:null);null===v||E(d,v.leadOffset)||null===B(v.leadOffset,u)?t():F(()=>h({getRect:()=>u.getBoundingClientRect(),match:v}))}else t()})});return()=>{m()}},[d,p,a,l,t,h]);return null===l||null===d?null:x.createElement(M,{close:t,resolution:l,editor:d,anchorElementRef:g,options:b,menuRenderFn:q,onSelectOption:c})};exports.PUNCTUATION="\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;";
-exports.SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND=L;exports.TypeaheadOption=z;exports.getScrollParent=I;exports.useBasicTypeaheadTriggerMatch=function(b,{minLength:a=1,maxLength:c=75}){return x.useCallback(e=>{e=(new RegExp("(^|\\s|\\()(["+b+"]((?:[^"+(b+"\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;\\s]){0,")+c+"}))$")).exec(e);if(null!==e){let f=e[1],q=e[3];if(q.length>=a)return{leadOffset:e.index+f.length,matchingString:q,replaceableString:e[2]}}return null},[c,a,b])};
+a.registerCommand(w.KEY_ARROW_UP_COMMAND,h=>{if(null!==f&&f.length&&null!==g){var m=0!==g?g-1:f.length-1;r(m);m=f[m];null!=m.ref&&m.ref.current&&A(m.ref.current);h.preventDefault();h.stopImmediatePropagation()}return!0},w.COMMAND_PRIORITY_LOW),a.registerCommand(w.KEY_ESCAPE_COMMAND,h=>{h.preventDefault();h.stopImmediatePropagation();c();return!0},w.COMMAND_PRIORITY_LOW),a.registerCommand(w.KEY_TAB_COMMAND,h=>{if(null===f||null===g||null==f[g])return!1;h.preventDefault();h.stopImmediatePropagation();
+l(f[g]);return!0},w.COMMAND_PRIORITY_LOW),a.registerCommand(w.KEY_ENTER_COMMAND,h=>{if(null===f||null===g||null==f[g])return!1;null!==h&&(h.preventDefault(),h.stopImmediatePropagation());l(f[g]);return!0},w.COMMAND_PRIORITY_LOW)),[l,c,a,f,g,r]);let t=x.useMemo(()=>({options:f,selectOptionAndCleanUp:l,selectedIndex:g,setHighlightedIndex:d}),[l,g,f]);return q(b,t,e.match.matchingString)}
+function N(c,a,b){let [e]=k.useLexicalComposerContext(),f=x.useRef(document.createElement("div")),q=x.useCallback(()=>{const g=e.getRootElement(),d=f.current;if(null!==g&&null!==c){const {left:l,top:r,width:t,height:h}=c.getRect();d.style.top=`${r+window.pageYOffset}px`;d.style.left=`${l+window.pageXOffset}px`;d.style.height=`${h}px`;d.style.width=`${t}px`;d.isConnected||(null!=b&&(d.className=b),d.setAttribute("aria-label","Typeahead menu"),d.setAttribute("id","typeahead-menu"),d.setAttribute("role",
+"listbox"),d.style.display="block",d.style.position="absolute",document.body.append(d));f.current=d;g.setAttribute("aria-controls","typeahead-menu")}},[e,c,b]);x.useEffect(()=>{let g=e.getRootElement();if(null!==c)return q(),()=>{null!==g&&g.removeAttribute("aria-controls");let d=f.current;null!==d&&d.isConnected&&d.remove()}},[e,q,c]);let p=x.useCallback(g=>{null!==c&&(g||a(null))},[c,a]);K(c,f.current,q,p);return f}
+exports.LexicalNodeMenuPlugin=function({options:c,nodeKey:a,onClose:b,onOpen:e,onSelectOption:f,menuRenderFn:q,anchorClassName:p}){let [g]=k.useLexicalComposerContext(),[d,l]=x.useState(null);p=N(d,l,p);let r=x.useCallback(()=>{l(null);null!=b&&null!==d&&b()},[b,d]),t=x.useCallback(h=>{l(h);null!=e&&null===d&&e(h)},[e,d]);x.useEffect(()=>{a&&null==d?g.update(()=>{let h=w.$getNodeByKey(a),m=g.getElementByKey(a);if(null!=h&&null!=m){let u=h.getTextContent();F(()=>t({getRect:()=>m.getBoundingClientRect(),
+match:{leadOffset:u.length,matchingString:u,replaceableString:u}}))}}):null==a&&null!=d&&r()},[r,g,a,t,d]);return null===d||null===g?null:x.createElement(M,{close:r,resolution:d,editor:g,anchorElementRef:p,options:c,menuRenderFn:q,onSelectOption:f})};
+exports.LexicalTypeaheadMenuPlugin=function({options:c,onQueryChange:a,onSelectOption:b,onOpen:e,onClose:f,menuRenderFn:q,triggerFn:p,anchorClassName:g}){let [d]=k.useLexicalComposerContext(),[l,r]=x.useState(null);g=N(l,r,g);let t=x.useCallback(()=>{r(null);null!=f&&null!==l&&f()},[f,l]),h=x.useCallback(m=>{r(m);null!=e&&null===l&&e(m)},[e,l]);x.useEffect(()=>{let m=d.registerUpdateListener(()=>{d.getEditorState().read(()=>{const u=document.createRange(),G=w.$getSelection(),H=C(d);if(w.$isRangeSelection(G)&&
+G.isCollapsed()&&null!==H&&null!==u){var v=p(H,d);a(v?v.matchingString:null);null===v||E(d,v.leadOffset)||null===B(v.leadOffset,u)?t():F(()=>h({getRect:()=>u.getBoundingClientRect(),match:v}))}else t()})});return()=>{m()}},[d,p,a,l,t,h]);return null===l||null===d?null:x.createElement(M,{close:t,resolution:l,editor:d,anchorElementRef:g,options:c,menuRenderFn:q,onSelectOption:b})};exports.PUNCTUATION="\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;";
+exports.SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND=L;exports.TypeaheadOption=z;exports.getScrollParent=I;exports.useBasicTypeaheadTriggerMatch=function(c,{minLength:a=1,maxLength:b=75}){return x.useCallback(e=>{e=(new RegExp("(^|\\s|\\()(["+c+"]((?:[^"+(c+"\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;\\s]){0,")+b+"}))$")).exec(e);if(null!==e){let f=e[1],q=e[3];if(q.length>=a)return{leadOffset:e.index+f.length,matchingString:q,replaceableString:e[2]}}return null},[b,a,c])};
 exports.useDynamicPositioning=K

package/package.json

@@ -8,29 +8,29 @@
     "rich-text"
   ],
   "license": "MIT",
-  "version": "0.7.7",
+  "version": "0.7.8",
   "dependencies": {
-    "@lexical/clipboard": "0.7.7",
-    "@lexical/code": "0.7.7",
-    "@lexical/dragon": "0.7.7",
-    "@lexical/hashtag": "0.7.7",
-    "@lexical/history": "0.7.7",
-    "@lexical/link": "0.7.7",
-    "@lexical/list": "0.7.7",
-    "@lexical/mark": "0.7.7",
-    "@lexical/markdown": "0.7.7",
-    "@lexical/overflow": "0.7.7",
-    "@lexical/plain-text": "0.7.7",
-    "@lexical/rich-text": "0.7.7",
-    "@lexical/selection": "0.7.7",
-    "@lexical/table": "0.7.7",
-    "@lexical/text": "0.7.7",
-    "@lexical/utils": "0.7.7",
-    "@lexical/yjs": "0.7.7",
+    "@lexical/clipboard": "0.7.8",
+    "@lexical/code": "0.7.8",
+    "@lexical/dragon": "0.7.8",
+    "@lexical/hashtag": "0.7.8",
+    "@lexical/history": "0.7.8",
+    "@lexical/link": "0.7.8",
+    "@lexical/list": "0.7.8",
+    "@lexical/mark": "0.7.8",
+    "@lexical/markdown": "0.7.8",
+    "@lexical/overflow": "0.7.8",
+    "@lexical/plain-text": "0.7.8",
+    "@lexical/rich-text": "0.7.8",
+    "@lexical/selection": "0.7.8",
+    "@lexical/table": "0.7.8",
+    "@lexical/text": "0.7.8",
+    "@lexical/utils": "0.7.8",
+    "@lexical/yjs": "0.7.8",
     "react-error-boundary": "^3.1.4"
   },
   "peerDependencies": {
-    "lexical": "0.7.7",
+    "lexical": "0.7.8",
     "react": ">=17.x",
     "react-dom": ">=17.x"
   },