I'm trying to integrate Monaco editor in my angular application. I have a custom action that I want to show in the context menu based on the line the user tries to open the context menu.
I'm able to achieve this in the plain javascript playground provided by the Monaco Editor.
var modifiedModel = monaco.editor.createModel("+just some text\nabcz\nzzzzefgh\n+Some more text.\n+This line is removed on the left.", "text/plain");
var diffEditor = monaco.editor.createDiffEditor(document.getElementById("container"), {
// You can optionally disable the resizing
enableSplitViewResizing: false
});
diffEditor.setModel({
original: originalModel,
modified: modifiedModel
});
var myleftCondition = diffEditor.getOriginalEditor().createContextKey(/*key name*/'myleftCondition', /*default value*/false);
var myrightCondition = diffEditor.getModifiedEditor().createContextKey(/*key name*/'myrightCondition', /*default value*/false);
// var contextmenu = diffEditor.getOriginalEditor().getContribution('editor.contrib.contextmenu');
// const realMethod = contextmenu.
diffEditor.getOriginalEditor().onContextMenu((e) => {
var content = diffEditor.getOriginalEditor().getModel().getLineContent(diffEditor.getOriginalEditor().getPosition().lineNumber);
console.log(diffEditor.getOriginalEditor().getModel().getLineContent(diffEditor.getOriginalEditor().getPosition().lineNumber));
if (content.startsWith('+')) myleftCondition.set(true);
else myleftCondition.set(false);
})
const contextmenu = diffEditor.getModifiedEditor().getContribution('editor.contrib.contextmenu');
const realMethod = contextmenu._onContextMenu;
contextmenu._onContextMenu = function() {
console.log('here I am, taking over');
var content = diffEditor.getModifiedEditor().getModel().getLineContent(diffEditor.getModifiedEditor().getPosition().lineNumber);
if (content.startsWith('+')) {
myrightCondition.set(true);
}
else { myrightCondition.set(false); }
realMethod.apply(contextmenu, arguments);
};
diffEditor.getOriginalEditor().addAction({
// An unique identifier of the contributed action.
id: 'my-unique-id',
// A label of the action that will be presented to the user.
label: 'My Label!!!',
// An optional array of keybindings for the action.
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10,
// chord
monaco.KeyMod.chord(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_K, monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_M)
],
// A precondition for this action.
precondition: 'myleftCondition',
// A rule to evaluate on top of the precondition in order to dispatch the keybindings.
keybindingContext: 'myleftCondition',
contextMenuGroupId: 'navigation',
contextMenuOrder: 1.5,
// Method that will be executed when the action is triggered.
// @param editor The editor instance is passed in as a convinience
run: function (ed) {
alert("i'm running => " + ed.getPosition());
return null;
}
});
diffEditor.getModifiedEditor().addAction({
// An unique identifier of the contributed action.
id: 'my-unique-id2',
// A label of the action that will be presented to the user.
label: 'My right!!!',
// An optional array of keybindings for the action.
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10,
// chord
monaco.KeyMod.chord(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_K, monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_M)
],
// A precondition for this action.
precondition: 'myrightCondition',
// A rule to evaluate on top of the precondition in order to dispatch the keybindings.
keybindingContext: 'myrightCondition',
contextMenuGroupId: 'navigation',
contextMenuOrder: 1.5,
// Method that will be executed when the action is triggered.
// @param editor The editor instance is passed in as a convinience
run: function (ed) {
alert("i'm running => " + ed.getPosition());
return null;
}
});
I came up with the above code from here
It is failing at apply function in angular.
