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

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

blocksuite/blocks/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@blocksuite/affine-block-attachment": "workspace:*",
     "@blocksuite/affine-block-bookmark": "workspace:*",
+    "@blocksuite/affine-block-callout": "workspace:*",
     "@blocksuite/affine-block-code": "workspace:*",
     "@blocksuite/affine-block-data-view": "workspace:*",
     "@blocksuite/affine-block-database": "workspace:*",

blocksuite/blocks/src/effects.ts

@@ -1,5 +1,6 @@
 import { effects as blockAttachmentEffects } from '@blocksuite/affine-block-attachment/effects';
 import { effects as blockBookmarkEffects } from '@blocksuite/affine-block-bookmark/effects';
+import { effects as blockCalloutEffects } from '@blocksuite/affine-block-callout/effects';
 import { effects as blockCodeEffects } from '@blocksuite/affine-block-code/effects';
 import { effects as blockDataViewEffects } from '@blocksuite/affine-block-data-view/effects';
 import { effects as blockDatabaseEffects } from '@blocksuite/affine-block-database/effects';
@@ -72,6 +73,7 @@ export function effects() {
   blockCodeEffects();
   blockTableEffects();
   blockRootEffects();
+  blockCalloutEffects();
 
   componentCaptionEffects();
   componentContextMenuEffects();

blocksuite/blocks/src/extensions/common.ts

@@ -1,5 +1,6 @@
 import { AttachmentBlockSpec } from '@blocksuite/affine-block-attachment';
 import { BookmarkBlockSpec } from '@blocksuite/affine-block-bookmark';
+import { CalloutBlockSpec } from '@blocksuite/affine-block-callout';
 import { CodeBlockSpec } from '@blocksuite/affine-block-code';
 import { DataViewBlockSpec } from '@blocksuite/affine-block-data-view';
 import { DatabaseBlockSpec } from '@blocksuite/affine-block-database';
@@ -55,6 +56,7 @@ export const CommonBlockSpecs: ExtensionType[] = [
   ParagraphBlockSpec,
   DefaultOpenDocExtension,
   FontLoaderService,
+  CalloutBlockSpec,
 ].flat();
 
 export const PageFirstPartyBlockSpecs: ExtensionType[] = [

blocksuite/blocks/src/extensions/store.ts

@@ -6,6 +6,7 @@ import { TableSelectionExtension } from '@blocksuite/affine-block-table';
 import {
   AttachmentBlockSchemaExtension,
   BookmarkBlockSchemaExtension,
+  CalloutBlockSchemaExtension,
   CodeBlockSchemaExtension,
   DatabaseBlockSchemaExtension,
   DividerBlockSchemaExtension,
@@ -78,6 +79,7 @@ export const StoreExtensions: ExtensionType[] = [
   EdgelessTextBlockSchemaExtension,
   LatexBlockSchemaExtension,
   TableBlockSchemaExtension,
+  CalloutBlockSchemaExtension,
 
   BlockSelectionExtension,
   TextSelectionExtension,

blocksuite/blocks/src/schemas.ts

@@ -4,6 +4,7 @@ import { SurfaceBlockSchema } from '@blocksuite/affine-block-surface';
 import {
   AttachmentBlockSchema,
   BookmarkBlockSchema,
+  CalloutBlockSchema,
   CodeBlockSchema,
   DatabaseBlockSchema,
   DividerBlockSchema,
@@ -54,4 +55,5 @@ export const AffineSchemas: z.infer<typeof BlockSchema>[] = [
   EdgelessTextBlockSchema,
   LatexBlockSchema,
   TableBlockSchema,
+  CalloutBlockSchema,
 ];

blocksuite/blocks/tsconfig.json

@@ -9,6 +9,7 @@
   "references": [
     { "path": "../affine/block-attachment" },
     { "path": "../affine/block-bookmark" },
+    { "path": "../affine/block-callout" },
     { "path": "../affine/block-code" },
     { "path": "../affine/block-data-view" },
     { "path": "../affine/block-database" },