@lexical/react 0.9.2 → 0.11.0

package/LexicalTabIndentationPlugin.dev.js

@@ -7,6 +7,7 @@
 'use strict';
 
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var utils = require('@lexical/utils');
 var lexical = require('lexical');
 var react = require('react');
 
@@ -17,6 +18,72 @@ var react = require('react');
  * LICENSE file in the root directory of this source tree.
  *
  */
+
+function $filter(nodes, filterFn) {
+  const result = [];
+
+  for (let i = 0; i < nodes.length; i++) {
+    const node = filterFn(nodes[i]);
+
+    if (node !== null) {
+      result.push(node);
+    }
+  }
+
+  return result;
+}
+
+function indentOverTab(selection) {
+  // const handled = new Set();
+  const nodes = selection.getNodes();
+  const canIndentBlockNodes = $filter(nodes, node => {
+    if (lexical.$isBlockElementNode(node) && node.canIndent()) {
+      return node;
+    }
+
+    return null;
+  }); // 1. If selection spans across canIndent block nodes: indent
+
+  if (canIndentBlockNodes.length > 0) {
+    return true;
+  } // 2. If first (anchor/focus) is at block start: indent
+
+
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  const first = focus.isBefore(anchor) ? focus : anchor;
+  const firstNode = first.getNode();
+  const firstBlock = utils.$getNearestBlockElementAncestorOrThrow(firstNode);
+
+  if (firstBlock.canIndent()) {
+    const firstBlockKey = firstBlock.getKey();
+    let selectionAtStart = lexical.$createRangeSelection();
+    selectionAtStart.anchor.set(firstBlockKey, 0, 'element');
+    selectionAtStart.focus.set(firstBlockKey, 0, 'element');
+    selectionAtStart = lexical.$normalizeSelection__EXPERIMENTAL(selectionAtStart);
+
+    if (selectionAtStart.anchor.is(first)) {
+      return true;
+    }
+  } // 3. Else: tab
+
+
+  return false;
+}
+
+function registerTabIndentation(editor) {
+  return editor.registerCommand(lexical.KEY_TAB_COMMAND, event => {
+    const selection = lexical.$getSelection();
+
+    if (!lexical.$isRangeSelection(selection)) {
+      return false;
+    }
+
+    event.preventDefault();
+    const command = indentOverTab(selection) ? event.shiftKey ? lexical.OUTDENT_CONTENT_COMMAND : lexical.INDENT_CONTENT_COMMAND : lexical.INSERT_TAB_COMMAND;
+    return editor.dispatchCommand(command, undefined);
+  }, lexical.COMMAND_PRIORITY_EDITOR);
+}
 /**
  * This plugin adds the ability to indent content using the tab key. Generally, we don't
  * recommend using this plugin as it could negatively affect acessibility for keyboard
@@ -26,18 +93,10 @@ var react = require('react');
 function TabIndentationPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   react.useEffect(() => {
-    return editor.registerCommand(lexical.KEY_TAB_COMMAND, event => {
-      const selection = lexical.$getSelection();
-
-      if (!lexical.$isRangeSelection(selection)) {
-        return false;
-      }
-
-      event.preventDefault();
-      return editor.dispatchCommand(event.shiftKey ? lexical.OUTDENT_CONTENT_COMMAND : lexical.INDENT_CONTENT_COMMAND, undefined);
-    }, lexical.COMMAND_PRIORITY_EDITOR);
+    return registerTabIndentation(editor);
   });
   return null;
 }
 
 exports.TabIndentationPlugin = TabIndentationPlugin;
+exports.registerTabIndentation = registerTabIndentation;

package/LexicalTabIndentationPlugin.js.flow

@@ -7,4 +7,10 @@
  * @flow strict
  */
 
+import type {LexicalEditor} from 'lexical';
+
+declare export function registerTabIndentation(
+  editor: LexicalEditor,
+): () => void;
+
 declare export function TabIndentationPlugin(): null;

package/LexicalTabIndentationPlugin.prod.js

@@ -4,4 +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 a=require("@lexical/react/LexicalComposerContext"),d=require("lexical"),e=require("react");exports.TabIndentationPlugin=function(){let [b]=a.useLexicalComposerContext();e.useEffect(()=>b.registerCommand(d.KEY_TAB_COMMAND,c=>{let f=d.$getSelection();if(!d.$isRangeSelection(f))return!1;c.preventDefault();return b.dispatchCommand(c.shiftKey?d.OUTDENT_CONTENT_COMMAND:d.INDENT_CONTENT_COMMAND,void 0)},d.COMMAND_PRIORITY_EDITOR));return null}
+'use strict';var d=require("@lexical/react/LexicalComposerContext"),g=require("@lexical/utils"),h=require("lexical"),k=require("react");function l(b,a){let c=[];for(let e=0;e<b.length;e++){let f=a(b[e]);null!==f&&c.push(f)}return c}
+function m(b){var a=b.getNodes();if(0<l(a,c=>h.$isBlockElementNode(c)&&c.canIndent()?c:null).length)return!0;a=b.anchor;b=b.focus;b=b.isBefore(a)?b:a;a=b.getNode();a=g.$getNearestBlockElementAncestorOrThrow(a);if(a.canIndent()){a=a.getKey();let c=h.$createRangeSelection();c.anchor.set(a,0,"element");c.focus.set(a,0,"element");c=h.$normalizeSelection__EXPERIMENTAL(c);if(c.anchor.is(b))return!0}return!1}
+function n(b){return b.registerCommand(h.KEY_TAB_COMMAND,a=>{let c=h.$getSelection();if(!h.$isRangeSelection(c))return!1;a.preventDefault();a=m(c)?a.shiftKey?h.OUTDENT_CONTENT_COMMAND:h.INDENT_CONTENT_COMMAND:h.INSERT_TAB_COMMAND;return b.dispatchCommand(a,void 0)},h.COMMAND_PRIORITY_EDITOR)}exports.TabIndentationPlugin=function(){let [b]=d.useLexicalComposerContext();k.useEffect(()=>n(b));return null};exports.registerTabIndentation=n

package/LexicalTablePlugin.d.ts

@@ -6,4 +6,7 @@
  *
  */
 /// <reference types="react" />
-export declare function TablePlugin(): JSX.Element | null;
+export declare function TablePlugin({ hasCellMerge, hasCellBackgroundColor, }: {
+    hasCellMerge?: boolean;
+    hasCellBackgroundColor?: boolean;
+}): JSX.Element | null;

package/LexicalTablePlugin.dev.js

@@ -19,7 +19,21 @@ var react = require('react');
  * LICENSE file in the root directory of this source tree.
  *
  */
-function TablePlugin() {
+
+function $insertFirst(parent, node) {
+  const firstChild = parent.getFirstChild();
+
+  if (firstChild !== null) {
+    firstChild.insertBefore(node);
+  } else {
+    parent.append(node);
+  }
+}
+
+function TablePlugin({
+  hasCellMerge = true,
+  hasCellBackgroundColor = true
+}) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   react.useEffect(() => {
     if (!editor.hasNodes([table.TableNode, table.TableCellNode, table.TableRowNode])) {
@@ -96,7 +110,79 @@ function TablePlugin() {
         tableSelection.removeListeners();
       }
     };
-  }, [editor]);
+  }, [editor]); // Unmerge cells when the feature isn't enabled
+
+  react.useEffect(() => {
+    if (hasCellMerge) {
+      return;
+    }
+
+    return editor.registerNodeTransform(table.TableCellNode, node => {
+      if (node.getColSpan() > 1 || node.getRowSpan() > 1) {
+        // When we have rowSpan we have to map the entire Table to understand where the new Cells
+        // fit best; let's analyze all Cells at once to save us from further transform iterations
+        const [,, gridNode] = lexical.DEPRECATED_$getNodeTriplet(node);
+        const [gridMap] = lexical.DEPRECATED_$computeGridMap(gridNode, node, node); // TODO this function expects Tables to be normalized. Look into this once it exists
+
+        const rowsCount = gridMap.length;
+        const columnsCount = gridMap[0].length;
+        let row = gridNode.getFirstChild();
+
+        if (!lexical.DEPRECATED_$isGridRowNode(row)) {
+          throw Error(`Expected TableNode first child to be a RowNode`);
+        }
+
+        const unmerged = [];
+
+        for (let i = 0; i < rowsCount; i++) {
+          if (i !== 0) {
+            row = row.getNextSibling();
+
+            if (!lexical.DEPRECATED_$isGridRowNode(row)) {
+              throw Error(`Expected TableNode first child to be a RowNode`);
+            }
+          }
+
+          let lastRowCell = null;
+
+          for (let j = 0; j < columnsCount; j++) {
+            const cellMap = gridMap[i][j];
+            const cell = cellMap.cell;
+
+            if (cellMap.startRow === i && cellMap.startColumn === j) {
+              lastRowCell = cell;
+              unmerged.push(cell);
+            } else if (cell.getColSpan() > 1 || cell.getRowSpan() > 1) {
+              const newCell = table.$createTableCellNode(cell.__headerState);
+
+              if (lastRowCell !== null) {
+                lastRowCell.insertAfter(newCell);
+              } else {
+                $insertFirst(row, newCell);
+              }
+            }
+          }
+        }
+
+        for (const cell of unmerged) {
+          cell.setColSpan(1);
+          cell.setRowSpan(1);
+        }
+      }
+    });
+  }, [editor, hasCellMerge]); // Remove cell background color when feature is disabled
+
+  react.useEffect(() => {
+    if (hasCellBackgroundColor) {
+      return;
+    }
+
+    return editor.registerNodeTransform(table.TableCellNode, node => {
+      if (node.getBackgroundColor() !== null) {
+        node.setBackgroundColor(null);
+      }
+    });
+  }, [editor, hasCellBackgroundColor, hasCellMerge]);
   return null;
 }
 

package/LexicalTablePlugin.js.flow

@@ -7,4 +7,8 @@
  * @flow strict
  */
 
-declare export function TablePlugin(): null;
+type Props = $ReadOnly<{
+  hasCellMerge?: boolean,
+  hasCellBackgroundColor?: boolean,
+}>;
+declare export function TablePlugin(props: Props): null;

package/LexicalTablePlugin.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"),g=require("@lexical/table"),l=require("@lexical/utils"),n=require("lexical"),p=require("react");
-exports.TablePlugin=function(){let [e]=c.useLexicalComposerContext();p.useEffect(()=>{if(!e.hasNodes([g.TableNode,g.TableCellNode,g.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 e.registerCommand(g.INSERT_TABLE_COMMAND,({columns:a,rows:h,includeHeaders:k})=>{a=g.$createTableNodeWithDimensions(Number(h),Number(a),k);l.$insertNodeToNearestRoot(a);
-a=a.getFirstDescendant();n.$isTextNode(a)&&a.select();return!0},n.COMMAND_PRIORITY_EDITOR)},[e]);p.useEffect(()=>{let a=new Map,h=b=>{const d=b.getKey(),f=e.getElementByKey(d);f&&!a.has(d)&&(b=g.applyTableHandlers(b,f,e),a.set(d,b))};e.getEditorState().read(()=>{let b=n.$nodesOfType(g.TableNode);for(let d of b)g.$isTableNode(d)&&h(d)});let k=e.registerMutationListener(g.TableNode,b=>{for(const [d,f]of b)"created"===f?e.getEditorState().read(()=>{const m=n.$getNodeByKey(d);g.$isTableNode(m)&&h(m)}):
-"destroyed"===f&&(b=a.get(d),void 0!==b&&(b.removeListeners(),a.delete(d)))});return()=>{k();for(let [,b]of a)b.removeListeners()}},[e]);return null}
+'use strict';var c=require("@lexical/react/LexicalComposerContext"),h=require("@lexical/table"),n=require("@lexical/utils"),v=require("lexical"),w=require("react");
+exports.TablePlugin=function({hasCellMerge:q=!0,hasCellBackgroundColor:t=!0}){let [d]=c.useLexicalComposerContext();w.useEffect(()=>{if(!d.hasNodes([h.TableNode,h.TableCellNode,h.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(h.INSERT_TABLE_COMMAND,({columns:a,rows:e,includeHeaders:g})=>{a=h.$createTableNodeWithDimensions(Number(e),
+Number(a),g);n.$insertNodeToNearestRoot(a);a=a.getFirstDescendant();v.$isTextNode(a)&&a.select();return!0},v.COMMAND_PRIORITY_EDITOR)},[d]);w.useEffect(()=>{let a=new Map,e=b=>{const f=b.getKey(),l=d.getElementByKey(f);l&&!a.has(f)&&(b=h.applyTableHandlers(b,l,d),a.set(f,b))};d.getEditorState().read(()=>{let b=v.$nodesOfType(h.TableNode);for(let f of b)h.$isTableNode(f)&&e(f)});let g=d.registerMutationListener(h.TableNode,b=>{for(const [f,l]of b)"created"===l?d.getEditorState().read(()=>{const m=
+v.$getNodeByKey(f);h.$isTableNode(m)&&e(m)}):"destroyed"===l&&(b=a.get(f),void 0!==b&&(b.removeListeners(),a.delete(f)))});return()=>{g();for(let [,b]of a)b.removeListeners()}},[d]);w.useEffect(()=>{if(!q)return d.registerNodeTransform(h.TableCellNode,a=>{if(1<a.getColSpan()||1<a.getRowSpan()){var [,,e]=v.DEPRECATED_$getNodeTriplet(a);[a]=v.DEPRECATED_$computeGridMap(e,a,a);let f=a.length,l=a[0].length;e=e.getFirstChild();if(!v.DEPRECATED_$isGridRowNode(e))throw Error("Expected TableNode first child to be a RowNode");
+let m=[];for(let k=0;k<f;k++){if(0!==k&&(e=e.getNextSibling(),!v.DEPRECATED_$isGridRowNode(e)))throw Error("Expected TableNode first child to be a RowNode");let r=null;for(let p=0;p<l;p++){var g=a[k][p],b=g.cell;if(g.startRow===k&&g.startColumn===p)r=b,m.push(b);else if(1<b.getColSpan()||1<b.getRowSpan())if(b=h.$createTableCellNode(b.__headerState),null!==r)r.insertAfter(b);else{g=e;let u=g.getFirstChild();null!==u?u.insertBefore(b):g.append(b)}}}for(let k of m)k.setColSpan(1),k.setRowSpan(1)}})},
+[d,q]);w.useEffect(()=>{if(!t)return d.registerNodeTransform(h.TableCellNode,a=>{null!==a.getBackgroundColor()&&a.setBackgroundColor(null)})},[d,t,q]);return null}

package/LexicalTreeView.d.ts

@@ -7,8 +7,9 @@
  */
 /// <reference types="react" />
 import type { LexicalEditor } from 'lexical';
-export declare function TreeView({ timeTravelButtonClassName, timeTravelPanelSliderClassName, timeTravelPanelButtonClassName, viewClassName, timeTravelPanelClassName, editor, }: {
+export declare function TreeView({ treeTypeButtonClassName, timeTravelButtonClassName, timeTravelPanelSliderClassName, timeTravelPanelButtonClassName, viewClassName, timeTravelPanelClassName, editor, }: {
     editor: LexicalEditor;
+    treeTypeButtonClassName: string;
     timeTravelButtonClassName: string;
     timeTravelPanelButtonClassName: string;
     timeTravelPanelClassName: string;

package/LexicalTreeView.dev.js

@@ -6,6 +6,7 @@
  */
 'use strict';
 
+var html = require('@lexical/html');
 var link = require('@lexical/link');
 var mark = require('@lexical/mark');
 var utils = require('@lexical/utils');
@@ -33,6 +34,7 @@ const SYMBOLS = Object.freeze({
   selectedLine: '>'
 });
 function TreeView({
+  treeTypeButtonClassName,
   timeTravelButtonClassName,
   timeTravelPanelSliderClassName,
   timeTravelPanelButtonClassName,
@@ -43,6 +45,7 @@ function TreeView({
   const [timeStampedEditorStates, setTimeStampedEditorStates] = React.useState([]);
   const [content, setContent] = React.useState('');
   const [timeTravelEnabled, setTimeTravelEnabled] = React.useState(false);
+  const [showExportDOM, setShowExportDOM] = React.useState(false);
   const playingIndexRef = React.useRef(0);
   const treeElementRef = React.useRef(null);
   const inputRef = React.useRef(null);
@@ -52,20 +55,20 @@ function TreeView({
   const lastEditorStateRef = React.useRef(null);
   const commandsLog = useLexicalCommandsLog(editor);
   const generateTree = React.useCallback(editorState => {
-    const treeText = generateContent(editor.getEditorState(), editor._config, commandsLog, editor._compositionKey, editor._editable);
+    const treeText = generateContent(editor, commandsLog, showExportDOM);
     setContent(treeText);
 
     if (!timeTravelEnabled) {
       setTimeStampedEditorStates(currentEditorStates => [...currentEditorStates, [Date.now(), editorState]]);
     }
-  }, [commandsLog, editor, timeTravelEnabled]);
+  }, [commandsLog, editor, timeTravelEnabled, showExportDOM]);
   React.useEffect(() => {
     const editorState = editor.getEditorState();
 
-    if (!showLimited && editorState._nodeMap.size > 1000) {
-      setContent(generateContent(editorState, editor._config, commandsLog, editor._compositionKey, editor._editable));
+    if (!showLimited && editorState._nodeMap.size < 1000) {
+      setContent(generateContent(editor, commandsLog, showExportDOM));
     }
-  }, [commandsLog, editor, showLimited]);
+  }, [commandsLog, editor, showLimited, showExportDOM]);
   React.useEffect(() => {
     return utils.mergeRegister(editor.registerUpdateListener(({
       editorState
@@ -81,10 +84,10 @@ function TreeView({
 
       generateTree(editorState);
     }), editor.registerEditableListener(() => {
-      const treeText = generateContent(editor.getEditorState(), editor._config, commandsLog, editor._compositionKey, editor._editable);
+      const treeText = generateContent(editor, commandsLog, showExportDOM);
       setContent(treeText);
     }));
-  }, [commandsLog, editor, isLimited, generateTree, showLimited]);
+  }, [commandsLog, editor, showExportDOM, isLimited, generateTree, showLimited]);
   const totalEditorStates = timeStampedEditorStates.length;
   React.useEffect(() => {
     if (isPlaying) {
@@ -160,7 +163,11 @@ function TreeView({
       cursor: 'pointer',
       padding: 5
     }
-  }, "Show full tree")) : null, !timeTravelEnabled && (showLimited || !isLimited) && totalEditorStates > 2 && /*#__PURE__*/React.createElement("button", {
+  }, "Show full tree")) : null, !showLimited ? /*#__PURE__*/React.createElement("button", {
+    onClick: () => setShowExportDOM(!showExportDOM),
+    className: treeTypeButtonClassName,
+    type: "button"
+  }, showExportDOM ? 'Tree' : 'Export DOM') : null, !timeTravelEnabled && (showLimited || !isLimited) && totalEditorStates > 2 && /*#__PURE__*/React.createElement("button", {
     onClick: () => {
       const rootElement = editor.getRootElement();
 
@@ -275,7 +282,20 @@ function printGridSelection(selection) {
   return `: grid\n  └ { grid: ${selection.gridKey}, anchorCell: ${selection.anchor.key}, focusCell: ${selection.focus.key} }`;
 }
 
-function generateContent(editorState, editorConfig, commandsLog, compositionKey, editable) {
+function generateContent(editor, commandsLog, exportDOM) {
+  const editorState = editor.getEditorState();
+  const editorConfig = editor._config;
+  const compositionKey = editor._compositionKey;
+  const editable = editor._editable;
+
+  if (exportDOM) {
+    let htmlString = '';
+    editorState.read(() => {
+      htmlString = printPrettyHTML(html.$generateHtmlFromNodes(editor));
+    });
+    return htmlString;
+  }
+
   let res = ' root\n';
   const selectionString = editorState.read(() => {
     const selection = lexical.$getSelection();
@@ -464,6 +484,31 @@ function printSelectedCharsLine({
   return [SYMBOLS.selectedLine, indentionChars.join(' '), [...nodePrintSpaces, ...unselectedChars, ...selectedChars].join('')].join(' ') + '\n';
 }
 
+function printPrettyHTML(str) {
+  const div = document.createElement('div');
+  div.innerHTML = str.trim();
+  return prettifyHTML(div, 0).innerHTML;
+}
+
+function prettifyHTML(node, level) {
+  const indentBefore = new Array(level++ + 1).join('  ');
+  const indentAfter = new Array(level - 1).join('  ');
+  let textNode;
+
+  for (let i = 0; i < node.children.length; i++) {
+    textNode = document.createTextNode('\n' + indentBefore);
+    node.insertBefore(textNode, node.children[i]);
+    prettifyHTML(node.children[i], level);
+
+    if (node.lastElementChild === node.children[i]) {
+      textNode = document.createTextNode('\n' + indentAfter);
+      node.appendChild(textNode);
+    }
+  }
+
+  return node;
+}
+
 function $getSelectionStartEnd(node, selection) {
   const anchor = selection.anchor;
   const focus = selection.focus;

package/LexicalTreeView.prod.js

@@ -4,20 +4,21 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var k=require("@lexical/link"),t=require("@lexical/mark"),u=require("@lexical/utils"),G=require("lexical"),K=require("react");let L=Object.freeze({"\t":"\\t","\n":"\\n"}),M=new RegExp(Object.keys(L).join("|"),"g"),N=Object.freeze({ancestorHasNextSibling:"|",ancestorIsLastChild:" ",hasNextSibling:"\u251c",isLastChild:"\u2514",selectedChar:"^",selectedLine:">"});
-function O(a){let [c,d]=K.useState([]);K.useEffect(()=>{let l=new Set;for(let [g]of a._commands)l.add(a.registerCommand(g,b=>{d(e=>{e=[...e];e.push({payload:b,type:g.type?g.type:"UNKNOWN"});10<e.length&&e.shift();return e});return!1},G.COMMAND_PRIORITY_HIGH));return()=>l.forEach(g=>g())},[a]);return K.useMemo(()=>c,[c])}
-function R(a){let c="";var d=S(a);c+=`: range ${""!==d?`{ ${d} }`:""} ${""!==a.style?`{ style: ${a.style} } `:""}`;d=a.anchor;a=a.focus;let l=d.offset,g=a.offset;c+=`\n  \u251c anchor { key: ${d.key}, offset: ${null===l?"null":l}, type: ${d.type} }`;return c+=`\n  \u2514 focus { key: ${a.key}, offset: ${null===g?"null":g}, type: ${a.type} }`}
-function T(a,c,d,l,g){let b=" root\n";a=a.read(()=>{const e=G.$getSelection();U(G.$getRoot(),(h,y)=>{const v=`(${h.getKey()})`,r=h.getType()||"",z=h.isSelected(),n=t.$isMarkNode(h)?` id: [ ${h.getIDs().join(", ")} ] `:"";var x=b,E=z?N.selectedLine:" ",A=y.join(" ");if(G.$isTextNode(h)){var m=h.getTextContent();var p=0===m.length?"(empty)":`"${V(m)}"`;m=[S(h),W(h),X(h)].filter(Boolean).join(", ");m=[p,0!==m.length?`{ ${m} }`:null].filter(Boolean).join(" ").trim()}else if(k.$isLinkNode(h)){m=h.getURL();
-m=0===m.length?"(empty)":`"${V(m)}"`;p=h.getTarget();null!=p&&(p="target: "+p);var H=Boolean;var q=h.getRel();null!=q&&(q="rel: "+q);let B=h.getTitle();null!=B&&(B="title: "+B);p=[p,q,B].filter(H).join(", ");m=[m,0!==p.length?`{ ${p} }`:null].filter(Boolean).join(" ").trim()}else m="";b=x+`${E} ${A} ${v} ${r} ${n} ${m}\n`;b+=Y({indent:y,isSelected:z,node:h,nodeKeyDisplay:v,selection:e,typeDisplay:r})});return null===e?": null":G.$isRangeSelection(e)?R(e):G.DEPRECATED_$isGridSelection(e)?`: grid\n  \u2514 { grid: ${e.gridKey}, anchorCell: ${e.anchor.key}, focusCell: ${e.focus.key} }`:
-`: node\n  \u2514 [${Array.from(e._nodes).join(", ")}]`});b+="\n selection"+a;b+="\n\n commands:";if(d.length)for(let {type:e,payload:h}of d)b+=`\n  \u2514 { type: ${e}, payload: ${h instanceof Event?h.constructor.name:h} }`;else b+="\n  \u2514 None dispatched.";b+="\n\n editor:";b+=`\n  \u2514 namespace ${c.namespace}`;null!==l&&(b+=`\n  \u2514 compositionKey ${l}`);return b+=`\n  \u2514 editable ${String(g)}`}
-function U(a,c,d=[]){a=a.getChildren();let l=a.length;a.forEach((g,b)=>{c(g,d.concat(b===l-1?N.isLastChild:N.hasNextSibling));G.$isElementNode(g)&&U(g,c,d.concat(b===l-1?N.ancestorIsLastChild:N.ancestorHasNextSibling))})}function V(a){return Object.entries(L).reduce((c,[d,l])=>c.replace(new RegExp(d,"g"),String(l)),a)}
-let Z=[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"],aa=[a=>a.isDirectionless()&&"Directionless",a=>a.isUnmergeable()&&"Unmergeable"],ba=[a=>a.isToken()&&"Token",a=>a.isSegmented()&&"Segmented"];
-function W(a){let c=aa.map(d=>d(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="detail: "+c);return c}function X(a){let c=ba.map(d=>d(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="mode: "+c);return c}function S(a){let c=Z.map(d=>d(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="format: "+c);return c}
-function Y({indent:a,isSelected:c,node:d,nodeKeyDisplay:l,selection:g,typeDisplay:b}){if(!G.$isTextNode(d)||!G.$isRangeSelection(g)||!c||G.$isElementNode(d))return"";c=g.anchor;var e=g.focus;if(""===d.getTextContent()||c.getNode()===g.focus.getNode()&&c.offset===e.offset)return"";e=g.anchor;let h=g.focus,y=d.getTextContent(),v=y.length;c=g=-1;if("text"===e.type&&"text"===h.type){let n=e.getNode(),x=h.getNode();n===x&&d===n&&e.offset!==h.offset?[g,c]=e.offset<h.offset?[e.offset,h.offset]:[h.offset,
-e.offset]:d===n?[g,c]=n.isBefore(x)?[e.offset,v]:[0,e.offset]:d===x?[g,c]=x.isBefore(n)?[h.offset,v]:[0,h.offset]:[g,c]=[0,v]}d=(y.slice(0,g).match(M)||[]).length;e=(y.slice(g,c).match(M)||[]).length;let [r,z]=[g+d,c+d+e];if(r===z)return"";d=a[a.length-1]===N.hasNextSibling?N.ancestorHasNextSibling:N.ancestorIsLastChild;a=[...a.slice(0,a.length-1),d];d=Array(r+1).fill(" ");g=Array(z-r).fill(N.selectedChar);l=Array(l.length+(b.length+3)).fill(" ");return[N.selectedLine,a.join(" "),[...l,...d,...g].join("")].join(" ")+
-"\n"}
-exports.TreeView=function({timeTravelButtonClassName:a,timeTravelPanelSliderClassName:c,timeTravelPanelButtonClassName:d,viewClassName:l,timeTravelPanelClassName:g,editor:b}){let [e,h]=K.useState([]),[y,v]=K.useState(""),[r,z]=K.useState(!1),n=K.useRef(0),x=K.useRef(null),E=K.useRef(null),[A,m]=K.useState(!1),[p,H]=K.useState(!1),[q,B]=K.useState(!1),I=K.useRef(null),C=O(b),J=K.useCallback(f=>{const w=T(b.getEditorState(),b._config,C,b._compositionKey,b._editable);v(w);r||h(F=>[...F,[Date.now(),f]])},
-[C,b,r]);K.useEffect(()=>{let f=b.getEditorState();!q&&1E3<f._nodeMap.size&&v(T(f,b._config,C,b._compositionKey,b._editable))},[C,b,q]);K.useEffect(()=>u.mergeRegister(b.registerUpdateListener(({editorState:f})=>{if(!q&&1E3<f._nodeMap.size&&(I.current=f,H(!0),!q))return;J(f)}),b.registerEditableListener(()=>{let f=T(b.getEditorState(),b._config,C,b._compositionKey,b._editable);v(f)})),[C,b,p,J,q]);let D=e.length;K.useEffect(()=>{if(A){let f,w=()=>{const F=n.current;F===D-1?m(!1):f=setTimeout(()=>
-{n.current++;const P=n.current,Q=E.current;null!==Q&&(Q.value=String(P));b.setEditorState(e[P][1]);w()},e[F+1][0]-e[F][0])};w();return()=>{clearTimeout(f)}}},[e,A,b,D]);K.useEffect(()=>{let f=x.current;if(null!==f)return f.__lexicalEditor=b,()=>{f.__lexicalEditor=null}},[b]);return K.createElement("div",{className:l},!q&&p?K.createElement("div",{style:{padding:20}},K.createElement("span",{style:{marginRight:20}},"Detected large EditorState, this can impact debugging performance."),K.createElement("button",
-{onClick:()=>{B(!0);let f=I.current;null!==f&&(I.current=null,J(f))},style:{background:"transparent",border:"1px solid white",color:"white",cursor:"pointer",padding:5}},"Show full tree")):null,!r&&(q||!p)&&2<D&&K.createElement("button",{onClick:()=>{let f=b.getRootElement();null!==f&&(f.contentEditable="false",n.current=D-1,z(!0))},className:a,type:"button"},"Time Travel"),(q||!p)&&K.createElement("pre",{ref:x},y),r&&(q||!p)&&K.createElement("div",{className:g},K.createElement("button",{className:d,
-onClick:()=>{n.current===D-1&&(n.current=1);m(!A)},type:"button"},A?"Pause":"Play"),K.createElement("input",{className:c,ref:E,onChange:f=>{f=Number(f.target.value);let w=e[f];w&&(n.current=f,b.setEditorState(w[1]))},type:"range",min:"1",max:D-1}),K.createElement("button",{className:d,onClick:()=>{var f=b.getRootElement();if(null!==f){f.contentEditable="true";f=e.length-1;b.setEditorState(e[f][1]);let w=E.current;null!==w&&(w.value=String(f));z(!1);m(!1)}},type:"button"},"Exit")))}
+'use strict';var g=require("@lexical/html"),w=require("@lexical/link"),x=require("@lexical/mark"),I=require("@lexical/utils"),M=require("lexical"),N=require("react");let O=Object.freeze({"\t":"\\t","\n":"\\n"}),P=new RegExp(Object.keys(O).join("|"),"g"),Q=Object.freeze({ancestorHasNextSibling:"|",ancestorIsLastChild:" ",hasNextSibling:"\u251c",isLastChild:"\u2514",selectedChar:"^",selectedLine:">"});
+function R(a){let [b,c]=N.useState([]);N.useEffect(()=>{let l=new Set;for(let [e]of a._commands)l.add(a.registerCommand(e,p=>{c(d=>{d=[...d];d.push({payload:p,type:e.type?e.type:"UNKNOWN"});10<d.length&&d.shift();return d});return!1},M.COMMAND_PRIORITY_HIGH));return()=>l.forEach(e=>e())},[a]);return N.useMemo(()=>b,[b])}
+function U(a){let b="";var c=V(a);b+=`: range ${""!==c?`{ ${c} }`:""} ${""!==a.style?`{ style: ${a.style} } `:""}`;c=a.anchor;a=a.focus;let l=c.offset,e=a.offset;b+=`\n  \u251c anchor { key: ${c.key}, offset: ${null===l?"null":l}, type: ${c.type} }`;return b+=`\n  \u2514 focus { key: ${a.key}, offset: ${null===e?"null":e}, type: ${a.type} }`}
+function W(a,b,c){let l=a.getEditorState(),e=a._config,p=a._compositionKey,d=a._editable;if(c){let m="";l.read(()=>{var k=g.$generateHtmlFromNodes(a);let t=document.createElement("div");t.innerHTML=k.trim();m=X(t,0).innerHTML});return m}let h=" root\n";c=l.read(()=>{const m=M.$getSelection();Y(M.$getRoot(),(k,t)=>{const y=`(${k.getKey()})`,v=k.getType()||"",q=k.isSelected(),J=x.$isMarkNode(k)?` id: [ ${k.getIDs().join(", ")} ] `:"";var A=h,H=q?Q.selectedLine:" ",F=t.join(" ");if(M.$isTextNode(k)){var n=
+k.getTextContent();var u=0===n.length?"(empty)":`"${Z(n)}"`;n=[V(k),aa(k),ba(k)].filter(Boolean).join(", ");n=[u,0!==n.length?`{ ${n} }`:null].filter(Boolean).join(" ").trim()}else if(w.$isLinkNode(k)){n=k.getURL();n=0===n.length?"(empty)":`"${Z(n)}"`;u=k.getTarget();null!=u&&(u="target: "+u);var B=Boolean;var C=k.getRel();null!=C&&(C="rel: "+C);let r=k.getTitle();null!=r&&(r="title: "+r);u=[u,C,r].filter(B).join(", ");n=[n,0!==u.length?`{ ${u} }`:null].filter(Boolean).join(" ").trim()}else n="";
+h=A+`${H} ${F} ${y} ${v} ${J} ${n}\n`;h+=ca({indent:t,isSelected:q,node:k,nodeKeyDisplay:y,selection:m,typeDisplay:v})});return null===m?": null":M.$isRangeSelection(m)?U(m):M.DEPRECATED_$isGridSelection(m)?`: grid\n  \u2514 { grid: ${m.gridKey}, anchorCell: ${m.anchor.key}, focusCell: ${m.focus.key} }`:`: node\n  \u2514 [${Array.from(m._nodes).join(", ")}]`});h+="\n selection"+c;h+="\n\n commands:";if(b.length)for(let {type:m,payload:k}of b)h+=`\n  \u2514 { type: ${m}, payload: ${k instanceof Event?
+k.constructor.name:k} }`;else h+="\n  \u2514 None dispatched.";h+="\n\n editor:";h+=`\n  \u2514 namespace ${e.namespace}`;null!==p&&(h+=`\n  \u2514 compositionKey ${p}`);return h+=`\n  \u2514 editable ${String(d)}`}function Y(a,b,c=[]){a=a.getChildren();let l=a.length;a.forEach((e,p)=>{b(e,c.concat(p===l-1?Q.isLastChild:Q.hasNextSibling));M.$isElementNode(e)&&Y(e,b,c.concat(p===l-1?Q.ancestorIsLastChild:Q.ancestorHasNextSibling))})}
+function Z(a){return Object.entries(O).reduce((b,[c,l])=>b.replace(new RegExp(c,"g"),String(l)),a)}
+let da=[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"],ea=[a=>a.isDirectionless()&&"Directionless",a=>a.isUnmergeable()&&"Unmergeable"],fa=[a=>a.isToken()&&"Token",a=>a.isSegmented()&&"Segmented"];
+function aa(a){let b=ea.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="detail: "+b);return b}function ba(a){let b=fa.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="mode: "+b);return b}function V(a){let b=da.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="format: "+b);return b}
+function ca({indent:a,isSelected:b,node:c,nodeKeyDisplay:l,selection:e,typeDisplay:p}){if(!M.$isTextNode(c)||!M.$isRangeSelection(e)||!b||M.$isElementNode(c))return"";b=e.anchor;var d=e.focus;if(""===c.getTextContent()||b.getNode()===e.focus.getNode()&&b.offset===d.offset)return"";d=e.anchor;let h=e.focus,m=c.getTextContent(),k=m.length;b=e=-1;if("text"===d.type&&"text"===h.type){let v=d.getNode(),q=h.getNode();v===q&&c===v&&d.offset!==h.offset?[e,b]=d.offset<h.offset?[d.offset,h.offset]:[h.offset,
+d.offset]:c===v?[e,b]=v.isBefore(q)?[d.offset,k]:[0,d.offset]:c===q?[e,b]=q.isBefore(v)?[h.offset,k]:[0,h.offset]:[e,b]=[0,k]}c=(m.slice(0,e).match(P)||[]).length;d=(m.slice(e,b).match(P)||[]).length;let [t,y]=[e+c,b+c+d];if(t===y)return"";c=a[a.length-1]===Q.hasNextSibling?Q.ancestorHasNextSibling:Q.ancestorIsLastChild;a=[...a.slice(0,a.length-1),c];c=Array(t+1).fill(" ");e=Array(y-t).fill(Q.selectedChar);l=Array(l.length+(p.length+3)).fill(" ");return[Q.selectedLine,a.join(" "),[...l,...c,...e].join("")].join(" ")+
+"\n"}function X(a,b){let c=Array(b++ +1).join("  "),l=Array(b-1).join("  "),e;for(let p=0;p<a.children.length;p++)e=document.createTextNode("\n"+c),a.insertBefore(e,a.children[p]),X(a.children[p],b),a.lastElementChild===a.children[p]&&(e=document.createTextNode("\n"+l),a.appendChild(e));return a}
+exports.TreeView=function({treeTypeButtonClassName:a,timeTravelButtonClassName:b,timeTravelPanelSliderClassName:c,timeTravelPanelButtonClassName:l,viewClassName:e,timeTravelPanelClassName:p,editor:d}){let [h,m]=N.useState([]),[k,t]=N.useState(""),[y,v]=N.useState(!1),[q,J]=N.useState(!1),A=N.useRef(0),H=N.useRef(null),F=N.useRef(null),[n,u]=N.useState(!1),[B,C]=N.useState(!1),[r,ha]=N.useState(!1),K=N.useRef(null),D=R(d),L=N.useCallback(f=>{const z=W(d,D,q);t(z);y||m(G=>[...G,[Date.now(),f]])},[D,
+d,y,q]);N.useEffect(()=>{let f=d.getEditorState();!r&&1E3>f._nodeMap.size&&t(W(d,D,q))},[D,d,r,q]);N.useEffect(()=>I.mergeRegister(d.registerUpdateListener(({editorState:f})=>{if(!r&&1E3<f._nodeMap.size&&(K.current=f,C(!0),!r))return;L(f)}),d.registerEditableListener(()=>{let f=W(d,D,q);t(f)})),[D,d,q,B,L,r]);let E=h.length;N.useEffect(()=>{if(n){let f,z=()=>{const G=A.current;G===E-1?u(!1):f=setTimeout(()=>{A.current++;const S=A.current,T=F.current;null!==T&&(T.value=String(S));d.setEditorState(h[S][1]);
+z()},h[G+1][0]-h[G][0])};z();return()=>{clearTimeout(f)}}},[h,n,d,E]);N.useEffect(()=>{let f=H.current;if(null!==f)return f.__lexicalEditor=d,()=>{f.__lexicalEditor=null}},[d]);return N.createElement("div",{className:e},!r&&B?N.createElement("div",{style:{padding:20}},N.createElement("span",{style:{marginRight:20}},"Detected large EditorState, this can impact debugging performance."),N.createElement("button",{onClick:()=>{ha(!0);let f=K.current;null!==f&&(K.current=null,L(f))},style:{background:"transparent",
+border:"1px solid white",color:"white",cursor:"pointer",padding:5}},"Show full tree")):null,r?null:N.createElement("button",{onClick:()=>J(!q),className:a,type:"button"},q?"Tree":"Export DOM"),!y&&(r||!B)&&2<E&&N.createElement("button",{onClick:()=>{let f=d.getRootElement();null!==f&&(f.contentEditable="false",A.current=E-1,v(!0))},className:b,type:"button"},"Time Travel"),(r||!B)&&N.createElement("pre",{ref:H},k),y&&(r||!B)&&N.createElement("div",{className:p},N.createElement("button",{className:l,
+onClick:()=>{A.current===E-1&&(A.current=1);u(!n)},type:"button"},n?"Pause":"Play"),N.createElement("input",{className:c,ref:F,onChange:f=>{f=Number(f.target.value);let z=h[f];z&&(A.current=f,d.setEditorState(z[1]))},type:"range",min:"1",max:E-1}),N.createElement("button",{className:l,onClick:()=>{var f=d.getRootElement();if(null!==f){f.contentEditable="true";f=h.length-1;d.setEditorState(h[f][1]);let z=F.current;null!==z&&(z.value=String(f));v(!1);u(!1)}},type:"button"},"Exit")))}

package/LexicalTypeaheadMenuPlugin.d.ts

@@ -5,60 +5,30 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { LexicalCommand, LexicalEditor, NodeKey, TextNode } from 'lexical';
-import { MutableRefObject, ReactPortal } from 'react';
-export declare type QueryMatch = {
-    leadOffset: number;
-    matchingString: string;
-    replaceableString: string;
-};
-export declare type Resolution = {
-    match: QueryMatch;
-    getRect: () => DOMRect;
-};
+/// <reference types="react" />
+import type { MenuRenderFn, MenuResolution, MenuTextMatch, TriggerFn } from './shared/LexicalMenu';
+import { LexicalCommand, TextNode } from 'lexical';
+import { MenuOption } from './shared/LexicalMenu';
 export declare const PUNCTUATION = "\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;";
-export declare class TypeaheadOption {
-    key: string;
-    ref?: MutableRefObject<HTMLElement | null>;
-    constructor(key: string);
-    setRefElement(element: HTMLElement | null): void;
-}
-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 function useDynamicPositioning(resolution: MenuResolution | 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;
+    option: MenuOption;
 }>;
 export declare function useBasicTypeaheadTriggerMatch(trigger: string, { minLength, maxLength }: {
     minLength?: number;
     maxLength?: number;
 }): TriggerFn;
-export declare type TypeaheadMenuPluginProps<TOption extends TypeaheadOption> = {
+export declare type TypeaheadMenuPluginProps<TOption extends MenuOption> = {
     onQueryChange: (matchingString: string | null) => void;
     onSelectOption: (option: TOption, textNodeContainingQuery: TextNode | null, closeMenu: () => void, matchingString: string) => void;
     options: Array<TOption>;
     menuRenderFn: MenuRenderFn<TOption>;
     triggerFn: TriggerFn;
-    onOpen?: (resolution: Resolution) => void;
+    onOpen?: (resolution: MenuResolution) => 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, 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;
-    onOpen?: (resolution: Resolution) => void;
-    menuRenderFn: MenuRenderFn<TOption>;
-    anchorClassName?: string;
-};
-export declare function LexicalNodeMenuPlugin<TOption extends TypeaheadOption>({ options, nodeKey, onClose, onOpen, onSelectOption, menuRenderFn, anchorClassName, }: NodeMenuPluginProps<TOption>): JSX.Element | null;
-export {};
+export declare function LexicalTypeaheadMenuPlugin<TOption extends MenuOption>({ options, onQueryChange, onSelectOption, onOpen, onClose, menuRenderFn, triggerFn, anchorClassName, }: TypeaheadMenuPluginProps<TOption>): JSX.Element | null;
+export { MenuOption, MenuRenderFn, MenuResolution, MenuTextMatch, TriggerFn };