@opensumi/ide-comments 2.21.13 → 2.22.0

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

@@ -0,0 +1,90 @@
+import clx from 'classnames';
+import React, { FC, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { IRecycleTreeHandle, RecycleTree } from '@opensumi/ide-components';
+import { useInjectable, ViewState, localize } from '@opensumi/ide-core-browser';
+
+import { ICommentsFeatureRegistry } from '../common';
+
+import styles from './comments.module.less';
+import { CommentNodeRendered, COMMENT_TREE_NODE_HEIGHT, ICommentNodeRenderedProps } from './tree/comment-node';
+import { CommentModelService, CommentTreeModel } from './tree/tree-model.service';
+
+export const CommentsPanel: FC<{ viewState: ViewState }> = ({ viewState }) => {
+  const commentModelService = useInjectable<CommentModelService>(CommentModelService);
+  const [model, setModel] = useState<CommentTreeModel | undefined>();
+  const wrapperRef: RefObject<HTMLDivElement> = useRef(null);
+
+  const commentsFeatureRegistry = useInjectable<ICommentsFeatureRegistry>(ICommentsFeatureRegistry);
+
+  const { handleTreeBlur } = commentModelService;
+
+  useEffect(() => {
+    setModel(commentModelService.treeModel);
+    const disposable = commentModelService.onDidUpdateTreeModel((model?: CommentTreeModel) => {
+      setModel(model);
+    });
+    return () => {
+      disposable.dispose();
+    };
+  }, []);
+
+  const handleTreeReady = useCallback(
+    (handle: IRecycleTreeHandle) => {
+      commentModelService.handleTreeHandler(handle);
+    },
+    [commentModelService],
+  );
+
+  const renderTreeNode = useCallback(
+    (props: ICommentNodeRenderedProps) => (
+      <CommentNodeRendered
+        item={props.item}
+        itemType={props.itemType}
+        decorations={commentModelService.decorations.getDecorations(props.item as any)}
+        defaultLeftPadding={8}
+        onClick={commentModelService.handleItemClick}
+        leftPadding={8}
+      />
+    ),
+    [model],
+  );
+
+  const commentsPanelOptions = useMemo(() => commentsFeatureRegistry.getCommentsPanelOptions(), []);
+
+  const headerComponent = useMemo(() => commentsPanelOptions.header, [commentsPanelOptions]);
+
+  const defaultPlaceholder = useMemo(
+    () => (
+      <div className={styles.panel_placeholder}>
+        {commentsPanelOptions.defaultPlaceholder || localize('comments.panel.placeholder')}
+      </div>
+    ),
+    [commentsPanelOptions],
+  );
+
+  const renderSearchTree = useCallback(() => {
+    if (model) {
+      return (
+        <RecycleTree
+          height={viewState.height - (headerComponent?.height || 0)}
+          itemHeight={COMMENT_TREE_NODE_HEIGHT}
+          onReady={handleTreeReady}
+          model={model}
+          placeholder={() => defaultPlaceholder}
+        >
+          {renderTreeNode}
+        </RecycleTree>
+      );
+    } else {
+      return defaultPlaceholder;
+    }
+  }, [model, headerComponent, viewState.height]);
+
+  return (
+    <div className={styles.comment_panel} tabIndex={-1} onBlur={handleTreeBlur} ref={wrapperRef}>
+      {headerComponent?.component}
+      {renderSearchTree()}
+    </div>
+  );
+};

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

@@ -0,0 +1,194 @@
+import React from 'react';
+import { MentionsInput, Mention } from 'react-mentions';
+
+import { Tabs } from '@opensumi/ide-components';
+import { localize, useInjectable } from '@opensumi/ide-core-browser';
+
+import { ICommentsFeatureRegistry } from '../common';
+
+import { CommentsBody } from './comments-body';
+import styles from './comments.module.less';
+import { getMentionBoxStyle } from './mentions.style';
+
+
+export interface ICommentTextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  focusDelay?: number;
+  minRows?: number;
+  maxRows?: number;
+  initialHeight?: string;
+  value: string;
+  dragFiles?: (files: FileList) => void;
+}
+
+const defaultTrigger = '@';
+const defaultMarkup = '@[__display__](__id__)';
+const defaultDisplayTransform = (id: string, display: string) => `@${display}`;
+
+export const CommentsTextArea = React.forwardRef<HTMLTextAreaElement, ICommentTextAreaProps>((props, ref) => {
+  const {
+    focusDelay = 0,
+    autoFocus = false,
+    placeholder = '',
+    onFocus,
+    onBlur,
+    onChange,
+    maxRows = 10,
+    minRows = 2,
+    value,
+    initialHeight,
+    dragFiles,
+  } = props;
+  const [index, setIndex] = React.useState(0);
+  const commentsFeatureRegistry = useInjectable<ICommentsFeatureRegistry>(ICommentsFeatureRegistry);
+  const inputRef = React.useRef<HTMLTextAreaElement | null>(null);
+  const mentionsRef = React.useRef<HTMLDivElement | null>(null);
+  const itemRef = React.useRef<HTMLDivElement | null>(null);
+  // make `ref` to input works
+  React.useImperativeHandle(ref, () => inputRef.current!);
+
+  const handleFileSelect = React.useCallback(
+    async (event: DragEvent) => {
+      event.stopPropagation();
+      event.preventDefault();
+
+      const files = event.dataTransfer?.files; // FileList object.
+      if (files && dragFiles) {
+        await dragFiles(files);
+      }
+
+      if (inputRef.current) {
+        inputRef.current.focus();
+        selectLastPosition(inputRef.current.value);
+      }
+    },
+    [dragFiles],
+  );
+
+  const handleDragOver = React.useCallback((event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'copy';
+  }, []);
+
+  const selectLastPosition = React.useCallback((value) => {
+    const textarea = inputRef.current;
+    if (textarea) {
+      const position = value.toString().length;
+      textarea.setSelectionRange(position, position);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    const textarea = inputRef.current;
+    if (!textarea) {
+      return;
+    }
+    if (initialHeight && textarea.style) {
+      textarea.style.height = initialHeight;
+    }
+    if (focusDelay) {
+      setTimeout(() => {
+        textarea.focus({
+          preventScroll: true,
+        });
+      }, focusDelay);
+    }
+    // auto set last selection
+    selectLastPosition(value);
+    function handleMouseWheel(event: Event) {
+      const target = event.target as Element;
+      if (target) {
+        if (
+          // 当前文本框出现滚动时，防止被编辑器滚动拦截，阻止冒泡
+          (target.nodeName.toUpperCase() === 'TEXTAREA' && target.scrollHeight > target.clientHeight) ||
+          // 当是在弹出的提及里滚动，防止被编辑器滚动拦截，阻止冒泡
+          target.nodeName.toUpperCase() === 'UL' ||
+          target.parentElement?.nodeName.toUpperCase() === 'UL' ||
+          target.parentElement?.parentElement?.nodeName.toUpperCase() === 'UL'
+        ) {
+          event.stopPropagation();
+        }
+      }
+    }
+    mentionsRef.current?.addEventListener('mousewheel', handleMouseWheel, true);
+    return () => {
+      mentionsRef.current?.removeEventListener('mousewheel', handleMouseWheel, true);
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (index === 0) {
+      setTimeout(() => {
+        inputRef.current?.focus({
+          preventScroll: true,
+        });
+      }, focusDelay);
+      selectLastPosition(value);
+    }
+  }, [index]);
+
+  const style = React.useMemo(
+    () =>
+      getMentionBoxStyle({
+        minRows,
+        maxRows,
+      }),
+    [minRows, maxRows],
+  );
+
+  const mentionsOptions = React.useMemo(() => commentsFeatureRegistry.getMentionsOptions(), [commentsFeatureRegistry]);
+
+  const providerData = React.useCallback(
+    async (query: string, callback) => {
+      if (mentionsOptions.providerData) {
+        const data = await mentionsOptions.providerData(query);
+        callback(data);
+      } else {
+        callback([]);
+      }
+    },
+    [mentionsOptions],
+  );
+
+  return (
+    <div className={styles.textarea_container}>
+      <Tabs
+        mini
+        value={index}
+        onChange={(index: number) => setIndex(index)}
+        tabs={[localize('comments.thread.textarea.write'), localize('comments.thread.textarea.preview')]}
+      />
+      <div>
+        {index === 0 ? (
+          <div ref={mentionsRef}>
+            <MentionsInput
+              autoFocus={autoFocus}
+              onDragOver={handleDragOver}
+              onDrop={handleFileSelect}
+              inputRef={inputRef}
+              ref={itemRef}
+              value={value}
+              placeholder={placeholder}
+              onChange={onChange}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              style={style}
+            >
+              <Mention
+                markup={mentionsOptions.markup || defaultMarkup}
+                renderSuggestion={mentionsOptions.renderSuggestion}
+                trigger={defaultTrigger}
+                data={providerData}
+                displayTransform={mentionsOptions.displayTransform || defaultDisplayTransform}
+              />
+            </MentionsInput>
+          </div>
+        ) : (
+          <div className={styles.textarea_preview}>
+            <CommentsBody body={value} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});

package/src/browser/comments-thread.ts

@@ -0,0 +1,309 @@
+import { observable, computed, autorun } from 'mobx';
+
+import { Injectable, Autowired, INJECTOR_TOKEN, Injector } from '@opensumi/di';
+import { IRange, Disposable, URI, IContextKeyService, uuid, localize, Emitter } 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;
+
+  // FIXME: update by https://github.com/opensumi/core/blob/82ab63b916c8fe90cf5898d55c0fe335dd852b91/packages/extension/src/browser/vscode/api/main.thread.comments.ts#L319
+  @observable
+  public comments: IThreadComment[];
+
+  @observable
+  public label: string | undefined;
+
+  @observable
+  private _readOnly = false;
+
+  @observable
+  public isCollapsed: boolean;
+
+  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()}`;
+
+  private onDidChangeEmitter: Emitter<void> = new Emitter();
+
+  get onDidChange() {
+    return this.onDidChangeEmitter.event;
+  }
+
+  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 = [];
+      },
+    });
+    this.onDidChangeEmitter.fire();
+  }
+  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(),
+      })),
+    );
+    this.onDidChangeEmitter.fire();
+  }
+
+  public removeComment(comment: IComment) {
+    const index = this.comments.findIndex((c) => c === comment);
+    if (index !== -1) {
+      this.comments.splice(index, 1);
+    }
+    this.onDidChangeEmitter.fire();
+  }
+
+  public isEqual(thread: ICommentsThread): boolean {
+    return thread.uri.isEqual(this.uri) && thread.range.startLineNumber === this.range.startLineNumber;
+  }
+}

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

@@ -0,0 +1,29 @@
+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),
+    );
+  }
+}