opensumi中如何在自定义的react界面中使用monaco编辑器？

[hanbingzi]

我自己做了一个界面，然后希望在界面的一部分使用monaco编辑器展示数据（如下红色框内用于展示数据），应该如何使用opensumi现有的service来把数据渲染出来？

[life2015]

你可以尝试使用 EditorCollectionService 来创建monaco Editor。

// 导包
import { EditorCollectionService } from '@opensumi/ide-editor';

// 拿到EditorCollectionService的实例
  const editorCollectionService: EditorCollectionService = useInjectable(EditorCollectionService);

// 初始化monacoEditor 这块要注意在React那边管控好生命周期 避免多次创建editor导致踩坑
      const editor2 = editorCollectionService.createCodeEditor(editorHtmlRef.current, {
        value: '',
        automaticLayout: true,
        readOnly: true,
        minimap: {
          enabled: false,
        },
      });

      setTimeout(() => {
        editor2.layout();
      }, 0);

// 此处需要手动createModel
      const model = monaco.editor.createModel('', 'log');
      editor2.monacoEditor.setModel(model);

[life2015]

以及一些monaco包的导入，因为本身做Opensumi模块开发的时候，Opensumi会自带monaco的依赖。因此可以这样导包：

import * as monaco from '@opensumi/monaco-editor-core/esm/vs/editor/editor.api';
import type { IStandaloneCodeEditor } from '@opensumi/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneCodeEditor';

[life2015]

直接使用 monaco.createEditor 可能会导致一些monaco全局共享状态的错乱，以及一些textmate服务也没法在自定义编辑器上用到。因此用editorCollectionService.createCodeEditor会更方便些。

不过editorCollectionService.createCodeEditor这个本身也不算是我们在文档中固定对外的api，这个做法更像是通过代码去调用Opensumi创建Editor过程中的一些核心服务。

[hanbingzi]

谢谢，我尝试一下，我本身对 monaco不是很熟，在网上也没找到一些相关的学习资料，请问你们有一些网址或资料能让我学习一下吗，以便更快速的实现我的功能。

[life2015]

推荐查看 官方的MonacoPlayground： https://microsoft.github.io/monaco-editor/playground.html?source=v0.36.1#example-creating-the-editor-hello-world

或者可以问问 ChatGPT 也可以获得不错的答案

[life2015]

多半因为 json language service 没有给 inmemory 协议注册 ls

[life2015]

[erha19]

这里是不是修改一下插件，把插件处理的 schema 加上 inmemory 就行了？

[life2015]

可能不太行，我翻阅了一下源码，大概是因为自定义的Editor用到的document没有打到插件使用的ExtensionDocumentDataManager里面，所以语言服务插件是拿不到这个Document的。
需要再深入阅读下源码，找个办法把自定义EditorComponent的Document和OpenSum原有的这套EditorDocument打通。

[life2015]

这里的管理是通过在OpenSum自带编辑器的各个生命周期里面发送Event来同步编辑器和插件Host那边的Document的。
比如说在编辑器打开uri的时候会发送一个事件，携带了model的uri，text等信息。
参考代码：

core/packages/editor/src/browser/doc-model/editor-document-model-service.ts

Line 86 in 230e6c7

new EditorDocumentModelCreationEvent({

在Monaco Editor 中，使用createModel创建的model，都可以通过uri字段拿到这个model的uri，如果是内存中model，获取到的就是 inmemory://model/xxx 这种uri，可以尝试自己发送一个事件来让这个逻辑跑起来，让插件进程那边拿到这个Document。不过这个目前是理论可行，我还没有做测试，这几天我会再深入看下，后面会统一落到samples里面供参考。

如果不是强依赖内存Model，也可以看看下面的IEditorDocumentModelContentProvider 的方案

[MMhunter]

可以使用 CodeEditor 组件, 不过这样不能直接使用 monaco 的 model，需要参照 opensumi 标准的向 documentModel 的注册 provider，通过 uri 来获取内容的

import { CodeEditor } from '@opensumi/ide-editor/lib/browser';

() => {

   return <CodeEditor style={{"height": "500px"}} uri={URI.parse('custom-scheme:/path/something')}/>

}

CodeEditor 组件源码 ref: https://github.com/opensumi/core/blob/main/packages/editor/src/browser/view/editor.react.tsx

[hanbingzi]

你好，麻烦问下，我的数据是通过服务端获取展示的，不是通过文件打开的，也能使用这种方式展示数据？

[MMhunter]

大概是这样的代码示例来注册 custom-shceme:///any/thing/you/want 的文档内容

import { ClientAppContribution, Domain, Emitter, IDisposable, MaybePromise, URI } from "@opensumi/ide-core-browser";
import { IEditorDocumentModelContentRegistry } from "@opensumi/ide-editor/lib/browser/index";
import { Autowired} from '@opensumi/di';


@Domain(ClientAppContribution)
export class ExampleContribution implements ClientAppContribution {

  @Autowired(IEditorDocumentModelContentRegistry)
  private readonly contentRegistry: IEditorDocumentModelContentRegistry;

  onStart() {

    const dataChangeEmitter = new Emitter<URI>();

    this.contentRegistry.registerEditorDocumentModelContentProvider({
      handlesScheme: (scheme) => {
        return scheme === 'custom-scheme';
      },
      provideEditorDocumentModelContent: async (uri) => {
        // 这里从服务器拿数据
        const data = await fetchSomeDataFromServer(uri.toString());
        return data;
      },
      preferLanguageForUri: (uri) => {
        return 'json';
      },
      isReadonly: function (uri: URI): MaybePromise<boolean> {
        // 返回 true 禁止用户编辑
        return true;
      },
      onDidChangeContent: dataChangeEmitter.event,
    })

  }

  // 当服务器告诉你要更新数据，这个时候要通知编辑器需要更新
  WhenServerTellsYouDataNeedToBeUpdated((someUriNeedToBeUpdate: URI) =>{
    dataChangeEmitter.fire(someUriNeedToBeUpdate);
  });

}

注册完以后就可以在这个组件内显示内容

<CodeEditor style={{"height": "500px"}} uri={URI.parse('custom-scheme:///path/something')}/>

[hanbingzi]

你好，您提供的这个方法我已经测试过，可以正常展示数据，但有几个问题

1. CodeEditor组件会在多个地方使用，每个地方展示的数据不同，如果采用你这种方式，一处的数据刷新，会导致其他地方数据也跟着刷新。
2. 假如数据进行了编辑，如何才能获取编辑的数据结果？

[erha19]

@hanbingzi 有个简单点的思路，不同地方的编辑器组件，可以考虑使用不同的，按照一定规则拼写的 scheme 去处理？

[life2015]

你好，您提供的这个方法我已经测试过，可以正常展示数据，但有几个问题

1. CodeEditor组件会在多个地方使用，每个地方展示的数据不同，如果采用你这种方式，一处的数据刷新，会导致其他地方数据也跟着刷新。
2. 假如数据进行了编辑，如何才能获取编辑的数据结果？

第一个问题，可以在 provideEditorDocumentModelContent 方法中，对于不同地方的编辑器使用不同的uri做区分，避免数据的相互干扰。第二个问题，可以在实现 IEditorDocumentModelContentProvider 的时候同时实现，saveDocumentModel 的方法，这里我会出一个sample来，预计这两天提交代码。

[life2015]

参考一下我最近写的这个Samples，看看能否解答你的疑问
https://github.com/opensumi/opensumi-module-samples/pull/24/files

[life2015]

@hanbingzi

[hanbingzi]

谢谢，可以正常使用