Add type to commands for logging (#2942)

* Update commands

* Small lint error

* Fix failing build

* Rename variables

* Add strings for new commands

examples/decorators.md

@@ -62,7 +62,7 @@ As any other custom Lexical node, decorator nodes need to be registered _before_
 // Create a custom command with a typed payload.
 type CommandPayload = string;
 export const INSERT_VIDEO_COMMAND: LexicalCommand<CommandPayload> =
-  createCommand();
+  createCommand('INSERT_VIDEO_COMMAND');
 
 function VideoPlugin(): ReactNode {
   const [editor] = useLexicalComposerContext();

packages/lexical-link/src/index.ts

@@ -341,7 +341,7 @@ export const TOGGLE_LINK_COMMAND: LexicalCommand<
       rel?: string;
     }
   | null
-> = createCommand();
+> = createCommand('TOGGLE_LINK_COMMAND');
 
 export function toggleLink(
   url: null | string,

packages/lexical-list/src/index.ts

@@ -47,8 +47,13 @@ export {
 };
 
 export const INSERT_UNORDERED_LIST_COMMAND: LexicalCommand<void> =
-  createCommand();
-export const INSERT_ORDERED_LIST_COMMAND: LexicalCommand<void> =
-  createCommand();
-export const INSERT_CHECK_LIST_COMMAND: LexicalCommand<void> = createCommand();
-export const REMOVE_LIST_COMMAND: LexicalCommand<void> = createCommand();
+  createCommand('INSERT_UNORDERED_LIST_COMMAND');
+export const INSERT_ORDERED_LIST_COMMAND: LexicalCommand<void> = createCommand(
+  'INSERT_ORDERED_LIST_COMMAND',
+);
+export const INSERT_CHECK_LIST_COMMAND: LexicalCommand<void> = createCommand(
+  'INSERT_CHECK_LIST_COMMAND',
+);
+export const REMOVE_LIST_COMMAND: LexicalCommand<void> = createCommand(
+  'REMOVE_LIST_COMMAND',
+);

packages/lexical-playground/src/plugins/CommentPlugin/index.tsx

@@ -67,7 +67,9 @@ import ContentEditable from '../../ui/ContentEditable';
 import ErrorBoundary from '../../ui/ErrorBoundary';
 import Placeholder from '../../ui/Placeholder';
 
-export const INSERT_INLINE_COMMAND: LexicalCommand<void> = createCommand();
+export const INSERT_INLINE_COMMAND: LexicalCommand<void> = createCommand(
+  'INSERT_INLINE_COMMAND',
+);
 
 function AddCommentBox({
   anchorKey,

packages/lexical-playground/src/plugins/EquationsPlugin/index.tsx

@@ -31,7 +31,7 @@ type CommandPayload = {
 };
 
 export const INSERT_EQUATION_COMMAND: LexicalCommand<CommandPayload> =
-  createCommand();
+  createCommand('INSERT_EQUATION_COMMAND');
 
 export function InsertEquationDialog({
   activeEditor,

packages/lexical-playground/src/plugins/ExcalidrawPlugin/index.ts

@@ -22,7 +22,9 @@ import {
   ExcalidrawNode,
 } from '../../nodes/ExcalidrawNode';
 
-export const INSERT_EXCALIDRAW_COMMAND: LexicalCommand<void> = createCommand();
+export const INSERT_EXCALIDRAW_COMMAND: LexicalCommand<void> = createCommand(
+  'INSERT_EXCALIDRAW_COMMAND',
+);
 
 export default function ExcalidrawPlugin(): null {
   const [editor] = useLexicalComposerContext();

packages/lexical-playground/src/plugins/FigmaPlugin/index.tsx

@@ -13,7 +13,9 @@ import {useEffect} from 'react';
 
 import {$createFigmaNode, FigmaNode} from '../../nodes/FigmaNode';
 
-export const INSERT_FIGMA_COMMAND: LexicalCommand<string> = createCommand();
+export const INSERT_FIGMA_COMMAND: LexicalCommand<string> = createCommand(
+  'INSERT_FIGMA_COMMAND',
+);
 
 export default function FigmaPlugin(): JSX.Element | null {
   const [editor] = useLexicalComposerContext();

packages/lexical-playground/src/plugins/ImagesPlugin/index.tsx

@@ -45,7 +45,7 @@ import TextInput from '../../ui/TextInput';
 export type InsertImagePayload = Readonly<ImagePayload>;
 
 export const INSERT_IMAGE_COMMAND: LexicalCommand<InsertImagePayload> =
-  createCommand();
+  createCommand('INSERT_IMAGE_COMMAND');
 
 export function InsertImageUriDialogBody({
   onClick,

packages/lexical-playground/src/plugins/PollPlugin/index.tsx

@@ -25,7 +25,9 @@ import Button from '../../ui/Button';
 import {DialogActions} from '../../ui/Dialog';
 import TextInput from '../../ui/TextInput';
 
-export const INSERT_POLL_COMMAND: LexicalCommand<string> = createCommand();
+export const INSERT_POLL_COMMAND: LexicalCommand<string> = createCommand(
+  'INSERT_POLL_COMMAND',
+);
 
 export function InsertPollDialog({
   activeEditor,

packages/lexical-playground/src/plugins/SpeechToTextPlugin/index.ts

@@ -21,7 +21,9 @@ import {useEffect, useRef, useState} from 'react';
 
 import useReport from '../../hooks/useReport';
 
-export const SPEECH_TO_TEXT_COMMAND: LexicalCommand<boolean> = createCommand();
+export const SPEECH_TO_TEXT_COMMAND: LexicalCommand<boolean> = createCommand(
+  'SPEECH_TO_TEXT_COMMAND',
+);
 
 const VOICE_COMMANDS: Readonly<
   Record<

packages/lexical-playground/src/plugins/TablePlugin.tsx

@@ -56,7 +56,7 @@ export type CellEditorConfig = Readonly<{
 }>;
 
 export const INSERT_NEW_TABLE_COMMAND: LexicalCommand<InsertTableCommandPayload> =
-  createCommand();
+  createCommand('INSERT_NEW_TABLE_COMMAND');
 
 // @ts-ignore: not sure why TS doesn't like using null as the value?
 export const CellContext: React.Context<CellContextShape> = createContext({

packages/lexical-playground/src/plugins/TwitterPlugin/index.ts

@@ -13,7 +13,9 @@ import {useEffect} from 'react';
 
 import {$createTweetNode, TweetNode} from '../../nodes/TweetNode';
 
-export const INSERT_TWEET_COMMAND: LexicalCommand<string> = createCommand();
+export const INSERT_TWEET_COMMAND: LexicalCommand<string> = createCommand(
+  'INSERT_TWEET_COMMAND',
+);
 
 export default function TwitterPlugin(): JSX.Element | null {
   const [editor] = useLexicalComposerContext();

packages/lexical-playground/src/plugins/YouTubePlugin/index.ts

@@ -13,7 +13,9 @@ import {useEffect} from 'react';
 
 import {$createYouTubeNode, YouTubeNode} from '../../nodes/YouTubeNode';
 
-export const INSERT_YOUTUBE_COMMAND: LexicalCommand<string> = createCommand();
+export const INSERT_YOUTUBE_COMMAND: LexicalCommand<string> = createCommand(
+  'INSERT_YOUTUBE_COMMAND',
+);
 
 export default function YouTubePlugin(): JSX.Element | null {
   const [editor] = useLexicalComposerContext();

packages/lexical-react/flow/LexicalAutoEmbedPlugin.js.flow

@@ -33,7 +33,7 @@ export const URL_MATCHER: RegExp =
   /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 
 export const INSERT_EMBED_COMMAND: LexicalCommand<EmbedConfig['type']> =
-  createCommand();
+  createCommand('INSERT_EMBED_COMMAND');
 
 type LexicalAutoEmbedPluginProps<TEmbedConfig> = {
   embedConfigs: Array<TEmbedConfig>,

packages/lexical-react/src/LexicalAutoEmbedPlugin.tsx

@@ -45,7 +45,7 @@ export const URL_MATCHER =
   /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 
 export const INSERT_EMBED_COMMAND: LexicalCommand<EmbedConfig['type']> =
-  createCommand();
+  createCommand('INSERT_EMBED_COMMAND');
 
 export class AutoEmbedOption extends TypeaheadOption {
   title: string;

packages/lexical-react/src/LexicalHorizontalRuleNode.tsx

@@ -39,7 +39,7 @@ export type SerializedHorizontalRuleNode = SerializedLexicalNode & {
 };
 
 export const INSERT_HORIZONTAL_RULE_COMMAND: LexicalCommand<void> =
-  createCommand();
+  createCommand('INSERT_HORIZONTAL_RULE_COMMAND');
 
 function HorizontalRuleComponent({nodeKey}: {nodeKey: NodeKey}) {
   const [editor] = useLexicalComposerContext();

packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx

@@ -325,7 +325,7 @@ export function useDynamicPositioning(
 export const SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND: LexicalCommand<{
   index: number;
   option: TypeaheadOption;
-}> = createCommand();
+}> = createCommand('SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND');
 
 function LexicalPopoverMenu<TOption extends TypeaheadOption>({
   close,

packages/lexical-table/src/index.ts

@@ -86,4 +86,4 @@ export type InsertTableCommandPayload = Readonly<{
 }>;
 
 export const INSERT_TABLE_COMMAND: LexicalCommand<InsertTableCommandPayload> =
-  createCommand();
+  createCommand('INSERT_TABLE_COMMAND');

packages/lexical-yjs/src/index.ts

@@ -22,8 +22,11 @@ export type UserState = {
   focusPos: null | RelativePosition;
   name: string;
 };
-export const CONNECTED_COMMAND: LexicalCommand<boolean> = createCommand();
-export const TOGGLE_CONNECT_COMMAND: LexicalCommand<boolean> = createCommand();
+export const CONNECTED_COMMAND: LexicalCommand<boolean> =
+  createCommand('CONNECTED_COMMAND');
+export const TOGGLE_CONNECT_COMMAND: LexicalCommand<boolean> = createCommand(
+  'TOGGLE_CONNECT_COMMAND',
+);
 export type ProviderAwareness = {
   getLocalState: () => UserState | null;
   getStates: () => Map<number, UserState>;

packages/lexical/flow/Lexical.js.flow

@@ -11,7 +11,7 @@
  * LexicalCommands
  */
 
-export type LexicalCommand<P> = $ReadOnly<{}>;
+export type LexicalCommand<P> = $ReadOnly<{type?: string}>;
 
 declare export var SELECTION_CHANGE_COMMAND: LexicalCommand<void>;
 declare export var CLICK_COMMAND: LexicalCommand<MouseEvent>;
@@ -53,7 +53,7 @@ declare export var CAN_UNDO_COMMAND: LexicalCommand<boolean>;
 declare export var FOCUS_COMMAND: LexicalCommand<FocusEvent>;
 declare export var BLUR_COMMAND: LexicalCommand<FocusEvent>;
 
-declare export function createCommand<T>(): LexicalCommand<T>;
+declare export function createCommand<T>(type?: string): LexicalCommand<T>;
 
 /**
  * LexicalEditor

packages/lexical/src/LexicalCommands.ts

@@ -8,67 +8,100 @@
 
 import type {ElementFormatType, LexicalCommand, TextFormatType} from 'lexical';
 
-export function createCommand<T>(): LexicalCommand<T> {
-  return {};
+export function createCommand<T>(type?: string): LexicalCommand<T> {
+  return __DEV__ ? {type} : {};
 }
 
-export const SELECTION_CHANGE_COMMAND: LexicalCommand<void> = createCommand();
-export const CLICK_COMMAND: LexicalCommand<MouseEvent> = createCommand();
-export const DELETE_CHARACTER_COMMAND: LexicalCommand<boolean> =
-  createCommand();
-export const INSERT_LINE_BREAK_COMMAND: LexicalCommand<boolean> =
-  createCommand();
-export const INSERT_PARAGRAPH_COMMAND: LexicalCommand<void> = createCommand();
+export const SELECTION_CHANGE_COMMAND: LexicalCommand<void> = createCommand(
+  'SELECTION_CHANGE_COMMAND',
+);
+export const CLICK_COMMAND: LexicalCommand<MouseEvent> =
+  createCommand('CLICK_COMMAND');
+export const DELETE_CHARACTER_COMMAND: LexicalCommand<boolean> = createCommand(
+  'DELETE_CHARACTER_COMMAND',
+);
+export const INSERT_LINE_BREAK_COMMAND: LexicalCommand<boolean> = createCommand(
+  'INSERT_LINE_BREAK_COMMAND',
+);
+export const INSERT_PARAGRAPH_COMMAND: LexicalCommand<void> = createCommand(
+  'INSERT_PARAGRAPH_COMMAND',
+);
 export const CONTROLLED_TEXT_INSERTION_COMMAND: LexicalCommand<
   InputEvent | string
-> = createCommand();
+> = createCommand('CONTROLLED_TEXT_INSERTION_COMMAND');
 export const PASTE_COMMAND: LexicalCommand<
   ClipboardEvent | InputEvent | KeyboardEvent
-> = createCommand();
-export const REMOVE_TEXT_COMMAND: LexicalCommand<void> = createCommand();
-export const DELETE_WORD_COMMAND: LexicalCommand<boolean> = createCommand();
-export const DELETE_LINE_COMMAND: LexicalCommand<boolean> = createCommand();
+> = createCommand('PASTE_COMMAND');
+export const REMOVE_TEXT_COMMAND: LexicalCommand<void> = createCommand(
+  'REMOVE_TEXT_COMMAND',
+);
+export const DELETE_WORD_COMMAND: LexicalCommand<boolean> = createCommand(
+  'DELETE_WORD_COMMAND',
+);
+export const DELETE_LINE_COMMAND: LexicalCommand<boolean> = createCommand(
+  'DELETE_LINE_COMMAND',
+);
 export const FORMAT_TEXT_COMMAND: LexicalCommand<TextFormatType> =
-  createCommand();
-export const UNDO_COMMAND: LexicalCommand<void> = createCommand();
-export const REDO_COMMAND: LexicalCommand<void> = createCommand();
+  createCommand('FORMAT_TEXT_COMMAND');
+export const UNDO_COMMAND: LexicalCommand<void> = createCommand('UNDO_COMMAND');
+export const REDO_COMMAND: LexicalCommand<void> = createCommand('REDO_COMMAND');
 export const KEY_ARROW_RIGHT_COMMAND: LexicalCommand<KeyboardEvent> =
-  createCommand();
-export const MOVE_TO_END: LexicalCommand<KeyboardEvent> = createCommand();
+  createCommand('KEY_ARROW_RIGHT_COMMAND');
+export const MOVE_TO_END: LexicalCommand<KeyboardEvent> =
+  createCommand('MOVE_TO_END');
 export const KEY_ARROW_LEFT_COMMAND: LexicalCommand<KeyboardEvent> =
-  createCommand();
-export const MOVE_TO_START: LexicalCommand<KeyboardEvent> = createCommand();
+  createCommand('KEY_ARROW_LEFT_COMMAND');
+export const MOVE_TO_START: LexicalCommand<KeyboardEvent> =
+  createCommand('MOVE_TO_START');
 export const KEY_ARROW_UP_COMMAND: LexicalCommand<KeyboardEvent> =
-  createCommand();
+  createCommand('KEY_ARROW_UP_COMMAND');
 export const KEY_ARROW_DOWN_COMMAND: LexicalCommand<KeyboardEvent> =
-  createCommand();
+  createCommand('KEY_ARROW_DOWN_COMMAND');
 export const KEY_ENTER_COMMAND: LexicalCommand<KeyboardEvent | null> =
-  createCommand();
-export const KEY_SPACE_COMMAND: LexicalCommand<KeyboardEvent> = createCommand();
+  createCommand('KEY_ENTER_COMMAND');
+export const KEY_SPACE_COMMAND: LexicalCommand<KeyboardEvent> =
+  createCommand('KEY_SPACE_COMMAND');
 export const KEY_BACKSPACE_COMMAND: LexicalCommand<KeyboardEvent> =
-  createCommand();
+  createCommand('KEY_BACKSPACE_COMMAND');
 export const KEY_ESCAPE_COMMAND: LexicalCommand<KeyboardEvent> =
-  createCommand();
+  createCommand('KEY_ESCAPE_COMMAND');
 export const KEY_DELETE_COMMAND: LexicalCommand<KeyboardEvent> =
-  createCommand();
-export const KEY_TAB_COMMAND: LexicalCommand<KeyboardEvent> = createCommand();
-export const INDENT_CONTENT_COMMAND: LexicalCommand<void> = createCommand();
-export const OUTDENT_CONTENT_COMMAND: LexicalCommand<void> = createCommand();
-export const DROP_COMMAND: LexicalCommand<DragEvent> = createCommand();
+  createCommand('KEY_DELETE_COMMAND');
+export const KEY_TAB_COMMAND: LexicalCommand<KeyboardEvent> =
+  createCommand('KEY_TAB_COMMAND');
+export const INDENT_CONTENT_COMMAND: LexicalCommand<void> = createCommand(
+  'INDENT_CONTENT_COMMAND',
+);
+export const OUTDENT_CONTENT_COMMAND: LexicalCommand<void> = createCommand(
+  'OUTDENT_CONTENT_COMMAND',
+);
+export const DROP_COMMAND: LexicalCommand<DragEvent> =
+  createCommand('DROP_COMMAND');
 export const FORMAT_ELEMENT_COMMAND: LexicalCommand<ElementFormatType> =
-  createCommand();
-export const DRAGSTART_COMMAND: LexicalCommand<DragEvent> = createCommand();
-export const DRAGOVER_COMMAND: LexicalCommand<DragEvent> = createCommand();
-export const DRAGEND_COMMAND: LexicalCommand<DragEvent> = createCommand();
+  createCommand('FORMAT_ELEMENT_COMMAND');
+export const DRAGSTART_COMMAND: LexicalCommand<DragEvent> =
+  createCommand('DRAGSTART_COMMAND');
+export const DRAGOVER_COMMAND: LexicalCommand<DragEvent> =
+  createCommand('DRAGOVER_COMMAND');
+export const DRAGEND_COMMAND: LexicalCommand<DragEvent> =
+  createCommand('DRAGEND_COMMAND');
 export const COPY_COMMAND: LexicalCommand<ClipboardEvent | KeyboardEvent> =
-  createCommand();
+  createCommand('COPY_COMMAND');
 export const CUT_COMMAND: LexicalCommand<ClipboardEvent | KeyboardEvent> =
-  createCommand();
-export const CLEAR_EDITOR_COMMAND: LexicalCommand<void> = createCommand();
-export const CLEAR_HISTORY_COMMAND: LexicalCommand<void> = createCommand();
-export const CAN_REDO_COMMAND: LexicalCommand<boolean> = createCommand();
-export const CAN_UNDO_COMMAND: LexicalCommand<boolean> = createCommand();
-export const FOCUS_COMMAND: LexicalCommand<FocusEvent> = createCommand();
-export const BLUR_COMMAND: LexicalCommand<FocusEvent> = createCommand();
+  createCommand('CUT_COMMAND');
+export const CLEAR_EDITOR_COMMAND: LexicalCommand<void> = createCommand(
+  'CLEAR_EDITOR_COMMAND',
+);
+export const CLEAR_HISTORY_COMMAND: LexicalCommand<void> = createCommand(
+  'CLEAR_HISTORY_COMMAND',
+);
+export const CAN_REDO_COMMAND: LexicalCommand<boolean> =
+  createCommand('CAN_REDO_COMMAND');
+export const CAN_UNDO_COMMAND: LexicalCommand<boolean> =
+  createCommand('CAN_UNDO_COMMAND');
+export const FOCUS_COMMAND: LexicalCommand<FocusEvent> =
+  createCommand('FOCUS_COMMAND');
+export const BLUR_COMMAND: LexicalCommand<FocusEvent> =
+  createCommand('BLUR_COMMAND');
 export const KEY_MODIFIER_COMMAND: LexicalCommand<KeyboardEvent> =
-  createCommand();
+  createCommand('KEY_MODIFIER_COMMAND');

packages/lexical/src/LexicalEditor.ts

@@ -191,7 +191,10 @@ export const COMMAND_PRIORITY_HIGH = 3;
 export const COMMAND_PRIORITY_CRITICAL = 4;
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export type LexicalCommand<TPayload> = Record<string, never>;
+export type LexicalCommand<TPayload> = {
+  type?: string;
+};
+
 /**
  * Type helper for extracting the payload type from a command.
  *
@@ -681,10 +684,10 @@ export class LexicalEditor {
     return true;
   }
 
-  dispatchCommand<
-    TCommand extends LexicalCommand<unknown>,
-    TPayload extends CommandPayloadType<TCommand>,
-  >(type: TCommand, payload: TPayload): boolean {
+  dispatchCommand<TCommand extends LexicalCommand<unknown>>(
+    type: TCommand,
+    payload: CommandPayloadType<TCommand>,
+  ): boolean {
     return dispatchCommand(this, type, payload);
   }
 

packages/lexical/src/LexicalUpdates.ts

@@ -7,6 +7,7 @@
  */
 
 import type {
+  CommandPayloadType,
   EditorUpdateOptions,
   LexicalCommand,
   LexicalEditor,
@@ -641,10 +642,12 @@ export function triggerListeners(
   }
 }
 
-export function triggerCommandListeners<P>(
+export function triggerCommandListeners<
+  TCommand extends LexicalCommand<unknown>,
+>(
   editor: LexicalEditor,
-  type: LexicalCommand<P>,
-  payload: P,
+  type: TCommand,
+  payload: CommandPayloadType<TCommand>,
 ): boolean {
   if (editor._updating === false || activeEditor !== editor) {
     let returnVal = false;

packages/lexical/src/LexicalUtils.ts

@@ -1105,11 +1105,12 @@ export function isFirefoxClipboardEvents(editor: LexicalEditor): boolean {
   );
 }
 
-export function dispatchCommand<
-  TCommand extends LexicalCommand<unknown>,
-  TPayload extends CommandPayloadType<TCommand>,
->(editor: LexicalEditor, type: TCommand, payload: TPayload): boolean {
-  return triggerCommandListeners(editor, type, payload);
+export function dispatchCommand<TCommand extends LexicalCommand<unknown>>(
+  editor: LexicalEditor,
+  command: TCommand,
+  payload: CommandPayloadType<TCommand>,
+): boolean {
+  return triggerCommandListeners(editor, command, payload);
 }
 
 export function $textContentRequiresDoubleLinebreakAtEnd(

packages/lexical/src/__tests__/unit/LexicalEditor.test.tsx

@@ -1614,7 +1614,7 @@ describe('LexicalEditor tests', () => {
     init();
 
     const commandListener = jest.fn();
-    const command = createCommand();
+    const command = createCommand('TEST_COMMAND');
     const payload = 'testPayload';
     const removeCommandListener = editor.registerCommand(
       command,
@@ -1643,7 +1643,7 @@ describe('LexicalEditor tests', () => {
 
     const commandListener = jest.fn();
     const commandListenerTwo = jest.fn();
-    const command = createCommand();
+    const command = createCommand('TEST_COMMAND');
     const removeCommandListener = editor.registerCommand(
       command,
       commandListener,
@@ -2071,7 +2071,7 @@ describe('LexicalEditor tests', () => {
     const textContentListener = jest.fn();
     const editableListener = jest.fn();
     const commandListener = jest.fn();
-    const TEST_COMMAND = createCommand();
+    const TEST_COMMAND = createCommand('TEST_COMMAND');
 
     init();