diff --git a/packages/frontend/core/src/components/comment/comment-editor/index.tsx b/packages/frontend/core/src/components/comment/comment-editor/index.tsx index 97efb7aaa..d39504eea 100644 --- a/packages/frontend/core/src/components/comment/comment-editor/index.tsx +++ b/packages/frontend/core/src/components/comment/comment-editor/index.tsx @@ -109,7 +109,6 @@ export const CommentEditor = forwardRef( useEffect(() => { let cancel = false; if (autoFocus && editorRef.current && doc) { - // fixme: the following does not work // Wait for editor to be fully loaded before focusing editorRef.current.updateComplete .then(async () => { @@ -128,6 +127,7 @@ export const CommentEditor = forwardRef( block: 'center', }); + // fixme: the following does not work inlineEditor?.focusEnd(); }) .catch(console.error); @@ -152,6 +152,25 @@ export const CommentEditor = forwardRef( return; }, [doc, onChange, snapshotHelper]); + // Add keydown handler to commit on Enter key + const handleKeyDown = useCallback( + (e: React.KeyboardEvent) => { + if (readonly) return; + + // Only handle Enter if focus is within the editor + const activeElement = document.activeElement; + if (!editorRef.current?.contains(activeElement)) return; + + // If Enter is pressed without Shift key, commit the comment + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + e.stopPropagation(); + onCommit?.(); + } + }, + [onCommit, readonly] + ); + const handleClickEditor = useCallback( (e: React.MouseEvent) => { e.stopPropagation(); @@ -165,6 +184,7 @@ export const CommentEditor = forwardRef( return (
diff --git a/packages/frontend/core/src/components/comment/sidebar/index.tsx b/packages/frontend/core/src/components/comment/sidebar/index.tsx index 22ef1860f..9623a2374 100644 --- a/packages/frontend/core/src/components/comment/sidebar/index.tsx +++ b/packages/frontend/core/src/components/comment/sidebar/index.tsx @@ -26,6 +26,7 @@ import { useServiceOptional, } from '@toeverything/infra'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; import { useAsyncCallback } from '../../hooks/affine-async-hooks'; import { CommentEditor } from '../comment-editor'; @@ -243,7 +244,7 @@ const CommentItem = ({ refreshKey: 'comment-' + Date.now(), }, { - show: true, + replaceHistory: true, } ); entity.highlightComment(comment.id); @@ -251,11 +252,9 @@ const CommentItem = ({ useEffect(() => { const subscription = entity.commentHighlighted$ - .distinctUntilChanged() + .pipe(debounceTime(0), distinctUntilChanged()) .subscribe(id => { if (id === comment.id && commentRef.current) { - commentRef.current.scrollIntoView({ behavior: 'smooth' }); - // Auto-start reply when comment becomes highlighted, but only if not resolved if (!isReplyingToThisComment && !comment.resolved) { entity.addReply(comment.id).catch(() => { diff --git a/packages/frontend/core/src/modules/editor/entities/editor.ts b/packages/frontend/core/src/modules/editor/entities/editor.ts index feb5eaa21..0b66e73f6 100644 --- a/packages/frontend/core/src/modules/editor/entities/editor.ts +++ b/packages/frontend/core/src/modules/editor/entities/editor.ts @@ -17,6 +17,8 @@ import { Entity, LiveData } from '@toeverything/infra'; import { defaults, isEqual, omit } from 'lodash-es'; import { skip } from 'rxjs'; +import { CommentPanelService } from '../../comment/services/comment-panel-service'; +import { DocCommentManagerService } from '../../comment/services/doc-comment-manager'; import type { DocService } from '../../doc'; import { paramsParseOptions, preprocessParams } from '../../navigation/utils'; import type { WorkbenchView } from '../../workbench'; @@ -233,6 +235,18 @@ export class Editor extends Entity { } // Workaround: clear selection to avoid comment editor flickering selection?.clear(); + + // highlight comment + setTimeout(() => { + const commentManager = this.framework.get(DocCommentManagerService); + const commentPanelService = this.framework.get(CommentPanelService); + const commentEntity = commentManager.get(this.doc.id); + commentPanelService.openCommentPanel(); + commentEntity.obj.highlightComment(commentId); + commentEntity.release(); + }, 0); + + // do not highlight block highlight = false; }