如何在 Monaco Editor 中添加打开下拉菜单的操作？

Question

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

Answer 1

如本期所述，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的接口请参考这里

如果你做对了，当你运行这个动作时，你应该得到和我一样的结果。