@opensumi/ide-editor 2.27.3-rc-1714116491.0 → 2.27.3-rc-1714367598.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensumi/ide-editor",
-  "version": "2.27.3-rc-1714116491.0",
+  "version": "2.27.3-rc-1714367598.0",
   "files": [
     "lib",
     "src"
@@ -17,21 +17,21 @@
     "url": "git@github.com:opensumi/core.git"
   },
   "dependencies": {
-    "@opensumi/ide-core-common": "2.27.3-rc-1714116491.0",
-    "@opensumi/ide-core-node": "2.27.3-rc-1714116491.0",
-    "@opensumi/ide-file-service": "2.27.3-rc-1714116491.0",
-    "@opensumi/ide-monaco": "2.27.3-rc-1714116491.0",
-    "@opensumi/ide-utils": "2.27.3-rc-1714116491.0",
+    "@opensumi/ide-core-common": "2.27.3-rc-1714367598.0",
+    "@opensumi/ide-core-node": "2.27.3-rc-1714367598.0",
+    "@opensumi/ide-file-service": "2.27.3-rc-1714367598.0",
+    "@opensumi/ide-monaco": "2.27.3-rc-1714367598.0",
+    "@opensumi/ide-utils": "2.27.3-rc-1714367598.0",
     "vscode-oniguruma": "1.5.1"
   },
   "devDependencies": {
-    "@opensumi/ide-components": "2.27.3-rc-1714116491.0",
-    "@opensumi/ide-core-browser": "2.27.3-rc-1714116491.0",
-    "@opensumi/ide-dev-tool": "2.27.3-rc-1714116491.0",
-    "@opensumi/ide-overlay": "2.27.3-rc-1714116491.0",
-    "@opensumi/ide-quick-open": "2.27.3-rc-1714116491.0",
-    "@opensumi/ide-theme": "2.27.3-rc-1714116491.0",
-    "@opensumi/ide-workspace": "2.27.3-rc-1714116491.0"
+    "@opensumi/ide-components": "2.27.3-rc-1714367598.0",
+    "@opensumi/ide-core-browser": "2.27.3-rc-1714367598.0",
+    "@opensumi/ide-dev-tool": "2.27.3-rc-1714367598.0",
+    "@opensumi/ide-overlay": "2.27.3-rc-1714367598.0",
+    "@opensumi/ide-quick-open": "2.27.3-rc-1714367598.0",
+    "@opensumi/ide-theme": "2.27.3-rc-1714367598.0",
+    "@opensumi/ide-workspace": "2.27.3-rc-1714367598.0"
   },
-  "gitHead": "b3e24dca0866b038e5b93fb14119f30e947f4710"
+  "gitHead": "ec0fc77694997fa304e16d988886fbe2a0f15768"
 }

package/src/browser/editor.context.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export interface IEditorContext {
+  minimapWidth: number;
+}
+
+export const defaultEditorContext: IEditorContext = {
+  minimapWidth: 108,
+};
+
+export const EditorContext = React.createContext<IEditorContext>(defaultEditorContext);

package/src/browser/editor.contribution.ts

@@ -49,7 +49,6 @@ import { MergeEditorService } from '@opensumi/ide-monaco/lib/browser/contrib/mer
 import { ITextmateTokenizer, ITextmateTokenizerService } from '@opensumi/ide-monaco/lib/browser/contrib/tokenizer';
 import { EOL } from '@opensumi/ide-monaco/lib/browser/monaco-api/types';
 import * as monaco from '@opensumi/ide-monaco/lib/common/common';
-import { EditorContributionInstantiation } from '@opensumi/monaco-editor-core/esm/vs/editor/browser/editorExtensions';
 import { EditorContextKeys } from '@opensumi/monaco-editor-core/esm/vs/editor/common/editorContextKeys';
 import { IFormattingEditProviderSelector } from '@opensumi/monaco-editor-core/esm/vs/editor/contrib/format/browser/format';
 import { ContextKeyExpr } from '@opensumi/monaco-editor-core/esm/vs/platform/contextkey/common/contextkey';
@@ -77,7 +76,6 @@ import { EditorView } from './editor.view';
 import { DocumentFormatService } from './format/format.service';
 import { FormattingSelector } from './format/formatter-selector';
 import { EditorHistoryService } from './history';
-import { OpenSumiLightBulbWidget } from './light-bulb-widget';
 import { EditorContextMenuController } from './menu/editor.context';
 import { NavigationMenuContainer } from './navigation.view';
 import { GoToLineQuickOpenHandler } from './quick-open/go-to-line';
@@ -255,10 +253,6 @@ export class EditorContribution
         this.contextMenuRenderer,
       ]),
     );
-
-    if (this.aiNativeConfigService.capabilities.supportsOpenSumiDesign) {
-      register(OpenSumiLightBulbWidget.ID, OpenSumiLightBulbWidget, EditorContributionInstantiation.Lazy);
-    }
   }
 
   protected getMimeForMode(langId: string): string | undefined {

package/src/browser/editor.decoration.service.ts

@@ -1,5 +1,5 @@
 import { Autowired, Injectable } from '@opensumi/di';
-import { Disposable, IDisposable, IEventBus, URI } from '@opensumi/ide-core-browser';
+import { DisposableStore, IDisposable, IEventBus, URI } from '@opensumi/ide-core-browser';
 import * as monaco from '@opensumi/ide-monaco';
 import { IIconService, IThemeService } from '@opensumi/ide-theme';
 import { ICSSStyleService } from '@opensumi/ide-theme/lib/common/style';
@@ -15,6 +15,7 @@ import {
   IEditorDecorationCollectionService,
   IEditorDecorationProvider,
   IThemedCssStyle,
+  IThemedCssStyleCollection,
 } from './types';
 
 @Injectable()
@@ -35,8 +36,6 @@ export class EditorDecorationCollectionService implements IEditorDecorationColle
 
   private tempId = 0;
 
-  constructor() {}
-
   getNextTempId() {
     this.tempId++;
     return 'temp-decoration-' + this.tempId;
@@ -69,55 +68,73 @@ export class EditorDecorationCollectionService implements IEditorDecorationColle
   }
 
   private resolveDecoration(key: string, options: IDecorationRenderOptions): IDynamicModelDecorationProperty {
+    const theme = this.createThemeCSSStyleCollection(key, options);
+
     const dec = {
-      default: this.addedThemeDecorationToCSSStyleSheet(key, options),
-      light: options.light ? this.addedThemeDecorationToCSSStyleSheet(key + '-light', options.light) : null,
-      dark: options.dark ? this.addedThemeDecorationToCSSStyleSheet(key + '-dark', options.dark) : null,
+      default: theme.default,
+      light: theme.light,
+      dark: theme.dark,
       isWholeLine: options.isWholeLine || false,
       overviewRulerLane: options.overviewRulerLane,
       dispose: () => {
-        dec.default.dispose();
-        if (dec.light) {
-          dec.light.dispose();
-        }
-        if (dec.dark) {
-          dec.dark.dispose();
-        }
+        theme.dispose();
       },
     };
 
     return dec;
   }
 
-  private addedThemeDecorationToCSSStyleSheet(key, options: IThemeDecorationRenderOptions): IThemedCssStyle {
+  private createThemeCSSStyleCollection(key: string, options: IDecorationRenderOptions): IThemedCssStyleCollection {
+    const disposer = new DisposableStore();
+
+    const defaultStyle = this.addedThemeDecorationToCSSStyleSheet(key, options);
+    const result = {
+      default: defaultStyle,
+      light: null,
+      dark: null,
+      dispose: () => {
+        disposer.dispose();
+      },
+    } as IThemedCssStyleCollection;
+
+    if (options.light) {
+      const lightStyle = this.addedThemeDecorationToCSSStyleSheet(key + '-light', options.light);
+      result.light = lightStyle;
+      disposer.add(lightStyle);
+    }
+    if (options.dark) {
+      const darkStyle = this.addedThemeDecorationToCSSStyleSheet(key + '-dark', options.dark);
+      result.dark = darkStyle;
+      disposer.add(darkStyle);
+    }
+
+    return result;
+  }
+
+  private addedThemeDecorationToCSSStyleSheet(key: string, options: IDecorationRenderOptions): IThemedCssStyle {
     const className = key;
     const inlineClassName = key + '-inline';
-    const disposer = new Disposable();
-    let afterContentClassName;
-    let beforeContentClassName;
-    let glyphMarginClassName;
+    const disposer = new DisposableStore();
+    let afterContentClassName: string | undefined;
+    let beforeContentClassName: string | undefined;
+    let glyphMarginClassName: string | undefined;
+
+    const inlineBlockSelector = this.createInlineBlockCSSStyleIfNeeded();
+
     const styles = this.resolveCSSStyle(options);
 
     const inlineStyles = this.resolveInlineCSSStyle(options);
-    disposer.addDispose(this.cssManager.addClass(className, styles));
-    disposer.addDispose(this.cssManager.addClass(inlineClassName, inlineStyles));
+    disposer.add(this.cssManager.addClass(className, styles));
+    disposer.add(this.cssManager.addClass(inlineClassName, inlineStyles));
     if (options.after) {
       const styles = this.resolveContentCSSStyle(options.after);
-      disposer.addDispose(this.cssManager.addClass(key + '-after::after', styles));
-      afterContentClassName = key + '-after';
-      // 最新版chrome 中 document.caretRangeFromRange 的行为有所改变
-      // 如果目标位置命中的是两个inline元素之间, 它会认为是前一个元素的内容。
-      // 在之前这个结果是属于公共父级
-      // 这个改变会使得monaco中hitTest返回错误的结果，导致点击decoration的空白区域时会错误选中文本
-      // 临时修复:
-      // 此处将before和after的父级span display强制设置为inline-block, 可以避免这个问题, 是否会带来其他风险未知
-      disposer.addDispose(this.cssManager.addClass(afterContentClassName, { display: 'inline-block' } as any));
+      disposer.add(this.cssManager.addClass(key + '::after', styles));
+      afterContentClassName = `${inlineBlockSelector} ${key}`;
     }
     if (options.before) {
       const styles = this.resolveContentCSSStyle(options.before);
-      disposer.addDispose(this.cssManager.addClass(key + '-before::before', styles));
-      beforeContentClassName = key + '-before';
-      disposer.addDispose(this.cssManager.addClass(beforeContentClassName, { display: 'inline-block' } as any));
+      disposer.add(this.cssManager.addClass(key + '::before', styles));
+      beforeContentClassName = `${inlineBlockSelector} ${key}`;
     }
     if (options.gutterIconPath) {
       const glyphMarginStyle = this.resolveCSSStyle({
@@ -125,7 +142,7 @@ export class EditorDecorationCollectionService implements IEditorDecorationColle
         backgroundIcon: options.gutterIconPath.toString(),
       });
       glyphMarginClassName = key + '-glyphMargin';
-      disposer.addDispose(this.cssManager.addClass(glyphMarginClassName, glyphMarginStyle));
+      disposer.add(this.cssManager.addClass(glyphMarginClassName, glyphMarginStyle));
     }
 
     return {
@@ -194,13 +211,35 @@ export class EditorDecorationCollectionService implements IEditorDecorationColle
       textDecoration: styles.textDecoration,
       color: this.themeService.getColorVar(styles.color),
       backgroundColor: this.themeService.getColorVar(styles.backgroundColor),
-
       margin: styles.margin,
       width: styles.width,
       height: styles.height,
     } as CSSStyleDeclaration;
   }
 
+  static DISPLAY_INLINE_BLOCK_CLS = 'display-inline-block-decoration';
+  private inlineBlockDecorationDisposer: IDisposable | undefined;
+
+  /**
+   * 最新版chrome 中 document.caretRangeFromRange 的行为有所改变
+   * 如果目标位置命中的是两个 inline 元素之间, 它会认为是前一个元素的内容。
+   * 在之前这个结果是属于公共父级
+   * 这个改变会使得 monaco 中 hitTest 返回错误的结果，导致点击 decoration 的空白区域时会错误选中文本
+   * 此处将 before 和 after 的父级 span display 强制设置为 inline-block, 可以避免这个问题, 是否会带来其他风险未知
+   * @returns
+   */
+  private createInlineBlockCSSStyleIfNeeded(): string {
+    if (this.inlineBlockDecorationDisposer) {
+      return EditorDecorationCollectionService.DISPLAY_INLINE_BLOCK_CLS;
+    }
+
+    this.inlineBlockDecorationDisposer = this.cssManager.addClass(
+      EditorDecorationCollectionService.DISPLAY_INLINE_BLOCK_CLS,
+      { display: 'inline-block' },
+    );
+    return EditorDecorationCollectionService.DISPLAY_INLINE_BLOCK_CLS;
+  }
+
   registerDecorationProvider(provider: IEditorDecorationProvider): IDisposable {
     this.decorationProviders.set(provider.key, provider);
     this.eventBus.fire(new EditorDecorationProviderRegistrationEvent(provider));

package/src/browser/editor.view.tsx

@@ -10,6 +10,7 @@ import {
   ComponentRegistry,
   ConfigContext,
   ConfigProvider,
+  DisposableStore,
   ErrorBoundary,
   IEventBus,
   MaybeNull,
@@ -27,10 +28,12 @@ import {
 } from '@opensumi/ide-core-browser/lib/components';
 import { VIEW_CONTAINERS } from '@opensumi/ide-core-browser/lib/layout/view-id';
 import { useInjectable, useUpdateOnEventBusEvent } from '@opensumi/ide-core-browser/lib/react-hooks';
+import { monaco } from '@opensumi/ide-monaco/lib/browser/monaco-api';
 
 import { IResource, WorkbenchEditorService } from '../common';
 
 import { EditorComponentRegistryImpl } from './component';
+import { EditorContext, IEditorContext, defaultEditorContext } from './editor.context';
 import styles from './editor.module.less';
 import { EditorGrid, SplitDirection } from './grid/grid.service';
 import { NavigationBar } from './navigation.view';
@@ -324,6 +327,8 @@ export const EditorGroupView = observer(({ group }: { group: EditorGroup }) => {
 });
 
 export const EditorGroupBody = observer(({ group }: { group: EditorGroup }) => {
+  const [context, setContext] = React.useState<IEditorContext>(defaultEditorContext);
+
   const editorBodyRef = React.useRef<HTMLDivElement>(null);
   const editorService = useInjectable(WorkbenchEditorService) as WorkbenchEditorServiceImpl;
   const eventBus = useInjectable(IEventBus) as IEventBus;
@@ -336,6 +341,14 @@ export const EditorGroupBody = observer(({ group }: { group: EditorGroup }) => {
   const forceUpdate = React.useCallback(() => updateState({}), []);
 
   React.useEffect(() => {
+    const disposables = new DisposableStore();
+
+    disposables.add(
+      group.onDidEditorGroupBodyChanged(() => {
+        forceUpdate();
+      }),
+    );
+
     if (codeEditorRef.current) {
       if (cachedEditor[group.name]) {
         cachedEditor[group.name].remove();
@@ -345,6 +358,20 @@ export const EditorGroupBody = observer(({ group }: { group: EditorGroup }) => {
         codeEditorRef.current.appendChild(container);
         cachedEditor[group.name] = container;
         group.createEditor(container);
+        const minimapWith = group.codeEditor.monacoEditor.getOption(monaco.editor.EditorOption.layoutInfo).minimap
+          .minimapWidth;
+        setContext({ minimapWidth: minimapWith });
+
+        disposables.add(
+          group.codeEditor.monacoEditor.onDidChangeConfiguration((e) => {
+            if (e.hasChanged(monaco.editor.EditorOption.layoutInfo)) {
+              setContext({
+                minimapWidth: group.codeEditor.monacoEditor.getOption(monaco.editor.EditorOption.layoutInfo).minimap
+                  .minimapWidth,
+              });
+            }
+          }),
+        );
       }
     }
 
@@ -354,15 +381,11 @@ export const EditorGroupBody = observer(({ group }: { group: EditorGroup }) => {
     if (mergeEditorRef.current) {
       group.attachMergeEditorDom(mergeEditorRef.current);
     }
-  }, [codeEditorRef.current, diffEditorRef.current, mergeEditorRef.current]);
 
-  useDisposable(
-    () =>
-      group.onDidEditorGroupBodyChanged(() => {
-        forceUpdate();
-      }),
-    [],
-  );
+    return () => {
+      disposables.dispose();
+    };
+  }, []);
 
   group.activeComponents.forEach((resources, component) => {
     const initialProps = group.activateComponentsProps.get(component);
@@ -410,79 +433,81 @@ export const EditorGroupBody = observer(({ group }: { group: EditorGroup }) => {
   });
 
   return (
-    <div
-      id={VIEW_CONTAINERS.EDITOR}
-      ref={editorBodyRef}
-      className={styles.kt_editor_body}
-      onDragOver={(e) => {
-        e.preventDefault();
-        if (editorBodyRef.current) {
-          const position = getDragOverPosition(e.nativeEvent, editorBodyRef.current);
-          decorateDragOverElement(editorBodyRef.current, position);
-        }
-      }}
-      onDragLeave={(e) => {
-        if (editorBodyRef.current) {
-          removeDecorationDragOverElement(editorBodyRef.current);
-        }
-      }}
-      onDrop={(e) => {
-        if (editorBodyRef.current) {
-          removeDecorationDragOverElement(editorBodyRef.current);
-          if (e.dataTransfer.getData('uri')) {
-            const uri = new URI(e.dataTransfer.getData('uri'));
-            let sourceGroup: EditorGroup | undefined;
-            if (e.dataTransfer.getData('uri-source-group')) {
-              sourceGroup = editorService.getEditorGroup(e.dataTransfer.getData('uri-source-group'));
-            }
-            group.dropUri(uri, getDragOverPosition(e.nativeEvent, editorBodyRef.current), sourceGroup);
+    <EditorContext.Provider value={context}>
+      <div
+        id={VIEW_CONTAINERS.EDITOR}
+        ref={editorBodyRef}
+        className={styles.kt_editor_body}
+        onDragOver={(e) => {
+          e.preventDefault();
+          if (editorBodyRef.current) {
+            const position = getDragOverPosition(e.nativeEvent, editorBodyRef.current);
+            decorateDragOverElement(editorBodyRef.current, position);
           }
-          if (e.dataTransfer.files.length > 0) {
-            eventBus.fire(
-              new EditorGroupFileDropEvent({
-                group,
-                files: e.dataTransfer.files,
-                position: getDragOverPosition(e.nativeEvent, editorBodyRef.current),
-              }),
-            );
+        }}
+        onDragLeave={(e) => {
+          if (editorBodyRef.current) {
+            removeDecorationDragOverElement(editorBodyRef.current);
           }
-        }
-      }}
-    >
-      {group.currentResource && <EditorSideView side={'top'} resource={group.currentResource}></EditorSideView>}
-      {!editorHasNoTab && <NavigationBar editorGroup={group} />}
-      <div className={styles.kt_editor_components}>
-        <div
-          className={cls({
-            [styles_kt_editor_component]: true,
-            [styles.kt_hidden]: !group.currentOpenType || group.currentOpenType.type !== EditorOpenType.component,
-          })}
-        >
-          {components}
+        }}
+        onDrop={(e) => {
+          if (editorBodyRef.current) {
+            removeDecorationDragOverElement(editorBodyRef.current);
+            if (e.dataTransfer.getData('uri')) {
+              const uri = new URI(e.dataTransfer.getData('uri'));
+              let sourceGroup: EditorGroup | undefined;
+              if (e.dataTransfer.getData('uri-source-group')) {
+                sourceGroup = editorService.getEditorGroup(e.dataTransfer.getData('uri-source-group'));
+              }
+              group.dropUri(uri, getDragOverPosition(e.nativeEvent, editorBodyRef.current), sourceGroup);
+            }
+            if (e.dataTransfer.files.length > 0) {
+              eventBus.fire(
+                new EditorGroupFileDropEvent({
+                  group,
+                  files: e.dataTransfer.files,
+                  position: getDragOverPosition(e.nativeEvent, editorBodyRef.current),
+                }),
+              );
+            }
+          }
+        }}
+      >
+        {group.currentResource && <EditorSideView side={'top'} resource={group.currentResource}></EditorSideView>}
+        {!editorHasNoTab && <NavigationBar editorGroup={group} />}
+        <div className={styles.kt_editor_components}>
+          <div
+            className={cls({
+              [styles_kt_editor_component]: true,
+              [styles.kt_hidden]: !group.currentOpenType || group.currentOpenType.type !== EditorOpenType.component,
+            })}
+          >
+            {components}
+          </div>
+          <div
+            className={cls({
+              [styles.kt_editor_code_editor]: true,
+              [styles_kt_editor_component]: true,
+              [styles.kt_hidden]: !group.currentOpenType || group.currentOpenType.type !== EditorOpenType.code,
+            })}
+            ref={codeEditorRef}
+          />
+          <div
+            className={cls(styles.kt_editor_diff_editor, styles_kt_editor_component, {
+              [styles.kt_hidden]: !group.currentOpenType || group.currentOpenType.type !== EditorOpenType.diff,
+            })}
+            ref={diffEditorRef}
+          />
+          <div
+            className={cls(styles.kt_editor_diff_3_editor, styles_kt_editor_component, {
+              [styles.kt_hidden]: !group.currentOpenType || group.currentOpenType.type !== EditorOpenType.mergeEditor,
+            })}
+            ref={mergeEditorRef}
+          />
         </div>
-        <div
-          className={cls({
-            [styles.kt_editor_code_editor]: true,
-            [styles_kt_editor_component]: true,
-            [styles.kt_hidden]: !group.currentOpenType || group.currentOpenType.type !== EditorOpenType.code,
-          })}
-          ref={codeEditorRef}
-        />
-        <div
-          className={cls(styles.kt_editor_diff_editor, styles_kt_editor_component, {
-            [styles.kt_hidden]: !group.currentOpenType || group.currentOpenType.type !== EditorOpenType.diff,
-          })}
-          ref={diffEditorRef}
-        />
-        <div
-          className={cls(styles.kt_editor_diff_3_editor, styles_kt_editor_component, {
-            [styles.kt_hidden]: !group.currentOpenType || group.currentOpenType.type !== EditorOpenType.mergeEditor,
-          })}
-          ref={mergeEditorRef}
-        />
+        {group.currentResource && <EditorSideView side={'bottom'} resource={group.currentResource}></EditorSideView>}
       </div>
-      {group.currentResource && <EditorSideView side={'bottom'} resource={group.currentResource}></EditorSideView>}
-    </div>
+    </EditorContext.Provider>
   );
 });
 

package/src/browser/tab.view.tsx

@@ -15,7 +15,6 @@ import React, {
 
 import { Scrollbars } from '@opensumi/ide-components';
 import {
-  AppConfig,
   ConfigContext,
   Disposable,
   DisposableCollection,
@@ -32,6 +31,7 @@ import {
   useDesignStyles,
 } from '@opensumi/ide-core-browser';
 import { InlineMenuBar } from '@opensumi/ide-core-browser/lib/components/actions';
+import { LayoutViewSizeConfig } from '@opensumi/ide-core-browser/lib/layout/constants';
 import { VIEW_CONTAINERS } from '@opensumi/ide-core-browser/lib/layout/view-id';
 import { IMenuRegistry, MenuId } from '@opensumi/ide-core-browser/lib/menu/next';
 import { useInjectable, useUpdateOnEventBusEvent } from '@opensumi/ide-core-browser/lib/react-hooks';
@@ -70,7 +70,7 @@ export const Tabs = ({ group }: ITabsProps) => {
   const preferenceService = useInjectable<PreferenceService>(PreferenceService);
   const menuRegistry = useInjectable<IMenuRegistry>(IMenuRegistry);
   const editorTabService = useInjectable<IEditorTabService>(IEditorTabService);
-  const appConfig = useInjectable<AppConfig>(AppConfig);
+  const layoutViewSize = useInjectable<LayoutViewSizeConfig>(LayoutViewSizeConfig);
 
   const styles_tab_right = useDesignStyles(styles.tab_right, 'tab_right');
   const styles_close_tab = useDesignStyles(styles.close_tab, 'close_tab');
@@ -415,8 +415,8 @@ export const Tabs = ({ group }: ITabsProps) => {
               })}
               style={
                 wrapMode && i === group.resources.length - 1
-                  ? { marginRight: lastMarginRight, height: appConfig.layoutViewSize!.editorTabsHeight }
-                  : { height: appConfig.layoutViewSize!.editorTabsHeight }
+                  ? { marginRight: lastMarginRight, height: layoutViewSize.editorTabsHeight }
+                  : { height: layoutViewSize.editorTabsHeight }
               }
               onContextMenu={(event) => {
                 tabTitleMenuService.show(event.nativeEvent.x, event.nativeEvent.y, resource && resource.uri, group);
@@ -529,7 +529,8 @@ export const EditorActions = forwardRef<HTMLDivElement, IEditorActionsProps>(
 
     const editorActionRegistry = useInjectable<IEditorActionRegistry>(IEditorActionRegistry);
     const editorService: WorkbenchEditorServiceImpl = useInjectable(WorkbenchEditorService);
-    const appConfig = useInjectable<AppConfig>(AppConfig);
+    const layoutViewSize = useInjectable<LayoutViewSizeConfig>(LayoutViewSizeConfig);
+
     const menu = editorActionRegistry.getMenu(group);
     const [hasFocus, setHasFocus] = useState<boolean>(editorService.currentEditorGroup === group);
     const [args, setArgs] = useState<[URI, IEditorGroup, MaybeNull<URI>] | undefined>(acquireArgs());
@@ -561,7 +562,7 @@ export const EditorActions = forwardRef<HTMLDivElement, IEditorActionsProps>(
       <div
         ref={ref}
         className={cls(styles_editor_actions, className)}
-        style={{ height: appConfig.layoutViewSize!.editorTabsHeight }}
+        style={{ height: layoutViewSize.editorTabsHeight }}
       >
         <InlineMenuBar<URI, IEditorGroup, MaybeNull<URI>>
           menus={menu}

package/src/browser/types.ts

@@ -275,6 +275,14 @@ export interface IThemedCssStyle extends IDisposable {
   overviewRulerColor?: string | IThemeColor;
 }
 
+export interface IThemedCssStyleCollection {
+  default: IThemedCssStyle;
+  light: IThemedCssStyle | null;
+  dark: IThemedCssStyle | null;
+
+  dispose(): void;
+}
+
 export const IEditorDecorationCollectionService = Symbol('IEditorDecorationCollectionService');
 
 export class EditorSelectionChangeEvent extends BasicEvent<IEditorSelectionChangeEventPayload> {}

package/src/browser/workbench-editor.service.ts

@@ -2061,7 +2061,7 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
   }
 
   /**
-   * 当前打开的resource
+   * current opened resource
    */
   get currentResource(): MaybeNull<IResource> {
     return this._currentResource;

package/src/common/editor.ts

@@ -567,6 +567,8 @@ export interface IResourceOpenOptions {
 
   /**
    * @deprecated use focus instead
+   *
+   * An optional flag that when `true` will stop the editor from taking focus.
    */
   preserveFocus?: boolean;