fix: fix model's value not change and add onEditorInstanceMount event

Author: mortalYoung

src/controller/__tests__/editor.test.ts

@@ -9,6 +9,16 @@ const editorService = container.resolve(EditorService);
 const statusBarService = container.resolve(StatusBarService);
 const builtinService = container.resolve(BuiltinService);
 
+jest.mock('mo/monaco', () => {
+    const original = jest.requireActual('mo/monaco');
+    return {
+        ...original,
+        editor: {
+            getModel: jest.fn(),
+        },
+    };
+});
+
 describe('The ediotr controller', () => {
     test('The initEditorEvents method', () => {
         const editorInstance = {} as MonacoEditor.IStandaloneCodeEditor;

src/controller/editor.tsx

@@ -199,6 +199,8 @@ export class EditorController extends Controller implements IEditorController {
             tab?.data?.value!,
             tab?.data?.language!
         );
+
+        this.onEditorInstanceMount(editorInstance);
     };
 
     public onClickActions = (action: IEditorActionsProps) => {
@@ -374,4 +376,10 @@ export class EditorController extends Controller implements IEditorController {
             }
         }
     }
+
+    public onEditorInstanceMount(
+        editorInstance: MonacoEditor.IStandaloneCodeEditor
+    ) {
+        this.emit(EditorEvent.onEditorInstanceMount, editorInstance);
+    }
 }

src/model/workbench/editor.ts

@@ -17,6 +17,7 @@ export enum EditorEvent {
     OnUpdateTab = 'editor.updateTab',
     onActionsClick = 'editor.actionsClick',
     OnSplitEditorRight = 'editor.splitEditorRight',
+    onEditorInstanceMount = 'editor.onEditorInstanceMount',
 }
 
 export interface BuiltInEditorTabDataType {

src/services/workbench/__tests__/editorService.test.tsx

@@ -9,6 +9,16 @@ import { editor as MonacoEditor } from 'mo/monaco';
 import { cloneDeep } from 'lodash';
 import { act } from 'react-dom/test-utils';
 
+jest.mock('mo/monaco', () => {
+    const original = jest.requireActual('mo/monaco');
+    return {
+        ...original,
+        editor: {
+            getModel: jest.fn(),
+        },
+    };
+});
+
 describe('Test EditorService', () => {
     let mockTab: IEditorTab;
 
@@ -132,7 +142,7 @@ describe('Test EditorService', () => {
         expect(editor.editorInstance).toBeUndefined();
     });
 
-    test('Update the tab', () => {
+    test('Update the tab without model', () => {
         const editor = new EditorService();
         editor.open(mockTab);
         expect(editor.getState().current?.activeTab).toBe(mockTab.id);
@@ -198,14 +208,9 @@ describe('Test EditorService', () => {
         expect(groups?.length).toBe(1);
 
         const setValFn = jest.fn();
-        const getValFn = jest.fn(() => '');
-        groups![0].editorInstance = {
-            getModel: () => ({
-                getValue: getValFn,
-                setValue: setValFn,
-            }),
-        };
-
+        (MonacoEditor.getModel as jest.Mock).mockImplementation(() => ({
+            setValue: setValFn,
+        }));
         act(() => {
             editor.updateTab({
                 id: mockTab.id,
@@ -217,6 +222,20 @@ describe('Test EditorService', () => {
 
         expect(setValFn).toBeCalled();
         expect(setValFn.mock.calls[0][0]).toBe('test');
+
+        // Update editor text even not current tab
+        editor.setActive(1, 1);
+        act(() => {
+            editor.updateTab({
+                id: mockTab.id,
+                data: {
+                    value: 'test2',
+                },
+            });
+        });
+
+        expect(setValFn).toBeCalledTimes(2);
+        expect(setValFn.mock.calls[1][0]).toBe('test2');
     });
 
     test('Should prevent update editor text if current tab with renderPane', () => {
@@ -614,4 +633,13 @@ describe('Test EditorService', () => {
             expect(testFn.mock.calls[0]).toEqual(expected);
         });
     });
+
+    test('Listen to the editorInstance mount', () => {
+        const editor = new EditorService();
+        expectFnCalled((testFn) => {
+            editor.onEditorInstanceMount(testFn);
+            editor.emit(EditorEvent.onEditorInstanceMount, {});
+            expect(testFn.mock.calls[0][0]).toEqual({});
+        });
+    });
 });

src/services/workbench/editorService.ts

@@ -1,6 +1,6 @@
 import 'reflect-metadata';
 import { singleton, container } from 'tsyringe';
-import { cloneDeep, isString } from 'lodash';
+import { cloneDeep } from 'lodash';
 import { Component } from 'mo/react';
 import {
     EditorModel,
@@ -205,6 +205,12 @@ export interface IEditorService extends Component<IEditor> {
      * @param tabId
      */
     getGroupIdByTab(tabId: UniqueId): UniqueId | null;
+    /**
+     * Listen to the editor instance mount event
+     */
+    onEditorInstanceMount(
+        callback: (editorInstance: MonacoEditor.IStandaloneCodeEditor) => void
+    ): void;
 }
 @singleton()
 export class EditorService
@@ -325,11 +331,15 @@ export class EditorService
                     updatedTab = Object.assign(tabData, tab);
                 }
                 if (group.activeTab === tab.id) {
-                    isString(editorValue) &&
-                        !tabData?.renderPane &&
-                        this.setGroupEditorValue(group, editorValue);
                     updatedTab = Object.assign(group.tab, tab);
                 }
+                // Update model's value
+                const model = MonacoEditor.getModel(
+                    Uri.parse(tab.id.toString())
+                );
+                if (model) {
+                    model.setValue(editorValue || '');
+                }
                 this.updateGroup(groupId, group);
 
                 if (groupId === this.state.current?.id) {
@@ -345,11 +355,16 @@ export class EditorService
                 }
 
                 if (group.activeTab === tab.id) {
-                    isString(editorValue) &&
-                        !tabData?.renderPane &&
-                        this.setGroupEditorValue(group, editorValue);
                     updatedTab = Object.assign(group.tab, tab);
                 }
+
+                // Update model's value
+                const model = MonacoEditor.getModel(
+                    Uri.parse(tab.id.toString())
+                );
+                if (model) {
+                    model.setValue(editorValue || '');
+                }
             });
 
             if (current?.activeTab === tab.id) {
@@ -777,4 +792,10 @@ export class EditorService
     ) {
         this.subscribe(EditorEvent.onActionsClick, callback);
     }
+
+    public onEditorInstanceMount(
+        callback: (editorInstance: MonacoEditor.IStandaloneCodeEditor) => void
+    ) {
+        this.subscribe(EditorEvent.onEditorInstanceMount, callback);
+    }
 }

stories/extensions/test/index.tsx

@@ -229,5 +229,9 @@ export const ExtendsTestPane: IExtension = {
 
             molecule.layout.setAuxiliaryBar(!tab);
         });
+
+        molecule.editor.onEditorInstanceMount((editorInstance) => {
+            console.log('editorInstance:', editorInstance);
+        });
     },
 };

stories/extensions/test/testPane.tsx

@@ -238,6 +238,19 @@ export type GenericClassDecorator<T> = (target: T) => void;`,
             }
         };
 
+        const updateEditor = function () {
+            // get first inactive tab
+            const state = molecule.editor.getState();
+            const firstInactiveTab = state.current?.data?.find(
+                (tab) => tab.id !== state.current?.activeTab
+            );
+            if (firstInactiveTab) {
+                firstInactiveTab.data.value +=
+                    '\nconst firstInactiveTab = "test";\n';
+                molecule.editor.updateTab(firstInactiveTab, state.current?.id);
+            }
+        };
+
         const newPane = function () {
             const key = shortRandomId();
             const name = `pane-${key}.ts`;
@@ -481,6 +494,9 @@ PARTITIONED BY (DE STRING) LIFECYCLE 1000;
                     <div style={{ marginBottom: 50 }}>
                         <h2>Simple examples:</h2>
                         <Button onClick={newEditor}>New Editor</Button>
+                        <Button onClick={updateEditor}>
+                            Update Inactive Editor{`'`}s value
+                        </Button>
                         <Button onClick={toggleEditorStatus}>
                             Toggle Editor status
                         </Button>