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

package/lib/browser/comments.service.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CommentsService = void 0;
 const tslib_1 = require("tslib");
-const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const flattenDeep_1 = tslib_1.__importDefault(require("lodash/flattenDeep"));
 const groupBy_1 = tslib_1.__importDefault(require("lodash/groupBy"));
 const di_1 = require("@opensumi/di");
@@ -10,6 +9,7 @@ const ide_core_browser_1 = require("@opensumi/ide-core-browser");
 const browser_1 = require("@opensumi/ide-editor/lib/browser");
 const ide_main_layout_1 = require("@opensumi/ide-main-layout");
 const ide_monaco_1 = require("@opensumi/ide-monaco");
+const monaco = tslib_1.__importStar(require("@opensumi/ide-monaco"));
 const browser_2 = require("@opensumi/ide-monaco/lib/browser");
 const ide_theme_1 = require("@opensumi/ide-theme");
 const textModel = tslib_1.__importStar(require("@opensumi/monaco-editor-core/esm/vs/editor/common/model/textModel"));
@@ -24,13 +24,20 @@ let CommentsService = class CommentsService extends ide_core_browser_1.Disposabl
         this.threads = new Map();
         this.threadsChangeEmitter = new ide_core_browser_1.Emitter();
         this.threadsCommentChangeEmitter = new ide_core_browser_1.Emitter();
+        this.commentRangeProviderChangeEmitter = new ide_core_browser_1.Emitter();
+        this.onDidChangeCurrentCommentThreadEmitter = new ide_core_browser_1.Emitter();
         this.threadsCreatedEmitter = new ide_core_browser_1.Emitter();
         this.rangeProviderMap = new Map();
         this.rangeOwner = new Map();
         this.providerDecorationCache = new ide_core_browser_1.LRUCache(10000);
+        this.commentRangeDecorationMap = new Map();
         // 默认在 file 协议和 git 协议中显示评论数据
-        this.shouldShowCommentsSchemes = new Set(['file', 'git']);
+        this.shouldShowCommentsSchemes = new Set(['file', 'git', 'diff']);
         this.decorationProviderDisposer = ide_core_browser_1.Disposable.NULL;
+        this.activeThreadDecorationIds = [];
+        this.allEditors = [];
+        this.editorCommentingRangeSpaceReservedMap = new Map();
+        this.editorLineDecorationsWidthMap = new Map();
     }
     get commentsThreads() {
         return [...this.threads.values()];
@@ -56,6 +63,15 @@ let CommentsService = class CommentsService extends ide_core_browser_1.Disposabl
     get onThreadsCreated() {
         return this.threadsCreatedEmitter.event;
     }
+    get onCommentRangeProviderChange() {
+        return this.commentRangeProviderChangeEmitter.event;
+    }
+    get onDidChangeCurrentCommentThread() {
+        return this.onDidChangeCurrentCommentThreadEmitter.event;
+    }
+    setCurrentCommentThread(thread) {
+        this.onDidChangeCurrentCommentThreadEmitter.fire(thread);
+    }
     /**
      * -------------------------------- IMPORTANT --------------------------------
      * 需要注意区分 model.IModelDecorationOptions 与 monaco.editor.IModelDecorationOptions 两个类型
@@ -70,19 +86,78 @@ let CommentsService = class CommentsService extends ide_core_browser_1.Disposabl
         // 对于新增的空的 thread，默认显示当前用户的头像，否则使用第一个用户的头像
         const avatar = thread.comments.length === 0 ? this.currentAuthorAvatar : (_a = thread.comments[0].author.iconPath) === null || _a === void 0 ? void 0 : _a.toString();
         const icon = avatar
-            ? this.iconService.fromIcon('', avatar, ide_theme_1.IconType.Background)
-            : this.iconService.fromString('$(comment-unresolved)');
+            ? `${this.iconService.fromIcon('', avatar, ide_theme_1.IconType.Background)} avatar-icon`
+            : this.iconService.fromString('$(comment)');
         const decorationOptions = {
             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);
+    }
+    updateActiveThreadDecoration(thread) {
+        var _a;
+        const editor = this.getCurrentEditor(thread === null || thread === void 0 ? void 0 : thread.uri);
+        if (!editor) {
+            return;
+        }
+        (_a = this.currentThreadCollapseStateListener) === null || _a === void 0 ? void 0 : _a.dispose();
+        const newDecoration = [];
+        if (thread) {
+            const range = thread.range;
+            if (!thread.isCollapsed) {
+                this.currentThreadCollapseStateListener = thread.onDidChangeCollapsibleState((state) => {
+                    if (state === common_1.CommentThreadCollapsibleState.Collapsed) {
+                        this.updateActiveThreadDecoration(undefined);
+                    }
+                });
+                newDecoration.push({
+                    range,
+                    options: this.createThreadRangeActiveDecoration(),
+                });
+            }
+        }
+        this.activeThreadDecorationIds = editor.monacoEditor.deltaDecorations(this.activeThreadDecorationIds, newDecoration);
+    }
+    createDottedRangeDecoration() {
+        const decorationOptions = {
+            description: 'comments-multiline-hover-decoration',
+            linesDecorationsClassName: ['comment-range', 'multiline-add'].join(' '),
         };
         return textModel.ModelDecorationOptions.createDynamic(decorationOptions);
     }
     createHoverDecoration() {
         const decorationOptions = {
             description: 'comments-hover-decoration',
-            linesDecorationsClassName: ['comments-decoration', 'comments-add', (0, ide_core_browser_1.getIcon)('add-comments')].join(' '),
+            linesDecorationsClassName: ['comment-range', 'line-hover', 'comment-add'].join(' '),
+        };
+        return textModel.ModelDecorationOptions.createDynamic(decorationOptions);
+    }
+    createThreadRangeActiveDecoration() {
+        const activeDecorationOptions = {
+            description: 'comments-thread-range-active-decoration',
+            isWholeLine: false,
+            zIndex: 20,
+            className: 'comment-thread-range-current',
+            shouldFillLineOnLineBreak: true,
+        };
+        return textModel.ModelDecorationOptions.createDynamic(activeDecorationOptions);
+    }
+    createThreadRangeDecoration() {
+        const activeDecorationOptions = {
+            description: 'comments-thread-range-decoration',
+            isWholeLine: false,
+            zIndex: 20,
+            className: 'comment-thread-range',
+            shouldFillLineOnLineBreak: true,
+        };
+        return textModel.ModelDecorationOptions.createDynamic(activeDecorationOptions);
+    }
+    createCommentRangeDecoration() {
+        const decorationOptions = {
+            description: 'comments-range-decoration',
+            linesDecorationsClassName: ['comment-range', 'comment-diff-added'].join(' '),
         };
         return textModel.ModelDecorationOptions.createDynamic(decorationOptions);
     }
@@ -107,34 +182,43 @@ let CommentsService = class CommentsService extends ide_core_browser_1.Disposabl
         }));
         this.registerDecorationProvider();
     }
+    getCurrentEditor(uri) {
+        var _a;
+        if (uri) {
+            for (const editor of this.allEditors) {
+                if ((_a = editor.currentUri) === null || _a === void 0 ? void 0 : _a.isEqual(uri)) {
+                    this.editor = editor;
+                    return editor;
+                }
+            }
+        }
+        return this.editor;
+    }
     handleOnCreateEditor(editor) {
+        this.allEditors.push(editor);
+        this.editor = editor;
         const disposer = new ide_core_browser_1.Disposable();
+        let commentRangeDecorationIds = [];
+        let hasHiddenArea = false;
         disposer.addDispose(editor.monacoEditor.onMouseDown((event) => {
             if (event.target.type === browser_2.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 === browser_2.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);
+                    const threads = this.commentsThreads.filter((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));
@@ -147,45 +231,412 @@ let CommentsService = class CommentsService extends ide_core_browser_1.Disposabl
                 event.event.stopPropagation();
             }
         }));
-        let oldDecorations = [];
-        disposer.addDispose(editor.monacoEditor.onMouseMove((0, debounce_1.default)(async (event) => {
+        disposer.addDispose(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 === browser_2.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 = 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;
+        }));
+        disposer.addDispose(editor.monacoEditor.onMouseMove(async (event) => {
+            var _a, _b, _c;
             const uri = editor.currentUri;
             const range = event.target.range;
-            if (uri && range && (await this.shouldShowHoverDecoration(uri, range))) {
-                oldDecorations = editor.monacoEditor.deltaDecorations(oldDecorations, [
-                    {
-                        range: (0, ide_monaco_1.positionToRange)(range.startLineNumber),
-                        options: this.createHoverDecoration(),
-                    },
-                ]);
+            // 多行评论
+            if (this.startCommentRange) {
+                if (!((_a = event.target.element) === null || _a === void 0 ? void 0 : _a.className)) {
+                    if ((_c = (_b = event.target.element) === null || _b === void 0 ? void 0 : _b.offsetParent) === null || _c === void 0 ? void 0 : _c.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 {
-                oldDecorations = editor.monacoEditor.deltaDecorations(oldDecorations, []);
+                if (uri && range && (await this.shouldShowHoverDecoration(uri, range))) {
+                    const newDecorations = [
+                        {
+                            range: (0, ide_monaco_1.positionToRange)(range.startLineNumber),
+                            options: this.createHoverDecoration(),
+                        },
+                    ];
+                    commentRangeDecorationIds = editor.monacoEditor.deltaDecorations(commentRangeDecorationIds, newDecorations);
+                }
+            }
+        }));
+        disposer.addDispose(editor.monacoEditor.onMouseLeave(async (event) => {
+            var _a;
+            const range = (_a = event.target) === null || _a === void 0 ? void 0 : _a.range;
+            const newDecorations = [];
+            if (!this.startCommentRange && range) {
+                newDecorations.push({
+                    range: (0, ide_monaco_1.positionToRange)(range.startLineNumber),
+                    options: this.createCommentRangeDecoration(),
+                });
+            }
+            commentRangeDecorationIds = editor.monacoEditor.deltaDecorations(commentRangeDecorationIds, newDecorations);
+        }));
+        disposer.addDispose(this.onCommentRangeProviderChange(() => {
+            this.renderCommentRange(editor);
+        }));
+        disposer.addDispose(ide_core_browser_1.Event.any(this.onThreadsChanged, this.onThreadsCommentChange, this.onThreadsCreated)((thread) => {
+            const editor = this.getCurrentEditor(thread.uri);
+            if (editor) {
+                this.renderCommentRange(editor);
             }
-        }, 10)));
-        disposer.addDispose(editor.monacoEditor.onMouseLeave((0, debounce_1.default)(() => {
-            oldDecorations = editor.monacoEditor.deltaDecorations(oldDecorations, []);
-        }, 10)));
+            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;
     }
+    async getValidRange(range, 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;
+        }
+    }
+    ensureCommentingRangeReservedAmount(editor) {
+        const existing = this.getExistingCommentEditorOptions(editor);
+        const lineDecorationsWidth = this.editorLineDecorationsWidthMap.get(editor.getId());
+        if (existing.lineDecorationsWidth !== lineDecorationsWidth) {
+            editor.updateOptions({
+                lineDecorationsWidth: this.getWithCommentsLineDecorationWidth(editor, existing.lineDecorationsWidth),
+            });
+        }
+    }
+    async tryUpdateReservedSpace(editor) {
+        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);
+    }
+    getExistingCommentEditorOptions(editor) {
+        const lineDecorationsWidth = editor.monacoEditor.getOption(monaco.EditorOption.lineDecorationsWidth);
+        let extraEditorClassName = [];
+        const configuredExtraClassName = editor.monacoEditor.getRawOptions().extraEditorClassName;
+        if (configuredExtraClassName) {
+            extraEditorClassName = configuredExtraClassName.split(' ');
+        }
+        return { lineDecorationsWidth, extraEditorClassName };
+    }
+    getWithoutCommentsEditorOptions(editor, extraEditorClassName, startingLineDecorationsWidth) {
+        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 };
+    }
+    updateEditorLayoutOptions(editor, extraEditorClassName, lineDecorationsWidth) {
+        editor.updateOptions({
+            extraEditorClassName: extraEditorClassName.join(' '),
+            lineDecorationsWidth,
+        });
+    }
+    getWithCommentsEditorOptions(editor, extraEditorClassName, startingLineDecorationsWidth) {
+        extraEditorClassName.push('inline-comment');
+        return {
+            lineDecorationsWidth: this.getWithCommentsLineDecorationWidth(editor, startingLineDecorationsWidth),
+            extraEditorClassName,
+        };
+    }
+    getWithCommentsLineDecorationWidth(editor, startingLineDecorationsWidth) {
+        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;
+    }
+    async renderCommentRange(editor, selection = {
+        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 = [];
+            contributionRanges.map((contributionRange) => {
+                if (selection.startLineNumber === 0 && selection.endLineNumber === 0) {
+                    newDecorations.push({
+                        range: contributionRange,
+                        options: this.createCommentRangeDecoration(),
+                    });
+                }
+                else if (selection.startLineNumber <= contributionRange.startLineNumber &&
+                    selection.endLineNumber >= contributionRange.endLineNumber) {
+                    newDecorations.push(...[
+                        {
+                            range: contributionRange,
+                            options: this.createDottedRangeDecoration(),
+                        },
+                        {
+                            range: contributionRange,
+                            options: this.createThreadRangeDecoration(),
+                        },
+                    ]);
+                }
+                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(),
+                            },
+                            {
+                                range: selectionRange,
+                                options: this.createDottedRangeDecoration(),
+                            },
+                            {
+                                range: selectionRange,
+                                options: this.createThreadRangeDecoration(),
+                            },
+                        ]);
+                    }
+                    else {
+                        newDecorations.push({
+                            range: contributionRange,
+                            options: this.createCommentRangeDecoration(),
+                        });
+                    }
+                }
+                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(),
+                                    },
+                                ]
+                                : [];
+                            decorations.push({
+                                range: selection,
+                                options: this.createDottedRangeDecoration(),
+                            });
+                            decorations.push({
+                                range: selection,
+                                options: this.createThreadRangeDecoration(),
+                            });
+                            decorations.push({
+                                range: bottomCommentRange,
+                                options: this.createCommentRangeDecoration(),
+                            });
+                            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(),
+                                },
+                                {
+                                    range: selectionRange,
+                                    options: this.createThreadRangeDecoration(),
+                                },
+                                {
+                                    range: bottomCommentRange,
+                                    options: this.createCommentRangeDecoration(),
+                                },
+                            ]);
+                        }
+                    }
+                    else {
+                        newDecorations.push({
+                            range: contributionRange,
+                            options: this.createCommentRangeDecoration(),
+                        });
+                    }
+                }
+            });
+            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(), []);
+        }
+    }
     async shouldShowHoverDecoration(uri, range) {
         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);
-        // 如果不支持对同一行进行多个评论，那么过滤掉当前有 thread 行号的 decoration
-        const isShowHoverToSingleLine = this.isMultiCommentsForSingleLine ||
-            !this.commentsThreads.some((thread) => thread.uri.isEqual(uri) && thread.range.startLineNumber === range.startLineNumber);
-        return isProviderRanges && isShowHoverToSingleLine;
+        const isProviderRanges = contributionRanges.some((contributionRange) => range.startLineNumber <= contributionRange.endLineNumber);
+        return isProviderRanges;
     }
     createThread(uri, range, options = {
         comments: [],
         readOnly: false,
     }) {
         // 获取当前 range 的 providerId，用于 commentController contextKey 的生成
-        const providerId = this.getProviderIdsByLine(range.startLineNumber)[0];
+        const providerId = this.getProviderIdsByLine(range.endLineNumber)[0];
         const thread = this.injector.get(comments_thread_1.CommentsThread, [uri, range, providerId, options]);
         thread.onDispose(() => {
             this.threads.delete(thread.id);
@@ -226,11 +677,16 @@ let CommentsService = class CommentsService extends ide_core_browser_1.Disposabl
         return childs;
     }
     handleCommentContentNode(parent) {
+        var _a;
         const childs = [];
         for (const thread of parent.threads) {
             const [first] = thread.comments;
             const comment = typeof first.body === 'string' ? first.body : first.body.value;
-            childs.push(new tree_node_defined_1.CommentContentNode(this, thread, comment, `[Ln ${thread.range.startLineNumber}]`, first.author.iconPath
+            let description = `[Ln ${thread.range.startLineNumber}]`;
+            if (thread.range.startLineNumber !== thread.range.endLineNumber) {
+                description = `[Ln ${thread.range.startLineNumber}-${thread.range.endLineNumber}]`;
+            }
+            childs.push(new tree_node_defined_1.CommentContentNode(this, thread, comment, description, first.author.iconPath && ((_a = first.author.iconPath) === null || _a === void 0 ? void 0 : _a.authority)
                 ? this.iconService.fromIcon('', first.author.iconPath.toString(), ide_theme_1.IconType.Background)
                 : (0, ide_core_browser_1.getIcon)('message'), first.author, parent.resource, parent));
         }
@@ -278,12 +734,15 @@ let CommentsService = class CommentsService extends ide_core_browser_1.Disposabl
         if (cache) {
             return await cache.promise;
         }
-        const model = this.documentService.getModelReference(uri, 'get-contribution-rages');
+        const model = this.documentService.getModelReference(uri, 'Get Comment Range');
         const rangePromise = [];
         for (const rangeProvider of this.rangeProviderMap) {
             const [id, provider] = rangeProvider;
             rangePromise.push((async () => {
-                const ranges = await provider.getCommentingRanges(model === null || model === void 0 ? void 0 : model.instance);
+                if (!(model === null || model === void 0 ? void 0 : 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);
@@ -333,7 +792,12 @@ let CommentsService = class CommentsService extends ide_core_browser_1.Disposabl
                 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),
             })),
         });
@@ -359,6 +823,7 @@ let CommentsService = class CommentsService extends ide_core_browser_1.Disposabl
         this.rangeProviderMap.set(id, provider);
         // 注册一个新的 range provider 后清理掉之前的缓存
         this.providerDecorationCache.clear();
+        this.commentRangeProviderChangeEmitter.fire();
         return ide_core_browser_1.Disposable.create(() => {
             this.rangeProviderMap.delete(id);
             this.rangeOwner.delete(id);
@@ -378,7 +843,6 @@ let CommentsService = class CommentsService extends ide_core_browser_1.Disposabl
     getProviderIdsByLine(line) {
         const result = [];
         if (this.rangeOwner.size === 1) {
-            // 只有一个provider，直接返回
             return [this.rangeOwner.keys().next().value];
         }
         for (const rangeOwner of this.rangeOwner) {