diff --git a/packages/lexical-devtools-core/src/generateContent.ts b/packages/lexical-devtools-core/src/generateContent.ts index d4eafc65d4d..431937f3b74 100644 --- 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> = Object.freeze({ '\t': '\\t', @@ -86,7 +87,7 @@ const MODE_PREDICATES = [ export function generateContent( editor: LexicalEditor, - commandsLog: ReadonlyArray & {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 index 2b41f260ac8..e62074a86ec 100644 --- 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 & {payload: unknown} + {index: number} & LexicalCommand & {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', });