fix(editor): reactive heading icon (#9729)

Close [BS-2407](https://linear.app/affine-design/issue/BS-2407/[bug]-edgeless-里选中-title-后更改，hint-没有改变)

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();
+});

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(

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) {