I am using monaco-editor, i see that cut and copy is added in the context menu in later versions. i want to remove these two options from context menu. Please let me know how can i achieve it?
Full Code
import * as actions from "monaco-editor/esm/vs/platform/actions/common/actions";
let menus = actions.MenuRegistry._menuItems
let contextMenuEntry = [...menus].find(entry => entry[0]._debugName == "EditorContext")
let contextMenuLinks = contextMenuEntry[1]
let removableIds = ["editor.action.clipboardCopyAction", "editor.action.clipboardPasteAction"]
let removeById = (list, ids) => {
let node = list._first
do {
let shouldRemove = ids.includes(node.element?.command?.id)
if (shouldRemove) { list._remove(node) }
} while ((node = node.next))
}
removeById(contextMenuLinks, removableIds)
Walkthrough
You can access the available menu functions from MenuRegistry
inside actions.js
:
import * as actions from "monaco-editor/esm/vs/platform/actions/common/actions"
let menus = actions.MenuRegistry._menuItems
This will provide a list of all menu types: i.e.
["MenubarEditMenu", "CommandPalette", "EditorContext", ...]
To access and modify the context menu specifically, we can find it in the menu map:
let contextMenuEntry = [...menus].find(entry => entry[0]._debugName == "EditorContext")
let contextMenuLinks = contextMenuEntry[1]
The menu items are of type LinkedList
, where each node
contains an element
and a reference to the prev
and next
node, but it comes with some utility methods that make it easier to reason about.
So if you want to list all commands, you can do this:
let allCommandIds = [...contextMenuLinks].map(el => el.command?.id)
Using that, identify the list of commands you want to pluck out ahead of time - in our case:
let removableIds = [
"editor.action.clipboardCopyAction",
"editor.action.clipboardPasteAction",
]
Next we need to identify and remove the nodes with those ids. The iterator returns the <code>node.<b>element</b></code>, but the _remove()
function takes in the entire node, so we'll have to iterate a little different than before. Here's a function that loops through all nodes and removes each if
We'll then get all the nodes we want to remove:
let removeById = (list, ids) => {
let node = list._first;
do {
let shouldRemove = ids.includes(node.element?.command?.id)
if (shouldRemove) { list._remove(node) }
} while ((node = node.next))
}
And then call like this:
removeById(contextMenuLinks, removableIds)