How to get custom toolbar button working?

[Thor-x86]

Hi there, I'm trying to create some custom toolbar buttons which implement MUI style. For now, let's talk about how did I implement a custom UndoRedo button.

import type { ForwardedRef, ReactNode } from 'react';
import type { BoxProps } from '@mui/material/Box';
import { forwardRef, useState, useEffect } from 'react';
import Box from '@mui/material/Box';
import UndoIcon from '@mui/icons-material/Undo';
import RedoIcon from '@mui/icons-material/Redo';
import { useCellValues, IS_APPLE, activeEditor$, useTranslation } from '@mdxeditor/editor';
import {
    CAN_REDO_COMMAND,
    CAN_UNDO_COMMAND,
    COMMAND_PRIORITY_CRITICAL,
    REDO_COMMAND,
    UNDO_COMMAND
} from 'lexical';
import { mergeRegister } from '@lexical/utils';
import IconButton from '$src/component/IconButton';

const UndoRedoButtons = forwardRef(
    (props: BoxProps, ref: ForwardedRef<HTMLDivElement>): ReactNode => {
        const [activeEditor] = useCellValues(activeEditor$);
        const [canUndo, setCanUndo] = useState(false);
        const [canRedo, setCanRedo] = useState(false);
        const t = useTranslation();

        useEffect(() => {
            if (activeEditor) {
                return mergeRegister(
                    activeEditor.registerCommand<boolean>(
                        CAN_UNDO_COMMAND,
                        (payload) => {
                            console.log(payload);
                            setCanUndo(payload);
                            return false;
                        },
                        COMMAND_PRIORITY_CRITICAL
                    ),
                    activeEditor.registerCommand<boolean>(
                        CAN_REDO_COMMAND,
                        (payload) => {
                            setCanRedo(payload);
                            return false;
                        },
                        COMMAND_PRIORITY_CRITICAL
                    )
                );
            }
        }, [activeEditor]);

        return (
            <Box {...{ ...props, ref }}>
                <IconButton
                    title={t('toolbar.undo', 'Undo ({{shortcut}})', {
                        shortcut: IS_APPLE ? '⌘Z' : 'Ctrl+Z'
                    })}
                    disabled={!canUndo}
                    onClick={() => activeEditor?.dispatchCommand(UNDO_COMMAND, undefined)}
                >
                    <UndoIcon />
                </IconButton>
                <IconButton
                    title={t('toolbar.redo', 'Redo ({{shortcut}})', {
                        shortcut: IS_APPLE ? '⌘Y' : 'Ctrl+Y'
                    })}
                    disabled={!canRedo}
                    onClick={() => activeEditor?.dispatchCommand(REDO_COMMAND, undefined)}
                >
                    <RedoIcon />
                </IconButton>
            </Box>
        );
    }
);

export default UndoRedoButtons;

Then this is how I implement it in MDXEditor component.

// ...
const plugins: RealmPlugin[] = [
    // ...
    toolbarPlugin({
        toolbarClassName: 'mdxeditor-toolbar',
        toolbarContents: () => (
            <>
                {' '}
                <UndoRedoButtons />
            </>
        ),
    ),
    // ...
]
// ...
return <MDXEditor plugins={plugins} />

The buttons are clickable and no error found. Also the title attributes can correctly shown as default UndoRedo button would do. However, the commands (CAN_REDO_COMMAND, CAN_UNDO_COMMAND, REDO_COMMAND, and UNDO_COMMAND) are not working. Am I missed something?

[Thor-x86]

Nevermind, the lexical package between my side (v0.22.1) and @mdx-editor/editor side (v0.17.1) are not match. To fix this, I just have to run this command.

pnpm remove lexical
pnpm add [email protected]

I think I need to pull request to expose the commands. So, any users who need to create a custom toolbar button don't need to check the version over and over again.