From 6ed9c33c3307618591555b0577a60dea26acc445 Mon Sep 17 00:00:00 2001
From: Flrande <1978616327@qq.com>
Date: Tue, 1 Apr 2025 05:24:27 +0000
Subject: [PATCH] fix(editor): inline editor should not change event source
 editable (#11331)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Close [BS-2988: database block会把顶层content editable设成false](https://linear.app/affine-design/issue/BS-2988/database-block会把顶层content-editable设成false)
---
 .../affine/blocks/block-callout/src/callout-block.ts     | 6 ++++--
 blocksuite/affine/blocks/block-code/src/code-block.ts    | 9 +++++++--
 .../affine/blocks/block-data-view/src/data-view-block.ts | 6 ++++--
 .../affine/blocks/block-database/src/database-block.ts   | 6 ++++--
 .../block-edgeless-text/src/edgeless-text-block.ts       | 3 ++-
 blocksuite/affine/blocks/block-list/src/list-block.ts    | 6 ++++--
 .../affine/blocks/block-note/src/note-edgeless-block.ts  | 5 ++++-
 .../affine/blocks/block-paragraph/src/paragraph-block.ts | 6 ++++--
 .../affine/blocks/block-root/src/page/page-root-block.ts | 2 ++
 blocksuite/affine/blocks/block-table/src/table-block.ts  | 6 ++++--
 blocksuite/affine/shared/src/consts/note.ts              | 4 ++--
 blocksuite/framework/std/src/inline/inline-editor.ts     | 4 ----
 12 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/blocksuite/affine/blocks/block-callout/src/callout-block.ts b/blocksuite/affine/blocks/block-callout/src/callout-block.ts
index aca504b978..5e09c52368 100644
--- a/blocksuite/affine/blocks/block-callout/src/callout-block.ts
+++ b/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;
   }
diff --git a/blocksuite/affine/blocks/block-code/src/code-block.ts b/blocksuite/affine/blocks/block-code/src/code-block.ts
index 89319a3edb..a2ed482445 100644
--- a/blocksuite/affine/blocks/block-code/src/code-block.ts
+++ b/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;
   }
diff --git a/blocksuite/affine/blocks/block-data-view/src/data-view-block.ts b/blocksuite/affine/blocks/block-data-view/src/data-view-block.ts
index b89b6b89d3..2cd438bbc1 100644
--- a/blocksuite/affine/blocks/block-data-view/src/data-view-block.ts
+++ b/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;
   }
diff --git a/blocksuite/affine/blocks/block-database/src/database-block.ts b/blocksuite/affine/blocks/block-database/src/database-block.ts
index 6b4aaefc6e..59d7b1bf03 100644
--- a/blocksuite/affine/blocks/block-database/src/database-block.ts
+++ b/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;
   }
diff --git a/blocksuite/affine/blocks/block-edgeless-text/src/edgeless-text-block.ts b/blocksuite/affine/blocks/block-edgeless-text/src/edgeless-text-block.ts
index 17a3197956..45296099fe 100644
--- a/blocksuite/affine/blocks/block-edgeless-text/src/edgeless-text-block.ts
+++ b/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>
diff --git a/blocksuite/affine/blocks/block-list/src/list-block.ts b/blocksuite/affine/blocks/block-list/src/list-block.ts
index 9e546c7feb..d37ac2b0e5 100644
--- a/blocksuite/affine/blocks/block-list/src/list-block.ts
+++ b/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;
   }
diff --git a/blocksuite/affine/blocks/block-note/src/note-edgeless-block.ts b/blocksuite/affine/blocks/block-note/src/note-edgeless-block.ts
index 1b46a338fe..1b78ff8da1 100644
--- a/blocksuite/affine/blocks/block-note/src/note-edgeless-block.ts
+++ b/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>
diff --git a/blocksuite/affine/blocks/block-paragraph/src/paragraph-block.ts b/blocksuite/affine/blocks/block-paragraph/src/paragraph-block.ts
index eb449a0853..db6e69a166 100644
--- a/blocksuite/affine/blocks/block-paragraph/src/paragraph-block.ts
+++ b/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;
   }
diff --git a/blocksuite/affine/blocks/block-root/src/page/page-root-block.ts b/blocksuite/affine/blocks/block-root/src/page/page-root-block.ts
index 47083da085..522b02c980 100644
--- a/blocksuite/affine/blocks/block-root/src/page/page-root-block.ts
+++ b/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>
     `;
diff --git a/blocksuite/affine/blocks/block-table/src/table-block.ts b/blocksuite/affine/blocks/block-table/src/table-block.ts
index 4018cd0185..ce0f07118e 100644
--- a/blocksuite/affine/blocks/block-table/src/table-block.ts
+++ b/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;
   }
diff --git a/blocksuite/affine/shared/src/consts/note.ts b/blocksuite/affine/shared/src/consts/note.ts
index 9b1a928e94..9e394cb3d1 100644
--- a/blocksuite/affine/shared/src/consts/note.ts
+++ b/blocksuite/affine/shared/src/consts/note.ts
@@ -1,2 +1,2 @@
-export const NOTE_SELECTOR =
-  'affine-note, affine-edgeless-note .edgeless-note-page-content, affine-edgeless-text';
+export const EDGELESS_TOP_CONTENTEDITABLE_SELECTOR =
+  'affine-edgeless-note .edgeless-note-page-content, affine-edgeless-text';
diff --git a/blocksuite/framework/std/src/inline/inline-editor.ts b/blocksuite/framework/std/src/inline/inline-editor.ts
index 8d22c7eef4..652e3ab393 100644
--- a/blocksuite/framework/std/src/inline/inline-editor.ts
+++ b/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;
   }