@lexical/devtools-core 0.14.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Meta Platforms, Inc. and affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/LexicalDevtoolsCore.dev.js

@@ -0,0 +1,500 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var html = require('@lexical/html');
+var link = require('@lexical/link');
+var mark = require('@lexical/mark');
+var table = require('@lexical/table');
+var lexical = require('lexical');
+var React = require('react');
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+const NON_SINGLE_WIDTH_CHARS_REPLACEMENT = Object.freeze({
+  '\t': '\\t',
+  '\n': '\\n'
+});
+const NON_SINGLE_WIDTH_CHARS_REGEX = new RegExp(Object.keys(NON_SINGLE_WIDTH_CHARS_REPLACEMENT).join('|'), 'g');
+const SYMBOLS = Object.freeze({
+  ancestorHasNextSibling: '|',
+  ancestorIsLastChild: ' ',
+  hasNextSibling: '├',
+  isLastChild: '└',
+  selectedChar: '^',
+  selectedLine: '>'
+});
+const FORMAT_PREDICATES = [node => node.hasFormat('bold') && 'Bold', node => node.hasFormat('code') && 'Code', node => node.hasFormat('italic') && 'Italic', node => node.hasFormat('strikethrough') && 'Strikethrough', node => node.hasFormat('subscript') && 'Subscript', node => node.hasFormat('superscript') && 'Superscript', node => node.hasFormat('underline') && 'Underline'];
+const 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) {
+  const editorState = editor.getEditorState();
+  const editorConfig = editor._config;
+  const compositionKey = editor._compositionKey;
+  const editable = editor._editable;
+  if (exportDOM) {
+    let htmlString = '';
+    editorState.read(() => {
+      htmlString = printPrettyHTML(html.$generateHtmlFromNodes(editor));
+    });
+    return htmlString;
+  }
+  let res = ' root\n';
+  const selectionString = editorState.read(() => {
+    const selection = lexical.$getSelection();
+    visitTree(lexical.$getRoot(), (node, indent) => {
+      const nodeKey = node.getKey();
+      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({
+        indent,
+        isSelected,
+        node,
+        nodeKeyDisplay,
+        selection,
+        typeDisplay
+      });
+    });
+    return selection === null ? ': null' : lexical.$isRangeSelection(selection) ? printRangeSelection(selection) : table.$isTableSelection(selection) ? printTableSelection(selection) : printNodeSelection(selection);
+  });
+  res += '\n selection' + selectionString;
+  res += '\n\n commands:';
+  if (commandsLog.length) {
+    for (const {
+      type,
+      payload
+    } of commandsLog) {
+      res += `\n  └ { type: ${type}, payload: ${payload instanceof Event ? payload.constructor.name : payload} }`;
+    }
+  } else {
+    res += '\n  └ None dispatched.';
+  }
+  res += '\n\n editor:';
+  res += `\n  └ namespace ${editorConfig.namespace}`;
+  if (compositionKey !== null) {
+    res += `\n  └ compositionKey ${compositionKey}`;
+  }
+  res += `\n  └ editable ${String(editable)}`;
+  return res;
+}
+function printRangeSelection(selection) {
+  let res = '';
+  const formatText = printFormatProperties(selection);
+  res += `: range ${formatText !== '' ? `{ ${formatText} }` : ''} ${selection.style !== '' ? `{ style: ${selection.style} } ` : ''}`;
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  const anchorOffset = anchor.offset;
+  const focusOffset = focus.offset;
+  res += `\n  ├ anchor { key: ${anchor.key}, offset: ${anchorOffset === null ? 'null' : anchorOffset}, type: ${anchor.type} }`;
+  res += `\n  └ focus { key: ${focus.key}, offset: ${focusOffset === null ? 'null' : focusOffset}, type: ${focus.type} }`;
+  return res;
+}
+function printNodeSelection(selection) {
+  if (!lexical.$isNodeSelection(selection)) {
+    return '';
+  }
+  return `: node\n  └ [${Array.from(selection._nodes).join(', ')}]`;
+}
+function printTableSelection(selection) {
+  return `: table\n  └ { table: ${selection.tableKey}, anchorCell: ${selection.anchor.key}, focusCell: ${selection.focus.key} }`;
+}
+function visitTree(currentNode, visitor, indent = []) {
+  const childNodes = currentNode.getChildren();
+  const childNodesLength = childNodes.length;
+  childNodes.forEach((childNode, i) => {
+    visitor(childNode, indent.concat(i === childNodesLength - 1 ? SYMBOLS.isLastChild : SYMBOLS.hasNextSibling));
+    if (lexical.$isElementNode(childNode)) {
+      visitTree(childNode, visitor, indent.concat(i === childNodesLength - 1 ? SYMBOLS.ancestorIsLastChild : SYMBOLS.ancestorHasNextSibling));
+    }
+  });
+}
+function normalize(text) {
+  return Object.entries(NON_SINGLE_WIDTH_CHARS_REPLACEMENT).reduce((acc, [key, value]) => acc.replace(new RegExp(key, 'g'), String(value)), text);
+}
+
+// TODO Pass via props to allow customizability
+function printNode(node) {
+  if (lexical.$isTextNode(node)) {
+    const text = node.getTextContent();
+    const title = text.length === 0 ? '(empty)' : `"${normalize(text)}"`;
+    const properties = printAllTextNodeProperties(node);
+    return [title, properties.length !== 0 ? `{ ${properties} }` : null].filter(Boolean).join(' ').trim();
+  } else if (link.$isLinkNode(node)) {
+    const link = node.getURL();
+    const title = link.length === 0 ? '(empty)' : `"${normalize(link)}"`;
+    const properties = printAllLinkNodeProperties(node);
+    return [title, properties.length !== 0 ? `{ ${properties} }` : null].filter(Boolean).join(' ').trim();
+  } else if (lexical.$isParagraphNode(node)) {
+    const formatText = printTextFormatProperties(node);
+    return formatText !== '' ? `{ ${formatText} }` : '';
+  } else {
+    return '';
+  }
+}
+function printTextFormatProperties(nodeOrSelection) {
+  let str = FORMAT_PREDICATES_PARAGRAPH.map(predicate => predicate(nodeOrSelection)).filter(Boolean).join(', ').toLocaleLowerCase();
+  if (str !== '') {
+    str = 'format: ' + str;
+  }
+  return str;
+}
+function printAllTextNodeProperties(node) {
+  return [printFormatProperties(node), printDetailProperties(node), printModeProperties(node)].filter(Boolean).join(', ');
+}
+function printAllLinkNodeProperties(node) {
+  return [printTargetProperties(node), printRelProperties(node), printTitleProperties(node)].filter(Boolean).join(', ');
+}
+function printDetailProperties(nodeOrSelection) {
+  let str = DETAIL_PREDICATES.map(predicate => predicate(nodeOrSelection)).filter(Boolean).join(', ').toLocaleLowerCase();
+  if (str !== '') {
+    str = 'detail: ' + str;
+  }
+  return str;
+}
+function printModeProperties(nodeOrSelection) {
+  let str = MODE_PREDICATES.map(predicate => predicate(nodeOrSelection)).filter(Boolean).join(', ').toLocaleLowerCase();
+  if (str !== '') {
+    str = 'mode: ' + str;
+  }
+  return str;
+}
+function printFormatProperties(nodeOrSelection) {
+  let str = FORMAT_PREDICATES.map(predicate => predicate(nodeOrSelection)).filter(Boolean).join(', ').toLocaleLowerCase();
+  if (str !== '') {
+    str = 'format: ' + str;
+  }
+  return str;
+}
+function printTargetProperties(node) {
+  let str = node.getTarget();
+  // TODO Fix nullish on LinkNode
+  if (str != null) {
+    str = 'target: ' + str;
+  }
+  return str;
+}
+function printRelProperties(node) {
+  let str = node.getRel();
+  // TODO Fix nullish on LinkNode
+  if (str != null) {
+    str = 'rel: ' + str;
+  }
+  return str;
+}
+function printTitleProperties(node) {
+  let str = node.getTitle();
+  // TODO Fix nullish on LinkNode
+  if (str != null) {
+    str = 'title: ' + str;
+  }
+  return str;
+}
+function printSelectedCharsLine({
+  indent,
+  isSelected,
+  node,
+  nodeKeyDisplay,
+  selection,
+  typeDisplay
+}) {
+  // No selection or node is not selected.
+  if (!lexical.$isTextNode(node) || !lexical.$isRangeSelection(selection) || !isSelected || lexical.$isElementNode(node)) {
+    return '';
+  }
+
+  // No selected characters.
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  if (node.getTextContent() === '' || anchor.getNode() === selection.focus.getNode() && anchor.offset === focus.offset) {
+    return '';
+  }
+  const [start, end] = $getSelectionStartEnd(node, selection);
+  if (start === end) {
+    return '';
+  }
+  const selectionLastIndent = indent[indent.length - 1] === SYMBOLS.hasNextSibling ? SYMBOLS.ancestorHasNextSibling : SYMBOLS.ancestorIsLastChild;
+  const indentionChars = [...indent.slice(0, indent.length - 1), selectionLastIndent];
+  const unselectedChars = Array(start + 1).fill(' ');
+  const selectedChars = Array(end - start).fill(SYMBOLS.selectedChar);
+  const paddingLength = typeDisplay.length + 3; // 2 for the spaces around + 1 for the double quote.
+
+  const nodePrintSpaces = Array(nodeKeyDisplay.length + paddingLength).fill(' ');
+  return [SYMBOLS.selectedLine, indentionChars.join(' '), [...nodePrintSpaces, ...unselectedChars, ...selectedChars].join('')].join(' ') + '\n';
+}
+function printPrettyHTML(str) {
+  const div = document.createElement('div');
+  div.innerHTML = str.trim();
+  return prettifyHTML(div, 0).innerHTML;
+}
+function prettifyHTML(node, level) {
+  const indentBefore = new Array(level++ + 1).join('  ');
+  const indentAfter = new Array(level - 1).join('  ');
+  let textNode;
+  for (let i = 0; i < node.children.length; i++) {
+    textNode = document.createTextNode('\n' + indentBefore);
+    node.insertBefore(textNode, node.children[i]);
+    prettifyHTML(node.children[i], level);
+    if (node.lastElementChild === node.children[i]) {
+      textNode = document.createTextNode('\n' + indentAfter);
+      node.appendChild(textNode);
+    }
+  }
+  return node;
+}
+function $getSelectionStartEnd(node, selection) {
+  const anchorAndFocus = selection.getStartEndPoints();
+  if (lexical.$isNodeSelection(selection) || anchorAndFocus === null) {
+    return [-1, -1];
+  }
+  const [anchor, focus] = anchorAndFocus;
+  const textContent = node.getTextContent();
+  const textLength = textContent.length;
+  let start = -1;
+  let end = -1;
+
+  // Only one node is being selected.
+  if (anchor.type === 'text' && focus.type === 'text') {
+    const anchorNode = anchor.getNode();
+    const focusNode = focus.getNode();
+    if (anchorNode === focusNode && node === anchorNode && anchor.offset !== focus.offset) {
+      [start, end] = anchor.offset < focus.offset ? [anchor.offset, focus.offset] : [focus.offset, anchor.offset];
+    } else if (node === anchorNode) {
+      [start, end] = anchorNode.isBefore(focusNode) ? [anchor.offset, textLength] : [0, anchor.offset];
+    } else if (node === focusNode) {
+      [start, end] = focusNode.isBefore(anchorNode) ? [focus.offset, textLength] : [0, focus.offset];
+    } else {
+      // Node is within selection but not the anchor nor focus.
+      [start, end] = [0, textLength];
+    }
+  }
+
+  // Account for non-single width characters.
+  const numNonSingleWidthCharBeforeSelection = (textContent.slice(0, start).match(NON_SINGLE_WIDTH_CHARS_REGEX) || []).length;
+  const numNonSingleWidthCharInSelection = (textContent.slice(start, end).match(NON_SINGLE_WIDTH_CHARS_REGEX) || []).length;
+  return [start + numNonSingleWidthCharBeforeSelection, end + numNonSingleWidthCharBeforeSelection + numNonSingleWidthCharInSelection];
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+const LARGE_EDITOR_STATE_SIZE = 1000;
+const TreeView = /*#__PURE__*/React.forwardRef(function TreeViewWrapped({
+  treeTypeButtonClassName,
+  timeTravelButtonClassName,
+  timeTravelPanelSliderClassName,
+  timeTravelPanelButtonClassName,
+  viewClassName,
+  timeTravelPanelClassName,
+  editorState,
+  setEditorState,
+  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 myID = ++lastGenerationID.current;
+    generateContent(exportDOM).then(treeText => {
+      if (myID === lastGenerationID.current) {
+        setContent(treeText);
+      }
+    }).catch(err => {
+      if (myID === lastGenerationID.current) {
+        setContent(`Error rendering tree: ${err.message}\n\nStack:\n${err.stack}`);
+      }
+    });
+  }, [generateContent]);
+  React.useEffect(() => {
+    if (!showLimited && editorState._nodeMap.size > LARGE_EDITOR_STATE_SIZE) {
+      setIsLimited(true);
+      if (!showLimited) {
+        return;
+      }
+    }
+
+    // Prevent re-rendering if the editor state hasn't changed
+    if (lastEditorStateRef.current !== editorState) {
+      lastEditorStateRef.current = editorState;
+      generateTree(showExportDOM);
+      if (!timeTravelEnabled) {
+        setTimeStampedEditorStates(currentEditorStates => [...currentEditorStates, [Date.now(), editorState]]);
+      }
+    }
+  }, [editorState, generateTree, showExportDOM, showLimited, timeTravelEnabled]);
+  const totalEditorStates = timeStampedEditorStates.length;
+  React.useEffect(() => {
+    if (isPlaying) {
+      let timeoutId;
+      const play = () => {
+        const currentIndex = playingIndexRef.current;
+        if (currentIndex === totalEditorStates - 1) {
+          setIsPlaying(false);
+          return;
+        }
+        const currentTime = timeStampedEditorStates[currentIndex][0];
+        const nextTime = timeStampedEditorStates[currentIndex + 1][0];
+        const timeDiff = nextTime - currentTime;
+        timeoutId = setTimeout(() => {
+          playingIndexRef.current++;
+          const index = playingIndexRef.current;
+          const input = inputRef.current;
+          if (input !== null) {
+            input.value = String(index);
+          }
+          setEditorState(timeStampedEditorStates[index][1]);
+          play();
+        }, timeDiff);
+      };
+      play();
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    }
+  }, [timeStampedEditorStates, isPlaying, totalEditorStates, setEditorState]);
+  const handleExportModeToggleClick = () => {
+    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")));
+});
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+function registerLexicalCommandLogger(editor, setLoggedCommands) {
+  const unregisterCommandListeners = new Set();
+  for (const [command] of editor._commands) {
+    unregisterCommandListeners.add(editor.registerCommand(command, payload => {
+      setLoggedCommands(state => {
+        const newState = [...state];
+        newState.push({
+          payload,
+          type: command.type ? command.type : 'UNKNOWN'
+        });
+        if (newState.length > 10) {
+          newState.shift();
+        }
+        return newState;
+      });
+      return false;
+    }, lexical.COMMAND_PRIORITY_CRITICAL));
+  }
+  return () => unregisterCommandListeners.forEach(unregister => unregister());
+}
+function useLexicalCommandsLog(editor) {
+  const [loggedCommands, setLoggedCommands] = React.useState([]);
+  React.useEffect(() => {
+    return registerLexicalCommandLogger(editor, setLoggedCommands);
+  }, [editor]);
+  return React.useMemo(() => loggedCommands, [loggedCommands]);
+}
+
+exports.TreeView = TreeView;
+exports.generateContent = generateContent;
+exports.registerLexicalCommandLogger = registerLexicalCommandLogger;
+exports.useLexicalCommandsLog = useLexicalCommandsLog;

package/LexicalDevtoolsCore.dev.mjs

@@ -0,0 +1,496 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+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';
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+const NON_SINGLE_WIDTH_CHARS_REPLACEMENT = Object.freeze({
+  '\t': '\\t',
+  '\n': '\\n'
+});
+const NON_SINGLE_WIDTH_CHARS_REGEX = new RegExp(Object.keys(NON_SINGLE_WIDTH_CHARS_REPLACEMENT).join('|'), 'g');
+const SYMBOLS = Object.freeze({
+  ancestorHasNextSibling: '|',
+  ancestorIsLastChild: ' ',
+  hasNextSibling: '├',
+  isLastChild: '└',
+  selectedChar: '^',
+  selectedLine: '>'
+});
+const FORMAT_PREDICATES = [node => node.hasFormat('bold') && 'Bold', node => node.hasFormat('code') && 'Code', node => node.hasFormat('italic') && 'Italic', node => node.hasFormat('strikethrough') && 'Strikethrough', node => node.hasFormat('subscript') && 'Subscript', node => node.hasFormat('superscript') && 'Superscript', node => node.hasFormat('underline') && 'Underline'];
+const 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) {
+  const editorState = editor.getEditorState();
+  const editorConfig = editor._config;
+  const compositionKey = editor._compositionKey;
+  const editable = editor._editable;
+  if (exportDOM) {
+    let htmlString = '';
+    editorState.read(() => {
+      htmlString = printPrettyHTML($generateHtmlFromNodes(editor));
+    });
+    return htmlString;
+  }
+  let res = ' root\n';
+  const selectionString = editorState.read(() => {
+    const selection = $getSelection();
+    visitTree($getRoot(), (node, indent) => {
+      const nodeKey = node.getKey();
+      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({
+        indent,
+        isSelected,
+        node,
+        nodeKeyDisplay,
+        selection,
+        typeDisplay
+      });
+    });
+    return selection === null ? ': null' : $isRangeSelection(selection) ? printRangeSelection(selection) : $isTableSelection(selection) ? printTableSelection(selection) : printNodeSelection(selection);
+  });
+  res += '\n selection' + selectionString;
+  res += '\n\n commands:';
+  if (commandsLog.length) {
+    for (const {
+      type,
+      payload
+    } of commandsLog) {
+      res += `\n  └ { type: ${type}, payload: ${payload instanceof Event ? payload.constructor.name : payload} }`;
+    }
+  } else {
+    res += '\n  └ None dispatched.';
+  }
+  res += '\n\n editor:';
+  res += `\n  └ namespace ${editorConfig.namespace}`;
+  if (compositionKey !== null) {
+    res += `\n  └ compositionKey ${compositionKey}`;
+  }
+  res += `\n  └ editable ${String(editable)}`;
+  return res;
+}
+function printRangeSelection(selection) {
+  let res = '';
+  const formatText = printFormatProperties(selection);
+  res += `: range ${formatText !== '' ? `{ ${formatText} }` : ''} ${selection.style !== '' ? `{ style: ${selection.style} } ` : ''}`;
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  const anchorOffset = anchor.offset;
+  const focusOffset = focus.offset;
+  res += `\n  ├ anchor { key: ${anchor.key}, offset: ${anchorOffset === null ? 'null' : anchorOffset}, type: ${anchor.type} }`;
+  res += `\n  └ focus { key: ${focus.key}, offset: ${focusOffset === null ? 'null' : focusOffset}, type: ${focus.type} }`;
+  return res;
+}
+function printNodeSelection(selection) {
+  if (!$isNodeSelection(selection)) {
+    return '';
+  }
+  return `: node\n  └ [${Array.from(selection._nodes).join(', ')}]`;
+}
+function printTableSelection(selection) {
+  return `: table\n  └ { table: ${selection.tableKey}, anchorCell: ${selection.anchor.key}, focusCell: ${selection.focus.key} }`;
+}
+function visitTree(currentNode, visitor, indent = []) {
+  const childNodes = currentNode.getChildren();
+  const childNodesLength = childNodes.length;
+  childNodes.forEach((childNode, i) => {
+    visitor(childNode, indent.concat(i === childNodesLength - 1 ? SYMBOLS.isLastChild : SYMBOLS.hasNextSibling));
+    if ($isElementNode(childNode)) {
+      visitTree(childNode, visitor, indent.concat(i === childNodesLength - 1 ? SYMBOLS.ancestorIsLastChild : SYMBOLS.ancestorHasNextSibling));
+    }
+  });
+}
+function normalize(text) {
+  return Object.entries(NON_SINGLE_WIDTH_CHARS_REPLACEMENT).reduce((acc, [key, value]) => acc.replace(new RegExp(key, 'g'), String(value)), text);
+}
+
+// TODO Pass via props to allow customizability
+function printNode(node) {
+  if ($isTextNode(node)) {
+    const text = node.getTextContent();
+    const title = text.length === 0 ? '(empty)' : `"${normalize(text)}"`;
+    const properties = printAllTextNodeProperties(node);
+    return [title, properties.length !== 0 ? `{ ${properties} }` : null].filter(Boolean).join(' ').trim();
+  } else if ($isLinkNode(node)) {
+    const link = node.getURL();
+    const title = link.length === 0 ? '(empty)' : `"${normalize(link)}"`;
+    const properties = printAllLinkNodeProperties(node);
+    return [title, properties.length !== 0 ? `{ ${properties} }` : null].filter(Boolean).join(' ').trim();
+  } else if ($isParagraphNode(node)) {
+    const formatText = printTextFormatProperties(node);
+    return formatText !== '' ? `{ ${formatText} }` : '';
+  } else {
+    return '';
+  }
+}
+function printTextFormatProperties(nodeOrSelection) {
+  let str = FORMAT_PREDICATES_PARAGRAPH.map(predicate => predicate(nodeOrSelection)).filter(Boolean).join(', ').toLocaleLowerCase();
+  if (str !== '') {
+    str = 'format: ' + str;
+  }
+  return str;
+}
+function printAllTextNodeProperties(node) {
+  return [printFormatProperties(node), printDetailProperties(node), printModeProperties(node)].filter(Boolean).join(', ');
+}
+function printAllLinkNodeProperties(node) {
+  return [printTargetProperties(node), printRelProperties(node), printTitleProperties(node)].filter(Boolean).join(', ');
+}
+function printDetailProperties(nodeOrSelection) {
+  let str = DETAIL_PREDICATES.map(predicate => predicate(nodeOrSelection)).filter(Boolean).join(', ').toLocaleLowerCase();
+  if (str !== '') {
+    str = 'detail: ' + str;
+  }
+  return str;
+}
+function printModeProperties(nodeOrSelection) {
+  let str = MODE_PREDICATES.map(predicate => predicate(nodeOrSelection)).filter(Boolean).join(', ').toLocaleLowerCase();
+  if (str !== '') {
+    str = 'mode: ' + str;
+  }
+  return str;
+}
+function printFormatProperties(nodeOrSelection) {
+  let str = FORMAT_PREDICATES.map(predicate => predicate(nodeOrSelection)).filter(Boolean).join(', ').toLocaleLowerCase();
+  if (str !== '') {
+    str = 'format: ' + str;
+  }
+  return str;
+}
+function printTargetProperties(node) {
+  let str = node.getTarget();
+  // TODO Fix nullish on LinkNode
+  if (str != null) {
+    str = 'target: ' + str;
+  }
+  return str;
+}
+function printRelProperties(node) {
+  let str = node.getRel();
+  // TODO Fix nullish on LinkNode
+  if (str != null) {
+    str = 'rel: ' + str;
+  }
+  return str;
+}
+function printTitleProperties(node) {
+  let str = node.getTitle();
+  // TODO Fix nullish on LinkNode
+  if (str != null) {
+    str = 'title: ' + str;
+  }
+  return str;
+}
+function printSelectedCharsLine({
+  indent,
+  isSelected,
+  node,
+  nodeKeyDisplay,
+  selection,
+  typeDisplay
+}) {
+  // No selection or node is not selected.
+  if (!$isTextNode(node) || !$isRangeSelection(selection) || !isSelected || $isElementNode(node)) {
+    return '';
+  }
+
+  // No selected characters.
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  if (node.getTextContent() === '' || anchor.getNode() === selection.focus.getNode() && anchor.offset === focus.offset) {
+    return '';
+  }
+  const [start, end] = $getSelectionStartEnd(node, selection);
+  if (start === end) {
+    return '';
+  }
+  const selectionLastIndent = indent[indent.length - 1] === SYMBOLS.hasNextSibling ? SYMBOLS.ancestorHasNextSibling : SYMBOLS.ancestorIsLastChild;
+  const indentionChars = [...indent.slice(0, indent.length - 1), selectionLastIndent];
+  const unselectedChars = Array(start + 1).fill(' ');
+  const selectedChars = Array(end - start).fill(SYMBOLS.selectedChar);
+  const paddingLength = typeDisplay.length + 3; // 2 for the spaces around + 1 for the double quote.
+
+  const nodePrintSpaces = Array(nodeKeyDisplay.length + paddingLength).fill(' ');
+  return [SYMBOLS.selectedLine, indentionChars.join(' '), [...nodePrintSpaces, ...unselectedChars, ...selectedChars].join('')].join(' ') + '\n';
+}
+function printPrettyHTML(str) {
+  const div = document.createElement('div');
+  div.innerHTML = str.trim();
+  return prettifyHTML(div, 0).innerHTML;
+}
+function prettifyHTML(node, level) {
+  const indentBefore = new Array(level++ + 1).join('  ');
+  const indentAfter = new Array(level - 1).join('  ');
+  let textNode;
+  for (let i = 0; i < node.children.length; i++) {
+    textNode = document.createTextNode('\n' + indentBefore);
+    node.insertBefore(textNode, node.children[i]);
+    prettifyHTML(node.children[i], level);
+    if (node.lastElementChild === node.children[i]) {
+      textNode = document.createTextNode('\n' + indentAfter);
+      node.appendChild(textNode);
+    }
+  }
+  return node;
+}
+function $getSelectionStartEnd(node, selection) {
+  const anchorAndFocus = selection.getStartEndPoints();
+  if ($isNodeSelection(selection) || anchorAndFocus === null) {
+    return [-1, -1];
+  }
+  const [anchor, focus] = anchorAndFocus;
+  const textContent = node.getTextContent();
+  const textLength = textContent.length;
+  let start = -1;
+  let end = -1;
+
+  // Only one node is being selected.
+  if (anchor.type === 'text' && focus.type === 'text') {
+    const anchorNode = anchor.getNode();
+    const focusNode = focus.getNode();
+    if (anchorNode === focusNode && node === anchorNode && anchor.offset !== focus.offset) {
+      [start, end] = anchor.offset < focus.offset ? [anchor.offset, focus.offset] : [focus.offset, anchor.offset];
+    } else if (node === anchorNode) {
+      [start, end] = anchorNode.isBefore(focusNode) ? [anchor.offset, textLength] : [0, anchor.offset];
+    } else if (node === focusNode) {
+      [start, end] = focusNode.isBefore(anchorNode) ? [focus.offset, textLength] : [0, focus.offset];
+    } else {
+      // Node is within selection but not the anchor nor focus.
+      [start, end] = [0, textLength];
+    }
+  }
+
+  // Account for non-single width characters.
+  const numNonSingleWidthCharBeforeSelection = (textContent.slice(0, start).match(NON_SINGLE_WIDTH_CHARS_REGEX) || []).length;
+  const numNonSingleWidthCharInSelection = (textContent.slice(start, end).match(NON_SINGLE_WIDTH_CHARS_REGEX) || []).length;
+  return [start + numNonSingleWidthCharBeforeSelection, end + numNonSingleWidthCharBeforeSelection + numNonSingleWidthCharInSelection];
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+const LARGE_EDITOR_STATE_SIZE = 1000;
+const TreeView = /*#__PURE__*/forwardRef(function TreeViewWrapped({
+  treeTypeButtonClassName,
+  timeTravelButtonClassName,
+  timeTravelPanelSliderClassName,
+  timeTravelPanelButtonClassName,
+  viewClassName,
+  timeTravelPanelClassName,
+  editorState,
+  setEditorState,
+  setEditorReadOnly,
+  generateContent
+}, ref) {
+  const [timeStampedEditorStates, setTimeStampedEditorStates] = useState([]);
+  const [content, setContent] = useState('');
+  const [timeTravelEnabled, setTimeTravelEnabled] = useState(false);
+  const [showExportDOM, setShowExportDOM] = useState(false);
+  const playingIndexRef = useRef(0);
+  const inputRef = useRef(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isLimited, setIsLimited] = useState(false);
+  const [showLimited, setShowLimited] = useState(false);
+  const lastEditorStateRef = useRef();
+  const lastGenerationID = useRef(0);
+  const generateTree = useCallback(exportDOM => {
+    const myID = ++lastGenerationID.current;
+    generateContent(exportDOM).then(treeText => {
+      if (myID === lastGenerationID.current) {
+        setContent(treeText);
+      }
+    }).catch(err => {
+      if (myID === lastGenerationID.current) {
+        setContent(`Error rendering tree: ${err.message}\n\nStack:\n${err.stack}`);
+      }
+    });
+  }, [generateContent]);
+  useEffect(() => {
+    if (!showLimited && editorState._nodeMap.size > LARGE_EDITOR_STATE_SIZE) {
+      setIsLimited(true);
+      if (!showLimited) {
+        return;
+      }
+    }
+
+    // Prevent re-rendering if the editor state hasn't changed
+    if (lastEditorStateRef.current !== editorState) {
+      lastEditorStateRef.current = editorState;
+      generateTree(showExportDOM);
+      if (!timeTravelEnabled) {
+        setTimeStampedEditorStates(currentEditorStates => [...currentEditorStates, [Date.now(), editorState]]);
+      }
+    }
+  }, [editorState, generateTree, showExportDOM, showLimited, timeTravelEnabled]);
+  const totalEditorStates = timeStampedEditorStates.length;
+  useEffect(() => {
+    if (isPlaying) {
+      let timeoutId;
+      const play = () => {
+        const currentIndex = playingIndexRef.current;
+        if (currentIndex === totalEditorStates - 1) {
+          setIsPlaying(false);
+          return;
+        }
+        const currentTime = timeStampedEditorStates[currentIndex][0];
+        const nextTime = timeStampedEditorStates[currentIndex + 1][0];
+        const timeDiff = nextTime - currentTime;
+        timeoutId = setTimeout(() => {
+          playingIndexRef.current++;
+          const index = playingIndexRef.current;
+          const input = inputRef.current;
+          if (input !== null) {
+            input.value = String(index);
+          }
+          setEditorState(timeStampedEditorStates[index][1]);
+          play();
+        }, timeDiff);
+      };
+      play();
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    }
+  }, [timeStampedEditorStates, isPlaying, totalEditorStates, setEditorState]);
+  const handleExportModeToggleClick = () => {
+    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")));
+});
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+function registerLexicalCommandLogger(editor, setLoggedCommands) {
+  const unregisterCommandListeners = new Set();
+  for (const [command] of editor._commands) {
+    unregisterCommandListeners.add(editor.registerCommand(command, payload => {
+      setLoggedCommands(state => {
+        const newState = [...state];
+        newState.push({
+          payload,
+          type: command.type ? command.type : 'UNKNOWN'
+        });
+        if (newState.length > 10) {
+          newState.shift();
+        }
+        return newState;
+      });
+      return false;
+    }, COMMAND_PRIORITY_CRITICAL));
+  }
+  return () => unregisterCommandListeners.forEach(unregister => unregister());
+}
+function useLexicalCommandsLog(editor) {
+  const [loggedCommands, setLoggedCommands] = useState([]);
+  useEffect(() => {
+    return registerLexicalCommandLogger(editor, setLoggedCommands);
+  }, [editor]);
+  return useMemo(() => loggedCommands, [loggedCommands]);
+}
+
+export { TreeView, generateContent, registerLexicalCommandLogger, useLexicalCommandsLog };

package/LexicalDevtoolsCore.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict'
+const LexicalDevtoolsCore = process.env.NODE_ENV === 'development' ? require('./LexicalDevtoolsCore.dev.js') : require('./LexicalDevtoolsCore.prod.js');
+module.exports = LexicalDevtoolsCore;

package/LexicalDevtoolsCore.js.flow

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */

package/LexicalDevtoolsCore.mjs

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import * as modDev from './LexicalDevtoolsCore.dev.mjs';
+import * as modProd from './LexicalDevtoolsCore.prod.mjs';
+const mod = process.env.NODE_ENV === 'development' ? modDev : modProd;
+export const TreeView = mod.TreeView;
+export const generateContent = mod.generateContent;
+export const registerLexicalCommandLogger = mod.registerLexicalCommandLogger;
+export const useLexicalCommandsLog = mod.useLexicalCommandsLog;

package/LexicalDevtoolsCore.node.mjs

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+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;
+export const registerLexicalCommandLogger = mod.registerLexicalCommandLogger;
+export const useLexicalCommandsLog = mod.useLexicalCommandsLog;

package/LexicalDevtoolsCore.prod.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';var 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])}

package/LexicalDevtoolsCore.prod.mjs

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+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};

package/README.md

@@ -0,0 +1,5 @@
+# `@lexical/devtools-core`
+
+[![See API Documentation](https://lexical.dev/img/see-api-documentation.svg)](https://lexical.dev/docs/api/modules/lexical_devtools_core)
+
+This package contains tools necessary to debug and develop Lexical.

package/TreeView.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { EditorSetOptions, EditorState } from 'lexical';
+import * as React from 'react';
+export declare const TreeView: React.ForwardRefExoticComponent<{
+    editorState: EditorState;
+    treeTypeButtonClassName: string;
+    timeTravelButtonClassName: string;
+    timeTravelPanelButtonClassName: string;
+    timeTravelPanelClassName: string;
+    timeTravelPanelSliderClassName: string;
+    viewClassName: string;
+    generateContent: (exportDOM: boolean) => Promise<string>;
+    setEditorState: (state: EditorState, options?: EditorSetOptions) => void;
+    setEditorReadOnly: (isReadonly: boolean) => void;
+} & React.RefAttributes<HTMLPreElement>>;

package/generateContent.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { LexicalEditor } from 'lexical';
+import { LexicalCommand } from 'lexical';
+export declare function generateContent(editor: LexicalEditor, commandsLog: ReadonlyArray<LexicalCommand<unknown> & {
+    payload: unknown;
+}>, exportDOM: boolean): string;

package/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export * from './generateContent';
+export * from './TreeView';
+export * from './useLexicalCommandsLog';

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@lexical/devtools-core",
+  "description": "This package contains tools necessary to debug and develop Lexical.",
+  "keywords": [
+    "lexical",
+    "editor",
+    "rich-text",
+    "utils"
+  ],
+  "license": "MIT",
+  "version": "0.14.4",
+  "main": "LexicalDevtoolsCore.js",
+  "types": "index.d.ts",
+  "dependencies": {
+    "@lexical/html": "0.14.4",
+    "@lexical/link": "0.14.4",
+    "@lexical/mark": "0.14.4",
+    "@lexical/table": "0.14.4",
+    "@lexical/utils": "0.14.4",
+    "lexical": "0.14.4"
+  },
+  "peerDependencies": {
+    "react": ">=17.x",
+    "react-dom": ">=17.x"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/lexical",
+    "directory": "packages/lexical-devtools-core"
+  },
+  "module": "LexicalDevtoolsCore.mjs",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./index.d.ts",
+        "development": "./LexicalDevtoolsCore.dev.mjs",
+        "production": "./LexicalDevtoolsCore.prod.mjs",
+        "node": "./LexicalDevtoolsCore.node.mjs",
+        "default": "./LexicalDevtoolsCore.mjs"
+      },
+      "require": {
+        "types": "./index.d.ts",
+        "development": "./LexicalDevtoolsCore.dev.js",
+        "production": "./LexicalDevtoolsCore.prod.js",
+        "default": "./LexicalDevtoolsCore.js"
+      }
+    }
+  }
+}

package/useLexicalCommandsLog.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { LexicalEditor } from 'lexical';
+import { LexicalCommand } from 'lexical';
+export type LexicalCommandLog = ReadonlyArray<LexicalCommand<unknown> & {
+    payload: unknown;
+}>;
+export declare function registerLexicalCommandLogger(editor: LexicalEditor, setLoggedCommands: (v: (oldValue: LexicalCommandLog) => LexicalCommandLog) => void): () => void;
+export declare function useLexicalCommandsLog(editor: LexicalEditor): LexicalCommandLog;