[RFC] 卸载后重新渲染 Monaco 编辑器优化

[AhkunTa]

背景

OpenSumi 内使用 Monaco 编辑器作为基础编辑器，但 Monaco 编辑器为全局单例并且只能这样引入，初始化时 OpenSumi 会 override Monaco 内部的各个功能点如:

• MonacoBulkEditService
• MonacoCodeService
• MonacoCommandService
• ScopedContextKeyService
• MonacoContextViewService
• OpenerService
• MonacoTextModelService

当作为组件嵌入页面时会存在组件销毁重新渲染，当重新渲染组件时 Monaco 内部并不会更新新的 override 的注入， 只会初始化一次相关代码

这就会导致重新渲染后，再次编辑内部编辑器表现出各种问题 快捷键，交互，命令等。

解决方案

1.修改 Monaco

不推荐改动，整体 Monaco 内部交互复杂，并且 Monaco 每次升级会伴随新的 break changes，会导致升级新版 Monaco 越来越困难

2.涉及的模块相应改造

打算将 Monaco 初始化 override 的模块改造为全局单例并且在销毁后 proxy 到最新的 injector 动态实例上，从而使用新的动态实例

改造清单

• 对应 override 的各个模块
• ...

测试范围

待补充

[erha19]

@AhkunTa 跟 Monaco 注册相关的问题还有这里的

• [RFC] 改进框架当前的本地化 API 能力 #2409

由于我们框架内的 Monaco 是在渲染阶段去引入并初始化的，会导致渲染时机过早而无法正确完成首次语言配置的识别，最终导致需要用户手动 setLocale 或首次语言配置不生效的问题。

因为这层逻辑，我们还在 opensumi/monaco-editor-core 内追加了读取 localStorage 语言配置的逻辑，这也是不合理的，可以一起看一下，这里是不是可以将 monaco 的加载/卸载逻辑一起做控制？

[AhkunTa]

主要问题

OpenSumi 内部注册 OpenSumiContextKeyService 来 override monaco 内部的 MonacoContextKeyService

core/packages/editor/src/browser/editor.contribution.ts

Lines 191 to 215 in 9a1e368

	registerOverrideService(registry: MonacoOverrideServiceRegistry): void {
	const codeEditorService = this.injector.get(MonacoCodeService);
	// Monaco Editor ContextKeyService
	// 经过这个Override, 所有编辑器的 contextKeyService 都是 editorContextKeyService 的孩子
	const globalContextKeyService: IContextKeyService = this.injector.get(IContextKeyService);
	const editorContextKeyService = globalContextKeyService.createScoped();
	this.workbenchEditorService.setEditorContextKeyService(editorContextKeyService);
	registry.registerOverrideService(
	ServiceNames.CONTEXT_KEY_SERVICE,
	(editorContextKeyService as any).contextKeyService,
	);
	// Monaco CodeEditorService
	registry.registerOverrideService(ServiceNames.CODE_EDITOR_SERVICE, codeEditorService);
	// Monaco ContextViewService
	registry.registerOverrideService(
	ServiceNames.CONTEXT_VIEW_SERVICE,
	new MonacoContextViewService(codeEditorService),
	);
	// Monaco TextModelService
	registry.registerOverrideService(ServiceNames.TEXT_MODEL_SERVICE, this.injector.get(MonacoTextModelService));
	}

而在 dispose 后重新渲染组件, OpenSumiContextKeyService 会在 OpenSumi 内重新实例化生成（内部的 contextId 从0开始生成）

但在 monaco 内部的 MonacoContextKeyService 在 dispose 会继续保存 （monaco只会实例化一次）

此时在opensumi 和 monaco 存在两个 ContextKeyService, 而 monaco 内部的一些 keybinding ,都会在 monaco 内寻找其对应的contextId ,通过在元素上寻找字符串 data-keybinding-context

如下图 寻找不到 37 的 contextId

解决方法

1.全局单例 ContextKeyService 并在dispose 后获取 monaco 内部ContextKeyService 作为OpenSumi内新实例

2.可能需要 注册 StandaloneKeybindingService 的 override

[bytemain]

是否可以采用一些微前端的方案？让 monaco 的 context 是我们可以控制的，这样我们就可以销毁它。