@lexical/devtools-core 0.14.5 → 0.16.0

package/LexicalDevtoolsCore.dev.js

@@ -3,7 +3,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 html = require('@lexical/html');
@@ -11,7 +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');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -20,6 +23,7 @@ var React = require('react');
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 const NON_SINGLE_WIDTH_CHARS_REPLACEMENT = Object.freeze({
   '\t': '\\t',
   '\n': '\\n'
@@ -37,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) {
+function generateContent(editor, commandsLog, exportDOM, customPrintNode, obfuscateText = false) {
   const editorState = editor.getEditorState();
   const editorConfig = editor._config;
   const compositionKey = editor._compositionKey;
@@ -57,9 +61,8 @@ function generateContent(editor, commandsLog, exportDOM) {
       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)}\n`;
-      res += printSelectedCharsLine({
+      res += `${isSelected ? SYMBOLS.selectedLine : ' '} ${indent.join(' ')} ${nodeKeyDisplay} ${typeDisplay} ${printNode(node, customPrintNode, obfuscateText)}\n`;
+      res += $printSelectedCharsLine({
         indent,
         isSelected,
         node,
@@ -74,10 +77,11 @@ function generateContent(editor, commandsLog, exportDOM) {
   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.';
@@ -121,22 +125,30 @@ function visitTree(currentNode, visitor, indent = []) {
     }
   });
 }
-function normalize(text) {
-  return Object.entries(NON_SINGLE_WIDTH_CHARS_REPLACEMENT).reduce((acc, [key, value]) => acc.replace(new RegExp(key, 'g'), String(value)), text);
+function normalize(text, obfuscateText = false) {
+  const textToPrint = Object.entries(NON_SINGLE_WIDTH_CHARS_REPLACEMENT).reduce((acc, [key, value]) => acc.replace(new RegExp(key, 'g'), String(value)), text);
+  if (obfuscateText) {
+    return textToPrint.replace(/[^\s]/g, '*');
+  }
+  return textToPrint;
 }
-
-// TODO Pass via props to allow customizability
-function printNode(node) {
+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)}"`;
+    const title = text.length === 0 ? '(empty)' : `"${normalize(text, obfuscateText)}"`;
     const properties = printAllTextNodeProperties(node);
     return [title, properties.length !== 0 ? `{ ${properties} }` : null].filter(Boolean).join(' ').trim();
   } else if (link.$isLinkNode(node)) {
     const link = node.getURL();
-    const title = link.length === 0 ? '(empty)' : `"${normalize(link)}"`;
+    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} }` : '';
@@ -202,7 +214,7 @@ function printTitleProperties(node) {
   }
   return str;
 }
-function printSelectedCharsLine({
+function $printSelectedCharsLine({
   indent,
   isSelected,
   node,
@@ -294,8 +306,9 @@ function $getSelectionStartEnd(node, selection) {
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 const LARGE_EDITOR_STATE_SIZE = 1000;
-const TreeView = /*#__PURE__*/React.forwardRef(function TreeViewWrapped({
+const TreeView = /*#__PURE__*/react.forwardRef(function TreeViewWrapped({
   treeTypeButtonClassName,
   timeTravelButtonClassName,
   timeTravelPanelSliderClassName,
@@ -307,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) {
@@ -330,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) {
@@ -348,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 = () => {
@@ -381,82 +394,92 @@ const TreeView = /*#__PURE__*/React.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__*/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"
+      })]
+    })]
+  });
 });
 
 /**
@@ -466,13 +489,17 @@ const TreeView = /*#__PURE__*/React.forwardRef(function TreeViewWrapped({
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 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'
         });
@@ -487,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

@@ -3,14 +3,16 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
+
 import { $generateHtmlFromNodes } from '@lexical/html';
 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.
@@ -19,6 +21,7 @@ import { forwardRef, useState, useRef, useCallback, useEffect, useMemo } from 'r
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 const NON_SINGLE_WIDTH_CHARS_REPLACEMENT = Object.freeze({
   '\t': '\\t',
   '\n': '\\n'
@@ -36,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) {
+function generateContent(editor, commandsLog, exportDOM, customPrintNode, obfuscateText = false) {
   const editorState = editor.getEditorState();
   const editorConfig = editor._config;
   const compositionKey = editor._compositionKey;
@@ -56,9 +59,8 @@ function generateContent(editor, commandsLog, exportDOM) {
       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)}\n`;
-      res += printSelectedCharsLine({
+      res += `${isSelected ? SYMBOLS.selectedLine : ' '} ${indent.join(' ')} ${nodeKeyDisplay} ${typeDisplay} ${printNode(node, customPrintNode, obfuscateText)}\n`;
+      res += $printSelectedCharsLine({
         indent,
         isSelected,
         node,
@@ -73,10 +75,11 @@ function generateContent(editor, commandsLog, exportDOM) {
   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.';
@@ -120,22 +123,30 @@ function visitTree(currentNode, visitor, indent = []) {
     }
   });
 }
-function normalize(text) {
-  return Object.entries(NON_SINGLE_WIDTH_CHARS_REPLACEMENT).reduce((acc, [key, value]) => acc.replace(new RegExp(key, 'g'), String(value)), text);
+function normalize(text, obfuscateText = false) {
+  const textToPrint = Object.entries(NON_SINGLE_WIDTH_CHARS_REPLACEMENT).reduce((acc, [key, value]) => acc.replace(new RegExp(key, 'g'), String(value)), text);
+  if (obfuscateText) {
+    return textToPrint.replace(/[^\s]/g, '*');
+  }
+  return textToPrint;
 }
-
-// TODO Pass via props to allow customizability
-function printNode(node) {
+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)}"`;
+    const title = text.length === 0 ? '(empty)' : `"${normalize(text, obfuscateText)}"`;
     const properties = printAllTextNodeProperties(node);
     return [title, properties.length !== 0 ? `{ ${properties} }` : null].filter(Boolean).join(' ').trim();
   } else if ($isLinkNode(node)) {
     const link = node.getURL();
-    const title = link.length === 0 ? '(empty)' : `"${normalize(link)}"`;
+    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} }` : '';
@@ -201,7 +212,7 @@ function printTitleProperties(node) {
   }
   return str;
 }
-function printSelectedCharsLine({
+function $printSelectedCharsLine({
   indent,
   isSelected,
   node,
@@ -293,6 +304,7 @@ function $getSelectionStartEnd(node, selection) {
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 const LARGE_EDITOR_STATE_SIZE = 1000;
 const TreeView = /*#__PURE__*/forwardRef(function TreeViewWrapped({
   treeTypeButtonClassName,
@@ -380,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"
+      })]
+    })]
+  });
 });
 
 /**
@@ -465,13 +487,17 @@ const TreeView = /*#__PURE__*/forwardRef(function TreeViewWrapped({
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 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

@@ -3,7 +3,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'
 const LexicalDevtoolsCore = process.env.NODE_ENV === 'development' ? require('./LexicalDevtoolsCore.dev.js') : require('./LexicalDevtoolsCore.prod.js');
 module.exports = LexicalDevtoolsCore;

package/LexicalDevtoolsCore.js.flow

@@ -6,3 +6,37 @@
  *
  * @flow strict
  */
+
+/**
+ * LexicalDevtoolsCore
+ */
+
+import type {
+  LexicalCommand,
+  LexicalEditor,
+  LexicalNode,
+} from 'lexical';
+
+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,
+  customPrintNode?: CustomPrintNodeFn,
+  obfuscateText?: boolean,
+): string;
+
+declare export function registerLexicalCommandLogger(
+  editor: LexicalEditor,
+  setLoggedCommands: (
+    v: (oldValue: LexicalCommandLog) => LexicalCommandLog,
+  ) => void,
+): () => void;
+
+declare export function useLexicalCommandsLog(
+  editor: LexicalEditor,
+): LexicalCommandLog;

package/LexicalDevtoolsCore.mjs

@@ -3,7 +3,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
+
 import * as modDev from './LexicalDevtoolsCore.dev.mjs';
 import * as modProd from './LexicalDevtoolsCore.prod.mjs';
 const mod = process.env.NODE_ENV === 'development' ? modDev : modProd;

package/LexicalDevtoolsCore.node.mjs

@@ -3,7 +3,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
+
 const mod = await (process.env.NODE_ENV === 'development' ? import('./LexicalDevtoolsCore.dev.mjs') : import('./LexicalDevtoolsCore.prod.mjs'));
 export const TreeView = mod.TreeView;
 export const generateContent = mod.generateContent;

package/LexicalDevtoolsCore.prod.js

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

@@ -3,5 +3,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
-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 h,useRef as g,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){const h=f.getEditorState(),g=f._config,p=f._compositionKey,y=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 b=" root\n";const C=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(", ")} ] `:"";b+=`${m?x.selectedLine:" "} ${o.join(" ")} ${l} ${f} ${d} ${function(e){if(c(e)){const t=e.getTextContent(),n=0===t.length?"(empty)":`"${L(t)}"`,r=function(e){return[w(e),v(e),B(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)":`"${L(t)}"`,r=function(e){return[F(e),D(e),K(e)].filter(Boolean).join(", ")}(e);return[n,0!==r.length?`{ ${r} }`: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)}\n`,b+=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 h=e[e.length-1]===x.hasNextSibling?x.ancestorHasNextSibling:x.ancestorIsLastChild,g=[...e.slice(0,e.length-1),h],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,g.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(b+="\n selection"+C,b+="\n\n commands:",m.length)for(const{type:e,payload:t}of m)b+=`\n  └ { type: ${e}, payload: ${t instanceof Event?t.constructor.name:t} }`;else b+="\n  └ None dispatched.";return b+="\n\n editor:",b+=`\n  └ namespace ${g.namespace}`,null!==p&&(b+=`\n  └ compositionKey ${p}`),b+=`\n  └ editable ${String(y)}`,b}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){return Object.entries(C).reduce(((e,[t,n])=>e.replace(new RegExp(t,"g"),String(n))),e)}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]=h([]),[b,C]=h(""),[$,x]=h(!1),[N,S]=h(!1),T=g(0),E=g(null),[k,j]=h(!1),[L,v]=h(!1),[B,w]=h(!1),F=g(),D=g(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]=h([]);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): 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.14.5",
+  "version": "0.16.0",
   "main": "LexicalDevtoolsCore.js",
   "types": "index.d.ts",
   "dependencies": {
-    "@lexical/html": "0.14.5",
-    "@lexical/link": "0.14.5",
-    "@lexical/mark": "0.14.5",
-    "@lexical/table": "0.14.5",
-    "@lexical/utils": "0.14.5",
-    "lexical": "0.14.5"
+    "@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;