如何在摩纳哥编辑器中添加打开下拉菜单的操作？

我知道如何在 Monaco 编辑器的上下文菜单中添加条目，editor.addAction。如何添加打开下拉列表的操作作为“命令面板”操作？

正如中提到的这个问题 https://github.com/Microsoft/monaco-editor/issues/683，monaco-editor 中尚未实现快速打开 api。但经过一系列深入研究，我找到了一个有点黑客的解决方案。

首先，您需要导入IQuickInputService像下面这样。

import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js';
import { IQuickInputService } from 'monaco-editor/esm/vs/platform/quickinput/common/quickInput';

然后，创建我们的编辑器。

// Create your editor instance...
let editor = monaco.editor.create(
  // ...
);

// Add a new command, for getting an accessor.
let quickInputCommand = editor.addCommand(0, (accessor, func) => {
  // a hacker way to get the input service
  let quickInputService = accessor.get(IQuickInputService)
  func(quickInputService)
});

最后，作为一个例子，我们可以添加一个动作。

editor.addAction({
    id: "myQuickInput",
    label: "Test Quick Input",
    run: (editor) => {
         // create quick input
         editor.trigger("", quickInputCommand, (quickInput) => {
             quickInput.pick([
                {
                    type: 'item',
                    id: "my_quick_item",
                    label: "MyQuickItem",
                },
                {
                    type: 'item',
                    id: "my_quick_item2",
                    label: "MyQuickItem2",
                },
                {
                    type: 'item',
                    id: "my_quick_item3",
                    label: "MyQuickItem3",
                },
             ]).then((selected) => {
                console.log(selected)
             })
         })
    }
})

IQuickInputService的接口请参考这里here https://github.com/opensumi/monaco-editor-core/blob/81b6e48d521218b421b8e28626da4931d38f84bc/src/vs/platform/quickinput/common/quickInput.ts

如果你做得正确，当你运行该操作时，你应该得到与我相同的结果。