在Monaco编辑器中的上下文菜单中禁用剪切和复制

Question

我正在使用monaco-editor，我看到剪切和复制在更高版本的上下文菜单中添加。我想从上下文菜单中删除这两个选项。请让我知道如何实现它？

Answer 1

您可以禁用上下文菜单：

每个问题只能隐藏剪切/复制

我在浏览器上的实时编辑中尝试了此选项，并且有效。

// Hide from cut on
.context-view li.action-item:nth-child(n + 9) {
    display: none !important;
}

// Show command palette
.context-view li.action-item:last-child {
  display: flex !important;
}

如果您想禁用整个菜单

monacoOPtions = {
  // other options
  contextmenu: false
}

请参见Docs

Answer 2

完整代码

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)

演练

您可以从 actions.js 内的 MenuRegistry 访问可用的菜单功能：

import * as actions from "monaco-editor/esm/vs/platform/actions/common/actions"
let menus = actions.MenuRegistry._menuItems

这将提供所有菜单类型的列表：即
["MenubarEditMenu", "CommandPalette", "EditorContext", ...]

要具体访问和修改上下文菜单，我们可以在菜单图中找到它：

let contextMenuEntry = [...menus].find(entry => entry[0]._debugName == "EditorContext")
let contextMenuLinks = contextMenuEntry[1]

菜单项属于 LinkedList 类型，其中每个 node 包含一个 element 以及对 prev 和 next 节点的引用，但它来自使用一些实用方法更容易推理。

所以如果你想列出所有命令，你可以这样做：

let allCommandIds = [...contextMenuLinks].map(el => el.command?.id)

使用它，确定要提前提取的命令列表 - 在我们的例子中：

let removableIds = [
  "editor.action.clipboardCopyAction",
  "editor.action.clipboardPasteAction",
]

接下来，我们需要识别并删除具有这些 id 的节点。迭代器返回 node.element，但 _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))
}

然后像这样调用：

removeById(contextMenuLinks, removableIds)

演示

进一步阅读

• Remove 'context menu' items (not CSS) #1567
• How can I customize context menu? I want to delete 'Go to definition' #1280
• How to hide the “Command Palette” item from the list of actions in Monaco Editor
• How do I remove options from the contextmenu for monaco-editor?

Answer 3

隐藏没有 CSS 的项目

以下内容对我有用，由 KyleMit 改编自 this answer，但对我来说并不适用。

import * as actions from 'monaco-editor/esm/vs/platform/actions/common/actions';

const idsToRemove = ['editor.action.clipboardCopyAction', 'editor.action.clipboardCutAction'];
actions.MenuRegistry._menuItems[1] = actions.MenuRegistry._menuItems[1]
        .filter(menuItem => !menuItem.command || !idsToRemove.includes(menuItem.command.id));