fix(sheets-thread-comment-ui): delete comment error (#3476)

dream-num · Sep 20, 2024 · 01a78da · 01a78da
1 parent 42ce257
commit 01a78da
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 51 deletions.
diff --git a/packages/sheets-thread-comment/src/plugin.ts b/packages/sheets-thread-comment/src/plugin.ts
@@ -14,20 +14,21 @@
  * limitations under the License.
  */
 
-import type { Dependency } from '@univerjs/core';
 import { DependentOn, ICommandService, IConfigService, Inject, Injector, Plugin, UniverInstanceType } from '@univerjs/core';
-import { UniverThreadCommentUIPlugin } from '@univerjs/thread-comment-ui';
 import { UniverSheetsThreadCommentBasePlugin } from '@univerjs/sheets-thread-comment-base';
-import { SheetsThreadCommentController } from './controllers/sheets-thread-comment.controller';
-import { SheetsThreadCommentPopupService } from './services/sheets-thread-comment-popup.service';
+import { UniverThreadCommentUIPlugin } from '@univerjs/thread-comment-ui';
+import type { Dependency } from '@univerjs/core';
 import { ShowAddSheetCommentModalOperation } from './commands/operations/comment.operation';
+import { defaultPluginConfig, PLUGIN_CONFIG_KEY } from './controllers/config.schema';
 import { SheetsThreadCommentRenderController } from './controllers/render-controllers/render.controller';
-import { SHEETS_THREAD_COMMENT } from './types/const';
+import { SheetsThreadCommentController } from './controllers/sheets-thread-comment.controller';
 import { SheetsThreadCommentCopyPasteController } from './controllers/sheets-thread-comment-copy-paste.controller';
 import { SheetsThreadCommentHoverController } from './controllers/sheets-thread-comment-hover.controller';
+import { SheetsThreadCommentPopupController } from './controllers/sheets-thread-comment-popup.controller';
 import { ThreadCommentRemoveSheetsController } from './controllers/sheets-thread-comment-remove.controller';
+import { SheetsThreadCommentPopupService } from './services/sheets-thread-comment-popup.service';
+import { SHEETS_THREAD_COMMENT } from './types/const';
 import type { IUniverSheetsThreadCommentConfig } from './controllers/config.schema';
-import { defaultPluginConfig, PLUGIN_CONFIG_KEY } from './controllers/config.schema';
 
 @DependentOn(UniverThreadCommentUIPlugin, UniverSheetsThreadCommentBasePlugin)
 export class UniverSheetsThreadCommentPlugin extends Plugin {
@@ -57,6 +58,7 @@ export class UniverSheetsThreadCommentPlugin extends Plugin {
             [SheetsThreadCommentCopyPasteController],
             [SheetsThreadCommentHoverController],
             [ThreadCommentRemoveSheetsController],
+            [SheetsThreadCommentPopupController],
             [SheetsThreadCommentPopupService],
         ] as Dependency[]).forEach((dep) => {
             this._injector.add(dep);

diff --git a/packages/sheets-thread-comment/src/views/sheets-thread-comment-panel/index.tsx b/packages/sheets-thread-comment/src/views/sheets-thread-comment-panel/index.tsx
@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import type { Workbook } from '@univerjs/core';
 import { ICommandService, IUniverInstanceService, UniverInstanceType, useDependency } from '@univerjs/core';
+import { singleReferenceToGrid } from '@univerjs/engine-formula';
+import { IMarkSelectionService } from '@univerjs/sheets-ui';
 import { ThreadCommentPanel, ThreadCommentPanelService } from '@univerjs/thread-comment-ui';
 import { useObservable } from '@univerjs/ui';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { map } from 'rxjs';
+import type { Workbook } from '@univerjs/core';
 import type { IThreadComment } from '@univerjs/thread-comment';
-import { singleReferenceToGrid } from '@univerjs/engine-formula';
-import { IMarkSelectionService } from '@univerjs/sheets-ui';
 import { ShowAddSheetCommentModalOperation } from '../../commands/operations/comment.operation';
 import { SheetsThreadCommentPopupService } from '../../services/sheets-thread-comment-popup.service';
 

diff --git a/packages/thread-comment-ui/src/views/thread-comment-panel/index.tsx b/packages/thread-comment-ui/src/views/thread-comment-panel/index.tsx
@@ -14,20 +14,20 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { ICommandService, LocaleService, UniverInstanceType, useDependency, UserManagerService } from '@univerjs/core';
-import type { IThreadComment } from '@univerjs/thread-comment';
-import { ThreadCommentModel } from '@univerjs/thread-comment';
-import type { Nullable } from '@univerjs/core';
-import { useObservable } from '@univerjs/ui';
 import { Button, Select } from '@univerjs/design';
 import { IncreaseSingle } from '@univerjs/icons';
+import { ThreadCommentModel } from '@univerjs/thread-comment';
+import { useObservable } from '@univerjs/ui';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import type { Nullable } from '@univerjs/core';
+import type { IThreadComment } from '@univerjs/thread-comment';
 import type { Observable } from 'rxjs';
-import type { IThreadCommentTreeProps } from '../thread-comment-tree';
-import { ThreadCommentTree } from '../thread-comment-tree';
-import { ThreadCommentPanelService } from '../../services/thread-comment-panel.service';
 import { SetActiveCommentOperation } from '../../commands/operations/comment.operations';
+import { ThreadCommentPanelService } from '../../services/thread-comment-panel.service';
+import { ThreadCommentTree } from '../thread-comment-tree';
 import styles from './index.module.less';
+import type { IThreadCommentTreeProps } from '../thread-comment-tree';
 
 export interface IThreadCommentPanelProps {
     unitId: string;

diff --git a/packages/thread-comment-ui/src/views/thread-comment-tree/index.tsx b/packages/thread-comment-ui/src/views/thread-comment-tree/index.tsx
@@ -14,21 +14,21 @@
  * limitations under the License.
  */
 
-import { useDependency } from '@univerjs/core';
-import type { IAddCommentCommandParams, IThreadComment, IUpdateCommentCommandParams } from '@univerjs/thread-comment';
-import { AddCommentCommand, DeleteCommentCommand, DeleteCommentTreeCommand, ResolveCommentCommand, ThreadCommentModel, UpdateCommentCommand } from '@univerjs/thread-comment';
-import React, { useEffect, useRef, useState } from 'react';
+import { generateRandomId, useDependency } from '@univerjs/core';
+import { ICommandService, type IUser, LocaleService, type UniverInstanceType, UserManagerService } from '@univerjs/core';
+import { Dropdown, Menu, MenuItem } from '@univerjs/design';
 import { DeleteSingle, MoreHorizontalSingle, ReplyToCommentSingle, ResolvedSingle, SolveSingle } from '@univerjs/icons';
-import { ICommandService, type IUser, LocaleService, Tools, type UniverInstanceType, UserManagerService } from '@univerjs/core';
+import { AddCommentCommand, DeleteCommentCommand, DeleteCommentTreeCommand, ResolveCommentCommand, ThreadCommentModel, UpdateCommentCommand } from '@univerjs/thread-comment';
 import { useObservable } from '@univerjs/ui';
-import { Dropdown, Menu, MenuItem } from '@univerjs/design';
 import cs from 'clsx';
-import type { IThreadCommentEditorInstance } from '../thread-comment-editor';
+import React, { useEffect, useRef, useState } from 'react';
+import type { IAddCommentCommandParams, IThreadComment, IUpdateCommentCommandParams } from '@univerjs/thread-comment';
+import { SetActiveCommentOperation } from '../../commands/operations/comment.operations';
+import { getDT } from '../../common/utils';
 import { ThreadCommentEditor } from '../thread-comment-editor';
 import { transformDocument2TextNodes, transformTextNodes2Document } from '../thread-comment-editor/util';
-import { getDT } from '../../common/utils';
-import { SetActiveCommentOperation } from '../../commands/operations/comment.operations';
 import styles from './index.module.less';
+import type { IThreadCommentEditorInstance } from '../thread-comment-editor';
 
 export interface IThreadCommentTreeProps {
     id?: string;
@@ -229,6 +229,7 @@ export const ThreadCommentTree = (props: IThreadCommentTreeProps) => {
             }],
         ...(comments?.children ?? []) as IThreadComment[],
     ];
+    const scroller = useRef<HTMLDivElement>(null);
     const handleResolve: React.MouseEventHandler<HTMLDivElement> = (e) => {
         e.stopPropagation();
         if (!resolved) {
@@ -322,7 +323,7 @@ export const ThreadCommentTree = (props: IThreadCommentTreeProps) => {
                     )
                     : null}
             </div>
-            <div className={styles.threadCommentContent}>
+            <div className={styles.threadCommentContent} ref={scroller}>
                 {renderComments.map(
                     (item) => (
                         <ThreadCommentItem
@@ -369,12 +370,12 @@ export const ThreadCommentTree = (props: IThreadCommentTreeProps) => {
                             ref={editorRef}
                             unitId={unitId}
                             subUnitId={subUnitId}
-                            onSave={({ text, attachments }) => {
+                            onSave={async ({ text, attachments }) => {
                                 const comment: IThreadComment = {
                                     text,
                                     attachments,
                                     dT: getDT(),
-                                    id: Tools.generateRandomId(),
+                                    id: generateRandomId(),
                                     ref: refStr!,
                                     personId: currentUser?.userID!,
                                     parentId: comments?.root.id,
@@ -387,14 +388,17 @@ export const ThreadCommentTree = (props: IThreadCommentTreeProps) => {
                                     return;
                                 }
 
-                                commandService.executeCommand(
+                                await commandService.executeCommand(
                                     AddCommentCommand.id,
                                     {
                                         unitId,
                                         subUnitId,
                                         comment,
                                     } as IAddCommentCommandParams
                                 );
+                                if (scroller.current) {
+                                    scroller.current.scrollTop = scroller.current.scrollHeight;
+                                }
                             }}
                             autoFocus={autoFocus || (!comments)}
                             onCancel={() => {

diff --git a/packages/thread-comment/src/commands/commands/comment.command.ts b/packages/thread-comment/src/commands/commands/comment.command.ts
@@ -15,10 +15,10 @@
  */
 
 import { CommandType, type ICommand, ICommandService } from '@univerjs/core';
-import type { IThreadComment } from '../../types/interfaces/i-thread-comment';
 import { ThreadCommentModel } from '../../models/thread-comment.model';
-import { AddCommentMutation, DeleteCommentMutation, type IUpdateCommentPayload, ResolveCommentMutation, UpdateCommentMutation } from '../mutations/comment.mutation';
 import { IThreadCommentDataSourceService } from '../../services/tc-datasource.service';
+import { AddCommentMutation, DeleteCommentMutation, type IUpdateCommentPayload, ResolveCommentMutation, UpdateCommentMutation } from '../mutations/comment.mutation';
+import type { IThreadComment } from '../../types/interfaces/i-thread-comment';
 
 export interface IAddCommentCommandParams {
     unitId: string;
@@ -34,7 +34,6 @@ export const AddCommentCommand: ICommand<IAddCommentCommandParams> = {
             return false;
         }
         const commandService = accessor.get(ICommandService);
-        // const undoRedoService = accessor.get(IUndoRedoService);
         const dataSourceService = accessor.get(IThreadCommentDataSourceService);
         const { comment: originComment } = params;
         const comment = await dataSourceService.addComment(originComment);
@@ -51,20 +50,6 @@ export const AddCommentCommand: ICommand<IAddCommentCommandParams> = {
 
         if (isRoot) {
             const res = await commandService.executeCommand(redo.id, redo.params);
-            // const undo = {
-            //     id: DeleteCommentMutation.id,
-            //     params: {
-            //         unitId,
-            //         subUnitId,
-            //         commentId: comment.id,
-            //     },
-            // };
-            // res && undoRedoService.pushUndoRedo({
-            //     undoMutations: [undo],
-            //     redoMutations: [redo],
-            //     unitID: unitId,
-            // });
-
             return res;
         }
 

diff --git a/packages/thread-comment/src/models/thread-comment.model.ts b/packages/thread-comment/src/models/thread-comment.model.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { BehaviorSubject, map, Subject } from 'rxjs';
 import { CustomRangeType, Disposable, ICommandService, Inject } from '@univerjs/core';
-import type { IBaseComment, IThreadComment } from '../types/interfaces/i-thread-comment';
-import type { IUpdateCommentPayload, IUpdateCommentRefPayload } from '../commands/mutations/comment.mutation';
+import { BehaviorSubject, map, Subject } from 'rxjs';
 import { IThreadCommentDataSourceService } from '../services/tc-datasource.service';
+import type { IUpdateCommentPayload, IUpdateCommentRefPayload } from '../commands/mutations/comment.mutation';
+import type { IBaseComment, IThreadComment } from '../types/interfaces/i-thread-comment';
 
 export type CommentUpdate = {
     unitId: string;
@@ -344,7 +344,7 @@ export class ThreadCommentModel extends Disposable {
         if (current.parentId) {
             const root = commentChildrenMap.get(current.parentId);
             if (root && root.children) {
-                const index = root.children.findIndex((comment) => comment.id = commentId);
+                const index = root.children.findIndex((comment) => comment.id === commentId);
                 root.children.splice(index, 1);
             }
             delete commentMap[commentId];