ngx-monaco-editor
ngx-monaco-editor copied to clipboard
Change monaco editor context menu labels
I use monaco-editor version 0.34.1, @materia-ui/ngx-monaco-editor version 6.0.0 with angular 14. I am trying to change context menu labels that exists by the original monaco initialize. This is my configuration to my custom language:
export function myMonacoLoad() { monaco.languages.register({ id: 'planit' });
// Brackets rules. const config: monaco.languages.LanguageConfiguration = {
// Allow square brackets to be part of a word if . is part of the word comletion not work.
wordPattern: /(-?\d*\.\d\w*)|([^\#\(\)\'\"\,\.]+)/g,
surroundingPairs: [{ open: '(', close: ')' }, { open: '"', close: '"' }],
autoClosingPairs: [{ open: '(', close: ')' }, { open: '"', close: '"' }],
brackets: [['(', ')']],
}; monaco.languages.setLanguageConfiguration('planit', config); monaco.editor.defineTheme('planitTheme', { base: 'vs', inherit: true, rules: [ { token: 'operator-type', foreground: '918100' }, { token: 'property', foreground: '003060' }, { token: 'calculation-constant', foreground: '238384' }, { token: 'comment', foreground: '369C41' }, { token: 'date', foreground: 'B04B04' }, { token: 'text', foreground: 'B04B04' }, { token: 'const', foreground: '0859a8' } ], colors: { 'editor.foreground': '#000000' } }); }`
then I add my custom actions like this: ` const colorPickerActopn = {
// An unique identifier of the contributed action. id: 'color-picker',
// A label of the action that will be presented to the user. label: 'Color Picker',
// A precondition for this action. precondition: null,
// A rule to evaluate on top of the precondition in order to dispatch the keybindings. keybindingContext: null,
contextMenuGroupId: '9_cutcopypaste',
contextMenuOrder: 7,
// Method that will be executed when the action is triggered. // @param editor The editor instance is passed in as a convenience. // Interface on monaco editor is ICodeEditor. run: this.monacoEditorService.colorPicker };
this.editor.addAction(colorPickerActopn);
const commentAction = { // An unique identifier of the contributed action. id: 'comment',
// A label of the action that will be presented to the user. label: 'Comment',
// An optional array of keybindings for the action. keybindings: [ monaco.KeyMod.CtrlCmd | monaco.KeyCode.Slash, ],
// A precondition for this action. precondition: null,
// A rule to evaluate on top of the precondition in order to dispatch the keybindings. keybindingContext: null,
contextMenuGroupId: '9_cutcopypaste',
contextMenuOrder: 8,
// Method that will be executed when the action is triggered. // @param editor The editor instance is passed in as a convenience. // Interface on monaco editor is ICodeEditor. run: this.monacoEditorService.commentRow }; this.editor.addAction(commentAction);
const hatchAction = { // An unique identifier of the contributed action. id: 'hatch',
// A label of the action that will be presented to the user. label: 'Hatch',
// A precondition for this action. precondition: null,
// A rule to evaluate on top of the precondition in order to dispatch the keybindings. keybindingContext: null,
contextMenuGroupId: '9_cutcopypaste',
contextMenuOrder: 6,
// Method that will be executed when the action is triggered. // @param editor The editor instance is passed in as a convenience. // Interface on monaco editor is ICodeEditor. run: this.monacoEditorService.hatchPicker }; this.editor.addAction(hatchAction); `
That is the menu result: enter image description here
I also tried to use import * as actions from 'monaco-editor/esm/vs/platform/actions/common/actions';
but no actions inside.
How can I change the menu items that not I entered(Need change the labels)?