feat(editor): add callout block (#10563)

- Add `CalloutBlockModel `
- Implement `CalloutBlockComponent `
- Integrate with slash menu (/)

blocksuite/affine/model/src/blocks/callout/callout-model.ts

@@ -0,0 +1,39 @@
+import {
+  BlockModel,
+  BlockSchemaExtension,
+  defineBlockSchema,
+  type Text,
+} from '@blocksuite/store';
+
+export const CalloutBlockSchema = defineBlockSchema({
+  flavour: 'affine:callout',
+  props: internal => ({
+    emoji: '😀',
+    text: internal.Text(),
+  }),
+  metadata: {
+    version: 1,
+    role: 'hub',
+    parent: [
+      'affine:note',
+      'affine:database',
+      'affine:paragraph',
+      'affine:list',
+      'affine:edgeless-text',
+    ],
+    children: ['affine:paragraph'],
+  },
+  toModel: () => new CalloutBlockModel(),
+});
+
+export type CalloutProps = {
+  emoji: string;
+  text: Text;
+};
+
+export class CalloutBlockModel extends BlockModel<CalloutProps> {
+  override text!: Text;
+}
+
+export const CalloutBlockSchemaExtension =
+  BlockSchemaExtension(CalloutBlockSchema);

blocksuite/affine/model/src/blocks/callout/index.ts

@@ -0,0 +1 @@
+export * from './callout-model.js';

blocksuite/affine/model/src/blocks/index.ts

@@ -1,5 +1,6 @@
 export * from './attachment/index.js';
 export * from './bookmark/index.js';
+export * from './callout/index.js';
 export * from './code/index.js';
 export * from './database/index.js';
 export * from './divider/index.js';

blocksuite/affine/model/src/blocks/note/note-model.ts

@@ -88,6 +88,7 @@ export const NoteBlockSchema = defineBlockSchema({
       'affine:surface-ref',
       'affine:embed-*',
       'affine:latex',
+      'affine:callout',
       TableModelFlavour,
     ],
   },

blocksuite/affine/model/src/blocks/paragraph/paragraph-model.ts

@@ -37,6 +37,7 @@ export const ParagraphBlockSchema = defineBlockSchema({
       'affine:paragraph',
       'affine:list',
       'affine:edgeless-text',
+      'affine:callout',
     ],
   },
   toModel: () => new ParagraphBlockModel(),