fix: editor opentype switcher (#509)

* fix: open type for opened editor * fix: editor open type issue
opensumi · Feb 25, 2022 · b7f145a · b7f145a
1 parent 818bdca
commit b7f145a
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 36 deletions.
diff --git a/packages/editor/src/browser/editor.module.less b/packages/editor/src/browser/editor.module.less
@@ -394,8 +394,14 @@
   .overlay-shadow();
   display: flex;
   > .option {
+    font-size: 12px;
     padding: 5px 10px;
     cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 120px;
+
     &.current_type {
       color: var(--textLink-activeForeground);
     }

diff --git a/packages/editor/src/browser/editor.view.tsx b/packages/editor/src/browser/editor.view.tsx
@@ -22,6 +22,7 @@ import classnames from 'classnames';
 import React from 'react';
 import ReactIs from 'react-is';
 import ReactDOM from 'react-dom';
+import { observer } from 'mobx-react-lite';
 
 import { IEditorOpenType, IResource, WorkbenchEditorService } from '../common';
 import { EditorComponentRegistryImpl } from './component';
@@ -229,7 +230,7 @@ const EditorEmptyComponent: React.FC<{
   );
 };
 
-export const EditorGroupView = ({ group }: { group: EditorGroup }) => {
+export const EditorGroupView = observer(({ group }: { group: EditorGroup }) => {
   const groupWrapperRef = React.useRef<HTMLElement | null>();
 
   const preferenceService = useInjectable(PreferenceService) as PreferenceService;
@@ -311,9 +312,9 @@ export const EditorGroupView = ({ group }: { group: EditorGroup }) => {
       )}
     </div>
   );
-};
+});
 
-export function EditorGroupBody({ group }: { group: EditorGroup }) {
+export const EditorGroupBody = observer(({ group }: { group: EditorGroup }) => {
   const editorBodyRef = React.useRef<HTMLDivElement>(null);
   const editorService = useInjectable(WorkbenchEditorService) as WorkbenchEditorServiceImpl;
   const eventBus = useInjectable(IEventBus) as IEventBus;
@@ -469,7 +470,7 @@ export function EditorGroupBody({ group }: { group: EditorGroup }) {
       <OpenTypeSwitcher options={group.availableOpenTypes} current={group.currentOpenType} group={group} />
     </div>
   );
-}
+});
 
 export const ComponentsWrapper = ({
   component,
@@ -544,39 +545,41 @@ export const ComponentWrapper = ({ component, resource, hidden, ...other }) => {
   );
 };
 
-export const OpenTypeSwitcher = ({
-  options,
-  current,
-  group,
-}: {
-  options: IEditorOpenType[];
-  current: MaybeNull<IEditorOpenType>;
-  group: EditorGroup;
-}) => {
-  if (options.length <= 1) {
-    return null;
-  }
+export const OpenTypeSwitcher = observer(
+  ({
+    options,
+    current,
+    group,
+  }: {
+    options: IEditorOpenType[];
+    current: MaybeNull<IEditorOpenType>;
+    group: EditorGroup;
+  }) => {
+    if (options.length <= 1) {
+      return null;
+    }
 
-  return (
-    <div className={styles.open_type_switcher}>
-      {options.map((option, i) => (
-        <div
-          className={classnames({
-            [styles.option]: true,
-            [styles.current_type]:
-              current && current.type === option.type && current.componentId === option.componentId,
-          })}
-          onClick={() => {
-            group.changeOpenType(option);
-          }}
-          key={i}
-        >
-          {option.title || option.componentId || option.type}
-        </div>
-      ))}
-    </div>
-  );
-};
+    return (
+      <div className={styles.open_type_switcher}>
+        {options.map((option, i) => (
+          <div
+            className={classnames({
+              [styles.option]: true,
+              [styles.current_type]:
+                current && current.type === option.type && current.componentId === option.componentId,
+            })}
+            onClick={() => {
+              group.changeOpenType(option);
+            }}
+            key={i}
+          >
+            {option.title || option.componentId || option.type}
+          </div>
+        ))}
+      </div>
+    );
+  },
+);
 
 function getDragOverPosition(e: DragEvent, element: HTMLElement): DragOverPosition {
   const rect = element.getBoundingClientRect();

diff --git a/packages/editor/src/browser/workbench-editor.service.ts b/packages/editor/src/browser/workbench-editor.service.ts
@@ -1,4 +1,5 @@
 import * as monaco from '@opensumi/monaco-editor-core/esm/vs/editor/editor.api';
+import { observable } from 'mobx';
 import {
   WorkbenchEditorService,
   EditorCollectionService,
@@ -62,6 +63,7 @@ import {
   EditorComponentDisposeEvent,
   EditorActiveResourceStateChangedEvent,
   CodeEditorDidVisibleEvent,
+  RegisterEditorComponentEvent,
 } from './types';
 import { IGridEditorGroup, EditorGrid, SplitDirection, IEditorGridState } from './grid/grid.service';
 import { makeRandomHexString } from '@opensumi/ide-core-common/lib/functional';
@@ -593,6 +595,7 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
 
   private cachedResourcesOpenTypes = new Map<string, IEditorOpenType[]>();
 
+  @observable.shallow
   availableOpenTypes: IEditorOpenType[] = [];
 
   activeComponents = new Map<IEditorComponent, IResource[]>();
@@ -872,6 +875,15 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
     }
   }
 
+  @OnEvent(RegisterEditorComponentEvent)
+  async onRegisterEditorComponentEvent() {
+    if (this.currentResource) {
+      const openTypes = await this.editorComponentRegistry.resolveEditorComponent(this.currentResource);
+      this.availableOpenTypes = openTypes;
+      this.cachedResourcesOpenTypes.set(this.currentResource.uri.toString(), openTypes);
+    }
+  }
+
   pinPreviewed(uri?: URI) {
     const previous = this.previewURI;
     if (uri === undefined) {