react中Monaco Editor编辑器的自定义提示

背景

monaco editor本身有react版本https://github.com/react-monaco-editor/react-monaco-editor，可以直接使用，满足一般的编辑需求。我在业务中需要使用自定义提示的功能，主要参考了这篇文章，自定义提示需要用monaco.languages.registerCompletionItemProvider注册，但我注册了提示性，并使用editor.trigger('提示', 'editor.action.triggerSuggest', {});这句话触发提示项，却没有得到预想的效果，而一直是一个空的提示框。
主要语句为：

//提示项设值
monaco.languages.registerCompletionItemProvider('sql', {
      provideCompletionItems: () => {
         return [{
             label: '显示的提示名称',
             kind: monaco.languages.CompletionItemKind[‘Function’], //这里Function也可以是别的值，主要用来显示不同的图标
             insertText: '选择后粘贴到编辑器中的文字' // 此项没有的话，默认是label值
          }];
      }
});
@Watch('hints')
triggerSuggest(newVal) {
// 当提示项非空时，触发提示，能够使提示项更新并显示
if (newVal.length > 0)
    this.monacoEditor.trigger('提示', 'editor.action.triggerSuggest', {});
}

解决思路

1. 查官方文档

官方文档提供了在线的例子，其中有一个例子是关于自定义提示的。在这里例子中，发现了两个不同点：
1. 并没有使用this.monacoEditor.trigger这句话去触发提示
2. provideCompletionItems函数返回的不直接是提示的数组，而是suggestions对象
因此，我按照这两点进行了修改，但结果依然是空的提示框。

2. 排除monaco-editor-webpack-plugin的影响

由于我使用了react-monaco-editor，相关的文档说如果不显示提示项或者没有高亮，确保是否正确使用了monaco-editor-webpack-plugin这个插件。
于是我查了monaco-editor-webpack-plugin的文档，默认是开启了所有支持的语言的，所以应该跟这个插件无关。
为了进一步支持我的推断，我参考此文，在vue中使用monaco-editor和monaco-editor-webpack-plugin进行了尝试，结果证明vue中是可以显示提示项的。

3. 真相只有一个，react-monaco-editor的问题

排除了其他可能性后，问题就锁定在react-monaco-editor本身了。发现react-monaco-editor是这样引用monaco-editor的：

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

而对比上一步中vue的demo，发现vue中是这样引用的：

import * as monaco from 'monaco-editor';

我把react中的引用方式修改后，顺利的出现了自定义的提示框。分析原因，应该是原来react中的引用方式，只引入了编辑器的核心api，不包括其他的功能。

4. 实现输入某特殊字符后触发提示

之前一直以为要手动找地方执行trigger语句，所以在用户改变输入并且输入的字符为特定字符后执行了trigger语句，后来发现这句话是没有用的。后来在寻找方案的过程中发现了这个issue（这个issue讨论了更高级的触发方式，后续如果使用到，方便查阅），知道了有字符触发这个配置，作为registerCompletionItemProvider的一个配置项，

monaco.languages.registerCompletionItemProvider('plaintext', {
    provideCompletionItems() {
      return {
         suggestions: suggestions
          };
        },
        triggerCharacters: [':']  // 写触发提示的字符，可以有多个
      });

注意点：
suggestions的格式为

[{
     label: '显示的提示名称',
     kind: monaco.languages.CompletionItemKind[‘Function’], //这里Function也可以是别的值，主要用来显示不同的图标
     insertText: '选择后粘贴到编辑器中的文字', // 我试了一下，如果没有此项，则无法插入
     detail: '任何文字提示'
}]

5. 禁止默认的智能提示

完成上一步后，当输入:时可以就会出现自定义的智能提示了，但是当输入提示项中的第一个字符时，编辑器也会自动提示，我们需要把这个默认的功能禁用掉。

quickSuggestions: false, // 默认的提示关掉

6. 样式相关

项目中，我的编辑器整体宽度较小，而提示项的宽度较大，导致提示框的一部分被覆盖。查了一下issues，没有直接把提示框限定在编辑器范围内的配置项。但有一个相关的配置项，设置为true后，可以把隐藏的部分显示出来。

fixedOverflowWidgets: true, // 超出编辑器大小的使用fixed属性显示

然后，通过css修改提示框的宽度，有点hack地将提示框合理地展示在了编辑器内

.monaco-editor .suggest-widget {
  width: 200px;
}

总结

1. 多看文档

很多配置我在查遍了issue后才恍然大悟，其实文档里都写了，只是当时不知道啥意思，就没注意，绕了一圈又回到文档里来了（PS: 可能我不太习惯这个文档，明明很全，但总觉得看不懂。。）

2. 勤于测试

有时候网上的内容可能是在以前版本中有效的，但是版本更新后，配置项改了，所以不一定生效，要自己测试一把（包括本文的配置，可能过两天就没用了，但这个解决问题的思路可以借鉴）

后续还要用monaco editor来搞sql语句编辑器。以此文章作为记录，方便大家和自己查阅。
github上的demo

效果如图：

domo.gif