@opensumi/ide-editor 2.21.13 → 2.22.0

package/src/browser/editor.module.less

@@ -0,0 +1,548 @@
+@import '~@opensumi/ide-components/lib/style/mixins.less';
+@import '~@opensumi/ide-core-browser/lib/style/variable.less';
+
+.kt_workbench_editor {
+  height: 100%;
+  background-color: var(--editor-background);
+  display: flex;
+  border-top: 1px solid var(--tab-border);
+}
+.kt_editor_main_wrapper {
+  flex-grow: 1;
+  max-width: 100%;
+}
+
+.kt_editor_right_widget {
+  flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.kt_editor_components {
+  height: 0;
+  flex-grow: 1;
+}
+
+.kt_editor_component {
+  height: 100%;
+  > div {
+    height: 100%;
+  }
+}
+.kt_editor_code_editor {
+  > div {
+    height: 100%;
+  }
+}
+.kt_editor_group {
+  height: 100%;
+  outline: none;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  background-color: var(--editorGroup-emptyBackground);
+
+  .kt_editor_background {
+    background-position: center;
+    background-repeat: no-repeat;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+  .kt_editor_tabs {
+    display: flex;
+    .editor_actions {
+      flex-shrink: 0;
+      height: 100%;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 0 5px 0 10px;
+      position: relative;
+      background: var(--editorGroupHeader-tabsBackground);
+      &::before {
+        content: '';
+        height: 1px;
+        background: var(--tab-border);
+        top: -1px;
+        width: 100%;
+        left: 0;
+        position: absolute;
+        display: block;
+        z-index: 0;
+      }
+      &::after {
+        content: '';
+        height: 1px;
+        background: var(--tab-border);
+        bottom: 0;
+        width: 100%;
+        left: 0;
+        position: absolute;
+        display: block;
+        z-index: 0;
+      }
+      .editor_action_wrapper {
+        margin-left: 8px;
+        position: relative;
+        .editor_action {
+          width: 14px;
+          height: 14px;
+          line-height: 14px;
+          font-size: 14px;
+          cursor: pointer;
+        }
+        &:hover {
+          > .editor-action {
+            transform: scale(1.1);
+          }
+        }
+        &:global {
+          &.mask-mode {
+            background: var(--foreground);
+            height: 14px;
+            width: 14px;
+          }
+        }
+      }
+    }
+  }
+
+  .kt_editor_tabs_scroll_wrapper {
+    flex-grow: 1;
+    width: 100%;
+    position: relative;
+    background-color: var(--editorGroupHeader-tabsBackground);
+    &::after {
+      position: absolute;
+      content: '';
+      height: 1px;
+      width: 100%;
+      bottom: 0;
+      left: 0;
+      z-index: 10;
+      background-color: var(--tab-border);
+    }
+    &.kt_on_drag_over {
+      background-color: var(--editorGroup-dropBackground);
+    }
+  }
+
+  .kt_editor_tabs_scroll_wrapper {
+    flex-grow: 1;
+    width: 100%;
+    position: relative;
+  }
+
+  .kt_editor_tabs_scroll {
+    overflow-y: hidden;
+    :global(.loading_indicator) {
+      width: 16px;
+      height: 22px;
+    }
+  }
+  .kt_editor_tab_preview {
+    font-style: italic;
+    :global(.file-icon) {
+      font-style: normal;
+    }
+  }
+
+  .kt_editor_wrap_mode_action {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+  }
+
+  .kt_editor_wrap_container {
+    .kt_editor_tabs_content {
+      flex-wrap: wrap;
+      width: 100%;
+      background: var(--editorGroupHeader-tabsBackground);
+      &::before {
+        content: '';
+        height: 1px;
+        background: var(--tab-border);
+        bottom: 0;
+        width: 100%;
+        left: 0;
+        position: absolute;
+        display: block;
+        z-index: 0;
+      }
+    }
+  }
+  .last_in_row {
+    flex-grow: 1;
+  }
+  .kt_editor_tabs_content {
+    overflow-y: hidden;
+    display: inline-flex;
+    position: relative;
+    &.kt_on_drag_over {
+      background-color: var(--editorGroup-dropBackground);
+    }
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    .kt_editor_tab {
+      display: flex;
+      position: relative;
+      align-items: center;
+      flex-shrink: 1;
+      flex-grow: 1;
+      padding: 0 12px;
+      border-right: 1px solid var(--tab-border);
+      height: 100%;
+      line-height: 100%;
+      font-size: 12px;
+      min-width: 112px;
+      cursor: pointer;
+      color: var(--tab-inactiveForeground);
+      background: var(--tab-inactiveBackground);
+      border-top: 1px solid transparent;
+      box-sizing: border-box;
+      z-index: 1;
+      word-break: keep-all;
+      white-space: nowrap;
+      &::after {
+        position: absolute;
+        content: '';
+        height: 1px;
+        width: 100%;
+        bottom: 0;
+        left: 0;
+        z-index: 10;
+        background-color: var(--tab-border);
+      }
+      .tab_loading {
+        display: block;
+        position: absolute;
+        font-size: 14px;
+        left: 13.5px;
+      }
+      :global(.icon-label::before) {
+        font-size: calc(1.5 * 14px) !important;
+        transition: transform 0.2s ease-in;
+      }
+      .small::before {
+        transform: scale(0.8);
+      }
+      &:hover {
+        background-color: var(--tab-hoverBackground);
+      }
+      div:first-child {
+        margin-right: 5px;
+        flex-shrink: 0;
+        flex-grow: 0;
+        &::before {
+          background-size: 14px;
+          background-position: 2px;
+        }
+      }
+      .kt_editor_close_icon {
+        margin-right: 0 !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &::before {
+          font-size: 14px;
+        }
+      }
+      div:nth-child(2) {
+        flex-grow: 1;
+        text-align: left;
+      }
+      .subname {
+        color: var(--descriptionForeground);
+        margin-left: 10px;
+        font-size: 12px;
+      }
+      div.tab_right {
+        margin-left: 8px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 16px;
+        flex-shrink: 0;
+        flex-grow: 0;
+        height: 16px;
+        line-height: 16px;
+        font-size: 16px;
+        border-radius: 4px;
+        padding: 1px;
+        &:hover {
+          transform: scale(1.1);
+          background-color: var(--kt-icon-hoverBackground);
+        }
+      }
+      .dirty {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &::before {
+          content: '';
+          width: 8px;
+          height: 8px;
+          border-radius: 5px;
+          background-color: var(--kt-dirtyDot-foreground);
+        }
+      }
+      &.kt_editor_tab_current {
+        position: relative;
+        background: var(--tab-activeBackground);
+        color: var(--tab-activeForeground);
+        &::before {
+          position: absolute;
+          content: '';
+          height: 1px;
+          width: 100%;
+          top: -1px;
+          left: 0;
+          z-index: 999;
+          background-color: var(--tab-activeBorderTop);
+        }
+        .dirty {
+          &::before {
+            background-color: var(--kt-dirtyDot-foreground);
+          }
+        }
+      }
+      &.kt_on_drag_over {
+        background-color: var(--editorGroup-dropBackground);
+      }
+      .close_tab {
+        display: none;
+      }
+      &:hover {
+        .dirty {
+          display: none;
+        }
+        .close_tab {
+          display: block;
+        }
+      }
+    }
+  }
+
+  .editorGroupHeader {
+    z-index: 0;
+    position: relative;
+  }
+
+  .kt_editor_body {
+    flex: 1;
+    position: relative;
+    background-repeat: no-repeat;
+    background-position: center;
+    display: flex;
+    flex-direction: column;
+    &::after {
+      z-index: 100;
+      content: '';
+      background: var(--editorGroup-dropBackground);
+      opacity: 0;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      display: none;
+      user-select: none;
+      pointer-events: none;
+      transition: all 200ms ease-in-out;
+    }
+    &.kt_on_drag_over {
+      &::after {
+        opacity: 0.5;
+        display: block;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+      }
+      &.kt_on_drag_over_left {
+        &::after {
+          opacity: 0.5;
+          display: block;
+          width: 50%;
+          height: 100%;
+          top: 0;
+          left: 0;
+        }
+      }
+      &.kt_on_drag_over_right {
+        &::after {
+          opacity: 0.5;
+          display: block;
+          width: 50%;
+          height: 100%;
+          top: 0;
+          left: 50%;
+        }
+      }
+      &.kt_on_drag_over_top {
+        &::after {
+          opacity: 0.5;
+          display: block;
+          width: 100%;
+          height: 50%;
+          top: 0;
+          left: 0;
+        }
+      }
+      &.kt_on_drag_over_bottom {
+        &::after {
+          opacity: 0.5;
+          display: block;
+          width: 100%;
+          height: 50%;
+          top: 50%;
+          left: 0;
+        }
+      }
+    }
+  }
+}
+
+.kt_editor_component_wrapper {
+  height: 100%;
+  > div {
+    height: 100%;
+  }
+}
+
+.kt_hidden {
+  display: none !important;
+}
+
+.kt_grid_vertical {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.kt_grid_vertical_child {
+  height: 100%;
+}
+
+.kt_grid_horizontal {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+}
+.kt_grid_horizontal_child {
+  height: 100%;
+}
+.open_type_switcher {
+  position: absolute;
+  bottom: 37px;
+  right: 10px;
+  z-index: 100;
+  background: var(--editorWidget-background);
+  .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);
+    }
+  }
+}
+
+.editor_action_tip {
+  display: flex;
+  position: absolute;
+  bottom: calc(100% + 10px);
+  right: -20px;
+  color: var(--kt-popover-foreground);
+  background: var(--kt-popover-background);
+  border-color: var(--kt-popover-border);
+  .overlay-shadow();
+  border-radius: 2px;
+  padding: 5px 10px;
+  z-index: 10001;
+  white-space: nowrap;
+  .editor_action_tip_close {
+    cursor: pointer;
+  }
+
+  &::after {
+    position: absolute;
+    right: 20px;
+    margin-left: -7px;
+    top: 100%;
+    content: '';
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 7px 7px 0 7px;
+    border-color: var(--kt-popover-background) transparent transparent transparent;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    right: 20px;
+    top: 100%;
+    width: 100%;
+    height: 15px;
+    border-style: solid;
+    background: transparent;
+    border: 0;
+  }
+}
+
+:global {
+  :local(.editor_action_tip_wrapper) {
+    background-color: var(--kt-editorActionToolTip-background) !important;
+    color: var(--kt-editorActionToolTip-foreground) !important;
+    z-index: 10 !important;
+
+    &.top {
+      &::after {
+        border-color: var(--kt-editorActionToolTip-background) transparent transparent transparent !important;
+      }
+    }
+    &.bottom {
+      &::after {
+        border-color: transparent transparent var(--kt-editorActionToolTip-background) transparent !important;
+      }
+    }
+  }
+}
+
+.kt_editor_side_widgets {
+  &.kt_editor_side_widgets_bottom {
+    display: block;
+    flex-shrink: 0;
+  }
+}
+
+// -------------- styles for editor empty component starts --------------
+.editorEmpty {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.editorEmptyImg {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  max-height: 100%;
+}
+
+// -------------- styles for editor empty component ends --------------

package/src/browser/editor.override.ts

@@ -0,0 +1,133 @@
+import { Autowired, Injectable } from '@opensumi/di';
+import { PreferenceService } from '@opensumi/ide-core-browser';
+import { URI, IRange } from '@opensumi/ide-core-common';
+import type { ICodeEditor as IMonacoCodeEditor } from '@opensumi/monaco-editor-core/esm/vs/editor/browser/editorBrowser';
+import { AbstractCodeEditorService } from '@opensumi/monaco-editor-core/esm/vs/editor/browser/services/abstractCodeEditorService';
+import { ICodeEditorService } from '@opensumi/monaco-editor-core/esm/vs/editor/browser/services/codeEditorService';
+import * as monaco from '@opensumi/monaco-editor-core/esm/vs/editor/editor.api';
+import { EditorScopedLayoutService } from '@opensumi/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneLayoutService';
+import { StandaloneServices } from '@opensumi/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices';
+import { IStandaloneThemeService } from '@opensumi/monaco-editor-core/esm/vs/editor/standalone/common/standaloneTheme';
+import { ContextViewService } from '@opensumi/monaco-editor-core/esm/vs/platform/contextview/browser/contextViewService';
+
+/* istanbul ignore file */
+import { EditorOpenType, WorkbenchEditorService } from '../common';
+
+import { BrowserCodeEditor } from './editor-collection.service';
+import { WorkbenchEditorServiceImpl } from './workbench-editor.service';
+
+@Injectable()
+export class MonacoCodeService extends AbstractCodeEditorService {
+  @Autowired(WorkbenchEditorService)
+  private workbenchEditorService: WorkbenchEditorServiceImpl;
+
+  @Autowired(PreferenceService)
+  private preferenceService: PreferenceService;
+
+  constructor() {
+    super(StandaloneServices.get(IStandaloneThemeService));
+  }
+
+  getActiveCodeEditor(): IMonacoCodeEditor | null {
+    if (this.workbenchEditorService.currentEditor) {
+      return this.workbenchEditorService.currentEditor.monacoEditor;
+    }
+    return null;
+  }
+
+  /**
+   * TODO 拆分状态的兼容
+   * 判断model是否已存在，在当前editor打开该model
+   * @param input 输入的目标文件信息
+   * @param source 触发的来源Editor，与grid关联使用
+   * @param sideBySide ？
+   */
+  async openCodeEditor(
+    // @ts-ignore
+    input: monaco.editor.IResourceInput,
+    source: IMonacoCodeEditor | null,
+    sideBySide?: boolean,
+  ): Promise<IMonacoCodeEditor | null> {
+    const resourceUri = new URI(input.resource.toString());
+    // 判断打开下一个不同于当前编辑器的文件时，是否需要先固定当前编辑器Tab，从而避免被替换，例如：跳转到定义
+    const enablePreviewFromCodeNavigation = this.preferenceService.get<boolean>(
+      'editor.enablePreviewFromCodeNavigation',
+    );
+    if (
+      !enablePreviewFromCodeNavigation &&
+      source &&
+      !sideBySide &&
+      !new URI(source.getModel()?.uri).isEqual(input.resource)
+    ) {
+      for (const visibleGroup of this.workbenchEditorService.editorGroups) {
+        if (visibleGroup.currentOpenType?.type === EditorOpenType.code) {
+          if (visibleGroup.currentEditor?.monacoEditor === source) {
+            visibleGroup.pinPreviewed(visibleGroup.currentResource?.uri);
+            break;
+          }
+        } else if (visibleGroup.currentOpenType?.type === EditorOpenType.diff) {
+          if (
+            visibleGroup.diffEditor!.modifiedEditor.monacoEditor === source ||
+            visibleGroup.diffEditor!.originalEditor.monacoEditor === source
+          ) {
+            visibleGroup.pinPreviewed(visibleGroup.currentResource?.uri);
+            break;
+          }
+        }
+      }
+    }
+    let editorGroup = this.workbenchEditorService.currentEditorGroup;
+    let index: number | undefined;
+    if (source) {
+      editorGroup =
+        this.workbenchEditorService.editorGroups.find(
+          (g) => g.currentEditor && g.currentEditor.monacoEditor === source,
+        ) || editorGroup;
+      index = editorGroup.resources.findIndex(
+        (r) => editorGroup.currentResource && r.uri === editorGroup.currentResource.uri,
+      );
+      if (index >= 0) {
+        index++;
+      }
+    }
+    const selection = input.options ? input.options.selection : null;
+    let range;
+    if (selection) {
+      if (typeof selection.endLineNumber === 'number' && typeof selection.endColumn === 'number') {
+        range = selection;
+      } else {
+        range = new monaco.Range(
+          selection.startLineNumber!,
+          selection.startColumn!,
+          selection.startLineNumber!,
+          selection.startColumn!,
+        );
+      }
+    }
+    await editorGroup.open(resourceUri, { index, range: range as IRange, focus: true });
+    return (editorGroup.codeEditor as BrowserCodeEditor).monacoEditor;
+  }
+}
+
+// @ts-ignore
+
+export class MonacoContextViewService extends ContextViewService {
+  private menuContainer: HTMLDivElement;
+
+  constructor(codeEditorService: ICodeEditorService) {
+    super(new EditorScopedLayoutService(document.body, codeEditorService));
+  }
+
+  setContainer(container) {
+    if (!this.menuContainer) {
+      this.menuContainer = document.createElement('div');
+      this.menuContainer.className = container.className;
+      this.menuContainer.style.left = '0';
+      this.menuContainer.style.top = '0';
+      this.menuContainer.style.position = 'fixed';
+      this.menuContainer.style.zIndex = '10';
+      document.body.append(this.menuContainer);
+    }
+    super['setContainer'](this.menuContainer);
+  }
+}