diff --git a/apps/client/src/features/comment/components/comment-editor.tsx b/apps/client/src/features/comment/components/comment-editor.tsx index a0489cdc..efb0c586 100644 --- a/apps/client/src/features/comment/components/comment-editor.tsx +++ b/apps/client/src/features/comment/components/comment-editor.tsx @@ -84,9 +84,14 @@ const CommentEditor = forwardRef( autofocus: (autofocus && "end") || false, }); + // Sync content from props for read-only editors (e.g. when updated via + // websocket on another browser). Skip for editable editors to avoid + // resetting the cursor position on every keystroke. useEffect(() => { - commentEditor.commands.setContent(defaultContent); - }, [defaultContent]); + if (!editable && commentEditor && defaultContent) { + commentEditor.commands.setContent(defaultContent); + } + }, [defaultContent, editable, commentEditor]); useEffect(() => { setTimeout(() => { diff --git a/apps/client/src/features/comment/components/comment-list-item.tsx b/apps/client/src/features/comment/components/comment-list-item.tsx index ebf27196..738f2e4f 100644 --- a/apps/client/src/features/comment/components/comment-list-item.tsx +++ b/apps/client/src/features/comment/components/comment-list-item.tsx @@ -1,5 +1,5 @@ import { Group, Text, Box, Badge } from "@mantine/core"; -import React, { useEffect, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import classes from "./comment.module.css"; import { useAtom, useAtomValue } from "jotai"; import { timeAgo } from "@/lib/time"; @@ -40,6 +40,7 @@ function CommentListItem({ const [isLoading, setIsLoading] = useState(false); const editor = useAtomValue(pageEditorAtom); const [content, setContent] = useState(comment.content); + const editContentRef = useRef(null); const updateCommentMutation = useUpdateCommentMutation(); const deleteCommentMutation = useDeleteCommentMutation(comment.pageId); const resolveCommentMutation = useResolveCommentMutation(); @@ -56,9 +57,13 @@ function CommentListItem({ setIsLoading(true); const commentToUpdate = { commentId: comment.id, - content: JSON.stringify(content), + content: JSON.stringify(editContentRef.current ?? content), }; await updateCommentMutation.mutateAsync(commentToUpdate); + if (editContentRef.current) { + setContent(editContentRef.current); + editContentRef.current = null; + } setIsEditing(false); emit({ @@ -128,6 +133,7 @@ function CommentListItem({ setIsEditing(true); } function cancelEdit() { + editContentRef.current = null; setIsEditing(false); } @@ -194,7 +200,7 @@ function CommentListItem({ setContent(newContent)} + onUpdate={(newContent: any) => { editContentRef.current = newContent; }} onSave={handleUpdateComment} autofocus={true} />