fix(editor): inline editor should not change event source editable (#11331)

Close [BS-2988: database block会把顶层content editable设成false](https://linear.app/affine-design/issue/BS-2988/database-block会把顶层content-editable设成false)

blocksuite/affine/blocks/block-callout/src/callout-block.ts

@@ -2,7 +2,7 @@ import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption';
 import { createLitPortal } from '@blocksuite/affine-components/portal';
 import { DefaultInlineManagerExtension } from '@blocksuite/affine-inline-preset';
 import { type CalloutBlockModel } from '@blocksuite/affine-model';
-import { NOTE_SELECTOR } from '@blocksuite/affine-shared/consts';
+import { EDGELESS_TOP_CONTENTEDITABLE_SELECTOR } from '@blocksuite/affine-shared/consts';
 import {
   DocModeProvider,
   ThemeProvider,
@@ -95,7 +95,9 @@ export class CalloutBlockComponent extends CaptionedBlockComponent<CalloutBlockM
 
   override get topContenteditableElement() {
     if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
-      return this.closest<BlockComponent>(NOTE_SELECTOR);
+      return this.closest<BlockComponent>(
+        EDGELESS_TOP_CONTENTEDITABLE_SELECTOR
+      );
     }
     return this.rootComponent;
   }

blocksuite/affine/blocks/block-code/src/code-block.ts

@@ -1,7 +1,10 @@
 import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption';
 import type { CodeBlockModel } from '@blocksuite/affine-model';
 import { focusTextModel, type RichText } from '@blocksuite/affine-rich-text';
-import { BRACKET_PAIRS, NOTE_SELECTOR } from '@blocksuite/affine-shared/consts';
+import {
+  BRACKET_PAIRS,
+  EDGELESS_TOP_CONTENTEDITABLE_SELECTOR,
+} from '@blocksuite/affine-shared/consts';
 import {
   DocModeProvider,
   NotificationProvider,
@@ -79,7 +82,9 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
 
   override get topContenteditableElement() {
     if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
-      return this.closest<BlockComponent>(NOTE_SELECTOR);
+      return this.closest<BlockComponent>(
+        EDGELESS_TOP_CONTENTEDITABLE_SELECTOR
+      );
     }
     return this.rootComponent;
   }

blocksuite/affine/blocks/block-data-view/src/data-view-block.ts

@@ -12,7 +12,7 @@ import {
 import { CopyIcon, DeleteIcon } from '@blocksuite/affine-components/icons';
 import { PeekViewProvider } from '@blocksuite/affine-components/peek';
 import { toast } from '@blocksuite/affine-components/toast';
-import { NOTE_SELECTOR } from '@blocksuite/affine-shared/consts';
+import { EDGELESS_TOP_CONTENTEDITABLE_SELECTOR } from '@blocksuite/affine-shared/consts';
 import {
   DocModeProvider,
   NotificationProvider,
@@ -225,7 +225,9 @@ export class DataViewBlockComponent extends CaptionedBlockComponent<DataViewBloc
 
   override get topContenteditableElement() {
     if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
-      return this.closest<BlockComponent>(NOTE_SELECTOR);
+      return this.closest<BlockComponent>(
+        EDGELESS_TOP_CONTENTEDITABLE_SELECTOR
+      );
     }
     return this.rootComponent;
   }

blocksuite/affine/blocks/block-database/src/database-block.ts

@@ -8,7 +8,7 @@ import { DropIndicator } from '@blocksuite/affine-components/drop-indicator';
 import { PeekViewProvider } from '@blocksuite/affine-components/peek';
 import { toast } from '@blocksuite/affine-components/toast';
 import type { DatabaseBlockModel } from '@blocksuite/affine-model';
-import { NOTE_SELECTOR } from '@blocksuite/affine-shared/consts';
+import { EDGELESS_TOP_CONTENTEDITABLE_SELECTOR } from '@blocksuite/affine-shared/consts';
 import {
   DocModeProvider,
   NotificationProvider,
@@ -354,7 +354,9 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
 
   override get topContenteditableElement() {
     if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
-      return this.closest<BlockComponent>(NOTE_SELECTOR);
+      return this.closest<BlockComponent>(
+        EDGELESS_TOP_CONTENTEDITABLE_SELECTOR
+      );
     }
     return this.rootComponent;
   }

blocksuite/affine/blocks/block-edgeless-text/src/edgeless-text-block.ts

@@ -339,6 +339,8 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
       minWidth: !hasMaxWidth ? '220px' : undefined,
     };
 
+    this.contentEditable = String(editing && !this.doc.readonly$.value);
+
     return html`
       <div
         class="edgeless-text-block-container"
@@ -350,7 +352,6 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
             pointerEvents: editing ? 'auto' : 'none',
             userSelect: editing ? 'auto' : 'none',
           })}
-          contenteditable=${editing}
         >
           ${this.renderPageContent()}
         </div>

blocksuite/affine/blocks/block-list/src/list-block.ts

@@ -8,7 +8,7 @@ import type { ListBlockModel } from '@blocksuite/affine-model';
 import type { RichText } from '@blocksuite/affine-rich-text';
 import {
   BLOCK_CHILDREN_CONTAINER_PADDING_LEFT,
-  NOTE_SELECTOR,
+  EDGELESS_TOP_CONTENTEDITABLE_SELECTOR,
 } from '@blocksuite/affine-shared/consts';
 import { DocModeProvider } from '@blocksuite/affine-shared/services';
 import { getViewportElement } from '@blocksuite/affine-shared/utils';
@@ -84,7 +84,9 @@ export class ListBlockComponent extends CaptionedBlockComponent<ListBlockModel>
 
   override get topContenteditableElement() {
     if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
-      return this.closest<BlockComponent>(NOTE_SELECTOR);
+      return this.closest<BlockComponent>(
+        EDGELESS_TOP_CONTENTEDITABLE_SELECTOR
+      );
     }
     return this.rootComponent;
   }

blocksuite/affine/blocks/block-note/src/note-edgeless-block.ts

@@ -268,7 +268,10 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
             <edgeless-page-block-title
               .note=${this.model}
             ></edgeless-page-block-title>
-            <div class="edgeless-note-page-content">
+            <div
+              contenteditable=${String(!this.doc.readonly$.value)}
+              class="edgeless-note-page-content"
+            >
               ${this.renderPageContent()}
             </div>
           </div>

blocksuite/affine/blocks/block-paragraph/src/paragraph-block.ts

@@ -5,7 +5,7 @@ import type { ParagraphBlockModel } from '@blocksuite/affine-model';
 import type { RichText } from '@blocksuite/affine-rich-text';
 import {
   BLOCK_CHILDREN_CONTAINER_PADDING_LEFT,
-  NOTE_SELECTOR,
+  EDGELESS_TOP_CONTENTEDITABLE_SELECTOR,
 } from '@blocksuite/affine-shared/consts';
 import { DocModeProvider } from '@blocksuite/affine-shared/services';
 import {
@@ -96,7 +96,9 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
 
   override get topContenteditableElement() {
     if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
-      return this.closest<BlockComponent>(NOTE_SELECTOR);
+      return this.closest<BlockComponent>(
+        EDGELESS_TOP_CONTENTEDITABLE_SELECTOR
+      );
     }
     return this.rootComponent;
   }

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

@@ -415,6 +415,8 @@ export class PageRootBlockComponent extends BlockComponent<
       return !(isNote && displayOnEdgeless);
     });
 
+    this.contentEditable = String(!this.doc.readonly$.value);
+
     return html`
       <div class="affine-page-root-block-container">${children} ${widgets}</div>
     `;

blocksuite/affine/blocks/block-table/src/table-block.ts

@@ -1,6 +1,6 @@
 import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption';
 import type { TableBlockModel } from '@blocksuite/affine-model';
-import { NOTE_SELECTOR } from '@blocksuite/affine-shared/consts';
+import { EDGELESS_TOP_CONTENTEDITABLE_SELECTOR } from '@blocksuite/affine-shared/consts';
 import { DocModeProvider } from '@blocksuite/affine-shared/services';
 import { VirtualPaddingController } from '@blocksuite/affine-shared/utils';
 import { IS_MOBILE } from '@blocksuite/global/env';
@@ -42,7 +42,9 @@ export class TableBlockComponent extends CaptionedBlockComponent<TableBlockModel
 
   override get topContenteditableElement() {
     if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
-      return this.closest<BlockComponent>(NOTE_SELECTOR);
+      return this.closest<BlockComponent>(
+        EDGELESS_TOP_CONTENTEDITABLE_SELECTOR
+      );
     }
     return this.rootComponent;
   }

blocksuite/affine/shared/src/consts/note.ts

@@ -1,2 +1,2 @@
-export const NOTE_SELECTOR =
+export const EDGELESS_TOP_CONTENTEDITABLE_SELECTOR =
-  'affine-note, affine-edgeless-note .edgeless-note-page-content, affine-edgeless-text';
+  'affine-edgeless-note .edgeless-note-page-content, affine-edgeless-text';

blocksuite/framework/std/src/inline/inline-editor.ts

@@ -275,10 +275,6 @@ export class InlineEditor<
       this.rootElement.contentEditable = value;
     }
 
-    if (this.eventSource && this.eventSource.contentEditable !== value) {
-      this.eventSource.contentEditable = value;
-    }
-
     this._isReadonly = isReadonly;
   }