fix(editor): improve backspace ux for callout block (#10696)

tests/affine-local/e2e/blocksuite/callout/callout.spec.ts

@@ -1,4 +1,10 @@
-import { undoByKeyboard } from '@affine-test/kit/utils/keyboard';
+import {
+  pressArrowDown,
+  pressArrowUp,
+  pressBackspace,
+  pressEnter,
+  undoByKeyboard,
+} from '@affine-test/kit/utils/keyboard';
 import { openHomePage } from '@affine-test/kit/utils/load-page';
 import { type } from '@affine-test/kit/utils/page-logic';
 import { expect, test } from '@playwright/test';
@@ -60,3 +66,41 @@ test('disable slash menu in callout block', async ({ page }) => {
   await type(page, '/');
   await expect(slashMenu).toBeVisible();
 });
+
+test('press backspace after callout block', async ({ page }) => {
+  await pressEnter(page);
+  await pressArrowUp(page);
+  await type(page, '/callout\n');
+  await pressArrowDown(page);
+
+  const paragraph = page.locator('affine-paragraph');
+  const callout = page.locator('affine-callout');
+  expect(await paragraph.count()).toBe(3);
+  expect(await callout.count()).toBe(1);
+
+  await pressBackspace(page);
+  expect(await paragraph.count()).toBe(3);
+  expect(await callout.count()).toBe(1);
+
+  await pressBackspace(page);
+  await expect(paragraph).toHaveCount(2);
+  await expect(callout).toHaveCount(0);
+});
+
+test('press backspace in callout block', async ({ page }) => {
+  const paragraph = page.locator('affine-paragraph');
+  const callout = page.locator('affine-callout');
+
+  await type(page, '/callout\n');
+
+  expect(await paragraph.count()).toBe(2);
+  expect(await callout.count()).toBe(1);
+
+  await pressBackspace(page);
+  await expect(paragraph).toHaveCount(2);
+  await expect(callout).toHaveCount(1);
+
+  await pressBackspace(page);
+  await expect(paragraph).toHaveCount(1);
+  await expect(callout).toHaveCount(0);
+});

tests/kit/src/utils/keyboard.ts

@@ -38,6 +38,12 @@ export async function pressArrowUp(page: Page, count = 1) {
   }
 }
 
+export async function pressArrowDown(page: Page, count = 1) {
+  for (let i = 0; i < count; i++) {
+    await page.keyboard.press('ArrowDown', { delay: 20 });
+  }
+}
+
 export async function pressTab(page: Page) {
   await page.keyboard.press('Tab', { delay: 50 });
 }