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

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

packages/frontend/core/src/components/page-list/__tests__/use-block-suite-page-preview.spec.ts

@@ -17,6 +17,11 @@ const extensions = StoreExtensions;
 
 beforeEach(async () => {
   vi.useFakeTimers({ toFake: ['requestIdleCallback'] });
+  vi.mock('emoji-mart', () => {
+    return {
+      Picker: vi.fn(),
+    };
+  });
   docCollection = new TestWorkspace({ id: 'test' });
   docCollection.meta.initialize();
   const initPage = async (page: Store) => {

packages/frontend/core/src/modules/feature-flag/constant.ts

@@ -113,6 +113,16 @@ export const AFFINE_FLAGS = {
     configurable: isCanaryBuild,
     defaultState: false,
   },
+  enable_callout: {
+    category: 'blocksuite',
+    bsFlag: 'enable_callout',
+    displayName:
+      'com.affine.settings.workspace.experimental-features.enable-callout.name',
+    description:
+      'com.affine.settings.workspace.experimental-features.enable-callout.description',
+    configurable: isCanaryBuild,
+    defaultState: false,
+  },
   enable_emoji_folder_icon: {
     category: 'affine',
     displayName:

packages/frontend/core/src/modules/journal/__tests__/suggest-date.spec.ts

@@ -5,7 +5,13 @@
 import { JOURNAL_DATE_FORMAT } from '@affine/core/modules/journal';
 import { I18n } from '@affine/i18n';
 import dayjs from 'dayjs';
-import { describe, expect, test } from 'vitest';
+import { describe, expect, test, vi } from 'vitest';
+
+vi.mock('emoji-mart', () => {
+  return {
+    Picker: vi.fn(),
+  };
+});
 
 import { suggestJournalDate } from '../suggest-journal-date';
 

packages/frontend/i18n/src/i18n.gen.ts

@@ -5391,6 +5391,14 @@ export function useAFFiNEI18N(): {
       * `Once enabled, all blocks will have created time, updated time, created by and updated by.`
       */
     ["com.affine.settings.workspace.experimental-features.enable-block-meta.description"](): string;
+    /**
+      * `Callout`
+      */
+    ["com.affine.settings.workspace.experimental-features.enable-callout.name"](): string;
+    /**
+      * `Let your words stand out.`
+      */
+    ["com.affine.settings.workspace.experimental-features.enable-callout.description"](): string;
     /**
       * `Emoji Folder Icon`
       */

packages/frontend/i18n/src/resources/en.json

@@ -1345,6 +1345,8 @@
   "com.affine.settings.workspace.experimental-features.enable-mind-map-import.description": "Enables mind map import.",
   "com.affine.settings.workspace.experimental-features.enable-block-meta.name": "Block Meta",
   "com.affine.settings.workspace.experimental-features.enable-block-meta.description": "Once enabled, all blocks will have created time, updated time, created by and updated by.",
+  "com.affine.settings.workspace.experimental-features.enable-callout.name": "Callout",
+  "com.affine.settings.workspace.experimental-features.enable-callout.description": "Let your words stand out.",
   "com.affine.settings.workspace.experimental-features.enable-emoji-folder-icon.name": "Emoji Folder Icon",
   "com.affine.settings.workspace.experimental-features.enable-emoji-folder-icon.description": "Once enabled, you can use an emoji as the folder icon. When the first character of the folder name is an emoji, it will be extracted and used as its icon.",
   "com.affine.settings.workspace.experimental-features.enable-emoji-doc-icon.name": "Emoji Doc Icon",