使用 RESTful Webservice 完成 Monaco 编辑器代码

Question

I would like to implement a custom CompletionItemProvider for Monaco Editor 0.8.3, that is fetching completion suggestions from a RESTful webservice. For this, I would like to use jQuery 3.2.1.

• I have implemented a class implementing the monaco.languages.CompletionItemProvider interface.
• As calls to the webservice are asynchronous, I cannot directly return CompletionItem[] from the provideCompletionItems() method. Hence I guess I have to return a monaco.Thenable<monaco.languages.CompletionItem[]> -object.
• Unfortunately documentation regarding the use of Thenable is very sparse . I guess, monaco.Promise class is kind of default implementation for the Thenable interface. As I have found one example using this class , I gave it a shot...

Here is the relevant code (below is the full code)

                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();
                });

And now the full code of the class

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 [];
        }
    }
}

Well, the webservice gets called properly and return the expected array with CompletionItems. I can see the console.log output. However, the call c(data) raises somewhere deep in the library the following error.

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

I have no clue, what to do now. Any help or hints are appreciated. Thank you so much!

Answer 1

For anyone still looking for an answer, it looks like the provideCompletionItems method can just return a Promise with the expected value, and Monaco editor shows Loading... in the completion box until the promise resolves.

So for your case in particular, just return a Promise inside of which you fire your request to the web service. Also, the provideCompletionItems method should return an object with a suggestions property with an array of your completions. return { suggestions: [...] }