关于react.js:使用monacoeditorregisterCompletionItemProvider多次注册最终导致展示的提示内容重复

最近我的项目实现一个提醒性能,输出某个符号,展现匹配的内容,和代码提醒性能相似。最终抉择了monaco-editor,微软开发的js库,vscode也是基于这个库开发的。

在开发过程中,遇到些问题,因为文档不是很敌对,花了半天才解决问题。上面次要记录一下问题以及解决办法,心愿当前遇到这些问题的童鞋能疾速避坑。

遇到的问题以及解决办法

问题:

在Antd Modal中应用monaco-editor,显示Modal后敞开Modal,再次关上Modal,monaco-editor的提醒内容就会反复,显示几次Modal,对应的内容就会反复几次,如下图:

解决办法

思路1:
通过调试发现,registerCompletionItemProvider办法屡次执行,首先猜到的可能是插件屡次创立,没有销毁造成的,查阅对应的文档后,发现有插件提供了一个销毁的办法:

monaco.editor.dispose()

于是,尝试在组件销毁之前调用下面的办法,然而运行后发现并不失效,上述问题仍旧存在,此法不通~

思路2:
既然registerCompletionItemProvider屡次执行,那么给组件中增加一个全局的计数器count,组件注册一次后执行一次count+1,只有当count===0时,才走对应的插件注册逻辑,否则间接取缓存的数据。局部代码片段如下:

 let count = 0;
      monaco.languages.registerCompletionItemProvider(languageName, {
        triggerCharacters: ['['],
        provideCompletionItems: function (model, position, context) {
          count=count+1;
          if(count===1){
            let suggestions = [];
            if (context.triggerCharacter === '[') {
              [...dimensions, ...modules].forEach((item, index) => {
                suggestions.push({
                  label: item.customName,
                  insertText: `${item.customName}]`,
                  kind: 12,
                });
              });
            }
            return { suggestions };
          }
        },
      });

这种形式简略粗犷,如果须要插件提醒的内容是固定的,间接用缓存的数据是能够解决这个问题。然而!!!我遇到的需要是,提醒的内容是依据接口动静取的。所以,此法仍旧不通~

思路3:
因为谷歌和百度都没用找到称心的答案,于是去monaco-editorGitHubissues中查找答案,刚开始依据registerCompletionItemProvider关键字搜寻,然而并没有相似的问题,而后又尝试搜寻provideCompletionItems关键词,最终在issues中找到了2个相似的问题,链接如下:

https://github.com/microsoft/monaco-editor/issues/2217

https://github.com/microsoft/monaco-editor/issues/2084

最终解决办法:
registerCompletionItemProvider注册创立时,将创立的对象存储起来,如下:

 monacoProviderRef.current = monaco.languages.registerCompletionItemProvider(languageName, {

在组件销毁时,将editorregisterCompletionItemProvider生成的对象一起销毁。代码如下:

useEffect(() => {
      // todo
      // xxxxxx
      return () => {
        // 销毁
        monacoProviderRef.current?.dispose();
        monacoRef.current?.dispose();
        
      };
    }, []);

最初测试,bug完满解决!

问题:

设置editor的默认主题,然而Modal第一次展现时,默认主题没有失效,第一次之后主题才会失效,如下图:

设置默认主题代码如下:

monaco.editor.defineTheme('myCoolTheme', {
        base: 'vs',
        inherit: false,
        colors: { token: 'value', foreground: '#00c1de' },
        rules: [{ token: 'value', foreground: '#00c1de' }],
      });

解决办法

去官网文档中找设置主题的api,发现以上代码是对主题的定义操作,如果要首次运行失效,还须要手动设置一次下面对应定义的主题

monaco.editor.setTheme('myCoolTheme');

最终,问题解决,成果如下:

愿天下没有难解的bug!祝大家中秋节高兴!!!

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年50元

阿里云限时活动-2核2G-5M带宽-60G SSD-1000G月流量 ,特惠价99元/年(原价1234.2元/年,可以直接买3年),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

You may also like...

发表评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据