[lexical-dev-tools-core] Feature: Index tree view cmds (#6182)

facebook · May 28, 2024 · a8f4fc8 · a8f4fc8
1 parent 1f3ebc5
commit a8f4fc8
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/packages/lexical-devtools-core/src/generateContent.ts b/packages/lexical-devtools-core/src/generateContent.ts
@@ -28,9 +28,10 @@ import {
   $isParagraphNode,
   $isRangeSelection,
   $isTextNode,
-  LexicalCommand,
 } from 'lexical';
 
+import {LexicalCommandLog} from './useLexicalCommandsLog';
+
 const NON_SINGLE_WIDTH_CHARS_REPLACEMENT: Readonly<Record<string, string>> =
   Object.freeze({
     '\t': '\\t',
@@ -86,7 +87,7 @@ const MODE_PREDICATES = [
 
 export function generateContent(
   editor: LexicalEditor,
-  commandsLog: ReadonlyArray<LexicalCommand<unknown> & {payload: unknown}>,
+  commandsLog: LexicalCommandLog,
   exportDOM: boolean,
   obfuscateText: boolean = false,
 ): string {
@@ -148,8 +149,8 @@ export function generateContent(
   res += '\n\n commands:';
 
   if (commandsLog.length) {
-    for (const {type, payload} of commandsLog) {
-      res += `\n  └ { type: ${type}, payload: ${
+    for (const {index, type, payload} of commandsLog) {
+      res += `\n  └ ${index}. { type: ${type}, payload: ${
         payload instanceof Event ? payload.constructor.name : payload
       } }`;
     }

diff --git a/packages/lexical-devtools-core/src/useLexicalCommandsLog.ts b/packages/lexical-devtools-core/src/useLexicalCommandsLog.ts
@@ -12,7 +12,7 @@ import {COMMAND_PRIORITY_CRITICAL, LexicalCommand} from 'lexical';
 import {useEffect, useMemo, useState} from 'react';
 
 export type LexicalCommandLog = ReadonlyArray<
-  LexicalCommand<unknown> & {payload: unknown}
+  {index: number} & LexicalCommand<unknown> & {payload: unknown}
 >;
 
 export function registerLexicalCommandLogger(
@@ -22,15 +22,17 @@ export function registerLexicalCommandLogger(
   ) => void,
 ): () => void {
   const unregisterCommandListeners = new Set<() => void>();
-
+  let i = 0;
   for (const [command] of editor._commands) {
     unregisterCommandListeners.add(
       editor.registerCommand(
         command,
         (payload) => {
           setLoggedCommands((state) => {
+            i += 1;
             const newState = [...state];
             newState.push({
+              index: i,
               payload,
               type: command.type ? command.type : 'UNKNOWN',
             });