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)

blocksuite/affine/blocks/root/src/page/page-root-block.ts

@@ -305,7 +305,10 @@ export class PageRootBlockComponent extends BlockComponent<RootBlockModel> {
       );
 
       // make sure there is a block can be focused
-      if (notes.length === 0 || notes[notes.length - 1].children.length === 0) {
+      if (
+        !this.store.readonly$.value &&
+        (notes.length === 0 || notes[notes.length - 1].children.length === 0)
+      ) {
         this.std.command.exec(appendParagraphCommand);
         return;
       }
@@ -322,7 +325,7 @@ export class PageRootBlockComponent extends BlockComponent<RootBlockModel> {
         parseFloat(paddingLeft),
         parseFloat(paddingRight)
       );
-      if (!isClickOnBlankArea) {
+      if (!isClickOnBlankArea && !this.store.readonly$.value) {
         const lastBlock = notes[notes.length - 1].lastChild();
         if (
           !lastBlock ||

blocksuite/affine/inlines/comment/src/index.ts

@@ -1,2 +1,4 @@
+export { InlineCommentManager } from './inline-comment-manager';
 export * from './inline-spec';
 export * from './utils';
+export * from './view';

blocksuite/affine/inlines/comment/src/inline-comment-manager.ts

@@ -5,6 +5,7 @@ import {
   type CommentId,
   CommentProviderIdentifier,
   findAllCommentedBlocks,
+  findAllCommentedElements,
 } from '@blocksuite/affine-shared/services';
 import type { AffineInlineEditor } from '@blocksuite/affine-shared/types';
 import { DisposableGroup } from '@blocksuite/global/disposable';
@@ -64,15 +65,8 @@ export class InlineCommentManager extends LifeCycleWatcher {
     if (!provider) return;
 
     const commentsInProvider = await provider.getComments('unresolved');
-    const inlineComments = [...findAllCommentedTexts(this.std.store).values()];
 
-    const blockComments = findAllCommentedBlocks(this.std.store).flatMap(
-      block => Object.keys(block.props.comments)
-    );
-
-    const commentsInEditor = [
-      ...new Set([...inlineComments, ...blockComments]),
-    ];
+    const commentsInEditor = this.getCommentsInEditor();
 
     // remove comments that are in editor but not in provider
     // which means the comment may be removed or resolved in provider side
@@ -82,6 +76,24 @@ export class InlineCommentManager extends LifeCycleWatcher {
     });
   }
 
+  getCommentsInEditor() {
+    const inlineComments = [...findAllCommentedTexts(this.std.store).values()];
+
+    const blockComments = findAllCommentedBlocks(this.std.store).flatMap(
+      block => Object.keys(block.props.comments)
+    );
+
+    const surfaceComments = findAllCommentedElements(this.std.store).flatMap(
+      element => Object.keys(element.comments)
+    );
+
+    const commentsInEditor = [
+      ...new Set([...inlineComments, ...blockComments, ...surfaceComments]),
+    ];
+
+    return commentsInEditor;
+  }
+
   private readonly _handleAddComment = (
     id: CommentId,
     selections: BaseSelection[]

blocksuite/affine/inlines/comment/src/inline-spec.ts

@@ -36,3 +36,14 @@ export const CommentInlineSpecExtension =
       >`,
     wrapper: true,
   });
+
+export const NullCommentInlineSpecExtension =
+  InlineSpecExtension<AffineTextAttributes>({
+    name: 'comment',
+    schema: dynamicSchema(
+      isInlineCommendId,
+      z.boolean().optional().nullable().catch(undefined)
+    ),
+    match: () => false,
+    renderer: () => html``,
+  });

blocksuite/affine/inlines/comment/src/view.ts

@@ -2,21 +2,41 @@ import {
   type ViewExtensionContext,
   ViewExtensionProvider,
 } from '@blocksuite/affine-ext-loader';
+import z from 'zod';
 
 import { effects } from './effects';
 import { InlineCommentManager } from './inline-comment-manager';
-import { CommentInlineSpecExtension } from './inline-spec';
+import {
+  CommentInlineSpecExtension,
+  NullCommentInlineSpecExtension,
+} from './inline-spec';
 
-export class InlineCommentViewExtension extends ViewExtensionProvider {
+const optionsSchema = z.object({
+  enabled: z.boolean().optional().default(true),
+});
+
+export class InlineCommentViewExtension extends ViewExtensionProvider<
+  z.infer<typeof optionsSchema>
+> {
   override name = 'affine-inline-comment';
 
+  override schema = optionsSchema;
+
   override effect(): void {
     super.effect();
     effects();
   }
 
-  override setup(context: ViewExtensionContext) {
-    super.setup(context);
-    context.register([CommentInlineSpecExtension, InlineCommentManager]);
+  override setup(
+    context: ViewExtensionContext,
+    options?: z.infer<typeof optionsSchema>
+  ) {
+    super.setup(context, options);
+    context.register([
+      options?.enabled
+        ? CommentInlineSpecExtension
+        : NullCommentInlineSpecExtension,
+      InlineCommentManager,
+    ]);
   }
 }