Add lexical undo/redo buttons to payload-lexical & improve context sharing between lexical Toolbar and Plugin

[tak-amboss]

The lexical playground has a History Plugin which provides the business logic for undo and redo actions as well as the respective button states.

Payload already uses the HistoryPlugin for keyboard shortcuts in lexical to allow undo and redo, but doesn't offer the option to also display the respective buttons.

While implementing this as a custom lexical plugin, we stumbled upon the following issue:

Undo and redo buttons in the toolbar should indicate whether they are clickable, using the isEnabled function of ToolbarGroupItem. The lexical HistoryPlugin already fires CAN_UNDO_COMMAND/ CAN_REDO_COMMAND which we can listen to in the PluginComponent to know whether the respective button should be enabled.
However, there does not seem to be a proper way to share a state between the PluginComponent and the Toolbar, so we eventually extended the editor interface

declare module "lexical" {
  interface LexicalEditor {
    $canUndo: () => boolean;
    $canRedo: () => boolean;
  }
}

defined an inital state

    let canUndo = false;
    let canRedo = false;

    // By adding these to the editor instance, we can access the state in the toolbar
    editor.$canUndo = () => canUndo;
    editor.$canRedo = () => canRedo;

and update this state plus tigger another update cycle whenever the command gets triggered

      editor.registerCommand(
        CAN_UNDO_COMMAND,
        (payload) => {
          editor.update(
            () => {
              canUndo = payload;
            },
            {
              onUpdate: () => {
                // This ensures that the update listener "updateStates" in payloads ToolbarButton is triggered to update the isEnabled state
              },
            },
          );
          return false;
        },
        COMMAND_PRIORITY_LOW,
      ),

There is already a EditorConfigProvider, but this doesn't allow to share custom properties currently.