snapshot of https://github.com/toeverything/AFFiNE.git (canary, 2026-09-16; blobs > 131072B omitted)

blocksuite/affine/blocks/callout/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@blocksuite/affine-block-callout",
+  "description": "Callout block for BlockSuite.",
+  "type": "module",
+  "scripts": {
+    "build": "yarn run -T tsc"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
+    "@blocksuite/affine-inline-preset": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/affine-widget-slash-menu": "workspace:*",
+    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/std": "workspace:*",
+    "@blocksuite/store": "workspace:*",
+    "@emotion/css": "^11.13.5",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.23",
+    "lit": "^3.2.0"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./view": "./src/view.ts",
+    "./store": "./src/store.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.27.5"
+}

blocksuite/affine/blocks/callout/src/adapters/markdown.ts

@@ -0,0 +1,207 @@
+import { CalloutBlockSchema } from '@blocksuite/affine-model';
+import {
+  BlockMarkdownAdapterExtension,
+  type BlockMarkdownAdapterMatcher,
+  CALLOUT_MARKDOWN_EXPORT_OPTIONS_KEY,
+  type CalloutAdmonitionType,
+  CalloutAdmonitionTypeSet,
+  CalloutExportStyle,
+  type CalloutMarkdownExportOptions,
+  calloutMarkdownExportOptionsSchema,
+  DEFAULT_ADMONITION_TYPE,
+  getCalloutEmoji,
+  isCalloutNode,
+} from '@blocksuite/affine-shared/adapters';
+import { type DeltaInsert, nanoid } from '@blocksuite/store';
+
+// Currently, the callout block children can only be paragraph block or list block
+// In mdast, the node types are `paragraph`, `list`, `heading`, `blockquote`
+const CALLOUT_BLOCK_CHILDREN_TYPES = new Set([
+  'paragraph',
+  'list',
+  'heading',
+  'blockquote',
+]);
+
+const ADMONITION_SYMBOL = ':::';
+const DEFAULT_OPTIONS: CalloutMarkdownExportOptions = {
+  style: CalloutExportStyle.GFM,
+};
+
+/**
+ * Get the callout export options from the configs
+ * @param configs - The configs of the callout block
+ * @returns The callout export options
+ */
+function getCalloutExportOptions(
+  configs: Map<string, unknown>
+): CalloutMarkdownExportOptions {
+  let exportOptions: CalloutMarkdownExportOptions = DEFAULT_OPTIONS;
+  try {
+    const options = configs.get(CALLOUT_MARKDOWN_EXPORT_OPTIONS_KEY);
+    if (options) {
+      exportOptions = calloutMarkdownExportOptionsSchema.parse(options);
+    }
+  } catch {}
+  return exportOptions;
+}
+
+export const calloutBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher = {
+  flavour: CalloutBlockSchema.model.flavour,
+  toMatch: o => isCalloutNode(o.node),
+  fromMatch: o => o.node.flavour === CalloutBlockSchema.model.flavour,
+  toBlockSnapshot: {
+    enter: (o, context) => {
+      if (!o.node.data || !isCalloutNode(o.node)) {
+        return;
+      }
+
+      // Currently, the callout block children can only be a paragraph or a list
+      // So we should filter out the other children
+      o.node.children = o.node.children.filter(child =>
+        CALLOUT_BLOCK_CHILDREN_TYPES.has(child.type)
+      );
+
+      const { walkerContext } = context;
+      const calloutEmoji = getCalloutEmoji(o.node);
+      walkerContext.openNode(
+        {
+          type: 'block',
+          id: nanoid(),
+          flavour: CalloutBlockSchema.model.flavour,
+          props: {
+            emoji: calloutEmoji,
+          },
+          children: [],
+        },
+        'children'
+      );
+    },
+    leave: (o, context) => {
+      const { walkerContext } = context;
+      if (isCalloutNode(o.node)) {
+        walkerContext.closeNode();
+      }
+    },
+  },
+  fromBlockSnapshot: {
+    enter: (o, context) => {
+      const emoji = o.node.props.emoji as string;
+      const { walkerContext, configs } = context;
+
+      const exportOptions = getCalloutExportOptions(configs);
+      const { style, admonitionType } = exportOptions;
+      // If the style is admonitions, we should handle the first child
+      if (style === CalloutExportStyle.Admonitions) {
+        let type = admonitionType ?? DEFAULT_ADMONITION_TYPE;
+        let customTitle = '';
+        let restOfText = '';
+
+        const firstChild = o.node.children[0];
+        const isTextNode = !!firstChild.props.text;
+        // If the first child is a text block, we should get the type and custom title from the first line of the text
+        // And remove the first child from the children
+        // Otherwise, we should use the default admonition type as the type
+        if (isTextNode) {
+          const textDelta = (firstChild.props.text ?? { delta: [] }) as {
+            delta: DeltaInsert[];
+          };
+          // Get the text of the first child
+          const text = textDelta.delta.reduce((acc, delta) => {
+            if (delta.insert) {
+              acc += delta.insert;
+            }
+            return acc;
+          }, '');
+
+          // If the text is not empty, we should try to get type and custom title from the text
+          if (text) {
+            // Get the first line of the text
+            const firstLine = text.includes('\n') ? text.split('\n')[0] : text;
+            // Get the rest of the text besides the first line
+            restOfText = text.split('\n').slice(1).join('\n');
+            // Get the possible type from the first line
+            const possibleType = firstLine.split(' ')[0].toLowerCase();
+            // If the type is a valid admonition type, we should use it as the type
+            if (CalloutAdmonitionTypeSet.has(possibleType)) {
+              type = possibleType as CalloutAdmonitionType;
+              // Get the custom title from the first line
+              customTitle = firstLine.split(' ').slice(1).join(' ').trim();
+              // Remove the first child from the children
+              o.node.children = o.node.children.slice(1);
+            }
+          }
+        }
+
+        // Add an admonition symbol paragraph to the start of the children
+        const admonitionSymbol =
+          `${ADMONITION_SYMBOL} ${type} ${customTitle}`.trim();
+        walkerContext
+          .openNode({
+            type: 'paragraph',
+            children: [
+              {
+                type: 'text',
+                value: admonitionSymbol,
+              },
+            ],
+          })
+          .closeNode();
+
+        // Add the rest of the text to the children content
+        if (restOfText) {
+          walkerContext
+            .openNode({
+              type: 'paragraph',
+              children: [{ type: 'text', value: `${restOfText}` }],
+            })
+            .closeNode();
+        }
+      } else {
+        walkerContext
+          .openNode(
+            {
+              type: 'blockquote',
+              children: [],
+            },
+            'children'
+          )
+          .openNode({
+            type: 'paragraph',
+            children: [
+              {
+                type: 'text',
+                value: `[!${emoji}]`,
+              },
+            ],
+          })
+          .closeNode();
+      }
+    },
+    leave: (_, context) => {
+      const { walkerContext, configs } = context;
+      const exportOptions = getCalloutExportOptions(configs);
+      const { style } = exportOptions;
+      // If the style is admonitions, we should add an admonition symbol paragraph to the end of the children
+      if (style === CalloutExportStyle.Admonitions) {
+        walkerContext
+          .openNode({
+            type: 'paragraph',
+            children: [
+              {
+                type: 'text',
+                value: ADMONITION_SYMBOL,
+              },
+            ],
+          })
+          .closeNode();
+      } else {
+        // If the style is gfm, we should close the outer blockquote node
+        walkerContext.closeNode();
+      }
+    },
+  },
+};
+
+export const CalloutBlockMarkdownAdapterExtension =
+  BlockMarkdownAdapterExtension(calloutBlockMarkdownAdapterMatcher);

blocksuite/affine/blocks/callout/src/callout-block-styles.ts

@@ -0,0 +1,56 @@
+import { css } from '@emotion/css';
+
+export const calloutHostStyles = css({
+  display: 'block',
+  margin: '8px 0',
+});
+
+export const calloutBlockContainerStyles = css({
+  display: 'flex',
+  alignItems: 'flex-start',
+  padding: '5px 10px',
+  borderRadius: '8px',
+});
+
+export const calloutEmojiContainerStyles = css({
+  userSelect: 'none',
+  fontSize: '1.2em',
+  width: '24px',
+  height: '24px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  // marginTop is dynamically set by JavaScript based on first child's height
+  marginBottom: '10px',
+  flexShrink: 0,
+  position: 'relative',
+});
+
+export const calloutEmojiStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  ':hover': {
+    cursor: 'pointer',
+    opacity: 0.7,
+  },
+});
+
+export const calloutChildrenStyles = css({
+  flex: 1,
+  minWidth: 0,
+  paddingLeft: '10px',
+});
+
+export const iconPickerContainerStyles = css({
+  position: 'absolute',
+  top: '100%',
+  left: 0,
+  zIndex: 1000,
+  background: 'white',
+  border: '1px solid #ccc',
+  borderRadius: '8px',
+  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+  width: '390px',
+  height: '400px',
+});

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

@@ -0,0 +1,263 @@
+import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption';
+import {
+  createPopup,
+  popupTargetFromElement,
+} from '@blocksuite/affine-components/context-menu';
+import { DefaultInlineManagerExtension } from '@blocksuite/affine-inline-preset';
+import {
+  type CalloutBlockModel,
+  type ParagraphBlockModel,
+} from '@blocksuite/affine-model';
+import { focusTextModel } from '@blocksuite/affine-rich-text';
+import { EDGELESS_TOP_CONTENTEDITABLE_SELECTOR } from '@blocksuite/affine-shared/consts';
+import {
+  DocModeProvider,
+  type IconData,
+  IconPickerServiceIdentifier,
+  IconType,
+} from '@blocksuite/affine-shared/services';
+import type { UniComponent } from '@blocksuite/affine-shared/types';
+import * as icons from '@blocksuite/icons/lit';
+import type { BlockComponent } from '@blocksuite/std';
+import { type Signal } from '@preact/signals-core';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit';
+import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
+
+import {
+  calloutBlockContainerStyles,
+  calloutChildrenStyles,
+  calloutEmojiContainerStyles,
+  calloutEmojiStyles,
+  calloutHostStyles,
+} from './callout-block-styles.js';
+import { IconPickerWrapper } from './icon-picker-wrapper.js';
+// Copy of renderUniLit and UniLit from affine-data-view
+export const renderUniLit = <Props, Expose extends NonNullable<unknown>>(
+  uni: UniComponent<Props, Expose> | undefined,
+  props?: Props,
+  options?: {
+    ref?: Signal<Expose | undefined>;
+    style?: Readonly<StyleInfo>;
+    class?: string;
+  }
+): TemplateResult => {
+  return html` <uni-lit
+    .uni="${uni}"
+    .props="${props}"
+    .ref="${options?.ref}"
+    style=${options?.style ? styleMap(options?.style) : ''}
+  ></uni-lit>`;
+};
+const getIcon = (icon?: IconData) => {
+  if (!icon) {
+    return null;
+  }
+  if (icon.type === IconType.Emoji) {
+    return icon.unicode;
+  }
+  if (icon.type === IconType.AffineIcon) {
+    return (
+      icons as Record<string, (props: { style: string }) => TemplateResult>
+    )[`${icon.name}Icon`]?.({ style: `color:${icon.color}` });
+  }
+  return null;
+};
+export class CalloutBlockComponent extends CaptionedBlockComponent<CalloutBlockModel> {
+  private _popupCloseHandler: (() => void) | null = null;
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.classList.add(calloutHostStyles);
+  }
+
+  private _getEmojiMarginTop(): string {
+    if (this.model.children.length === 0) {
+      return '10px';
+    }
+
+    const firstChild = this.model.children[0];
+    const flavour = firstChild.flavour;
+
+    const marginTopMap: Record<string, string> = {
+      'affine:paragraph:h1': '23px',
+      'affine:paragraph:h2': '20px',
+      'affine:paragraph:h3': '16px',
+      'affine:paragraph:h4': '15px',
+      'affine:paragraph:h5': '14px',
+      'affine:paragraph:h6': '13px',
+    };
+
+    // For heading blocks, use the type to determine margin
+    if (flavour === 'affine:paragraph') {
+      const paragraph = firstChild as ParagraphBlockModel;
+      const type = paragraph.props.type$.value;
+      const key = `${flavour}:${type}`;
+      return marginTopMap[key] || '10px';
+    }
+
+    // Default for all other block types
+    return '10px';
+  }
+
+  private _closeIconPicker() {
+    if (this._popupCloseHandler) {
+      this._popupCloseHandler();
+      this._popupCloseHandler = null;
+    }
+  }
+
+  private _toggleIconPicker(event: MouseEvent) {
+    // If popup is already open, close it
+    if (this._popupCloseHandler) {
+      this._closeIconPicker();
+      return;
+    }
+
+    // Get IconPickerService from the framework
+    const iconPickerService = this.std.getOptional(IconPickerServiceIdentifier);
+    if (!iconPickerService) {
+      console.warn('IconPickerService not found');
+      return;
+    }
+
+    // Get the uni-component from the service
+    const iconPickerComponent = iconPickerService.iconPickerComponent;
+
+    // Create props for the icon picker
+    const props = {
+      onSelect: (iconData?: IconData) => {
+        this.model.props.icon$.value = iconData;
+        this._closeIconPicker(); // Close the picker after selection
+      },
+      onClose: () => {
+        this._closeIconPicker();
+      },
+    };
+
+    // Create IconPickerWrapper instance
+    const wrapper = new IconPickerWrapper();
+    wrapper.iconPickerComponent = iconPickerComponent;
+    wrapper.props = props;
+    wrapper.style.position = 'absolute';
+    wrapper.style.backgroundColor = cssVarV2.layer.background.overlayPanel;
+    wrapper.style.boxShadow = 'var(--affine-menu-shadow)';
+    wrapper.style.borderRadius = '8px';
+
+    // Create popup target from the clicked element
+    const target = popupTargetFromElement(event.currentTarget as HTMLElement);
+
+    // Create popup
+    this._popupCloseHandler = createPopup(target, wrapper, {
+      onClose: () => {
+        this._popupCloseHandler = null;
+      },
+    });
+  }
+
+  private readonly _handleBlockClick = (event: MouseEvent) => {
+    // Check if the click target is emoji related element
+    const target = event.target as HTMLElement;
+    if (
+      target.closest('.affine-callout-emoji-container') ||
+      target.classList.contains('affine-callout-emoji')
+    ) {
+      return;
+    }
+
+    // If there's no icon, open icon picker on click
+    const icon = this.model.props.icon$.value;
+    if (!icon) {
+      this._toggleIconPicker(event);
+      return;
+    }
+
+    // Only handle clicks when there are no children
+    if (this.model.children.length > 0) {
+      return;
+    }
+
+    // Prevent event bubbling
+    event.stopPropagation();
+
+    // Create a new paragraph block
+    const paragraphId = this.store.addBlock('affine:paragraph', {}, this.model);
+
+    // Focus the new paragraph
+    focusTextModel(this.std, paragraphId);
+  };
+
+  get attributeRenderer() {
+    return this.inlineManager.getRenderer();
+  }
+
+  get attributesSchema() {
+    return this.inlineManager.getSchema();
+  }
+
+  get embedChecker() {
+    return this.inlineManager.embedChecker;
+  }
+
+  get inlineManager() {
+    return this.std.get(DefaultInlineManagerExtension.identifier);
+  }
+
+  override get topContenteditableElement() {
+    if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
+      return this.closest<BlockComponent>(
+        EDGELESS_TOP_CONTENTEDITABLE_SELECTOR
+      );
+    }
+    return this.rootComponent;
+  }
+
+  override renderBlock() {
+    const icon = this.model.props.icon$.value;
+    const backgroundColorName = this.model.props.backgroundColorName$.value;
+    const normalizedBackgroundName =
+      backgroundColorName === 'default' || backgroundColorName === ''
+        ? 'grey'
+        : backgroundColorName;
+    const backgroundColor = (
+      cssVarV2.block.callout.background as Record<string, string>
+    )[normalizedBackgroundName ?? 'grey'];
+
+    const iconContent = getIcon(icon);
+
+    return html`
+      <div
+        class="${calloutBlockContainerStyles}"
+        @click=${this._handleBlockClick}
+        style=${styleMap({
+          backgroundColor: backgroundColor ?? 'transparent',
+        })}
+      >
+        ${
+          iconContent
+            ? html`
+                <div
+                  @click=${this._toggleIconPicker}
+                  contenteditable="false"
+                  class="${calloutEmojiContainerStyles}"
+                  style=${styleMap({
+                    marginTop: this._getEmojiMarginTop(),
+                  })}
+                >
+                  <span
+                    class="${calloutEmojiStyles}"
+                    data-testid="callout-emoji"
+                    >${iconContent}</span
+                  >
+                </div>
+              `
+            : ''
+        }
+        <div class="${calloutChildrenStyles}">
+          ${this.renderChildren(this.model)}
+        </div>
+      </div>
+    `;
+  }
+}

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

@@ -0,0 +1,86 @@
+import {
+  CalloutBlockModel,
+  ParagraphBlockModel,
+} from '@blocksuite/affine-model';
+import { matchModels } from '@blocksuite/affine-shared/utils';
+import {
+  BlockSelection,
+  KeymapExtension,
+  TextSelection,
+} from '@blocksuite/std';
+
+import { calloutToParagraphCommand } from './commands/callout-to-paragraph.js';
+import { splitCalloutCommand } from './commands/split-callout.js';
+
+export const CalloutKeymapExtension = KeymapExtension(std => {
+  return {
+    Enter: ctx => {
+      const text = std.selection.find(TextSelection);
+      if (!text) return false;
+
+      const currentBlock = std.store.getBlock(text.from.blockId);
+      if (!currentBlock) return false;
+
+      // Check if current block is a callout block
+      let calloutBlock = currentBlock;
+      if (!matchModels(currentBlock.model, [CalloutBlockModel])) {
+        // If not, check if the parent is a callout block
+        const parent = std.store.getParent(currentBlock.model);
+        if (!parent || !matchModels(parent, [CalloutBlockModel])) {
+          return false;
+        }
+        const parentBlock = std.store.getBlock(parent.id);
+        if (!parentBlock) return false;
+        calloutBlock = parentBlock;
+      }
+
+      ctx.get('keyboardState').raw.preventDefault();
+      std.command
+        .chain()
+        .pipe(splitCalloutCommand, {
+          blockId: calloutBlock.model.id,
+          inlineIndex: text.from.index,
+          currentBlockId: text.from.blockId,
+        })
+        .run();
+      return true;
+    },
+    Backspace: ctx => {
+      const text = std.selection.find(TextSelection);
+      if (text && text.isCollapsed() && text.from.index === 0) {
+        const event = ctx.get('defaultState').event;
+
+        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;
+
+        // Check if current block is a paragraph inside callout
+        if (matchModels(block.model, [ParagraphBlockModel])) {
+          event.preventDefault();
+
+          std.command
+            .chain()
+            .pipe(calloutToParagraphCommand, {
+              id: block.model.id,
+            })
+            .run();
+
+          return true;
+        }
+
+        // Fallback to selecting the callout block
+        event.preventDefault();
+        std.selection.setGroup('note', [
+          std.selection.create(BlockSelection, {
+            blockId: parent.id,
+          }),
+        ]);
+
+        return true;
+      }
+      return false;
+    },
+  };
+});

blocksuite/affine/blocks/callout/src/commands/callout-to-paragraph.ts

@@ -0,0 +1,86 @@
+import {
+  CalloutBlockModel,
+  ParagraphBlockModel,
+} from '@blocksuite/affine-model';
+import { focusTextModel } from '@blocksuite/affine-rich-text';
+import { matchModels } from '@blocksuite/affine-shared/utils';
+import type { Command } from '@blocksuite/std';
+import { BlockSelection } from '@blocksuite/std';
+import { Text } from '@blocksuite/store';
+
+export const calloutToParagraphCommand: Command<
+  {
+    id: string;
+    stopCapturing?: boolean;
+  },
+  {
+    success: boolean;
+  }
+> = (ctx, next) => {
+  const { id, stopCapturing = true } = ctx;
+  const std = ctx.std;
+  const doc = std.store;
+  const model = doc.getBlock(id)?.model;
+
+  if (!model || !matchModels(model, [ParagraphBlockModel])) return false;
+
+  const parent = doc.getParent(model);
+  if (!parent || !matchModels(parent, [CalloutBlockModel])) return false;
+
+  if (stopCapturing) std.store.captureSync();
+
+  // Get current block index in callout
+  const currentIndex = parent.children.indexOf(model);
+  const hasText = model.text && model.text.length > 0;
+
+  // Find previous paragraph block in callout
+  let previousBlock = null;
+  for (let i = currentIndex - 1; i >= 0; i--) {
+    const sibling = parent.children[i];
+    if (matchModels(sibling, [ParagraphBlockModel])) {
+      previousBlock = sibling;
+      break;
+    }
+  }
+
+  if (previousBlock && hasText) {
+    // Clone current text content before any operations to prevent data loss
+    const currentText = model.text || new Text();
+
+    // Get previous block text and merge index
+    const previousText = previousBlock.text || new Text();
+    const mergeIndex = previousText.length;
+
+    // Apply each delta from cloned current text to previous block to preserve formatting
+    previousText.join(currentText);
+
+    // Remove current block after text has been merged
+    doc.deleteBlock(model, {
+      deleteChildren: false,
+    });
+
+    // Focus at merge point in previous block
+    focusTextModel(std, previousBlock.id, mergeIndex);
+  } else if (previousBlock && !hasText) {
+    // Move cursor to end of previous block
+    doc.deleteBlock(model, {
+      deleteChildren: false,
+    });
+
+    const previousText = previousBlock.text || new Text();
+    focusTextModel(std, previousBlock.id, previousText.length);
+  } else {
+    // No previous block, select the entire callout
+    doc.deleteBlock(model, {
+      deleteChildren: false,
+    });
+
+    std.selection.setGroup('note', [
+      std.selection.create(BlockSelection, {
+        blockId: parent.id,
+      }),
+    ]);
+  }
+
+  return next({ success: true });
+};

blocksuite/affine/blocks/callout/src/commands/split-callout.ts

@@ -0,0 +1,85 @@
+import {
+  CalloutBlockModel,
+  ParagraphBlockModel,
+} from '@blocksuite/affine-model';
+import { focusTextModel } from '@blocksuite/affine-rich-text';
+import { matchModels } from '@blocksuite/affine-shared/utils';
+import type { Command, EditorHost } from '@blocksuite/std';
+
+export const splitCalloutCommand: Command<{
+  blockId: string;
+  inlineIndex: number;
+  currentBlockId: string;
+}> = (ctx, next) => {
+  const { blockId, inlineIndex, currentBlockId, std } = ctx;
+  const host = std.host as EditorHost;
+  const doc = host.store;
+
+  const calloutModel = doc.getBlock(blockId)?.model;
+  if (!calloutModel || !matchModels(calloutModel, [CalloutBlockModel])) {
+    console.error(`block ${blockId} is not a callout block`);
+    return;
+  }
+
+  const currentModel = doc.getBlock(currentBlockId)?.model;
+  if (!currentModel) {
+    console.error(`current block ${currentBlockId} not found`);
+    return;
+  }
+
+  doc.captureSync();
+
+  if (matchModels(currentModel, [ParagraphBlockModel])) {
+    // User is in a paragraph within the callout's children
+    const afterText = currentModel.props.text.split(inlineIndex);
+
+    // Update the current paragraph's text to keep only the part before cursor
+    doc.transact(() => {
+      currentModel.props.text.delete(
+        inlineIndex,
+        currentModel.props.text.length - inlineIndex
+      );
+    });
+
+    // Create a new paragraph block after the current one
+    const parent = doc.getParent(currentModel);
+    if (parent) {
+      const currentIndex = parent.children.indexOf(currentModel);
+      const newParagraphId = doc.addBlock(
+        'affine:paragraph',
+        {
+          text: afterText,
+        },
+        parent,
+        currentIndex + 1
+      );
+
+      if (newParagraphId) {
+        host.updateComplete
+          .then(() => {
+            focusTextModel(std, newParagraphId);
+          })
+          .catch(console.error);
+      }
+    }
+  } else {
+    // If current block is not a paragraph, create a new paragraph in callout
+    const newParagraphId = doc.addBlock(
+      'affine:paragraph',
+      {
+        text: new Text(),
+      },
+      calloutModel
+    );
+
+    if (newParagraphId) {
+      host.updateComplete
+        .then(() => {
+          focusTextModel(std, newParagraphId);
+        })
+        .catch(console.error);
+    }
+  }
+
+  next();
+};

blocksuite/affine/blocks/callout/src/configs/slash-menu.ts

@@ -0,0 +1,55 @@
+import { focusBlockEnd } from '@blocksuite/affine-shared/commands';
+import { isInsideBlockByFlavour } from '@blocksuite/affine-shared/utils';
+import { type SlashMenuConfig } from '@blocksuite/affine-widget-slash-menu';
+import { FontIcon } from '@blocksuite/icons/lit';
+
+import { calloutTooltip } from './tooltips';
+
+export const calloutSlashMenuConfig: SlashMenuConfig = {
+  items: [
+    {
+      name: 'Callout',
+      description: 'Let your words stand out.',
+      icon: FontIcon(),
+      tooltip: {
+        figure: calloutTooltip,
+        caption: 'Callout',
+      },
+      searchAlias: ['callout'],
+      group: '0_Basic@9',
+      when: ({ model }) => {
+        return !isInsideBlockByFlavour(
+          model.store,
+          model,
+          'affine:edgeless-text'
+        );
+      },
+      action: ({ model, std }) => {
+        const { store } = model;
+        const parent = store.getParent(model);
+        if (!parent) return;
+
+        const index = parent.children.indexOf(model);
+        if (index === -1) return;
+        const calloutId = store.addBlock(
+          'affine:callout',
+          {},
+          parent,
+          index + 1
+        );
+        if (!calloutId) return;
+        const paragraphId = store.addBlock('affine:paragraph', {}, calloutId);
+        if (!paragraphId) return;
+        std.host.updateComplete
+          .then(() => {
+            const paragraph = std.view.getBlock(paragraphId);
+            if (!paragraph) return;
+            std.command.exec(focusBlockEnd, {
+              focusBlock: paragraph,
+            });
+          })
+          .catch(console.error);
+      },
+    },
+  ],
+};

blocksuite/affine/blocks/callout/src/configs/toolbar.ts

@@ -0,0 +1,204 @@
+import {
+  createPopup,
+  popupTargetFromElement,
+} from '@blocksuite/affine-components/context-menu';
+import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
+import { CalloutBlockModel } from '@blocksuite/affine-model';
+import {
+  ActionPlacement,
+  type IconData,
+  IconPickerServiceIdentifier,
+  type ToolbarAction,
+  type ToolbarActionGroup,
+  type ToolbarModuleConfig,
+  ToolbarModuleExtension,
+} from '@blocksuite/affine-shared/services';
+import { DeleteIcon, PaletteIcon, SmileIcon } from '@blocksuite/icons/lit';
+import { BlockFlavourIdentifier } from '@blocksuite/std';
+import type { ExtensionType } from '@blocksuite/store';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { html } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import { IconPickerWrapper } from '../icon-picker-wrapper.js';
+
+const colors = [
+  'default',
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'teal',
+  'blue',
+  'purple',
+  'grey',
+] as const;
+
+const backgroundColorAction = {
+  id: 'background-color',
+  label: 'Background Color',
+  tooltip: 'Change background color',
+  icon: PaletteIcon(),
+  run() {
+    // This will be handled by the content function
+  },
+  content(ctx) {
+    const model = ctx.getCurrentModelByType(CalloutBlockModel);
+    if (!model) return null;
+
+    const updateBackground = (color: string) => {
+      ctx.store.updateBlock(model, { backgroundColorName: color });
+    };
+
+    return html`
+      <editor-menu-button
+        .contentPadding=${'8px'}
+        .button=${html`
+          <editor-icon-button
+            aria-label="background"
+            .tooltip=${'Background Color'}
+          >
+            ${PaletteIcon()} ${EditorChevronDown}
+          </editor-icon-button>
+        `}
+      >
+        <div data-size="large" data-orientation="vertical">
+          <div class="highlight-heading">Background</div>
+          ${repeat(colors, color => {
+            const isDefault = color === 'default';
+            const value = isDefault
+              ? cssVarV2.block.callout.background.grey
+              : `var(--affine-text-highlight-${color})`;
+            const displayName = `${color} Background`;
+
+            return html`
+              <editor-menu-action
+                data-testid="background-${color}"
+                @click=${() => updateBackground(isDefault ? 'grey' : color)}
+              >
+                <affine-text-duotone-icon
+                  style=${styleMap({
+                    '--color': 'var(--affine-text-primary-color)',
+                    '--background': value ?? 'transparent',
+                  })}
+                ></affine-text-duotone-icon>
+                <span class="label capitalize">${displayName}</span>
+              </editor-menu-action>
+            `;
+          })}
+        </div>
+      </editor-menu-button>
+    `;
+  },
+} satisfies ToolbarAction;
+
+const iconPickerAction = {
+  id: 'icon-picker',
+  label: 'Icon Picker',
+  tooltip: 'Change icon',
+  icon: SmileIcon(),
+  run() {
+    // This will be handled by the content function
+  },
+  content(ctx) {
+    const model = ctx.getCurrentModelByType(CalloutBlockModel);
+    if (!model) return null;
+
+    const handleIconPickerClick = (event: MouseEvent) => {
+      // Get IconPickerService from the framework
+      const iconPickerService = ctx.std.getOptional(
+        IconPickerServiceIdentifier
+      );
+      if (!iconPickerService) {
+        console.warn('IconPickerService not found');
+        return;
+      }
+
+      // Get the uni-component from the service
+      const iconPickerComponent = iconPickerService.iconPickerComponent;
+
+      // Create props for the icon picker
+      const props = {
+        onSelect: (iconData?: IconData) => {
+          // When iconData is undefined (delete icon), set icon to undefined
+          ctx.store.updateBlock(model, { icon: iconData });
+          closeHandler(); // Close the picker after selection
+        },
+        onClose: () => {
+          closeHandler();
+        },
+      };
+
+      // Create IconPickerWrapper instance
+      const wrapper = new IconPickerWrapper();
+      wrapper.iconPickerComponent = iconPickerComponent;
+      wrapper.props = props;
+      wrapper.style.position = 'absolute';
+      wrapper.style.backgroundColor = cssVarV2.layer.background.overlayPanel;
+      wrapper.style.boxShadow = 'var(--affine-menu-shadow)';
+      wrapper.style.borderRadius = '8px';
+
+      // Create popup target from the clicked element
+      const target = popupTargetFromElement(event.currentTarget as HTMLElement);
+
+      // Create popup
+      const closeHandler = createPopup(target, wrapper, {
+        onClose: () => {
+          // Cleanup if needed
+        },
+      });
+    };
+
+    return html`
+      <editor-icon-button
+        aria-label="icon-picker"
+        .tooltip=${'Change Icon'}
+        @click=${handleIconPickerClick}
+      >
+        ${SmileIcon()} ${EditorChevronDown}
+      </editor-icon-button>
+    `;
+  },
+} satisfies ToolbarAction;
+
+const builtinToolbarConfig = {
+  actions: [
+    {
+      id: 'style',
+      actions: [backgroundColorAction],
+    } satisfies ToolbarActionGroup<ToolbarAction>,
+    {
+      id: 'icon',
+      actions: [iconPickerAction],
+    } satisfies ToolbarActionGroup<ToolbarAction>,
+    {
+      placement: ActionPlacement.More,
+      id: 'c.delete',
+      label: 'Delete',
+      icon: DeleteIcon(),
+      variant: 'destructive',
+      run(ctx) {
+        const model = ctx.getCurrentModelByType(CalloutBlockModel);
+        if (!model) return;
+
+        ctx.store.deleteBlock(model);
+
+        // Clears
+        ctx.select('note');
+        ctx.reset();
+      },
+    } satisfies ToolbarAction,
+  ],
+} as const satisfies ToolbarModuleConfig;
+
+export const createBuiltinToolbarConfigExtension = (
+  flavour: string
+): ExtensionType[] => {
+  return [
+    ToolbarModuleExtension({
+      id: BlockFlavourIdentifier(flavour),
+      config: builtinToolbarConfig,
+    }),
+  ];
+};

blocksuite/affine/blocks/callout/src/configs/tooltips.ts

@@ -0,0 +1,28 @@
+import { html } from 'lit';
+
+// prettier-ignore
+export const calloutTooltip = html`<svg width="170" height="106" viewBox="0 0 170 106" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3479_144688)">
+<rect width="170" height="106" fill="white"/>
+<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="16.6364">Highlight important notes.</tspan></text>
+<path d="M8 32.1816C8 29.3199 10.3199 27 13.1816 27H489.892C492.754 27 495.073 29.3199 495.073 32.1816V90.8403C495.073 93.702 492.754 96.0219 489.892 96.0219H13.1816C10.3199 96.0219 8 93.702 8 90.8403V32.1816Z" fill="#EEFFFD"/>
+<g clip-path="url(#clip1_3479_144688)">
+<g clip-path="url(#clip2_3479_144688)">
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="15" font-weight="500" letter-spacing="0em"><tspan x="14.7494" y="50.1658">&#x1f44b;</tspan></text>
+</g>
+</g>
+<text fill="#141414" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="44.9541" y="49.4196">A storyboard is a visual representation of a story, typically presented in the form of sequential </tspan><tspan x="44.9541" y="64.9645">panels. Each panel features illustrations or images accompanied by notes describing key </tspan><tspan x="44.9541" y="80.5094">scenes or shots, including details of action and dialogue. </tspan></text>
+</g>
+<defs>
+<clipPath id="clip0_3479_144688">
+<rect width="170" height="106" fill="white"/>
+</clipPath>
+<clipPath id="clip1_3479_144688">
+<rect width="24" height="30.477" fill="white" transform="translate(14.477 30.2388)"/>
+</clipPath>
+<clipPath id="clip2_3479_144688">
+<rect x="14.477" y="36.7158" width="24" height="24" rx="1.94311" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+`;

blocksuite/affine/blocks/callout/src/effects.ts

@@ -0,0 +1,14 @@
+import { CalloutBlockComponent } from './callout-block';
+import { IconPickerWrapper } from './icon-picker-wrapper';
+
+export function effects() {
+  customElements.define('affine-callout', CalloutBlockComponent);
+  customElements.define('icon-picker-wrapper', IconPickerWrapper);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-callout': CalloutBlockComponent;
+    'icon-picker-wrapper': IconPickerWrapper;
+  }
+}

blocksuite/affine/blocks/callout/src/icon-picker-wrapper.ts

@@ -0,0 +1,52 @@
+import type { IconData } from '@blocksuite/affine-shared/services';
+import type { UniComponent } from '@blocksuite/affine-shared/types';
+import { ShadowlessElement } from '@blocksuite/std';
+import { type Signal } from '@preact/signals-core';
+import { html, type TemplateResult } from 'lit';
+import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
+
+// Copy of renderUniLit from callout-block.ts
+const renderUniLit = <Props, Expose extends NonNullable<unknown>>(
+  uni: UniComponent<Props, Expose> | undefined,
+  props?: Props,
+  options?: {
+    ref?: Signal<Expose | undefined>;
+    style?: Readonly<StyleInfo>;
+    class?: string;
+  }
+): TemplateResult => {
+  return html` <uni-lit
+    .uni="${uni}"
+    .props="${props}"
+    .ref="${options?.ref}"
+    style=${options?.style ? styleMap(options?.style) : ''}
+  ></uni-lit>`;
+};
+
+export interface IconPickerWrapperProps {
+  onSelect?: (iconData?: IconData) => void;
+  onClose?: () => void;
+}
+
+export class IconPickerWrapper extends ShadowlessElement {
+  iconPickerComponent?: UniComponent<IconPickerWrapperProps, any>;
+  props?: IconPickerWrapperProps;
+
+  constructor() {
+    super();
+  }
+
+  override render() {
+    if (!this.iconPickerComponent) {
+      return html``;
+    }
+
+    return renderUniLit(this.iconPickerComponent, this.props);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'icon-picker-wrapper': IconPickerWrapper;
+  }
+}

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

@@ -0,0 +1,2 @@
+export * from './callout-block.js';
+export * from './effects.js';

blocksuite/affine/blocks/callout/src/store.ts

@@ -0,0 +1,17 @@
+import {
+  type StoreExtensionContext,
+  StoreExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+import { CalloutBlockSchemaExtension } from '@blocksuite/affine-model';
+
+import { CalloutBlockMarkdownAdapterExtension } from './adapters/markdown';
+
+export class CalloutStoreExtension extends StoreExtensionProvider {
+  override name = 'affine-callout-block';
+
+  override setup(context: StoreExtensionContext) {
+    super.setup(context);
+    context.register(CalloutBlockSchemaExtension);
+    context.register(CalloutBlockMarkdownAdapterExtension);
+  }
+}

blocksuite/affine/blocks/callout/src/view.ts

@@ -0,0 +1,32 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+import { SlashMenuConfigExtension } from '@blocksuite/affine-widget-slash-menu';
+import { BlockViewExtension, FlavourExtension } from '@blocksuite/std';
+import { literal } from 'lit/static-html.js';
+
+import { CalloutKeymapExtension } from './callout-keymap';
+import { calloutSlashMenuConfig } from './configs/slash-menu';
+import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
+import { effects } from './effects';
+
+export class CalloutViewExtension extends ViewExtensionProvider {
+  override name = 'affine-callout-block';
+
+  override effect() {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    context.register([
+      FlavourExtension('affine:callout'),
+      BlockViewExtension('affine:callout', literal`affine-callout`),
+      CalloutKeymapExtension,
+      SlashMenuConfigExtension('affine:callout', calloutSlashMenuConfig),
+      ...createBuiltinToolbarConfigExtension('affine:callout'),
+    ]);
+  }
+}

blocksuite/affine/blocks/callout/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../../components" },
+    { "path": "../../ext-loader" },
+    { "path": "../../inlines/preset" },
+    { "path": "../../model" },
+    { "path": "../../rich-text" },
+    { "path": "../../shared" },
+    { "path": "../../widgets/slash-menu" },
+    { "path": "../../../framework/std" },
+    { "path": "../../../framework/store" }
+  ]
+}