javascript 在monaco-editor中是否有从建议列表中选择选项的事件?

amrnrhlw  于 2023-05-27  发布在  Java
关注(0)|答案(1)|浏览(134)

我需要响应用户选择来自registerCompletionProvider的任何建议项。我似乎找不到任何官方文件中提到的这样的事件。Monaco-编辑器版本-0.17.1

but5z9lq

but5z9lq1#

有一种方法可以做到这一点,注册一个command,然后通过CompletionItem上的command属性调用它。
您可以注册操作(定义一个回调函数,在选择该项时执行该函数):

// Register the callback function as a command
var commandId = editor.addCommand(
    -1,
    function (_, ...args) {
        // Callback that will be executed when the user selects option
        console.log('user selected:', args);
    },
    ""
);

然后按照正常方式配置completionProvider

function createDependencyProposals(range) {
    // returning a static list of proposals, not even looking at the prefix (filtering is done by the Monaco editor),
    // here you could do a server side lookup
    return [
        {
            label: 'item 1',
            kind: monaco.languages.CompletionItemKind.Function,
            documentation: "This is item 1.",
            insertText: 'item 1',
            range: range,
            command: {
                id: commandId, // ID of the command of the callback function
                title: "commandTitle",
                arguments: ['item 1']
            }
        },
        {
            label: 'item 2',
            kind: monaco.languages.CompletionItemKind.Function,
            documentation: "This is item 2.",
            insertText: 'item 2',
            range: range,
            command: {
                id: commandId, // ID of the command of the callback function
                title: "commandTitle",
                arguments: ['item 2']
            }
        },
    ];
}

monaco.languages.registerCompletionItemProvider("json", {
    provideCompletionItems: function (model, position) {
        var word = model.getWordUntilPosition(position);
        var range = {
            startLineNumber: position.lineNumber,
            endLineNumber: position.lineNumber,
            startColumn: word.startColumn,
            endColumn: word.endColumn,
        };
        return {
            suggestions: createDependencyProposals(range),
        };
    },
});

这里要注意的重要一点是,每个完成项定义了一个command属性:

command: {
    id: commandId, // ID of the command of the callback function
    title: "commandTitle",
    arguments: ['item 2']
}

id是您注册的命令的ID,该命令包含您希望在用户选择建议时执行的回调函数。arguments可以是任何你想要的,但是你可能需要传递一些东西来表明他们选择了哪个建议,否则你将无法在回调函数中告诉。
有一个工作演示(演示使用您在问题0.17.1中提到的相同版本,但也应该适用于Monaco的后续版本)。如果打开开发人员工具的控制台选项卡,然后键入字母i并选择一个选项,您应该会看到类似于以下内容的内容记录到控制台:
用户选择:[“项目1”]

相关问题