@lexical/react 0.2.2 → 0.2.5

package/DEPRECATED_useLexicalList.dev.js

@@ -22,20 +22,10 @@ var react = require('react');
 function useList(editor) {
   react.useEffect(() => {
     return utils.mergeRegister(editor.registerCommand(lexical.INDENT_CONTENT_COMMAND, () => {
-      const hasHandledIndention = list.indentList();
-
-      if (hasHandledIndention) {
-        return true;
-      }
-
+      list.indentList();
       return false;
     }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.OUTDENT_CONTENT_COMMAND, () => {
-      const hasHandledIndention = list.outdentList();
-
-      if (hasHandledIndention) {
-        return true;
-      }
-
+      list.outdentList();
       return false;
     }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(list.INSERT_ORDERED_LIST_COMMAND, () => {
       list.insertList(editor, 'ol');

package/DEPRECATED_useLexicalList.prod.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 var b=require("@lexical/list"),c=require("@lexical/utils"),d=require("lexical"),e=require("react");
-function f(a){e.useEffect(()=>c.mergeRegister(a.registerCommand(d.INDENT_CONTENT_COMMAND,()=>b.indentList()?!0:!1,d.COMMAND_PRIORITY_LOW),a.registerCommand(d.OUTDENT_CONTENT_COMMAND,()=>b.outdentList()?!0:!1,d.COMMAND_PRIORITY_LOW),a.registerCommand(b.INSERT_ORDERED_LIST_COMMAND,()=>{b.insertList(a,"ol");return!0},d.COMMAND_PRIORITY_LOW),a.registerCommand(b.INSERT_UNORDERED_LIST_COMMAND,()=>{b.insertList(a,"ul");return!0},d.COMMAND_PRIORITY_LOW),a.registerCommand(b.REMOVE_LIST_COMMAND,()=>{b.removeList(a);
-return!0},d.COMMAND_PRIORITY_LOW),a.registerCommand(d.INSERT_PARAGRAPH_COMMAND,()=>b.$handleListInsertParagraph()?!0:!1,d.COMMAND_PRIORITY_LOW)),[a])}module.exports=function(a){f(a)};
+function f(a){e.useEffect(()=>c.mergeRegister(a.registerCommand(d.INDENT_CONTENT_COMMAND,()=>{b.indentList();return!1},d.COMMAND_PRIORITY_LOW),a.registerCommand(d.OUTDENT_CONTENT_COMMAND,()=>{b.outdentList();return!1},d.COMMAND_PRIORITY_LOW),a.registerCommand(b.INSERT_ORDERED_LIST_COMMAND,()=>{b.insertList(a,"ol");return!0},d.COMMAND_PRIORITY_LOW),a.registerCommand(b.INSERT_UNORDERED_LIST_COMMAND,()=>{b.insertList(a,"ul");return!0},d.COMMAND_PRIORITY_LOW),a.registerCommand(b.REMOVE_LIST_COMMAND,()=>
+{b.removeList(a);return!0},d.COMMAND_PRIORITY_LOW),a.registerCommand(d.INSERT_PARAGRAPH_COMMAND,()=>b.$handleListInsertParagraph()?!0:!1,d.COMMAND_PRIORITY_LOW)),[a])}module.exports=function(a){f(a)};

package/LexicalBlockWithAlignableContents.dev.js

@@ -0,0 +1,102 @@
+/**
+ * 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.
+ */
+'use strict';
+
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var LexicalDecoratorBlockNode = require('@lexical/react/LexicalDecoratorBlockNode');
+var useLexicalNodeSelection = require('@lexical/react/useLexicalNodeSelection');
+var utils = require('@lexical/utils');
+var lexical = require('lexical');
+var React = require('react');
+
+/**
+ * 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 BlockWithAlignableContents({
+  children,
+  format,
+  nodeKey
+}) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+  const ref = React.useRef();
+  const onDelete = React.useCallback(payload => {
+    if (isSelected && lexical.$isNodeSelection(lexical.$getSelection())) {
+      const event = payload;
+      event.preventDefault();
+      editor.update(() => {
+        const node = lexical.$getNodeByKey(nodeKey);
+
+        if (lexical.$isDecoratorNode(node) && node.isTopLevel()) {
+          node.remove();
+        }
+
+        setSelected(false);
+      });
+    }
+
+    return false;
+  }, [editor, isSelected, nodeKey, setSelected]);
+  React.useEffect(() => {
+    return utils.mergeRegister(editor.registerCommand(lexical.FORMAT_ELEMENT_COMMAND, payload => {
+      if (isSelected) {
+        const selection = lexical.$getSelection();
+
+        if (lexical.$isNodeSelection(selection)) {
+          const node = lexical.$getNodeByKey(nodeKey);
+
+          if (LexicalDecoratorBlockNode.$isDecoratorBlockNode(node)) {
+            node.setFormat(payload);
+          }
+        } else if (lexical.$isRangeSelection(selection)) {
+          const nodes = selection.getNodes();
+
+          for (const node of nodes) {
+            if (LexicalDecoratorBlockNode.$isDecoratorBlockNode(node)) {
+              node.setFormat(payload);
+            } else {
+              const element = utils.$getNearestBlockElementAncestorOrThrow(node);
+              element.setFormat(payload);
+            }
+          }
+        }
+
+        return true;
+      }
+
+      return false;
+    }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.CLICK_COMMAND, payload => {
+      const event = payload;
+      event.preventDefault();
+
+      if (event.target === ref.current) {
+        if (!event.shiftKey) {
+          clearSelection();
+        }
+
+        setSelected(!isSelected);
+        return true;
+      }
+
+      return false;
+    }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_DELETE_COMMAND, onDelete, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_BACKSPACE_COMMAND, onDelete, lexical.COMMAND_PRIORITY_LOW));
+  }, [clearSelection, editor, isSelected, nodeKey, onDelete, setSelected]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: `embed-block${isSelected ? ' focused' : ''}`,
+    ref: ref,
+    style: {
+      textAlign: format
+    }
+  }, children);
+}
+
+exports.BlockWithAlignableContents = BlockWithAlignableContents;

package/LexicalBlockWithAlignableContents.js

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+'use strict'
+const LexicalBlockWithAlignableContents = process.env.NODE_ENV === 'development' ? require('./LexicalBlockWithAlignableContents.dev.js') : require('./LexicalBlockWithAlignableContents.prod.js')
+module.exports = LexicalBlockWithAlignableContents;

package/LexicalBlockWithAlignableContents.js.flow

@@ -0,0 +1,24 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ */
+
+import type {
+  ElementFormatType,
+  LexicalEditor,
+  EditorThemeClasses,
+  LexicalNode,
+  NodeKey,
+} from 'lexical';
+
+type Props = $ReadOnly<{
+  children: React$Node,
+  format: ?ElementFormatType,
+  nodeKey: NodeKey,
+}>;
+
+declare export function BlockWithAlignableContents(Props): React$Node;

package/LexicalBlockWithAlignableContents.prod.js

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+var a=require("@lexical/react/LexicalComposerContext"),h=require("@lexical/react/LexicalDecoratorBlockNode"),m=require("@lexical/react/useLexicalNodeSelection"),n=require("@lexical/utils"),r=require("lexical"),t=require("react");
+exports.BlockWithAlignableContents=function({children:u,format:v,nodeKey:g}){const [d]=a.useLexicalComposerContext(),[e,k,p]=m(g),q=t.useRef(),l=t.useCallback(b=>{e&&r.$isNodeSelection(r.$getSelection())&&(b.preventDefault(),d.update(()=>{const c=r.$getNodeByKey(g);r.$isDecoratorNode(c)&&c.isTopLevel()&&c.remove();k(!1)}));return!1},[d,e,g,k]);t.useEffect(()=>n.mergeRegister(d.registerCommand(r.FORMAT_ELEMENT_COMMAND,b=>{if(e){var c=r.$getSelection();if(r.$isNodeSelection(c)){var f=r.$getNodeByKey(g);
+h.$isDecoratorBlockNode(f)&&f.setFormat(b)}else if(r.$isRangeSelection(c)){c=c.getNodes();for(f of c)h.$isDecoratorBlockNode(f)?f.setFormat(b):n.$getNearestBlockElementAncestorOrThrow(f).setFormat(b)}return!0}return!1},r.COMMAND_PRIORITY_LOW),d.registerCommand(r.CLICK_COMMAND,b=>{b.preventDefault();return b.target===q.current?(b.shiftKey||p(),k(!e),!0):!1},r.COMMAND_PRIORITY_LOW),d.registerCommand(r.KEY_DELETE_COMMAND,l,r.COMMAND_PRIORITY_LOW),d.registerCommand(r.KEY_BACKSPACE_COMMAND,l,r.COMMAND_PRIORITY_LOW)),
+[p,d,e,g,l,k]);return t.createElement("div",{className:`embed-block${e?" focused":""}`,ref:q,style:{textAlign:v}},u)};

package/LexicalComposer.dev.js

@@ -56,7 +56,6 @@ function LexicalComposer({
 
     if (editor === null) {
       const newEditor = lexical.createEditor({
-        context,
         namespace,
         nodes,
         onError: error => onError(error, newEditor),

package/LexicalComposer.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.
  */
-var a=require("@lexical/react/LexicalComposerContext"),e=require("lexical"),l=require("react"),m="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?l.useLayoutEffect:l.useEffect;
-module.exports=function({initialConfig:f,children:n}){const k=l.useMemo(()=>{const {theme:b,namespace:c,editor__DEPRECATED:p,nodes:q,onError:r}=f,g=a.createLexicalComposerContext(null,b);let d=p||null;if(null===d){const h=e.createEditor({context:g,namespace:c,nodes:q,onError:t=>r(t,h),readOnly:!0,theme:b});d=h}return[d,g]},[]);m(()=>{const b=f.readOnly,[c]=k;c.setReadOnly(b||!1)},[]);return l.createElement(a.LexicalComposerContext.Provider,{value:k},n)};
+var a=require("@lexical/react/LexicalComposerContext"),e=require("lexical"),k=require("react"),l="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?k.useLayoutEffect:k.useEffect;
+module.exports=function({initialConfig:f,children:m}){const h=k.useMemo(()=>{const {theme:b,namespace:c,editor__DEPRECATED:n,nodes:p,onError:q}=f,r=a.createLexicalComposerContext(null,b);let d=n||null;if(null===d){const g=e.createEditor({namespace:c,nodes:p,onError:t=>q(t,g),readOnly:!0,theme:b});d=g}return[d,r]},[]);l(()=>{const b=f.readOnly,[c]=h;c.setReadOnly(b||!1)},[]);return k.createElement(a.LexicalComposerContext.Provider,{value:h},m)};

package/LexicalDecoratorBlockNode.dev.js

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ */
+'use strict';
+
+var lexical = require('lexical');
+
+/**
+ * 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.
+ *
+ * 
+ */
+class DecoratorBlockNode extends lexical.DecoratorNode {
+  constructor(format, key) {
+    super(key);
+    this.__format = format;
+  }
+
+  createDOM() {
+    return document.createElement('div');
+  }
+
+  updateDOM() {
+    return false;
+  }
+
+  setFormat(format) {
+    const self = this.getWritable();
+    self.__format = format;
+  }
+
+}
+function $isDecoratorBlockNode(node) {
+  return node instanceof DecoratorBlockNode;
+}
+
+exports.$isDecoratorBlockNode = $isDecoratorBlockNode;
+exports.DecoratorBlockNode = DecoratorBlockNode;

package/LexicalDecoratorBlockNode.js

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+'use strict'
+const LexicalDecoratorBlockNode = process.env.NODE_ENV === 'development' ? require('./LexicalDecoratorBlockNode.dev.js') : require('./LexicalDecoratorBlockNode.prod.js')
+module.exports = LexicalDecoratorBlockNode;

package/LexicalDecoratorBlockNode.js.flow

@@ -0,0 +1,28 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ */
+
+import type {
+  ElementFormatType,
+  LexicalNode,
+  LexicalCommand,
+  NodeKey,
+} from 'lexical';
+
+import {DecoratorNode} from 'lexical';
+
+declare export class DecoratorBlockNode<T> extends DecoratorNode<T> {
+  __format: ?ElementFormatType;
+  constructor(format?: ?ElementFormatType, key?: NodeKey): void;
+  createDOM(): HTMLElement;
+  setFormat(format: ElementFormatType): void;
+}
+
+declare export function $isDecoratorBlockNode(
+  node: ?LexicalNode,
+): boolean %checks(node instanceof DecoratorBlockNode);

package/LexicalDecoratorBlockNode.prod.js

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+var b=require("lexical");class c extends b.DecoratorNode{constructor(a,d){super(d);this.__format=a}createDOM(){return document.createElement("div")}updateDOM(){return!1}setFormat(a){this.getWritable().__format=a}}exports.$isDecoratorBlockNode=function(a){return a instanceof c};exports.DecoratorBlockNode=c;

package/LexicalHorizontalRuleNode.d.ts

@@ -20,6 +20,6 @@ export declare class HorizontalRuleNode extends DecoratorNode<JSX.Element | null
 export function $createHorizontalRuleNode(): HorizontalRuleNode;
 export function $isHorizontalRuleNode(
   node: LexicalNode | null | undefined,
-): boolean;
+): node is HorizontalRuleNode;
 
 export var INSERT_HORIZONTAL_RULE_COMMAND: LexicalCommand<void>;

package/LexicalLinkPlugin.dev.js

@@ -78,6 +78,12 @@ function toggleLink(url) {
           return;
         }
 
+        if (link.$isLinkNode(parent)) {
+          linkNode = parent;
+          parent.setURL(url);
+          return;
+        }
+
         if (!parent.is(prevParent)) {
           prevParent = parent;
           linkNode = link.$createLinkNode(url);

package/LexicalLinkPlugin.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.
  */
-var g=require("@lexical/link"),k=require("@lexical/react/LexicalComposerContext"),m=require("lexical"),n=require("react");
-function p(e){var b=m.$getSelection();null!==b&&m.$setSelection(b);b=m.$getSelection();if(null!==b)if(b=b.extract(),null===e)b.forEach(f=>{f=f.getParent();if(g.$isLinkNode(f)){const c=f.getChildren();for(let a=0;a<c.length;a++)f.insertBefore(c[a]);f.remove()}});else{if(1===b.length){var h=b[0];if(g.$isLinkNode(h)){h.setURL(e);return}h=h.getParent();if(g.$isLinkNode(h)){h.setURL(e);return}}let f=null,c=null;b.forEach(a=>{var d=a.getParent();if(d!==c&&null!==d&&(!m.$isElementNode(a)||a.isInline()))if(d.is(f)||
-(f=d,c=g.$createLinkNode(e),g.$isLinkNode(d)?null===a.getPreviousSibling()?d.insertBefore(c):d.insertAfter(c):a.insertBefore(c)),g.$isLinkNode(a)){if(null!==c){d=a.getChildren();for(let l=0;l<d.length;l++)c.append(d[l])}a.remove()}else null!==c&&c.append(a)})}}
-module.exports=function(){const [e]=k.useLexicalComposerContext();n.useEffect(()=>{if(!e.hasNodes([g.LinkNode]))throw Error("LinkPlugin: LinkNode not registered on editor");},[e]);n.useEffect(()=>e.registerCommand(g.TOGGLE_LINK_COMMAND,b=>{p(b);return!0},m.COMMAND_PRIORITY_EDITOR),[e]);return null};
+var f=require("@lexical/link"),k=require("@lexical/react/LexicalComposerContext"),m=require("lexical"),n=require("react");
+function p(e){var d=m.$getSelection();null!==d&&m.$setSelection(d);d=m.$getSelection();if(null!==d)if(d=d.extract(),null===e)d.forEach(g=>{g=g.getParent();if(f.$isLinkNode(g)){const a=g.getChildren();for(let b=0;b<a.length;b++)g.insertBefore(a[b]);g.remove()}});else{if(1===d.length){var h=d[0];if(f.$isLinkNode(h)){h.setURL(e);return}h=h.getParent();if(f.$isLinkNode(h)){h.setURL(e);return}}let g=null,a=null;d.forEach(b=>{var c=b.getParent();if(c!==a&&null!==c&&(!m.$isElementNode(b)||b.isInline()))if(f.$isLinkNode(c))a=
+c,c.setURL(e);else if(c.is(g)||(g=c,a=f.$createLinkNode(e),f.$isLinkNode(c)?null===b.getPreviousSibling()?c.insertBefore(a):c.insertAfter(a):b.insertBefore(a)),f.$isLinkNode(b)){if(null!==a){c=b.getChildren();for(let l=0;l<c.length;l++)a.append(c[l])}b.remove()}else null!==a&&a.append(b)})}}
+module.exports=function(){const [e]=k.useLexicalComposerContext();n.useEffect(()=>{if(!e.hasNodes([f.LinkNode]))throw Error("LinkPlugin: LinkNode not registered on editor");},[e]);n.useEffect(()=>e.registerCommand(f.TOGGLE_LINK_COMMAND,d=>{p(d);return!0},m.COMMAND_PRIORITY_EDITOR),[e]);return null};

package/LexicalListPlugin.dev.js

@@ -23,20 +23,10 @@ var react = require('react');
 function useList(editor) {
   react.useEffect(() => {
     return utils.mergeRegister(editor.registerCommand(lexical.INDENT_CONTENT_COMMAND, () => {
-      const hasHandledIndention = list.indentList();
-
-      if (hasHandledIndention) {
-        return true;
-      }
-
+      list.indentList();
       return false;
     }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.OUTDENT_CONTENT_COMMAND, () => {
-      const hasHandledIndention = list.outdentList();
-
-      if (hasHandledIndention) {
-        return true;
-      }
-
+      list.outdentList();
       return false;
     }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(list.INSERT_ORDERED_LIST_COMMAND, () => {
       list.insertList(editor, 'ol');

package/LexicalListPlugin.prod.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 var b=require("@lexical/react/LexicalComposerContext"),c=require("@lexical/list"),d=require("@lexical/utils"),e=require("lexical"),f=require("react");
-function g(a){f.useEffect(()=>d.mergeRegister(a.registerCommand(e.INDENT_CONTENT_COMMAND,()=>c.indentList()?!0:!1,e.COMMAND_PRIORITY_LOW),a.registerCommand(e.OUTDENT_CONTENT_COMMAND,()=>c.outdentList()?!0:!1,e.COMMAND_PRIORITY_LOW),a.registerCommand(c.INSERT_ORDERED_LIST_COMMAND,()=>{c.insertList(a,"ol");return!0},e.COMMAND_PRIORITY_LOW),a.registerCommand(c.INSERT_UNORDERED_LIST_COMMAND,()=>{c.insertList(a,"ul");return!0},e.COMMAND_PRIORITY_LOW),a.registerCommand(c.REMOVE_LIST_COMMAND,()=>{c.removeList(a);
-return!0},e.COMMAND_PRIORITY_LOW),a.registerCommand(e.INSERT_PARAGRAPH_COMMAND,()=>c.$handleListInsertParagraph()?!0:!1,e.COMMAND_PRIORITY_LOW)),[a])}module.exports=function(){const [a]=b.useLexicalComposerContext();g(a);return null};
+function g(a){f.useEffect(()=>d.mergeRegister(a.registerCommand(e.INDENT_CONTENT_COMMAND,()=>{c.indentList();return!1},e.COMMAND_PRIORITY_LOW),a.registerCommand(e.OUTDENT_CONTENT_COMMAND,()=>{c.outdentList();return!1},e.COMMAND_PRIORITY_LOW),a.registerCommand(c.INSERT_ORDERED_LIST_COMMAND,()=>{c.insertList(a,"ol");return!0},e.COMMAND_PRIORITY_LOW),a.registerCommand(c.INSERT_UNORDERED_LIST_COMMAND,()=>{c.insertList(a,"ul");return!0},e.COMMAND_PRIORITY_LOW),a.registerCommand(c.REMOVE_LIST_COMMAND,()=>
+{c.removeList(a);return!0},e.COMMAND_PRIORITY_LOW),a.registerCommand(e.INSERT_PARAGRAPH_COMMAND,()=>c.$handleListInsertParagraph()?!0:!1,e.COMMAND_PRIORITY_LOW)),[a])}module.exports=function(){const [a]=b.useLexicalComposerContext();g(a);return null};

package/LexicalOnChangePlugin.d.ts

@@ -8,5 +8,7 @@
 
 import type {EditorState, LexicalEditor} from 'lexical';
 export default function OnChangePlugin(arg0: {
+  ignoreInitialChange?: boolean;
+  ignoreSelectionChange?: boolean;
   onChange: (editorState: EditorState, editor: LexicalEditor) => void;
 }): null;

package/LexicalOnChangePlugin.js.flow

@@ -10,5 +10,7 @@
 import type {EditorState, LexicalEditor} from 'lexical';
 
 declare export default function OnChangePlugin({
+  ignoreInitialChange?: boolean,
+  ignoreSelectionChange?: boolean,
   onChange: (editorState: EditorState, editor: LexicalEditor) => void,
 }): null;

package/LexicalTreeView.dev.js

@@ -186,7 +186,7 @@ function printObjectSelection(selection) {
 }
 
 function printGridSelection(selection) {
-  return `: grid\n  └ { grid: ${selection.gridKey}, anchorCell: ${selection.anchorCellKey}, focusCell: ${selection.focusCellKey} }`;
+  return `: grid\n  └ { grid: ${selection.gridKey}, anchorCell: ${selection.anchor.key}, focusCell: ${selection.focus.key} }`;
 }
 
 function generateContent(editorState) {
@@ -240,7 +240,7 @@ function printNode(node) {
   return '';
 }
 
-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('underline') && 'Underline'];
+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'];
 

package/LexicalTreeView.prod.js

@@ -7,10 +7,10 @@
 var k=require("lexical"),q=require("react");const t=Object.freeze({"\t":"\\t","\n":"\\n"}),D=new RegExp(Object.keys(t).join("|"),"g"),E=Object.freeze({ancestorHasNextSibling:"|",ancestorIsLastChild:" ",hasNextSibling:"\u251c",isLastChild:"\u2514",selectedChar:"^",selectedLine:">"});
 function F(a){let b="";const c=G(a),e=a.anchor;a=a.focus;const d=e.offset,f=a.offset;b=b+`: range ${""!==c?`{ ${c} }`:""}`+`\n  \u251c anchor { key: ${e.key}, offset: ${null===d?"null":d}, type: ${e.type} }`;return b+=`\n  \u2514 focus { key: ${a.key}, offset: ${null===f?"null":f}, type: ${a.type} }`}
 function H(a){let b=" root\n";a=a.read(()=>{const c=k.$getSelection();J(k.$getRoot(),(e,d)=>{const f=`(${e.getKey()})`,g=e.getType()||"",m=e.isSelected();var v=b,u=m?E.selectedLine:" ",r=d.join(" ");if(k.$isTextNode(e)){var l=e.getTextContent(!0);const n=0===l.length?"(empty)":`"${K(l)}"`;l=[G(e),L(e),M(e)].filter(Boolean).join(", ");l=[n,0!==l.length?`{ ${l} }`:null].filter(Boolean).join(" ").trim()}else l="";b=v+`${u} ${r} ${f} ${g} ${l}\n`;b+=N({indent:d,isSelected:m,node:e,nodeKeyDisplay:f,selection:c,
-typeDisplay:g})});return null===c?": null":k.$isRangeSelection(c)?F(c):k.$isGridSelection(c)?`: grid\n  \u2514 { grid: ${c.gridKey}, anchorCell: ${c.anchorCellKey}, focusCell: ${c.focusCellKey} }`:`: node\n  \u2514 [${Array.from(c._nodes).join(", ")}]`});return b+"\n selection"+a}
-function J(a,b,c=[]){a=a.getChildren();const e=a.length;a.forEach((d,f)=>{b(d,c.concat(f===e-1?E.isLastChild:E.hasNextSibling));k.$isElementNode(d)&&J(d,b,c.concat(f===e-1?E.ancestorIsLastChild:E.ancestorHasNextSibling))})}function K(a){return Object.entries(t).reduce((b,[c,e])=>b.replace(new RegExp(c,"g"),String(e)),a)}
-const O=[a=>a.hasFormat("bold")&&"Bold",a=>a.hasFormat("code")&&"Code",a=>a.hasFormat("italic")&&"Italic",a=>a.hasFormat("strikethrough")&&"Strikethrough",a=>a.hasFormat("underline")&&"Underline"],P=[a=>a.isDirectionless()&&"Directionless",a=>a.isUnmergeable()&&"Unmergeable"],Q=[a=>a.isToken()&&"Token",a=>a.isSegmented()&&"Segmented",a=>a.isInert()&&"Inert"];function L(a){let b=P.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="detail: "+b);return b}
-function M(a){let b=Q.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="mode: "+b);return b}function G(a){let b=O.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="format: "+b);return b}
+typeDisplay:g})});return null===c?": null":k.$isRangeSelection(c)?F(c):k.$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 J(a,b,c=[]){a=a.getChildren();const e=a.length;a.forEach((d,f)=>{b(d,c.concat(f===e-1?E.isLastChild:E.hasNextSibling));k.$isElementNode(d)&&J(d,b,c.concat(f===e-1?E.ancestorIsLastChild:E.ancestorHasNextSibling))})}
+function K(a){return Object.entries(t).reduce((b,[c,e])=>b.replace(new RegExp(c,"g"),String(e)),a)}
+const O=[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"],P=[a=>a.isDirectionless()&&"Directionless",a=>a.isUnmergeable()&&"Unmergeable"],Q=[a=>a.isToken()&&"Token",a=>a.isSegmented()&&"Segmented",a=>a.isInert()&&"Inert"];
+function L(a){let b=P.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="detail: "+b);return b}function M(a){let b=Q.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="mode: "+b);return b}function G(a){let b=O.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="format: "+b);return b}
 function N({indent:a,isSelected:b,node:c,nodeKeyDisplay:e,selection:d,typeDisplay:f}){if(!k.$isTextNode(c)||!k.$isRangeSelection(d)||!b||k.$isElementNode(c))return"";b=d.anchor;var g=d.focus;if(""===c.getTextContent()||b.getNode()===d.focus.getNode()&&b.offset===g.offset)return"";g=d.anchor;const m=d.focus,v=c.getTextContent(!0),u=v.length;b=d=-1;if("text"===g.type&&"text"===m.type){const n=g.getNode(),w=m.getNode();n===w&&c===n&&g.offset!==m.offset?[d,b]=g.offset<m.offset?[g.offset,m.offset]:[m.offset,
 g.offset]:c===n?[d,b]=n.isBefore(w)?[g.offset,u]:[0,g.offset]:c===w?[d,b]=w.isBefore(n)?[m.offset,u]:[0,m.offset]:[d,b]=[0,u]}c=(v.slice(0,d).match(D)||[]).length;g=(v.slice(d,b).match(D)||[]).length;const [r,l]=[d+c,b+c+g];if(r===l)return"";c=a[a.length-1]===E.hasNextSibling?E.ancestorHasNextSibling:E.ancestorIsLastChild;a=[...a.slice(0,a.length-1),c];c=Array(r).fill(" ");d=Array(l-r).fill(E.selectedChar);e=Array(e.length+(f.length+3)).fill(" ");return[E.selectedLine,a.join(" "),[...e,...c,...d].join("")].join(" ")+
 "\n"}

package/package.json

@@ -8,27 +8,27 @@
     "rich-text"
   ],
   "license": "MIT",
-  "version": "0.2.2",
+  "version": "0.2.5",
   "dependencies": {
-    "@lexical/clipboard": "0.2.2",
-    "@lexical/list": "0.2.2",
-    "@lexical/table": "0.2.2",
-    "@lexical/yjs": "0.2.2",
-    "@lexical/hashtag": "0.2.2",
-    "@lexical/selection": "0.2.2",
-    "@lexical/utils": "0.2.2",
-    "@lexical/dragon": "0.2.2",
-    "@lexical/plain-text": "0.2.2",
-    "@lexical/rich-text": "0.2.2",
-    "@lexical/code": "0.2.2",
-    "@lexical/text": "0.2.2",
-    "@lexical/link": "0.2.2",
-    "@lexical/overflow": "0.2.2",
-    "@lexical/history": "0.2.2",
-    "@lexical/markdown": "0.2.2"
+    "@lexical/clipboard": "0.2.5",
+    "@lexical/list": "0.2.5",
+    "@lexical/table": "0.2.5",
+    "@lexical/yjs": "0.2.5",
+    "@lexical/hashtag": "0.2.5",
+    "@lexical/selection": "0.2.5",
+    "@lexical/utils": "0.2.5",
+    "@lexical/dragon": "0.2.5",
+    "@lexical/plain-text": "0.2.5",
+    "@lexical/rich-text": "0.2.5",
+    "@lexical/code": "0.2.5",
+    "@lexical/text": "0.2.5",
+    "@lexical/link": "0.2.5",
+    "@lexical/overflow": "0.2.5",
+    "@lexical/history": "0.2.5",
+    "@lexical/markdown": "0.2.5"
   },
   "peerDependencies": {
-    "lexical": "0.2.2",
+    "lexical": "0.2.5",
     "react": ">=17.x",
     "react-dom": ">=17.x"
   },