@opensumi/ide-editor 3.2.6-next-1725003105.0 → 3.2.6-next-1725270864.0

package/src/browser/navigation.view.tsx

@@ -8,6 +8,7 @@ import { Icon, Scrollbars } from '@opensumi/ide-components';
 import {
   Disposable,
   DomListener,
+  fastdom,
   getIcon,
   useDesignStyles,
   useInjectable,
@@ -122,16 +123,18 @@ export const NavigationMenu = observer(({ model }: { model: NavigationMenuModel
   const viewService = useInjectable(NavigationBarViewService) as NavigationBarViewService;
 
   const scrollToCurrent = useCallback(() => {
-    if (scrollerContainer.current) {
+    fastdom.measure(() => {
       try {
-        const current = scrollerContainer.current.querySelector(`.${styles.navigation_menu_item_current}`);
-        if (current) {
-          current.scrollIntoView({ behavior: 'auto', block: 'center' });
+        if (scrollerContainer.current) {
+          const current = scrollerContainer.current.querySelector(`.${styles.navigation_menu_item_current}`);
+          if (current) {
+            current.scrollIntoView({ behavior: 'auto', block: 'center' });
+          }
         }
       } catch (e) {
         // noop
       }
-    }
+    });
   }, [scrollerContainer.current]);
 
   return (

package/src/browser/preference/converter.ts

@@ -1,114 +1,10 @@
 import { Uri, objects } from '@opensumi/ide-core-browser';
-import * as monaco from '@opensumi/ide-monaco';
 import { IConfigurationService } from '@opensumi/monaco-editor-core/esm/vs/platform/configuration/common/configuration';
 
 import { IConvertedMonacoOptions } from '../types';
 
 const { removeUndefined } = objects;
 
-/**
- * 计算由ConfigurationService设置值带来的monaco编辑器的属性
- * @param configurationService IConfigurationService
- * @param updatingKey 需要处理的Preference key。如果没有这个值，默认处理全部。
- */
-export function getConvertedMonacoOptions(
-  configurationService: IConfigurationService,
-  resourceUri?: string,
-  language?: string,
-  updatingKey?: string[],
-): IConvertedMonacoOptions {
-  const editorOptions: Partial<monaco.editor.IEditorOptions> = {};
-  const diffOptions: Partial<monaco.editor.IDiffEditorOptions> = {};
-  const modelOptions: Partial<monaco.editor.ITextModelUpdateOptions> = {};
-  const editorOptionsKeys = [] as string[];
-  const textModelUpdateOptionsKeys = [] as string[];
-  const diffEditorOptionsKeys = [] as string[];
-
-  if (updatingKey) {
-    updatingKey.forEach((key) => {
-      if (editorOptionsConverters.has(key)) {
-        editorOptionsKeys.push(key);
-      } else if (textModelUpdateOptionsConverters.has(key)) {
-        textModelUpdateOptionsKeys.push(key);
-      } else if (diffEditorOptionsConverters.has(key)) {
-        diffEditorOptionsKeys.push(key);
-      }
-    });
-  } else {
-    editorOptionsKeys.push(...editorOptionsConverters.keys());
-    textModelUpdateOptionsKeys.push(...textModelUpdateOptionsConverters.keys());
-    diffEditorOptionsKeys.push(...diffEditorOptionsConverters.keys());
-  }
-
-  editorOptionsKeys.forEach((key) => {
-    const value = configurationService.getValue(key, {
-      resource: resourceUri ? Uri.parse(resourceUri) : undefined,
-      overrideIdentifier: language,
-    });
-    if (value === undefined) {
-      return;
-    }
-    if (!editorOptionsConverters.get(key)) {
-      editorOptions[key] = value;
-    } else {
-      const converter: IMonacoOptionsConverter = editorOptionsConverters.get(key)! as IMonacoOptionsConverter;
-      if (!editorOptions[converter.monaco]) {
-        editorOptions[converter.monaco] = converter.convert ? converter.convert(value) : value;
-      } else {
-        editorOptions[converter.monaco] = {
-          ...editorOptions[converter.monaco],
-          ...(converter.convert ? converter.convert(value) : value),
-        };
-      }
-    }
-  });
-
-  textModelUpdateOptionsKeys.forEach((key) => {
-    const value = configurationService.getValue(key, {
-      resource: resourceUri ? Uri.parse(resourceUri) : undefined,
-      overrideIdentifier: language,
-    });
-    if (value === undefined) {
-      return;
-    }
-    if (!textModelUpdateOptionsConverters.get(key)) {
-      modelOptions[key] = value;
-    } else {
-      const converter: IMonacoOptionsConverter = textModelUpdateOptionsConverters.get(key)! as IMonacoOptionsConverter;
-      modelOptions[converter.monaco] = converter.convert ? converter.convert(value) : value;
-    }
-  });
-
-  diffEditorOptionsKeys.forEach((key) => {
-    const value = configurationService.getValue(key, {
-      resource: resourceUri ? Uri.parse(resourceUri) : undefined,
-      overrideIdentifier: language,
-    });
-    if (value === undefined) {
-      return;
-    }
-    if (!diffEditorOptionsConverters.get(key)) {
-      editorOptions[key] = value;
-    } else {
-      const converter: IMonacoOptionsConverter = diffEditorOptionsConverters.get(key)! as IMonacoOptionsConverter;
-      if (diffOptions[converter.monaco]) {
-        diffOptions[converter.monaco] = {
-          ...diffOptions[converter.monaco],
-          ...(converter.convert ? converter.convert(value) : value),
-        };
-      } else {
-        diffOptions[converter.monaco] = converter.convert ? converter.convert(value) : value;
-      }
-    }
-  });
-
-  return {
-    editorOptions: removeUndefined(editorOptions),
-    modelOptions: removeUndefined(modelOptions),
-    diffOptions: removeUndefined(diffOptions),
-  };
-}
-
 type NoConverter = false;
 type KaitianPreferenceKey = string;
 type MonacoPreferenceKey = string;
@@ -900,3 +796,65 @@ export function isEditorOption(key: string) {
 export function isDiffEditorOption(key: string): boolean {
   return isContainOptionKey(key, diffEditorOptionsConverters);
 }
+
+const editorOptionsConvertersKey = [...editorOptionsConverters.keys()];
+const textModelUpdateOptionsConvertersKey = [...textModelUpdateOptionsConverters.keys()];
+const diffEditorOptionsConvertersKey = [...diffEditorOptionsConverters.keys()];
+
+/**
+ * 计算由ConfigurationService设置值带来的monaco编辑器的属性
+ * @param configurationService IConfigurationService
+ * @param updatingKey 需要处理的Preference key。如果没有这个值，默认处理全部。
+ */
+export function getConvertedMonacoOptions(
+  configurationService: IConfigurationService,
+  resourceUri?: string,
+  language?: string,
+  updatingKey?: string[],
+): IConvertedMonacoOptions {
+  const resource = resourceUri ? Uri.parse(resourceUri) : undefined;
+
+  const getOptions = (keys: string[], converters: Map<string, NoConverter | IMonacoOptionsConverter>): Partial<any> =>
+    keys.reduce((options, key) => {
+      const value = configurationService.getValue(key, { resource, overrideIdentifier: language });
+      if (value !== undefined) {
+        const converter = converters.get(key);
+        if (!converter) {
+          options[key] = value;
+          return options;
+        }
+
+        const targetKey = converter ? converter.monaco : key;
+        const convertedValue = converter?.convert ? converter.convert(value) : value;
+
+        if (!options[targetKey]) {
+          options[targetKey] = convertedValue;
+        } else {
+          Object.assign(options[targetKey], convertedValue);
+        }
+      }
+      return options;
+    }, {});
+
+  const editorOptionsKeys = updatingKey
+    ? updatingKey.filter((key) => editorOptionsConverters.has(key))
+    : [...editorOptionsConvertersKey];
+
+  const textModelUpdateOptionsKeys = updatingKey
+    ? updatingKey.filter((key) => textModelUpdateOptionsConverters.has(key))
+    : [...textModelUpdateOptionsConvertersKey];
+
+  const diffEditorOptionsKeys = updatingKey
+    ? updatingKey.filter((key) => diffEditorOptionsConverters.has(key))
+    : [...diffEditorOptionsConvertersKey];
+
+  const editorOptions = removeUndefined(getOptions(editorOptionsKeys, editorOptionsConverters));
+  const modelOptions = removeUndefined(getOptions(textModelUpdateOptionsKeys, textModelUpdateOptionsConverters));
+  const diffOptions = removeUndefined(getOptions(diffEditorOptionsKeys, diffEditorOptionsConverters));
+
+  return {
+    editorOptions,
+    modelOptions,
+    diffOptions,
+  };
+}

package/src/browser/preference/schema.ts

@@ -112,7 +112,7 @@ export const EDITOR_DEFAULTS = {
   readOnly: false,
   mouseStyle: 'text',
   disableLayerHinting: false,
-  automaticLayout: true, // Modified
+  automaticLayout: true,
   wordWrap: 'off',
   wordWrapColumn: 80,
   wordWrapMinified: true,

package/src/browser/tab.view.tsx

@@ -26,6 +26,7 @@ import {
   PreferenceService,
   ResizeEvent,
   URI,
+  fastdom,
   getExternalIcon,
   getIcon,
   getSlotLocation,
@@ -184,9 +185,9 @@ export const Tabs = ({ group }: ITabsProps) => {
   );
 
   const scrollToCurrent = useCallback(() => {
-    if (tabContainer.current) {
-      if (group.currentResource) {
-        try {
+    fastdom.measure(() => {
+      try {
+        if (tabContainer.current && group.currentResource) {
           const currentTab = tabContainer.current.querySelector(
             '.' + styles.kt_editor_tab + "[data-uri='" + group.currentResource.uri.toString() + "']",
           );
@@ -196,24 +197,25 @@ export const Tabs = ({ group }: ITabsProps) => {
               inline: 'nearest',
             });
           }
-        } catch (e) {
-          // noop
         }
+      } catch (e) {
+        // noop
       }
-    }
+    });
   }, [group, tabContainer.current]);
 
   const updateTabMarginRight = useCallback(() => {
     if (editorActionUpdateTimer.current) {
       clearTimeout(editorActionUpdateTimer.current);
-      editorActionUpdateTimer.current = null;
     }
-    const timer = setTimeout(() => {
-      if (editorActionRef.current?.offsetWidth !== lastMarginRight) {
-        setLastMarginRight(editorActionRef.current?.offsetWidth);
-      }
+    editorActionUpdateTimer.current = setTimeout(() => {
+      fastdom.measure(() => {
+        const _marginReight = editorActionRef.current?.offsetWidth;
+        if (_marginReight !== lastMarginRight) {
+          setLastMarginRight(_marginReight);
+        }
+      });
     }, 200);
-    editorActionUpdateTimer.current = timer;
   }, [editorActionRef.current, editorActionUpdateTimer.current, lastMarginRight]);
 
   useEffect(() => {
@@ -231,17 +233,13 @@ export const Tabs = ({ group }: ITabsProps) => {
         disposer.addDispose(new DomListener(tabContainer.current, 'mousewheel', preventNavigation));
       }
       disposer.addDispose(
-        eventBus.on(ResizeEvent, (event) => {
-          if (event.payload.slotLocation === slotLocation) {
-            scrollToCurrent();
-          }
+        eventBus.onDirective(ResizeEvent.createDirective(slotLocation), () => {
+          scrollToCurrent();
         }),
       );
       disposer.addDispose(
-        eventBus.on(GridResizeEvent, (event) => {
-          if (event.payload.gridId === group.grid.uid) {
-            scrollToCurrent();
-          }
+        eventBus.onDirective(GridResizeEvent.createDirective(group.grid.uid), () => {
+          scrollToCurrent();
         }),
       );
       return () => {
@@ -251,27 +249,29 @@ export const Tabs = ({ group }: ITabsProps) => {
   }, [wrapMode]);
 
   const layoutLastInRow = useCallback(() => {
-    if (contentRef.current && wrapMode) {
-      const newMap: Map<number, boolean> = new Map();
-
-      let currentTabY: number | undefined;
-      let lastTab: HTMLDivElement | undefined;
-      const tabs = Array.from(contentRef.current.children);
-      // 最后一个元素是editorAction
-      tabs.pop();
-      tabs.forEach((child: HTMLDivElement) => {
-        if (child.offsetTop !== currentTabY) {
-          currentTabY = child.offsetTop;
-          if (lastTab) {
-            newMap.set(tabs.indexOf(lastTab), true);
+    fastdom.measureAtNextFrame(() => {
+      if (contentRef.current && wrapMode) {
+        const newMap: Map<number, boolean> = new Map();
+
+        let currentTabY: number | undefined;
+        let lastTab: HTMLDivElement | undefined;
+        const tabs = Array.from(contentRef.current.children);
+        // 最后一个元素是editorAction
+        tabs.pop();
+        tabs.forEach((child: HTMLDivElement) => {
+          if (child.offsetTop !== currentTabY) {
+            currentTabY = child.offsetTop;
+            if (lastTab) {
+              newMap.set(tabs.indexOf(lastTab), true);
+            }
           }
-        }
-        lastTab = child;
-        newMap.set(tabs.indexOf(child), false);
-      });
-      // 最后一个 tab 不做 grow 处理
-      setTabMap(newMap);
-    }
+          lastTab = child;
+          newMap.set(tabs.indexOf(child), false);
+        });
+        // 最后一个 tab 不做 grow 处理
+        setTabMap(newMap);
+      }
+    });
   }, [contentRef.current, wrapMode]);
 
   useEffect(() => {
@@ -282,10 +282,8 @@ export const Tabs = ({ group }: ITabsProps) => {
   useEffect(() => {
     const disposable = new DisposableCollection();
     disposable.push(
-      eventBus.on(ResizeEvent, (e) => {
-        if (e.payload.slotLocation === slotLocation) {
-          layoutLastInRow();
-        }
+      eventBus.onDirective(ResizeEvent.createDirective(slotLocation), () => {
+        layoutLastInRow();
       }),
     );
     disposable.push(
@@ -298,7 +296,7 @@ export const Tabs = ({ group }: ITabsProps) => {
     // 当前选中的group变化时宽度变化
     disposable.push(
       editorService.onDidCurrentEditorGroupChanged(() => {
-        window.requestAnimationFrame(updateTabMarginRight);
+        updateTabMarginRight();
       }),
     );
     // editorMenu变化时宽度可能变化
@@ -308,7 +306,7 @@ export const Tabs = ({ group }: ITabsProps) => {
         () => {},
         200,
       )(() => {
-        window.requestAnimationFrame(updateTabMarginRight);
+        updateTabMarginRight();
       }),
     );
 

package/src/browser/types.ts

@@ -192,7 +192,11 @@ export interface IGridResizeEventPayload {
   gridId: string;
 }
 
-export class GridResizeEvent extends BasicEvent<IGridResizeEventPayload> {}
+export class GridResizeEvent extends BasicEvent<IGridResizeEventPayload> {
+  static createDirective(uid: string) {
+    return `grid-resize-${uid}`;
+  }
+}
 
 export class EditorGroupOpenEvent extends BasicEvent<{ group: IEditorGroup; resource: IResource }> {}
 export class EditorGroupCloseEvent extends BasicEvent<{ group: IEditorGroup; resource: IResource }> {}

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

@@ -13,6 +13,7 @@ import {
   RecentFilesManager,
   ResizeEvent,
   ServiceNames,
+  fastdom,
   getSlotLocation,
   toMarkdown,
 } from '@opensumi/ide-core-browser';
@@ -794,11 +795,19 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
 
   constructor(public readonly name: string, public readonly groupId: number) {
     super();
-    this.eventBus.on(ResizeEvent, (e: ResizeEvent) => {
-      if (e.payload.slotLocation === getSlotLocation('@opensumi/ide-editor', this.config.layoutConfig)) {
-        this.doLayoutEditors();
-      }
-    });
+    let toDispose: IDisposable | undefined;
+    this.eventBus.onDirective(
+      ResizeEvent.createDirective(getSlotLocation('@opensumi/ide-editor', this.config.layoutConfig)),
+      () => {
+        if (toDispose) {
+          toDispose.dispose();
+        }
+
+        toDispose = fastdom.mutate(() => {
+          this._layoutEditorWorker();
+        });
+      },
+    );
     this.eventBus.on(GridResizeEvent, (e: GridResizeEvent) => {
       if (e.payload.gridId === this.grid.uid) {
         this.doLayoutEditors();
@@ -849,19 +858,20 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
   }
 
   layoutEditors() {
-    if (this._domNode) {
-      const currentWidth = this._domNode.offsetWidth;
-      const currentHeight = this._domNode.offsetHeight;
-      if (currentWidth !== this._prevDomWidth || currentHeight !== this._prevDomHeight) {
-        this.doLayoutEditors();
+    fastdom.measure(() => {
+      if (this._domNode) {
+        const currentWidth = this._domNode.offsetWidth;
+        const currentHeight = this._domNode.offsetHeight;
+        if (currentWidth !== this._prevDomWidth || currentHeight !== this._prevDomHeight) {
+          this.doLayoutEditors();
+        }
+        this._prevDomWidth = currentWidth;
+        this._prevDomHeight = currentHeight;
       }
-      this._prevDomWidth = currentWidth;
-      this._prevDomHeight = currentHeight;
-    }
+    });
   }
 
-  @debounce(100)
-  doLayoutEditors() {
+  private _layoutEditorWorker() {
     if (this.codeEditor) {
       if (this.currentOpenType && this.currentOpenType.type === EditorOpenType.code) {
         this.codeEditor.layout();
@@ -888,6 +898,11 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
     }
   }
 
+  @debounce(16 * 5)
+  doLayoutEditors() {
+    this._layoutEditorWorker();
+  }
+
   setContextKeys() {
     if (!this._resourceContext) {
       const getLanguageFromModel = (uri: URI) => {
@@ -1124,9 +1139,15 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
         [ServiceNames.CONTEXT_KEY_SERVICE]: this.contextKeyService.contextKeyService,
       },
     );
+
     setTimeout(() => {
       this.codeEditor.layout();
     });
+    this.addDispose(
+      this.codeEditor.onRefOpen(() => {
+        this.codeEditor.layout();
+      }),
+    );
     this.toDispose.push(
       this.codeEditor.onCursorPositionChanged((e) => {
         this._onCurrentEditorCursorChange.fire(e);

package/src/common/editor.ts

@@ -15,17 +15,18 @@ import {
   MaybeNull,
   URI,
 } from '@opensumi/ide-core-common';
-
-// eslint-disable-next-line import/no-restricted-paths
-import { IDocModelUpdateOptions } from '../browser/doc-model/types';
+import { IDimension } from '@opensumi/ide-monaco';
 
 import { IResource } from './resource';
+import { IDocModelUpdateOptions } from './types';
 
-// eslint-disable-next-line import/no-restricted-paths
-import type { EOL, ICodeEditor as IMonacoCodeEditor } from '@opensumi/ide-monaco/lib/browser/monaco-api/types';
-// eslint-disable-next-line import/no-restricted-paths
-import type { IEditorOptions } from '@opensumi/monaco-editor-core/esm/vs/editor/common/config/editorOptions';
-import type { ITextModel, ITextModelUpdateOptions } from '@opensumi/monaco-editor-core/esm/vs/editor/common/model';
+import type {
+  EOL,
+  IEditorOptions,
+  ICodeEditor as IMonacoCodeEditor,
+  ITextModel,
+  ITextModelUpdateOptions,
+} from '@opensumi/ide-monaco';
 
 export { ShowLightbulbIconMode } from '@opensumi/ide-monaco';
 
@@ -175,7 +176,8 @@ export interface IEditorDocumentModel extends IDisposable {
   updateEncoding(encoding: string): Promise<void>;
 
   // setEncoding(encoding: string, preferredEncoding, mode: EncodingMode): Promise<void>;
-  updateOptions(options: IDocModelUpdateOptions);
+
+  updateOptions(options: IDocModelUpdateOptions): void;
 }
 
 export type IEditorDocumentModelRef = IRef<IEditorDocumentModel>;
@@ -205,7 +207,7 @@ export enum EditorType {
 }
 
 /**
- * 一个IEditor代表了一个最小的编辑器单元，可以是 CodeEditor 中的一个，也可以是 DiffEditor 中的两个
+ * 一个 IEditor 代表了一个最小的编辑器单元，可以是 CodeEditor 中的一个，也可以是 DiffEditor 中的两个
  */
 export interface IEditor {
   /**
@@ -278,7 +280,7 @@ export interface IUndoStopOptions {
 }
 
 export interface ICodeEditor extends IEditor, IDisposable {
-  layout(): void;
+  layout(dimension?: IDimension, postponeRendering?: boolean): void;
 
   /**
    * 打开一个 document

package/src/common/types.ts

@@ -0,0 +1,5 @@
+import * as monaco from '@opensumi/ide-monaco';
+
+export interface IDocModelUpdateOptions extends monaco.editor.ITextModelUpdateOptions {
+  detectIndentation?: boolean;
+}