@opensumi/ide-comments 2.21.7-rc-1670229502.0 → 2.21.7

package/src/browser/comments-thread.ts

@@ -1,300 +0,0 @@
-import { observable, computed, autorun } from 'mobx';
-
-import { Injectable, Autowired, INJECTOR_TOKEN, Injector } from '@opensumi/di';
-import { IRange, Disposable, URI, IContextKeyService, uuid, localize } from '@opensumi/ide-core-browser';
-import { ResourceContextKey } from '@opensumi/ide-core-browser/lib/contextkey/resource';
-import { IEditor, EditorCollectionService } from '@opensumi/ide-editor';
-
-import {
-  ICommentsThread,
-  IComment,
-  ICommentsThreadOptions,
-  ICommentsService,
-  IThreadComment,
-  ICommentsZoneWidget,
-} from '../common';
-
-import { CommentsZoneWidget } from './comments-zone.view';
-
-
-@Injectable({ multiple: true })
-export class CommentsThread extends Disposable implements ICommentsThread {
-  @Autowired(ICommentsService)
-  commentsService: ICommentsService;
-
-  @Autowired(IContextKeyService)
-  private readonly globalContextKeyService: IContextKeyService;
-
-  private readonly _contextKeyService: IContextKeyService;
-
-  @Autowired(EditorCollectionService)
-  private readonly editorCollectionService: EditorCollectionService;
-
-  @Autowired(INJECTOR_TOKEN)
-  private readonly injector: Injector;
-
-  @observable
-  public comments: IThreadComment[];
-
-  @observable
-  public label: string | undefined;
-
-  public data: any;
-
-  set contextValue(value: string | undefined) {
-    this._contextKeyService.createKey<string>('thread', value);
-  }
-
-  get contextValue() {
-    return this._contextKeyService.getContextValue('thread');
-  }
-
-  private widgets = new Map<IEditor, CommentsZoneWidget>();
-
-  private _id = `thread_${uuid()}`;
-
-  @observable
-  private _readOnly = false;
-
-  @observable
-  public isCollapsed: boolean;
-
-  constructor(
-    public uri: URI,
-    public range: IRange,
-    public providerId: string,
-    public options: ICommentsThreadOptions,
-  ) {
-    super();
-    this.comments = options.comments
-      ? options.comments.map((comment) => ({
-          ...comment,
-          id: uuid(),
-        }))
-      : [];
-    this.data = this.options.data;
-    this._contextKeyService = this.registerDispose(this.globalContextKeyService.createScoped());
-    // 设置 resource context key
-    const resourceContext = new ResourceContextKey(this._contextKeyService);
-    resourceContext.set(uri);
-    this._contextKeyService.createKey<string>('thread', options.contextValue);
-    this.readOnly = !!options.readOnly;
-    this.label = options.label;
-    this.isCollapsed = !!this.options.isCollapsed;
-    const threadsLengthContext = this._contextKeyService.createKey<number>(
-      'threadsLength',
-      this.commentsService.getThreadsByUri(uri).length,
-    );
-    const commentsLengthContext = this._contextKeyService.createKey<number>('commentsLength', this.comments.length);
-    // vscode 用于判断 thread 是否为空
-    const commentThreadIsEmptyContext = this._contextKeyService.createKey<boolean>(
-      'commentThreadIsEmpty',
-      !this.comments.length,
-    );
-    // vscode 用于判断是否为当前 controller 注册
-    this._contextKeyService.createKey<string>('commentController', providerId);
-    // 监听 comments 的变化
-    autorun(() => {
-      commentsLengthContext.set(this.comments.length);
-      commentThreadIsEmptyContext.set(!this.comments.length);
-    });
-    autorun(() => {
-      if (this.isCollapsed) {
-        this.hideAll();
-      } else {
-        this.showAll();
-      }
-    });
-    // 监听每次 thread 的变化，重新设置 threadsLength
-    this.addDispose(
-      this.commentsService.onThreadsChanged((thread) => {
-        if (thread.uri.isEqual(uri)) {
-          threadsLengthContext.set(this.commentsService.getThreadsByUri(uri).length);
-        }
-      }),
-    );
-    this.addDispose({
-      dispose: () => {
-        this.comments = [];
-      },
-    });
-  }
-  getWidgetByEditor(editor: IEditor): ICommentsZoneWidget | undefined {
-    return this.widgets.get(editor);
-  }
-
-  get id() {
-    return this._id;
-  }
-
-  get contextKeyService() {
-    return this._contextKeyService;
-  }
-
-  @computed
-  get readOnly() {
-    return this._readOnly;
-  }
-
-  set readOnly(readOnly: boolean) {
-    this._readOnly = readOnly;
-    this._contextKeyService.createKey<boolean>('readOnly', this._readOnly);
-  }
-
-  @computed
-  get threadHeaderTitle() {
-    if (this.label) {
-      return this.label;
-    }
-    if (this.comments.length) {
-      const commentAuthors = new Set<string>(this.comments.map((comment) => `@${comment.author.name}`));
-      return `${localize('comments.participants')}: ` + [...commentAuthors].join(' ');
-    } else {
-      return localize('comments.zone.title');
-    }
-  }
-
-  private getEditorsByUri(uri: URI): IEditor[] {
-    return this.editorCollectionService.listEditors().filter((editor) => editor.currentUri?.isEqual(uri));
-  }
-
-  private addWidgetByEditor(editor: IEditor) {
-    const widget = this.injector.get(CommentsZoneWidget, [editor, this]);
-    // 如果当前 widget 发生高度变化，通知同一个 同一个 editor 的其他 range 相同的 thread 也重新计算一下高度
-    this.addDispose(
-      widget.onChangeZoneWidget(() => {
-        const threads = this.commentsService.commentsThreads.filter((thread) => this.isEqual(thread));
-        // 只需要 resize 当前 thread 之后的 thread
-        const currentIndex = threads.findIndex((thread) => thread === this);
-        const resizeThreads = threads.slice(currentIndex + 1);
-        for (const thread of resizeThreads) {
-          if (thread.isShowWidget(editor)) {
-            const widget = thread.getWidgetByEditor(editor);
-            widget?.resize();
-          }
-        }
-      }),
-    );
-    this.addDispose(widget);
-    this.widgets.set(editor, widget);
-    editor.onDispose(() => {
-      widget.dispose();
-      this.widgets.delete(editor);
-    });
-    return widget;
-  }
-
-  public toggle = (editor: IEditor) => {
-    if (this.comments.length > 0) {
-      const widget = this.widgets.get(editor);
-      if (widget) {
-        widget.toggle();
-      }
-    } else {
-      this.dispose();
-    }
-  };
-
-  public show(editor?: IEditor) {
-    if (editor) {
-      let widget = this.widgets.get(editor);
-      // 说明是在新的 group 中打开
-      if (!widget) {
-        widget = this.addWidgetByEditor(editor);
-      }
-      widget.show();
-    } else {
-      // 每次都拿所有的有这个 uri 的 editor
-      const editors = this.getEditorsByUri(this.uri);
-      editors.forEach((editor) => {
-        let widget = this.widgets.get(editor);
-        // 说明是在新的 group 中打开
-        if (!widget) {
-          widget = this.addWidgetByEditor(editor);
-        }
-        // 如果标记之前是已经展示的 widget，则调用 show 方法
-        if (editor.currentUri?.isEqual(this.uri)) {
-          widget.show();
-        }
-      });
-    }
-  }
-
-  public showWidgetsIfShowed() {
-    for (const editor of this.getEditorsByUri(this.uri)) {
-      let widget = this.widgets.get(editor);
-      // 说明是在新的 group 中打开
-      if (!widget) {
-        widget = this.addWidgetByEditor(editor);
-      }
-      // 如果标记之前是已经展示的 widget，则调用 show 方法
-      if (editor.currentUri?.isEqual(this.uri) && widget.isShow) {
-        widget.show();
-      }
-    }
-  }
-
-  public hideWidgetsByDispose(): void {
-    for (const [editor, widget] of this.widgets) {
-      !editor.currentUri?.isEqual(this.uri) && widget.dispose();
-    }
-  }
-
-  public isShowWidget(editor?: IEditor) {
-    if (editor) {
-      const widget = this.widgets.get(editor);
-      return widget ? widget.isShow : false;
-    } else {
-      for (const [, widget] of this.widgets) {
-        return widget.isShow;
-      }
-      return false;
-    }
-  }
-
-  public hide(editor?: IEditor) {
-    if (editor) {
-      const widget = this.widgets.get(editor);
-      widget?.hide();
-    } else {
-      this.hideAll();
-    }
-  }
-
-  public showAll() {
-    for (const [, widget] of this.widgets) {
-      widget.show();
-    }
-  }
-
-  public hideAll(isDospose?: boolean) {
-    for (const [editor, widget] of this.widgets) {
-      if (isDospose) {
-        // 如果 thread 出现在当前 editor 则不隐藏
-        !editor.currentUri?.isEqual(this.uri) && widget.dispose();
-      } else {
-        widget.hide();
-      }
-    }
-  }
-
-  public addComment(...comments: IComment[]) {
-    this.comments.push(
-      ...comments.map((comment) => ({
-        ...comment,
-        id: uuid(),
-      })),
-    );
-  }
-
-  public removeComment(comment: IComment) {
-    const index = this.comments.findIndex((c) => c === comment);
-    if (index !== -1) {
-      this.comments.splice(index, 1);
-    }
-  }
-
-  public isEqual(thread: ICommentsThread): boolean {
-    return thread.uri.isEqual(this.uri) && thread.range.startLineNumber === this.range.startLineNumber;
-  }
-}

package/src/browser/comments-zone.service.ts

@@ -1,29 +0,0 @@
-import { Autowired, Injectable, Optional } from '@opensumi/di';
-import { AbstractMenuService, MenuId, IMenu } from '@opensumi/ide-core-browser/lib/menu/next';
-import { Disposable, memoize } from '@opensumi/ide-core-common';
-
-import { CommentsThread } from './comments-thread';
-
-@Injectable({ multiple: true })
-export class CommentsZoneService extends Disposable {
-  @Autowired(AbstractMenuService)
-  private readonly menuService: AbstractMenuService;
-
-  constructor(@Optional() readonly thread: CommentsThread) {
-    super();
-  }
-
-  @memoize
-  get commentThreadTitle(): IMenu {
-    return this.registerDispose(
-      this.menuService.createMenu(MenuId.CommentsCommentThreadTitle, this.thread.contextKeyService),
-    );
-  }
-
-  @memoize
-  get commentThreadContext(): IMenu {
-    return this.registerDispose(
-      this.menuService.createMenu(MenuId.CommentsCommentThreadContext, this.thread.contextKeyService),
-    );
-  }
-}

package/src/browser/comments-zone.view.tsx

@@ -1,206 +0,0 @@
-import clx from 'classnames';
-import { observer } from 'mobx-react-lite';
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-import { INJECTOR_TOKEN, Injectable, Autowired } from '@opensumi/di';
-import { ConfigProvider, localize, AppConfig, useInjectable, Event, Emitter } from '@opensumi/ide-core-browser';
-import { InlineActionBar } from '@opensumi/ide-core-browser/lib/components/actions';
-import { MenuId } from '@opensumi/ide-core-browser/lib/menu/next';
-import { IEditor } from '@opensumi/ide-editor';
-import { ResizeZoneWidget } from '@opensumi/ide-monaco-enhance';
-
-import {
-  ICommentReply,
-  ICommentsZoneWidget,
-  ICommentThreadTitle,
-  ICommentsFeatureRegistry,
-  ICommentsThread,
-} from '../common';
-
-import { CommentItem } from './comments-item.view';
-import { CommentsTextArea } from './comments-textarea.view';
-import { CommentsZoneService } from './comments-zone.service';
-import styles from './comments.module.less';
-
-export interface ICommentProps {
-  thread: ICommentsThread;
-  widget: ICommentsZoneWidget;
-}
-
-const CommentsZone: React.FC<ICommentProps> = observer(({ thread, widget }) => {
-  const { comments, threadHeaderTitle, contextKeyService } = thread;
-  const injector = useInjectable(INJECTOR_TOKEN);
-  const commentsZoneService: CommentsZoneService = injector.get(CommentsZoneService, [thread]);
-  const commentsFeatureRegistry = useInjectable<ICommentsFeatureRegistry>(ICommentsFeatureRegistry);
-  const fileUploadHandler = React.useMemo(() => commentsFeatureRegistry.getFileUploadHandler(), []);
-  const [replyText, setReplyText] = React.useState('');
-  const commentIsEmptyContext = React.useMemo(
-    () => contextKeyService.createKey<boolean>('commentIsEmpty', !replyText),
-    [],
-  );
-  const commentThreadTitle = commentsZoneService.commentThreadTitle;
-  const commentThreadContext = commentsZoneService.commentThreadContext;
-
-  const onChangeReply = React.useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const { value } = event.target;
-    setReplyText(value);
-    commentIsEmptyContext.set(!value);
-  }, []);
-
-  const placeholder = React.useMemo(
-    () =>
-      commentsFeatureRegistry.getProviderFeature(thread.providerId)?.placeholder ||
-      `${localize('comments.reply.placeholder')}...`,
-    [],
-  );
-
-  const handleDragFiles = React.useCallback(
-    async (files: FileList) => {
-      if (fileUploadHandler) {
-        const appendText = await fileUploadHandler(replyText, files);
-        setReplyText((text) => {
-          const value = text + appendText;
-          commentIsEmptyContext.set(!value);
-          return value;
-        });
-      }
-    },
-    [replyText],
-  );
-
-  React.useEffect(() => {
-    const disposer = widget.onFirstDisplay(() => {
-      setTimeout(() => {
-        widget.coreEditor.monacoEditor.revealLine(thread.range.startLineNumber + 1);
-      }, 0);
-    });
-    return () => {
-      disposer.dispose();
-    };
-  }, []);
-
-  return (
-    <div className={clx(thread.options.threadClassName, styles.comment_container)}>
-      <div className={clx(thread.options.threadHeadClassName, styles.head)}>
-        <div className={styles.review_title}>{threadHeaderTitle}</div>
-        <InlineActionBar<ICommentThreadTitle>
-          menus={commentThreadTitle}
-          context={[
-            {
-              thread,
-              widget,
-              menuId: MenuId.CommentsCommentThreadTitle,
-            },
-          ]}
-          separator='inline'
-          type='icon'
-        />
-      </div>
-      <div className={styles.comment_body}>
-        {comments.length > 0 ? (
-          <CommentItem widget={widget} commentThreadContext={commentThreadContext} thread={thread} />
-        ) : (
-          <div>
-            <CommentsTextArea
-              focusDelay={100}
-              initialHeight={'auto'}
-              value={replyText}
-              onChange={onChangeReply}
-              placeholder={placeholder}
-              dragFiles={handleDragFiles}
-            />
-            <div className={styles.comment_bottom_actions}>
-              <InlineActionBar<ICommentReply>
-                className={styles.comment_reply_actions}
-                separator='inline'
-                type='button'
-                context={[
-                  {
-                    text: replyText,
-                    widget,
-                    thread,
-                    menuId: MenuId.CommentsCommentThreadContext,
-                  },
-                ]}
-                menus={commentThreadContext}
-              />
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-});
-
-@Injectable({ multiple: true })
-export class CommentsZoneWidget extends ResizeZoneWidget implements ICommentsZoneWidget {
-  protected _fillContainer(container: HTMLElement): void {}
-  @Autowired(AppConfig)
-  appConfig: AppConfig;
-
-  @Autowired(ICommentsFeatureRegistry)
-  private readonly commentsFeatureRegistry: ICommentsFeatureRegistry;
-
-  private _wrapper: HTMLDivElement;
-
-  private _editor: IEditor;
-
-  private _onShow = new Emitter<void>();
-  public onShow: Event<void> = this._onShow.event;
-
-  private _onHide = new Emitter<void>();
-  public onHide: Event<void> = this._onHide.event;
-
-  constructor(editor: IEditor, thread: ICommentsThread) {
-    super(editor.monacoEditor, thread.range);
-    this._editor = editor;
-    this._wrapper = document.createElement('div');
-    this._isShow = !thread.isCollapsed;
-    this._container.appendChild(this._wrapper);
-    this.observeContainer(this._wrapper);
-    const customRender = this.commentsFeatureRegistry.getZoneWidgetRender();
-    ReactDOM.render(
-      <ConfigProvider value={this.appConfig}>
-        {customRender ? customRender(thread, this) : <CommentsZone thread={thread} widget={this} />}
-      </ConfigProvider>,
-      this._wrapper,
-    );
-  }
-
-  get coreEditor() {
-    return this._editor;
-  }
-
-  get isShow() {
-    return this._isShow;
-  }
-
-  public show() {
-    super.show();
-    this._isShow = true;
-    this._onShow.fire();
-  }
-
-  public hide() {
-    super.dispose();
-    this._isShow = false;
-    this._onHide.fire();
-  }
-
-  public toggle() {
-    if (this._isShow) {
-      this.hide();
-    } else {
-      this.show();
-    }
-  }
-
-  protected applyClass(): void {
-    // noop
-  }
-
-  protected applyStyle(): void {
-    // noop
-  }
-}