From 0d2fbaf3ea195bd15568bff08e071f9607515e42 Mon Sep 17 00:00:00 2001 From: Peng Xiao Date: Mon, 7 Jul 2025 11:23:24 +0800 Subject: [PATCH] fix(core): some ux issues related to comments (#13057) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix AF-2713 #### PR Dependency Tree * **PR #13057** 👈 This tree was auto-generated by [Charcoal](https://github.com/danerwilliams/charcoal) ## Summary by CodeRabbit * **New Features** * Added support for submitting comments by pressing Enter (without Shift) in the comment editor. * **Improvements** * Improved comment highlight handling with smoother updates and reduced unnecessary scrolling in the comment sidebar. * Enhanced editor focus behavior to support highlighting comments directly when a comment ID is provided, with automatic comment panel activation. --- .../comment/comment-editor/index.tsx | 22 ++++++++++++++++++- .../src/components/comment/sidebar/index.tsx | 7 +++--- .../src/modules/editor/entities/editor.ts | 14 ++++++++++++ 3 files changed, 38 insertions(+), 5 deletions(-) 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; }