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

blocksuite/affine/block-callout/src/callout-keymap.ts

@@ -0,0 +1,34 @@
+import { CalloutBlockModel } from '@blocksuite/affine-model';
+import { matchModels } from '@blocksuite/affine-shared/utils';
+import {
+  BlockSelection,
+  KeymapExtension,
+  TextSelection,
+} from '@blocksuite/block-std';
+
+export const CalloutKeymapExtension = KeymapExtension(std => {
+  return {
+    Backspace: ctx => {
+      const text = std.selection.find(TextSelection);
+      if (text && text.isCollapsed() && text.from.index === 0) {
+        const event = ctx.get('defaultState').event;
+        event.preventDefault();
+
+        const block = std.store.getBlock(text.from.blockId);
+        if (!block) return false;
+        const parent = std.store.getParent(block.model);
+        if (!parent) return false;
+        if (!matchModels(parent, [CalloutBlockModel])) return false;
+
+        std.selection.setGroup('note', [
+          std.selection.create(BlockSelection, {
+            blockId: parent.id,
+          }),
+        ]);
+
+        return true;
+      }
+      return false;
+    },
+  };
+});

blocksuite/affine/block-callout/src/callout-spec.ts

@@ -3,10 +3,12 @@ import { BlockViewExtension, FlavourExtension } from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
+import { CalloutKeymapExtension } from './callout-keymap';
 import { calloutSlashMenuConfig } from './configs/slash-menu';
 
 export const CalloutBlockSpec: ExtensionType[] = [
   FlavourExtension('affine:callout'),
   BlockViewExtension('affine:callout', literal`affine-callout`),
+  CalloutKeymapExtension,
   SlashMenuConfigExtension('affine:callout', calloutSlashMenuConfig),
 ];

blocksuite/affine/block-paragraph/src/utils/merge-with-prev.ts

@@ -1,6 +1,7 @@
 import {
   AttachmentBlockModel,
   BookmarkBlockModel,
+  CalloutBlockModel,
   CodeBlockModel,
   DatabaseBlockModel,
   DividerBlockModel,
@@ -53,8 +54,18 @@ export function mergeWithPrev(editorHost: EditorHost, model: BlockModel) {
     return handleNoPreviousSibling(editorHost, model);
   }
 
+  const modelIndex = parent.children.indexOf(model);
+  const prevSibling = doc.getPrev(model);
+  if (matchModels(prevSibling, [CalloutBlockModel])) {
+    editorHost.selection.setGroup('note', [
+      editorHost.selection.create(BlockSelection, {
+        blockId: prevSibling.id,
+      }),
+    ]);
+    return true;
+  }
+
   if (matchModels(prevBlock, [ParagraphBlockModel, ListBlockModel])) {
-    const modelIndex = parent.children.indexOf(model);
     if (
       (modelIndex === -1 || modelIndex === parent.children.length - 1) &&
       parent.role === 'content'