@lexical/react 0.5.0 → 0.5.1-next.0

package/LexicalPlainTextPlugin.dev.js

@@ -14,6 +14,103 @@ var reactDom = require('react-dom');
 var dragon = require('@lexical/dragon');
 var plainText = require('@lexical/plain-text');
 
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const changedArray = (a = [], b = []) => a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
+
+const initialState = {
+  error: null
+};
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = initialState;
+    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
+  }
+
+  static getDerivedStateFromError(error) {
+    return {
+      error
+    };
+  }
+
+  resetErrorBoundary(...args) {
+    // @ts-ignore
+    // eslint-disable-next-line no-unused-expressions
+    this.props.onReset && this.props.onReset(...args);
+    this.reset();
+  }
+
+  reset() {
+    this.setState(initialState);
+  }
+
+  componentDidCatch(error, info) {
+    // @ts-ignore
+    // eslint-disable-next-line no-unused-expressions
+    this.props.onError && this.props.onError(error, info);
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      error
+    } = this.state;
+    const {
+      resetKeys
+    } = this.props; // There's an edge case where if the thing that triggered the error
+    // happens to *also* be in the resetKeys array, we'd end up resetting
+    // the error boundary immediately. This would likely trigger a second
+    // error to be thrown.
+    // So we make sure that we don't check the resetKeys on the first call
+    // of cDU after the error is set
+
+    if (error !== null && prevState.error !== null && changedArray(prevProps.resetKeys, resetKeys)) {
+      // @ts-ignore
+      // eslint-disable-next-line no-unused-expressions
+      this.props.onResetKeysChange && this.props.onResetKeysChange(prevProps.resetKeys, resetKeys);
+      this.reset();
+    }
+  }
+
+  render() {
+    const {
+      error
+    } = this.state;
+    const {
+      fallbackRender,
+      FallbackComponent,
+      fallback
+    } = this.props;
+
+    if (error !== null) {
+      const props = {
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      };
+
+      if ( /*#__PURE__*/React.isValidElement(fallback)) {
+        return fallback;
+      } else if (typeof fallbackRender === 'function') {
+        return fallbackRender(props);
+      } else if (FallbackComponent) {
+        return /*#__PURE__*/React.createElement(FallbackComponent, props);
+      } else {
+        throw new Error('react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop');
+      }
+    }
+
+    return this.props.children;
+  }
+
+}
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -71,7 +168,14 @@ function useCanShowPlaceholder(editor) {
  * LICENSE file in the root directory of this source tree.
  *
  */
-function useDecorators(editor) {
+function useDecorators(editor, // TODO 0.6 Make non-optional non-default
+ErrorBoundary$1 = ({
+  children,
+  onError
+}) => /*#__PURE__*/React.createElement(ErrorBoundary, {
+  fallback: null,
+  onError: onError
+}, children)) {
   const [decorators, setDecorators] = React.useState(() => editor.getDecorators()); // Subscribe to changes
 
   useLayoutEffect(() => {
@@ -94,7 +198,11 @@ function useDecorators(editor) {
 
     for (let i = 0; i < decoratorKeys.length; i++) {
       const nodeKey = decoratorKeys[i];
-      const reactDecorator = decorators[nodeKey];
+      const reactDecorator = /*#__PURE__*/React.createElement(ErrorBoundary$1, {
+        onError: e => editor._onError(e)
+      }, /*#__PURE__*/React.createElement(React.Suspense, {
+        fallback: null
+      }, decorators[nodeKey]));
       const element = editor.getElementByKey(nodeKey);
 
       if (element !== null) {
@@ -103,7 +211,7 @@ function useDecorators(editor) {
     }
 
     return decoratedPortals;
-  }, [decorators, editor]);
+  }, [ErrorBoundary$1, decorators, editor]);
 }
 
 /**
@@ -129,11 +237,19 @@ function usePlainTextSetup(editor) {
  */
 function PlainTextPlugin({
   contentEditable,
-  placeholder
+  placeholder,
+  // TODO 0.6 Make non-optional non-default
+  ErrorBoundary: ErrorBoundary$1 = ({
+    children,
+    onError
+  }) => /*#__PURE__*/React.createElement(ErrorBoundary, {
+    fallback: null,
+    onError: onError
+  }, children)
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const showPlaceholder = useCanShowPlaceholder(editor);
-  const decorators = useDecorators(editor);
+  const decorators = useDecorators(editor, ErrorBoundary$1);
   usePlainTextSetup(editor);
   return /*#__PURE__*/React.createElement(React.Fragment, null, contentEditable, showPlaceholder && placeholder, decorators);
 }

package/LexicalPlainTextPlugin.js.flow

@@ -7,6 +7,7 @@
  * @flow strict
  */
 
+import type {ErrorBoundaryType} from './DEPRECATED_useLexicalDecorators';
 import type {EditorState, LexicalEditor} from 'lexical';
 
 type InitialEditorStateType =
@@ -18,4 +19,6 @@ type InitialEditorStateType =
 declare export function PlainTextPlugin({
   contentEditable: React$Node,
   placeholder: React$Node,
+  // TODO 0.6 Make non-optional non-default
+  ErrorBoundary?: ErrorBoundaryType,
 }): React$Node;

package/LexicalPlainTextPlugin.prod.js

@@ -4,7 +4,9 @@
  * 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 c=require("@lexical/react/LexicalComposerContext"),h=require("react"),l=require("@lexical/text"),m=require("@lexical/utils"),n=require("react-dom"),p=require("@lexical/dragon"),q=require("@lexical/plain-text"),r="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?h.useLayoutEffect:h.useEffect;function t(a){return a.getEditorState().read(l.$canShowPlaceholderCurry(a.isComposing(),a.isEditable()))}
-function u(a){let [e,d]=h.useState(()=>t(a));r(()=>{function b(){let f=t(a);d(f)}b();return m.mergeRegister(a.registerUpdateListener(()=>{b()}),a.registerEditableListener(()=>{b()}))},[a]);return e}
-function v(a){let [e,d]=h.useState(()=>a.getDecorators());r(()=>a.registerDecoratorListener(b=>{n.flushSync(()=>{d(b)})}),[a]);h.useEffect(()=>{d(a.getDecorators())},[a]);return h.useMemo(()=>{let b=[],f=Object.keys(e);for(let k=0;k<f.length;k++){var g=f[k];let w=e[g];g=a.getElementByKey(g);null!==g&&b.push(n.createPortal(w,g))}return b},[e,a])}function x(a){r(()=>m.mergeRegister(q.registerPlainText(a),p.registerDragonSupport(a)),[a])}
-exports.PlainTextPlugin=function({contentEditable:a,placeholder:e}){let [d]=c.useLexicalComposerContext(),b=u(d),f=v(d);x(d);return h.createElement(h.Fragment,null,a,b&&e,f)}
+'use strict';var d=require("@lexical/react/LexicalComposerContext"),h=require("react"),l=require("@lexical/text"),m=require("@lexical/utils"),n=require("react-dom"),p=require("@lexical/dragon"),q=require("@lexical/plain-text");let t=(a=[],e=[])=>a.length!==e.length||a.some((c,b)=>!Object.is(c,e[b])),u={error:null};
+class v extends h.Component{constructor(a){super(a);this.state=u;this.resetErrorBoundary=this.resetErrorBoundary.bind(this)}static getDerivedStateFromError(a){return{error:a}}resetErrorBoundary(...a){this.props.onReset&&this.props.onReset(...a);this.reset()}reset(){this.setState(u)}componentDidCatch(a,e){this.props.onError&&this.props.onError(a,e)}componentDidUpdate(a,e){let {error:c}=this.state,{resetKeys:b}=this.props;null!==c&&null!==e.error&&t(a.resetKeys,b)&&(this.props.onResetKeysChange&&this.props.onResetKeysChange(a.resetKeys,
+b),this.reset())}render(){var {error:a}=this.state;let {fallbackRender:e,FallbackComponent:c,fallback:b}=this.props;if(null!==a){a={error:a,resetErrorBoundary:this.resetErrorBoundary};if(h.isValidElement(b))return b;if("function"===typeof e)return e(a);if(c)return h.createElement(c,a);throw Error("react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop");}return this.props.children}}
+var w="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?h.useLayoutEffect:h.useEffect;function x(a){return a.getEditorState().read(l.$canShowPlaceholderCurry(a.isComposing(),a.isEditable()))}function y(a){let [e,c]=h.useState(()=>x(a));w(()=>{function b(){let f=x(a);c(f)}b();return m.mergeRegister(a.registerUpdateListener(()=>{b()}),a.registerEditableListener(()=>{b()}))},[a]);return e}
+function z(a,e=({children:c,onError:b})=>h.createElement(v,{fallback:null,onError:b},c)){let [c,b]=h.useState(()=>a.getDecorators());w(()=>a.registerDecoratorListener(f=>{n.flushSync(()=>{b(f)})}),[a]);h.useEffect(()=>{b(a.getDecorators())},[a]);return h.useMemo(()=>{let f=[],r=Object.keys(c);for(let k=0;k<r.length;k++){var g=r[k];let B=h.createElement(e,{onError:A=>a._onError(A)},h.createElement(h.Suspense,{fallback:null},c[g]));g=a.getElementByKey(g);null!==g&&f.push(n.createPortal(B,g))}return f},
+[e,c,a])}function C(a){w(()=>m.mergeRegister(q.registerPlainText(a),p.registerDragonSupport(a)),[a])}exports.PlainTextPlugin=function({contentEditable:a,placeholder:e,ErrorBoundary:c=({children:b,onError:f})=>h.createElement(v,{fallback:null,onError:f},b)}){let [b]=d.useLexicalComposerContext(),f=y(b);c=z(b,c);C(b);return h.createElement(h.Fragment,null,a,f&&e,c)}

package/LexicalRichTextPlugin.d.ts

@@ -5,7 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-export declare function RichTextPlugin({ contentEditable, placeholder, }: Readonly<{
+import { ErrorBoundaryType } from './shared/useDecorators';
+export declare function RichTextPlugin({ contentEditable, placeholder, ErrorBoundary, }: Readonly<{
     contentEditable: JSX.Element;
     placeholder: JSX.Element | string;
+    ErrorBoundary?: ErrorBoundaryType;
 }>): JSX.Element;

package/LexicalRichTextPlugin.dev.js

@@ -14,6 +14,103 @@ var reactDom = require('react-dom');
 var dragon = require('@lexical/dragon');
 var richText = require('@lexical/rich-text');
 
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const changedArray = (a = [], b = []) => a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
+
+const initialState = {
+  error: null
+};
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = initialState;
+    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
+  }
+
+  static getDerivedStateFromError(error) {
+    return {
+      error
+    };
+  }
+
+  resetErrorBoundary(...args) {
+    // @ts-ignore
+    // eslint-disable-next-line no-unused-expressions
+    this.props.onReset && this.props.onReset(...args);
+    this.reset();
+  }
+
+  reset() {
+    this.setState(initialState);
+  }
+
+  componentDidCatch(error, info) {
+    // @ts-ignore
+    // eslint-disable-next-line no-unused-expressions
+    this.props.onError && this.props.onError(error, info);
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      error
+    } = this.state;
+    const {
+      resetKeys
+    } = this.props; // There's an edge case where if the thing that triggered the error
+    // happens to *also* be in the resetKeys array, we'd end up resetting
+    // the error boundary immediately. This would likely trigger a second
+    // error to be thrown.
+    // So we make sure that we don't check the resetKeys on the first call
+    // of cDU after the error is set
+
+    if (error !== null && prevState.error !== null && changedArray(prevProps.resetKeys, resetKeys)) {
+      // @ts-ignore
+      // eslint-disable-next-line no-unused-expressions
+      this.props.onResetKeysChange && this.props.onResetKeysChange(prevProps.resetKeys, resetKeys);
+      this.reset();
+    }
+  }
+
+  render() {
+    const {
+      error
+    } = this.state;
+    const {
+      fallbackRender,
+      FallbackComponent,
+      fallback
+    } = this.props;
+
+    if (error !== null) {
+      const props = {
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      };
+
+      if ( /*#__PURE__*/React.isValidElement(fallback)) {
+        return fallback;
+      } else if (typeof fallbackRender === 'function') {
+        return fallbackRender(props);
+      } else if (FallbackComponent) {
+        return /*#__PURE__*/React.createElement(FallbackComponent, props);
+      } else {
+        throw new Error('react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop');
+      }
+    }
+
+    return this.props.children;
+  }
+
+}
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -71,7 +168,14 @@ function useCanShowPlaceholder(editor) {
  * LICENSE file in the root directory of this source tree.
  *
  */
-function useDecorators(editor) {
+function useDecorators(editor, // TODO 0.6 Make non-optional non-default
+ErrorBoundary$1 = ({
+  children,
+  onError
+}) => /*#__PURE__*/React.createElement(ErrorBoundary, {
+  fallback: null,
+  onError: onError
+}, children)) {
   const [decorators, setDecorators] = React.useState(() => editor.getDecorators()); // Subscribe to changes
 
   useLayoutEffect(() => {
@@ -94,7 +198,11 @@ function useDecorators(editor) {
 
     for (let i = 0; i < decoratorKeys.length; i++) {
       const nodeKey = decoratorKeys[i];
-      const reactDecorator = decorators[nodeKey];
+      const reactDecorator = /*#__PURE__*/React.createElement(ErrorBoundary$1, {
+        onError: e => editor._onError(e)
+      }, /*#__PURE__*/React.createElement(React.Suspense, {
+        fallback: null
+      }, decorators[nodeKey]));
       const element = editor.getElementByKey(nodeKey);
 
       if (element !== null) {
@@ -103,7 +211,7 @@ function useDecorators(editor) {
     }
 
     return decoratedPortals;
-  }, [decorators, editor]);
+  }, [ErrorBoundary$1, decorators, editor]);
 }
 
 /**
@@ -129,11 +237,19 @@ function useRichTextSetup(editor) {
  */
 function RichTextPlugin({
   contentEditable,
-  placeholder
+  placeholder,
+  // TODO 0.6 Make non-optional non-default
+  ErrorBoundary: ErrorBoundary$1 = ({
+    children,
+    onError
+  }) => /*#__PURE__*/React.createElement(ErrorBoundary, {
+    fallback: null,
+    onError: onError
+  }, children)
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const showPlaceholder = useCanShowPlaceholder(editor);
-  const decorators = useDecorators(editor);
+  const decorators = useDecorators(editor, ErrorBoundary$1);
   useRichTextSetup(editor);
   return /*#__PURE__*/React.createElement(React.Fragment, null, contentEditable, showPlaceholder && placeholder, decorators);
 }

package/LexicalRichTextPlugin.js.flow

@@ -7,6 +7,7 @@
  * @flow strict
  */
 
+import type {ErrorBoundaryType} from './DEPRECATED_useLexicalDecorators';
 import type {EditorState, LexicalEditor} from 'lexical';
 
 type InitialEditorStateType =
@@ -18,4 +19,6 @@ type InitialEditorStateType =
 declare export function RichTextPlugin({
   contentEditable: React$Node,
   placeholder: React$Node,
+  // TODO 0.6 Make non-optional non-default
+  ErrorBoundary?: ErrorBoundaryType,
 }): React$Node;

package/LexicalRichTextPlugin.prod.js

@@ -4,7 +4,9 @@
  * 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 c=require("@lexical/react/LexicalComposerContext"),h=require("react"),l=require("@lexical/text"),m=require("@lexical/utils"),n=require("react-dom"),p=require("@lexical/dragon"),q=require("@lexical/rich-text"),r="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?h.useLayoutEffect:h.useEffect;function t(a){return a.getEditorState().read(l.$canShowPlaceholderCurry(a.isComposing(),a.isEditable()))}
-function u(a){let [e,d]=h.useState(()=>t(a));r(()=>{function b(){let f=t(a);d(f)}b();return m.mergeRegister(a.registerUpdateListener(()=>{b()}),a.registerEditableListener(()=>{b()}))},[a]);return e}
-function v(a){let [e,d]=h.useState(()=>a.getDecorators());r(()=>a.registerDecoratorListener(b=>{n.flushSync(()=>{d(b)})}),[a]);h.useEffect(()=>{d(a.getDecorators())},[a]);return h.useMemo(()=>{let b=[],f=Object.keys(e);for(let k=0;k<f.length;k++){var g=f[k];let w=e[g];g=a.getElementByKey(g);null!==g&&b.push(n.createPortal(w,g))}return b},[e,a])}function x(a){r(()=>m.mergeRegister(q.registerRichText(a),p.registerDragonSupport(a)),[a])}
-exports.RichTextPlugin=function({contentEditable:a,placeholder:e}){let [d]=c.useLexicalComposerContext(),b=u(d),f=v(d);x(d);return h.createElement(h.Fragment,null,a,b&&e,f)}
+'use strict';var d=require("@lexical/react/LexicalComposerContext"),h=require("react"),l=require("@lexical/text"),m=require("@lexical/utils"),n=require("react-dom"),p=require("@lexical/dragon"),q=require("@lexical/rich-text");let t=(a=[],e=[])=>a.length!==e.length||a.some((c,b)=>!Object.is(c,e[b])),u={error:null};
+class v extends h.Component{constructor(a){super(a);this.state=u;this.resetErrorBoundary=this.resetErrorBoundary.bind(this)}static getDerivedStateFromError(a){return{error:a}}resetErrorBoundary(...a){this.props.onReset&&this.props.onReset(...a);this.reset()}reset(){this.setState(u)}componentDidCatch(a,e){this.props.onError&&this.props.onError(a,e)}componentDidUpdate(a,e){let {error:c}=this.state,{resetKeys:b}=this.props;null!==c&&null!==e.error&&t(a.resetKeys,b)&&(this.props.onResetKeysChange&&this.props.onResetKeysChange(a.resetKeys,
+b),this.reset())}render(){var {error:a}=this.state;let {fallbackRender:e,FallbackComponent:c,fallback:b}=this.props;if(null!==a){a={error:a,resetErrorBoundary:this.resetErrorBoundary};if(h.isValidElement(b))return b;if("function"===typeof e)return e(a);if(c)return h.createElement(c,a);throw Error("react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop");}return this.props.children}}
+var w="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?h.useLayoutEffect:h.useEffect;function x(a){return a.getEditorState().read(l.$canShowPlaceholderCurry(a.isComposing(),a.isEditable()))}function y(a){let [e,c]=h.useState(()=>x(a));w(()=>{function b(){let f=x(a);c(f)}b();return m.mergeRegister(a.registerUpdateListener(()=>{b()}),a.registerEditableListener(()=>{b()}))},[a]);return e}
+function z(a,e=({children:c,onError:b})=>h.createElement(v,{fallback:null,onError:b},c)){let [c,b]=h.useState(()=>a.getDecorators());w(()=>a.registerDecoratorListener(f=>{n.flushSync(()=>{b(f)})}),[a]);h.useEffect(()=>{b(a.getDecorators())},[a]);return h.useMemo(()=>{let f=[],r=Object.keys(c);for(let k=0;k<r.length;k++){var g=r[k];let B=h.createElement(e,{onError:A=>a._onError(A)},h.createElement(h.Suspense,{fallback:null},c[g]));g=a.getElementByKey(g);null!==g&&f.push(n.createPortal(B,g))}return f},
+[e,c,a])}function C(a){w(()=>m.mergeRegister(q.registerRichText(a),p.registerDragonSupport(a)),[a])}exports.RichTextPlugin=function({contentEditable:a,placeholder:e,ErrorBoundary:c=({children:b,onError:f})=>h.createElement(v,{fallback:null,onError:f},b)}){let [b]=d.useLexicalComposerContext(),f=y(b);c=z(b,c);C(b);return h.createElement(h.Fragment,null,a,f&&e,c)}

package/LexicalTreeView.dev.js

@@ -8,6 +8,7 @@
 
 var link = require('@lexical/link');
 var mark = require('@lexical/mark');
+var utils = require('@lexical/utils');
 var lexical = require('lexical');
 var React = require('react');
 
@@ -47,19 +48,20 @@ function TreeView({
   const inputRef = React.useRef(null);
   const [isPlaying, setIsPlaying] = React.useState(false);
   React.useEffect(() => {
-    setContent(generateContent(editor.getEditorState()));
-    return editor.registerUpdateListener(({
+    setContent(generateContent(editor.getEditorState(), editor._config, editor._compositionKey, editor._editable));
+    return utils.mergeRegister(editor.registerUpdateListener(({
       editorState
     }) => {
-      const compositionKey = editor._compositionKey;
-      const treeText = generateContent(editor.getEditorState());
-      const compositionText = compositionKey !== null && `Composition key: ${compositionKey}`;
-      setContent([treeText, compositionText].filter(Boolean).join('\n\n'));
+      const treeText = generateContent(editor.getEditorState(), editor._config, editor._compositionKey, editor._editable);
+      setContent(treeText);
 
       if (!timeTravelEnabled) {
         setTimeStampedEditorStates(currentEditorStates => [...currentEditorStates, [Date.now(), editorState]]);
       }
-    });
+    }), editor.registerEditableListener(() => {
+      const treeText = generateContent(editor.getEditorState(), editor._config, editor._compositionKey, editor._editable);
+      setContent(treeText);
+    }));
   }, [timeTravelEnabled, editor]);
   const totalEditorStates = timeStampedEditorStates.length;
   React.useEffect(() => {
@@ -130,6 +132,10 @@ function TreeView({
   }, /*#__PURE__*/React.createElement("button", {
     className: timeTravelPanelButtonClassName,
     onClick: () => {
+      if (playingIndexRef.current === totalEditorStates - 1) {
+        playingIndexRef.current = 1;
+      }
+
       setIsPlaying(!isPlaying);
     },
     type: "button"
@@ -193,7 +199,7 @@ function printGridSelection(selection) {
   return `: grid\n  └ { grid: ${selection.gridKey}, anchorCell: ${selection.anchor.key}, focusCell: ${selection.focus.key} }`;
 }
 
-function generateContent(editorState) {
+function generateContent(editorState, editorConfig, compositionKey, editable) {
   let res = ' root\n';
   const selectionString = editorState.read(() => {
     const selection = lexical.$getSelection();
@@ -215,7 +221,16 @@ function generateContent(editorState) {
     });
     return selection === null ? ': null' : lexical.$isRangeSelection(selection) ? printRangeSelection(selection) : lexical.DEPRECATED_$isGridSelection(selection) ? printGridSelection(selection) : printObjectSelection(selection);
   });
-  return res + '\n selection' + selectionString;
+  res += '\n selection' + selectionString;
+  res += '\n\n editor:';
+  res += `\n  └ namespace ${editorConfig.namespace}`;
+
+  if (compositionKey !== null) {
+    res += `\n  └ compositionKey ${compositionKey}`;
+  }
+
+  res += `\n  └ editable ${String(editable)}`;
+  return res;
 }
 
 function visitTree(currentNode, visitor, indent = []) {

package/LexicalTreeView.prod.js

@@ -4,17 +4,18 @@
  * 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 l=require("@lexical/link"),q=require("@lexical/mark"),t=require("lexical"),D=require("react");let E=Object.freeze({"\t":"\\t","\n":"\\n"}),F=new RegExp(Object.keys(E).join("|"),"g"),G=Object.freeze({ancestorHasNextSibling:"|",ancestorIsLastChild:" ",hasNextSibling:"\u251c",isLastChild:"\u2514",selectedChar:"^",selectedLine:">"});
-function H(a){let b="",c=I(a),d=a.anchor;a=a.focus;let e=d.offset,g=a.offset;b=b+`: range ${""!==c?`{ ${c} }`:""}`+`\n  \u251c anchor { key: ${d.key}, offset: ${null===e?"null":e}, type: ${d.type} }`;return b+=`\n  \u2514 focus { key: ${a.key}, offset: ${null===g?"null":g}, type: ${a.type} }`}
-function K(a){let b=" root\n";a=a.read(()=>{const c=t.$getSelection();L(t.$getRoot(),(d,e)=>{const g=`(${d.getKey()})`,h=d.getType()||"",n=d.isSelected(),w=q.$isMarkNode(d)?` id: [ ${d.getIDs().join(", ")} ] `:"";var v=b,r=n?G.selectedLine:" ",x=e.join(" ");if(t.$isTextNode(d)){var f=d.getTextContent();var m=0===f.length?"(empty)":`"${M(f)}"`;f=[I(d),N(d),O(d)].filter(Boolean).join(", ");f=[m,0!==f.length?`{ ${f} }`:null].filter(Boolean).join(" ").trim()}else if(l.$isLinkNode(d)){f=d.getURL();f=0===
-f.length?"(empty)":`"${M(f)}"`;m=d.getTarget();null!=m&&(m="target: "+m);var y=Boolean;let u=d.getRel();null!=u&&(u="rel: "+u);m=[m,u].filter(y).join(", ");f=[f,0!==m.length?`{ ${m} }`:null].filter(Boolean).join(" ").trim()}else f="";b=v+`${r} ${x} ${g} ${h} ${w} ${f}\n`;b+=P({indent:e,isSelected:n,node:d,nodeKeyDisplay:g,selection:c,typeDisplay:h})});return null===c?": null":t.$isRangeSelection(c)?H(c):t.DEPRECATED_$isGridSelection(c)?`: grid\n  \u2514 { grid: ${c.gridKey}, anchorCell: ${c.anchor.key}, focusCell: ${c.focus.key} }`:
-`: node\n  \u2514 [${Array.from(c._nodes).join(", ")}]`});return b+"\n selection"+a}function L(a,b,c=[]){a=a.getChildren();let d=a.length;a.forEach((e,g)=>{b(e,c.concat(g===d-1?G.isLastChild:G.hasNextSibling));t.$isElementNode(e)&&L(e,b,c.concat(g===d-1?G.ancestorIsLastChild:G.ancestorHasNextSibling))})}function M(a){return Object.entries(E).reduce((b,[c,d])=>b.replace(new RegExp(c,"g"),String(d)),a)}
-let Q=[a=>a.hasFormat("bold")&&"Bold",a=>a.hasFormat("code")&&"Code",a=>a.hasFormat("italic")&&"Italic",a=>a.hasFormat("strikethrough")&&"Strikethrough",a=>a.hasFormat("subscript")&&"Subscript",a=>a.hasFormat("superscript")&&"Superscript",a=>a.hasFormat("underline")&&"Underline"],R=[a=>a.isDirectionless()&&"Directionless",a=>a.isUnmergeable()&&"Unmergeable"],S=[a=>a.isToken()&&"Token",a=>a.isSegmented()&&"Segmented"];
-function N(a){let b=R.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="detail: "+b);return b}function O(a){let b=S.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="mode: "+b);return b}function I(a){let b=Q.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="format: "+b);return b}
-function P({indent:a,isSelected:b,node:c,nodeKeyDisplay:d,selection:e,typeDisplay:g}){if(!t.$isTextNode(c)||!t.$isRangeSelection(e)||!b||t.$isElementNode(c))return"";b=e.anchor;var h=e.focus;if(""===c.getTextContent()||b.getNode()===e.focus.getNode()&&b.offset===h.offset)return"";h=e.anchor;let n=e.focus,w=c.getTextContent(),v=w.length;b=e=-1;if("text"===h.type&&"text"===n.type){let f=h.getNode(),m=n.getNode();f===m&&c===f&&h.offset!==n.offset?[e,b]=h.offset<n.offset?[h.offset,n.offset]:[n.offset,
-h.offset]:c===f?[e,b]=f.isBefore(m)?[h.offset,v]:[0,h.offset]:c===m?[e,b]=m.isBefore(f)?[n.offset,v]:[0,n.offset]:[e,b]=[0,v]}c=(w.slice(0,e).match(F)||[]).length;h=(w.slice(e,b).match(F)||[]).length;let [r,x]=[e+c,b+c+h];if(r===x)return"";c=a[a.length-1]===G.hasNextSibling?G.ancestorHasNextSibling:G.ancestorIsLastChild;a=[...a.slice(0,a.length-1),c];c=Array(r+1).fill(" ");e=Array(x-r).fill(G.selectedChar);d=Array(d.length+(g.length+3)).fill(" ");return[G.selectedLine,a.join(" "),[...d,...c,...e].join("")].join(" ")+
+'use strict';var k=require("@lexical/link"),r=require("@lexical/mark"),v=require("@lexical/utils"),C=require("lexical"),D=require("react");let E=Object.freeze({"\t":"\\t","\n":"\\n"}),F=new RegExp(Object.keys(E).join("|"),"g"),G=Object.freeze({ancestorHasNextSibling:"|",ancestorIsLastChild:" ",hasNextSibling:"\u251c",isLastChild:"\u2514",selectedChar:"^",selectedLine:">"});
+function H(a){let c="",e=K(a),l=a.anchor;a=a.focus;let f=l.offset,b=a.offset;c=c+`: range ${""!==e?`{ ${e} }`:""}`+`\n  \u251c anchor { key: ${l.key}, offset: ${null===f?"null":f}, type: ${l.type} }`;return c+=`\n  \u2514 focus { key: ${a.key}, offset: ${null===b?"null":b}, type: ${a.type} }`}
+function L(a,c,e,l){let f=" root\n";a=a.read(()=>{const b=C.$getSelection();M(C.$getRoot(),(d,n)=>{const x=`(${d.getKey()})`,t=d.getType()||"",q=d.isSelected(),z=r.$isMarkNode(d)?` id: [ ${d.getIDs().join(", ")} ] `:"";var m=f,w=q?G.selectedLine:" ",A=n.join(" ");if(C.$isTextNode(d)){var h=d.getTextContent();var p=0===h.length?"(empty)":`"${N(h)}"`;h=[K(d),O(d),P(d)].filter(Boolean).join(", ");h=[p,0!==h.length?`{ ${h} }`:null].filter(Boolean).join(" ").trim()}else if(k.$isLinkNode(d)){h=d.getURL();
+h=0===h.length?"(empty)":`"${N(h)}"`;p=d.getTarget();null!=p&&(p="target: "+p);var y=Boolean;let g=d.getRel();null!=g&&(g="rel: "+g);p=[p,g].filter(y).join(", ");h=[h,0!==p.length?`{ ${p} }`:null].filter(Boolean).join(" ").trim()}else h="";f=m+`${w} ${A} ${x} ${t} ${z} ${h}\n`;f+=Q({indent:n,isSelected:q,node:d,nodeKeyDisplay:x,selection:b,typeDisplay:t})});return null===b?": null":C.$isRangeSelection(b)?H(b):C.DEPRECATED_$isGridSelection(b)?`: grid\n  \u2514 { grid: ${b.gridKey}, anchorCell: ${b.anchor.key}, focusCell: ${b.focus.key} }`:
+`: node\n  \u2514 [${Array.from(b._nodes).join(", ")}]`});f+="\n selection"+a;f+="\n\n editor:";f+=`\n  \u2514 namespace ${c.namespace}`;null!==e&&(f+=`\n  \u2514 compositionKey ${e}`);return f+=`\n  \u2514 editable ${String(l)}`}function M(a,c,e=[]){a=a.getChildren();let l=a.length;a.forEach((f,b)=>{c(f,e.concat(b===l-1?G.isLastChild:G.hasNextSibling));C.$isElementNode(f)&&M(f,c,e.concat(b===l-1?G.ancestorIsLastChild:G.ancestorHasNextSibling))})}
+function N(a){return Object.entries(E).reduce((c,[e,l])=>c.replace(new RegExp(e,"g"),String(l)),a)}
+let R=[a=>a.hasFormat("bold")&&"Bold",a=>a.hasFormat("code")&&"Code",a=>a.hasFormat("italic")&&"Italic",a=>a.hasFormat("strikethrough")&&"Strikethrough",a=>a.hasFormat("subscript")&&"Subscript",a=>a.hasFormat("superscript")&&"Superscript",a=>a.hasFormat("underline")&&"Underline"],S=[a=>a.isDirectionless()&&"Directionless",a=>a.isUnmergeable()&&"Unmergeable"],T=[a=>a.isToken()&&"Token",a=>a.isSegmented()&&"Segmented"];
+function O(a){let c=S.map(e=>e(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="detail: "+c);return c}function P(a){let c=T.map(e=>e(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="mode: "+c);return c}function K(a){let c=R.map(e=>e(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="format: "+c);return c}
+function Q({indent:a,isSelected:c,node:e,nodeKeyDisplay:l,selection:f,typeDisplay:b}){if(!C.$isTextNode(e)||!C.$isRangeSelection(f)||!c||C.$isElementNode(e))return"";c=f.anchor;var d=f.focus;if(""===e.getTextContent()||c.getNode()===f.focus.getNode()&&c.offset===d.offset)return"";d=f.anchor;let n=f.focus,x=e.getTextContent(),t=x.length;c=f=-1;if("text"===d.type&&"text"===n.type){let m=d.getNode(),w=n.getNode();m===w&&e===m&&d.offset!==n.offset?[f,c]=d.offset<n.offset?[d.offset,n.offset]:[n.offset,
+d.offset]:e===m?[f,c]=m.isBefore(w)?[d.offset,t]:[0,d.offset]:e===w?[f,c]=w.isBefore(m)?[n.offset,t]:[0,n.offset]:[f,c]=[0,t]}e=(x.slice(0,f).match(F)||[]).length;d=(x.slice(f,c).match(F)||[]).length;let [q,z]=[f+e,c+e+d];if(q===z)return"";e=a[a.length-1]===G.hasNextSibling?G.ancestorHasNextSibling:G.ancestorIsLastChild;a=[...a.slice(0,a.length-1),e];e=Array(q+1).fill(" ");f=Array(z-q).fill(G.selectedChar);l=Array(l.length+(b.length+3)).fill(" ");return[G.selectedLine,a.join(" "),[...l,...e,...f].join("")].join(" ")+
 "\n"}
-exports.TreeView=function({timeTravelButtonClassName:a,timeTravelPanelSliderClassName:b,timeTravelPanelButtonClassName:c,viewClassName:d,timeTravelPanelClassName:e,editor:g}){let [h,n]=D.useState([]),[w,v]=D.useState(""),[r,x]=D.useState(!1),f=D.useRef(0),m=D.useRef(null),y=D.useRef(null),[u,C]=D.useState(!1);D.useEffect(()=>{v(K(g.getEditorState()));return g.registerUpdateListener(({editorState:k})=>{let p=g._compositionKey,z=K(g.getEditorState());v([z,null!==p&&`Composition key: ${p}`].filter(Boolean).join("\n\n"));r||
-n(B=>[...B,[Date.now(),k]])})},[r,g]);let A=h.length;D.useEffect(()=>{if(u){let k,p=()=>{const z=f.current;z===A-1?C(!1):k=setTimeout(()=>{f.current++;const B=f.current,J=y.current;null!==J&&(J.value=String(B));g.setEditorState(h[B][1]);p()},h[z+1][0]-h[z][0])};p();return()=>{clearTimeout(k)}}},[h,u,g,A]);D.useEffect(()=>{let k=m.current;if(null!==k)return k.__lexicalEditor=g,()=>{k.__lexicalEditor=null}},[g]);return D.createElement("div",{className:d},!r&&2<A&&D.createElement("button",{onClick:()=>
-{let k=g.getRootElement();null!==k&&(k.contentEditable="false",f.current=A-1,x(!0))},className:a,type:"button"},"Time Travel"),D.createElement("pre",{ref:m},w),r&&D.createElement("div",{className:e},D.createElement("button",{className:c,onClick:()=>{C(!u)},type:"button"},u?"Pause":"Play"),D.createElement("input",{className:b,ref:y,onChange:k=>{k=Number(k.target.value);let p=h[k];p&&(f.current=k,g.setEditorState(p[1]))},type:"range",min:"1",max:A-1}),D.createElement("button",{className:c,onClick:()=>
-{var k=g.getRootElement();if(null!==k){k.contentEditable="true";k=h.length-1;g.setEditorState(h[k][1]);let p=y.current;null!==p&&(p.value=String(k));x(!1);C(!1)}},type:"button"},"Exit")))}
+exports.TreeView=function({timeTravelButtonClassName:a,timeTravelPanelSliderClassName:c,timeTravelPanelButtonClassName:e,viewClassName:l,timeTravelPanelClassName:f,editor:b}){let [d,n]=D.useState([]),[x,t]=D.useState(""),[q,z]=D.useState(!1),m=D.useRef(0),w=D.useRef(null),A=D.useRef(null),[h,p]=D.useState(!1);D.useEffect(()=>{t(L(b.getEditorState(),b._config,b._compositionKey,b._editable));return v.mergeRegister(b.registerUpdateListener(({editorState:g})=>{let u=L(b.getEditorState(),b._config,b._compositionKey,
+b._editable);t(u);q||n(B=>[...B,[Date.now(),g]])}),b.registerEditableListener(()=>{let g=L(b.getEditorState(),b._config,b._compositionKey,b._editable);t(g)}))},[q,b]);let y=d.length;D.useEffect(()=>{if(h){let g,u=()=>{const B=m.current;B===y-1?p(!1):g=setTimeout(()=>{m.current++;const I=m.current,J=A.current;null!==J&&(J.value=String(I));b.setEditorState(d[I][1]);u()},d[B+1][0]-d[B][0])};u();return()=>{clearTimeout(g)}}},[d,h,b,y]);D.useEffect(()=>{let g=w.current;if(null!==g)return g.__lexicalEditor=
+b,()=>{g.__lexicalEditor=null}},[b]);return D.createElement("div",{className:l},!q&&2<y&&D.createElement("button",{onClick:()=>{let g=b.getRootElement();null!==g&&(g.contentEditable="false",m.current=y-1,z(!0))},className:a,type:"button"},"Time Travel"),D.createElement("pre",{ref:w},x),q&&D.createElement("div",{className:f},D.createElement("button",{className:e,onClick:()=>{m.current===y-1&&(m.current=1);p(!h)},type:"button"},h?"Pause":"Play"),D.createElement("input",{className:c,ref:A,onChange:g=>
+{g=Number(g.target.value);let u=d[g];u&&(m.current=g,b.setEditorState(u[1]))},type:"range",min:"1",max:y-1}),D.createElement("button",{className:e,onClick:()=>{var g=b.getRootElement();if(null!==g){g.contentEditable="true";g=d.length-1;b.setEditorState(d[g][1]);let u=A.current;null!==u&&(u.value=String(g));z(!1);p(!1)}},type:"button"},"Exit")))}

package/LexicalTypeaheadMenuPlugin.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { LexicalEditor, NodeKey, TextNode } from 'lexical';
+import { LexicalCommand, LexicalEditor, NodeKey, TextNode } from 'lexical';
 import { MutableRefObject, ReactPortal } from 'react';
 export declare type QueryMatch = {
     leadOffset: number;
@@ -14,8 +14,7 @@ export declare type QueryMatch = {
 };
 export declare type Resolution = {
     match: QueryMatch;
-    position: 'start' | 'end';
-    getRect: () => ClientRect;
+    getRect: () => DOMRect;
 };
 export declare const PUNCTUATION = "\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;";
 export declare class TypeaheadOption {
@@ -24,32 +23,42 @@ export declare class TypeaheadOption {
     constructor(key: string);
     setRefElement(element: HTMLElement | null): void;
 }
-export declare type MenuRenderFn<TOption extends TypeaheadOption> = (anchorElement: HTMLElement | null, itemProps: {
+export declare type MenuRenderFn<TOption extends TypeaheadOption> = (anchorElementRef: MutableRefObject<HTMLElement | null>, itemProps: {
     selectedIndex: number | null;
     selectOptionAndCleanUp: (option: TOption) => void;
     setHighlightedIndex: (index: number) => void;
+    options: Array<TOption>;
 }, matchingString: string) => ReactPortal | JSX.Element | null;
+export declare function getScrollParent(element: HTMLElement, includeHidden: boolean): HTMLElement | HTMLBodyElement;
+export declare function useDynamicPositioning(resolution: Resolution | null, targetElement: HTMLElement | null, onReposition: () => void, onVisibilityChange?: (isInView: boolean) => void): void;
+export declare const SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND: LexicalCommand<{
+    index: number;
+    option: TypeaheadOption;
+}>;
 export declare function useBasicTypeaheadTriggerMatch(trigger: string, { minLength, maxLength }: {
     minLength?: number;
     maxLength?: number;
 }): TriggerFn;
-export declare type TypeaheadMenuPluginArgs<TOption extends TypeaheadOption> = {
+export declare type TypeaheadMenuPluginProps<TOption extends TypeaheadOption> = {
     onQueryChange: (matchingString: string | null) => void;
     onSelectOption: (option: TOption, textNodeContainingQuery: TextNode | null, closeMenu: () => void, matchingString: string) => void;
     options: Array<TOption>;
     menuRenderFn: MenuRenderFn<TOption>;
     triggerFn: TriggerFn;
-    position?: 'start' | 'end';
+    onOpen?: (resolution: Resolution) => void;
+    onClose?: () => void;
+    anchorClassName?: string;
 };
 export declare type TriggerFn = (text: string, editor: LexicalEditor) => QueryMatch | null;
-export declare function LexicalTypeaheadMenuPlugin<TOption extends TypeaheadOption>({ options, onQueryChange, onSelectOption, menuRenderFn, triggerFn, position, }: TypeaheadMenuPluginArgs<TOption>): JSX.Element | null;
-declare type NodeMenuPluginArgs<TOption extends TypeaheadOption> = {
+export declare function LexicalTypeaheadMenuPlugin<TOption extends TypeaheadOption>({ options, onQueryChange, onSelectOption, onOpen, onClose, menuRenderFn, triggerFn, anchorClassName, }: TypeaheadMenuPluginProps<TOption>): JSX.Element | null;
+declare type NodeMenuPluginProps<TOption extends TypeaheadOption> = {
     onSelectOption: (option: TOption, textNodeContainingQuery: TextNode | null, closeMenu: () => void, matchingString: string) => void;
     options: Array<TOption>;
     nodeKey: NodeKey | null;
-    onClose: () => void;
-    position?: 'start' | 'end';
+    onClose?: () => void;
+    onOpen?: (resolution: Resolution) => void;
     menuRenderFn: MenuRenderFn<TOption>;
+    anchorClassName?: string;
 };
-export declare function LexicalNodeMenuPlugin<TOption extends TypeaheadOption>({ options, nodeKey, position, onClose, onSelectOption, menuRenderFn, }: NodeMenuPluginArgs<TOption>): JSX.Element | null;
+export declare function LexicalNodeMenuPlugin<TOption extends TypeaheadOption>({ options, nodeKey, onClose, onOpen, onSelectOption, menuRenderFn, anchorClassName, }: NodeMenuPluginProps<TOption>): JSX.Element | null;
 export {};