@opensumi/ide-editor 2.21.13 → 2.22.0

package/src/browser/breadcrumb/index.ts

@@ -0,0 +1,96 @@
+import { Injectable, Autowired } from '@opensumi/di';
+import { IDisposable, URI, arrays, MaybeNull, Emitter } from '@opensumi/ide-core-browser';
+
+import { IEditor } from '../../common';
+import { IBreadCrumbService, IBreadCrumbPart, IBreadCrumbProvider } from '../types';
+
+import { DefaultBreadCrumbProvider } from './default';
+
+const { addElement } = arrays;
+
+@Injectable()
+export class BreadCrumbServiceImpl implements IBreadCrumbService {
+  private providers: IBreadCrumbProvider[] = [];
+
+  private _onDidUpdateBreadCrumbResults = new Emitter<{ uri: URI; editor: MaybeNull<IEditor> }>();
+  public readonly onDidUpdateBreadCrumbResults = this._onDidUpdateBreadCrumbResults.event;
+
+  // editor-id / uriString
+  private crumbResults: Map<MaybeNull<IEditor>, Map<string, IBreadCrumbPart[]>> = new Map();
+
+  @Autowired()
+  defaultBreadCrumbProvider: DefaultBreadCrumbProvider;
+
+  constructor() {
+    this.registerBreadCrumbProvider(this.defaultBreadCrumbProvider);
+  }
+
+  registerBreadCrumbProvider(provider: IBreadCrumbProvider): IDisposable {
+    const disposer = addElement(this.providers, provider);
+
+    provider.onDidUpdateBreadCrumb((uri: URI) => {
+      this.crumbResults.forEach((crumbResults, editor) => {
+        if (crumbResults.has(uri.toString())) {
+          this.getBreadCrumbs(uri, editor);
+        }
+      });
+    });
+
+    return disposer;
+  }
+
+  getBreadCrumbs(uri: URI, editor: MaybeNull<IEditor>): IBreadCrumbPart[] | undefined {
+    const editorCrumbResults = this.getEditorCrumbResults(editor);
+    for (const provider of this.providers) {
+      if (provider.handlesUri(uri)) {
+        const lastCrumb = editorCrumbResults.get(uri.toString());
+        const newCrumb = provider.provideBreadCrumbForUri(uri, editor);
+        if (!isBreadCrumbArrayEqual(lastCrumb, newCrumb)) {
+          editorCrumbResults.set(uri.toString(), newCrumb);
+          this._onDidUpdateBreadCrumbResults.fire({ editor, uri });
+        }
+        break;
+      }
+    }
+    return editorCrumbResults.get(uri.toString());
+  }
+
+  getEditorCrumbResults(editor: MaybeNull<IEditor>): Map<string, IBreadCrumbPart[]> {
+    if (!this.crumbResults.has(editor)) {
+      this.crumbResults.set(editor, new Map());
+      if (editor) {
+        // todo IEditor 应该也暴露 onDispose
+        editor.monacoEditor.onDidDispose(() => {
+          this.crumbResults.delete(editor);
+        });
+      }
+    }
+    return this.crumbResults.get(editor)!;
+  }
+
+  disposeCrumb(uri: URI) {
+    // this.crumbResults.delete(uri.toString());
+  }
+}
+
+function isBreadCrumbArrayEqual(p1: IBreadCrumbPart[] | undefined, p2: IBreadCrumbPart[] | undefined): boolean {
+  if (!p1 && !p2) {
+    return true;
+  } else if (!p1 || !p2) {
+    return false;
+  } else {
+    if (p1.length !== p2.length) {
+      return false;
+    }
+    for (let i = 0; i < p1.length; i++) {
+      if (!isBreadCrumbEqual(p1[i], p2[i])) {
+        return false;
+      }
+    }
+    return true;
+  }
+}
+
+function isBreadCrumbEqual(p1: IBreadCrumbPart, p2: IBreadCrumbPart): boolean {
+  return p1.name === p2.name;
+}

package/src/browser/component.ts

@@ -0,0 +1,204 @@
+import isEqual from 'lodash/isEqual';
+import uniqWith from 'lodash/uniqWith';
+import ReactDOM from 'react-dom';
+
+import { Injectable, Autowired } from '@opensumi/di';
+import { ExtensionActivateEvent, IDisposable, IEventBus } from '@opensumi/ide-core-common';
+
+import { IResource, IEditorOpenType } from '../common';
+
+import {
+  EditorComponentRegistry,
+  IEditorComponent,
+  IEditorComponentResolver,
+  EditorComponentRenderMode,
+  IEditorSideWidget,
+  EditorSide,
+  EditorComponentDisposeEvent,
+  RegisterEditorComponentEvent,
+  RegisterEditorSideComponentEvent,
+} from './types';
+
+type SchemeKey = string;
+
+interface INormalizedEditorComponentResolver {
+  handleScheme: (scheme: string) => number;
+  resolver: IEditorComponentResolver;
+}
+
+@Injectable()
+export class EditorComponentRegistryImpl implements EditorComponentRegistry {
+  @Autowired(IEventBus)
+  eventBus: IEventBus;
+
+  private components: Map<string, IEditorComponent> = new Map();
+
+  private sideWidgets = {
+    bottom: new Set<IEditorSideWidget>(),
+  };
+
+  private initialPropsMap: Map<string, any> = new Map();
+
+  private resolvers: Map<SchemeKey, IEditorComponentResolver[]> = new Map();
+
+  private normalizedResolvers: INormalizedEditorComponentResolver[] = [];
+
+  public readonly perWorkbenchComponents = {};
+
+  public registerEditorComponent<T>(component: IEditorComponent<T>, initialProps?: any): IDisposable {
+    const uid = component.uid;
+    if (!component.renderMode) {
+      component.renderMode = EditorComponentRenderMode.ONE_PER_GROUP;
+    }
+    this.components.set(uid, component);
+    this.initialPropsMap.set(uid, initialProps);
+    // 使用 activationEvent 通知插件
+    this.eventBus.fire(new ExtensionActivateEvent({ topic: 'onRegisterEditorComponent', data: uid }));
+    this.eventBus.fire(new RegisterEditorComponentEvent(uid));
+    return {
+      dispose: () => {
+        if (this.components.get(uid) === component) {
+          this.components.delete(uid);
+          this.eventBus.fire(new EditorComponentDisposeEvent(component));
+        }
+      },
+    };
+  }
+
+  public registerEditorComponentResolver<T>(
+    scheme: string | ((scheme: string) => number),
+    resolver: IEditorComponentResolver<any>,
+  ): IDisposable {
+    let normalizedResolver: INormalizedEditorComponentResolver;
+    if (typeof scheme === 'function') {
+      normalizedResolver = {
+        handleScheme: scheme,
+        resolver,
+      };
+    } else {
+      normalizedResolver = {
+        handleScheme: (s: string) => (s === scheme ? 10 : -1),
+        resolver,
+      };
+    }
+    this.normalizedResolvers.push(normalizedResolver);
+
+    // 注册了新的，清除缓存
+    this.resolvers.clear();
+    return {
+      dispose: () => {
+        // 去除已被 cache 的resolver
+        for (const resolvers of this.resolvers.values()) {
+          const index = resolvers.indexOf(resolver);
+          if (index !== -1) {
+            resolvers.splice(index, 1);
+          }
+        }
+
+        const i = this.normalizedResolvers.indexOf(normalizedResolver);
+        if (i !== -1) {
+          this.normalizedResolvers.splice(i, 1);
+        }
+      },
+    };
+  }
+
+  public async resolveEditorComponent(resource: IResource): Promise<IEditorOpenType[]> {
+    let results: IEditorOpenType[] = [];
+    const resolvers = this.getResolvers(resource.uri.scheme).slice(); // 防止异步操作时数组被改变
+    let shouldBreak = false;
+    const resolve = (res) => {
+      results = res;
+      shouldBreak = true;
+    };
+    for (const resolver of resolvers) {
+      await resolver(resource, results, resolve);
+      if (shouldBreak) {
+        break;
+      }
+    }
+    results.sort((a, b) => {
+      const wa = a.weight || 0;
+      const wb = b.weight || 0;
+      return wb - wa;
+    });
+    return uniqWith(results, isEqual);
+  }
+
+  private calculateSchemeResolver(scheme: string): IEditorComponentResolver[] {
+    const resolvers = this.normalizedResolvers.slice();
+    const calculated: {
+      weight: number; // handleScheme 的权重
+      index: number; // resolver 在resolver中的位置(后来的先处理)
+      resolver: IEditorComponentResolver;
+    }[] = [];
+
+    resolvers.forEach((r, index) => {
+      const weight = r.handleScheme(scheme);
+      if (weight >= 0) {
+        calculated.push({
+          weight,
+          index,
+          resolver: r.resolver,
+        });
+      }
+    });
+
+    return calculated
+      .sort((a, b) => {
+        if (a.weight > b.weight) {
+          return -1;
+        } else if (a.weight < b.weight) {
+          return 1;
+        } else {
+          return b.index - a.index;
+        }
+      })
+      .map((c) => c.resolver);
+  }
+
+  private getResolvers(scheme: string): IEditorComponentResolver[] {
+    if (!this.resolvers.has(scheme)) {
+      this.resolvers.set(scheme, this.calculateSchemeResolver(scheme));
+    }
+    return this.resolvers.get(scheme) as IEditorComponentResolver[];
+  }
+
+  public getEditorComponent(id: string): IEditorComponent | null {
+    return this.components.get(id) || null;
+  }
+
+  public getEditorInitialProps(id: string): any {
+    return this.initialPropsMap.get(id) || null;
+  }
+
+  public clearPerWorkbenchComponentCache(componentId: string) {
+    ReactDOM.unmountComponentAtNode(this.perWorkbenchComponents[componentId]);
+    delete this.perWorkbenchComponents[componentId];
+  }
+
+  public getSideWidgets(side: EditorSide, resource: IResource): IEditorSideWidget<any>[] {
+    const res: IEditorSideWidget<any>[] = [];
+    this.sideWidgets[side].forEach((widget) => {
+      if (widget.displaysOnResource(resource)) {
+        res.push(widget);
+      }
+    });
+    return res.sort((w1, w2) => {
+      const weight1 = w1.weight === undefined ? 10 : w1.weight;
+      const weight2 = w2.weight === undefined ? 10 : w2.weight;
+      return weight2 - weight1;
+    });
+  }
+
+  public registerEditorSideWidget(widget: IEditorSideWidget<any>): IDisposable {
+    const side = widget.side || 'bottom';
+    this.sideWidgets[side].add(widget);
+    this.eventBus.fire(new RegisterEditorSideComponentEvent());
+    return {
+      dispose: () => {
+        this.sideWidgets[side].delete(widget);
+      },
+    };
+  }
+}

package/src/browser/decoration-applier.ts

@@ -0,0 +1,256 @@
+import clsx from 'classnames';
+
+import { Autowired, Injectable } from '@opensumi/di';
+import { Disposable, URI, IEventBus, IMarkdownString } from '@opensumi/ide-core-common';
+import type { ICodeEditor as IMonacoCodeEditor } from '@opensumi/ide-monaco/lib/browser/monaco-api/types';
+import { IThemeService } from '@opensumi/ide-theme';
+import * as monaco from '@opensumi/monaco-editor-core/esm/vs/editor/editor.api';
+
+import { IDecorationRenderOptions, IDecorationApplyOptions } from '../common';
+
+import {
+  IEditorDecorationCollectionService,
+  IDynamicModelDecorationProperty,
+  IThemedCssStyle,
+  EditorDecorationChangeEvent,
+  EditorDecorationTypeRemovedEvent,
+  DidApplyEditorDecorationFromProvider,
+} from './types';
+
+@Injectable({ multiple: true })
+export class MonacoEditorDecorationApplier extends Disposable {
+  @Autowired(IEditorDecorationCollectionService)
+  decorationService: IEditorDecorationCollectionService;
+
+  @Autowired(IThemeService)
+  themeService: IThemeService;
+
+  @Autowired(IEventBus)
+  eventBus: IEventBus;
+
+  private decorations: Map<string, { decorations: string[]; dispose: () => void }> = new Map();
+
+  constructor(private editor: IMonacoCodeEditor) {
+    super();
+    this.applyDecorationFromProvider();
+    this.editor.onDidChangeModel(() => {
+      this.clearDecorations();
+      this.applyDecorationFromProvider();
+    });
+    this.editor.onDidDispose(() => {
+      this.dispose();
+    });
+    this.addDispose(
+      this.eventBus.on(EditorDecorationChangeEvent, (e) => {
+        const currentUri = this.getEditorUri();
+        if (currentUri && e.payload.uri.isEqual(currentUri)) {
+          this.applyDecorationFromProvider(e.payload.key);
+        }
+      }),
+    );
+    this.addDispose(
+      this.eventBus.on(EditorDecorationTypeRemovedEvent, (e) => {
+        this.deltaDecoration(e.payload, []);
+      }),
+    );
+  }
+
+  private getEditorUri(): URI | null {
+    if (this.editor.getModel()) {
+      const uri = new URI(this.editor.getModel()!.uri.toString());
+      return uri;
+    } else {
+      return null;
+    }
+  }
+
+  private async applyDecorationFromProvider(key?: string) {
+    if (this.editor.getModel()) {
+      const uri = new URI(this.editor.getModel()!.uri.toString());
+      const decs = await this.decorationService.getDecorationFromProvider(uri, key);
+      // 由于是异步获取decoration，此时uri可能已经变了
+      if (!this.editor.getModel() || this.editor.getModel()!.uri.toString() !== uri.toString()) {
+        return;
+      }
+
+      for (const key of Object.keys(decs)) {
+        this.deltaDecoration(key, decs[key]);
+      }
+      this.eventBus.fire(
+        new DidApplyEditorDecorationFromProvider({
+          key,
+          uri,
+        }),
+      );
+    }
+  }
+
+  dispose() {
+    super.dispose();
+    this.clearDecorations();
+  }
+
+  clearDecorations() {
+    this.decorations.forEach((v) => {
+      v.dispose();
+      this.editor.deltaDecorations(v.decorations, []);
+    });
+    this.decorations.clear();
+  }
+
+  deltaDecoration(key: string, decorations: monaco.editor.IModelDeltaDecoration[]) {
+    let oldDecorations: string[] = [];
+    if (this.decorations.has(key)) {
+      oldDecorations = this.decorations.get(key)!.decorations;
+      this.decorations.get(key)!.dispose();
+      this.decorations.delete(key);
+    }
+    if (oldDecorations.length === 0 && decorations.length === 0) {
+      return;
+    }
+    const newDecoration = this.editor.deltaDecorations(oldDecorations, decorations);
+    this.decorations.set(key, {
+      decorations: newDecoration,
+      dispose: () => null,
+    });
+  }
+
+  applyDecoration(key: string, options: IDecorationApplyOptions[]) {
+    const oldDecorations = this.decorations.get(key);
+    if (oldDecorations) {
+      oldDecorations.dispose();
+    }
+    const oldResult = oldDecorations ? oldDecorations.decorations : [];
+    const newDecorations: monaco.editor.IModelDeltaDecoration[] = [];
+    const disposer = new Disposable();
+    if (oldResult.length === 0 && options.length === 0) {
+      return;
+    }
+    options.forEach((option) => {
+      const resolved = this.resolveDecorationRenderer(key, option.renderOptions);
+      newDecorations.push({
+        range: option.range,
+        options: {
+          ...resolved.options,
+          hoverMessage: resolveHoverMessage(option.hoverMessage),
+        },
+      });
+      disposer.addDispose(resolved);
+    });
+    const result = this.editor.deltaDecorations(oldResult, newDecorations);
+    this.decorations.set(key, {
+      decorations: result,
+      dispose: () => disposer.dispose(),
+    });
+  }
+
+  resolveDecorationRenderer(
+    key: string,
+    options?: IDecorationRenderOptions,
+  ): { options: monaco.editor.IModelDecorationOptions; dispose: () => void } {
+    const type = this.decorationService.getTextEditorDecorationType(key);
+    const result: monaco.editor.IModelDecorationOptions = {
+      description: key,
+    };
+    const currentTheme = this.themeService.getCurrentThemeSync().type;
+    const disposer = new Disposable();
+    if (type) {
+      const property = type.property;
+      assignModelDecorationOptions(result, property, currentTheme);
+    }
+    if (options) {
+      const tempType = this.decorationService.createTextEditorDecorationType(options);
+      assignModelDecorationOptions(result, tempType.property, currentTheme);
+      disposer.addDispose(tempType);
+    }
+    return {
+      options: result,
+      dispose: () => disposer.dispose(),
+    };
+  }
+}
+
+function assignModelDecorationOptions(
+  target: monaco.editor.IModelDecorationOptions,
+  property: IDynamicModelDecorationProperty,
+  currentTheme: undefined | 'dark' | 'light' | 'hcDark' | 'hcLight',
+) {
+  if (property.overviewRulerLane) {
+    if (!target.overviewRuler) {
+      target.overviewRuler = {
+        color: null as any,
+        range: null as any,
+        position: property.overviewRulerLane,
+      };
+    } else {
+      target.overviewRuler.position = property.overviewRulerLane;
+    }
+  }
+
+  if (property.default) {
+    assignModelDecorationStyle(target, property.default);
+  }
+  if (currentTheme === 'dark' && property.dark) {
+    assignModelDecorationStyle(target, property.dark);
+  }
+  if (currentTheme === 'light' && property.light) {
+    assignModelDecorationStyle(target, property.light);
+  }
+
+  if (property.isWholeLine !== undefined) {
+    target.isWholeLine = property.isWholeLine;
+  }
+
+  if (property.rangeBehavior) {
+    target.stickiness = property.rangeBehavior as number;
+  }
+
+  target.inlineClassNameAffectsLetterSpacing = true;
+}
+
+function assignModelDecorationStyle(target: monaco.editor.IModelDecorationOptions, style: IThemedCssStyle) {
+  if (style.className) {
+    target.className = clsx(target.className, style.className);
+  }
+  if (style.inlineClassName) {
+    target.inlineClassName = clsx(target.inlineClassName, style.inlineClassName);
+  }
+  if (style.afterContentClassName) {
+    target.afterContentClassName = clsx(target.afterContentClassName, style.afterContentClassName);
+  }
+  if (style.beforeContentClassName) {
+    target.beforeContentClassName = clsx(target.beforeContentClassName, style.beforeContentClassName);
+  }
+  if (style.glyphMarginClassName) {
+    target.glyphMarginClassName = clsx(target.glyphMarginClassName, style.glyphMarginClassName);
+  }
+  if (style.overviewRulerColor) {
+    if (target.overviewRuler) {
+      target.overviewRuler.color = style.overviewRulerColor;
+    }
+  }
+}
+
+function resolveHoverMessage(
+  str: IMarkdownString | IMarkdownString[] | string | undefined,
+): IMarkdownString | IMarkdownString[] | undefined {
+  if (!str) {
+    return undefined;
+  }
+  if (str instanceof Array) {
+    return str.map(toMarkdownString);
+  } else {
+    return toMarkdownString(str);
+  }
+}
+
+function toMarkdownString(str: IMarkdownString | string): IMarkdownString {
+  if (typeof str === 'string') {
+    return {
+      value: str,
+      isTrusted: true,
+    };
+  } else {
+    return str;
+  }
+}

package/src/browser/diff/compare.ts

@@ -0,0 +1,99 @@
+import { Injectable, Autowired } from '@opensumi/di';
+import {
+  URI,
+  Domain,
+  localize,
+  Deferred,
+  CommandService,
+  EDITOR_COMMANDS,
+  CommandContribution,
+  CommandRegistry,
+} from '@opensumi/ide-core-browser';
+import { getIcon } from '@opensumi/ide-core-browser';
+import { MenuContribution, IMenuRegistry, MenuId } from '@opensumi/ide-core-browser/lib/menu/next';
+
+import { ICompareService, CompareResult } from '../types';
+
+@Injectable()
+export class CompareService implements ICompareService {
+  public readonly comparing = new Map<string, Deferred<CompareResult>>();
+
+  @Autowired(CommandService)
+  private commandService: CommandService;
+
+  compare(original: URI, modified: URI, name: string): Promise<CompareResult> {
+    const compareUri = URI.from({
+      scheme: 'diff',
+      query: URI.stringifyQuery({
+        name,
+        original,
+        modified,
+        comparing: true,
+      }),
+    });
+    if (!this.comparing.has(compareUri.toString())) {
+      const deferred = new Deferred<CompareResult>();
+      this.comparing.set(compareUri.toString(), deferred);
+      deferred.promise.then(() => {
+        this.comparing.delete(compareUri.toString());
+        this.commandService.executeCommand(EDITOR_COMMANDS.CLOSE_ALL.id, compareUri);
+      });
+    }
+    this.commandService.executeCommand(EDITOR_COMMANDS.OPEN_RESOURCE.id, compareUri);
+    return this.comparing.get(compareUri.toString())!.promise;
+  }
+}
+
+@Domain(MenuContribution, CommandContribution)
+export class CompareEditorContribution implements MenuContribution, CommandContribution {
+  @Autowired(ICompareService)
+  compareService: CompareService;
+
+  registerMenus(menu: IMenuRegistry) {
+    menu.registerMenuItems(MenuId.EditorTitle, [
+      {
+        command: {
+          id: 'editor.diff.accept',
+          label: localize('editor.action.accept'),
+        },
+        iconClass: getIcon('check'),
+        group: 'navigation',
+        when: 'isInDiffEditor && diffResource =~ /%26comparing%3Dtrue$/',
+      },
+    ]);
+    menu.registerMenuItems(MenuId.EditorTitle, [
+      {
+        command: {
+          id: 'editor.diff.revert',
+          label: localize('editor.action.revert'),
+        },
+        iconClass: getIcon('rollback'),
+        group: 'navigation',
+        when: 'isInDiffEditor && diffResource =~ /%26comparing%3Dtrue$/',
+      },
+    ]);
+  }
+
+  registerCommands(commands: CommandRegistry) {
+    commands.registerCommand(
+      { id: 'editor.diff.accept' },
+      {
+        execute: (uri: URI) => {
+          if (uri && this.compareService.comparing.has(uri.toString())) {
+            this.compareService.comparing.get(uri.toString())!.resolve(CompareResult.accept);
+          }
+        },
+      },
+    );
+    commands.registerCommand(
+      { id: 'editor.diff.revert' },
+      {
+        execute: (uri: URI) => {
+          if (uri && this.compareService.comparing.has(uri.toString())) {
+            this.compareService.comparing.get(uri.toString())!.resolve(CompareResult.revert);
+          }
+        },
+      },
+    );
+  }
+}