How can I customize context menu? I want to delete 'Go to definition' and others,and add my own meun.

[sighWang]

I have use addAction add 'add Commont', and I don't want others.How can I do?

[alexdima]

We don't offer API to accomplish this. You could reach into the menu registrations and remove them require('vs/platform/actions/common/actions').MenuRegistry._menuItems

[softmarshmallow]

searching "monaco editor customize context menu" brought me here. I'm aware this is not the right place, but can you share how you added "Add comment"? kindly share us some code :)

Thanks!

[spahnke]

See https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-adding-an-action-to-an-editor-instance

[AlexandreAtErgosign]

See https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-adding-an-action-to-an-editor-instance

The example is good. Is there a way to display which group are used in the context menu? From the doc:

The context menu of the editor has these default:

• navigation - The navigation group comes first in all cases.
• 1_modification - This group comes next and contains commands that modify your code.
• 9_cutcopypaste - The last default group with the basic editing commands.

Is there a way to find the other context menu group such as the command palette group?

[codebykat]

Since #1567 is locked, and this took me absolute AGES to figure out, I wanted to share the latest workaround for removing unwanted context menu items. I didn't like the CSS hack, it seemed too fragile and I didn't know what other effects disabling the shadow DOM might have. But none of the previous hacks worked. Instead I found a solution involving monkey-patching the internals of the context menu, as suggested here:

  const removableIds = [ 'editor.action.changeAll', 'editor.action.quickCommand' ];
  const contextmenu = this.editor.getContribution('editor.contrib.contextmenu');
  const realMethod = contextmenu._getMenuActions;
  contextmenu._getMenuActions = function() {
    const items = realMethod.apply(contextmenu, arguments);
    return items.filter(function(item) {
      return ! removableIds.includes(item.id);
    });
  };

Unfortunately it does run on every click of the context menu, but c'est la vie... hope this helps someone else.

[konard]

Thanks to @codebykat, I have ended up using this code, it removes all context menu items except copy. Which is useful for read only mode.

import MonacoEditor from '@monaco-editor/react';

...

<MonacoEditor
  height={editorHeight}
  language={language}
  theme={monacoTheme}
  value={code}
  options={{
    readOnly: true,
    minimap: { enabled: false },
    scrollBeyondLastLine: false,
    lineNumbers: "off",
    scrollbar: { vertical: 'hidden' },
    overviewRulerLanes: 0,       // Disable the overview ruler
    hideCursorInOverviewRuler: true,  // Hide cursor in the ruler
    folding: false,               // Disable code folding
    glyphMargin: false,           // Hide the glyph margin (left margin with icons)
  }}
  onMount={(editor, monaco) => {
    const keepIds = ["editor.action.clipboardCopyAction"];
    const contextmenu = editor.getContribution('editor.contrib.contextmenu');
    const realMethod = contextmenu._getMenuActions;
    contextmenu._getMenuActions = function () {
      const items = realMethod.apply(contextmenu, arguments);
      return items.filter(function (item) {
        return keepIds.includes(item.id);
      });
    };
  }}
/>