@lexical/react 0.4.1 → 0.5.0

package/LexicalNestedComposer.d.ts

@@ -5,10 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { EditorThemeClasses, LexicalEditor } from 'lexical';
+import type { EditorThemeClasses, Klass, LexicalEditor, LexicalNode } from 'lexical';
 import { ReactNode } from 'react';
-export declare function LexicalNestedComposer({ initialEditor, children, initialTheme, }: {
+export declare function LexicalNestedComposer({ initialEditor, children, initialNodes, initialTheme, skipCollabChecks, }: {
     children: ReactNode;
     initialEditor: LexicalEditor;
     initialTheme?: EditorThemeClasses;
+    initialNodes?: ReadonlyArray<Klass<LexicalNode>>;
+    skipCollabChecks?: true;
 }): JSX.Element;

package/LexicalNestedComposer.dev.js

@@ -20,7 +20,9 @@ var React = require('react');
 function LexicalNestedComposer({
   initialEditor,
   children,
-  initialTheme
+  initialNodes,
+  initialTheme,
+  skipCollabChecks
 }) {
   const wasCollabPreviouslyReadyRef = React.useRef(false);
   const parentContext = React.useContext(LexicalComposerContext.LexicalComposerContext);
@@ -41,7 +43,27 @@ function LexicalNestedComposer({
     }
 
     initialEditor._parentEditor = parentEditor;
-    initialEditor._nodes = parentEditor._nodes;
+
+    if (!initialNodes) {
+      const parentNodes = initialEditor._nodes = new Map(parentEditor._nodes);
+
+      for (const [type, entry] of parentNodes) {
+        initialEditor._nodes.set(type, {
+          klass: entry.klass,
+          transforms: new Set()
+        });
+      }
+    } else {
+      for (const klass of initialNodes) {
+        const type = klass.getType();
+
+        initialEditor._nodes.set(type, {
+          klass,
+          transforms: new Set()
+        });
+      }
+    }
+
     initialEditor._config.namespace = parentEditor._config.namespace;
     return [initialEditor, context];
   }, // We only do this for init
@@ -53,7 +75,7 @@ function LexicalNestedComposer({
     isCollabActive,
     yjsDocMap
   } = LexicalCollaborationContext.useCollaborationContext();
-  const isCollabReady = wasCollabPreviouslyReadyRef.current || yjsDocMap.has(initialEditor.getKey());
+  const isCollabReady = skipCollabChecks || wasCollabPreviouslyReadyRef.current || yjsDocMap.has(initialEditor.getKey());
   React.useEffect(() => {
     if (isCollabReady) {
       wasCollabPreviouslyReadyRef.current = true;

package/LexicalNestedComposer.js.flow

@@ -13,4 +13,5 @@ declare export function LexicalNestedComposer({
   children: React$Node,
   initialEditor: LexicalEditor,
   initialTheme?: EditorThemeClasses,
+  initialNodes?: $ReadOnlyArray<Class<LexicalNode>>,
 }): React$Node;

package/LexicalNestedComposer.prod.js

@@ -4,6 +4,6 @@
  * 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 b=require("@lexical/react/LexicalCollaborationContext"),c=require("@lexical/react/LexicalComposerContext"),k=require("react");
-exports.LexicalNestedComposer=function({initialEditor:a,children:l,initialTheme:m}){let h=k.useRef(!1),d=k.useContext(c.LexicalComposerContext);if(null==d)throw Error("Minified Lexical error #9; visit https://lexical.dev/docs/error?code=9 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");let q=k.useMemo(()=>{const [e,n]=d,f=m||n.getTheme()||void 0,p=c.createLexicalComposerContext(d,f);void 0!==f&&(a._config.theme=f);a._parentEditor=e;a._nodes=
-e._nodes;a._config.namespace=e._config.namespace;return[a,p]},[]),{isCollabActive:r,yjsDocMap:t}=b.useCollaborationContext(),g=h.current||t.has(a.getKey());k.useEffect(()=>{g&&(h.current=!0)},[g]);return k.createElement(c.LexicalComposerContext.Provider,{value:q},!r||g?l:null)}
+'use strict';var b=require("@lexical/react/LexicalCollaborationContext"),e=require("@lexical/react/LexicalComposerContext"),m=require("react");
+exports.LexicalNestedComposer=function({initialEditor:a,children:n,initialNodes:k,initialTheme:p,skipCollabChecks:q}){let l=m.useRef(!1),f=m.useContext(e.LexicalComposerContext);if(null==f)throw Error("Minified Lexical error #9; visit https://lexical.dev/docs/error?code=9 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");let w=m.useMemo(()=>{const [g,r]=f;var c=p||r.getTheme()||void 0;const t=e.createLexicalComposerContext(f,c);void 0!==
+c&&(a._config.theme=c);a._parentEditor=g;if(k)for(var d of k)c=d.getType(),a._nodes.set(c,{klass:d,transforms:new Set});else{d=a._nodes=new Map(g._nodes);for(const [u,v]of d)a._nodes.set(u,{klass:v.klass,transforms:new Set})}a._config.namespace=g._config.namespace;return[a,t]},[]),{isCollabActive:x,yjsDocMap:y}=b.useCollaborationContext(),h=q||l.current||y.has(a.getKey());m.useEffect(()=>{h&&(l.current=!0)},[h]);return m.createElement(e.LexicalComposerContext.Provider,{value:w},!x||h?n:null)}

package/LexicalOnChangePlugin.d.ts

@@ -6,9 +6,8 @@
  *
  */
 import type { EditorState, LexicalEditor } from 'lexical';
-export declare function OnChangePlugin({ ignoreHistoryMergeTagChange, ignoreInitialChange, ignoreSelectionChange, onChange, }: {
+export declare function OnChangePlugin({ ignoreHistoryMergeTagChange, ignoreSelectionChange, onChange, }: {
     ignoreHistoryMergeTagChange?: boolean;
-    ignoreInitialChange?: boolean;
     ignoreSelectionChange?: boolean;
     onChange: (editorState: EditorState, editor: LexicalEditor) => void;
 }): null;

package/LexicalOnChangePlugin.dev.js

@@ -36,9 +36,7 @@ var useLayoutEffect = useLayoutEffectImpl;
  *
  */
 function OnChangePlugin({
-  // TODO 0.5 flip to true
-  ignoreHistoryMergeTagChange = false,
-  ignoreInitialChange = true,
+  ignoreHistoryMergeTagChange = true,
   ignoreSelectionChange = false,
   onChange
 }) {
@@ -52,18 +50,14 @@ function OnChangePlugin({
         prevEditorState,
         tags
       }) => {
-        if (ignoreSelectionChange && dirtyElements.size === 0 && dirtyLeaves.size === 0 || ignoreHistoryMergeTagChange && tags.has('history-merge')) {
-          return;
-        }
-
-        if (ignoreInitialChange && prevEditorState.isEmpty()) {
+        if (ignoreSelectionChange && dirtyElements.size === 0 && dirtyLeaves.size === 0 || ignoreHistoryMergeTagChange && tags.has('history-merge') || prevEditorState.isEmpty()) {
           return;
         }
 
         onChange(editorState, editor);
       });
     }
-  }, [editor, ignoreHistoryMergeTagChange, ignoreInitialChange, ignoreSelectionChange, onChange]);
+  }, [editor, ignoreHistoryMergeTagChange, ignoreSelectionChange, onChange]);
   return null;
 }
 

package/LexicalOnChangePlugin.js.flow

@@ -11,8 +11,6 @@ import type {EditorState, LexicalEditor} from 'lexical';
 
 declare export function OnChangePlugin({
   ignoreHistoryMergeTagChange?: boolean,
-  // TODO 0.5 remove
-  ignoreInitialChange?: boolean,
   ignoreSelectionChange?: boolean,
   onChange: (editorState: EditorState, editor: LexicalEditor) => void,
 }): null;

package/LexicalOnChangePlugin.prod.js

@@ -4,5 +4,5 @@
  * 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"),g=require("react"),h="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?g.useLayoutEffect:g.useEffect;
-exports.OnChangePlugin=function({ignoreHistoryMergeTagChange:d=!1,ignoreInitialChange:e=!0,ignoreSelectionChange:f=!1,onChange:a}){let [b]=c.useLexicalComposerContext();h(()=>{if(a)return b.registerUpdateListener(({editorState:k,dirtyElements:l,dirtyLeaves:m,prevEditorState:n,tags:p})=>{f&&0===l.size&&0===m.size||d&&p.has("history-merge")||e&&n.isEmpty()||a(k,b)})},[b,d,e,f,a]);return null}
+'use strict';var c=require("@lexical/react/LexicalComposerContext"),f=require("react"),g="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?f.useLayoutEffect:f.useEffect;
+exports.OnChangePlugin=function({ignoreHistoryMergeTagChange:d=!0,ignoreSelectionChange:e=!1,onChange:a}){let [b]=c.useLexicalComposerContext();g(()=>{if(a)return b.registerUpdateListener(({editorState:h,dirtyElements:k,dirtyLeaves:l,prevEditorState:m,tags:n})=>{e&&0===k.size&&0===l.size||d&&n.has("history-merge")||m.isEmpty()||a(h,b)})},[b,d,e,a]);return null}

package/LexicalPlainTextPlugin.d.ts

@@ -5,9 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { InitialEditorStateType } from '@lexical/plain-text';
-export declare function PlainTextPlugin({ contentEditable, placeholder, initialEditorState, }: {
+export declare function PlainTextPlugin({ contentEditable, placeholder, }: {
     contentEditable: JSX.Element;
-    initialEditorState?: InitialEditorStateType;
     placeholder: JSX.Element | string;
 }): JSX.Element;

package/LexicalPlainTextPlugin.dev.js

@@ -14,25 +14,6 @@ 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.
- *
- */
-function warnOnlyOnce(message) {
-
-  let run = false;
-  return () => {
-    if (!run) {
-      console.warn(message);
-    }
-
-    run = true;
-  };
-}
-
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -132,9 +113,9 @@ function useDecorators(editor) {
  * LICENSE file in the root directory of this source tree.
  *
  */
-function usePlainTextSetup(editor, initialEditorState) {
+function usePlainTextSetup(editor) {
   useLayoutEffect(() => {
-    return utils.mergeRegister(plainText.registerPlainText(editor, initialEditorState), dragon.registerDragonSupport(editor)); // We only do this for init
+    return utils.mergeRegister(plainText.registerPlainText(editor), dragon.registerDragonSupport(editor)); // We only do this for init
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor]);
 }
@@ -146,20 +127,14 @@ function usePlainTextSetup(editor, initialEditorState) {
  * LICENSE file in the root directory of this source tree.
  *
  */
-const deprecatedInitialEditorStateWarning = warnOnlyOnce('`initialEditorState` on `PlainTextPlugin` is deprecated and will be removed soon. Use the `initialConfig.editorState` prop on the `LexicalComposer` instead.');
 function PlainTextPlugin({
   contentEditable,
-  placeholder,
-  initialEditorState
+  placeholder
 }) {
-  if (deprecatedInitialEditorStateWarning && initialEditorState !== undefined) {
-    deprecatedInitialEditorStateWarning();
-  }
-
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const showPlaceholder = useCanShowPlaceholder(editor);
   const decorators = useDecorators(editor);
-  usePlainTextSetup(editor, initialEditorState);
+  usePlainTextSetup(editor);
   return /*#__PURE__*/React.createElement(React.Fragment, null, contentEditable, showPlaceholder && placeholder, decorators);
 }
 

package/LexicalPlainTextPlugin.js.flow

@@ -17,6 +17,5 @@ type InitialEditorStateType =
 
 declare export function PlainTextPlugin({
   contentEditable: React$Node,
-  initialEditorState?: InitialEditorStateType,
   placeholder: React$Node,
 }): React$Node;

package/LexicalPlainTextPlugin.prod.js

@@ -4,7 +4,7 @@
  * 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 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"),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 [c,f]=h.useState(()=>t(a));r(()=>{function b(){let g=t(a);f(g)}b();return m.mergeRegister(a.registerUpdateListener(()=>{b()}),a.registerEditableListener(()=>{b()}))},[a]);return c}
-function v(a){let [c,f]=h.useState(()=>a.getDecorators());r(()=>a.registerDecoratorListener(b=>{n.flushSync(()=>{f(b)})}),[a]);h.useEffect(()=>{f(a.getDecorators())},[a]);return h.useMemo(()=>{let b=[],g=Object.keys(c);for(let k=0;k<g.length;k++){var e=g[k];let w=c[e];e=a.getElementByKey(e);null!==e&&b.push(n.createPortal(w,e))}return b},[c,a])}function x(a,c){r(()=>m.mergeRegister(q.registerPlainText(a,c),p.registerDragonSupport(a)),[a])}
-exports.PlainTextPlugin=function({contentEditable:a,placeholder:c,initialEditorState:f}){let [b]=d.useLexicalComposerContext(),g=u(b),e=v(b);x(b,f);return h.createElement(h.Fragment,null,a,g&&c,e)}
+'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)}

package/LexicalRichTextPlugin.d.ts

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

package/LexicalRichTextPlugin.dev.js

@@ -14,25 +14,6 @@ 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.
- *
- */
-function warnOnlyOnce(message) {
-
-  let run = false;
-  return () => {
-    if (!run) {
-      console.warn(message);
-    }
-
-    run = true;
-  };
-}
-
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -132,9 +113,9 @@ function useDecorators(editor) {
  * LICENSE file in the root directory of this source tree.
  *
  */
-function useRichTextSetup(editor, initialEditorState) {
+function useRichTextSetup(editor) {
   useLayoutEffect(() => {
-    return utils.mergeRegister(richText.registerRichText(editor, initialEditorState), dragon.registerDragonSupport(editor)); // We only do this for init
+    return utils.mergeRegister(richText.registerRichText(editor), dragon.registerDragonSupport(editor)); // We only do this for init
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor]);
 }
@@ -146,20 +127,14 @@ function useRichTextSetup(editor, initialEditorState) {
  * LICENSE file in the root directory of this source tree.
  *
  */
-const deprecatedInitialEditorStateWarning = warnOnlyOnce('`initialEditorState` on `RichTextPlugin` is deprecated and will be removed soon. Use the `initialConfig.editorState` prop on the `LexicalComposer` instead.');
 function RichTextPlugin({
   contentEditable,
-  placeholder,
-  initialEditorState
+  placeholder
 }) {
-  if (deprecatedInitialEditorStateWarning && initialEditorState !== undefined) {
-    deprecatedInitialEditorStateWarning();
-  }
-
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const showPlaceholder = useCanShowPlaceholder(editor);
   const decorators = useDecorators(editor);
-  useRichTextSetup(editor, initialEditorState);
+  useRichTextSetup(editor);
   return /*#__PURE__*/React.createElement(React.Fragment, null, contentEditable, showPlaceholder && placeholder, decorators);
 }
 

package/LexicalRichTextPlugin.js.flow

@@ -17,6 +17,5 @@ type InitialEditorStateType =
 
 declare export function RichTextPlugin({
   contentEditable: React$Node,
-  initialEditorState?: InitialEditorStateType,
   placeholder: React$Node,
 }): React$Node;

package/LexicalRichTextPlugin.prod.js

@@ -4,7 +4,7 @@
  * 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 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"),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 [c,f]=h.useState(()=>t(a));r(()=>{function b(){let g=t(a);f(g)}b();return m.mergeRegister(a.registerUpdateListener(()=>{b()}),a.registerEditableListener(()=>{b()}))},[a]);return c}
-function v(a){let [c,f]=h.useState(()=>a.getDecorators());r(()=>a.registerDecoratorListener(b=>{n.flushSync(()=>{f(b)})}),[a]);h.useEffect(()=>{f(a.getDecorators())},[a]);return h.useMemo(()=>{let b=[],g=Object.keys(c);for(let k=0;k<g.length;k++){var e=g[k];let w=c[e];e=a.getElementByKey(e);null!==e&&b.push(n.createPortal(w,e))}return b},[c,a])}function x(a,c){r(()=>m.mergeRegister(q.registerRichText(a,c),p.registerDragonSupport(a)),[a])}
-exports.RichTextPlugin=function({contentEditable:a,placeholder:c,initialEditorState:f}){let [b]=d.useLexicalComposerContext(),g=u(b),e=v(b);x(b,f);return h.createElement(h.Fragment,null,a,g&&c,e)}
+'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)}

package/LexicalTableOfContents__EXPERIMENTAL.js.flow

@@ -10,7 +10,7 @@
 import type {HeadingTagType} from '@lexical/rich-text';
 import type {NodeKey} from 'lexical';
 
-declare export function LexicalTableOfContentsPlugin({
+declare export default function LexicalTableOfContentsPlugin({
   children: (
     tableOfContents: Array<[NodeKey, string, HeadingTagType]>,
   ) => React$Node,

package/LexicalTablePlugin.dev.js

@@ -44,7 +44,7 @@ function TablePlugin() {
       if (focusNode !== null) {
         const tableNode = table.$createTableNodeWithDimensions(Number(rows), Number(columns), includeHeaders);
 
-        if (lexical.$isRootNode(focusNode)) {
+        if (lexical.$isRootOrShadowRoot(focusNode)) {
           const target = focusNode.getChildAtIndex(focus.offset);
 
           if (target !== null) {

package/LexicalTablePlugin.prod.js

@@ -6,5 +6,5 @@
  */
 'use strict';var e=require("@lexical/react/LexicalComposerContext"),f=require("@lexical/table"),k=require("lexical"),m=require("react");
 exports.TablePlugin=function(){let [d]=e.useLexicalComposerContext();m.useEffect(()=>{if(!d.hasNodes([f.TableNode,f.TableCellNode,f.TableRowNode]))throw Error("Minified Lexical error #10; visit https://lexical.dev/docs/error?code=10 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");return d.registerCommand(f.INSERT_TABLE_COMMAND,({columns:a,rows:c,includeHeaders:g})=>{var b=k.$getSelection();if(!k.$isRangeSelection(b))return!0;let h=b.focus;
-b=h.getNode();null!==b&&(a=f.$createTableNodeWithDimensions(Number(c),Number(a),g),k.$isRootNode(b)?(c=b.getChildAtIndex(h.offset),null!==c?c.insertBefore(a):b.append(a),a.insertBefore(k.$createParagraphNode())):b.getTopLevelElementOrThrow().insertAfter(a),a.insertAfter(k.$createParagraphNode()),a.getFirstChildOrThrow().getFirstChildOrThrow().select());return!0},k.COMMAND_PRIORITY_EDITOR)},[d]);m.useEffect(()=>{let a=new Map;return d.registerMutationListener(f.TableNode,c=>{for(let [g,b]of c)"created"===
+b=h.getNode();null!==b&&(a=f.$createTableNodeWithDimensions(Number(c),Number(a),g),k.$isRootOrShadowRoot(b)?(c=b.getChildAtIndex(h.offset),null!==c?c.insertBefore(a):b.append(a),a.insertBefore(k.$createParagraphNode())):b.getTopLevelElementOrThrow().insertAfter(a),a.insertAfter(k.$createParagraphNode()),a.getFirstChildOrThrow().getFirstChildOrThrow().select());return!0},k.COMMAND_PRIORITY_EDITOR)},[d]);m.useEffect(()=>{let a=new Map;return d.registerMutationListener(f.TableNode,c=>{for(let [g,b]of c)"created"===
 b?d.update(()=>{var h=d.getElementByKey(g);let l=k.$getNodeByKey(g);h&&l&&(h=f.applyTableHandlers(l,h,d),a.set(g,h))}):"destroyed"===b&&(c=a.get(g),void 0!==c&&(c.removeListeners(),a.delete(g)))})},[d]);return null}

package/LexicalTreeView.dev.js

@@ -213,7 +213,7 @@ function generateContent(editorState) {
         typeDisplay
       });
     });
-    return selection === null ? ': null' : lexical.$isRangeSelection(selection) ? printRangeSelection(selection) : lexical.$isGridSelection(selection) ? printGridSelection(selection) : printObjectSelection(selection);
+    return selection === null ? ': null' : lexical.$isRangeSelection(selection) ? printRangeSelection(selection) : lexical.DEPRECATED_$isGridSelection(selection) ? printGridSelection(selection) : printObjectSelection(selection);
   });
   return res + '\n selection' + selectionString;
 }
@@ -237,7 +237,7 @@ function normalize(text) {
 
 function printNode(node) {
   if (lexical.$isTextNode(node)) {
-    const text = node.getTextContent(true);
+    const text = node.getTextContent();
     const title = text.length === 0 ? '(empty)' : `"${normalize(text)}"`;
     const properties = printAllTextNodeProperties(node);
     return [title, properties.length !== 0 ? `{ ${properties} }` : null].filter(Boolean).join(' ').trim();
@@ -253,7 +253,7 @@ function printNode(node) {
 
 const FORMAT_PREDICATES = [node => node.hasFormat('bold') && 'Bold', node => node.hasFormat('code') && 'Code', node => node.hasFormat('italic') && 'Italic', node => node.hasFormat('strikethrough') && 'Strikethrough', node => node.hasFormat('subscript') && 'Subscript', node => node.hasFormat('superscript') && 'Superscript', node => node.hasFormat('underline') && 'Underline'];
 const DETAIL_PREDICATES = [node => node.isDirectionless() && 'Directionless', node => node.isUnmergeable() && 'Unmergeable'];
-const MODE_PREDICATES = [node => node.isToken() && 'Token', node => node.isSegmented() && 'Segmented', node => node.isInert() && 'Inert'];
+const MODE_PREDICATES = [node => node.isToken() && 'Token', node => node.isSegmented() && 'Segmented'];
 
 function printAllTextNodeProperties(node) {
   return [printFormatProperties(node), printDetailProperties(node), printModeProperties(node)].filter(Boolean).join(', ');
@@ -353,7 +353,7 @@ function printSelectedCharsLine({
 function $getSelectionStartEnd(node, selection) {
   const anchor = selection.anchor;
   const focus = selection.focus;
-  const textContent = node.getTextContent(true);
+  const textContent = node.getTextContent();
   const textLength = textContent.length;
   let start = -1;
   let end = -1; // Only one node is being selected.

package/LexicalTreeView.prod.js

@@ -6,12 +6,12 @@
  */
 '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(!0);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.$isGridSelection(c)?`: grid\n  \u2514 { grid: ${c.gridKey}, anchorCell: ${c.anchor.key}, focusCell: ${c.focus.key} }`:
+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",a=>a.isInert()&&"Inert"];
+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(!0),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,
+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(" ")+
 "\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||

package/LexicalTypeaheadMenuPlugin.d.ts

@@ -14,6 +14,7 @@ export declare type QueryMatch = {
 };
 export declare type Resolution = {
     match: QueryMatch;
+    position: 'start' | 'end';
     getRect: () => ClientRect;
 };
 export declare const PUNCTUATION = "\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;";
@@ -38,15 +39,17 @@ export declare type TypeaheadMenuPluginArgs<TOption extends TypeaheadOption> = {
     options: Array<TOption>;
     menuRenderFn: MenuRenderFn<TOption>;
     triggerFn: TriggerFn;
+    position?: 'start' | 'end';
 };
 export declare type TriggerFn = (text: string, editor: LexicalEditor) => QueryMatch | null;
-export declare function LexicalTypeaheadMenuPlugin<TOption extends TypeaheadOption>({ options, onQueryChange, onSelectOption, menuRenderFn, triggerFn, }: TypeaheadMenuPluginArgs<TOption>): JSX.Element | 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> = {
     onSelectOption: (option: TOption, textNodeContainingQuery: TextNode | null, closeMenu: () => void, matchingString: string) => void;
     options: Array<TOption>;
     nodeKey: NodeKey | null;
     onClose: () => void;
+    position?: 'start' | 'end';
     menuRenderFn: MenuRenderFn<TOption>;
 };
-export declare function LexicalNodeMenuPlugin<TOption extends TypeaheadOption>({ options, nodeKey, onClose, onSelectOption, menuRenderFn, }: NodeMenuPluginArgs<TOption>): JSX.Element | null;
+export declare function LexicalNodeMenuPlugin<TOption extends TypeaheadOption>({ options, nodeKey, position, onClose, onSelectOption, menuRenderFn, }: NodeMenuPluginArgs<TOption>): JSX.Element | null;
 export {};

package/LexicalTypeaheadMenuPlugin.dev.js

@@ -228,7 +228,7 @@ function LexicalPopoverMenu({
   React.useEffect(() => {
     setHighlightedIndex(0);
   }, [resolution.match.matchingString]);
-  const selectOptionAndCleanUp = React.useCallback(async selectedEntry => {
+  const selectOptionAndCleanUp = React.useCallback(selectedEntry => {
     editor.update(() => {
       const textNodeContainingQuery = splitNodeContainingQuery(editor, resolution.match);
       onSelectOption(selectedEntry, textNodeContainingQuery, close, resolution.match.matchingString);
@@ -374,10 +374,11 @@ function useAnchorElementRef(resolution) {
         const {
           left,
           top,
+          width,
           height
         } = resolution.getRect();
         containerDiv.style.top = `${top + height + 5 + window.pageYOffset}px`;
-        containerDiv.style.left = `${left + window.pageXOffset}px`;
+        containerDiv.style.left = `${left + (resolution.position === 'start' ? 0 : width) + window.pageXOffset}px`;
         containerDiv.style.display = 'block';
         containerDiv.style.position = 'absolute';
 
@@ -410,14 +411,14 @@ function LexicalTypeaheadMenuPlugin({
   onQueryChange,
   onSelectOption,
   menuRenderFn,
-  triggerFn
+  triggerFn,
+  position = 'start'
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const [resolution, setResolution] = React.useState(null);
   const anchorElementRef = useAnchorElementRef(resolution);
   React.useEffect(() => {
     let activeRange = document.createRange();
-    let previousText = null;
 
     const updateListener = () => {
       editor.getEditorState().read(() => {
@@ -425,12 +426,11 @@ function LexicalTypeaheadMenuPlugin({
         const selection = lexical.$getSelection();
         const text = getQueryTextForSearch(editor);
 
-        if (!lexical.$isRangeSelection(selection) || !selection.isCollapsed() || text === previousText || text === null || range === null) {
+        if (!lexical.$isRangeSelection(selection) || !selection.isCollapsed() || text === null || range === null) {
           setResolution(null);
           return;
         }
 
-        previousText = text;
         const match = triggerFn(text, editor);
         onQueryChange(match ? match.matchingString : null);
 
@@ -440,7 +440,8 @@ function LexicalTypeaheadMenuPlugin({
           if (isRangePositioned !== null) {
             startTransition(() => setResolution({
               getRect: () => range.getBoundingClientRect(),
-              match
+              match,
+              position
             }));
             return;
           }
@@ -455,7 +456,7 @@ function LexicalTypeaheadMenuPlugin({
       activeRange = null;
       removeUpdateListener();
     };
-  }, [editor, triggerFn, onQueryChange, resolution]);
+  }, [editor, triggerFn, onQueryChange, resolution, position]);
   const closeTypeahead = React.useCallback(() => {
     setResolution(null);
   }, []);
@@ -472,6 +473,7 @@ function LexicalTypeaheadMenuPlugin({
 function LexicalNodeMenuPlugin({
   options,
   nodeKey,
+  position = 'end',
   onClose,
   onSelectOption,
   menuRenderFn
@@ -493,14 +495,15 @@ function LexicalNodeMenuPlugin({
               leadOffset: text.length,
               matchingString: text,
               replaceableString: text
-            }
+            },
+            position
           }));
         }
       });
     } else if (nodeKey == null && resolution != null) {
       setResolution(null);
     }
-  }, [editor, nodeKey, resolution]);
+  }, [editor, nodeKey, position, resolution]);
   return resolution === null || editor === null ? null : /*#__PURE__*/React.createElement(LexicalPopoverMenu, {
     close: onClose,
     resolution: resolution,