使用 RESTful Web 服务完成 Monaco 编辑器代码
Posted
技术标签:
【中文标题】使用 RESTful Web 服务完成 Monaco 编辑器代码【英文标题】:Monaco Editor Code Completion with RESTful Webservice 【发布时间】:2017-11-30 05:27:47 【问题描述】:我想为 Monaco Editor 0.8.3 实现一个自定义 CompletionItemProvider,即从 RESTful Web 服务获取完成建议。为此,我想使用 jQuery 3.2.1。
我已经实现了一个实现monaco.languages.CompletionItemProvider
接口的类。
由于对 Web 服务的调用是异步的,我不能直接从 provideCompletionItems()
方法返回 CompletionItem[]
。因此我想我必须返回一个monaco.Thenable<monaco.languages.CompletionItem[]>
-object。
不幸的是documentation regarding the use of Thenable
非常稀疏。我猜,monaco.Promise
类是Thenable
接口的一种默认实现。正如我找到one example using this class 一样,我试了一下...
这里是相关代码(下面是完整代码)
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
我不知道,现在该怎么办。任何帮助或提示表示赞赏。非常感谢!
【问题讨论】:
你确定你有对象而不是服务返回的 json 字符串吗?另外-我在完整方法中所做的是将结果分配给函数的全局变量,然后返回该变量。这似乎可行,尽管我前一段时间编写了代码,但对我来说似乎不正确(可能有竞争条件)。 【参考方案1】:对于仍在寻找答案的任何人,看起来provideCompletionItems
方法可以返回具有预期值的 Promise,而 Monaco 编辑器在完成框中显示 Loading...
,直到 promise 解决。
因此,特别是对于您的情况,只需返回一个 Promise,您可以在其中触发您对 Web 服务的请求。
此外,provideCompletionItems
方法应该返回一个带有 suggestions
属性的对象,其中包含您的完成数组。
return suggestions: [...]
【讨论】:
以上是关于使用 RESTful Web 服务完成 Monaco 编辑器代码的主要内容,如果未能解决你的问题,请参考以下文章
Spring Webflux 构建响应式 Restful Web 服务
Spring Webflux 构建响应式 Restful Web 服务
Spring Webflux 构建响应式 Restful Web 服务