feat: extract editor modified logic to extensions (#138)

DTStack · Apr 25, 2021 · 70aafcf · 70aafcf
1 parent 4afce3e
commit 70aafcf
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 2 deletions.
diff --git a/src/controller/editor.tsx b/src/controller/editor.tsx
@@ -217,19 +217,19 @@ export class EditorController extends Controller implements IEditorController {
             const newValue = editorInstance.getModel()?.getValue();
             const { current } = this.editorService.getState();
             const tab = current?.tab;
+            const originValue = tab?.data?.value;
             if (!tab) return;
-            const notSave = newValue !== tab?.data?.value;
             this.editorService.updateTab(
                 {
                     id: tab.id,
                     data: {
                         ...tab.data,
-                        modified: notSave,
                         value: newValue,
                     },
                 },
                 groupId
             );
+            this.emit(EditorEvent.OnUpdateTab, newValue, groupId, originValue);
             this.emit(
                 FolderTreeEvent.onUpdateFileContent,
                 current?.tab?.id as any,

diff --git a/src/model/workbench/editor.ts b/src/model/workbench/editor.ts
@@ -12,6 +12,7 @@ export enum EditorEvent {
     OnMoveTab = 'editor.moveTab',
     OpenTab = 'editor.openTab',
     OnSelectTab = 'editor.selectTab',
+    OnUpdateTab = 'editor.updateTab',
     OnSplitEditorRight = 'editor.splitEditorRight',
 }
 interface BuiltInEditorTabDataType {

diff --git a/src/services/workbench/editorService.ts b/src/services/workbench/editorService.ts
@@ -4,6 +4,7 @@ import * as monaco from 'monaco-editor';
 
 import { Component } from 'mo/react';
 import {
+    EditorEvent,
     EditorModel,
     EditorGroupModel,
     IEditor,
@@ -30,6 +31,13 @@ export interface IEditorService extends Component<IEditor> {
     closeAll(groupId: number): void;
     getGroupById(groupId: number): IEditorGroup | undefined;
     cloneGroup(groupId?: number): IEditorGroup;
+    onUpdateTab(
+        callback: (
+            newValue: string,
+            groupId: number,
+            originValue?: string
+        ) => void
+    );
     /**
      * Set active group and tab
      * @param groupId Target group ID
@@ -280,4 +288,14 @@ export class EditorService
         });
         return cloneGroup;
     }
+
+    public onUpdateTab(
+        callback: (
+            newValue: string,
+            groupId: number,
+            originValue?: string
+        ) => void
+    ) {
+        this.subscribe(EditorEvent.OnUpdateTab, callback);
+    }
 }
diff --git a/stories/extensions/test/testPane.tsx b/stories/extensions/test/testPane.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import * as monaco from 'monaco-editor';
 import {
     activityBarService,
     colorThemeService,
@@ -92,6 +93,39 @@ export type GenericClassDecorator<T> = (target: T) => void;`,
             editorService.open(tabData);
         };
 
+        editorService.onUpdateTab(
+            (newValue: string, groupId: number, originValue?: string) => {
+                const { current } = editorService.getState();
+                const tab = current?.tab!;
+                const notSave = newValue !== originValue;
+                editorService.updateTab(
+                    {
+                        id: tab.id,
+                        data: {
+                            ...tab.data,
+                            modified: notSave,
+                        },
+                    },
+                    groupId
+                );
+                current?.editorInstance.addCommand(
+                    monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S,
+                    () => {
+                        // ctrl + s
+                        editorService.updateTab(
+                            {
+                                id: tab.id,
+                                data: {
+                                    ...tab.data,
+                                    modified: false,
+                                },
+                            },
+                            groupId
+                        );
+                    }
+                );
+            }
+        );
         let notify;
         const addANotification = function () {
             notify = notificationService.addNotification<string>({