From 969ac30874a7a4d1ceb6f0f048dd2bb4c1ae60c0 Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Thu, 16 Jan 2025 08:32:15 +0000
Subject: [PATCH] fix(editor): reactive heading icon (#9729)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Close [BS-2407](https://linear.app/affine-design/issue/BS-2407/[bug]-edgeless-里选中-title-后更改，hint-没有改变)
---
 .../block-paragraph/src/heading-icon.ts       | 12 ++++--
 .../block-paragraph/src/paragraph-block.ts    |  9 ++--
 .../e2e/blocksuite/paragraph.spec.ts          | 42 +++++++++++++++++++
 .../e2e/blocksuite/toolbar.spec.ts            |  5 ++-
 tests/kit/src/utils/editor.ts                 |  8 ++++
 5 files changed, 66 insertions(+), 10 deletions(-)
 create mode 100644 tests/affine-local/e2e/blocksuite/paragraph.spec.ts

diff --git a/blocksuite/affine/block-paragraph/src/heading-icon.ts b/blocksuite/affine/block-paragraph/src/heading-icon.ts
index bc805bf16b..3edc80369c 100644
--- a/blocksuite/affine/block-paragraph/src/heading-icon.ts
+++ b/blocksuite/affine/block-paragraph/src/heading-icon.ts
@@ -8,7 +8,7 @@ import {
 } from '@blocksuite/affine-components/icons';
 import type { ParagraphBlockModel } from '@blocksuite/affine-model';
 import { ShadowlessElement } from '@blocksuite/block-std';
-import { WithDisposable } from '@blocksuite/global/utils';
+import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { css, html, nothing, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -32,7 +32,9 @@ function HeadingIcon(i: number) {
   }
 }
 
-export class ParagraphHeadingIcon extends WithDisposable(ShadowlessElement) {
+export class ParagraphHeadingIcon extends SignalWatcher(
+  WithDisposable(ShadowlessElement)
+) {
   static override styles = css`
     affine-paragraph-heading-icon .heading-icon {
       display: flex;
@@ -65,12 +67,14 @@ export class ParagraphHeadingIcon extends WithDisposable(ShadowlessElement) {
   `;
 
   override render() {
-    const type = this.model.type;
+    const type = this.model.type$.value;
     if (!type.startsWith('h')) return nothing;
 
     const i = parseInt(type.slice(1));
 
-    return html`<div class="heading-icon">${HeadingIcon(i)}</div>`;
+    return html`<div class="heading-icon" data-testid="heading-icon-${i}">
+      ${HeadingIcon(i)}
+    </div>`;
   }
 
   @property({ attribute: false })
diff --git a/blocksuite/affine/block-paragraph/src/paragraph-block.ts b/blocksuite/affine/block-paragraph/src/paragraph-block.ts
index 0623354e77..8f32267ea4 100644
--- a/blocksuite/affine/block-paragraph/src/paragraph-block.ts
+++ b/blocksuite/affine/block-paragraph/src/paragraph-block.ts
@@ -157,7 +157,7 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<
         this._readonlyCollapsed = collapsed;
 
         // reset text selection when selected block is collapsed
-        if (this.model.type.startsWith('h') && collapsed) {
+        if (this.model.type$.value.startsWith('h') && collapsed) {
           const collapsedSiblings = this.collapsedSiblings;
           const textSelection = this.host.selection.find(TextSelection);
 
@@ -177,7 +177,7 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<
     // # 456
     //
     // we need to update collapsed state of 123 when 456 converted to text
-    let beforeType = this.model.type;
+    let beforeType = this.model.type$.peek();
     this.disposables.add(
       effect(() => {
         const type = this.model.type$.value;
@@ -211,7 +211,7 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<
     const collapsedSiblings = this.collapsedSiblings;
 
     let style = html``;
-    if (this.model.type.startsWith('h') && collapsed) {
+    if (this.model.type$.value.startsWith('h') && collapsed) {
       style = html`
         <style>
           ${collapsedSiblings.map(sibling =>
@@ -245,7 +245,8 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<
             [TOGGLE_BUTTON_PARENT_CLASS]: true,
           })}
         >
-          ${this.model.type.startsWith('h') && collapsedSiblings.length > 0
+          ${this.model.type$.value.startsWith('h') &&
+          collapsedSiblings.length > 0
             ? html`
                 <affine-paragraph-heading-icon
                   .model=${this.model}
diff --git a/tests/affine-local/e2e/blocksuite/paragraph.spec.ts b/tests/affine-local/e2e/blocksuite/paragraph.spec.ts
new file mode 100644
index 0000000000..740c99b685
--- /dev/null
+++ b/tests/affine-local/e2e/blocksuite/paragraph.spec.ts
@@ -0,0 +1,42 @@
+import { test } from '@affine-test/kit/playwright';
+import { locateFormatBar } from '@affine-test/kit/utils/editor';
+import { selectAllByKeyboard } from '@affine-test/kit/utils/keyboard';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await clickNewPageButton(page, 'Paragraph Test');
+  await waitForEditorLoad(page);
+});
+
+test('heading icon should be updated after change heading level', async ({
+  page,
+}) => {
+  await page.keyboard.press('Enter');
+  await page.keyboard.type('Hello');
+  // Hello|
+  // empty paragraph
+
+  const paragraph = page.locator('affine-note affine-paragraph').nth(0);
+
+  await selectAllByKeyboard(page);
+  const formatBar = locateFormatBar(page);
+  await formatBar.locator('.paragraph-button').hover();
+  await formatBar.getByTestId('affine:paragraph/h1').click();
+
+  await paragraph.hover();
+  await expect(page.getByTestId('heading-icon-1')).toBeVisible();
+
+  await selectAllByKeyboard(page);
+  await formatBar.locator('.paragraph-button').hover();
+  await formatBar.getByTestId('affine:paragraph/h2').click();
+
+  await paragraph.hover();
+  await expect(page.getByTestId('heading-icon-1')).toBeHidden();
+  await expect(page.getByTestId('heading-icon-2')).toBeVisible();
+});
diff --git a/tests/affine-local/e2e/blocksuite/toolbar.spec.ts b/tests/affine-local/e2e/blocksuite/toolbar.spec.ts
index daf76e0312..d0075c4917 100644
--- a/tests/affine-local/e2e/blocksuite/toolbar.spec.ts
+++ b/tests/affine-local/e2e/blocksuite/toolbar.spec.ts
@@ -1,4 +1,5 @@
 import { test } from '@affine-test/kit/playwright';
+import { locateFormatBar } from '@affine-test/kit/utils/editor';
 import { openHomePage } from '@affine-test/kit/utils/load-page';
 import {
   clickNewPageButton,
@@ -21,7 +22,7 @@ test.describe('Format bar', () => {
     await page.keyboard.press('Shift+ArrowLeft');
     await page.keyboard.press('Shift+ArrowLeft');
 
-    const formatBar = page.locator('.affine-format-bar-widget');
+    const formatBar = locateFormatBar(page);
     await formatBar.locator('.highlight-icon').hover();
     const fgGreenButton = formatBar.locator(
       '[data-testid="var(--affine-text-highlight-foreground-green)"]'
@@ -49,7 +50,7 @@ test.describe('Format bar', () => {
     await page.keyboard.press('Shift+ArrowLeft');
     await page.keyboard.press('Shift+ArrowLeft');
 
-    const formatBar = page.locator('.affine-format-bar-widget');
+    const formatBar = locateFormatBar(page);
     await formatBar.locator('.highlight-icon').hover();
 
     const fgGreenButton = formatBar.locator(
diff --git a/tests/kit/src/utils/editor.ts b/tests/kit/src/utils/editor.ts
index b88921ece3..28cebc8fa5 100644
--- a/tests/kit/src/utils/editor.ts
+++ b/tests/kit/src/utils/editor.ts
@@ -1,5 +1,6 @@
 import type { AffineEditorContainer } from '@blocksuite/affine/presets';
 import {
+  AFFINE_FORMAT_BAR_WIDGET,
   EDGELESS_ELEMENT_TOOLBAR_WIDGET,
   EDGELESS_TOOLBAR_WIDGET,
 } from '@blocksuite/blocks';
@@ -52,6 +53,13 @@ export function locateEditorContainer(page: Page, editorIndex = 0) {
   return page.locator('[data-affine-editor-container]').nth(editorIndex);
 }
 
+// ================== Page ==================
+export function locateFormatBar(page: Page, editorIndex = 0) {
+  return locateEditorContainer(page, editorIndex).locator(
+    AFFINE_FORMAT_BAR_WIDGET
+  );
+}
+
 // ================== Edgeless ==================
 
 export async function getEdgelessSelectedIds(page: Page, editorIndex = 0) {