Hotkey command work in last editor on page only

[ErBlack]

Describe the bug We use a form with three monaco editors in one page. They have a different name props

// name is 'option', 'question', 'answer'
// handleMount used to add command
                <Editor
                    path={name}
                    defaultPath={name}
                    onMount={handleMount}
                    options={codeEditorOptions}
                    {...props}
                />

list of options

{
    unicodeHighlight: { ambiguousCharacters: false },
    automaticLayout: true,
    scrollBeyondLastLine: false,
    showFoldingControls: 'never',
    wordWrap: 'on',
    minimap: {
        enabled: false,
    },
    overviewRulerBorder: false,
    overviewRulerLanes: 0,
    hideCursorInOverviewRuler: true,
    padding: {
        top: codeEditorPadding,
        bottom: codeEditorPadding,
    },
    lineNumbersMinChars: 3,
    renderLineHighlightOnlyWhenFocus: true,
    scrollbar: {
        alwaysConsumeMouseWheel: false,
    },
}

Add command code

export interface MarkdownEditorBoldCommandProps  {
    editor: monaco.editor.IStandaloneCodeEditor | null;
}

const formatter = (text?: string) => `**${text}**`;
const keyBindings = KeyMod.CtrlCmd | KeyCode.KeyB;
const command = (editor: monaco.editor.IStandaloneCodeEditor | null) => executeCommand(editor, formatter);

export const MarkdownEditorBoldCommand: FC<MarkdownEditorBoldCommandProps> = ({ editor }) => {
    useEffect(() => {
        if (editor) {
            editor.addCommand(keyBindings, () => {
                command(editor);
            });
        }
    }, [editor]);

    return (
        <button
            onClick={() => command(editor)}
        >B</button>
    );
};

To Reproduce

Steps to reproduce the behavior:

1. Render three editors on page
2. Select text in first one
3. Press Ctrl/Command + B
4. **** will be inserted in last editor on page

Code sandbox

Expected behavior Command will be executed in focused editor

[suren-atoyan]

Your CodeEditor component should look like this:

export function CodeEditor({ name }) {
  const handleMount = useCallback((editor) => {
    editor.addAction({
      keybindings: [2080],
      run: command,
      label: "test",
      id: name,
    });
  }, []);

  return <Editor className="Editor" path={name} onMount={handleMount} />;
}

[qhh001]

@suren-atoyan how to remove the already addAction . How to rename an already displayed context menu or redefine an existing context menu。 How to delete an action that has already been defined using addAction. I need to define different context menus based on different languages.