@lexical/devtools-core 0.44.1-nightly.20260519.0 → 0.45.0

package/package.json

@@ -8,16 +8,16 @@
     "utils"
   ],
   "license": "MIT",
-  "version": "0.44.1-nightly.20260519.0",
-  "main": "LexicalDevtoolsCore.js",
-  "types": "index.d.ts",
+  "version": "0.45.0",
+  "main": "./dist/LexicalDevtoolsCore.js",
+  "types": "./dist/index.d.ts",
   "dependencies": {
-    "@lexical/html": "0.44.1-nightly.20260519.0",
-    "@lexical/link": "0.44.1-nightly.20260519.0",
-    "@lexical/mark": "0.44.1-nightly.20260519.0",
-    "@lexical/table": "0.44.1-nightly.20260519.0",
-    "@lexical/utils": "0.44.1-nightly.20260519.0",
-    "lexical": "0.44.1-nightly.20260519.0"
+    "@lexical/html": "0.45.0",
+    "@lexical/link": "0.45.0",
+    "@lexical/mark": "0.45.0",
+    "@lexical/table": "0.45.0",
+    "@lexical/utils": "0.45.0",
+    "lexical": "0.45.0"
   },
   "peerDependencies": {
     "react": ">=17.x",
@@ -28,23 +28,37 @@
     "url": "git+https://github.com/facebook/lexical.git",
     "directory": "packages/lexical-devtools-core"
   },
-  "module": "LexicalDevtoolsCore.mjs",
+  "module": "./dist/LexicalDevtoolsCore.mjs",
   "sideEffects": false,
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "import": {
-        "types": "./index.d.ts",
-        "development": "./LexicalDevtoolsCore.dev.mjs",
-        "production": "./LexicalDevtoolsCore.prod.mjs",
-        "node": "./LexicalDevtoolsCore.node.mjs",
-        "default": "./LexicalDevtoolsCore.mjs"
+        "types": "./dist/index.d.ts",
+        "development": "./dist/LexicalDevtoolsCore.dev.mjs",
+        "production": "./dist/LexicalDevtoolsCore.prod.mjs",
+        "node": "./dist/LexicalDevtoolsCore.node.mjs",
+        "default": "./dist/LexicalDevtoolsCore.mjs"
       },
       "require": {
-        "types": "./index.d.ts",
-        "development": "./LexicalDevtoolsCore.dev.js",
-        "production": "./LexicalDevtoolsCore.prod.js",
-        "default": "./LexicalDevtoolsCore.js"
+        "types": "./dist/index.d.ts",
+        "development": "./dist/LexicalDevtoolsCore.dev.js",
+        "production": "./dist/LexicalDevtoolsCore.prod.js",
+        "default": "./dist/LexicalDevtoolsCore.js"
       }
     }
-  }
+  },
+  "files": [
+    "dist",
+    "src",
+    "!src/__tests__",
+    "!src/__bench__",
+    "!src/__mocks__",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!src/**/*.bench.ts",
+    "!src/**/*.bench.tsx",
+    "README.md",
+    "LICENSE"
+  ]
 }

package/src/TreeView.tsx

@@ -0,0 +1,264 @@
+/**
+ * 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 {LexicalCommandLog} from './useLexicalCommandsLog';
+import type {EditorSetOptions, EditorState} from 'lexical';
+import type {JSX} from 'react';
+
+import * as React from 'react';
+import {forwardRef, useCallback, useEffect, useRef, useState} from 'react';
+
+const LARGE_EDITOR_STATE_SIZE = 1000;
+
+export const TreeView = forwardRef<
+  HTMLPreElement,
+  {
+    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;
+    commandsLog?: LexicalCommandLog;
+  }
+>(function TreeViewWrapped(
+  {
+    treeTypeButtonClassName,
+    timeTravelButtonClassName,
+    timeTravelPanelSliderClassName,
+    timeTravelPanelButtonClassName,
+    viewClassName,
+    timeTravelPanelClassName,
+    editorState,
+    setEditorState,
+    setEditorReadOnly,
+    generateContent,
+    commandsLog = [],
+  },
+  ref,
+): JSX.Element {
+  const [timeStampedEditorStates, setTimeStampedEditorStates] = useState<
+    Array<[number, EditorState]>
+  >([]);
+  const [content, setContent] = useState<string>('');
+  const [timeTravelEnabled, setTimeTravelEnabled] = useState(false);
+  const [showExportDOM, setShowExportDOM] = useState(false);
+  const playingIndexRef = useRef(0);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isLimited, setIsLimited] = useState(false);
+  const [showLimited, setShowLimited] = useState(false);
+  const lastEditorStateRef = useRef<null | EditorState>(null);
+  const lastCommandsLogRef = useRef<LexicalCommandLog>([]);
+  const lastGenerationID = useRef(0);
+
+  const generateTree = useCallback(
+    (exportDOM: boolean) => {
+      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;
+      }
+    }
+
+    // Update view when either editor state changes or new commands are logged
+    const shouldUpdate =
+      lastEditorStateRef.current !== editorState ||
+      lastCommandsLogRef.current !== commandsLog;
+
+    if (shouldUpdate) {
+      // Check if it's a real editor state change
+      const isEditorStateChange = lastEditorStateRef.current !== editorState;
+
+      lastEditorStateRef.current = editorState;
+      lastCommandsLogRef.current = commandsLog;
+      generateTree(showExportDOM);
+
+      // Only record in time travel if there was an actual editor state change
+      if (!timeTravelEnabled && isEditorStateChange) {
+        setTimeStampedEditorStates(currentEditorStates => [
+          ...currentEditorStates,
+          [Date.now(), editorState],
+        ]);
+      }
+    }
+  }, [
+    editorState,
+    generateTree,
+    showExportDOM,
+    showLimited,
+    timeTravelEnabled,
+    commandsLog,
+  ]);
+
+  const totalEditorStates = timeStampedEditorStates.length;
+
+  useEffect(() => {
+    if (isPlaying) {
+      let timeoutId: ReturnType<typeof setTimeout>;
+
+      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 (
+    <div className={viewClassName}>
+      {!showLimited && isLimited ? (
+        <div style={{padding: 20}}>
+          <span style={{marginRight: 20}}>
+            Detected large EditorState, this can impact debugging performance.
+          </span>
+          <button
+            onClick={() => {
+              setShowLimited(true);
+            }}
+            style={{
+              background: 'transparent',
+              border: '1px solid white',
+              color: 'white',
+              cursor: 'pointer',
+              padding: 5,
+            }}>
+            Show full tree
+          </button>
+        </div>
+      ) : null}
+      {!showLimited ? (
+        <button
+          onClick={() => handleExportModeToggleClick()}
+          className={treeTypeButtonClassName}
+          type="button">
+          {showExportDOM ? 'Tree' : 'Export DOM'}
+        </button>
+      ) : null}
+      {!timeTravelEnabled &&
+        (showLimited || !isLimited) &&
+        totalEditorStates > 2 && (
+          <button
+            onClick={() => {
+              setEditorReadOnly(true);
+              playingIndexRef.current = totalEditorStates - 1;
+              setTimeTravelEnabled(true);
+            }}
+            className={timeTravelButtonClassName}
+            type="button">
+            Time Travel
+          </button>
+        )}
+      {(showLimited || !isLimited) && <pre ref={ref}>{content}</pre>}
+      {timeTravelEnabled && (showLimited || !isLimited) && (
+        <div className={timeTravelPanelClassName}>
+          <button
+            className={timeTravelPanelButtonClassName}
+            onClick={() => {
+              if (playingIndexRef.current === totalEditorStates - 1) {
+                playingIndexRef.current = 1;
+              }
+              setIsPlaying(!isPlaying);
+            }}
+            type="button">
+            {isPlaying ? 'Pause' : 'Play'}
+          </button>
+          <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}
+          />
+          <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
+          </button>
+        </div>
+      )}
+    </div>
+  );
+});

package/src/generateContent.ts

@@ -0,0 +1,576 @@
+/**
+ * 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 {
+  BaseSelection,
+  ElementNode,
+  LexicalEditor,
+  LexicalNode,
+  ParagraphNode,
+  RangeSelection,
+  TextNode,
+} from 'lexical';
+
+import {$generateHtmlFromNodes} from '@lexical/html';
+import {$isLinkNode, LinkNode} from '@lexical/link';
+import {$isMarkNode} from '@lexical/mark';
+import {$isTableSelection, TableSelection} from '@lexical/table';
+import {
+  $getRoot,
+  $getSelection,
+  $isElementNode,
+  $isNodeSelection,
+  $isParagraphNode,
+  $isRangeSelection,
+  $isTextNode,
+} from 'lexical';
+
+import {LexicalCommandLog} from './useLexicalCommandsLog';
+
+export type CustomPrintNodeFn = (
+  node: LexicalNode,
+  obfuscateText?: boolean,
+) => string | undefined;
+
+const NON_SINGLE_WIDTH_CHARS_REPLACEMENT: Readonly<Record<string, string>> =
+  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: Record<string, string> = Object.freeze({
+  ancestorHasNextSibling: '|',
+  ancestorIsLastChild: ' ',
+  hasNextSibling: '├',
+  isLastChild: '└',
+  selectedChar: '^',
+  selectedLine: '>',
+});
+
+const FORMAT_PREDICATES = [
+  (node: TextNode | RangeSelection) => node.hasFormat('bold') && 'Bold',
+  (node: TextNode | RangeSelection) => node.hasFormat('code') && 'Code',
+  (node: TextNode | RangeSelection) => node.hasFormat('italic') && 'Italic',
+  (node: TextNode | RangeSelection) =>
+    node.hasFormat('strikethrough') && 'Strikethrough',
+  (node: TextNode | RangeSelection) =>
+    node.hasFormat('subscript') && 'Subscript',
+  (node: TextNode | RangeSelection) =>
+    node.hasFormat('superscript') && 'Superscript',
+  (node: TextNode | RangeSelection) =>
+    node.hasFormat('underline') && 'Underline',
+  (node: TextNode | RangeSelection) =>
+    node.hasFormat('highlight') && 'Highlight',
+];
+
+const FORMAT_PREDICATES_PARAGRAPH = [
+  (node: ParagraphNode) => node.hasTextFormat('bold') && 'Bold',
+  (node: ParagraphNode) => node.hasTextFormat('code') && 'Code',
+  (node: ParagraphNode) => node.hasTextFormat('italic') && 'Italic',
+  (node: ParagraphNode) =>
+    node.hasTextFormat('strikethrough') && 'Strikethrough',
+  (node: ParagraphNode) => node.hasTextFormat('subscript') && 'Subscript',
+  (node: ParagraphNode) => node.hasTextFormat('superscript') && 'Superscript',
+  (node: ParagraphNode) => node.hasTextFormat('underline') && 'Underline',
+  (node: ParagraphNode) => node.hasTextFormat('highlight') && 'Highlight',
+];
+
+const DETAIL_PREDICATES = [
+  (node: TextNode) => node.isDirectionless() && 'Directionless',
+  (node: TextNode) => node.isUnmergeable() && 'Unmergeable',
+];
+
+const MODE_PREDICATES = [
+  (node: TextNode) => node.isToken() && 'Token',
+  (node: TextNode) => node.isSegmented() && 'Segmented',
+];
+
+export function generateContent(
+  editor: LexicalEditor,
+  commandsLog: LexicalCommandLog,
+  exportDOM: boolean,
+  customPrintNode?: CustomPrintNodeFn,
+  obfuscateText: boolean = false,
+): string {
+  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));
+      },
+      {editor},
+    );
+    return htmlString;
+  }
+
+  let res = ' root\n';
+
+  const selectionString = editorState.read(
+    () => {
+      const selection = $getSelection();
+
+      visitTree($getRoot(), (node: LexicalNode, indent: Array<string>) => {
+        const nodeKey = node.getKey();
+        const nodeKeyDisplay = `(${nodeKey})`;
+        const typeDisplay = node.getType() || '';
+        const isSelected = node.isSelected();
+
+        res += `${isSelected ? SYMBOLS.selectedLine : ' '} ${indent.join(
+          ' ',
+        )} ${nodeKeyDisplay} ${typeDisplay} ${printNode(
+          node,
+          customPrintNode,
+          obfuscateText,
+        )}\n`;
+
+        res += $printSelectedCharsLine({
+          indent,
+          isSelected,
+          node,
+          nodeKeyDisplay,
+          selection,
+          typeDisplay,
+        });
+      });
+
+      return selection === null
+        ? ': null'
+        : $isRangeSelection(selection)
+          ? printRangeSelection(selection)
+          : $isTableSelection(selection)
+            ? printTableSelection(selection)
+            : printNodeSelection(selection);
+    },
+    {editor},
+  );
+
+  res += '\n selection' + selectionString;
+
+  res += '\n\n commands:';
+
+  if (commandsLog.length) {
+    for (const {index, type, payload} of commandsLog) {
+      res += `\n  └ ${index}. { type: ${type}, payload: ${
+        payload instanceof Event ? payload.constructor.name : payload
+      } }`;
+    }
+  } else {
+    res += '\n  └ None dispatched.';
+  }
+  const {version} = editor.constructor;
+  res += `\n\n editor${version ? ` (v${version})` : ''}:`;
+  res += `\n  └ namespace ${editorConfig.namespace}`;
+  if (compositionKey !== null) {
+    res += `\n  └ compositionKey ${compositionKey}`;
+  }
+  res += `\n  └ editable ${String(editable)}`;
+
+  return res;
+}
+
+function printRangeSelection(selection: RangeSelection): string {
+  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: BaseSelection): string {
+  if (!$isNodeSelection(selection)) {
+    return '';
+  }
+  return `: node\n  └ [${Array.from(selection._nodes).join(', ')}]`;
+}
+
+function printTableSelection(selection: TableSelection): string {
+  return `: table\n  └ { table: ${selection.tableKey}, anchorCell: ${selection.anchor.key}, focusCell: ${selection.focus.key} }`;
+}
+
+function visitTree(
+  currentNode: ElementNode,
+  visitor: (node: LexicalNode, indentArr: Array<string>) => void,
+  indent: Array<string> = [],
+) {
+  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: string, obfuscateText: boolean = 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;
+}
+
+function printNode(
+  node: LexicalNode,
+  customPrintNode?: CustomPrintNodeFn,
+  obfuscateText: boolean = false,
+) {
+  const customPrint: string | undefined = customPrintNode
+    ? customPrintNode(node, obfuscateText)
+    : undefined;
+  if (customPrint !== undefined && customPrint.length > 0) {
+    return customPrint;
+  }
+
+  if ($isTextNode(node)) {
+    const text = node.getTextContent();
+    const title =
+      text.length === 0 ? '(empty)' : `"${normalize(text, obfuscateText)}"`;
+    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, 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);
+    let paragraphData = formatText !== '' ? `{ ${formatText} }` : '';
+    paragraphData += node.__style ? `(${node.__style})` : '';
+    return paragraphData;
+  } else {
+    return '';
+  }
+}
+
+function printTextFormatProperties(nodeOrSelection: ParagraphNode) {
+  let str = FORMAT_PREDICATES_PARAGRAPH.map(predicate =>
+    predicate(nodeOrSelection),
+  )
+    .filter(Boolean)
+    .join(', ')
+    .toLocaleLowerCase();
+
+  if (str !== '') {
+    str = 'format: ' + str;
+  }
+
+  return str;
+}
+
+function printAllTextNodeProperties(node: TextNode) {
+  return [
+    printFormatProperties(node),
+    printDetailProperties(node),
+    printModeProperties(node),
+    printStateProperties(node),
+  ]
+    .filter(Boolean)
+    .join(', ');
+}
+
+function printAllLinkNodeProperties(node: LinkNode) {
+  return [
+    printTargetProperties(node),
+    printRelProperties(node),
+    printTitleProperties(node),
+    printStateProperties(node),
+  ]
+    .filter(Boolean)
+    .join(', ');
+}
+
+function printDetailProperties(nodeOrSelection: TextNode) {
+  let str = DETAIL_PREDICATES.map(predicate => predicate(nodeOrSelection))
+    .filter(Boolean)
+    .join(', ')
+    .toLocaleLowerCase();
+
+  if (str !== '') {
+    str = 'detail: ' + str;
+  }
+
+  return str;
+}
+
+function printModeProperties(nodeOrSelection: TextNode) {
+  let str = MODE_PREDICATES.map(predicate => predicate(nodeOrSelection))
+    .filter(Boolean)
+    .join(', ')
+    .toLocaleLowerCase();
+
+  if (str !== '') {
+    str = 'mode: ' + str;
+  }
+
+  return str;
+}
+
+function printFormatProperties(nodeOrSelection: TextNode | RangeSelection) {
+  let str = FORMAT_PREDICATES.map(predicate => predicate(nodeOrSelection))
+    .filter(Boolean)
+    .join(', ')
+    .toLocaleLowerCase();
+
+  if (str !== '') {
+    str = 'format: ' + str;
+  }
+
+  return str;
+}
+
+function printTargetProperties(node: LinkNode) {
+  let str = node.getTarget();
+  // TODO Fix nullish on LinkNode
+  if (str != null) {
+    str = 'target: ' + str;
+  }
+  return str;
+}
+
+function printRelProperties(node: LinkNode) {
+  let str = node.getRel();
+  // TODO Fix nullish on LinkNode
+  if (str != null) {
+    str = 'rel: ' + str;
+  }
+  return str;
+}
+
+function printTitleProperties(node: LinkNode) {
+  let str = node.getTitle();
+  // TODO Fix nullish on LinkNode
+  if (str != null) {
+    str = 'title: ' + str;
+  }
+  return str;
+}
+
+function printStateProperties(node: LexicalNode) {
+  if (!node.__state) {
+    return false;
+  }
+  const states = [];
+  for (const [stateType, value] of node.__state.knownState.entries()) {
+    if (stateType.isEqual(value, stateType.defaultValue)) {
+      continue;
+    }
+    const textValue = JSON.stringify(stateType.unparse(value));
+    states.push(`[${stateType.key}: ${textValue}]`);
+  }
+  let str = states.join(',');
+  if (str !== '') {
+    str = 'state: ' + str;
+  }
+  return str;
+}
+
+function $printSelectedCharsLine({
+  indent,
+  isSelected,
+  node,
+  nodeKeyDisplay,
+  selection,
+  typeDisplay,
+}: {
+  indent: Array<string>;
+  isSelected: boolean;
+  node: LexicalNode;
+  nodeKeyDisplay: string;
+  selection: BaseSelection | null;
+  typeDisplay: string;
+}) {
+  // 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 + 2; // 1 for the space after + 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: string) {
+  const div = document.createElement('div');
+  div.innerHTML = str.trim();
+  return prettifyHTML(div, 0).innerHTML;
+}
+
+function prettifyHTML(node: Element, level: number) {
+  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: LexicalNode,
+  selection: BaseSelection,
+): [number, number] {
+  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,
+  ];
+}

package/src/index.ts

@@ -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.
+ *
+ */
+
+export * from './generateContent';
+export * from './TreeView';
+export * from './useLexicalCommandsLog';

package/src/useLexicalCommandsLog.ts

@@ -0,0 +1,61 @@
+/**
+ * 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 {COMMAND_PRIORITY_CRITICAL, LexicalCommand} from 'lexical';
+import {useEffect, useState} from 'react';
+
+export type LexicalCommandEntry = {index: number} & LexicalCommand<unknown> & {
+    payload: unknown;
+  };
+
+export type LexicalCommandLog = ReadonlyArray<LexicalCommandEntry>;
+
+export function registerLexicalCommandLogger(
+  editor: LexicalEditor,
+  setLoggedCommands: (
+    v: (oldValue: LexicalCommandLog) => LexicalCommandLog,
+  ) => void,
+): () => void {
+  const unregisterCommandListeners: (() => void)[] = [];
+  let index = 0;
+  for (const command of editor._commands.keys()) {
+    unregisterCommandListeners.push(
+      editor.registerCommand(
+        command,
+        payload => {
+          index += 1;
+          const entry: LexicalCommandEntry = {
+            index,
+            payload,
+            type: command.type ? command.type : 'UNKNOWN',
+          };
+          setLoggedCommands(state => [...state.slice(-9), entry]);
+          return false;
+        },
+        COMMAND_PRIORITY_CRITICAL,
+      ),
+    );
+  }
+
+  return () => unregisterCommandListeners.forEach(unregister => unregister());
+}
+
+export function useLexicalCommandsLog(
+  editor: LexicalEditor,
+): LexicalCommandLog {
+  const [loggedCommands, setLoggedCommands] = useState<LexicalCommandLog>([]);
+
+  useEffect(
+    () => registerLexicalCommandLogger(editor, setLoggedCommands),
+    [editor],
+  );
+
+  return loggedCommands;
+}