4

我想为 Monaco Editor 0.8.3 实现一个自定义 CompletionItemProvider，即从 RESTful Web 服务获取完成建议。为此，我想使用 jQuery 3.2.1。

  • 我已经实现了一个实现monaco.languages.CompletionItemProvider接口的类。
  • 由于对 web 服务的调用是异步的，我不能直接CompletionItem[]从该provideCompletionItems()方法返回。因此我想我必须返回一个monaco.Thenable<monaco.languages.CompletionItem[]>-object。
  • 不幸的是，关于使用的文档Thenable非常稀少。我想，monaco.Promise类是Thenable接口的一种默认实现。当我找到 一个使用这个类的例子时，我试了一下......

这是相关代码（下面是完整代码）

                return new monaco.Promise<monaco.languages.CompletionItem[]>(function (c, e, p) {
                    req = $.getJSON("/codeeditorapi/objectcompletions/" + objAndProp[0]);
                    req.done(function (data) {
                        console.log("objectcompletions c(data) with " + data);
                        c(data);
                    });
                    req.fail((data) => e(data));
                }, function () {
                    req.abort();
                });

现在是类的完整代码

class MMSObjectModelCompletionProvider implements monaco.languages.CompletionItemProvider
{

    private PVAN:string = "v";//PlantVariableAccessor Name
    public provideCompletionItems(model: monaco.editor.IReadOnlyModel, position: monaco.Position, token: monaco.CancellationToken): monaco.Thenable<monaco.languages.CompletionItem[]> | monaco.languages.CompletionItem[]{
        var line = model.getValueInRange({ startLineNumber: position.lineNumber, startColumn: 1, endLineNumber: position.lineNumber, endColumn: position.column });
        let pos = line.lastIndexOf(this.PVAN+".");
        if (pos < 0 || line.length < pos + this.PVAN.length+1) //+1 for the dot behind
        {
            return [];
        }

        let objAndProp: string[] = line.substr(pos + this.PVAN.length + 1).split(".");
        let ret: monaco.languages.CompletionItem[];
        var req: JQueryXHR;
        switch (objAndProp.length)
        {
            case 3:
                //Only append the value
                return [
                {
                    label: "Value",
                    kind: monaco.languages.CompletionItemKind.Property,
                    detail: "Access Value of plant variable",
                },
                ];
            case 2:
                //objectname finished, search for property
                if (objAndProp[0].length == 0 || objAndProp[1].length == 0) return [];
                return new monaco.Promise<monaco.languages.CompletionItem[]>(function (c, e, p) {
                    req = $.getJSON("/codeeditorapi/propertycompletions/" + objAndProp[0] + "/" + objAndProp[1]);
                    req.done(function (data) {
                        console.log("propertycompletions c(data) with " + data);
                        c(data);
                    });
                    req.fail((data) => e(data));
                }, function () {
                    req.abort();
                });
            case 1:
                //search for object name
                if (objAndProp[0].length == 0) return [];
                return new monaco.Promise<monaco.languages.CompletionItem[]>(function (c, e, p) {
                    req = $.getJSON("/codeeditorapi/objectcompletions/" + objAndProp[0]);
                    req.done(function (data) {
                        console.log("objectcompletions c(data) with " + data);
                        c(data);
                    });
                    req.fail((data) => e(data));
                }, function () {
                    req.abort();
                });
            default: return [];
        }
    }
}

好吧，Web 服务被正确调用并返回带有 CompletionItems 的预期数组。我可以看到 console.log 输出。但是，该调用c(data)在库深处的某个地方引发了以下错误。

Uncaught Error: Cannot read property 'length' of undefined

TypeError: Cannot read property 'length' of undefined
at Object.S [as compareIgnoreCase] (http://localhost:58254/Scripts/monaco-editor-0.8.3/min/vs/editor/editor.main.js:33:4808)
at _ (http://localhost:58254/Scripts/monaco-editor-0.8.3/min/vs/editor/editor.main.js:74:21918)
at C (http://localhost:58254/Scripts/monaco-editor-0.8.3/min/vs/editor/editor.main.js:74:22403)
at Array.sort (native)
at http://localhost:58254/Scripts/monaco-editor-0.8.3/min/vs/editor/editor.main.js:74:21249
at Object.g [as _notify] (http://localhost:58254/Scripts/monaco-editor-0.8.3/min/vs/editor/editor.main.js:35:5529)
at Object.enter (http://localhost:58254/Scripts/monaco-editor-0.8.3/min/vs/editor/editor.main.js:35:9107)
at n.Class.derive._creator._run (http://localhost:58254/Scripts/monaco-editor-0.8.3/min/vs/editor/editor.main.js:35:10935)
at n.Class.derive._creator._completed (http://localhost:58254/Scripts/monaco-editor-0.8.3/min/vs/editor/editor.main.js:35:10376)
at n.Class.define.cancel.then (http://localhost:58254/Scripts/monaco-editor-0.8.3/min/vs/editor/editor.main.js:35:12368)
at Object.S [as compareIgnoreCase] (http://localhost:58254/Scripts/monaco-editor-0.8.3/min/vs/editor/editor.main.js:33:4808)
at _ (http://localhost:58254/Scripts/monaco-editor-0.8.3/min/vs/editor/editor.main.js:74:21918)
at C (http://localhost:58254/Scripts/monaco-editor-0.8.3/min/vs/editor/editor.main.js:74:22403)
at Array.sort (native)
at http://localhost:58254/Scripts/monaco-editor-0.8.3/min/vs/editor/editor.main.js:74:21249
at Object.g [as _notify] (http://localhost:58254/Scripts/monaco-editor-0.8.3/min/vs/editor/editor.main.js:35:5529)
at Object.enter (http://localhost:58254/Scripts/monaco-editor-0.8.3/min/vs/editor/editor.main.js:35:9107)
at n.Class.derive._creator._run (http://localhost:58254/Scripts/monaco-editor-0.8.3/min/vs/editor/editor.main.js:35:10935)
at n.Class.derive._creator._completed (http://localhost:58254/Scripts/monaco-editor-0.8.3/min/vs/editor/editor.main.js:35:10376)
at n.Class.define.cancel.then (http://localhost:58254/Scripts/monaco-editor-0.8.3/min/vs/editor/editor.main.js:35:12368)
at http://localhost:58254/Scripts/monaco-editor-0.8.3/min/vs/editor/editor.main.js:33:25360

我不知道，现在该怎么办。任何帮助或提示表示赞赏。太感谢了！

4

1 回答 1

0

对于仍在寻找答案的任何人，看起来该provideCompletionItems方法只能返回具有预期值的 Promise，并且 Monaco 编辑器会显示Loading...在完成框中，直到 Promise 解决。

因此，特别是对于您的情况，只需返回一个 Promise，您可以在其中触发您对 Web 服务的请求。此外，该provideCompletionItems方法应返回一个具有suggestions属性的对象，该属性包含您的完成数组。 return { suggestions: [...] }

于 2020-11-23T16:16:21.043 回答