From 0b3c7a578e79df5d4e039be78b9405167eca413d Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Tue, 11 Feb 2025 14:29:24 +0000
Subject: [PATCH] fix(editor): collapsed page block visibility (#10097)

This PR fixed that doc title is not hidden when page block is collapsed
---
 .../block-note/src/note-edgeless-block.css.ts |  2 +-
 .../block-note/src/note-edgeless-block.ts     | 27 ++++++++++---------
 .../e2e/blocksuite/edgeless/note.spec.ts      |  6 ++---
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/blocksuite/affine/block-note/src/note-edgeless-block.css.ts b/blocksuite/affine/block-note/src/note-edgeless-block.css.ts
index d2654a26f5..9bbc52d002 100644
--- a/blocksuite/affine/block-note/src/note-edgeless-block.css.ts
+++ b/blocksuite/affine/block-note/src/note-edgeless-block.css.ts
@@ -58,7 +58,7 @@ export const noteBackground = style({
   },
 });
 
-export const pageContent = style({
+export const clipContainer = style({
   width: '100%',
   height: '100%',
 });
diff --git a/blocksuite/affine/block-note/src/note-edgeless-block.ts b/blocksuite/affine/block-note/src/note-edgeless-block.ts
index 580e4bec18..47d8b41b67 100644
--- a/blocksuite/affine/block-note/src/note-edgeless-block.ts
+++ b/blocksuite/affine/block-note/src/note-edgeless-block.ts
@@ -49,7 +49,7 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
     const width = bound.w / scale + extraPadding * 2 + extraBorder;
     const height = bound.h / scale;
 
-    const rect = this._notePageContent?.getBoundingClientRect();
+    const rect = this._noteContent?.getBoundingClientRect();
     if (!rect) return nothing;
 
     const zoom = this.gfx.viewport.zoom;
@@ -159,14 +159,14 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
     );
 
     const observer = new MutationObserver(() => {
-      const rect = this._notePageContent?.getBoundingClientRect();
+      const rect = this._noteContent?.getBoundingClientRect();
       if (!rect) return;
       const zoom = this.gfx.viewport.zoom;
       const scale = this.model.edgeless.scale ?? 1;
       this._noteFullHeight =
         rect.height / scale / zoom + 2 * EDGELESS_BLOCK_CHILD_PADDING;
     });
-    if (this._notePageContent) {
+    if (this._noteContent) {
       observer.observe(this, { childList: true, subtree: true });
       _disposables.add(() => observer.disconnect());
     }
@@ -235,19 +235,20 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
           .note=${this.model}
         ></edgeless-note-background>
 
-        <edgeless-page-block-title
-          .note=${this.model}
-        ></edgeless-page-block-title>
-
         <div
-          class="edgeless-note-page-content"
+          class=${styles.clipContainer}
           style=${styleMap({
-            width: '100%',
-            height: '100%',
             'overflow-y': this._isShowCollapsedContent ? 'initial' : 'clip',
           })}
         >
-          ${this.renderPageContent()}
+          <div>
+            <edgeless-page-block-title
+              .note=${this.model}
+            ></edgeless-page-block-title>
+            <div class="edgeless-note-page-content">
+              ${this.renderPageContent()}
+            </div>
+          </div>
         </div>
 
         <edgeless-note-mask
@@ -291,8 +292,8 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
   @state()
   private accessor _noteFullHeight = 0;
 
-  @query('.edgeless-note-page-content .affine-note-block-container')
-  private accessor _notePageContent: HTMLElement | null = null;
+  @query(`.${styles.clipContainer} > div`)
+  private accessor _noteContent: HTMLElement | null = null;
 
   @query('doc-title')
   private accessor _docTitle: DocTitle | null = null;
diff --git a/tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts b/tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts
index d2e15e77ad..61601f6a1e 100644
--- a/tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts
+++ b/tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts
@@ -150,11 +150,9 @@ test.describe('edgeless page block', () => {
     await expect(infoButton).toBeHidden();
   });
 
-  test('page title should show in note when page block is not collapsed', async ({
-    page,
-  }) => {
+  test('page title should be editable', async ({ page }) => {
     const note = page.locator('affine-edgeless-note');
-    const docTitle = note.locator('doc-title');
+    const docTitle = note.locator('edgeless-page-block-title');
     await expect(docTitle).toBeVisible();
     await expect(docTitle).toHaveText(title);