@opensumi/ide-comments 2.21.13 → 2.22.0

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

@@ -0,0 +1,206 @@
+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(): 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
+  }
+}

package/src/browser/comments.contribution.ts

@@ -0,0 +1,201 @@
+import { Autowired } from '@opensumi/di';
+import {
+  Domain,
+  ClientAppContribution,
+  Disposable,
+  localize,
+  ContributionProvider,
+  Event,
+  ToolbarRegistry,
+  CommandContribution,
+  CommandRegistry,
+  getIcon,
+  TabBarToolbarContribution,
+  IEventBus,
+} from '@opensumi/ide-core-browser';
+import { IMenuRegistry, MenuId, MenuContribution } from '@opensumi/ide-core-browser/lib/menu/next';
+import { IEditor } from '@opensumi/ide-editor';
+import { BrowserEditorContribution, IEditorFeatureRegistry } from '@opensumi/ide-editor/lib/browser';
+import { IMainLayoutService } from '@opensumi/ide-main-layout';
+
+import {
+  ICommentsService,
+  CommentPanelId,
+  CommentsContribution,
+  ICommentsFeatureRegistry,
+  CollapseId,
+  CommentPanelCollapse,
+  CloseThreadId,
+  ICommentThreadTitle,
+  SwitchCommandReaction,
+  ICommentsThread,
+  CommentReactionPayload,
+  CommentReactionClick,
+} from '../common';
+
+import { CommentModelService } from './tree/tree-model.service';
+
+@Domain(
+  ClientAppContribution,
+  BrowserEditorContribution,
+  CommandContribution,
+  TabBarToolbarContribution,
+  MenuContribution,
+)
+export class CommentsBrowserContribution
+  extends Disposable
+  implements
+    ClientAppContribution,
+    BrowserEditorContribution,
+    CommandContribution,
+    TabBarToolbarContribution,
+    MenuContribution
+{
+  @Autowired(ICommentsService)
+  private readonly commentsService: ICommentsService;
+
+  @Autowired(IMainLayoutService)
+  private readonly layoutService: IMainLayoutService;
+
+  @Autowired(ICommentsFeatureRegistry)
+  private readonly commentsFeatureRegistry: ICommentsFeatureRegistry;
+
+  @Autowired(CommentsContribution)
+  private readonly contributions: ContributionProvider<CommentsContribution>;
+
+  @Autowired(IEventBus)
+  private readonly eventBus: IEventBus;
+
+  @Autowired(CommentModelService)
+  private commentModelService: CommentModelService;
+
+  onStart() {
+    this.registerCommentsFeature();
+    this.listenToCreateCommentsPanel();
+    this.commentsService.init();
+  }
+
+  get panelBadge() {
+    const length = this.commentsService.commentsThreads.length;
+    return length ? length + '' : '';
+  }
+
+  registerCommands(registry: CommandRegistry) {
+    registry.registerCommand(
+      {
+        id: CollapseId,
+        label: '%comments.panel.action.collapse%',
+        iconClass: getIcon('collapse-all'),
+      },
+      {
+        execute: () => {
+          this.commentModelService.collapsedAll();
+        },
+      },
+    );
+
+    registry.registerCommand(
+      {
+        id: CloseThreadId,
+        label: '%comments.thread.action.close%',
+        iconClass: getIcon('up'),
+      },
+      {
+        execute: (threadTitle: ICommentThreadTitle) => {
+          const { thread, widget } = threadTitle;
+          if (!thread.comments.length) {
+            thread.dispose();
+          } else {
+            if (widget.isShow) {
+              widget.toggle();
+            }
+          }
+        },
+      },
+    );
+
+    registry.registerCommand(
+      { id: SwitchCommandReaction },
+      {
+        execute: (payload: CommentReactionPayload) => {
+          this.eventBus.fire(new CommentReactionClick(payload));
+        },
+      },
+    );
+  }
+
+  registerMenus(registry: IMenuRegistry): void {
+    registry.registerMenuItem(MenuId.CommentsCommentThreadTitle, {
+      command: CloseThreadId,
+      group: 'inline',
+      order: Number.MAX_SAFE_INTEGER,
+    });
+  }
+
+  registerToolbarItems(registry: ToolbarRegistry) {
+    registry.registerItem({
+      id: CollapseId,
+      viewId: CommentPanelId,
+      command: CollapseId,
+      tooltip: localize('comments.panel.action.collapse'),
+    });
+  }
+
+  private registerCommentsFeature() {
+    this.contributions.getContributions().forEach((contribution, index) => {
+      this.addDispose(
+        this.commentsService.registerCommentRangeProvider(`contribution_${index}`, {
+          getCommentingRanges: (documentModel) => contribution.provideCommentingRanges(documentModel),
+        }),
+      );
+      if (contribution.registerCommentsFeature) {
+        contribution.registerCommentsFeature(this.commentsFeatureRegistry);
+      }
+    });
+  }
+  /**
+   * 因为大多数情况下没有评论，所以默认先不注册底部面板
+   * 在第一次创建 thread 的时候再创建底部面板
+   * @memberof CommentsBrowserContribution
+   */
+  private listenToCreateCommentsPanel() {
+    if (this.commentsFeatureRegistry.getCommentsPanelOptions().defaultShow) {
+      this.commentsService.registerCommentPanel();
+    } else {
+      Event.once(this.commentsService.onThreadsCreated)(() => {
+        this.commentsService.registerCommentPanel();
+      });
+    }
+
+    this.addDispose(
+      Event.debounce(
+        this.commentsService.onThreadsChanged,
+        () => {},
+        100,
+      )(() => {
+        const handler = this.layoutService.getTabbarHandler(CommentPanelId);
+        handler?.setBadge(this.panelBadge);
+      }, this),
+    );
+  }
+
+  registerEditorFeature(registry: IEditorFeatureRegistry) {
+    registry.registerEditorFeatureContribution({
+      contribute: (editor: IEditor) => this.commentsService.handleOnCreateEditor(editor),
+      provideEditorOptionsForUri: async (uri) => {
+        const ranges = await this.commentsService.getContributionRanges(uri);
+
+        // 说明当前 uri 可以评论
+        if (ranges.length) {
+          return {
+            // 让编辑器的 lineDecorationsWidth 宽一点，以便放下评论 icon
+            lineDecorationsWidth: 25,
+            lineNumbersMinChars: 5,
+          };
+        } else {
+          return {};
+        }
+      },
+    });
+  }
+}

package/src/browser/comments.module.less

@@ -0,0 +1,210 @@
+:global {
+  .monaco-editor {
+    .comments-decoration {
+      border-radius: 50%;
+      // 防止被其他的 decoration 盖住
+      position: absolute;
+      cursor: pointer;
+      z-index: 1;
+      &::before {
+        font-weight: normal;
+        color: var(--foreground);
+        background: var(--editor-background);
+        border-radius: 50%;
+      }
+    }
+
+    .comments-add {
+      margin-left: 2px;
+    }
+
+    .comments-thread {
+      left: 4px !important;
+    }
+
+    .cldr.insert-sign,
+    .cldr.delete-sign {
+      background-position: right;
+    }
+  }
+}
+
+.comment_container {
+  font-size: 12px;
+  background-color: var(--kt-popover-background);
+  border-top: 1px solid var(--peekView-border);
+  border-bottom: 1px solid var(--peekView-border);
+}
+
+.head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 28px;
+  line-height: 22px;
+  padding: 0 2px 0 14px;
+  border-bottom: 1px solid var(--kt-tab-borderDown);
+}
+
+.review_title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.title_actions {
+  display: flex;
+}
+
+.comment_body {
+  padding: 18px;
+}
+
+.comment_shadow_box {
+  padding: 8px 0;
+}
+
+.comment_bottom_actions {
+  margin-top: 12px;
+}
+
+.reply_item_title {
+  visibility: hidden;
+  display: inline-block;
+  margin-left: 8px;
+}
+
+.textarea_container {
+  background-color: var(--input-background);
+  padding: 4px 16px;
+  border-radius: 2px;
+}
+
+.mention {
+  width: 100%;
+}
+
+.textarea_preview {
+  min-height: 56px;
+}
+
+.comment_reply_actions {
+  justify-content: flex-start;
+}
+
+.comment_item {
+  display: flex;
+}
+
+.comment_item_content {
+  flex: 1;
+}
+
+.comment_item_head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+
+.comment_item_author {
+  display: flex;
+}
+
+.comment_item_name {
+  display: flex;
+  align-items: center;
+}
+
+.comment_item_author_name {
+  line-height: 20px;
+  color: var(--descriptionForeground);
+}
+
+.comment_item_timestamp {
+  margin-left: 2px;
+  line-height: 20px;
+  color: var(--descriptionForeground);
+}
+
+.comment_item_markdown_header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.comment_item_label {
+  margin-left: 5px;
+  color: var(--descriptionForeground);
+}
+
+.comment_item_icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  margin-right: 10px;
+}
+
+.reply_item {
+  margin-bottom: 8px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+  &:hover {
+    .reply_item_title {
+      visibility: visible;
+    }
+  }
+}
+
+.reply_item_icon {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  margin-right: 8px;
+}
+
+.comment_item_actions {
+  display: flex;
+}
+
+.comment_item_reply_button {
+  margin: 0 6px;
+}
+
+.comment_item_reply_wrap {
+  margin-top: 4px;
+  padding: 14px 12px;
+  background: var(--kt-popover-prominentBackground);
+  border-radius: 2px;
+}
+
+.comment_item_reply {
+  margin-top: 12px;
+}
+
+.comment_item_context {
+  margin: 12px 0;
+}
+
+.comment_panel {
+  font-size: 12px;
+  line-height: 22px;
+  width: 100%;
+  height: 100%;
+}
+
+.panel_placeholder {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--kt-panel-secondaryForeground);
+}
+
+.comment_reactions {
+  margin-top: 4px;
+}
+
+.comment_reaction {
+  margin-right: 4px;
+}