fix(core): some ux enhancements on comments (#13105)

fix PD-2688

#### PR Dependency Tree


* **PR #13105** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

* **New Features**
* Added configurable support for enabling or disabling inline comments.
* Introduced visual indication (strikethrough) for deleted comments in
the comment sidebar.
  * Sidebar now shows when a comment is no longer present in the editor.
* Added a localized placeholder prompt ("What are your thoughts?") in
the comment editor.
* Integrated detailed event tracking for comment actions: create, edit,
delete, and resolve.

* **Improvements**
  * Inline comments are now disabled in shared mode.
* Enhanced synchronization between editor comments and provider state to
remove stale comments.
  * Inline comment features now respect the document’s read-only state.
* Improved mention handling and tracking in comment creation and
editing.
* Comment manager and entities now dynamically track comments present in
the editor.
* Comment configuration updated to enable or disable inline comments
based on settings.

* **Bug Fixes**
  * Prevented comment block creation when in read-only mode.

* **Localization**
  * Added English localization for the comment prompt.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


#### PR Dependency Tree


* **PR #13105** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

packages/frontend/core/src/components/comment/comment-editor/specs.ts

@@ -1,6 +1,7 @@
 import { CloudViewExtension } from '@affine/core/blocksuite/view-extensions/cloud';
 import { AffineEditorViewExtension } from '@affine/core/blocksuite/view-extensions/editor-view/editor-view';
 import { AffineThemeViewExtension } from '@affine/core/blocksuite/view-extensions/theme';
+import { I18n } from '@affine/i18n';
 import { CodeBlockViewExtension } from '@blocksuite/affine/blocks/code/view';
 import { DividerViewExtension } from '@blocksuite/affine/blocks/divider/view';
 import { LatexViewExtension as LatexBlockViewExtension } from '@blocksuite/affine/blocks/latex/view';
@@ -154,7 +155,7 @@ export function getCommentEditorViewManager(framework: FrameworkProvider) {
 
     manager.configure(ParagraphViewExtension, {
       getPlaceholder: () => {
-        return '';
+        return I18n.t('com.affine.notification.comment-prompt');
       },
     });
 

packages/frontend/core/src/components/comment/sidebar/index.tsx

@@ -377,7 +377,7 @@ const CommentItem = ({
     entity.dismissDraftReply();
   }, [entity, pendingReply]);
 
-  const handleClickPreview = useCallback(() => {
+  const handleClick = useCallback(() => {
     workbench.workbench.openDoc(
       {
         docId: entity.props.docId,
@@ -470,6 +470,10 @@ const CommentItem = ({
   const canDelete =
     (isMyComment && canCreateComment) || (!isMyComment && canDeleteComment);
 
+  const isCommentInEditor = useLiveData(entity.commentsInEditor$).includes(
+    comment.id
+  );
+
   // invalid comment, should not happen
   if (!comment.content) {
     return null;
@@ -477,7 +481,7 @@ const CommentItem = ({
 
   return (
     <div
-      onClick={handleClickPreview}
+      onClick={handleClick}
       data-comment-id={comment.id}
       data-resolved={comment.resolved}
       data-highlighting={highlighting || menuOpen}
@@ -512,7 +516,12 @@ const CommentItem = ({
           onDelete={handleDelete}
         />
       </div>
-      <div className={styles.previewContainer}>{comment.content?.preview}</div>
+      <div
+        data-deleted={!isCommentInEditor}
+        className={styles.previewContainer}
+      >
+        {comment.content?.preview}
+      </div>
 
       <div className={styles.repliesContainer}>
         {isEditing && editingDoc ? (

packages/frontend/core/src/components/comment/sidebar/style.css.ts

@@ -130,6 +130,9 @@ export const previewContainer = style({
       top: '0',
       backgroundColor: cssVarV2('block/comment/highlightUnderline'),
     },
+    '&[data-deleted="true"]': {
+      textDecoration: 'line-through',
+    },
   },
 });