Monaco Editor 如何从服务器加载 CompletionItems？

Question

我有一个 Angular 8 应用程序，其中嵌入了出色的 monaco 编辑器，用于进行一些公式编辑。 到目前为止它运行良好，但建议列表 = CompletionItems 需要动态更改。

我正在使用 ngx-monaco-editor 模块并在 app 模块中提供我的语言定义：

MonacoEditorModule.forRoot(MyMonacoLanguageConfig)

类似这样的配置：

const MonacoAirLanguageConfig: NgxMonacoEditorConfig = {
    onMonacoLoad: function () {
        monaco.languages.register({ id: 'myCoolLang' });
        monaco.languages.setLanguageConfiguration('myCoolLang', { ...});
        monaco.languages.registerCompletionItemProvider('myCoolLang', {
            provideCompletionItems: (model, position) => {
                return {
                    suggestions: [
                        {
                            label: 'ThisHasToBeReplaced',
                            kind: monaco.languages.CompletionItemKind.Function,
                            insertText: 'ThisHasToBeReplacedWithSomethingCool()',
                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
                        }]
                };
            }
        });
    }
};
export default MonacoAirLanguageConfig;

然后我在我的组件中使用 monaco 编辑器

    <ngx-monaco-editor [options]="editorOptions" (onInit)="initLanguage($event)"></ngx-monaco-editor>

我可以在 provideCompletionItems 中调用服务器，但我无法引用我的服务，也没有来自使用 monaco 编辑器的组件的上下文。 我试图在 onInit 事件中更改语言注册，但似乎为时已晚。

我迷路了。抱歉 :-/ 感谢您的帮助。

Answer 1

您似乎正在寻找语言服务器。如果我正确理解您的问题，您希望从服务器获取完成项。

你可以看看monaco-languageclient，这个 npm 包可以帮助你连接 Monaco 编辑器和语言服务器。还有一个用javascript写的language server example，如果你的后端服务器没有使用Node.js，我相信你也可以找到任何其他语言编写的摩纳哥语言服务器。补全逻辑是here，你可以自定义这个函数来返回你的补全项：

protected completion(params: TextDocumentPositionParams): Thenable<CompletionList | null> {
    const document = this.documents.get(params.textDocument.uri);
    if (!document) {
        return Promise.resolve(null);
    }
    const jsonDocument = this.getJSONDocument(document);
    return this.jsonService.doComplete(document, params.position, jsonDocument);
}

如果您正在寻找一个示例来展示如何将 Monaco 编辑器与语言服务器连接，我有一个存储库 angular-monaco-languageclient。希望对你有帮助。

Answer 2

解决方案/解决方法 我记录了我为实现异步获取完成项所做的工作。我很确定这不是故意的，如果我找到更好的方法或得到更好的答案，我会更新。

当 ngx 模块使用编辑器实例引发 onInit 事件时

(onInit)="initEditor($event)"

我为编辑器创建了一个模型，然后我调用服务器来获取完成项并将它们放入模型属性中。 当用户开始要求完成项时，将调用 provideCompletionItems，我从模型中获取完成项。

  initEditor(editor) {
    let editorModel = editor.getModel();
    <call webserver>
      .subscribe(completionItems => editorModel['completionItems'] = completionItems);

在语言设置中：

monaco.languages.registerCompletionItemProvider('air', {
    provideCompletionItems: (model, position) => {
        return {
            suggestions: model.completionItems
        };
    });