@opensumi/ide-comments 3.0.5-next-1717640023.0 → 3.0.5-next-1717640331.0

package/src/browser/comments.service.ts

@@ -1,4 +1,3 @@
-import debounce from 'lodash/debounce';
 import flattenDeep from 'lodash/flattenDeep';
 import groupBy from 'lodash/groupBy';
 
@@ -36,6 +35,7 @@ import * as textModel from '@opensumi/monaco-editor-core/esm/vs/editor/common/mo
 
 import {
   CommentPanelId,
+  CommentThreadCollapsibleState,
   ICommentRangeProvider,
   ICommentsFeatureRegistry,
   ICommentsService,
@@ -88,6 +88,9 @@ export class CommentsService extends Disposable implements ICommentsService {
 
   private threadsCommentChangeEmitter = new Emitter<ICommentsThread>();
 
+  private commentRangeProviderChangeEmitter = new Emitter<void>();
+  private onDidChangeCurrentCommentThreadEmitter = new Emitter<ICommentsThread | undefined>();
+
   private threadsCreatedEmitter = new Emitter<ICommentsThread>();
 
   private rangeProviderMap = new Map<string, ICommentRangeProvider>();
@@ -96,8 +99,10 @@ export class CommentsService extends Disposable implements ICommentsService {
 
   private providerDecorationCache = new LRUCache<string, Deferred<IRange[]>>(10000);
 
+  private commentRangeDecorationMap: Map<string, string[]> = new Map();
+
   // 默认在 file 协议和 git 协议中显示评论数据
-  private shouldShowCommentsSchemes = new Set(['file', 'git']);
+  private shouldShowCommentsSchemes = new Set(['file', 'git', 'diff']);
 
   private decorationProviderDisposer = Disposable.NULL;
 
@@ -132,6 +137,18 @@ export class CommentsService extends Disposable implements ICommentsService {
     return this.threadsCreatedEmitter.event;
   }
 
+  get onCommentRangeProviderChange() {
+    return this.commentRangeProviderChangeEmitter.event;
+  }
+
+  get onDidChangeCurrentCommentThread() {
+    return this.onDidChangeCurrentCommentThreadEmitter.event;
+  }
+
+  public setCurrentCommentThread(thread: ICommentsThread) {
+    this.onDidChangeCurrentCommentThreadEmitter.fire(thread);
+  }
+
   /**
    * -------------------------------- IMPORTANT --------------------------------
    * 需要注意区分 model.IModelDecorationOptions 与 monaco.editor.IModelDecorationOptions 两个类型
@@ -146,12 +163,55 @@ export class CommentsService extends Disposable implements ICommentsService {
     const avatar =
       thread.comments.length === 0 ? this.currentAuthorAvatar : thread.comments[0].author.iconPath?.toString();
     const icon = avatar
-      ? this.iconService.fromIcon('', avatar, IconType.Background)
-      : this.iconService.fromString('$(comment-unresolved)');
+      ? `${this.iconService.fromIcon('', avatar, IconType.Background)} avatar-icon`
+      : this.iconService.fromString('$(comment)');
     const decorationOptions: model.IModelDecorationOptions = {
       description: 'comments-thread-decoration',
-      // 创建评论显示在 glyph margin 处
-      glyphMarginClassName: ['comments-decoration', 'comments-thread', icon].join(' '),
+      glyphMarginClassName: avatar
+        ? ['comment-thread', icon].join(' ')
+        : ['comment-range', 'comment-thread', icon].join(' '),
+    };
+    return textModel.ModelDecorationOptions.createDynamic(decorationOptions);
+  }
+
+  private currentThreadCollapseStateListener: IDisposable | undefined;
+  private activeThreadDecorationIds: string[] = [];
+
+  private updateActiveThreadDecoration(thread?: ICommentsThread) {
+    const editor = this.getCurrentEditor(thread?.uri);
+    if (!editor) {
+      return;
+    }
+    this.currentThreadCollapseStateListener?.dispose();
+    const newDecoration: {
+      range: IRange;
+      options: model.IModelDecorationOptions;
+    }[] = [];
+
+    if (thread) {
+      const range = thread.range;
+      if (!thread.isCollapsed) {
+        this.currentThreadCollapseStateListener = thread.onDidChangeCollapsibleState((state) => {
+          if (state === CommentThreadCollapsibleState.Collapsed) {
+            this.updateActiveThreadDecoration(undefined);
+          }
+        });
+        newDecoration.push({
+          range,
+          options: this.createThreadRangeActiveDecoration(),
+        });
+      }
+    }
+    this.activeThreadDecorationIds = editor.monacoEditor.deltaDecorations(
+      this.activeThreadDecorationIds,
+      newDecoration,
+    );
+  }
+
+  private createDottedRangeDecoration(): model.IModelDecorationOptions {
+    const decorationOptions: model.IModelDecorationOptions = {
+      description: 'comments-multiline-hover-decoration',
+      linesDecorationsClassName: ['comment-range', 'multiline-add'].join(' '),
     };
     return textModel.ModelDecorationOptions.createDynamic(decorationOptions);
   }
@@ -159,7 +219,39 @@ export class CommentsService extends Disposable implements ICommentsService {
   private createHoverDecoration(): model.IModelDecorationOptions {
     const decorationOptions: model.IModelDecorationOptions = {
       description: 'comments-hover-decoration',
-      linesDecorationsClassName: ['comments-decoration', 'comments-add', getIcon('add-comments')].join(' '),
+      linesDecorationsClassName: ['comment-range', 'line-hover', 'comment-add'].join(' '),
+    };
+    return textModel.ModelDecorationOptions.createDynamic(decorationOptions);
+  }
+
+  private createThreadRangeActiveDecoration(): model.IModelDecorationOptions {
+    const activeDecorationOptions: model.IModelDecorationOptions = {
+      description: 'comments-thread-range-active-decoration',
+      isWholeLine: false,
+      zIndex: 20,
+      className: 'comment-thread-range-current',
+      shouldFillLineOnLineBreak: true,
+    };
+
+    return textModel.ModelDecorationOptions.createDynamic(activeDecorationOptions);
+  }
+
+  private createThreadRangeDecoration(): model.IModelDecorationOptions {
+    const activeDecorationOptions: model.IModelDecorationOptions = {
+      description: 'comments-thread-range-decoration',
+      isWholeLine: false,
+      zIndex: 20,
+      className: 'comment-thread-range',
+      shouldFillLineOnLineBreak: true,
+    };
+
+    return textModel.ModelDecorationOptions.createDynamic(activeDecorationOptions);
+  }
+
+  private createCommentRangeDecoration(): model.IModelDecorationOptions {
+    const decorationOptions: model.IModelDecorationOptions = {
+      description: 'comments-range-decoration',
+      linesDecorationsClassName: ['comment-range', 'comment-diff-added'].join(' '),
     };
     return textModel.ModelDecorationOptions.createDynamic(decorationOptions);
   }
@@ -191,49 +283,56 @@ export class CommentsService extends Disposable implements ICommentsService {
     this.registerDecorationProvider();
   }
 
+  private startCommentRange: IRange | null;
+  private endCommentRange: IRange | null;
+  private editor: IEditor | null;
+  private allEditors: IEditor[] = [];
+
+  getCurrentEditor(uri?: URI) {
+    if (uri) {
+      for (const editor of this.allEditors) {
+        if (editor.currentUri?.isEqual(uri)) {
+          this.editor = editor;
+          return editor;
+        }
+      }
+    }
+    return this.editor;
+  }
+
   public handleOnCreateEditor(editor: IEditor) {
+    this.allEditors.push(editor);
+    this.editor = editor;
     const disposer = new Disposable();
+    let commentRangeDecorationIds: string[] = [];
+    let hasHiddenArea = false;
 
     disposer.addDispose(
       editor.monacoEditor.onMouseDown((event) => {
         if (
           event.target.type === monacoBrowser.editor.MouseTargetType.GUTTER_LINE_DECORATIONS &&
           event.target.element &&
-          event.target.element.className.indexOf('comments-add') > -1
+          event.target.element.className.indexOf('comment-add') > -1
         ) {
           const { target } = event;
           if (target && target.range) {
             const { range } = target;
-            // 如果已经存在一个待输入的评论组件，则不创建新的
-            if (
-              !this.commentsThreads.some(
-                (thread) =>
-                  thread.comments.length === 0 &&
-                  thread.uri.isEqual(editor.currentUri!) &&
-                  thread.range.startLineNumber === range.startLineNumber,
-              )
-            ) {
-              const thread = this.createThread(editor.currentUri!, range);
-              thread.show(editor);
-            }
+            this.startCommentRange = range;
             event.event.stopPropagation();
           }
         } else if (
           event.target.type === monacoBrowser.editor.MouseTargetType.GUTTER_GLYPH_MARGIN &&
           event.target.element &&
-          event.target.element.className.indexOf('comments-thread') > -1
+          event.target.element.className.indexOf('comment-thread') > -1
         ) {
           const { target } = event;
           if (target && target.range) {
             const { range } = target;
             const threads = this.commentsThreads.filter(
-              (thread) =>
-                thread.uri.isEqual(editor.currentUri!) && thread.range.startLineNumber === range.startLineNumber,
+              (thread) => thread.uri.isEqual(editor.currentUri!) && thread.range.endLineNumber === range.endLineNumber,
             );
             if (threads.length) {
-              // 判断当前 widget 是否是显示的
               const isShowWidget = threads.some((thread) => thread.isShowWidget(editor));
-
               if (isShowWidget) {
                 threads.forEach((thread) => thread.hide(editor));
               } else {
@@ -245,55 +344,479 @@ export class CommentsService extends Disposable implements ICommentsService {
         }
       }),
     );
-    let oldDecorations: string[] = [];
+
     disposer.addDispose(
-      editor.monacoEditor.onMouseMove(
-        debounce(async (event) => {
-          const uri = editor.currentUri;
+      editor.monacoEditor.onMouseUp(async (event) => {
+        if (this.startCommentRange) {
+          if (hasHiddenArea) {
+            this.renderCommentRange(editor);
+            hasHiddenArea = false;
+            this.startCommentRange = null;
+            this.endCommentRange = null;
+            return;
+          }
+          let range = this.startCommentRange;
+          if (this.endCommentRange) {
+            if (this.endCommentRange.startLineNumber < this.startCommentRange.startLineNumber) {
+              range.startColumn = this.endCommentRange.startColumn;
+              range.startLineNumber = this.endCommentRange.startLineNumber;
+            } else {
+              range.endColumn = this.endCommentRange.endColumn;
+              range.endLineNumber = this.endCommentRange.endLineNumber;
+            }
+          }
+          if (editor.currentUri) {
+            range = await this.getValidRange(range, editor.currentUri);
+          }
+          if (range) {
+            if (
+              !this.commentsThreads.some(
+                (thread) =>
+                  thread.comments.length === 0 &&
+                  thread.uri.isEqual(editor.currentUri!) &&
+                  thread.range.startLineNumber === range.startLineNumber &&
+                  thread.range.endLineNumber === range.endLineNumber,
+              )
+            ) {
+              const thread = this.createThread(editor.currentUri!, range);
+              thread.show(editor);
+            }
+            event.event.stopPropagation();
+          }
+        } else if (
+          event.target.type === monacoBrowser.editor.MouseTargetType.GUTTER_LINE_DECORATIONS &&
+          event.target.element &&
+          event.target.element.className.indexOf('comment-range') > -1 &&
+          event.target.element.className.indexOf('comment-thread') < 0
+        ) {
+          const { target } = event;
+          const range: IRange | undefined = target.range;
+          if (range) {
+            if (
+              !this.commentsThreads.some(
+                (thread) =>
+                  thread.comments.length === 0 &&
+                  thread.uri.isEqual(editor.currentUri!) &&
+                  thread.range.startLineNumber === range.startLineNumber &&
+                  thread.range.endLineNumber === range.endLineNumber,
+              )
+            ) {
+              const thread = this.createThread(editor.currentUri!, range);
+              thread.show(editor);
+            }
+            event.event.stopPropagation();
+          }
+        }
+        this.startCommentRange = null;
+        this.endCommentRange = null;
+      }),
+    );
 
-          const range = event.target.range;
+    disposer.addDispose(
+      editor.monacoEditor.onMouseMove(async (event) => {
+        const uri = editor.currentUri;
+        const range = event.target.range;
+        // 多行评论
+        if (this.startCommentRange) {
+          if (!event.target.element?.className) {
+            if (event.target.element?.offsetParent?.className.includes('diff-hidden-lines')) {
+              // 当多行评论跨过折叠代码时，不创建评论
+              hasHiddenArea = true;
+            }
+          }
+          if (uri && range) {
+            let selection = {
+              startLineNumber: this.startCommentRange.startLineNumber,
+              endLineNumber: range.endLineNumber,
+              startColumn: this.startCommentRange.startColumn,
+              endColumn: range.endColumn,
+            };
+            if (this.startCommentRange.startLineNumber > range.startLineNumber) {
+              selection = {
+                startLineNumber: range.startLineNumber,
+                endLineNumber: this.startCommentRange.endLineNumber,
+                startColumn: range.startColumn,
+                endColumn: this.startCommentRange.endColumn,
+              };
+            }
+            this.renderCommentRange(editor, selection);
+            this.endCommentRange = range;
+          }
+        } else {
           if (uri && range && (await this.shouldShowHoverDecoration(uri, range))) {
-            oldDecorations = editor.monacoEditor.deltaDecorations(oldDecorations, [
+            const newDecorations = [
               {
                 range: positionToRange(range.startLineNumber),
                 options: this.createHoverDecoration() as unknown as monaco.editor.IModelDecorationOptions,
               },
-            ]);
-          } else {
-            oldDecorations = editor.monacoEditor.deltaDecorations(oldDecorations, []);
+            ];
+            commentRangeDecorationIds = editor.monacoEditor.deltaDecorations(commentRangeDecorationIds, newDecorations);
           }
-        }, 10),
-      ),
+        }
+      }),
     );
 
     disposer.addDispose(
-      editor.monacoEditor.onMouseLeave(
-        debounce(() => {
-          oldDecorations = editor.monacoEditor.deltaDecorations(oldDecorations, []);
-        }, 10),
-      ),
+      editor.monacoEditor.onMouseLeave(async (event) => {
+        const range = event.target?.range;
+        const newDecorations: {
+          range: IRange;
+          options: monaco.editor.IModelDecorationOptions;
+        }[] = [];
+        if (!this.startCommentRange && range) {
+          newDecorations.push({
+            range: positionToRange(range.startLineNumber),
+            options: this.createCommentRangeDecoration() as unknown as monaco.editor.IModelDecorationOptions,
+          });
+        }
+        commentRangeDecorationIds = editor.monacoEditor.deltaDecorations(commentRangeDecorationIds, newDecorations);
+      }),
+    );
+
+    disposer.addDispose(
+      this.onCommentRangeProviderChange(() => {
+        this.renderCommentRange(editor);
+      }),
+    );
+
+    disposer.addDispose(
+      Event.any(
+        this.onThreadsChanged,
+        this.onThreadsCommentChange,
+        this.onThreadsCreated,
+      )((thread) => {
+        const editor = this.getCurrentEditor(thread.uri);
+        if (editor) {
+          this.renderCommentRange(editor);
+        }
+        this.updateActiveThreadDecoration(undefined);
+      }),
+    );
+
+    disposer.addDispose(
+      this.onDidChangeCurrentCommentThread((thread) => {
+        this.updateActiveThreadDecoration(thread);
+      }),
     );
 
+    this.tryUpdateReservedSpace(editor);
+
+    disposer.addDispose(
+      editor.monacoEditor.onDidChangeModel(() => {
+        this.renderCommentRange(editor);
+        this.tryUpdateReservedSpace(editor);
+      }),
+    );
     return disposer;
   }
 
+  private editorCommentingRangeSpaceReservedMap: Map<string, boolean> = new Map();
+  private editorLineDecorationsWidthMap: Map<string, number> = new Map();
+
+  private async getValidRange(range: IRange, uri?: URI) {
+    if (!uri) {
+      return range;
+    }
+    const contributionRanges = await this.getContributionRanges(uri);
+    if (contributionRanges.length === 0) {
+      return range;
+    }
+    const validRange = contributionRanges.find((contributionRange) => {
+      if (
+        range.startLineNumber >= contributionRange.startLineNumber &&
+        range.startLineNumber <= contributionRange.endLineNumber
+      ) {
+        return true;
+      }
+    });
+    if (validRange) {
+      if (validRange.endLineNumber < range.endLineNumber) {
+        return {
+          startLineNumber: range.startLineNumber,
+          startColumn: range.startColumn,
+          endLineNumber: validRange.endLineNumber,
+          endColumn: validRange.endColumn,
+        };
+      } else {
+        return range;
+      }
+    } else {
+      return range;
+    }
+  }
+
+  private ensureCommentingRangeReservedAmount(editor: IEditor) {
+    const existing = this.getExistingCommentEditorOptions(editor);
+    const lineDecorationsWidth = this.editorLineDecorationsWidthMap.get(editor.getId());
+    if (existing.lineDecorationsWidth !== lineDecorationsWidth) {
+      editor.updateOptions({
+        lineDecorationsWidth: this.getWithCommentsLineDecorationWidth(editor, existing.lineDecorationsWidth),
+      });
+    }
+  }
+
+  private async tryUpdateReservedSpace(editor: IEditor) {
+    if (!editor) {
+      return;
+    }
+    let commentingRangeSpaceReserved = this.editorCommentingRangeSpaceReservedMap.get(editor.getId()) || false;
+    const shouldShowComments = editor.currentUri ? this.shouldShowCommentsSchemes.has(editor.currentUri.scheme) : false;
+
+    const hasComments = this.commentsThreads.some(
+      (thread) => thread.uri.isEqual(editor.currentUri!) && thread.comments.length > 0,
+    );
+
+    const hasCommentsOrRanges = shouldShowComments || hasComments;
+    if (hasCommentsOrRanges) {
+      if (!commentingRangeSpaceReserved) {
+        commentingRangeSpaceReserved = true;
+        const { lineDecorationsWidth, extraEditorClassName } = this.getExistingCommentEditorOptions(editor);
+        const newOptions = this.getWithCommentsEditorOptions(editor, extraEditorClassName, lineDecorationsWidth);
+        this.updateEditorLayoutOptions(editor, newOptions.extraEditorClassName, newOptions.lineDecorationsWidth);
+      } else {
+        this.ensureCommentingRangeReservedAmount(editor);
+      }
+    } else if (!hasCommentsOrRanges && commentingRangeSpaceReserved) {
+      commentingRangeSpaceReserved = false;
+      const { lineDecorationsWidth, extraEditorClassName } = this.getExistingCommentEditorOptions(editor);
+      const newOptions = this.getWithoutCommentsEditorOptions(editor, extraEditorClassName, lineDecorationsWidth);
+      this.updateEditorLayoutOptions(editor, newOptions.extraEditorClassName, newOptions.lineDecorationsWidth);
+    }
+    this.editorCommentingRangeSpaceReservedMap.set(editor.getId(), commentingRangeSpaceReserved);
+  }
+
+  private getExistingCommentEditorOptions(editor: IEditor) {
+    const lineDecorationsWidth: number = editor.monacoEditor.getOption(monaco.EditorOption.lineDecorationsWidth);
+    let extraEditorClassName: string[] = [];
+    const configuredExtraClassName = editor.monacoEditor.getRawOptions().extraEditorClassName;
+    if (configuredExtraClassName) {
+      extraEditorClassName = configuredExtraClassName.split(' ');
+    }
+    return { lineDecorationsWidth, extraEditorClassName };
+  }
+
+  private getWithoutCommentsEditorOptions(
+    editor: IEditor,
+    extraEditorClassName: string[],
+    startingLineDecorationsWidth: number,
+  ) {
+    let lineDecorationsWidth = startingLineDecorationsWidth;
+    const inlineCommentPos = extraEditorClassName.findIndex((name) => name === 'inline-comment');
+    if (inlineCommentPos >= 0) {
+      extraEditorClassName.splice(inlineCommentPos, 1);
+    }
+
+    const options = editor.monacoEditor.getOptions();
+    if (options.get(monaco.EditorOption.folding) && options.get(monaco.EditorOption.showFoldingControls) !== 'never') {
+      lineDecorationsWidth += 11; // 11 comes from https://github.com/microsoft/vscode/blob/94ee5f58619d59170983f453fe78f156c0cc73a3/src/vs/workbench/contrib/comments/browser/media/review.css#L485
+    }
+    lineDecorationsWidth -= 24;
+    return { extraEditorClassName, lineDecorationsWidth };
+  }
+
+  private updateEditorLayoutOptions(editor: IEditor, extraEditorClassName: string[], lineDecorationsWidth: number) {
+    editor.updateOptions({
+      extraEditorClassName: extraEditorClassName.join(' '),
+      lineDecorationsWidth,
+    });
+  }
+
+  private getWithCommentsEditorOptions(
+    editor: IEditor,
+    extraEditorClassName: string[],
+    startingLineDecorationsWidth: number,
+  ) {
+    extraEditorClassName.push('inline-comment');
+    return {
+      lineDecorationsWidth: this.getWithCommentsLineDecorationWidth(editor, startingLineDecorationsWidth),
+      extraEditorClassName,
+    };
+  }
+
+  private getWithCommentsLineDecorationWidth(editor: IEditor, startingLineDecorationsWidth: number) {
+    let lineDecorationsWidth = startingLineDecorationsWidth;
+    const options = editor.monacoEditor.getOptions();
+    if (options.get(monaco.EditorOption.folding) && options.get(monaco.EditorOption.showFoldingControls) !== 'never') {
+      lineDecorationsWidth -= 11;
+    }
+    lineDecorationsWidth += 24;
+    this.editorLineDecorationsWidthMap.set(editor.getId(), lineDecorationsWidth);
+    return lineDecorationsWidth;
+  }
+
+  private async renderCommentRange(
+    editor: IEditor,
+    selection: IRange = {
+      startLineNumber: 0,
+      endLineNumber: 0,
+      startColumn: 0,
+      endColumn: 0,
+    },
+  ) {
+    if (!editor.currentUri) {
+      return;
+    }
+    const contributionRanges = await this.getContributionRanges(editor.currentUri);
+    if (contributionRanges.length > 0) {
+      const newDecorations: {
+        range: IRange;
+        options: monaco.editor.IModelDecorationOptions;
+      }[] = [];
+      contributionRanges.map((contributionRange) => {
+        if (selection.startLineNumber === 0 && selection.endLineNumber === 0) {
+          newDecorations.push({
+            range: contributionRange,
+            options: this.createCommentRangeDecoration() as unknown as monaco.editor.IModelDecorationOptions,
+          });
+        } else if (
+          selection.startLineNumber <= contributionRange.startLineNumber &&
+          selection.endLineNumber >= contributionRange.endLineNumber
+        ) {
+          newDecorations.push(
+            ...[
+              {
+                range: contributionRange,
+                options: this.createDottedRangeDecoration() as unknown as monaco.editor.IModelDecorationOptions,
+              },
+              {
+                range: contributionRange,
+                options: this.createThreadRangeDecoration() as unknown as monaco.editor.IModelDecorationOptions,
+              },
+            ],
+          );
+        } else if (selection.endLineNumber >= contributionRange.endLineNumber) {
+          if (selection.startLineNumber <= contributionRange.endLineNumber) {
+            // 存在交集
+            const selectionRange = {
+              startLineNumber: selection.startLineNumber,
+              endLineNumber: contributionRange.endLineNumber,
+              startColumn: selection.startColumn,
+              endColumn: contributionRange.endColumn,
+            };
+            const topCommentRange = {
+              startLineNumber: contributionRange.startLineNumber,
+              endLineNumber: selectionRange.startLineNumber - 1,
+              startColumn: contributionRange.startColumn,
+              endColumn: selectionRange.endColumn,
+            };
+            newDecorations.push(
+              ...[
+                {
+                  range: topCommentRange,
+                  options: this.createCommentRangeDecoration() as unknown as monaco.editor.IModelDecorationOptions,
+                },
+                {
+                  range: selectionRange,
+                  options: this.createDottedRangeDecoration() as unknown as monaco.editor.IModelDecorationOptions,
+                },
+                {
+                  range: selectionRange,
+                  options: this.createThreadRangeDecoration() as unknown as monaco.editor.IModelDecorationOptions,
+                },
+              ],
+            );
+          } else {
+            newDecorations.push({
+              range: contributionRange,
+              options: this.createCommentRangeDecoration() as unknown as monaco.editor.IModelDecorationOptions,
+            });
+          }
+        } else if (selection.endLineNumber < contributionRange.endLineNumber) {
+          if (selection.endLineNumber >= contributionRange.startLineNumber) {
+            // 存在交集
+            if (selection.startLineNumber >= contributionRange.startLineNumber) {
+              const topCommentRange = {
+                startLineNumber: contributionRange.startLineNumber,
+                startColumn: contributionRange.startColumn,
+                endLineNumber: selection.startLineNumber - 1,
+                endColumn: selection.startColumn,
+              };
+              const bottomCommentRange = {
+                startLineNumber: selection.endLineNumber + 1,
+                startColumn: selection.endColumn,
+                endLineNumber: contributionRange.endLineNumber,
+                endColumn: contributionRange.endColumn,
+              };
+              const decorations =
+                selection.startLineNumber !== contributionRange.startLineNumber
+                  ? [
+                      {
+                        range: topCommentRange,
+                        options:
+                          this.createCommentRangeDecoration() as unknown as monaco.editor.IModelDecorationOptions,
+                      },
+                    ]
+                  : [];
+              decorations.push({
+                range: selection,
+                options: this.createDottedRangeDecoration() as unknown as monaco.editor.IModelDecorationOptions,
+              });
+              decorations.push({
+                range: selection,
+                options: this.createThreadRangeDecoration() as unknown as monaco.editor.IModelDecorationOptions,
+              });
+              decorations.push({
+                range: bottomCommentRange,
+                options: this.createCommentRangeDecoration() as unknown as monaco.editor.IModelDecorationOptions,
+              });
+              newDecorations.push(...decorations);
+            } else {
+              const selectionRange = {
+                startLineNumber: contributionRange.startLineNumber,
+                startColumn: contributionRange.startColumn,
+                endLineNumber: selection.endLineNumber,
+                endColumn: selection.endColumn,
+              };
+              const bottomCommentRange = {
+                startLineNumber: selectionRange.endLineNumber + 1,
+                startColumn: selectionRange.endColumn,
+                endLineNumber: contributionRange.endLineNumber,
+                endColumn: contributionRange.endColumn,
+              };
+              newDecorations.push(
+                ...[
+                  {
+                    range: selectionRange,
+                    options: this.createDottedRangeDecoration() as unknown as monaco.editor.IModelDecorationOptions,
+                  },
+                  {
+                    range: selectionRange,
+                    options: this.createThreadRangeDecoration() as unknown as monaco.editor.IModelDecorationOptions,
+                  },
+                  {
+                    range: bottomCommentRange,
+                    options: this.createCommentRangeDecoration() as unknown as monaco.editor.IModelDecorationOptions,
+                  },
+                ],
+              );
+            }
+          } else {
+            newDecorations.push({
+              range: contributionRange,
+              options: this.createCommentRangeDecoration() as unknown as monaco.editor.IModelDecorationOptions,
+            });
+          }
+        }
+      });
+      const commentRangeDecorationIds = this.commentRangeDecorationMap.get(editor.currentUri.toString()) || [];
+      this.commentRangeDecorationMap.set(
+        editor.currentUri.toString(),
+        editor.monacoEditor.deltaDecorations(commentRangeDecorationIds, newDecorations),
+      );
+    } else {
+      this.commentRangeDecorationMap.set(editor.currentUri.toString(), []);
+    }
+  }
+
   private async shouldShowHoverDecoration(uri: URI, range: IRange) {
     if (!this.shouldShowCommentsSchemes.has(uri.scheme)) {
       return false;
     }
     const contributionRanges = await this.getContributionRanges(uri);
     const isProviderRanges = contributionRanges.some(
-      (contributionRange) =>
-        range.startLineNumber >= contributionRange.startLineNumber &&
-        range.startLineNumber <= contributionRange.endLineNumber,
+      (contributionRange) => range.startLineNumber <= contributionRange.endLineNumber,
     );
-    // 如果不支持对同一行进行多个评论，那么过滤掉当前有 thread 行号的 decoration
-    const isShowHoverToSingleLine =
-      this.isMultiCommentsForSingleLine ||
-      !this.commentsThreads.some(
-        (thread) => thread.uri.isEqual(uri) && thread.range.startLineNumber === range.startLineNumber,
-      );
-    return isProviderRanges && isShowHoverToSingleLine;
+    return isProviderRanges;
   }
 
   public createThread(
@@ -305,7 +828,7 @@ export class CommentsService extends Disposable implements ICommentsService {
     },
   ) {
     // 获取当前 range 的 providerId，用于 commentController contextKey 的生成
-    const providerId = this.getProviderIdsByLine(range.startLineNumber)[0];
+    const providerId = this.getProviderIdsByLine(range.endLineNumber)[0];
     const thread = this.injector.get(CommentsThread, [uri, range, providerId, options]);
     thread.onDispose(() => {
       this.threads.delete(thread.id);
@@ -367,13 +890,17 @@ export class CommentsService extends Disposable implements ICommentsService {
     for (const thread of (parent as CommentFileNode).threads) {
       const [first] = thread.comments;
       const comment = typeof first.body === 'string' ? first.body : first.body.value;
+      let description = `[Ln ${thread.range.startLineNumber}]`;
+      if (thread.range.startLineNumber !== thread.range.endLineNumber) {
+        description = `[Ln ${thread.range.startLineNumber}-${thread.range.endLineNumber}]`;
+      }
       childs.push(
         new CommentContentNode(
           this,
           thread,
           comment,
-          `[Ln ${thread.range.startLineNumber}]`,
-          first.author.iconPath
+          description,
+          first.author.iconPath && (first.author.iconPath as URI)?.authority
             ? (this.iconService.fromIcon('', first.author.iconPath.toString(), IconType.Background) as string)
             : getIcon('message'),
           first.author,
@@ -444,13 +971,16 @@ export class CommentsService extends Disposable implements ICommentsService {
       return await cache.promise;
     }
 
-    const model = this.documentService.getModelReference(uri, 'get-contribution-rages');
+    const model = this.documentService.getModelReference(uri, 'Get Comment Range');
     const rangePromise: Promise<IRange[] | undefined>[] = [];
     for (const rangeProvider of this.rangeProviderMap) {
       const [id, provider] = rangeProvider;
       rangePromise.push(
         (async () => {
-          const ranges = await provider.getCommentingRanges(model?.instance!);
+          if (!model?.instance) {
+            return;
+          }
+          const ranges = await provider.getCommentingRanges(model.instance);
           if (ranges && ranges.length) {
             // FIXME: ranges 会被 Diff uri 的两个 range 互相覆盖，导致可能根据行查不到 provider
             this.rangeOwner.set(id, ranges);
@@ -503,7 +1033,12 @@ export class CommentsService extends Disposable implements ICommentsService {
             return isCurrentThread;
           })
           .map((thread) => ({
-            range: thread.range,
+            range: {
+              startLineNumber: thread.range.endLineNumber,
+              endLineNumber: thread.range.endLineNumber,
+              startColumn: thread.range.endColumn,
+              endColumn: thread.range.endColumn,
+            },
             options: this.createThreadDecoration(thread) as unknown as monaco.editor.IModelDecorationOptions,
           })),
     });
@@ -543,6 +1078,7 @@ export class CommentsService extends Disposable implements ICommentsService {
     this.rangeProviderMap.set(id, provider);
     // 注册一个新的 range provider 后清理掉之前的缓存
     this.providerDecorationCache.clear();
+    this.commentRangeProviderChangeEmitter.fire();
     return Disposable.create(() => {
       this.rangeProviderMap.delete(id);
       this.rangeOwner.delete(id);
@@ -563,7 +1099,6 @@ export class CommentsService extends Disposable implements ICommentsService {
   public getProviderIdsByLine(line: number): string[] {
     const result: string[] = [];
     if (this.rangeOwner.size === 1) {
-      // 只有一个provider，直接返回
       return [this.rangeOwner.keys().next().value];
     }
     for (const rangeOwner of this.rangeOwner) {