@opensumi/ide-comments 3.9.1-next-1749546307.0 → 3.9.1-next-1749547010.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensumi/ide-comments",
-  "version": "3.9.1-next-1749546307.0",
+  "version": "3.9.1-next-1749547010.0",
   "files": [
     "lib",
     "src"
@@ -17,19 +17,19 @@
     "url": "git@github.com:opensumi/core.git"
   },
   "dependencies": {
-    "@opensumi/ide-core-common": "3.9.1-next-1749546307.0",
+    "@opensumi/ide-core-common": "3.9.1-next-1749547010.0",
     "react-mentions": "^4.4.10"
   },
   "devDependencies": {
-    "@opensumi/ide-components": "3.9.1-next-1749546307.0",
-    "@opensumi/ide-core-browser": "3.9.1-next-1749546307.0",
-    "@opensumi/ide-dev-tool": "3.9.1-next-1749546307.0",
-    "@opensumi/ide-editor": "3.9.1-next-1749546307.0",
-    "@opensumi/ide-main-layout": "3.9.1-next-1749546307.0",
-    "@opensumi/ide-monaco": "3.9.1-next-1749546307.0",
-    "@opensumi/ide-monaco-enhance": "3.9.1-next-1749546307.0",
-    "@opensumi/ide-theme": "3.9.1-next-1749546307.0",
+    "@opensumi/ide-components": "3.9.1-next-1749547010.0",
+    "@opensumi/ide-core-browser": "3.9.1-next-1749547010.0",
+    "@opensumi/ide-dev-tool": "3.9.1-next-1749547010.0",
+    "@opensumi/ide-editor": "3.9.1-next-1749547010.0",
+    "@opensumi/ide-main-layout": "3.9.1-next-1749547010.0",
+    "@opensumi/ide-monaco": "3.9.1-next-1749547010.0",
+    "@opensumi/ide-monaco-enhance": "3.9.1-next-1749547010.0",
+    "@opensumi/ide-theme": "3.9.1-next-1749547010.0",
     "@types/react-mentions": "^4.1.13"
   },
-  "gitHead": "b6c7e9fae4bda7d6db15119cdcf514f7a08cb693"
+  "gitHead": "f4f48c465e691f24756394ae1a7c524f5eda57e5"
 }

package/src/browser/comments-thread.ts

@@ -59,6 +59,9 @@ export class CommentsThread extends Disposable implements ICommentsThread {
 
   private onDidChangeEmitter: Emitter<void> = new Emitter();
 
+  // 用于跟踪待执行的 setTimeout，避免快速滚动时的竞态条件
+  private pendingShowTimeouts = new Set<NodeJS.Timeout>();
+
   get onDidChange() {
     return this.onDidChangeEmitter.event;
   }
@@ -111,6 +114,14 @@ export class CommentsThread extends Disposable implements ICommentsThread {
         commentThreadIsEmptyContext.set(!length);
       }),
     );
+    const editors = this.getEditorsByUri(this.uri);
+    editors.forEach((editor) => {
+      const widget = this.widgets.get(editor);
+      // 说明是在新的 group 中打开
+      if (!widget) {
+        this.addWidgetByEditor(editor);
+      }
+    });
     this.addDispose(
       autorun((reader) => {
         const isCollapsed = this.isCollapsed.read(reader);
@@ -132,6 +143,9 @@ export class CommentsThread extends Disposable implements ICommentsThread {
     this.addDispose({
       dispose: () => {
         this.updateComments([]);
+        // 清理待执行的 timeout
+        this.pendingShowTimeouts.forEach((timeout) => clearTimeout(timeout));
+        this.pendingShowTimeouts.clear();
       },
     });
     this.onDidChangeEmitter.fire();
@@ -182,7 +196,7 @@ export class CommentsThread extends Disposable implements ICommentsThread {
 
   private addWidgetByEditor(editor: IEditor) {
     const widget = this.injector.get(CommentsZoneWidget, [editor, this, { arrowColor: 'var(--peekView-border)' }]);
-    // 如果当前 widget 发生高度变化，通知同一个 同一个 editor 的其他 range 相同的 thread 也重新计算一下高度
+    // 如果当前 widget 发生高度变化，通知同一个 editor 的其他 range 相同的 thread 也重新计算一下高度
     this.addDispose(
       widget.onChangeZoneWidget(() => {
         const threads = this.commentsService.commentsThreads.filter((thread) => this.isEqual(thread));
@@ -236,14 +250,23 @@ export class CommentsThread extends Disposable implements ICommentsThread {
           widget = this.addWidgetByEditor(editor);
         }
         // 如果标记之前是已经展示的 widget，则调用 show 方法
-        if (editor.currentUri?.isEqual(this.uri)) {
+        if (widget && editor.currentUri?.isEqual(this.uri)) {
           widget.show();
         }
       });
     }
   }
 
+  public removePaddingShowedWidgets() {
+    this.pendingShowTimeouts.forEach((timeout) => clearTimeout(timeout));
+    this.pendingShowTimeouts.clear();
+  }
+
   public showWidgetsIfShowed() {
+    // 清除之前的待执行 timeout，避免竞态条件
+    this.pendingShowTimeouts.forEach((timeout) => clearTimeout(timeout));
+    this.pendingShowTimeouts.clear();
+
     for (const editor of this.getEditorsByUri(this.uri)) {
       let widget = this.widgets.get(editor);
       // 说明是在新的 group 中打开
@@ -252,9 +275,16 @@ export class CommentsThread extends Disposable implements ICommentsThread {
       }
       // 如果标记之前是已经展示的 widget，则调用 show 方法
       if (editor.currentUri?.isEqual(this.uri)) {
-        setTimeout(() => {
-          widget?.show();
-        }, 0);
+        const timeout = setTimeout(() => {
+          // 在异步回调中再次检查编辑器的当前 URI 是否仍然匹配 thread 的 URI
+          // 防止用户快速滚动时 widget 渲染到错误的文件中
+          if (widget && editor.currentUri?.isEqual(this.uri)) {
+            widget.show();
+          }
+          // 执行完成后从跟踪集合中移除
+          this.pendingShowTimeouts.delete(timeout);
+        }, 100);
+        this.pendingShowTimeouts.add(timeout);
       }
     }
   }

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

@@ -206,10 +206,15 @@ export class CommentsZoneWidget extends ResizeZoneWidget implements ICommentsZon
       </ConfigProvider>,
     );
 
+    const disposer = editor.monacoEditor.onDidChangeModel(() => {
+      thread.hide();
+    });
+
     this.addDispose({
       dispose: () => {
         this.wrapperRoot?.unmount();
         this.wrapperRoot = undefined;
+        disposer.dispose();
       },
     });
   }

package/src/browser/comments.service.ts

@@ -18,7 +18,7 @@ import {
   localize,
   memoize,
 } from '@opensumi/ide-core-browser';
-import { IEditor } from '@opensumi/ide-editor';
+import { EditorCollectionService, IEditor } from '@opensumi/ide-editor';
 import {
   IEditorDecorationCollectionService,
   IEditorDocumentModelService,
@@ -77,6 +77,9 @@ export class CommentsService extends Disposable implements ICommentsService {
   @Autowired(WorkbenchEditorService)
   private readonly workbenchEditorService: WorkbenchEditorService;
 
+  @Autowired(EditorCollectionService)
+  private readonly editorCollectionService: EditorCollectionService;
+
   @Autowired(ResourceService)
   private readonly resourceService: ResourceService;
 
@@ -106,6 +109,8 @@ export class CommentsService extends Disposable implements ICommentsService {
 
   private decorationProviderDisposer = Disposable.NULL;
 
+  private editorRenderAbortControllers = new Map<string, AbortController>();
+
   get commentsThreads() {
     return [...this.threads.values()];
   }
@@ -300,10 +305,27 @@ export class CommentsService extends Disposable implements ICommentsService {
     return this.editor;
   }
 
+  private editorDisposerMap = new Map<string, Disposable>();
+
   public handleOnCreateEditor(editor: IEditor) {
+    const disposer = new Disposable();
+    if (this.allEditors.some((e) => e.monacoEditor.getId() === editor.monacoEditor.getId())) {
+      return this.editorDisposerMap.get(editor.monacoEditor.getId()) || disposer;
+    }
+    this.editorDisposerMap.set(editor.monacoEditor.getId(), disposer);
     this.allEditors.push(editor);
+
+    disposer.addDispose(
+      Disposable.create(() => {
+        const controller = this.editorRenderAbortControllers.get(editor.getId());
+        if (controller) {
+          controller.abort();
+          this.editorRenderAbortControllers.delete(editor.getId());
+        }
+      }),
+    );
+
     this.editor = editor;
-    const disposer = new Disposable();
     let commentRangeDecorationIds: string[] = [];
     let hasHiddenArea = false;
 
@@ -507,9 +529,17 @@ export class CommentsService extends Disposable implements ICommentsService {
     this.tryUpdateReservedSpace(editor);
 
     disposer.addDispose(
-      editor.monacoEditor.onDidChangeModel(() => {
-        this.renderCommentRange(editor);
-        this.tryUpdateReservedSpace(editor);
+      editor.monacoEditor.onDidChangeModel((event) => {
+        const { newModelUrl } = event;
+        if (newModelUrl) {
+          const currentMultiDiffEditor = this.editorCollectionService.listMultiDiffEditors()[0];
+          if (currentMultiDiffEditor) {
+            editor.updateDocumentModel?.(URI.from(newModelUrl));
+          }
+        }
+        this.renderCommentRange(editor).then(() => {
+          this.tryUpdateReservedSpace(editor);
+        });
       }),
     );
     return disposer;
@@ -560,7 +590,7 @@ export class CommentsService extends Disposable implements ICommentsService {
     }
   }
 
-  private async tryUpdateReservedSpace(editor: IEditor) {
+  private tryUpdateReservedSpace(editor: IEditor) {
     if (!editor) {
       return;
     }
@@ -661,125 +691,73 @@ export class CommentsService extends Disposable implements ICommentsService {
     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,
-            };
+
+    const prevController = this.editorRenderAbortControllers.get(editor.getId());
+    if (prevController) {
+      prevController.abort();
+    }
+
+    const controller = new AbortController();
+    this.editorRenderAbortControllers.set(editor.getId(), controller);
+
+    try {
+      const contributionRanges = await this.getContributionRanges(editor.currentUri);
+      if (controller.signal.aborted) {
+        return;
+      }
+
+      if (contributionRanges.length > 0) {
+        const newDecorations: {
+          range: IRange;
+          options: monaco.editor.IModelDecorationOptions;
+        }[] = [];
+        contributionRanges.map((contributionRange) => {
+          // Check if operation was cancelled
+          if (controller.signal.aborted) {
+            return;
+          }
+          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: topCommentRange,
-                  options: this.createCommentRangeDecoration() as unknown as monaco.editor.IModelDecorationOptions,
-                },
-                {
-                  range: selectionRange,
+                  range: contributionRange,
                   options: this.createDottedRangeDecoration() as unknown as monaco.editor.IModelDecorationOptions,
                 },
                 {
-                  range: selectionRange,
+                  range: contributionRange,
                   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,
+          } else if (selection.endLineNumber >= contributionRange.endLineNumber) {
+            if (selection.startLineNumber <= contributionRange.endLineNumber) {
+              // 存在交集
+              const selectionRange = {
+                startLineNumber: selection.startLineNumber,
                 endLineNumber: contributionRange.endLineNumber,
-                endColumn: contributionRange.endColumn,
+                startColumn: selection.startColumn,
+                endColumn: selection.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 = {
+              const topCommentRange = {
                 startLineNumber: contributionRange.startLineNumber,
+                endLineNumber: selectionRange.startLineNumber - 1,
                 startColumn: contributionRange.startColumn,
-                endLineNumber: selection.endLineNumber,
-                endColumn: selection.endColumn,
-              };
-              const bottomCommentRange = {
-                startLineNumber: selectionRange.endLineNumber + 1,
-                startColumn: selectionRange.endColumn,
-                endLineNumber: contributionRange.endLineNumber,
-                endColumn: contributionRange.endColumn,
+                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,
@@ -788,28 +766,108 @@ export class CommentsService extends Disposable implements ICommentsService {
                     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,
+              });
+            }
+          } 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,
+              });
             }
-          } else {
-            newDecorations.push({
-              range: contributionRange,
-              options: this.createCommentRangeDecoration() as unknown as monaco.editor.IModelDecorationOptions,
-            });
           }
+        });
+
+        if (controller.signal.aborted) {
+          return;
         }
-      });
-      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(), []);
+
+        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(), []);
+      }
+    } finally {
+      if (this.editorRenderAbortControllers.get(editor.getId()) === controller) {
+        this.editorRenderAbortControllers.delete(editor.getId());
+      }
     }
   }
 
@@ -1012,8 +1070,8 @@ export class CommentsService extends Disposable implements ICommentsService {
   }
 
   private registerDecorationProvider() {
-    // dispose 掉上一个 decorationProvider
     this.decorationProviderDisposer.dispose();
+    // 该逻辑仅在非平铺模式的 DiffEditor 中生效，当平铺模式时，会同时存在多个可见的 editor，所以需要单独处理
     this.decorationProviderDisposer = this.editorDecorationCollectionService.registerDecorationProvider({
       schemes: [...this.shouldShowCommentsSchemes.values()],
       key: 'comments',
@@ -1021,23 +1079,23 @@ export class CommentsService extends Disposable implements ICommentsService {
       provideEditorDecoration: (uri: URI) =>
         this.commentsThreads
           .map((thread) => {
-            if (thread.uri.codeUri.path === uri.codeUri.path) {
-              if (thread.comments.get().length) {
-                // 存在评论内容 恢复之前的现场
-                thread.showWidgetsIfShowed();
+            if (thread.uri.isEqual(uri)) {
+              const editor = this.editorCollectionService.getEditorByUri(thread.uri);
+              if (editor) {
+                thread.show(editor);
+              } else {
+                thread.hide();
               }
             } else {
-              // 临时隐藏，当切回来时会恢复
               thread.hide();
             }
             return thread;
           })
           .filter((thread) => {
             const isCurrentThread = thread.uri.isEqual(uri);
-            if (this.filterThreadDecoration) {
-              return isCurrentThread && this.filterThreadDecoration(thread);
-            }
-            return isCurrentThread;
+            return this.filterThreadDecoration
+              ? isCurrentThread && this.filterThreadDecoration(thread)
+              : isCurrentThread;
           })
           .map((thread) => ({
             range: {

package/src/common/index.ts

@@ -540,6 +540,10 @@ export interface ICommentsThread extends IDisposable {
    * 如果之前是显示的状态，则恢复显示
    */
   showWidgetsIfShowed(): void;
+  /**
+   * 移除即将显示的 widget，避免竞态条件
+   */
+  removePaddingShowedWidgets(): void;
   /**
    * 临时隐藏 wiget，restoreShow 时恢复
    */