@lexical/devtools-core 0.15.0 → 0.16.0

package/LexicalDevtoolsCore.dev.js

@@ -13,20 +13,8 @@ var link = require('@lexical/link');
 var mark = require('@lexical/mark');
 var table = require('@lexical/table');
 var lexical = require('lexical');
-var React = require('react');
-
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    for (var k in e) {
-      n[k] = e[k];
-    }
-  }
-  n.default = e;
-  return n;
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -53,7 +41,7 @@ const FORMAT_PREDICATES = [node => node.hasFormat('bold') && 'Bold', node => nod
 const FORMAT_PREDICATES_PARAGRAPH = [node => node.hasTextFormat('bold') && 'Bold', node => node.hasTextFormat('code') && 'Code', node => node.hasTextFormat('italic') && 'Italic', node => node.hasTextFormat('strikethrough') && 'Strikethrough', node => node.hasTextFormat('subscript') && 'Subscript', node => node.hasTextFormat('superscript') && 'Superscript', node => node.hasTextFormat('underline') && 'Underline'];
 const DETAIL_PREDICATES = [node => node.isDirectionless() && 'Directionless', node => node.isUnmergeable() && 'Unmergeable'];
 const MODE_PREDICATES = [node => node.isToken() && 'Token', node => node.isSegmented() && 'Segmented'];
-function generateContent(editor, commandsLog, exportDOM, obfuscateText = false) {
+function generateContent(editor, commandsLog, exportDOM, customPrintNode, obfuscateText = false) {
   const editorState = editor.getEditorState();
   const editorConfig = editor._config;
   const compositionKey = editor._compositionKey;
@@ -73,8 +61,7 @@ function generateContent(editor, commandsLog, exportDOM, obfuscateText = false)
       const nodeKeyDisplay = `(${nodeKey})`;
       const typeDisplay = node.getType() || '';
       const isSelected = node.isSelected();
-      const idsDisplay = mark.$isMarkNode(node) ? ` id: [ ${node.getIDs().join(', ')} ] ` : '';
-      res += `${isSelected ? SYMBOLS.selectedLine : ' '} ${indent.join(' ')} ${nodeKeyDisplay} ${typeDisplay} ${idsDisplay} ${printNode(node, obfuscateText)}\n`;
+      res += `${isSelected ? SYMBOLS.selectedLine : ' '} ${indent.join(' ')} ${nodeKeyDisplay} ${typeDisplay} ${printNode(node, customPrintNode, obfuscateText)}\n`;
       res += $printSelectedCharsLine({
         indent,
         isSelected,
@@ -90,10 +77,11 @@ function generateContent(editor, commandsLog, exportDOM, obfuscateText = false)
   res += '\n\n commands:';
   if (commandsLog.length) {
     for (const {
+      index,
       type,
       payload
     } of commandsLog) {
-      res += `\n  └ { type: ${type}, payload: ${payload instanceof Event ? payload.constructor.name : payload} }`;
+      res += `\n  └ ${index}. { type: ${type}, payload: ${payload instanceof Event ? payload.constructor.name : payload} }`;
     }
   } else {
     res += '\n  └ None dispatched.';
@@ -144,9 +132,11 @@ function normalize(text, obfuscateText = false) {
   }
   return textToPrint;
 }
-
-// TODO Pass via props to allow customizability
-function printNode(node, obfuscateText = false) {
+function printNode(node, customPrintNode, obfuscateText = false) {
+  const customPrint = customPrintNode ? customPrintNode(node, obfuscateText) : undefined;
+  if (customPrint !== undefined && customPrint.length > 0) {
+    return customPrint;
+  }
   if (lexical.$isTextNode(node)) {
     const text = node.getTextContent();
     const title = text.length === 0 ? '(empty)' : `"${normalize(text, obfuscateText)}"`;
@@ -157,6 +147,8 @@ function printNode(node, obfuscateText = false) {
     const title = link.length === 0 ? '(empty)' : `"${normalize(link, obfuscateText)}"`;
     const properties = printAllLinkNodeProperties(node);
     return [title, properties.length !== 0 ? `{ ${properties} }` : null].filter(Boolean).join(' ').trim();
+  } else if (mark.$isMarkNode(node)) {
+    return `ids: [ ${node.getIDs().join(', ')} ]`;
   } else if (lexical.$isParagraphNode(node)) {
     const formatText = printTextFormatProperties(node);
     return formatText !== '' ? `{ ${formatText} }` : '';
@@ -316,7 +308,7 @@ function $getSelectionStartEnd(node, selection) {
  */
 
 const LARGE_EDITOR_STATE_SIZE = 1000;
-const TreeView = /*#__PURE__*/React.forwardRef(function TreeViewWrapped({
+const TreeView = /*#__PURE__*/react.forwardRef(function TreeViewWrapped({
   treeTypeButtonClassName,
   timeTravelButtonClassName,
   timeTravelPanelSliderClassName,
@@ -328,18 +320,18 @@ const TreeView = /*#__PURE__*/React.forwardRef(function TreeViewWrapped({
   setEditorReadOnly,
   generateContent
 }, ref) {
-  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 inputRef = React.useRef(null);
-  const [isPlaying, setIsPlaying] = React.useState(false);
-  const [isLimited, setIsLimited] = React.useState(false);
-  const [showLimited, setShowLimited] = React.useState(false);
-  const lastEditorStateRef = React.useRef();
-  const lastGenerationID = React.useRef(0);
-  const generateTree = React.useCallback(exportDOM => {
+  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 inputRef = react.useRef(null);
+  const [isPlaying, setIsPlaying] = react.useState(false);
+  const [isLimited, setIsLimited] = react.useState(false);
+  const [showLimited, setShowLimited] = react.useState(false);
+  const lastEditorStateRef = react.useRef();
+  const lastGenerationID = react.useRef(0);
+  const generateTree = react.useCallback(exportDOM => {
     const myID = ++lastGenerationID.current;
     generateContent(exportDOM).then(treeText => {
       if (myID === lastGenerationID.current) {
@@ -351,7 +343,7 @@ const TreeView = /*#__PURE__*/React.forwardRef(function TreeViewWrapped({
       }
     });
   }, [generateContent]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (!showLimited && editorState._nodeMap.size > LARGE_EDITOR_STATE_SIZE) {
       setIsLimited(true);
       if (!showLimited) {
@@ -369,7 +361,7 @@ const TreeView = /*#__PURE__*/React.forwardRef(function TreeViewWrapped({
     }
   }, [editorState, generateTree, showExportDOM, showLimited, timeTravelEnabled]);
   const totalEditorStates = timeStampedEditorStates.length;
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (isPlaying) {
       let timeoutId;
       const play = () => {
@@ -402,82 +394,92 @@ const TreeView = /*#__PURE__*/React.forwardRef(function TreeViewWrapped({
     generateTree(!showExportDOM);
     setShowExportDOM(!showExportDOM);
   };
-  return /*#__PURE__*/React__namespace.createElement("div", {
-    className: viewClassName
-  }, !showLimited && isLimited ? /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      padding: 20
-    }
-  }, /*#__PURE__*/React__namespace.createElement("span", {
-    style: {
-      marginRight: 20
-    }
-  }, "Detected large EditorState, this can impact debugging performance."), /*#__PURE__*/React__namespace.createElement("button", {
-    onClick: () => {
-      setShowLimited(true);
-    },
-    style: {
-      background: 'transparent',
-      border: '1px solid white',
-      color: 'white',
-      cursor: 'pointer',
-      padding: 5
-    }
-  }, "Show full tree")) : null, !showLimited ? /*#__PURE__*/React__namespace.createElement("button", {
-    onClick: () => handleExportModeToggleClick(),
-    className: treeTypeButtonClassName,
-    type: "button"
-  }, showExportDOM ? 'Tree' : 'Export DOM') : null, !timeTravelEnabled && (showLimited || !isLimited) && totalEditorStates > 2 && /*#__PURE__*/React__namespace.createElement("button", {
-    onClick: () => {
-      setEditorReadOnly(true);
-      playingIndexRef.current = totalEditorStates - 1;
-      setTimeTravelEnabled(true);
-    },
-    className: timeTravelButtonClassName,
-    type: "button"
-  }, "Time Travel"), (showLimited || !isLimited) && /*#__PURE__*/React__namespace.createElement("pre", {
-    ref: ref
-  }, content), timeTravelEnabled && (showLimited || !isLimited) && /*#__PURE__*/React__namespace.createElement("div", {
-    className: timeTravelPanelClassName
-  }, /*#__PURE__*/React__namespace.createElement("button", {
-    className: timeTravelPanelButtonClassName,
-    onClick: () => {
-      if (playingIndexRef.current === totalEditorStates - 1) {
-        playingIndexRef.current = 1;
-      }
-      setIsPlaying(!isPlaying);
-    },
-    type: "button"
-  }, isPlaying ? 'Pause' : 'Play'), /*#__PURE__*/React__namespace.createElement("input", {
-    className: timeTravelPanelSliderClassName,
-    ref: inputRef,
-    onChange: event => {
-      const editorStateIndex = Number(event.target.value);
-      const timeStampedEditorState = timeStampedEditorStates[editorStateIndex];
-      if (timeStampedEditorState) {
-        playingIndexRef.current = editorStateIndex;
-        setEditorState(timeStampedEditorState[1]);
-      }
-    },
-    type: "range",
-    min: "1",
-    max: totalEditorStates - 1
-  }), /*#__PURE__*/React__namespace.createElement("button", {
-    className: timeTravelPanelButtonClassName,
-    onClick: () => {
-      setEditorReadOnly(false);
-      const index = timeStampedEditorStates.length - 1;
-      const timeStampedEditorState = timeStampedEditorStates[index];
-      setEditorState(timeStampedEditorState[1]);
-      const input = inputRef.current;
-      if (input !== null) {
-        input.value = String(index);
-      }
-      setTimeTravelEnabled(false);
-      setIsPlaying(false);
-    },
-    type: "button"
-  }, "Exit")));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: viewClassName,
+    children: [!showLimited && isLimited ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+      style: {
+        padding: 20
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        style: {
+          marginRight: 20
+        },
+        children: "Detected large EditorState, this can impact debugging performance."
+      }), /*#__PURE__*/jsxRuntime.jsx("button", {
+        onClick: () => {
+          setShowLimited(true);
+        },
+        style: {
+          background: 'transparent',
+          border: '1px solid white',
+          color: 'white',
+          cursor: 'pointer',
+          padding: 5
+        },
+        children: "Show full tree"
+      })]
+    }) : null, !showLimited ? /*#__PURE__*/jsxRuntime.jsx("button", {
+      onClick: () => handleExportModeToggleClick(),
+      className: treeTypeButtonClassName,
+      type: "button",
+      children: showExportDOM ? 'Tree' : 'Export DOM'
+    }) : null, !timeTravelEnabled && (showLimited || !isLimited) && totalEditorStates > 2 && /*#__PURE__*/jsxRuntime.jsx("button", {
+      onClick: () => {
+        setEditorReadOnly(true);
+        playingIndexRef.current = totalEditorStates - 1;
+        setTimeTravelEnabled(true);
+      },
+      className: timeTravelButtonClassName,
+      type: "button",
+      children: "Time Travel"
+    }), (showLimited || !isLimited) && /*#__PURE__*/jsxRuntime.jsx("pre", {
+      ref: ref,
+      children: content
+    }), timeTravelEnabled && (showLimited || !isLimited) && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: timeTravelPanelClassName,
+      children: [/*#__PURE__*/jsxRuntime.jsx("button", {
+        className: timeTravelPanelButtonClassName,
+        onClick: () => {
+          if (playingIndexRef.current === totalEditorStates - 1) {
+            playingIndexRef.current = 1;
+          }
+          setIsPlaying(!isPlaying);
+        },
+        type: "button",
+        children: isPlaying ? 'Pause' : 'Play'
+      }), /*#__PURE__*/jsxRuntime.jsx("input", {
+        className: timeTravelPanelSliderClassName,
+        ref: inputRef,
+        onChange: event => {
+          const editorStateIndex = Number(event.target.value);
+          const timeStampedEditorState = timeStampedEditorStates[editorStateIndex];
+          if (timeStampedEditorState) {
+            playingIndexRef.current = editorStateIndex;
+            setEditorState(timeStampedEditorState[1]);
+          }
+        },
+        type: "range",
+        min: "1",
+        max: totalEditorStates - 1
+      }), /*#__PURE__*/jsxRuntime.jsx("button", {
+        className: timeTravelPanelButtonClassName,
+        onClick: () => {
+          setEditorReadOnly(false);
+          const index = timeStampedEditorStates.length - 1;
+          const timeStampedEditorState = timeStampedEditorStates[index];
+          setEditorState(timeStampedEditorState[1]);
+          const input = inputRef.current;
+          if (input !== null) {
+            input.value = String(index);
+          }
+          setTimeTravelEnabled(false);
+          setIsPlaying(false);
+        },
+        type: "button",
+        children: "Exit"
+      })]
+    })]
+  });
 });
 
 /**
@@ -490,11 +492,14 @@ const TreeView = /*#__PURE__*/React.forwardRef(function TreeViewWrapped({
 
 function registerLexicalCommandLogger(editor, setLoggedCommands) {
   const unregisterCommandListeners = new Set();
+  let i = 0;
   for (const [command] of editor._commands) {
     unregisterCommandListeners.add(editor.registerCommand(command, payload => {
       setLoggedCommands(state => {
+        i += 1;
         const newState = [...state];
         newState.push({
+          index: i,
           payload,
           type: command.type ? command.type : 'UNKNOWN'
         });
@@ -509,11 +514,11 @@ function registerLexicalCommandLogger(editor, setLoggedCommands) {
   return () => unregisterCommandListeners.forEach(unregister => unregister());
 }
 function useLexicalCommandsLog(editor) {
-  const [loggedCommands, setLoggedCommands] = React.useState([]);
-  React.useEffect(() => {
+  const [loggedCommands, setLoggedCommands] = react.useState([]);
+  react.useEffect(() => {
     return registerLexicalCommandLogger(editor, setLoggedCommands);
   }, [editor]);
-  return React.useMemo(() => loggedCommands, [loggedCommands]);
+  return react.useMemo(() => loggedCommands, [loggedCommands]);
 }
 
 exports.TreeView = TreeView;

package/LexicalDevtoolsCore.dev.mjs

@@ -11,8 +11,8 @@ import { $isLinkNode } from '@lexical/link';
 import { $isMarkNode } from '@lexical/mark';
 import { $isTableSelection } from '@lexical/table';
 import { $getSelection, $getRoot, $isRangeSelection, $isNodeSelection, $isElementNode, $isTextNode, $isParagraphNode, COMMAND_PRIORITY_CRITICAL } from 'lexical';
-import * as React from 'react';
 import { forwardRef, useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -39,7 +39,7 @@ const FORMAT_PREDICATES = [node => node.hasFormat('bold') && 'Bold', node => nod
 const FORMAT_PREDICATES_PARAGRAPH = [node => node.hasTextFormat('bold') && 'Bold', node => node.hasTextFormat('code') && 'Code', node => node.hasTextFormat('italic') && 'Italic', node => node.hasTextFormat('strikethrough') && 'Strikethrough', node => node.hasTextFormat('subscript') && 'Subscript', node => node.hasTextFormat('superscript') && 'Superscript', node => node.hasTextFormat('underline') && 'Underline'];
 const DETAIL_PREDICATES = [node => node.isDirectionless() && 'Directionless', node => node.isUnmergeable() && 'Unmergeable'];
 const MODE_PREDICATES = [node => node.isToken() && 'Token', node => node.isSegmented() && 'Segmented'];
-function generateContent(editor, commandsLog, exportDOM, obfuscateText = false) {
+function generateContent(editor, commandsLog, exportDOM, customPrintNode, obfuscateText = false) {
   const editorState = editor.getEditorState();
   const editorConfig = editor._config;
   const compositionKey = editor._compositionKey;
@@ -59,8 +59,7 @@ function generateContent(editor, commandsLog, exportDOM, obfuscateText = false)
       const nodeKeyDisplay = `(${nodeKey})`;
       const typeDisplay = node.getType() || '';
       const isSelected = node.isSelected();
-      const idsDisplay = $isMarkNode(node) ? ` id: [ ${node.getIDs().join(', ')} ] ` : '';
-      res += `${isSelected ? SYMBOLS.selectedLine : ' '} ${indent.join(' ')} ${nodeKeyDisplay} ${typeDisplay} ${idsDisplay} ${printNode(node, obfuscateText)}\n`;
+      res += `${isSelected ? SYMBOLS.selectedLine : ' '} ${indent.join(' ')} ${nodeKeyDisplay} ${typeDisplay} ${printNode(node, customPrintNode, obfuscateText)}\n`;
       res += $printSelectedCharsLine({
         indent,
         isSelected,
@@ -76,10 +75,11 @@ function generateContent(editor, commandsLog, exportDOM, obfuscateText = false)
   res += '\n\n commands:';
   if (commandsLog.length) {
     for (const {
+      index,
       type,
       payload
     } of commandsLog) {
-      res += `\n  └ { type: ${type}, payload: ${payload instanceof Event ? payload.constructor.name : payload} }`;
+      res += `\n  └ ${index}. { type: ${type}, payload: ${payload instanceof Event ? payload.constructor.name : payload} }`;
     }
   } else {
     res += '\n  └ None dispatched.';
@@ -130,9 +130,11 @@ function normalize(text, obfuscateText = false) {
   }
   return textToPrint;
 }
-
-// TODO Pass via props to allow customizability
-function printNode(node, obfuscateText = false) {
+function printNode(node, customPrintNode, obfuscateText = false) {
+  const customPrint = customPrintNode ? customPrintNode(node, obfuscateText) : undefined;
+  if (customPrint !== undefined && customPrint.length > 0) {
+    return customPrint;
+  }
   if ($isTextNode(node)) {
     const text = node.getTextContent();
     const title = text.length === 0 ? '(empty)' : `"${normalize(text, obfuscateText)}"`;
@@ -143,6 +145,8 @@ function printNode(node, obfuscateText = false) {
     const title = link.length === 0 ? '(empty)' : `"${normalize(link, obfuscateText)}"`;
     const properties = printAllLinkNodeProperties(node);
     return [title, properties.length !== 0 ? `{ ${properties} }` : null].filter(Boolean).join(' ').trim();
+  } else if ($isMarkNode(node)) {
+    return `ids: [ ${node.getIDs().join(', ')} ]`;
   } else if ($isParagraphNode(node)) {
     const formatText = printTextFormatProperties(node);
     return formatText !== '' ? `{ ${formatText} }` : '';
@@ -388,82 +392,92 @@ const TreeView = /*#__PURE__*/forwardRef(function TreeViewWrapped({
     generateTree(!showExportDOM);
     setShowExportDOM(!showExportDOM);
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: viewClassName
-  }, !showLimited && isLimited ? /*#__PURE__*/React.createElement("div", {
-    style: {
-      padding: 20
-    }
-  }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      marginRight: 20
-    }
-  }, "Detected large EditorState, this can impact debugging performance."), /*#__PURE__*/React.createElement("button", {
-    onClick: () => {
-      setShowLimited(true);
-    },
-    style: {
-      background: 'transparent',
-      border: '1px solid white',
-      color: 'white',
-      cursor: 'pointer',
-      padding: 5
-    }
-  }, "Show full tree")) : null, !showLimited ? /*#__PURE__*/React.createElement("button", {
-    onClick: () => handleExportModeToggleClick(),
-    className: treeTypeButtonClassName,
-    type: "button"
-  }, showExportDOM ? 'Tree' : 'Export DOM') : null, !timeTravelEnabled && (showLimited || !isLimited) && totalEditorStates > 2 && /*#__PURE__*/React.createElement("button", {
-    onClick: () => {
-      setEditorReadOnly(true);
-      playingIndexRef.current = totalEditorStates - 1;
-      setTimeTravelEnabled(true);
-    },
-    className: timeTravelButtonClassName,
-    type: "button"
-  }, "Time Travel"), (showLimited || !isLimited) && /*#__PURE__*/React.createElement("pre", {
-    ref: ref
-  }, content), timeTravelEnabled && (showLimited || !isLimited) && /*#__PURE__*/React.createElement("div", {
-    className: timeTravelPanelClassName
-  }, /*#__PURE__*/React.createElement("button", {
-    className: timeTravelPanelButtonClassName,
-    onClick: () => {
-      if (playingIndexRef.current === totalEditorStates - 1) {
-        playingIndexRef.current = 1;
-      }
-      setIsPlaying(!isPlaying);
-    },
-    type: "button"
-  }, isPlaying ? 'Pause' : 'Play'), /*#__PURE__*/React.createElement("input", {
-    className: timeTravelPanelSliderClassName,
-    ref: inputRef,
-    onChange: event => {
-      const editorStateIndex = Number(event.target.value);
-      const timeStampedEditorState = timeStampedEditorStates[editorStateIndex];
-      if (timeStampedEditorState) {
-        playingIndexRef.current = editorStateIndex;
-        setEditorState(timeStampedEditorState[1]);
-      }
-    },
-    type: "range",
-    min: "1",
-    max: totalEditorStates - 1
-  }), /*#__PURE__*/React.createElement("button", {
-    className: timeTravelPanelButtonClassName,
-    onClick: () => {
-      setEditorReadOnly(false);
-      const index = timeStampedEditorStates.length - 1;
-      const timeStampedEditorState = timeStampedEditorStates[index];
-      setEditorState(timeStampedEditorState[1]);
-      const input = inputRef.current;
-      if (input !== null) {
-        input.value = String(index);
-      }
-      setTimeTravelEnabled(false);
-      setIsPlaying(false);
-    },
-    type: "button"
-  }, "Exit")));
+  return /*#__PURE__*/jsxs("div", {
+    className: viewClassName,
+    children: [!showLimited && isLimited ? /*#__PURE__*/jsxs("div", {
+      style: {
+        padding: 20
+      },
+      children: [/*#__PURE__*/jsx("span", {
+        style: {
+          marginRight: 20
+        },
+        children: "Detected large EditorState, this can impact debugging performance."
+      }), /*#__PURE__*/jsx("button", {
+        onClick: () => {
+          setShowLimited(true);
+        },
+        style: {
+          background: 'transparent',
+          border: '1px solid white',
+          color: 'white',
+          cursor: 'pointer',
+          padding: 5
+        },
+        children: "Show full tree"
+      })]
+    }) : null, !showLimited ? /*#__PURE__*/jsx("button", {
+      onClick: () => handleExportModeToggleClick(),
+      className: treeTypeButtonClassName,
+      type: "button",
+      children: showExportDOM ? 'Tree' : 'Export DOM'
+    }) : null, !timeTravelEnabled && (showLimited || !isLimited) && totalEditorStates > 2 && /*#__PURE__*/jsx("button", {
+      onClick: () => {
+        setEditorReadOnly(true);
+        playingIndexRef.current = totalEditorStates - 1;
+        setTimeTravelEnabled(true);
+      },
+      className: timeTravelButtonClassName,
+      type: "button",
+      children: "Time Travel"
+    }), (showLimited || !isLimited) && /*#__PURE__*/jsx("pre", {
+      ref: ref,
+      children: content
+    }), timeTravelEnabled && (showLimited || !isLimited) && /*#__PURE__*/jsxs("div", {
+      className: timeTravelPanelClassName,
+      children: [/*#__PURE__*/jsx("button", {
+        className: timeTravelPanelButtonClassName,
+        onClick: () => {
+          if (playingIndexRef.current === totalEditorStates - 1) {
+            playingIndexRef.current = 1;
+          }
+          setIsPlaying(!isPlaying);
+        },
+        type: "button",
+        children: isPlaying ? 'Pause' : 'Play'
+      }), /*#__PURE__*/jsx("input", {
+        className: timeTravelPanelSliderClassName,
+        ref: inputRef,
+        onChange: event => {
+          const editorStateIndex = Number(event.target.value);
+          const timeStampedEditorState = timeStampedEditorStates[editorStateIndex];
+          if (timeStampedEditorState) {
+            playingIndexRef.current = editorStateIndex;
+            setEditorState(timeStampedEditorState[1]);
+          }
+        },
+        type: "range",
+        min: "1",
+        max: totalEditorStates - 1
+      }), /*#__PURE__*/jsx("button", {
+        className: timeTravelPanelButtonClassName,
+        onClick: () => {
+          setEditorReadOnly(false);
+          const index = timeStampedEditorStates.length - 1;
+          const timeStampedEditorState = timeStampedEditorStates[index];
+          setEditorState(timeStampedEditorState[1]);
+          const input = inputRef.current;
+          if (input !== null) {
+            input.value = String(index);
+          }
+          setTimeTravelEnabled(false);
+          setIsPlaying(false);
+        },
+        type: "button",
+        children: "Exit"
+      })]
+    })]
+  });
 });
 
 /**
@@ -476,11 +490,14 @@ const TreeView = /*#__PURE__*/forwardRef(function TreeViewWrapped({
 
 function registerLexicalCommandLogger(editor, setLoggedCommands) {
   const unregisterCommandListeners = new Set();
+  let i = 0;
   for (const [command] of editor._commands) {
     unregisterCommandListeners.add(editor.registerCommand(command, payload => {
       setLoggedCommands(state => {
+        i += 1;
         const newState = [...state];
         newState.push({
+          index: i,
           payload,
           type: command.type ? command.type : 'UNKNOWN'
         });

package/LexicalDevtoolsCore.js.flow

@@ -12,26 +12,31 @@
  */
 
 import type {
-    LexicalEditor,
-    LexicalCommand
+  LexicalCommand,
+  LexicalEditor,
+  LexicalNode,
 } from 'lexical';
 
-export type LexicalCommandLog = $ReadOnlyArray<LexicalCommand<mixed> | {payload: mixed}>;
+export type LexicalCommandLog = $ReadOnlyArray<
+  {index: number} | LexicalCommand<mixed> | {payload: mixed}
+ >;
+export type CustomPrintNodeFn = (node: LexicalNode, obfuscateText?: boolean) => string;
 
 declare export function generateContent(
-editor: LexicalEditor,
-commandsLog: $ReadOnlyArray<LexicalCommandLog>,
-exportDOM: boolean,
-obfuscateText?: boolean,
+  editor: LexicalEditor,
+  commandsLog: $ReadOnlyArray<LexicalCommandLog>,
+  exportDOM: boolean,
+  customPrintNode?: CustomPrintNodeFn,
+  obfuscateText?: boolean,
 ): string;
 
 declare export function registerLexicalCommandLogger(
-editor: LexicalEditor,
-setLoggedCommands: (
-  v: (oldValue: LexicalCommandLog) => LexicalCommandLog,
-) => void,
+  editor: LexicalEditor,
+  setLoggedCommands: (
+    v: (oldValue: LexicalCommandLog) => LexicalCommandLog,
+  ) => void,
 ): () => void;
 
 declare export function useLexicalCommandsLog(
-editor: LexicalEditor,
-): LexicalCommandLog;
+  editor: LexicalEditor,
+): LexicalCommandLog;

package/LexicalDevtoolsCore.prod.js

@@ -6,22 +6,22 @@
  *
  */
 
-'use strict';var f=require("@lexical/html"),r=require("@lexical/link"),t=require("@lexical/mark"),aa=require("@lexical/table"),v=require("lexical"),L=require("react"),M=Object.create(null);if(L)for(var N in L)M[N]=L[N];M.default=L;
-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:">"}),ba=[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"],ca=[a=>a.hasTextFormat("bold")&&"Bold",a=>a.hasTextFormat("code")&&"Code",a=>a.hasTextFormat("italic")&&"Italic",a=>a.hasTextFormat("strikethrough")&&"Strikethrough",a=>a.hasTextFormat("subscript")&&"Subscript",a=>a.hasTextFormat("superscript")&&"Superscript",a=>a.hasTextFormat("underline")&&"Underline"],da=[a=>a.isDirectionless()&&"Directionless",a=>a.isUnmergeable()&&"Unmergeable"],ea=[a=>a.isToken()&&"Token",a=>a.isSegmented()&&"Segmented"];
-function fa(a){let b="";var c=R(a);b+=`: range ${""!==c?`{ ${c} }`:""} ${""!==a.style?`{ style: ${a.style} } `:""}`;c=a.anchor;a=a.focus;let e=c.offset,d=a.offset;b+=`\n  \u251c anchor { key: ${c.key}, offset: ${null===e?"null":e}, type: ${c.type} }`;return b+=`\n  \u2514 focus { key: ${a.key}, offset: ${null===d?"null":d}, type: ${a.type} }`}function ha(a){return v.$isNodeSelection(a)?`: node\n  \u2514 [${Array.from(a._nodes).join(", ")}]`:""}
-function W(a,b,c=[]){a=a.getChildren();let e=a.length;a.forEach((d,h)=>{b(d,c.concat(h===e-1?Q.isLastChild:Q.hasNextSibling));v.$isElementNode(d)&&W(d,b,c.concat(h===e-1?Q.ancestorIsLastChild:Q.ancestorHasNextSibling))})}function X(a,b=!1){a=Object.entries(O).reduce((c,[e,d])=>c.replace(new RegExp(e,"g"),String(d)),a);return b?a.replace(/[^\s]/g,"*"):a}
-function ia(a,b=!1){if(v.$isTextNode(a)){var c=a.getTextContent();b=0===c.length?"(empty)":`"${X(c,b)}"`;a=[R(a),ja(a),ka(a)].filter(Boolean).join(", ");return[b,0!==a.length?`{ ${a} }`:null].filter(Boolean).join(" ").trim()}if(r.$isLinkNode(a)){c=a.getURL();b=0===c.length?"(empty)":`"${X(c,b)}"`;c=a.getTarget();null!=c&&(c="target: "+c);var e=Boolean;var d=a.getRel();null!=d&&(d="rel: "+d);a=a.getTitle();null!=a&&(a="title: "+a);a=[c,d,a].filter(e).join(", ");return[b,0!==a.length?`{ ${a} }`:null].filter(Boolean).join(" ").trim()}return v.$isParagraphNode(a)?
-(a=la(a),""!==a?`{ ${a} }`:""):""}function la(a){let b=ca.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="format: "+b);return b}function ja(a){let b=da.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="detail: "+b);return b}function ka(a){let b=ea.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="mode: "+b);return b}
-function R(a){let b=ba.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="format: "+b);return b}
-function ma({indent:a,isSelected:b,node:c,nodeKeyDisplay:e,selection:d,typeDisplay:h}){if(!v.$isTextNode(c)||!v.$isRangeSelection(d)||!b||v.$isElementNode(c))return"";b=d.anchor;var n=d.focus;if(""===c.getTextContent()||b.getNode()===d.focus.getNode()&&b.offset===n.offset)return"";b=d.getStartEndPoints();if(v.$isNodeSelection(d)||null===b)c=[-1,-1];else{var [p,g]=b;n=c.getTextContent();var k=n.length;b=d=-1;if("text"===p.type&&"text"===g.type){let w=p.getNode(),x=g.getNode();w===x&&c===w&&p.offset!==
-g.offset?[d,b]=p.offset<g.offset?[p.offset,g.offset]:[g.offset,p.offset]:c===w?[d,b]=w.isBefore(x)?[p.offset,k]:[0,p.offset]:c===x?[d,b]=x.isBefore(w)?[g.offset,k]:[0,g.offset]:[d,b]=[0,k]}c=(n.slice(0,d).match(P)||[]).length;n=(n.slice(d,b).match(P)||[]).length;c=[d+c,b+c+n]}let [l,m]=c;if(l===m)return"";c=a[a.length-1]===Q.hasNextSibling?Q.ancestorHasNextSibling:Q.ancestorIsLastChild;a=[...a.slice(0,a.length-1),c];c=Array(l+1).fill(" ");d=Array(m-l).fill(Q.selectedChar);e=Array(e.length+(h.length+
-3)).fill(" ");return[Q.selectedLine,a.join(" "),[...e,...c,...d].join("")].join(" ")+"\n"}function Y(a,b){let c=Array(b++ +1).join("  "),e=Array(b-1).join("  "),d;for(let h=0;h<a.children.length;h++)d=document.createTextNode("\n"+c),a.insertBefore(d,a.children[h]),Y(a.children[h],b),a.lastElementChild===a.children[h]&&(d=document.createTextNode("\n"+e),a.appendChild(d));return a}
-let qa=L.forwardRef(function({treeTypeButtonClassName:a,timeTravelButtonClassName:b,timeTravelPanelSliderClassName:c,timeTravelPanelButtonClassName:e,viewClassName:d,timeTravelPanelClassName:h,editorState:n,setEditorState:p,setEditorReadOnly:g,generateContent:k},l){const [m,w]=L.useState([]),[x,D]=L.useState(""),[B,S]=L.useState(!1),[E,na]=L.useState(!1),A=L.useRef(0),H=L.useRef(null),[F,I]=L.useState(!1),[G,oa]=L.useState(!1),[y,pa]=L.useState(!1),T=L.useRef(),J=L.useRef(0),K=L.useCallback(q=>{const u=
-++J.current;k(q).then(z=>{u===J.current&&D(z)}).catch(z=>{u===J.current&&D(`Error rendering tree: ${z.message}\n\nStack:\n${z.stack}`)})},[k]);L.useEffect(()=>{if(!y&&1E3<n._nodeMap.size&&(oa(!0),!y))return;T.current!==n&&(T.current=n,K(E),B||w(q=>[...q,[Date.now(),n]]))},[n,K,E,y,B]);const C=m.length;L.useEffect(()=>{if(F){let q;const u=()=>{const z=A.current;z===C-1?I(!1):q=setTimeout(()=>{A.current++;const U=A.current,V=H.current;null!==V&&(V.value=String(U));p(m[U][1]);u()},m[z+1][0]-m[z][0])};
-u();return()=>{clearTimeout(q)}}},[m,F,C,p]);return M.createElement("div",{className:d},!y&&G?M.createElement("div",{style:{padding:20}},M.createElement("span",{style:{marginRight:20}},"Detected large EditorState, this can impact debugging performance."),M.createElement("button",{onClick:()=>{pa(!0)},style:{background:"transparent",border:"1px solid white",color:"white",cursor:"pointer",padding:5}},"Show full tree")):null,y?null:M.createElement("button",{onClick:()=>{K(!E);na(!E)},className:a,type:"button"},
-E?"Tree":"Export DOM"),!B&&(y||!G)&&2<C&&M.createElement("button",{onClick:()=>{g(!0);A.current=C-1;S(!0)},className:b,type:"button"},"Time Travel"),(y||!G)&&M.createElement("pre",{ref:l},x),B&&(y||!G)&&M.createElement("div",{className:h},M.createElement("button",{className:e,onClick:()=>{A.current===C-1&&(A.current=1);I(!F)},type:"button"},F?"Pause":"Play"),M.createElement("input",{className:c,ref:H,onChange:q=>{q=Number(q.target.value);const u=m[q];u&&(A.current=q,p(u[1]))},type:"range",min:"1",
-max:C-1}),M.createElement("button",{className:e,onClick:()=>{g(!1);const q=m.length-1;p(m[q][1]);const u=H.current;null!==u&&(u.value=String(q));S(!1);I(!1)},type:"button"},"Exit")))});function Z(a,b){let c=new Set;for(let [e]of a._commands)c.add(a.registerCommand(e,d=>{b(h=>{h=[...h];h.push({payload:d,type:e.type?e.type:"UNKNOWN"});10<h.length&&h.shift();return h});return!1},v.COMMAND_PRIORITY_CRITICAL));return()=>c.forEach(e=>e())}exports.TreeView=qa;
-exports.generateContent=function(a,b,c,e=!1){let d=a.getEditorState(),h=a._config,n=a._compositionKey,p=a._editable;if(c){let k="";d.read(()=>{var l=f.$generateHtmlFromNodes(a);let m=document.createElement("div");m.innerHTML=l.trim();k=Y(m,0).innerHTML});return k}let g=" root\n";c=d.read(()=>{const k=v.$getSelection();W(v.$getRoot(),(l,m)=>{const w=`(${l.getKey()})`,x=l.getType()||"",D=l.isSelected(),B=t.$isMarkNode(l)?` id: [ ${l.getIDs().join(", ")} ] `:"";g+=`${D?Q.selectedLine:" "} ${m.join(" ")} ${w} ${x} ${B} ${ia(l,
-e)}\n`;g+=ma({indent:m,isSelected:D,node:l,nodeKeyDisplay:w,selection:k,typeDisplay:x})});return null===k?": null":v.$isRangeSelection(k)?fa(k):aa.$isTableSelection(k)?`: table\n  \u2514 { table: ${k.tableKey}, anchorCell: ${k.anchor.key}, focusCell: ${k.focus.key} }`:ha(k)});g+="\n selection"+c;g+="\n\n commands:";if(b.length)for(let {type:k,payload:l}of b)g+=`\n  \u2514 { type: ${k}, payload: ${l instanceof Event?l.constructor.name:l} }`;else g+="\n  \u2514 None dispatched.";g+="\n\n editor:";g+=
-`\n  \u2514 namespace ${h.namespace}`;null!==n&&(g+=`\n  \u2514 compositionKey ${n}`);return g+=`\n  \u2514 editable ${String(p)}`};exports.registerLexicalCommandLogger=Z;exports.useLexicalCommandsLog=function(a){let [b,c]=L.useState([]);L.useEffect(()=>Z(a,c),[a]);return L.useMemo(()=>b,[b])}
+'use strict';var k=require("@lexical/html"),t=require("@lexical/link"),u=require("@lexical/mark"),w=require("@lexical/table"),L=require("lexical"),M=require("react"),N=require("react/jsx-runtime");
+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:">"}),aa=[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"],ba=[a=>a.hasTextFormat("bold")&&"Bold",a=>a.hasTextFormat("code")&&"Code",a=>a.hasTextFormat("italic")&&"Italic",a=>a.hasTextFormat("strikethrough")&&"Strikethrough",a=>a.hasTextFormat("subscript")&&"Subscript",a=>a.hasTextFormat("superscript")&&"Superscript",a=>a.hasTextFormat("underline")&&"Underline"],ca=[a=>a.isDirectionless()&&"Directionless",a=>a.isUnmergeable()&&"Unmergeable"],da=[a=>a.isToken()&&"Token",a=>a.isSegmented()&&"Segmented"];
+function ea(a){let b="";var c=V(a);b+=`: range ${""!==c?`{ ${c} }`:""} ${""!==a.style?`{ style: ${a.style} } `:""}`;c=a.anchor;a=a.focus;let e=c.offset,d=a.offset;b+=`\n  \u251c anchor { key: ${c.key}, offset: ${null===e?"null":e}, type: ${c.type} }`;return b+=`\n  \u2514 focus { key: ${a.key}, offset: ${null===d?"null":d}, type: ${a.type} }`}function fa(a){return L.$isNodeSelection(a)?`: node\n  \u2514 [${Array.from(a._nodes).join(", ")}]`:""}
+function W(a,b,c=[]){a=a.getChildren();let e=a.length;a.forEach((d,l)=>{b(d,c.concat(l===e-1?Q.isLastChild:Q.hasNextSibling));L.$isElementNode(d)&&W(d,b,c.concat(l===e-1?Q.ancestorIsLastChild:Q.ancestorHasNextSibling))})}function X(a,b=!1){a=Object.entries(O).reduce((c,[e,d])=>c.replace(new RegExp(e,"g"),String(d)),a);return b?a.replace(/[^\s]/g,"*"):a}
+function ha(a,b,c=!1){b=b?b(a,c):void 0;if(void 0!==b&&0<b.length)return b;if(L.$isTextNode(a))return b=a.getTextContent(),c=0===b.length?"(empty)":`"${X(b,c)}"`,a=[V(a),ia(a),ja(a)].filter(Boolean).join(", "),[c,0!==a.length?`{ ${a} }`:null].filter(Boolean).join(" ").trim();if(t.$isLinkNode(a)){b=a.getURL();c=0===b.length?"(empty)":`"${X(b,c)}"`;b=a.getTarget();null!=b&&(b="target: "+b);var e=Boolean;var d=a.getRel();null!=d&&(d="rel: "+d);a=a.getTitle();null!=a&&(a="title: "+a);a=[b,d,a].filter(e).join(", ");
+return[c,0!==a.length?`{ ${a} }`:null].filter(Boolean).join(" ").trim()}return u.$isMarkNode(a)?`ids: [ ${a.getIDs().join(", ")} ]`:L.$isParagraphNode(a)?(a=ka(a),""!==a?`{ ${a} }`:""):""}function ka(a){let b=ba.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="format: "+b);return b}function ia(a){let b=ca.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="detail: "+b);return b}
+function ja(a){let b=da.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="mode: "+b);return b}function V(a){let b=aa.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="format: "+b);return b}
+function la({indent:a,isSelected:b,node:c,nodeKeyDisplay:e,selection:d,typeDisplay:l}){if(!L.$isTextNode(c)||!L.$isRangeSelection(d)||!b||L.$isElementNode(c))return"";b=d.anchor;var f=d.focus;if(""===c.getTextContent()||b.getNode()===d.focus.getNode()&&b.offset===f.offset)return"";b=d.getStartEndPoints();if(L.$isNodeSelection(d)||null===b)c=[-1,-1];else{var [p,r]=b;f=c.getTextContent();var m=f.length;b=d=-1;if("text"===p.type&&"text"===r.type){let n=p.getNode(),x=r.getNode();n===x&&c===n&&p.offset!==
+r.offset?[d,b]=p.offset<r.offset?[p.offset,r.offset]:[r.offset,p.offset]:c===n?[d,b]=n.isBefore(x)?[p.offset,m]:[0,p.offset]:c===x?[d,b]=x.isBefore(n)?[r.offset,m]:[0,r.offset]:[d,b]=[0,m]}c=(f.slice(0,d).match(P)||[]).length;f=(f.slice(d,b).match(P)||[]).length;c=[d+c,b+c+f]}let [h,g]=c;if(h===g)return"";c=a[a.length-1]===Q.hasNextSibling?Q.ancestorHasNextSibling:Q.ancestorIsLastChild;a=[...a.slice(0,a.length-1),c];c=Array(h+1).fill(" ");d=Array(g-h).fill(Q.selectedChar);e=Array(e.length+(l.length+
+3)).fill(" ");return[Q.selectedLine,a.join(" "),[...e,...c,...d].join("")].join(" ")+"\n"}function Y(a,b){let c=Array(b++ +1).join("  "),e=Array(b-1).join("  "),d;for(let l=0;l<a.children.length;l++)d=document.createTextNode("\n"+c),a.insertBefore(d,a.children[l]),Y(a.children[l],b),a.lastElementChild===a.children[l]&&(d=document.createTextNode("\n"+e),a.appendChild(d));return a}
+let pa=M.forwardRef(function({treeTypeButtonClassName:a,timeTravelButtonClassName:b,timeTravelPanelSliderClassName:c,timeTravelPanelButtonClassName:e,viewClassName:d,timeTravelPanelClassName:l,editorState:f,setEditorState:p,setEditorReadOnly:r,generateContent:m},h){const [g,n]=M.useState([]),[x,D]=M.useState(""),[A,R]=M.useState(!1),[E,ma]=M.useState(!1),B=M.useRef(0),H=M.useRef(null),[F,I]=M.useState(!1),[G,na]=M.useState(!1),[y,oa]=M.useState(!1),S=M.useRef(),J=M.useRef(0),K=M.useCallback(q=>{const v=
+++J.current;m(q).then(z=>{v===J.current&&D(z)}).catch(z=>{v===J.current&&D(`Error rendering tree: ${z.message}\n\nStack:\n${z.stack}`)})},[m]);M.useEffect(()=>{if(!y&&1E3<f._nodeMap.size&&(na(!0),!y))return;S.current!==f&&(S.current=f,K(E),A||n(q=>[...q,[Date.now(),f]]))},[f,K,E,y,A]);const C=g.length;M.useEffect(()=>{if(F){let q;const v=()=>{const z=B.current;z===C-1?I(!1):q=setTimeout(()=>{B.current++;const T=B.current,U=H.current;null!==U&&(U.value=String(T));p(g[T][1]);v()},g[z+1][0]-g[z][0])};
+v();return()=>{clearTimeout(q)}}},[g,F,C,p]);return N.jsxs("div",{className:d,children:[!y&&G?N.jsxs("div",{style:{padding:20},children:[N.jsx("span",{style:{marginRight:20},children:"Detected large EditorState, this can impact debugging performance."}),N.jsx("button",{onClick:()=>{oa(!0)},style:{background:"transparent",border:"1px solid white",color:"white",cursor:"pointer",padding:5},children:"Show full tree"})]}):null,y?null:N.jsx("button",{onClick:()=>{K(!E);ma(!E)},className:a,type:"button",
+children:E?"Tree":"Export DOM"}),!A&&(y||!G)&&2<C&&N.jsx("button",{onClick:()=>{r(!0);B.current=C-1;R(!0)},className:b,type:"button",children:"Time Travel"}),(y||!G)&&N.jsx("pre",{ref:h,children:x}),A&&(y||!G)&&N.jsxs("div",{className:l,children:[N.jsx("button",{className:e,onClick:()=>{B.current===C-1&&(B.current=1);I(!F)},type:"button",children:F?"Pause":"Play"}),N.jsx("input",{className:c,ref:H,onChange:q=>{q=Number(q.target.value);const v=g[q];v&&(B.current=q,p(v[1]))},type:"range",min:"1",max:C-
+1}),N.jsx("button",{className:e,onClick:()=>{r(!1);const q=g.length-1;p(g[q][1]);const v=H.current;null!==v&&(v.value=String(q));R(!1);I(!1)},type:"button",children:"Exit"})]})]})});function Z(a,b){let c=new Set,e=0;for(let [d]of a._commands)c.add(a.registerCommand(d,l=>{b(f=>{e+=1;f=[...f];f.push({index:e,payload:l,type:d.type?d.type:"UNKNOWN"});10<f.length&&f.shift();return f});return!1},L.COMMAND_PRIORITY_CRITICAL));return()=>c.forEach(d=>d())}exports.TreeView=pa;
+exports.generateContent=function(a,b,c,e,d=!1){let l=a.getEditorState(),f=a._config,p=a._compositionKey,r=a._editable;if(c){let h="";l.read(()=>{var g=k.$generateHtmlFromNodes(a);let n=document.createElement("div");n.innerHTML=g.trim();h=Y(n,0).innerHTML});return h}let m=" root\n";c=l.read(()=>{const h=L.$getSelection();W(L.$getRoot(),(g,n)=>{const x=`(${g.getKey()})`,D=g.getType()||"",A=g.isSelected();m+=`${A?Q.selectedLine:" "} ${n.join(" ")} ${x} ${D} ${ha(g,e,d)}\n`;m+=la({indent:n,isSelected:A,
+node:g,nodeKeyDisplay:x,selection:h,typeDisplay:D})});return null===h?": null":L.$isRangeSelection(h)?ea(h):w.$isTableSelection(h)?`: table\n  \u2514 { table: ${h.tableKey}, anchorCell: ${h.anchor.key}, focusCell: ${h.focus.key} }`:fa(h)});m+="\n selection"+c;m+="\n\n commands:";if(b.length)for(let {index:h,type:g,payload:n}of b)m+=`\n  \u2514 ${h}. { type: ${g}, payload: ${n instanceof Event?n.constructor.name:n} }`;else m+="\n  \u2514 None dispatched.";m+="\n\n editor:";m+=`\n  \u2514 namespace ${f.namespace}`;
+null!==p&&(m+=`\n  \u2514 compositionKey ${p}`);return m+=`\n  \u2514 editable ${String(r)}`};exports.registerLexicalCommandLogger=Z;exports.useLexicalCommandsLog=function(a){let [b,c]=M.useState([]);M.useEffect(()=>Z(a,c),[a]);return M.useMemo(()=>b,[b])}

package/LexicalDevtoolsCore.prod.mjs

@@ -6,4 +6,4 @@
  *
  */
 
-import{$generateHtmlFromNodes as e}from"@lexical/html";import{$isLinkNode as t}from"@lexical/link";import{$isMarkNode as n}from"@lexical/mark";import{$isTableSelection as r}from"@lexical/table";import{$getSelection as o,$getRoot as l,$isRangeSelection as i,$isNodeSelection as a,$isElementNode as s,$isTextNode as c,$isParagraphNode as u,COMMAND_PRIORITY_CRITICAL as f}from"lexical";import*as m from"react";import{forwardRef as d,useState as g,useRef as h,useCallback as p,useEffect as y,useMemo as b}from"react";const C=Object.freeze({"\t":"\\t","\n":"\\n"}),$=new RegExp(Object.keys(C).join("|"),"g"),x=Object.freeze({ancestorHasNextSibling:"|",ancestorIsLastChild:" ",hasNextSibling:"├",isLastChild:"└",selectedChar:"^",selectedLine:">"}),N=[e=>e.hasFormat("bold")&&"Bold",e=>e.hasFormat("code")&&"Code",e=>e.hasFormat("italic")&&"Italic",e=>e.hasFormat("strikethrough")&&"Strikethrough",e=>e.hasFormat("subscript")&&"Subscript",e=>e.hasFormat("superscript")&&"Superscript",e=>e.hasFormat("underline")&&"Underline"],S=[e=>e.hasTextFormat("bold")&&"Bold",e=>e.hasTextFormat("code")&&"Code",e=>e.hasTextFormat("italic")&&"Italic",e=>e.hasTextFormat("strikethrough")&&"Strikethrough",e=>e.hasTextFormat("subscript")&&"Subscript",e=>e.hasTextFormat("superscript")&&"Superscript",e=>e.hasTextFormat("underline")&&"Underline"],T=[e=>e.isDirectionless()&&"Directionless",e=>e.isUnmergeable()&&"Unmergeable"],E=[e=>e.isToken()&&"Token",e=>e.isSegmented()&&"Segmented"];function k(f,m,d,g=!1){const h=f.getEditorState(),p=f._config,y=f._compositionKey,b=f._editable;if(d){let t="";return h.read((()=>{t=function(e){const t=document.createElement("div");return t.innerHTML=e.trim(),O(t,0).innerHTML}(e(f))})),t}let C=" root\n";const N=h.read((()=>{const e=o();return j(l(),((r,o)=>{const l=`(${r.getKey()})`,f=r.getType()||"",m=r.isSelected(),d=n(r)?` id: [ ${r.getIDs().join(", ")} ] `:"";C+=`${m?x.selectedLine:" "} ${o.join(" ")} ${l} ${f} ${d} ${function(e,n=!1){if(c(e)){const t=e.getTextContent(),r=0===t.length?"(empty)":`"${L(t,n)}"`,o=function(e){return[w(e),v(e),B(e)].filter(Boolean).join(", ")}(e);return[r,0!==o.length?`{ ${o} }`:null].filter(Boolean).join(" ").trim()}if(t(e)){const t=e.getURL(),r=0===t.length?"(empty)":`"${L(t,n)}"`,o=function(e){return[F(e),D(e),K(e)].filter(Boolean).join(", ")}(e);return[r,0!==o.length?`{ ${o} }`:null].filter(Boolean).join(" ").trim()}if(u(e)){const t=function(e){let t=S.map((t=>t(e))).filter(Boolean).join(", ").toLocaleLowerCase();""!==t&&(t="format: "+t);return t}(e);return""!==t?`{ ${t} }`:""}return""}(r,g)}\n`,C+=function({indent:e,isSelected:t,node:n,nodeKeyDisplay:r,selection:o,typeDisplay:l}){if(!c(n)||!i(o)||!t||s(n))return"";const u=o.anchor,f=o.focus;if(""===n.getTextContent()||u.getNode()===o.focus.getNode()&&u.offset===f.offset)return"";const[m,d]=function(e,t){const n=t.getStartEndPoints();if(a(t)||null===n)return[-1,-1];const[r,o]=n,l=e.getTextContent(),i=l.length;let s=-1,c=-1;if("text"===r.type&&"text"===o.type){const t=r.getNode(),n=o.getNode();t===n&&e===t&&r.offset!==o.offset?[s,c]=r.offset<o.offset?[r.offset,o.offset]:[o.offset,r.offset]:[s,c]=e===t?t.isBefore(n)?[r.offset,i]:[0,r.offset]:e===n?n.isBefore(t)?[o.offset,i]:[0,o.offset]:[0,i]}const u=(l.slice(0,s).match($)||[]).length,f=(l.slice(s,c).match($)||[]).length;return[s+u,c+u+f]}(n,o);if(m===d)return"";const g=e[e.length-1]===x.hasNextSibling?x.ancestorHasNextSibling:x.ancestorIsLastChild,h=[...e.slice(0,e.length-1),g],p=Array(m+1).fill(" "),y=Array(d-m).fill(x.selectedChar),b=l.length+3,C=Array(r.length+b).fill(" ");return[x.selectedLine,h.join(" "),[...C,...p,...y].join("")].join(" ")+"\n"}({indent:o,isSelected:m,node:r,nodeKeyDisplay:l,selection:e,typeDisplay:f})})),null===e?": null":i(e)?function(e){let t="";const n=w(e);t+=`: range ${""!==n?`{ ${n} }`:""} ${""!==e.style?`{ style: ${e.style} } `:""}`;const r=e.anchor,o=e.focus,l=r.offset,i=o.offset;return t+=`\n  ├ anchor { key: ${r.key}, offset: ${null===l?"null":l}, type: ${r.type} }`,t+=`\n  └ focus { key: ${o.key}, offset: ${null===i?"null":i}, type: ${o.type} }`,t}(e):r(e)?function(e){return`: table\n  └ { table: ${e.tableKey}, anchorCell: ${e.anchor.key}, focusCell: ${e.focus.key} }`}(e):function(e){if(!a(e))return"";return`: node\n  └ [${Array.from(e._nodes).join(", ")}]`}(e)}));if(C+="\n selection"+N,C+="\n\n commands:",m.length)for(const{type:e,payload:t}of m)C+=`\n  └ { type: ${e}, payload: ${t instanceof Event?t.constructor.name:t} }`;else C+="\n  └ None dispatched.";return C+="\n\n editor:",C+=`\n  └ namespace ${p.namespace}`,null!==y&&(C+=`\n  └ compositionKey ${y}`),C+=`\n  └ editable ${String(b)}`,C}function j(e,t,n=[]){const r=e.getChildren(),o=r.length;r.forEach(((e,r)=>{t(e,n.concat(r===o-1?x.isLastChild:x.hasNextSibling)),s(e)&&j(e,t,n.concat(r===o-1?x.ancestorIsLastChild:x.ancestorHasNextSibling))}))}function L(e,t=!1){const n=Object.entries(C).reduce(((e,[t,n])=>e.replace(new RegExp(t,"g"),String(n))),e);return t?n.replace(/[^\s]/g,"*"):n}function v(e){let t=T.map((t=>t(e))).filter(Boolean).join(", ").toLocaleLowerCase();return""!==t&&(t="detail: "+t),t}function B(e){let t=E.map((t=>t(e))).filter(Boolean).join(", ").toLocaleLowerCase();return""!==t&&(t="mode: "+t),t}function w(e){let t=N.map((t=>t(e))).filter(Boolean).join(", ").toLocaleLowerCase();return""!==t&&(t="format: "+t),t}function F(e){let t=e.getTarget();return null!=t&&(t="target: "+t),t}function D(e){let t=e.getRel();return null!=t&&(t="rel: "+t),t}function K(e){let t=e.getTitle();return null!=t&&(t="title: "+t),t}function O(e,t){const n=new Array(1+t++).join("  "),r=new Array(t-1).join("  ");let o;for(let l=0;l<e.children.length;l++)o=document.createTextNode("\n"+n),e.insertBefore(o,e.children[l]),O(e.children[l],t),e.lastElementChild===e.children[l]&&(o=document.createTextNode("\n"+r),e.appendChild(o));return e}const A=d((function({treeTypeButtonClassName:e,timeTravelButtonClassName:t,timeTravelPanelSliderClassName:n,timeTravelPanelButtonClassName:r,viewClassName:o,timeTravelPanelClassName:l,editorState:i,setEditorState:a,setEditorReadOnly:s,generateContent:c},u){const[f,d]=g([]),[b,C]=g(""),[$,x]=g(!1),[N,S]=g(!1),T=h(0),E=h(null),[k,j]=g(!1),[L,v]=g(!1),[B,w]=g(!1),F=h(),D=h(0),K=p((e=>{const t=++D.current;c(e).then((e=>{t===D.current&&C(e)})).catch((e=>{t===D.current&&C(`Error rendering tree: ${e.message}\n\nStack:\n${e.stack}`)}))}),[c]);y((()=>{!B&&i._nodeMap.size>1e3&&(v(!0),!B)||F.current!==i&&(F.current=i,K(N),$||d((e=>[...e,[Date.now(),i]])))}),[i,K,N,B,$]);const O=f.length;y((()=>{if(k){let e;const t=()=>{const n=T.current;if(n===O-1)return void j(!1);const r=f[n][0],o=f[n+1][0];e=setTimeout((()=>{T.current++;const e=T.current,n=E.current;null!==n&&(n.value=String(e)),a(f[e][1]),t()}),o-r)};return t(),()=>{clearTimeout(e)}}}),[f,k,O,a]);return m.createElement("div",{className:o},!B&&L?m.createElement("div",{style:{padding:20}},m.createElement("span",{style:{marginRight:20}},"Detected large EditorState, this can impact debugging performance."),m.createElement("button",{onClick:()=>{w(!0)},style:{background:"transparent",border:"1px solid white",color:"white",cursor:"pointer",padding:5}},"Show full tree")):null,B?null:m.createElement("button",{onClick:()=>(K(!N),void S(!N)),className:e,type:"button"},N?"Tree":"Export DOM"),!$&&(B||!L)&&O>2&&m.createElement("button",{onClick:()=>{s(!0),T.current=O-1,x(!0)},className:t,type:"button"},"Time Travel"),(B||!L)&&m.createElement("pre",{ref:u},b),$&&(B||!L)&&m.createElement("div",{className:l},m.createElement("button",{className:r,onClick:()=>{T.current===O-1&&(T.current=1),j(!k)},type:"button"},k?"Pause":"Play"),m.createElement("input",{className:n,ref:E,onChange:e=>{const t=Number(e.target.value),n=f[t];n&&(T.current=t,a(n[1]))},type:"range",min:"1",max:O-1}),m.createElement("button",{className:r,onClick:()=>{s(!1);const e=f.length-1,t=f[e];a(t[1]);const n=E.current;null!==n&&(n.value=String(e)),x(!1),j(!1)},type:"button"},"Exit")))}));function I(e,t){const n=new Set;for(const[r]of e._commands)n.add(e.registerCommand(r,(e=>(t((t=>{const n=[...t];return n.push({payload:e,type:r.type?r.type:"UNKNOWN"}),n.length>10&&n.shift(),n})),!1)),f));return()=>n.forEach((e=>e()))}function P(e){const[t,n]=g([]);return y((()=>I(e,n)),[e]),b((()=>t),[t])}export{A as TreeView,k as generateContent,I as registerLexicalCommandLogger,P as useLexicalCommandsLog};
+import{$generateHtmlFromNodes as e}from"@lexical/html";import{$isLinkNode as t}from"@lexical/link";import{$isMarkNode as n}from"@lexical/mark";import{$isTableSelection as r}from"@lexical/table";import{$getSelection as o,$getRoot as i,$isRangeSelection as l,$isNodeSelection as s,$isElementNode as a,$isTextNode as c,$isParagraphNode as u,COMMAND_PRIORITY_CRITICAL as f}from"lexical";import{forwardRef as d,useState as m,useRef as h,useCallback as g,useEffect as p,useMemo as y}from"react";import{jsxs as b,jsx as x}from"react/jsx-runtime";const C=Object.freeze({"\t":"\\t","\n":"\\n"}),$=new RegExp(Object.keys(C).join("|"),"g"),N=Object.freeze({ancestorHasNextSibling:"|",ancestorIsLastChild:" ",hasNextSibling:"├",isLastChild:"└",selectedChar:"^",selectedLine:">"}),S=[e=>e.hasFormat("bold")&&"Bold",e=>e.hasFormat("code")&&"Code",e=>e.hasFormat("italic")&&"Italic",e=>e.hasFormat("strikethrough")&&"Strikethrough",e=>e.hasFormat("subscript")&&"Subscript",e=>e.hasFormat("superscript")&&"Superscript",e=>e.hasFormat("underline")&&"Underline"],T=[e=>e.hasTextFormat("bold")&&"Bold",e=>e.hasTextFormat("code")&&"Code",e=>e.hasTextFormat("italic")&&"Italic",e=>e.hasTextFormat("strikethrough")&&"Strikethrough",e=>e.hasTextFormat("subscript")&&"Subscript",e=>e.hasTextFormat("superscript")&&"Superscript",e=>e.hasTextFormat("underline")&&"Underline"],k=[e=>e.isDirectionless()&&"Directionless",e=>e.isUnmergeable()&&"Unmergeable"],j=[e=>e.isToken()&&"Token",e=>e.isSegmented()&&"Segmented"];function L(f,d,m,h,g=!1){const p=f.getEditorState(),y=f._config,b=f._compositionKey,x=f._editable;if(m){let t="";return p.read((()=>{t=function(e){const t=document.createElement("div");return t.innerHTML=e.trim(),A(t,0).innerHTML}(e(f))})),t}let C=" root\n";const S=p.read((()=>{const e=o();return v(i(),((r,o)=>{const i=`(${r.getKey()})`,f=r.getType()||"",d=r.isSelected();C+=`${d?N.selectedLine:" "} ${o.join(" ")} ${i} ${f} ${function(e,r,o=!1){const i=r?r(e,o):void 0;if(void 0!==i&&i.length>0)return i;if(c(e)){const t=e.getTextContent(),n=0===t.length?"(empty)":`"${B(t,o)}"`,r=function(e){return[F(e),E(e),w(e)].filter(Boolean).join(", ")}(e);return[n,0!==r.length?`{ ${r} }`:null].filter(Boolean).join(" ").trim()}if(t(e)){const t=e.getURL(),n=0===t.length?"(empty)":`"${B(t,o)}"`,r=function(e){return[D(e),K(e),O(e)].filter(Boolean).join(", ")}(e);return[n,0!==r.length?`{ ${r} }`:null].filter(Boolean).join(" ").trim()}if(n(e))return`ids: [ ${e.getIDs().join(", ")} ]`;if(u(e)){const t=function(e){let t=T.map((t=>t(e))).filter(Boolean).join(", ").toLocaleLowerCase();""!==t&&(t="format: "+t);return t}(e);return""!==t?`{ ${t} }`:""}return""}(r,h,g)}\n`,C+=function({indent:e,isSelected:t,node:n,nodeKeyDisplay:r,selection:o,typeDisplay:i}){if(!c(n)||!l(o)||!t||a(n))return"";const u=o.anchor,f=o.focus;if(""===n.getTextContent()||u.getNode()===o.focus.getNode()&&u.offset===f.offset)return"";const[d,m]=function(e,t){const n=t.getStartEndPoints();if(s(t)||null===n)return[-1,-1];const[r,o]=n,i=e.getTextContent(),l=i.length;let a=-1,c=-1;if("text"===r.type&&"text"===o.type){const t=r.getNode(),n=o.getNode();t===n&&e===t&&r.offset!==o.offset?[a,c]=r.offset<o.offset?[r.offset,o.offset]:[o.offset,r.offset]:[a,c]=e===t?t.isBefore(n)?[r.offset,l]:[0,r.offset]:e===n?n.isBefore(t)?[o.offset,l]:[0,o.offset]:[0,l]}const u=(i.slice(0,a).match($)||[]).length,f=(i.slice(a,c).match($)||[]).length;return[a+u,c+u+f]}(n,o);if(d===m)return"";const h=e[e.length-1]===N.hasNextSibling?N.ancestorHasNextSibling:N.ancestorIsLastChild,g=[...e.slice(0,e.length-1),h],p=Array(d+1).fill(" "),y=Array(m-d).fill(N.selectedChar),b=i.length+3,x=Array(r.length+b).fill(" ");return[N.selectedLine,g.join(" "),[...x,...p,...y].join("")].join(" ")+"\n"}({indent:o,isSelected:d,node:r,nodeKeyDisplay:i,selection:e,typeDisplay:f})})),null===e?": null":l(e)?function(e){let t="";const n=F(e);t+=`: range ${""!==n?`{ ${n} }`:""} ${""!==e.style?`{ style: ${e.style} } `:""}`;const r=e.anchor,o=e.focus,i=r.offset,l=o.offset;return t+=`\n  ├ anchor { key: ${r.key}, offset: ${null===i?"null":i}, type: ${r.type} }`,t+=`\n  └ focus { key: ${o.key}, offset: ${null===l?"null":l}, type: ${o.type} }`,t}(e):r(e)?function(e){return`: table\n  └ { table: ${e.tableKey}, anchorCell: ${e.anchor.key}, focusCell: ${e.focus.key} }`}(e):function(e){if(!s(e))return"";return`: node\n  └ [${Array.from(e._nodes).join(", ")}]`}(e)}));if(C+="\n selection"+S,C+="\n\n commands:",d.length)for(const{index:e,type:t,payload:n}of d)C+=`\n  └ ${e}. { type: ${t}, payload: ${n instanceof Event?n.constructor.name:n} }`;else C+="\n  └ None dispatched.";return C+="\n\n editor:",C+=`\n  └ namespace ${y.namespace}`,null!==b&&(C+=`\n  └ compositionKey ${b}`),C+=`\n  └ editable ${String(x)}`,C}function v(e,t,n=[]){const r=e.getChildren(),o=r.length;r.forEach(((e,r)=>{t(e,n.concat(r===o-1?N.isLastChild:N.hasNextSibling)),a(e)&&v(e,t,n.concat(r===o-1?N.ancestorIsLastChild:N.ancestorHasNextSibling))}))}function B(e,t=!1){const n=Object.entries(C).reduce(((e,[t,n])=>e.replace(new RegExp(t,"g"),String(n))),e);return t?n.replace(/[^\s]/g,"*"):n}function E(e){let t=k.map((t=>t(e))).filter(Boolean).join(", ").toLocaleLowerCase();return""!==t&&(t="detail: "+t),t}function w(e){let t=j.map((t=>t(e))).filter(Boolean).join(", ").toLocaleLowerCase();return""!==t&&(t="mode: "+t),t}function F(e){let t=S.map((t=>t(e))).filter(Boolean).join(", ").toLocaleLowerCase();return""!==t&&(t="format: "+t),t}function D(e){let t=e.getTarget();return null!=t&&(t="target: "+t),t}function K(e){let t=e.getRel();return null!=t&&(t="rel: "+t),t}function O(e){let t=e.getTitle();return null!=t&&(t="title: "+t),t}function A(e,t){const n=new Array(1+t++).join("  "),r=new Array(t-1).join("  ");let o;for(let i=0;i<e.children.length;i++)o=document.createTextNode("\n"+n),e.insertBefore(o,e.children[i]),A(e.children[i],t),e.lastElementChild===e.children[i]&&(o=document.createTextNode("\n"+r),e.appendChild(o));return e}const I=d((function({treeTypeButtonClassName:e,timeTravelButtonClassName:t,timeTravelPanelSliderClassName:n,timeTravelPanelButtonClassName:r,viewClassName:o,timeTravelPanelClassName:i,editorState:l,setEditorState:s,setEditorReadOnly:a,generateContent:c},u){const[f,d]=m([]),[y,C]=m(""),[$,N]=m(!1),[S,T]=m(!1),k=h(0),j=h(null),[L,v]=m(!1),[B,E]=m(!1),[w,F]=m(!1),D=h(),K=h(0),O=g((e=>{const t=++K.current;c(e).then((e=>{t===K.current&&C(e)})).catch((e=>{t===K.current&&C(`Error rendering tree: ${e.message}\n\nStack:\n${e.stack}`)}))}),[c]);p((()=>{!w&&l._nodeMap.size>1e3&&(E(!0),!w)||D.current!==l&&(D.current=l,O(S),$||d((e=>[...e,[Date.now(),l]])))}),[l,O,S,w,$]);const A=f.length;p((()=>{if(L){let e;const t=()=>{const n=k.current;if(n===A-1)return void v(!1);const r=f[n][0],o=f[n+1][0];e=setTimeout((()=>{k.current++;const e=k.current,n=j.current;null!==n&&(n.value=String(e)),s(f[e][1]),t()}),o-r)};return t(),()=>{clearTimeout(e)}}}),[f,L,A,s]);return b("div",{className:o,children:[!w&&B?b("div",{style:{padding:20},children:[x("span",{style:{marginRight:20},children:"Detected large EditorState, this can impact debugging performance."}),x("button",{onClick:()=>{F(!0)},style:{background:"transparent",border:"1px solid white",color:"white",cursor:"pointer",padding:5},children:"Show full tree"})]}):null,w?null:x("button",{onClick:()=>(O(!S),void T(!S)),className:e,type:"button",children:S?"Tree":"Export DOM"}),!$&&(w||!B)&&A>2&&x("button",{onClick:()=>{a(!0),k.current=A-1,N(!0)},className:t,type:"button",children:"Time Travel"}),(w||!B)&&x("pre",{ref:u,children:y}),$&&(w||!B)&&b("div",{className:i,children:[x("button",{className:r,onClick:()=>{k.current===A-1&&(k.current=1),v(!L)},type:"button",children:L?"Pause":"Play"}),x("input",{className:n,ref:j,onChange:e=>{const t=Number(e.target.value),n=f[t];n&&(k.current=t,s(n[1]))},type:"range",min:"1",max:A-1}),x("button",{className:r,onClick:()=>{a(!1);const e=f.length-1,t=f[e];s(t[1]);const n=j.current;null!==n&&(n.value=String(e)),N(!1),v(!1)},type:"button",children:"Exit"})]})]})}));function P(e,t){const n=new Set;let r=0;for(const[o]of e._commands)n.add(e.registerCommand(o,(e=>(t((t=>{r+=1;const n=[...t];return n.push({index:r,payload:e,type:o.type?o.type:"UNKNOWN"}),n.length>10&&n.shift(),n})),!1)),f));return()=>n.forEach((e=>e()))}function R(e){const[t,n]=m([]);return p((()=>P(e,n)),[e]),y((()=>t),[t])}export{I as TreeView,L as generateContent,P as registerLexicalCommandLogger,R as useLexicalCommandsLog};

package/generateContent.d.ts

@@ -5,8 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { LexicalEditor } from 'lexical';
-import { LexicalCommand } from 'lexical';
-export declare function generateContent(editor: LexicalEditor, commandsLog: ReadonlyArray<LexicalCommand<unknown> & {
-    payload: unknown;
-}>, exportDOM: boolean, obfuscateText?: boolean): string;
+import type { LexicalEditor, LexicalNode } from 'lexical';
+import { LexicalCommandLog } from './useLexicalCommandsLog';
+export type CustomPrintNodeFn = (node: LexicalNode, obfuscateText?: boolean) => string;
+export declare function generateContent(editor: LexicalEditor, commandsLog: LexicalCommandLog, exportDOM: boolean, customPrintNode?: CustomPrintNodeFn, obfuscateText?: boolean): string;

package/package.json

@@ -8,16 +8,16 @@
     "utils"
   ],
   "license": "MIT",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "main": "LexicalDevtoolsCore.js",
   "types": "index.d.ts",
   "dependencies": {
-    "@lexical/html": "0.15.0",
-    "@lexical/link": "0.15.0",
-    "@lexical/mark": "0.15.0",
-    "@lexical/table": "0.15.0",
-    "@lexical/utils": "0.15.0",
-    "lexical": "0.15.0"
+    "@lexical/html": "0.16.0",
+    "@lexical/link": "0.16.0",
+    "@lexical/mark": "0.16.0",
+    "@lexical/table": "0.16.0",
+    "@lexical/utils": "0.16.0",
+    "lexical": "0.16.0"
   },
   "peerDependencies": {
     "react": ">=17.x",

package/useLexicalCommandsLog.d.ts

@@ -7,7 +7,9 @@
  */
 import type { LexicalEditor } from 'lexical';
 import { LexicalCommand } from 'lexical';
-export type LexicalCommandLog = ReadonlyArray<LexicalCommand<unknown> & {
+export type LexicalCommandLog = ReadonlyArray<{
+    index: number;
+} & LexicalCommand<unknown> & {
     payload: unknown;
 }>;
 export declare function registerLexicalCommandLogger(editor: LexicalEditor, setLoggedCommands: (v: (oldValue: LexicalCommandLog) => LexicalCommandLog) => void): () => void;