fix: create diff and merge editor as needed (#2135)

* fix: create diff and merge editor as needed * refactor: add editor open type enum (#2139) * fix: test case * chore: fix e2e test * chore: fix editor e2e test Co-authored-by: kuiwu <[email protected]>
opensumi · Jan 12, 2023 · 08d2d12 · 08d2d12
1 parent f200ec9
commit 08d2d12
Show file tree

Hide file tree

Showing 31 changed files with 392 additions and 315 deletions.
diff --git a/packages/debug/src/browser/view/variables/debug-variables.contribution.ts b/packages/debug/src/browser/view/variables/debug-variables.contribution.ts
@@ -13,6 +13,7 @@ import { MenuContribution, IMenuRegistry, MenuId } from '@opensumi/ide-core-brow
 import { CommandService, CUSTOM_EDITOR_SCHEME, IExtensionProps, URI } from '@opensumi/ide-core-common';
 import {
   BrowserEditorContribution,
+  EditorOpenType,
   IResource,
   ResourceService,
   WorkbenchEditorService,
@@ -156,7 +157,7 @@ export class VariablesPanelContribution implements BrowserEditorContribution, Me
               disableNavigate: true,
               preview: true,
               forceOpenType: {
-                type: 'component',
+                type: EditorOpenType.component,
                 componentId: HEX_EDITOR_EDITOR_ID,
               },
             },

diff --git a/packages/editor/__tests__/browser/editor-service.test.ts b/packages/editor/__tests__/browser/editor-service.test.ts
@@ -10,6 +10,7 @@ import {
   BrowserEditorContribution,
   EditorGroupChangeEvent,
   CodeEditorDidVisibleEvent,
+  EditorOpenType,
 } from '@opensumi/ide-editor/lib/browser';
 import { EditorComponentRegistryImpl } from '@opensumi/ide-editor/lib/browser/component';
 import { isEditStack, isEOLStack } from '@opensumi/ide-editor/lib/browser/doc-model/editor-is-fn';
@@ -247,14 +248,14 @@ describe('workbench editor service tests', () => {
 
     await editorService.open(testComponentUri);
     expect(editorService.editorGroups[0].currentOpenType).toBeDefined();
-    expect(editorService.editorGroups[0].currentOpenType!.type).toBe('component');
+    expect(editorService.editorGroups[0].currentOpenType!.type).toBe(EditorOpenType.component);
     expect(listener).toBeCalled();
 
     await editorService.closeAll();
 
-    await editorService.open(testComponentUri, { preview: false, forceOpenType: { type: 'code' } });
+    await editorService.open(testComponentUri, { preview: false, forceOpenType: { type: EditorOpenType.code } });
     expect(editorService.editorGroups[0].currentOpenType).toBeDefined();
-    expect(editorService.editorGroups[0].currentOpenType!.type).toBe('code');
+    expect(editorService.editorGroups[0].currentOpenType!.type).toBe(EditorOpenType.code);
 
     // 测试 getState 方法
     expect(editorService.editorGroups[0].getState()).toEqual({
@@ -287,7 +288,7 @@ describe('workbench editor service tests', () => {
       new CodeEditorDidVisibleEvent({
         groupName: editorService.currentEditorGroup.name,
         editorId: editorService.currentEditorGroup.codeEditor.getId(),
-        type: 'code',
+        type: EditorOpenType.code,
       }),
     );
 

diff --git a/packages/editor/__tests__/browser/editor.feature.test.ts b/packages/editor/__tests__/browser/editor.feature.test.ts
@@ -13,6 +13,7 @@ import {
   IEditorGroup,
   EditorGroupChangeEvent,
   EditorGroupCloseEvent,
+  EditorOpenType,
 } from '@opensumi/ide-editor/lib/browser';
 import { EditorFeatureRegistryImpl } from '@opensumi/ide-editor/lib/browser/feature';
 import { FormattingSelector } from '@opensumi/ide-editor/lib/browser/format/formatterSelect';
@@ -199,7 +200,7 @@ describe('editor history test', () => {
       new EditorGroupChangeEvent({
         group: testEditorGroup,
         newOpenType: {
-          type: 'code',
+          type: EditorOpenType.code,
         },
         oldOpenType: null,
         newResource: {
@@ -305,10 +306,10 @@ describe('editor history test', () => {
       new EditorGroupChangeEvent({
         group: testEditorGroup,
         newOpenType: {
-          type: 'code',
+          type: EditorOpenType.code,
         },
         oldOpenType: {
-          type: 'code',
+          type: EditorOpenType.code,
         },
         newResource: {
           uri: testUri2,
@@ -355,10 +356,10 @@ describe('editor history test', () => {
       new EditorGroupChangeEvent({
         group: testEditorGroup,
         newOpenType: {
-          type: 'code',
+          type: EditorOpenType.code,
         },
         oldOpenType: {
-          type: 'code',
+          type: EditorOpenType.code,
         },
         newResource: {
           uri: testUri3,

diff --git a/packages/editor/__tests__/browser/test-providers.ts b/packages/editor/__tests__/browser/test-providers.ts
@@ -4,6 +4,7 @@ import {
   IEditorDocumentModelContentProvider,
   IEditorComponentResolver,
   IEditorComponent,
+  EditorOpenType,
 } from '@opensumi/ide-editor/lib/browser';
 
 export const doNotClose: string[] = [];
@@ -39,23 +40,23 @@ export const TestEditorDocumentProvider: IEditorDocumentModelContentProvider = {
 
 export const TestResourceResolver: IEditorComponentResolver = (resource: IResource, results) => {
   results.push({
-    type: 'code',
+    type: EditorOpenType.code,
   });
 };
 
 export const TestResourceResolver2: IEditorComponentResolver = (resource: IResource, results) => {
   if (resource.uri.authority === 'component') {
     results.push({
       componentId: 'test-v-component',
-      type: 'component',
+      type: EditorOpenType.component,
       weight: 100,
     });
     return;
   }
   if (resource.uri.authority === 'diff') {
     results.push({
       componentId: 'test-v-component',
-      type: 'diff',
+      type: EditorOpenType.diff,
     });
     return;
   }

diff --git a/packages/editor/src/browser/diff/index.ts b/packages/editor/src/browser/diff/index.ts
@@ -3,7 +3,7 @@ import { URI, Domain, WithEventBus, OnEvent } from '@opensumi/ide-core-browser';
 import { LabelService } from '@opensumi/ide-core-browser/lib/services';
 
 import { IResourceProvider, IDiffResource, ResourceService, ResourceDecorationChangeEvent } from '../../common';
-import { BrowserEditorContribution, EditorComponentRegistry } from '../types';
+import { BrowserEditorContribution, EditorComponentRegistry, EditorOpenType } from '../types';
 
 // diff URI:
 // diff://?name=tabName&original=uri1&modified=uri2
@@ -74,7 +74,7 @@ export class DefaultDiffEditorContribution implements BrowserEditorContribution
   registerEditorComponent(registry: EditorComponentRegistry) {
     registry.registerEditorComponentResolver('diff', (resource: IDiffResource, results) => {
       results.push({
-        type: 'diff',
+        type: EditorOpenType.diff,
       });
     });
   }

diff --git a/packages/editor/src/browser/editor.override.ts b/packages/editor/src/browser/editor.override.ts
@@ -11,7 +11,7 @@ import { IStandaloneThemeService } from '@opensumi/monaco-editor-core/esm/vs/edi
 import { ContextViewService } from '@opensumi/monaco-editor-core/esm/vs/platform/contextview/browser/contextViewService';
 
 /* istanbul ignore file */
-import { WorkbenchEditorService } from '../common';
+import { EditorOpenType, WorkbenchEditorService } from '../common';
 
 import { BrowserCodeEditor } from './editor-collection.service';
 import { WorkbenchEditorServiceImpl } from './workbench-editor.service';
@@ -60,12 +60,12 @@ export class MonacoCodeService extends AbstractCodeEditorService {
       !new URI(source.getModel()?.uri).isEqual(input.resource)
     ) {
       for (const visibleGroup of this.workbenchEditorService.editorGroups) {
-        if (visibleGroup.currentOpenType?.type === 'code') {
+        if (visibleGroup.currentOpenType?.type === EditorOpenType.code) {
           if (visibleGroup.currentEditor?.monacoEditor === source) {
             visibleGroup.pinPreviewed(visibleGroup.currentResource?.uri);
             break;
           }
-        } else if (visibleGroup.currentOpenType?.type === 'diff') {
+        } else if (visibleGroup.currentOpenType?.type === EditorOpenType.diff) {
           if (
             visibleGroup.diffEditor!.modifiedEditor.monacoEditor === source ||
             visibleGroup.diffEditor!.originalEditor.monacoEditor === source

diff --git a/packages/editor/src/browser/editor.view.tsx b/packages/editor/src/browser/editor.view.tsx
@@ -44,6 +44,7 @@ import {
   EditorSide,
   IEditorComponent,
   CodeEditorDidVisibleEvent,
+  EditorOpenType,
 } from './types';
 import { EditorGroup, WorkbenchEditorServiceImpl } from './workbench-editor.service';
 
@@ -213,8 +214,6 @@ export const EditorGridView = ({ grid }: { grid: EditorGrid }) => {
 };
 
 const cachedEditor: { [key: string]: HTMLDivElement } = {};
-const cachedDiffEditor: { [key: string]: HTMLDivElement } = {};
-const cachedMergeEditor: { [key: string]: HTMLDivElement } = {};
 
 /**
  * 默认的 editor empty component
@@ -343,27 +342,12 @@ export const EditorGroupBody = observer(({ group }: { group: EditorGroup }) => {
         group.createEditor(container);
       }
     }
+
     if (diffEditorRef.current) {
-      if (cachedDiffEditor[group.name]) {
-        cachedDiffEditor[group.name].remove();
-        diffEditorRef.current.appendChild(cachedDiffEditor[group.name]);
-      } else {
-        const container = document.createElement('div');
-        diffEditorRef.current.appendChild(container);
-        cachedDiffEditor[group.name] = container;
-        group.createDiffEditor(container);
-      }
+      group.attachDiffEditorDom(diffEditorRef.current);
     }
     if (mergeEditorRef.current) {
-      if (cachedMergeEditor[group.name]) {
-        cachedMergeEditor[group.name].remove();
-        mergeEditorRef.current.appendChild(cachedMergeEditor[group.name]);
-      } else {
-        const container = document.createElement('div');
-        mergeEditorRef.current.appendChild(container);
-        cachedMergeEditor[group.name] = container;
-        group.createMergeEditor(container);
-      }
+      group.attachMergeEditorDom(mergeEditorRef.current);
     }
   }, [codeEditorRef.current, diffEditorRef.current, mergeEditorRef.current]);
 
@@ -401,19 +385,19 @@ export const EditorGroupBody = observer(({ group }: { group: EditorGroup }) => {
   );
 
   React.useEffect(() => {
-    if (group.currentOpenType?.type === 'code') {
+    if (group.currentOpenType?.type === EditorOpenType.code) {
       eventBus.fire(
         new CodeEditorDidVisibleEvent({
           groupName: group.name,
-          type: 'code',
+          type: EditorOpenType.code,
           editorId: group.codeEditor.getId(),
         }),
       );
-    } else if (group.currentOpenType?.type === 'diff') {
+    } else if (group.currentOpenType?.type === EditorOpenType.diff) {
       eventBus.fire(
         new CodeEditorDidVisibleEvent({
           groupName: group.name,
-          type: 'diff',
+          type: EditorOpenType.diff,
           editorId: group.diffEditor.modifiedEditor.getId(),
         }),
       );
@@ -465,7 +449,7 @@ export const EditorGroupBody = observer(({ group }: { group: EditorGroup }) => {
         <div
           className={classnames({
             [styles.kt_editor_component]: true,
-            [styles.kt_hidden]: !group.currentOpenType || group.currentOpenType.type !== 'component',
+            [styles.kt_hidden]: !group.currentOpenType || group.currentOpenType.type !== EditorOpenType.component,
           })}
         >
           {components}
@@ -474,19 +458,19 @@ export const EditorGroupBody = observer(({ group }: { group: EditorGroup }) => {
           className={classnames({
             [styles.kt_editor_code_editor]: true,
             [styles.kt_editor_component]: true,
-            [styles.kt_hidden]: !group.currentOpenType || group.currentOpenType.type !== 'code',
+            [styles.kt_hidden]: !group.currentOpenType || group.currentOpenType.type !== EditorOpenType.code,
           })}
           ref={codeEditorRef}
         />
         <div
           className={classnames(styles.kt_editor_diff_editor, styles.kt_editor_component, {
-            [styles.kt_hidden]: !group.currentOpenType || group.currentOpenType.type !== 'diff',
+            [styles.kt_hidden]: !group.currentOpenType || group.currentOpenType.type !== EditorOpenType.diff,
           })}
           ref={diffEditorRef}
         />
         <div
           className={classnames(styles.kt_editor_diff_3_editor, styles.kt_editor_component, {
-            [styles.kt_hidden]: !group.currentOpenType || group.currentOpenType.type !== 'mergeEditor',
+            [styles.kt_hidden]: !group.currentOpenType || group.currentOpenType.type !== EditorOpenType.mergeEditor,
           })}
           ref={mergeEditorRef}
         />

diff --git a/packages/editor/src/browser/history/index.ts b/packages/editor/src/browser/history/index.ts
@@ -11,7 +11,7 @@ import {
 } from '@opensumi/ide-core-browser';
 
 import { WorkbenchEditorService } from '../../common';
-import { EditorSelectionChangeEvent, EditorGroupChangeEvent, EditorGroupCloseEvent } from '../types';
+import { EditorSelectionChangeEvent, EditorGroupChangeEvent, EditorGroupCloseEvent, EditorOpenType } from '../types';
 
 const HistoryPositionLineThreshold = 7;
 const HardMaxStateLength = 200; // 超过200个过后，会缩减至100个, 防止反复缩减
@@ -89,7 +89,10 @@ export class EditorHistoryService extends WithEventBus {
 
   @OnEvent(EditorGroupChangeEvent)
   onEditorGroupChangeEvent(e: EditorGroupChangeEvent) {
-    if (e.payload.newOpenType && (e.payload.newOpenType.type === 'code' || e.payload.newOpenType.type === 'diff')) {
+    if (
+      e.payload.newOpenType &&
+      (e.payload.newOpenType.type === EditorOpenType.code || e.payload.newOpenType.type === EditorOpenType.diff)
+    ) {
       const selections = e.payload.group.currentEditor!.getSelections();
       if (selections && selections.length > 0) {
         this.onNewState(

diff --git a/packages/editor/src/browser/merge-editor/merge-editor.contribution.ts b/packages/editor/src/browser/merge-editor/merge-editor.contribution.ts
@@ -1,8 +1,8 @@
 import { Autowired } from '@opensumi/di';
-import { Disposable, Domain } from '@opensumi/ide-core-browser';
+import { Domain } from '@opensumi/ide-core-browser';
 
 import { ResourceService } from '../../common';
-import { BrowserEditorContribution, EditorComponentRegistry, IEditor, IEditorFeatureRegistry } from '../types';
+import { BrowserEditorContribution, EditorComponentRegistry, EditorOpenType } from '../types';
 
 import { MergeEditorResourceProvider } from './merge-editor.provider';
 
@@ -18,7 +18,7 @@ export class MergeEditorContribution implements BrowserEditorContribution {
   registerEditorComponent(registry: EditorComponentRegistry) {
     registry.registerEditorComponentResolver('mergeEditor', (_, results) => {
       results.push({
-        type: 'mergeEditor',
+        type: EditorOpenType.mergeEditor,
       });
     });
   }