From 9ace300ab92d9e2d21f86c24bdd4b95a90cd0b05 Mon Sep 17 00:00:00 2001
From: Ayush Agrawal <54364088+AyushAgrawal-A2@users.noreply.github.com>
Date: Thu, 14 Dec 2023 19:36:19 +0530
Subject: [PATCH] feat(edgeless): support consistent dragging behavior (#5613)

---
 .../_common/components/file-drop-manager.ts   |    5 -
 .../rich-text/rich-text-operations.ts         |    3 +-
 .../embed-block-helper/embed-block-element.ts |  116 +-
 packages/blocks/src/_common/utils/query.ts    |   14 +
 .../src/_legacy/clipboard/utils/commons.ts    |    2 +-
 .../legacy-services/bookmark-service.ts       |    1 +
 .../src/attachment-block/attachment-block.ts  |    4 +-
 .../attachment-block/attachment-service.ts    |   19 +-
 packages/blocks/src/attachment-block/utils.ts |    2 +-
 .../src/bookmark-block/bookmark-block.ts      |  123 +-
 .../src/bookmark-block/doc-bookmark-block.ts  |   28 -
 .../src/database-block/database-block.ts      |    2 +-
 .../embed-github-block/embed-github-block.ts  |   13 +-
 .../image-selected-rects.ts                   |    0
 .../blocks/src/image-block/doc-image-block.ts |  391 +++++
 .../src/image-block/edgeless-image-block.ts   |   41 +
 .../blocks/src/image-block/image-block.ts     |  552 ++-----
 .../{image => }/image-resize-manager.ts       |    4 +-
 .../blocks/src/image-block/image-service.ts   |   23 +-
 .../src/image-block/{image => }/utils.ts      |   77 +-
 packages/blocks/src/note-block/note-block.ts  |   82 +-
 .../bookmark/edgeless-bookmark.ts             |    4 +-
 .../block-portal/embed/edgeless-embed.ts      |    4 +-
 .../block-portal/image/edgeless-image.ts      |    4 +-
 .../components/rects/edgeless-hover-rect.ts   |    8 +-
 .../rects/edgeless-selected-rect.ts           |    3 +-
 .../components/toolbar/note/note-menu.ts      |    2 +-
 .../toolbar/template/builtin-templates.ts     |    1 +
 .../toolbar/template/json/flow-chart.json     | 1037 -------------
 .../toolbar/template/json/flow-chart.ts       | 1040 +++++++++++++
 .../toolbar/template/json/gantt-chart.json    |  999 ------------
 .../toolbar/template/json/gantt-chart.ts      | 1002 ++++++++++++
 .../toolbar/template/json/kanban.json         |  899 -----------
 .../toolbar/template/json/kanban.ts           |  907 +++++++++++
 .../template/json/monthly-calendar.json       | 1125 --------------
 .../toolbar/template/json/monthly-calendar.ts | 1135 ++++++++++++++
 .../toolbar/template/json/storyboard.json     | 1345 ----------------
 .../toolbar/template/json/storyboard.ts       | 1353 +++++++++++++++++
 .../components/toolbar/template/templates.ts  |   12 +-
 .../src/page-block/edgeless/utils/query.ts    |    8 +
 packages/blocks/src/page-block/index.ts       |    1 +
 .../widgets/block-hub/components/block-hub.ts |   55 +-
 .../drag-handle/components/drag-preview.ts    |   13 +-
 .../page-block/widgets/drag-handle/config.ts  |   73 +-
 .../widgets/drag-handle/drag-handle.ts        | 1007 +++++++-----
 .../page-block/widgets/drag-handle/styles.ts  |    5 +-
 .../page-block/widgets/drag-handle/utils.ts   |  127 +-
 .../widgets/image-toolbar/image-options.ts    |    6 +-
 .../page-block/widgets/slash-menu/config.ts   |   36 +-
 packages/store/src/workspace/page.ts          |    1 -
 tests/bookmark.spec.ts                        |    4 +-
 tests/edgeless/note.spec.ts                   |   14 +-
 52 files changed, 7283 insertions(+), 6449 deletions(-)
 rename packages/blocks/src/image-block/{image => components}/image-selected-rects.ts (100%)
 create mode 100644 packages/blocks/src/image-block/doc-image-block.ts
 create mode 100644 packages/blocks/src/image-block/edgeless-image-block.ts
 rename packages/blocks/src/image-block/{image => }/image-resize-manager.ts (95%)
 rename packages/blocks/src/image-block/{image => }/utils.ts (73%)
 delete mode 100644 packages/blocks/src/page-block/edgeless/components/toolbar/template/json/flow-chart.json
 create mode 100644 packages/blocks/src/page-block/edgeless/components/toolbar/template/json/flow-chart.ts
 delete mode 100644 packages/blocks/src/page-block/edgeless/components/toolbar/template/json/gantt-chart.json
 create mode 100644 packages/blocks/src/page-block/edgeless/components/toolbar/template/json/gantt-chart.ts
 delete mode 100644 packages/blocks/src/page-block/edgeless/components/toolbar/template/json/kanban.json
 create mode 100644 packages/blocks/src/page-block/edgeless/components/toolbar/template/json/kanban.ts
 delete mode 100644 packages/blocks/src/page-block/edgeless/components/toolbar/template/json/monthly-calendar.json
 create mode 100644 packages/blocks/src/page-block/edgeless/components/toolbar/template/json/monthly-calendar.ts
 delete mode 100644 packages/blocks/src/page-block/edgeless/components/toolbar/template/json/storyboard.json
 create mode 100644 packages/blocks/src/page-block/edgeless/components/toolbar/template/json/storyboard.ts

diff --git a/packages/blocks/src/_common/components/file-drop-manager.ts b/packages/blocks/src/_common/components/file-drop-manager.ts
index bdababf01e86..59b63f3c6294 100644
--- a/packages/blocks/src/_common/components/file-drop-manager.ts
+++ b/packages/blocks/src/_common/components/file-drop-manager.ts
@@ -21,7 +21,6 @@ export type onDropProps = {
 
 export type FileDropOptions = {
   flavour: string;
-  maxFileSize?: number;
   onDrop?: ({ files, targetModel, place, point }: onDropProps) => void;
 };
 
@@ -81,10 +80,6 @@ export class FileDropManager {
     return targetModel;
   }
 
-  get maxFileSize(): number {
-    return this._fileDropOptions.maxFileSize ?? 10 * 1000 * 1000; // default to 10MB
-  }
-
   onDragOver = (event: DragEvent) => {
     event.preventDefault();
 
diff --git a/packages/blocks/src/_common/components/rich-text/rich-text-operations.ts b/packages/blocks/src/_common/components/rich-text/rich-text-operations.ts
index 5ba804a9d72e..d09a681b0226 100644
--- a/packages/blocks/src/_common/components/rich-text/rich-text-operations.ts
+++ b/packages/blocks/src/_common/components/rich-text/rich-text-operations.ts
@@ -22,7 +22,8 @@ import {
   focusBlockByModel,
   focusTitle,
 } from '../../../_common/utils/selection.js';
-import { type ListBlockModel, type PageBlockModel } from '../../../models.js';
+import type { ListBlockModel } from '../../../list-block/index.js';
+import type { PageBlockModel } from '../../../page-block/index.js';
 import type { ExtendedModel } from '../../types.js';
 
 /**
diff --git a/packages/blocks/src/_common/embed-block-helper/embed-block-element.ts b/packages/blocks/src/_common/embed-block-helper/embed-block-element.ts
index d1eee9eef572..4c7fdbf1305d 100644
--- a/packages/blocks/src/_common/embed-block-helper/embed-block-element.ts
+++ b/packages/blocks/src/_common/embed-block-helper/embed-block-element.ts
@@ -1,12 +1,21 @@
 import type { BlockService } from '@blocksuite/block-std';
+import { assertExists } from '@blocksuite/global/utils';
 import { BlockElement } from '@blocksuite/lit';
 import type { BaseBlockModel } from '@blocksuite/store';
 import type { TemplateResult } from 'lit';
-import { html } from 'lit';
+import { html, render } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
+import type { DragHandleOption } from '../../page-block/widgets/drag-handle/config.js';
+import { AffineDragHandleWidget } from '../../page-block/widgets/drag-handle/drag-handle.js';
+import {
+  captureEventTarget,
+  convertDragPreviewDocToEdgeless,
+  convertDragPreviewEdgelessToDoc,
+} from '../../page-block/widgets/drag-handle/utils.js';
 import { Bound } from '../../surface-block/index.js';
 import type { EdgelessSelectableProps } from '../edgeless/mixin/index.js';
+import { type BlockModels, matchFlavours } from '../utils/index.js';
 
 export class EmbedBlockElement<
   Model extends
@@ -14,14 +23,17 @@ export class EmbedBlockElement<
   Service extends BlockService = BlockService,
   WidgetName extends string = string,
 > extends BlockElement<Model, Service, WidgetName> {
-  protected get _isInSurface() {
-    const parent = this.host.querySelector('affine-edgeless-page');
-    return !!parent;
+  protected _isInSurface = false;
+
+  protected _width = 400;
+  protected _height = 200;
+
+  get isInSurface() {
+    return this._isInSurface;
   }
 
   get surface() {
     if (!this._isInSurface) return null;
-
     return this.host.querySelector('affine-surface');
   }
 
@@ -48,4 +60,98 @@ export class EmbedBlockElement<
       </div>
     `;
   };
+
+  private _dragHandleOption: DragHandleOption = {
+    flavour: /affine:embed-*/,
+    edgeless: true,
+    onDragStart: ({ state, startDragging, anchorBlockPath }) => {
+      if (!anchorBlockPath) return false;
+      const anchorComponent = this.std.view.viewFromPath(
+        'block',
+        anchorBlockPath
+      );
+      if (
+        !anchorComponent ||
+        !matchFlavours(anchorComponent.model, [
+          this.flavour as keyof BlockModels,
+        ])
+      )
+        return false;
+
+      const blockComponent = anchorComponent as this;
+      const isInSurface = blockComponent.isInSurface;
+      if (!isInSurface) {
+        this.host.selection.setGroup('block', [
+          this.host.selection.getInstance('block', {
+            path: blockComponent.path,
+          }),
+        ]);
+        startDragging([blockComponent], state);
+        return true;
+      }
+
+      const element = captureEventTarget(state.raw.target);
+      const insideDragHandle = !!element?.closest('affine-drag-handle-widget');
+      if (!insideDragHandle) return false;
+
+      const embedPortal = blockComponent.closest(
+        '.edgeless-block-portal-embed'
+      );
+      assertExists(embedPortal);
+      const dragPreviewEl = embedPortal.cloneNode() as HTMLElement;
+      dragPreviewEl.style.transform = '';
+      render(
+        blockComponent.host.renderModel(blockComponent.model),
+        dragPreviewEl
+      );
+
+      startDragging([blockComponent], state, dragPreviewEl);
+      return true;
+    },
+    onDragEnd: props => {
+      const { state, draggingElements } = props;
+      if (
+        draggingElements.length !== 1 ||
+        !matchFlavours(draggingElements[0].model, [
+          this.flavour as keyof BlockModels,
+        ])
+      )
+        return false;
+
+      const blockComponent = draggingElements[0] as this;
+      const isInSurface = blockComponent.isInSurface;
+      const target = captureEventTarget(state.raw.target);
+      const isTargetEdgelessContainer =
+        target?.classList.contains('edgeless') &&
+        target?.classList.contains('affine-block-children-container');
+
+      if (isInSurface) {
+        return convertDragPreviewEdgelessToDoc({
+          blockComponent,
+          ...props,
+        });
+      } else if (isTargetEdgelessContainer) {
+        return convertDragPreviewDocToEdgeless({
+          blockComponent,
+          cssSelector: '.embed-block-container',
+          width: this._width,
+          height: this._height,
+          ...props,
+        });
+      }
+
+      return false;
+    },
+  };
+
+  override connectedCallback() {
+    super.connectedCallback();
+
+    const parent = this.host.page.getParent(this.model);
+    this._isInSurface = parent?.flavour === 'affine:surface';
+
+    this.disposables.add(
+      AffineDragHandleWidget.registerOption(this._dragHandleOption)
+    );
+  }
 }
diff --git a/packages/blocks/src/_common/utils/query.ts b/packages/blocks/src/_common/utils/query.ts
index 2479b3437193..d0555c696c0a 100644
--- a/packages/blocks/src/_common/utils/query.ts
+++ b/packages/blocks/src/_common/utils/query.ts
@@ -411,6 +411,10 @@ function isEdgelessChildNote({ classList }: Element) {
   return classList.contains('edgeless-block-portal-note');
 }
 
+function isEdgelessChildImage({ classList }: Element) {
+  return classList.contains('edgeless-block-portal-image');
+}
+
 /**
  * Returns the closest block element by a point in the rect.
  *
@@ -701,6 +705,16 @@ export function getHoveringNote(point: Point) {
   );
 }
 
+/**
+ * Get hovering top level image with given a point in edgeless mode.
+ */
+export function getHoveringImage(point: Point) {
+  return (
+    document.elementsFromPoint(point.x, point.y).find(isEdgelessChildImage) ||
+    null
+  );
+}
+
 /**
  * Gets the table of the database.
  */
diff --git a/packages/blocks/src/_legacy/clipboard/utils/commons.ts b/packages/blocks/src/_legacy/clipboard/utils/commons.ts
index bab0f04073eb..9f3a86b0df2c 100644
--- a/packages/blocks/src/_legacy/clipboard/utils/commons.ts
+++ b/packages/blocks/src/_legacy/clipboard/utils/commons.ts
@@ -49,7 +49,7 @@ async function generateClipboardInfo(
     childrenJson.push(json);
   }
 
-  const service = await getService(model.flavour);
+  const service = getService(model.flavour);
 
   const html = await service.block2html(model, {
     childText: childrenHtml.join(''),
diff --git a/packages/blocks/src/_legacy/service/legacy-services/bookmark-service.ts b/packages/blocks/src/_legacy/service/legacy-services/bookmark-service.ts
index d0c6fff4dd55..15793a5668ab 100644
--- a/packages/blocks/src/_legacy/service/legacy-services/bookmark-service.ts
+++ b/packages/blocks/src/_legacy/service/legacy-services/bookmark-service.ts
@@ -40,6 +40,7 @@ export class BookmarkBlockService extends BaseService<BookmarkBlockModel> {
   </figure>
 `;
   }
+
   override block2Text(block: BookmarkBlockModel): string {
     return block.url;
   }
diff --git a/packages/blocks/src/attachment-block/attachment-block.ts b/packages/blocks/src/attachment-block/attachment-block.ts
index 63ea6f8fe82a..1724abafc6b2 100644
--- a/packages/blocks/src/attachment-block/attachment-block.ts
+++ b/packages/blocks/src/attachment-block/attachment-block.ts
@@ -135,8 +135,8 @@ export class AttachmentBlockComponent extends BlockElement<AttachmentBlockModel>
     this._disposables.add(
       AffineDragHandleWidget.registerOption({
         flavour: AttachmentBlockSchema.model.flavour,
-        onDragStart: (state, startDragging) => {
-          // Check if start dragging from the image block
+        onDragStart: ({ state, startDragging }) => {
+          // Check if start dragging from the attachment block
           const target = captureEventTarget(state.raw.target);
           const attachmentBlock = target?.closest('affine-attachment');
           if (!attachmentBlock) return false;
diff --git a/packages/blocks/src/attachment-block/attachment-service.ts b/packages/blocks/src/attachment-block/attachment-service.ts
index 7d3d025b5c7e..3cecc3543356 100644
--- a/packages/blocks/src/attachment-block/attachment-service.ts
+++ b/packages/blocks/src/attachment-block/attachment-service.ts
@@ -4,8 +4,6 @@ import {
   FileDropManager,
   type FileDropOptions,
 } from '../_common/components/file-drop-manager.js';
-import { toast } from '../_common/components/toast.js';
-import { humanFileSize } from '../_common/utils/math.js';
 import { matchFlavours } from '../_common/utils/model.js';
 import type { AttachmentBlockModel } from './attachment-model.js';
 import { addSiblingAttachmentBlock } from './utils.js';
@@ -15,7 +13,6 @@ export class AttachmentService extends BlockService<AttachmentBlockModel> {
 
   private _fileDropOptions: FileDropOptions = {
     flavour: this.flavour,
-    maxFileSize: this.maxFileSize,
     onDrop: async ({ files, targetModel, place }) => {
       if (!files.length || !targetModel) return false;
       if (matchFlavours(targetModel, ['affine:surface'])) return false;
@@ -25,22 +22,8 @@ export class AttachmentService extends BlockService<AttachmentBlockModel> {
         file => !file.type.startsWith('image/')
       );
 
-      const isSizeExceeded = attachmentFiles.some(
-        file => file.size > this.maxFileSize
-      );
-      if (isSizeExceeded) {
-        toast(
-          `You can only upload files less than ${humanFileSize(
-            this.maxFileSize,
-            true,
-            0
-          )}`
-        );
-        return true;
-      }
-
       attachmentFiles.forEach(file =>
-        addSiblingAttachmentBlock(file, targetModel, this.maxFileSize, place)
+        addSiblingAttachmentBlock(file, this.maxFileSize, targetModel, place)
       );
       return true;
     },
diff --git a/packages/blocks/src/attachment-block/utils.ts b/packages/blocks/src/attachment-block/utils.ts
index 4e164ea4bb0b..bb4461810e6d 100644
--- a/packages/blocks/src/attachment-block/utils.ts
+++ b/packages/blocks/src/attachment-block/utils.ts
@@ -169,8 +169,8 @@ export async function uploadBlobForAttachment(
  */
 export async function addSiblingAttachmentBlock(
   file: File,
-  model: BaseBlockModel,
   maxFileSize: number,
+  model: BaseBlockModel,
   place: 'before' | 'after' = 'after'
 ): Promise<string | null> {
   if (file.size > maxFileSize) {
diff --git a/packages/blocks/src/bookmark-block/bookmark-block.ts b/packages/blocks/src/bookmark-block/bookmark-block.ts
index ba64f36fb014..9334a2445732 100644
--- a/packages/blocks/src/bookmark-block/bookmark-block.ts
+++ b/packages/blocks/src/bookmark-block/bookmark-block.ts
@@ -3,14 +3,29 @@ import '../_common/components/button.js';
 import './doc-bookmark-block.js';
 import './edgeless-bookmark-block.js';
 
-import { Slot } from '@blocksuite/global/utils';
+import { assertExists, Slot } from '@blocksuite/global/utils';
 import { BlockElement } from '@blocksuite/lit';
-import { html } from 'lit';
+import { html, render } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 
-import type { BookmarkBlockModel } from './bookmark-model.js';
+import { matchFlavours } from '../_common/utils/index.js';
+import type { DragHandleOption } from '../page-block/widgets/drag-handle/config.js';
+import { AffineDragHandleWidget } from '../page-block/widgets/drag-handle/drag-handle.js';
+import {
+  captureEventTarget,
+  convertDragPreviewDocToEdgeless,
+  convertDragPreviewEdgelessToDoc,
+} from '../page-block/widgets/drag-handle/utils.js';
+import {
+  type BookmarkBlockModel,
+  BookmarkBlockSchema,
+} from './bookmark-model.js';
 import type { DocBookmarkBlockComponent } from './doc-bookmark-block.js';
 import type { EdgelessBookmarkBlockComponent } from './edgeless-bookmark-block.js';
+import {
+  EdgelessBookmarkHeight,
+  EdgelessBookmarkWidth,
+} from './edgeless-bookmark-block.js';
 import { refreshBookmarkUrlData } from './utils.js';
 
 @customElement('affine-bookmark')
@@ -23,12 +38,105 @@ export class BookmarkBlockComponent extends BlockElement<BookmarkBlockModel> {
     | EdgelessBookmarkBlockComponent
     | DocBookmarkBlockComponent;
 
+  private _isInSurface = false;
+
+  get isInSurface() {
+    return this._isInSurface;
+  }
+
   readonly slots = {
     loadingUpdated: new Slot(),
   };
 
+  private _dragHandleOption: DragHandleOption = {
+    flavour: BookmarkBlockSchema.model.flavour,
+    edgeless: true,
+    onDragStart: ({ state, startDragging, anchorBlockPath }) => {
+      if (!anchorBlockPath) return false;
+      const anchorComponent = this.std.view.viewFromPath(
+        'block',
+        anchorBlockPath
+      );
+      if (
+        !anchorComponent ||
+        !matchFlavours(anchorComponent.model, [
+          BookmarkBlockSchema.model.flavour,
+        ])
+      )
+        return false;
+
+      const blockComponent = anchorComponent as BookmarkBlockComponent;
+      const isInSurface = blockComponent.isInSurface;
+      if (!isInSurface) {
+        this.host.selection.setGroup('block', [
+          this.host.selection.getInstance('block', {
+            path: blockComponent.path,
+          }),
+        ]);
+        startDragging([blockComponent], state);
+        return true;
+      }
+
+      const element = captureEventTarget(state.raw.target);
+      const insideDragHandle = !!element?.closest('affine-drag-handle-widget');
+      if (!insideDragHandle) return false;
+
+      const bookmarkPortal = blockComponent.closest(
+        '.edgeless-block-portal-bookmark'
+      );
+      assertExists(bookmarkPortal);
+      const dragPreviewEl = bookmarkPortal.cloneNode() as HTMLElement;
+      dragPreviewEl.style.transform = '';
+      render(
+        blockComponent.host.renderModel(blockComponent.model),
+        dragPreviewEl
+      );
+
+      startDragging([blockComponent], state, dragPreviewEl);
+      return true;
+    },
+    onDragEnd: props => {
+      const { state, draggingElements } = props;
+      if (
+        draggingElements.length !== 1 ||
+        !matchFlavours(draggingElements[0].model, [
+          BookmarkBlockSchema.model.flavour,
+        ])
+      )
+        return false;
+
+      const blockComponent = draggingElements[0] as BookmarkBlockComponent;
+      const isInSurface = blockComponent.isInSurface;
+      const target = captureEventTarget(state.raw.target);
+      const isTargetEdgelessContainer =
+        target?.classList.contains('edgeless') &&
+        target?.classList.contains('affine-block-children-container');
+
+      if (isInSurface) {
+        return convertDragPreviewEdgelessToDoc({
+          blockComponent,
+          ...props,
+        });
+      } else if (isTargetEdgelessContainer) {
+        return convertDragPreviewDocToEdgeless({
+          blockComponent,
+          cssSelector: 'bookmark-card',
+          width: EdgelessBookmarkWidth.horizontal,
+          height: EdgelessBookmarkHeight.horizontal,
+          ...props,
+        });
+      }
+
+      return false;
+    },
+  };
+
   override connectedCallback() {
     super.connectedCallback();
+
+    const parent = this.host.page.getParent(this.model);
+    this._isInSurface = parent?.flavour === 'affine:surface';
+
     if (!this.model.description) {
       refreshBookmarkUrlData(this);
     }
@@ -41,6 +149,10 @@ export class BookmarkBlockComponent extends BlockElement<BookmarkBlockModel> {
         }
       })
     );
+
+    this.disposables.add(
+      AffineDragHandleWidget.registerOption(this._dragHandleOption)
+    );
   }
 
   override updated(changedProperties: Map<string, unknown>) {
@@ -51,10 +163,7 @@ export class BookmarkBlockComponent extends BlockElement<BookmarkBlockModel> {
   }
 
   override render() {
-    const parent = this.host.page.getParent(this.model);
-    const isInSurface = parent?.flavour === 'affine:surface';
-
-    if (isInSurface) {
+    if (this.isInSurface) {
       return html`<affine-edgeless-bookmark
         .block=${this}
       ></affine-edgeless-bookmark>`;
diff --git a/packages/blocks/src/bookmark-block/doc-bookmark-block.ts b/packages/blocks/src/bookmark-block/doc-bookmark-block.ts
index a521379eee13..d0a869f9d101 100644
--- a/packages/blocks/src/bookmark-block/doc-bookmark-block.ts
+++ b/packages/blocks/src/bookmark-block/doc-bookmark-block.ts
@@ -6,10 +6,7 @@ import { ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { HoverController } from '../_common/components/hover/controller.js';
-import { AffineDragHandleWidget } from '../page-block/widgets/drag-handle/drag-handle.js';
-import { captureEventTarget } from '../page-block/widgets/drag-handle/utils.js';
 import type { BookmarkBlockComponent } from './bookmark-block.js';
-import { BookmarkBlockSchema } from './bookmark-model.js';
 import type { BookmarkCaption } from './components/bookmark-caption.js';
 import type {
   MenuActionCallback,
@@ -38,37 +35,12 @@ export class DocBookmarkBlockComponent extends WithDisposable(
 
   override connectedCallback() {
     super.connectedCallback();
-    this._registerDragHandleOption();
 
     this.disposables.add(
       this.root.selection.slots.changed.on(() => this.requestUpdate())
     );
   }
 
-  private _registerDragHandleOption = () => {
-    this._disposables.add(
-      AffineDragHandleWidget.registerOption({
-        flavour: BookmarkBlockSchema.model.flavour,
-        onDragStart: (state, startDragging) => {
-          // Check if start dragging from the image block
-          const target = captureEventTarget(state.raw.target);
-          const docBookmarkBlock = target?.closest('affine-doc-bookmark');
-          if (!docBookmarkBlock) return false;
-
-          // If start dragging from the bookmark element
-          // Set selection and take over dragStart event to start dragging
-          this.root.selection.set([
-            this.root.selection.getInstance('block', {
-              path: docBookmarkBlock.block.path,
-            }),
-          ]);
-          startDragging([docBookmarkBlock.block], state);
-          return true;
-        },
-      })
-    );
-  };
-
   private _optionsAbortController?: AbortController;
   private _onToolbarSelected: ToolbarActionCallback & MenuActionCallback =
     type => {
diff --git a/packages/blocks/src/database-block/database-block.ts b/packages/blocks/src/database-block/database-block.ts
index 12ea8a6d4db8..84e776c3198a 100644
--- a/packages/blocks/src/database-block/database-block.ts
+++ b/packages/blocks/src/database-block/database-block.ts
@@ -216,7 +216,7 @@ export class DatabaseBlockComponent extends BlockElement<DatabaseBlockModel> {
           }
           return false;
         },
-        onDragEnd: (state, draggingElements) => {
+        onDragEnd: ({ state, draggingElements }) => {
           const target = state.raw.target;
           const view = this.view;
           if (
diff --git a/packages/blocks/src/embed-github-block/embed-github-block.ts b/packages/blocks/src/embed-github-block/embed-github-block.ts
index dc3791d42ff4..76afa7c33645 100644
--- a/packages/blocks/src/embed-github-block/embed-github-block.ts
+++ b/packages/blocks/src/embed-github-block/embed-github-block.ts
@@ -1,27 +1,30 @@
 import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { EmbedBlockElement } from '../_common/embed-block-helper/index.js';
+import { EmbedBlockElement } from '../_common/embed-block-helper/embed-block-element.js';
 import type { EmbedGithubBlockModel } from './embed-github-model.js';
 
 @customElement('affine-embed-github-block')
 export class EmbedGithubBlock extends EmbedBlockElement<EmbedGithubBlockModel> {
   static override styles = css`
-    affine-embed-github-block {
+    .affine-embed-github-block {
       display: block;
       height: 100%;
       width: 100%;
       background: var(--affine-background-primary-color);
       border: 1px solid var(--affine-border-color);
       padding: 12px;
-      margin: 0;
+      margin-top: 12px;
     }
   `;
+
   override render(): unknown {
     return this.renderEmbed(() => {
       return html`
-        <h3>GitHub Card</h3>
-        <div>${this.model.owner}/${this.model.repo}</div>
+        <div class="affine-embed-github-block">
+          <h3>GitHub Card</h3>
+          <div>${this.model.owner}/${this.model.repo}</div>
+        </div>
       `;
     });
   }
diff --git a/packages/blocks/src/image-block/image/image-selected-rects.ts b/packages/blocks/src/image-block/components/image-selected-rects.ts
similarity index 100%
rename from packages/blocks/src/image-block/image/image-selected-rects.ts
rename to packages/blocks/src/image-block/components/image-selected-rects.ts
diff --git a/packages/blocks/src/image-block/doc-image-block.ts b/packages/blocks/src/image-block/doc-image-block.ts
new file mode 100644
index 000000000000..3f01c4aec99a
--- /dev/null
+++ b/packages/blocks/src/image-block/doc-image-block.ts
@@ -0,0 +1,391 @@
+import { PathFinder } from '@blocksuite/block-std';
+import { BlockElement } from '@blocksuite/lit';
+import { Text } from '@blocksuite/store';
+import { css, html, type PropertyValues } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import { stopPropagation } from '../_common/utils/index.js';
+import { asyncFocusRichText } from '../_common/utils/selection.js';
+import { ImageSelectedRectsContainer } from './components/image-selected-rects.js';
+import type { ImageBlockModel } from './image-model.js';
+import { ImageResizeManager } from './image-resize-manager.js';
+import { shouldResizeImage } from './utils.js';
+
+@customElement('affine-page-image')
+export class ImageBlockPageComponent extends BlockElement<ImageBlockModel> {
+  static override styles = css`
+    affine-image {
+      display: block;
+    }
+
+    .affine-embed-wrapper {
+      text-align: center;
+      margin-bottom: 18px;
+    }
+
+    .affine-embed-wrapper-caption {
+      width: 100%;
+      font-size: var(--affine-font-sm);
+      outline: none;
+      border: 0;
+      font-family: inherit;
+      text-align: center;
+      color: var(--affine-icon-color);
+      display: none;
+      background: transparent;
+    }
+
+    .affine-embed-wrapper-caption::placeholder {
+      color: var(--affine-placeholder-color);
+    }
+
+    .affine-embed-wrapper .caption-show {
+      display: inline-block;
+    }
+
+    .affine-image-wrapper {
+      padding: 8px;
+      width: 100%;
+      text-align: center;
+      line-height: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin-top: 18px;
+    }
+
+    .affine-image-wrapper img {
+      max-width: 100%;
+      margin: auto;
+      width: 100%;
+    }
+
+    .resizable-img {
+      position: relative;
+      border-radius: 8px;
+      cursor: pointer;
+    }
+
+    .resizable-img img {
+      width: 100%;
+    }
+  `;
+
+  @property()
+  source!: string;
+
+  @query('input')
+  _input!: HTMLInputElement;
+
+  @query('.resizable-img')
+  public readonly resizeImg?: HTMLElement;
+
+  @state()
+  private _caption!: string;
+
+  @state()
+  _focused = false;
+
+  private _isDragging = false;
+
+  override connectedCallback() {
+    super.connectedCallback();
+
+    this._bindKeymap();
+    this._handleSelection();
+
+    this._observeDrag();
+  }
+
+  override firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    this.updateComplete.then(() => {
+      this._caption = this.model?.caption ?? '';
+
+      if (this._caption.length > 0) {
+        // Caption input should be toggled manually.
+        // Otherwise it will be lost if the caption is deleted into empty state.
+        this._input.classList.add('caption-show');
+      }
+    });
+
+    // The embed block can not be focused,
+    // so the active element will be the last activated element.
+    // If the active element is the title textarea,
+    // any event will dispatch from it and be ignored. (Most events will ignore title)
+    // so we need to blur it.
+    // See also https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement
+    this.addEventListener('click', () => {
+      if (
+        document.activeElement &&
+        document.activeElement instanceof HTMLElement
+      ) {
+        document.activeElement.blur();
+      }
+    });
+  }
+
+  private _onInputChange() {
+    this._caption = this._input.value;
+    this.model.page.updateBlock(this.model, { caption: this._caption });
+  }
+
+  private _onInputBlur() {
+    if (!this._caption) {
+      this._input.classList.remove('caption-show');
+    }
+  }
+
+  private _observeDrag() {
+    const embedResizeManager = new ImageResizeManager();
+
+    this._disposables.add(
+      this.host.event.add('dragStart', ctx => {
+        const pointerState = ctx.get('pointerState');
+        const target = pointerState.event.target;
+        if (shouldResizeImage(this, target)) {
+          this._isDragging = true;
+          embedResizeManager.onStart(pointerState);
+          return true;
+        }
+        return false;
+      })
+    );
+
+    this._disposables.add(
+      this.host.event.add('dragMove', ctx => {
+        const pointerState = ctx.get('pointerState');
+        if (this._isDragging) {
+          embedResizeManager.onMove(pointerState);
+          return true;
+        }
+        return false;
+      })
+    );
+
+    this._disposables.add(
+      this.host.event.add('dragEnd', () => {
+        if (this._isDragging) {
+          this._isDragging = false;
+          embedResizeManager.onEnd();
+          return true;
+        }
+        return false;
+      })
+    );
+  }
+
+  private _handleSelection() {
+    const selection = this.host.selection;
+    this._disposables.add(
+      selection.slots.changed.on(selList => {
+        const curr = selList.find(
+          sel => PathFinder.equals(sel.path, this.path) && sel.is('image')
+        );
+
+        this._focused = !!curr;
+      })
+    );
+
+    this.handleEvent('click', () => {
+      selection.update(selList => {
+        return selList
+          .filter(sel => {
+            return !['text', 'block', 'image'].includes(sel.type);
+          })
+          .concat(selection.getInstance('image', { path: this.path }));
+      });
+      return true;
+    });
+
+    this.handleEvent(
+      'click',
+      () => {
+        if (!this._focused) return;
+
+        selection.update(selList => {
+          return selList.filter(sel => {
+            const current =
+              sel.is('image') && PathFinder.equals(sel.path, this.path);
+            return !current;
+          });
+        });
+      },
+      {
+        global: true,
+      }
+    );
+  }
+
+  private _bindKeymap() {
+    const selection = this.host.selection;
+    const addParagraph = () => {
+      const parent = this.page.getParent(this.model);
+      if (!parent) return;
+      const index = parent.children.indexOf(this.model);
+      const blockId = this.page.addBlock(
+        'affine:paragraph',
+        {},
+        parent,
+        index + 1
+      );
+      requestAnimationFrame(() => {
+        selection.update(selList => {
+          return selList
+            .filter(sel => !sel.is('image'))
+            .concat(
+              selection.getInstance('text', {
+                from: {
+                  path: this.parentPath.concat(blockId),
+                  index: 0,
+                  length: 0,
+                },
+                to: null,
+              })
+            );
+        });
+      });
+    };
+
+    this.bindHotKey({
+      Escape: () => {
+        selection.update(selList => {
+          return selList.map(sel => {
+            const current =
+              sel.is('image') && PathFinder.equals(sel.path, this.path);
+            if (current) {
+              return selection.getInstance('block', { path: this.path });
+            }
+            return sel;
+          });
+        });
+        return true;
+      },
+      Delete: () => {
+        if (!this._focused) return;
+        addParagraph();
+        this.page.deleteBlock(this.model);
+        return true;
+      },
+      Backspace: () => {
+        if (!this._focused) return;
+        addParagraph();
+        this.page.deleteBlock(this.model);
+        return true;
+      },
+      Enter: () => {
+        if (!this._focused) return;
+        addParagraph();
+        return true;
+      },
+    });
+  }
+
+  private _imageResizeBoardTemplate() {
+    const isFocused = this._focused;
+    if (!isFocused) return null;
+
+    const readonly = this.model.page.readonly;
+    return ImageSelectedRectsContainer(readonly);
+  }
+
+  private _normalizeImageSize() {
+    // If is dragging, we should use the real size of the image
+    if (this._isDragging && this.resizeImg) {
+      return {
+        width: this.resizeImg.style.width,
+        height: this.resizeImg.style.height,
+      };
+    }
+
+    const { width, height } = this.model;
+    if (!width || !height || width === 0 || height === 0) {
+      return {
+        width: 'unset',
+        height: 'unset',
+      };
+    }
+    return {
+      width: `${width}px`,
+      height: `${height}px`,
+    };
+  }
+
+  private _onCaptionKeydown(e: KeyboardEvent) {
+    if (e.isComposing) return;
+    if (e.key === 'Enter') {
+      e.stopPropagation();
+      const model = this.model;
+      const page = model.page;
+      const target = e.target as HTMLInputElement;
+      const start = target.selectionStart;
+      if (start === null) return;
+
+      const value = target.value;
+      const caption = (this._caption = value.slice(0, start));
+      target.value = caption;
+      page.updateBlock(model, { caption });
+
+      const nextBlockText = value.slice(start);
+      const parent = page.getParent(model);
+      if (!parent) return;
+      const index = parent.children.indexOf(model);
+      const id = page.addBlock(
+        'affine:paragraph',
+        { text: new Text(nextBlockText) },
+        parent,
+        index + 1
+      );
+      asyncFocusRichText(model.page, id);
+    }
+  }
+
+  override render() {
+    const resizeImgStyle = this._normalizeImageSize();
+
+    return html`
+      <div style="position: relative;">
+        <div class="affine-image-wrapper">
+          <div class="resizable-img" style=${styleMap(resizeImgStyle)}>
+            <img src=${this.source} draggable="false" />
+            ${this._imageResizeBoardTemplate()}
+          </div>
+        </div>
+        ${this.selected?.is('block')
+          ? html`<affine-block-selection></affine-block-selection>`
+          : null}
+      </div>
+
+      <div class="affine-embed-block-container">
+        <div class="affine-embed-wrapper">
+          <input
+            .disabled=${this.model.page.readonly}
+            placeholder="Write a caption"
+            class="affine-embed-wrapper-caption"
+            value=${this._caption}
+            @input=${this._onInputChange}
+            @blur=${this._onInputBlur}
+            @click=${stopPropagation}
+            @keydown=${this._onCaptionKeydown}
+            @keyup=${stopPropagation}
+            @pointerdown=${stopPropagation}
+            @pointerup=${stopPropagation}
+            @pointermove=${stopPropagation}
+            @paste=${stopPropagation}
+            @cut=${stopPropagation}
+            @copy=${stopPropagation}
+          />
+        </div>
+      </div>
+      ${Object.values(this.widgets)}
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-page-image': ImageBlockPageComponent;
+  }
+}
diff --git a/packages/blocks/src/image-block/edgeless-image-block.ts b/packages/blocks/src/image-block/edgeless-image-block.ts
new file mode 100644
index 000000000000..f04c985a6f19
--- /dev/null
+++ b/packages/blocks/src/image-block/edgeless-image-block.ts
@@ -0,0 +1,41 @@
+import { BlockElement } from '@blocksuite/lit';
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import { Bound } from '../surface-block/index.js';
+import type { ImageBlockModel } from './image-model.js';
+
+@customElement('affine-edgeless-image')
+export class ImageBlockEdgelessComponent extends BlockElement<ImageBlockModel> {
+  @property()
+  source!: string;
+
+  get surface() {
+    return this.closest('affine-edgeless-page')?.surface;
+  }
+
+  override render() {
+    const bound = Bound.deserialize(
+      ((this.surface?.pickById(this.model.id) as ImageBlockModel) ?? this.model)
+        .xywh
+    );
+
+    return html`<img
+      style=${styleMap({
+        transform: `rotate(${this.model.rotate}deg)`,
+        transformOrigin: 'center',
+      })}
+      src=${this.source}
+      draggable="false"
+      width="${bound.w}px"
+      height="${bound.h}px"
+    />`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-edgeless-image': ImageBlockEdgelessComponent;
+  }
+}
diff --git a/packages/blocks/src/image-block/image-block.ts b/packages/blocks/src/image-block/image-block.ts
index 56ff7aedaa52..36577a4d9ef3 100644
--- a/packages/blocks/src/image-block/image-block.ts
+++ b/packages/blocks/src/image-block/image-block.ts
@@ -1,21 +1,25 @@
-import { PathFinder } from '@blocksuite/block-std';
+import './doc-image-block.js';
+import './edgeless-image-block.js';
+import './components/image-card.js';
+
 import { BlockElement } from '@blocksuite/lit';
-import { Text } from '@blocksuite/store';
-import { css, html, type PropertyValues } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { html, render } from 'lit';
+import { customElement, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { styleMap } from 'lit/directives/style-map.js';
 
-import { stopPropagation } from '../_common/utils/event.js';
-import { asyncFocusRichText } from '../_common/utils/selection.js';
+import { matchFlavours } from '../_common/utils/index.js';
+import type { DragHandleOption } from '../page-block/widgets/drag-handle/config.js';
 import { AffineDragHandleWidget } from '../page-block/widgets/drag-handle/drag-handle.js';
-import { captureEventTarget } from '../page-block/widgets/drag-handle/utils.js';
-import { Bound } from '../surface-block/index.js';
+import {
+  captureEventTarget,
+  convertDragPreviewDocToEdgeless,
+  convertDragPreviewEdgelessToDoc,
+} from '../page-block/widgets/drag-handle/utils.js';
 import { ImageState } from './components/image-card.js';
-import { ImageResizeManager } from './image/image-resize-manager.js';
-import { ImageSelectedRectsContainer } from './image/image-selected-rects.js';
-import { isImageLoading, shouldResizeImage } from './image/utils.js';
+import type { ImageBlockPageComponent } from './doc-image-block.js';
+import type { ImageBlockEdgelessComponent } from './edgeless-image-block.js';
 import { type ImageBlockModel, ImageBlockSchema } from './image-model.js';
+import { isImageLoading } from './utils.js';
 
 const MAX_RETRY_COUNT = 3;
 
@@ -37,6 +41,10 @@ export class ImageBlockComponent extends BlockElement<ImageBlockModel> {
 
   blob?: Blob;
 
+  get isInSurface() {
+    return this._isInSurface;
+  }
+
   get resizeImg() {
     return this._pageImage.resizeImg;
   }
@@ -100,9 +108,94 @@ export class ImageBlockComponent extends BlockElement<ImageBlockModel> {
     ]);
   }
 
+  private _dragHandleOption: DragHandleOption = {
+    flavour: ImageBlockSchema.model.flavour,
+    edgeless: true,
+    onDragStart: ({ state, startDragging, anchorBlockPath }) => {
+      const element = captureEventTarget(state.raw.target);
+      if (element?.classList.contains('resize')) return false;
+
+      if (!anchorBlockPath) return false;
+      const anchorComponent = this.std.view.viewFromPath(
+        'block',
+        anchorBlockPath
+      );
+      if (
+        !anchorComponent ||
+        !matchFlavours(anchorComponent.model, [ImageBlockSchema.model.flavour])
+      )
+        return false;
+
+      const blockComponent = anchorComponent as ImageBlockComponent;
+      const isInSurface = blockComponent.isInSurface;
+      if (!isInSurface) {
+        this.std.selection.setGroup('block', [
+          this.std.selection.getInstance('block', {
+            path: blockComponent.path,
+          }),
+        ]);
+        startDragging([blockComponent], state);
+        return true;
+      }
+
+      const insideDragHandle = !!element?.closest('affine-drag-handle-widget');
+      if (!insideDragHandle) return false;
+
+      const edgelessPage = blockComponent.closest('affine-edgeless-page');
+      const scale = edgelessPage ? edgelessPage.surface.viewport.zoom : 1;
+      const width = blockComponent.getBoundingClientRect().width;
+
+      const dragPreviewEl = document.createElement('div');
+      dragPreviewEl.classList.add('affine-block-element');
+      dragPreviewEl.style.border = '2px solid var(--affine-border-color)';
+      dragPreviewEl.style.borderRadius = '4px';
+      dragPreviewEl.style.overflow = 'hidden';
+      dragPreviewEl.style.width = `${width / scale}px`;
+      render(blockComponent.renderModel(blockComponent.model), dragPreviewEl);
+
+      startDragging([blockComponent], state, dragPreviewEl);
+      return true;
+    },
+    onDragEnd: props => {
+      const { state, draggingElements } = props;
+      if (
+        draggingElements.length !== 1 ||
+        !matchFlavours(draggingElements[0].model, [
+          ImageBlockSchema.model.flavour,
+        ])
+      )
+        return false;
+
+      const blockComponent = draggingElements[0] as ImageBlockComponent;
+      const isInSurface = blockComponent.isInSurface;
+      const target = captureEventTarget(state.raw.target);
+      const isTargetEdgelessContainer =
+        target?.classList.contains('edgeless') &&
+        target?.classList.contains('affine-block-children-container');
+
+      if (isInSurface) {
+        return convertDragPreviewEdgelessToDoc({
+          blockComponent,
+          ...props,
+        });
+      } else if (isTargetEdgelessContainer) {
+        return convertDragPreviewDocToEdgeless({
+          blockComponent,
+          cssSelector: 'img',
+          ...props,
+        });
+      }
+      return false;
+    },
+  };
+
   override connectedCallback() {
     super.connectedCallback();
 
+    this.disposables.add(
+      AffineDragHandleWidget.registerOption(this._dragHandleOption)
+    );
+
     const parent = this.host.page.getParent(this.model);
     this._isInSurface = parent?.flavour === 'affine:surface';
 
@@ -134,13 +227,13 @@ export class ImageBlockComponent extends BlockElement<ImageBlockModel> {
     if (imageState !== ImageState.Ready) {
       return html`<affine-image-block-card
         imageState=${imageState}
-        ?isinsurface=${this._isInSurface}
+        ?isinsurface=${this.isInSurface}
         imageSize=${ifDefined(this.model.size)}
         @click=${this._onCardClick}
       ></affine-image-block-card>`;
     }
 
-    if (this._isInSurface) {
+    if (this.isInSurface) {
       return html`<affine-edgeless-image
         .model=${this.model}
         .page=${this.page}
@@ -160,439 +253,8 @@ export class ImageBlockComponent extends BlockElement<ImageBlockModel> {
   }
 }
 
-@customElement('affine-edgeless-image')
-class ImageBlockEdgelessComponent extends BlockElement<ImageBlockModel> {
-  @property()
-  source!: string;
-
-  get surface() {
-    return this.closest('affine-edgeless-page')?.surface;
-  }
-
-  override render() {
-    const bound = Bound.deserialize(
-      ((this.surface?.pickById(this.model.id) as ImageBlockModel) ?? this.model)
-        .xywh
-    );
-
-    return html`<img
-      style=${styleMap({
-        transform: `rotate(${this.model.rotate}deg)`,
-        transformOrigin: 'center',
-      })}
-      src=${this.source}
-      draggable="false"
-      width="${bound.w}px"
-      height="${bound.h}px"
-    />`;
-  }
-}
-
-@customElement('affine-page-image')
-export class ImageBlockPageComponent extends BlockElement<ImageBlockModel> {
-  static override styles = css`
-    affine-image {
-      display: block;
-    }
-
-    .affine-embed-wrapper {
-      text-align: center;
-      margin-bottom: 18px;
-    }
-
-    .affine-embed-wrapper-caption {
-      width: 100%;
-      font-size: var(--affine-font-sm);
-      outline: none;
-      border: 0;
-      font-family: inherit;
-      text-align: center;
-      color: var(--affine-icon-color);
-      display: none;
-      background: transparent;
-    }
-
-    .affine-embed-wrapper-caption::placeholder {
-      color: var(--affine-placeholder-color);
-    }
-
-    .affine-embed-wrapper .caption-show {
-      display: inline-block;
-    }
-
-    .affine-image-wrapper {
-      padding: 8px;
-      width: 100%;
-      text-align: center;
-      line-height: 0;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      margin-top: 18px;
-    }
-
-    .affine-image-wrapper img {
-      max-width: 100%;
-      margin: auto;
-      width: 100%;
-    }
-
-    .resizable-img {
-      position: relative;
-      border-radius: 8px;
-      cursor: pointer;
-    }
-
-    .resizable-img img {
-      width: 100%;
-    }
-  `;
-
-  @property()
-  source!: string;
-
-  @query('input')
-  _input!: HTMLInputElement;
-
-  @query('.resizable-img')
-  public readonly resizeImg?: HTMLElement;
-
-  @state()
-  private _caption!: string;
-
-  @state()
-  _focused = false;
-
-  private _isDragging = false;
-
-  override connectedCallback() {
-    super.connectedCallback();
-
-    this._bindKeymap();
-    this._handleSelection();
-
-    this._observeDrag();
-    this._registerDragHandleOption();
-  }
-
-  override firstUpdated(changedProperties: PropertyValues) {
-    super.firstUpdated(changedProperties);
-    this.updateComplete.then(() => {
-      this._caption = this.model?.caption ?? '';
-
-      if (this._caption.length > 0) {
-        // Caption input should be toggled manually.
-        // Otherwise it will be lost if the caption is deleted into empty state.
-        this._input.classList.add('caption-show');
-      }
-    });
-
-    // The embed block can not be focused,
-    // so the active element will be the last activated element.
-    // If the active element is the title textarea,
-    // any event will dispatch from it and be ignored. (Most events will ignore title)
-    // so we need to blur it.
-    // See also https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement
-    this.addEventListener('click', () => {
-      if (
-        document.activeElement &&
-        document.activeElement instanceof HTMLElement
-      ) {
-        document.activeElement.blur();
-      }
-    });
-  }
-
-  private _registerDragHandleOption = () => {
-    this._disposables.add(
-      AffineDragHandleWidget.registerOption({
-        flavour: ImageBlockSchema.model.flavour,
-        onDragStart: (state, startDragging) => {
-          // Check if start dragging from the image block
-          const target = captureEventTarget(state.raw.target);
-          const insideImageBlock = target?.closest('.resizable-img');
-          if (!insideImageBlock) return false;
-
-          // If start dragging from the image element
-          // Set selection and take over dragStart event to start dragging
-          const imageBlock = target?.closest('affine-image');
-          if (!imageBlock || shouldResizeImage(imageBlock, target))
-            return false;
-
-          this.host.selection.set([
-            this.host.selection.getInstance('block', {
-              path: imageBlock.path,
-            }),
-          ]);
-          startDragging([imageBlock], state);
-          return true;
-        },
-      })
-    );
-  };
-
-  private _onInputChange() {
-    this._caption = this._input.value;
-    this.model.page.updateBlock(this.model, { caption: this._caption });
-  }
-
-  private _onInputBlur() {
-    if (!this._caption) {
-      this._input.classList.remove('caption-show');
-    }
-  }
-
-  private _observeDrag() {
-    const embedResizeManager = new ImageResizeManager();
-
-    this._disposables.add(
-      this.host.event.add('dragStart', ctx => {
-        const pointerState = ctx.get('pointerState');
-        const target = pointerState.event.target;
-        if (shouldResizeImage(this, target)) {
-          this._isDragging = true;
-          embedResizeManager.onStart(pointerState);
-          return true;
-        }
-        return false;
-      })
-    );
-
-    this._disposables.add(
-      this.host.event.add('dragMove', ctx => {
-        const pointerState = ctx.get('pointerState');
-        if (this._isDragging) {
-          embedResizeManager.onMove(pointerState);
-          return true;
-        }
-        return false;
-      })
-    );
-
-    this._disposables.add(
-      this.host.event.add('dragEnd', () => {
-        if (this._isDragging) {
-          this._isDragging = false;
-          embedResizeManager.onEnd();
-          return true;
-        }
-        return false;
-      })
-    );
-  }
-
-  private _handleSelection() {
-    const selection = this.host.selection;
-    this._disposables.add(
-      selection.slots.changed.on(selList => {
-        const curr = selList.find(
-          sel => PathFinder.equals(sel.path, this.path) && sel.is('image')
-        );
-
-        this._focused = !!curr;
-      })
-    );
-
-    this.handleEvent('click', () => {
-      selection.update(selList => {
-        return selList
-          .filter(sel => {
-            return !['text', 'block', 'image'].includes(sel.type);
-          })
-          .concat(selection.getInstance('image', { path: this.path }));
-      });
-      return true;
-    });
-
-    this.handleEvent(
-      'click',
-      () => {
-        if (!this._focused) return;
-
-        selection.update(selList => {
-          return selList.filter(sel => {
-            const current =
-              sel.is('image') && PathFinder.equals(sel.path, this.path);
-            return !current;
-          });
-        });
-      },
-      {
-        global: true,
-      }
-    );
-  }
-
-  private _bindKeymap() {
-    const selection = this.host.selection;
-    const addParagraph = () => {
-      const parent = this.page.getParent(this.model);
-      if (!parent) return;
-      const index = parent.children.indexOf(this.model);
-      const blockId = this.page.addBlock(
-        'affine:paragraph',
-        {},
-        parent,
-        index + 1
-      );
-      requestAnimationFrame(() => {
-        selection.update(selList => {
-          return selList
-            .filter(sel => !sel.is('image'))
-            .concat(
-              selection.getInstance('text', {
-                from: {
-                  path: this.parentPath.concat(blockId),
-                  index: 0,
-                  length: 0,
-                },
-                to: null,
-              })
-            );
-        });
-      });
-    };
-
-    this.bindHotKey({
-      Escape: () => {
-        selection.update(selList => {
-          return selList.map(sel => {
-            const current =
-              sel.is('image') && PathFinder.equals(sel.path, this.path);
-            if (current) {
-              return selection.getInstance('block', { path: this.path });
-            }
-            return sel;
-          });
-        });
-        return true;
-      },
-      Delete: () => {
-        if (!this._focused) return;
-        addParagraph();
-        this.page.deleteBlock(this.model);
-        return true;
-      },
-      Backspace: () => {
-        if (!this._focused) return;
-        addParagraph();
-        this.page.deleteBlock(this.model);
-        return true;
-      },
-      Enter: () => {
-        if (!this._focused) return;
-        addParagraph();
-        return true;
-      },
-    });
-  }
-
-  private _imageResizeBoardTemplate() {
-    const isFocused = this._focused;
-    if (!isFocused) return null;
-
-    const readonly = this.model.page.readonly;
-    return ImageSelectedRectsContainer(readonly);
-  }
-
-  private _normalizeImageSize() {
-    // If is dragging, we should use the real size of the image
-    if (this._isDragging && this.resizeImg) {
-      return {
-        width: this.resizeImg.style.width,
-        height: this.resizeImg.style.height,
-      };
-    }
-
-    const { width, height } = this.model;
-    if (!width || !height || width === 0 || height === 0) {
-      return {
-        width: 'unset',
-        height: 'unset',
-      };
-    }
-    return {
-      width: `${width}px`,
-      height: `${height}px`,
-    };
-  }
-
-  private _onCaptionKeydown(e: KeyboardEvent) {
-    if (e.isComposing) return;
-    if (e.key === 'Enter') {
-      e.stopPropagation();
-      const model = this.model;
-      const page = model.page;
-      const target = e.target as HTMLInputElement;
-      const start = target.selectionStart;
-      if (start === null) return;
-
-      const value = target.value;
-      const caption = (this._caption = value.slice(0, start));
-      target.value = caption;
-      page.updateBlock(model, { caption });
-
-      const nextBlockText = value.slice(start);
-      const parent = page.getParent(model);
-      if (!parent) return;
-      const index = parent.children.indexOf(model);
-      const id = page.addBlock(
-        'affine:paragraph',
-        { text: new Text(nextBlockText) },
-        parent,
-        index + 1
-      );
-      asyncFocusRichText(model.page, id);
-    }
-  }
-
-  override render() {
-    const resizeImgStyle = this._normalizeImageSize();
-
-    return html`
-      <div style="position: relative;">
-        <div class="affine-image-wrapper">
-          <div class="resizable-img" style=${styleMap(resizeImgStyle)}>
-            <img src=${this.source} draggable="false" />
-            ${this._imageResizeBoardTemplate()}
-          </div>
-        </div>
-        ${this.selected?.is('block')
-          ? html`<affine-block-selection></affine-block-selection>`
-          : null}
-      </div>
-
-      <div class="affine-embed-block-container">
-        <div class="affine-embed-wrapper">
-          <input
-            .disabled=${this.model.page.readonly}
-            placeholder="Write a caption"
-            class="affine-embed-wrapper-caption"
-            value=${this._caption}
-            @input=${this._onInputChange}
-            @blur=${this._onInputBlur}
-            @click=${stopPropagation}
-            @keydown=${this._onCaptionKeydown}
-            @keyup=${stopPropagation}
-            @pointerdown=${stopPropagation}
-            @pointerup=${stopPropagation}
-            @pointermove=${stopPropagation}
-            @paste=${stopPropagation}
-            @cut=${stopPropagation}
-            @copy=${stopPropagation}
-          />
-        </div>
-      </div>
-      ${Object.values(this.widgets)}
-    `;
-  }
-}
-
 declare global {
   interface HTMLElementTagNameMap {
     'affine-image': ImageBlockComponent;
-    'affine-page-image': ImageBlockPageComponent;
-    'affine-edgeless-image': ImageBlockEdgelessComponent;
   }
 }
diff --git a/packages/blocks/src/image-block/image/image-resize-manager.ts b/packages/blocks/src/image-block/image-resize-manager.ts
similarity index 95%
rename from packages/blocks/src/image-block/image/image-resize-manager.ts
rename to packages/blocks/src/image-block/image-resize-manager.ts
index 6ae22fb8ad4d..ebc58b0bb27c 100644
--- a/packages/blocks/src/image-block/image/image-resize-manager.ts
+++ b/packages/blocks/src/image-block/image-resize-manager.ts
@@ -6,8 +6,8 @@ import {
   getClosestBlockElementByElement,
   getModelByElement,
   isEdgelessPage,
-} from '../../_common/utils/query.js';
-import { getClosestPageBlockComponent } from '../../page-block/utils/query.js';
+} from '../_common/utils/query.js';
+import { getClosestPageBlockComponent } from '../page-block/utils/query.js';
 
 export class ImageResizeManager {
   private _activeComponent: BlockComponent | null = null;
diff --git a/packages/blocks/src/image-block/image-service.ts b/packages/blocks/src/image-block/image-service.ts
index f4219337eee8..f82712c8ef36 100644
--- a/packages/blocks/src/image-block/image-service.ts
+++ b/packages/blocks/src/image-block/image-service.ts
@@ -5,14 +5,12 @@ import {
   FileDropManager,
   type FileDropOptions,
 } from '../_common/components/file-drop-manager.js';
-import { toast } from '../_common/components/toast.js';
 import { isPageMode, matchFlavours } from '../_common/utils/index.js';
-import { humanFileSize } from '../_common/utils/math.js';
 import type { DocPageBlockComponent } from '../page-block/doc/doc-page-block.js';
 import type { EdgelessPageBlockComponent } from '../page-block/edgeless/edgeless-page-block.js';
-import { addSiblingImageBlock } from './image/utils.js';
 import type { ImageBlockModel } from './image-model.js';
 import { ImageSelection } from './image-selection.js';
+import { addSiblingImageBlock } from './utils.js';
 
 export class ImageService extends BlockService<ImageBlockModel> {
   get pageBlockComponent(): DocPageBlockComponent | EdgelessPageBlockComponent {
@@ -31,28 +29,11 @@ export class ImageService extends BlockService<ImageBlockModel> {
 
   private _fileDropOptions: FileDropOptions = {
     flavour: this.flavour,
-    maxFileSize: this.maxFileSize,
     onDrop: async ({ files, targetModel, place, point }) => {
       const imageFiles = files.filter(file => file.type.startsWith('image/'));
 
-      const isSizeExceeded = imageFiles.some(
-        file => file.size > this.maxFileSize
-      );
-      if (isSizeExceeded) {
-        toast(
-          `You can only upload files less than ${humanFileSize(
-            this.maxFileSize,
-            true,
-            0
-          )}`
-        );
-        return true;
-      }
-
       if (targetModel && !matchFlavours(targetModel, ['affine:surface'])) {
-        imageFiles.forEach(file =>
-          addSiblingImageBlock(this.page, file, targetModel, place)
-        );
+        addSiblingImageBlock(imageFiles, this.maxFileSize, targetModel, place);
       } else if (!isPageMode(this.page)) {
         const edgelessPage = this
           .pageBlockComponent as EdgelessPageBlockComponent;
diff --git a/packages/blocks/src/image-block/image/utils.ts b/packages/blocks/src/image-block/utils.ts
similarity index 73%
rename from packages/blocks/src/image-block/image/utils.ts
rename to packages/blocks/src/image-block/utils.ts
index f4dc04f38aa4..f6b5b463aac4 100644
--- a/packages/blocks/src/image-block/image/utils.ts
+++ b/packages/blocks/src/image-block/utils.ts
@@ -2,10 +2,11 @@ import { assertExists } from '@blocksuite/global/utils';
 import type { BaseBlockModel, Page } from '@blocksuite/store';
 import { Buffer } from 'buffer';
 
-import { toast } from '../../_common/components/toast.js';
-import { downloadBlob } from '../../_common/utils/filesys.js';
-import { getBlockComponentByModel } from '../../_common/utils/query.js';
-import { ImageBlockModel, type ImageBlockProps } from '../image-model.js';
+import { humanFileSize } from '../_common/utils/math.js';
+import { toast } from './../_common/components/toast.js';
+import { downloadBlob } from './../_common/utils/filesys.js';
+import { getBlockComponentByModel } from './../_common/utils/query.js';
+import { ImageBlockModel, type ImageBlockProps } from './image-model.js';
 
 async function getImageBlob(model: ImageBlockModel) {
   const blob = await getBlobByModel(model);
@@ -179,18 +180,70 @@ export function isImageLoading(blockId: string) {
 }
 
 export function addSiblingImageBlock(
-  page: Page,
-  file: File,
+  files: File[],
+  maxFileSize: number,
   targetModel: BaseBlockModel,
   place: 'after' | 'before' = 'after'
 ) {
-  const imageBlockProps: Partial<ImageBlockProps> & {
-    flavour: 'affine:image';
-  } = {
+  const imageFiles = files.filter(file => file.type.startsWith('image/'));
+  const isSizeExceeded = imageFiles.some(file => file.size > maxFileSize);
+  if (isSizeExceeded) {
+    toast(
+      `You can only upload files less than ${humanFileSize(
+        maxFileSize,
+        true,
+        0
+      )}`
+    );
+    return [];
+  }
+
+  const imageBlockProps: Partial<ImageBlockProps> &
+    {
+      flavour: 'affine:image';
+    }[] = imageFiles.map(file => ({
     flavour: 'affine:image',
     size: file.size,
-  };
+  }));
+
+  const page = targetModel.page;
+  const blockIds = page.addSiblingBlocks(targetModel, imageBlockProps, place);
+  blockIds.map((blockId, index) =>
+    uploadBlobForImage(page, blockId, imageFiles[index])
+  );
+  return blockIds;
+}
 
-  const blockId = page.addSiblingBlocks(targetModel, [imageBlockProps], place);
-  return uploadBlobForImage(page, blockId[0], file);
+export function addImageBlock(
+  files: File[],
+  maxFileSize: number,
+  page: Page,
+  parent?: BaseBlockModel | string | null,
+  parentIndex?: number
+): string[] {
+  const imageFiles = files.filter(file => file.type.startsWith('image/'));
+  const isSizeExceeded = imageFiles.some(file => file.size > maxFileSize);
+  if (isSizeExceeded) {
+    toast(
+      `You can only upload files less than ${humanFileSize(
+        maxFileSize,
+        true,
+        0
+      )}`
+    );
+    return [];
+  }
+
+  const blockIds: string[] = imageFiles.map(file =>
+    page.addBlock(
+      'affine:image',
+      { flavour: 'affine:image', size: file.size },
+      parent,
+      parentIndex
+    )
+  );
+  blockIds.map((blockId, index) =>
+    uploadBlobForImage(page, blockId, imageFiles[index])
+  );
+  return blockIds;
 }
diff --git a/packages/blocks/src/note-block/note-block.ts b/packages/blocks/src/note-block/note-block.ts
index 59dca74814bd..93d2f7dfba6e 100644
--- a/packages/blocks/src/note-block/note-block.ts
+++ b/packages/blocks/src/note-block/note-block.ts
@@ -1,10 +1,15 @@
 /// <reference types="vite/client" />
+import { assertExists } from '@blocksuite/global/utils';
 import { BlockElement } from '@blocksuite/lit';
-import { css, html } from 'lit';
+import { css, html, render } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
+import { matchFlavours } from '../_common/utils/index.js';
+import type { DragHandleOption } from '../page-block/widgets/drag-handle/config.js';
+import { AffineDragHandleWidget } from '../page-block/widgets/drag-handle/drag-handle.js';
+import { captureEventTarget } from '../page-block/widgets/drag-handle/utils.js';
 import { KeymapController } from './keymap-controller.js';
-import type { NoteBlockModel } from './note-model.js';
+import { type NoteBlockModel, NoteBlockSchema } from './note-model.js';
 
 @customElement('affine-note')
 export class NoteBlockComponent extends BlockElement<NoteBlockModel> {
@@ -20,9 +25,82 @@ export class NoteBlockComponent extends BlockElement<NoteBlockModel> {
 
   keymapController = new KeymapController(this);
 
+  private _dragHandleOption: DragHandleOption = {
+    flavour: NoteBlockSchema.model.flavour,
+    edgeless: true,
+    onDragStart: ({ state, startDragging, anchorBlockPath }) => {
+      if (!anchorBlockPath) return false;
+
+      const element = captureEventTarget(state.raw.target);
+      const insideDragHandle = !!element?.closest('affine-drag-handle-widget');
+      if (!insideDragHandle) return false;
+
+      const anchorComponent = this.std.view.viewFromPath(
+        'block',
+        anchorBlockPath
+      );
+      if (
+        !anchorComponent ||
+        !matchFlavours(anchorComponent.model, [NoteBlockSchema.model.flavour])
+      )
+        return false;
+
+      const noteComponent = anchorComponent as NoteBlockComponent;
+
+      const notePortal = noteComponent.closest('.edgeless-block-portal-note');
+      assertExists(notePortal);
+      const dragPreviewEl = notePortal.cloneNode() as HTMLElement;
+      dragPreviewEl.style.transform = '';
+      const noteBackground = notePortal.querySelector('.note-background');
+      assertExists(noteBackground);
+      const noteBackgroundClone = noteBackground.cloneNode();
+      dragPreviewEl.appendChild(noteBackgroundClone);
+      const container = document.createElement('div');
+      container.style.width = '100%';
+      container.style.height = '100%';
+      container.style.overflow = 'hidden';
+      dragPreviewEl.appendChild(container);
+      render(noteComponent.host.renderModel(noteComponent.model), container);
+
+      startDragging([noteComponent], state, dragPreviewEl);
+      return true;
+    },
+    onDragEnd: ({ draggingElements, dropBlockId, dropType }) => {
+      if (
+        draggingElements.length !== 1 ||
+        !matchFlavours(draggingElements[0].model, [
+          NoteBlockSchema.model.flavour,
+        ])
+      ) {
+        return false;
+      }
+      if (dropType === 'in') return true;
+
+      const noteBlock = draggingElements[0].model as NoteBlockModel;
+      const targetBlock = this.page.getBlockById(dropBlockId);
+      const parentBlock = this.page.getParent(dropBlockId);
+      if (!targetBlock || !parentBlock) return true;
+
+      this.page.moveBlocks(
+        noteBlock.children,
+        parentBlock,
+        targetBlock,
+        dropType === 'before'
+      );
+      this.page.deleteBlock(noteBlock);
+
+      return true;
+    },
+  };
+
   override connectedCallback() {
     super.connectedCallback();
+
     this.keymapController.bind();
+
+    this.disposables.add(
+      AffineDragHandleWidget.registerOption(this._dragHandleOption)
+    );
   }
 
   override render() {
diff --git a/packages/blocks/src/page-block/edgeless/components/block-portal/bookmark/edgeless-bookmark.ts b/packages/blocks/src/page-block/edgeless/components/block-portal/bookmark/edgeless-bookmark.ts
index 03c7ccef7c12..7c059be209fb 100644
--- a/packages/blocks/src/page-block/edgeless/components/block-portal/bookmark/edgeless-bookmark.ts
+++ b/packages/blocks/src/page-block/edgeless/components/block-portal/bookmark/edgeless-bookmark.ts
@@ -24,7 +24,9 @@ export class EdgelessBlockPortalBookmark extends EdgelessPortalBase<BookmarkBloc
     };
 
     return html`
-      <div style=${styleMap(style)}>${this.renderModel(model)}</div>
+      <div class="edgeless-block-portal-bookmark" style=${styleMap(style)}>
+        ${this.renderModel(model)}
+      </div>
     `;
   }
 }
diff --git a/packages/blocks/src/page-block/edgeless/components/block-portal/embed/edgeless-embed.ts b/packages/blocks/src/page-block/edgeless/components/block-portal/embed/edgeless-embed.ts
index 1ffd9723d518..7f78d5093308 100644
--- a/packages/blocks/src/page-block/edgeless/components/block-portal/embed/edgeless-embed.ts
+++ b/packages/blocks/src/page-block/edgeless/components/block-portal/embed/edgeless-embed.ts
@@ -24,7 +24,9 @@ export class EdgelessBlockPortalEmbed extends EdgelessPortalBase<EmbedBlockModel
     };
 
     return html`
-      <div style=${styleMap(style)}>${this.renderModel(model)}</div>
+      <div class="edgeless-block-portal-embed" style=${styleMap(style)}>
+        ${this.renderModel(model)}
+      </div>
     `;
   }
 }
diff --git a/packages/blocks/src/page-block/edgeless/components/block-portal/image/edgeless-image.ts b/packages/blocks/src/page-block/edgeless/components/block-portal/image/edgeless-image.ts
index 144d235104a1..82b7d7b2240a 100644
--- a/packages/blocks/src/page-block/edgeless/components/block-portal/image/edgeless-image.ts
+++ b/packages/blocks/src/page-block/edgeless/components/block-portal/image/edgeless-image.ts
@@ -24,7 +24,9 @@ export class EdgelessBlockPortalImage extends EdgelessPortalBase<ImageBlockModel
     };
 
     return html`
-      <div style=${styleMap(style)}>${this.renderModel(model)}</div>
+      <div class="edgeless-block-portal-image" style=${styleMap(style)}>
+        ${this.renderModel(model)}
+      </div>
     `;
   }
 }
diff --git a/packages/blocks/src/page-block/edgeless/components/rects/edgeless-hover-rect.ts b/packages/blocks/src/page-block/edgeless/components/rects/edgeless-hover-rect.ts
index 6bb64d28c5b2..a8fe0c804f2f 100644
--- a/packages/blocks/src/page-block/edgeless/components/rects/edgeless-hover-rect.ts
+++ b/packages/blocks/src/page-block/edgeless/components/rects/edgeless-hover-rect.ts
@@ -43,7 +43,6 @@ export class EdgelessHoverRect extends WithDisposable(LitElement) {
     if (this.rAfId) cancelAnimationFrame(this.rAfId);
 
     const hoverState = this.edgeless.tools.getHoverState();
-
     if (!hoverState) {
       this.rAfId = requestAnimationFrame(() => {
         this.rect.style.removeProperty('visibility');
@@ -51,6 +50,7 @@ export class EdgelessHoverRect extends WithDisposable(LitElement) {
 
       return;
     }
+
     const { zoom } = this.edgeless.surface.viewport;
     const { rect } = hoverState;
     const element = hoverState.content;
@@ -75,14 +75,20 @@ export class EdgelessHoverRect extends WithDisposable(LitElement) {
     this._disposables.add(
       this.edgeless.slots.hoverUpdated.on(() => this._refreshHoverRect())
     );
+
     this._disposables.add(
       this.edgeless.slots.viewportUpdated.on(() => this._refreshHoverRect())
     );
+
     this._disposables.add(
       this.edgeless.selectionManager.slots.updated.on(() =>
         this._refreshHoverRect()
       )
     );
+
+    this._disposables.add(
+      this.edgeless.page.slots.blockUpdated.on(() => this._refreshHoverRect())
+    );
   }
 
   protected override render() {
diff --git a/packages/blocks/src/page-block/edgeless/components/rects/edgeless-selected-rect.ts b/packages/blocks/src/page-block/edgeless/components/rects/edgeless-selected-rect.ts
index 5a2c441d614e..365bba5542fe 100644
--- a/packages/blocks/src/page-block/edgeless/components/rects/edgeless-selected-rect.ts
+++ b/packages/blocks/src/page-block/edgeless/components/rects/edgeless-selected-rect.ts
@@ -696,12 +696,13 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
     );
 
     _disposables.add(selection.slots.updated.on(this._updateOnSelectionChange));
-    _disposables.add(page.slots.blockUpdated.on(this._updateOnElementChange));
+
     _disposables.add(
       page.slots.blockUpdated.on(data => {
         this._updateOnElementChange(data, true);
       })
     );
+
     _disposables.add(
       edgeless.slots.readonlyUpdated.on(() => this.requestUpdate())
     );
diff --git a/packages/blocks/src/page-block/edgeless/components/toolbar/note/note-menu.ts b/packages/blocks/src/page-block/edgeless/components/toolbar/note/note-menu.ts
index 1ddbabb04f00..c39c7d5a5a88 100644
--- a/packages/blocks/src/page-block/edgeless/components/toolbar/note/note-menu.ts
+++ b/packages/blocks/src/page-block/edgeless/components/toolbar/note/note-menu.ts
@@ -107,7 +107,7 @@ export class EdgelessNoteMenu extends WithDisposable(LitElement) {
             <edgeless-tool-icon-button
               .activeMode=${'background'}
               .iconContainerPadding=${2}
-              .tooltip=${'bookmark'}
+              .tooltip=${'Bookmark'}
               @click=${async () => {
                 const url = await toggleBookmarkCreateModal(this.edgeless.host);
                 if (!url) return;
diff --git a/packages/blocks/src/page-block/edgeless/components/toolbar/template/builtin-templates.ts b/packages/blocks/src/page-block/edgeless/components/toolbar/template/builtin-templates.ts
index 0d303a2bc483..caf0dd9ad738 100644
--- a/packages/blocks/src/page-block/edgeless/components/toolbar/template/builtin-templates.ts
+++ b/packages/blocks/src/page-block/edgeless/components/toolbar/template/builtin-templates.ts
@@ -5,6 +5,7 @@ export type Template = {
   content: unknown;
   asserts?: Record<string, string>;
   preview: string;
+  version?: object;
 };
 
 export type TemplateCategory = {
diff --git a/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/flow-chart.json b/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/flow-chart.json
deleted file mode 100644
index 9fd6c5f19a34..000000000000
--- a/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/flow-chart.json
+++ /dev/null
@@ -1,1037 +0,0 @@
-{
-  "name": "flow chart",
-  "preview": "",
-  "content": {
-    "type": "page",
-    "meta": {
-      "id": "page:home",
-      "title": "",
-      "createDate": 1702017557277,
-      "tags": []
-    },
-    "blocks": {
-      "type": "block",
-      "id": "block:PY8poNCR8Y",
-      "flavour": "affine:page",
-      "props": {
-        "title": {
-          "$blocksuite:internal:text$": true,
-          "delta": []
-        }
-      },
-      "children": [
-        {
-          "type": "block",
-          "id": "block:WDieoRBX9E",
-          "flavour": "affine:surface",
-          "props": {
-            "elements": {
-              "Ksae9QCWs-": {
-                "type": "shape",
-                "xywh": "[-247.47478205709092,-248.0388645045369,304.01012629967965,155.86872626208762]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0.1,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-blue",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "none",
-                "roughness": 1.4,
-                "id": "Ksae9QCWs-",
-                "index": "a0",
-                "seed": 1302801432,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Action"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "normal"
-              },
-              "grsNaVQSdr": {
-                "type": "shape",
-                "xywh": "[-212.31975120022017,-583.6962731429549,233.70006458593815,233.70006458593818]",
-                "rotate": 0,
-                "shapeType": "ellipse",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-purple",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-line-yellow",
-                "strokeStyle": "none",
-                "roughness": 1.4,
-                "id": "grsNaVQSdr",
-                "index": "a1",
-                "seed": 932975567,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Start"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "normal"
-              },
-              "ydD2xQblFu": {
-                "type": "shape",
-                "xywh": "[409.12046501340956,236.5476392556416,217.73314401131432,218]",
-                "rotate": 0,
-                "shapeType": "diamond",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-yellow",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "none",
-                "roughness": 1.4,
-                "id": "ydD2xQblFu",
-                "index": "a2",
-                "seed": 1937946925,
-                "color": "--affine-palette-line-black",
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Yes\nor\nNo"
-                    }
-                  ]
-                },
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "normal"
-              },
-              "lfUx8CQ-vY": {
-                "type": "shape",
-                "xywh": "[-247.47506314983983,9.787205810030432,304.01012629967965,155.86872626208762]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0.1,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-blue",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "none",
-                "roughness": 1.4,
-                "id": "lfUx8CQ-vY",
-                "index": "a3",
-                "seed": 34577438,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Action"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "normal"
-              },
-              "HA3P0gQLSB": {
-                "type": "shape",
-                "xywh": "[-246.63099698203268,267.19942246734837,304.01012629967965,156]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0.1,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-blue",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "none",
-                "roughness": 1.4,
-                "id": "HA3P0gQLSB",
-                "index": "a4",
-                "seed": 991259797,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Action"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "normal"
-              },
-              "_PzH-12vky": {
-                "type": "shape",
-                "xywh": "[-1523.3854715805187,606.7443200687947,304.01012629967965,155.86872626208762]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0.1,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-blue",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "none",
-                "roughness": 1.4,
-                "id": "_PzH-12vky",
-                "index": "a5",
-                "seed": 2045093249,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Action"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "normal"
-              },
-              "EUdfqi0sLy": {
-                "type": "shape",
-                "xywh": "[-1116.510445120214,575.6786831998384,217.73314401131432,218]",
-                "rotate": 0,
-                "shapeType": "diamond",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-yellow",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "none",
-                "roughness": 1.4,
-                "id": "EUdfqi0sLy",
-                "index": "a6",
-                "seed": 257218715,
-                "color": "--affine-palette-line-black",
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Yes\nor\nNo"
-                    }
-                  ]
-                },
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "normal"
-              },
-              "h37vuXQ2Bk": {
-                "type": "shape",
-                "xywh": "[365.9819738692269,-68.1443631310438,304.01012629967965,155.86872626208762]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0.1,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-blue",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "none",
-                "roughness": 1.4,
-                "id": "h37vuXQ2Bk",
-                "index": "a7",
-                "seed": 1474556994,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Action"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "normal"
-              },
-              "3TVdFL78JJ": {
-                "type": "shape",
-                "xywh": "[1041.1352410318743,267.61327612459775,304.01012629967965,155.86872626208762]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0.1,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-blue",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "none",
-                "roughness": 1.4,
-                "id": "3TVdFL78JJ",
-                "index": "a8",
-                "seed": 1352046864,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Action"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "normal"
-              },
-              "h0EbkORWel": {
-                "type": "connector",
-                "mode": 1,
-                "strokeWidth": 4,
-                "stroke": "--affine-palette-line-grey",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "source": {
-                  "id": "grsNaVQSdr",
-                  "position": [0.5, 1]
-                },
-                "target": {
-                  "id": "Ksae9QCWs-",
-                  "position": [0.5, 0]
-                },
-                "id": "h0EbkORWel",
-                "index": "a9",
-                "seed": 612591943
-              },
-              "jWUjLqeUhv": {
-                "type": "connector",
-                "mode": 1,
-                "strokeWidth": 2,
-                "stroke": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "source": {
-                  "id": "Ksae9QCWs-",
-                  "position": [0.5, 1]
-                },
-                "target": {
-                  "id": "lfUx8CQ-vY",
-                  "position": [0.5, 0]
-                },
-                "id": "jWUjLqeUhv",
-                "index": "aA",
-                "seed": 1495329882
-              },
-              "g9HaseUVqV": {
-                "type": "connector",
-                "mode": 1,
-                "strokeWidth": 2,
-                "stroke": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "source": {
-                  "id": "Ksae9QCWs-",
-                  "position": [0.5, 1]
-                },
-                "target": {
-                  "id": "lfUx8CQ-vY",
-                  "position": [0.5, 0]
-                },
-                "id": "g9HaseUVqV",
-                "index": "aB",
-                "seed": 1303540064
-              },
-              "5cBOgtqmw2": {
-                "type": "connector",
-                "mode": 1,
-                "strokeWidth": 2,
-                "stroke": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "source": {
-                  "id": "Ksae9QCWs-",
-                  "position": [0.5, 1]
-                },
-                "target": {
-                  "id": "lfUx8CQ-vY",
-                  "position": [0.5, 0]
-                },
-                "id": "5cBOgtqmw2",
-                "index": "aC",
-                "seed": 1700867555
-              },
-              "73uORSwPtw": {
-                "type": "connector",
-                "mode": 1,
-                "strokeWidth": 2,
-                "stroke": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "source": {
-                  "id": "Ksae9QCWs-",
-                  "position": [0.5, 1]
-                },
-                "target": {
-                  "position": [-70.03439413300964, -28.99846627782921]
-                },
-                "id": "73uORSwPtw",
-                "index": "aD",
-                "seed": 1958199736
-              },
-              "Dc-8C3utva": {
-                "type": "connector",
-                "mode": 1,
-                "strokeWidth": 4,
-                "stroke": "--affine-palette-line-grey",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "source": {
-                  "id": "Ksae9QCWs-",
-                  "position": [0.5, 1]
-                },
-                "target": {
-                  "id": "lfUx8CQ-vY"
-                },
-                "id": "Dc-8C3utva",
-                "index": "aE",
-                "seed": 2045084674
-              },
-              "pkwHC7_RuX": {
-                "type": "connector",
-                "mode": 1,
-                "strokeWidth": 4,
-                "stroke": "--affine-palette-line-grey",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "source": {
-                  "id": "lfUx8CQ-vY",
-                  "position": [0.5, 1]
-                },
-                "target": {
-                  "id": "HA3P0gQLSB"
-                },
-                "id": "pkwHC7_RuX",
-                "index": "aF",
-                "seed": 1320381362
-              },
-              "2Vwl_h4K_8": {
-                "type": "connector",
-                "mode": 1,
-                "strokeWidth": 4,
-                "stroke": "--affine-palette-line-grey",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "source": {
-                  "id": "HA3P0gQLSB",
-                  "position": [1, 0.5]
-                },
-                "target": {
-                  "id": "ydD2xQblFu",
-                  "position": [0, 0.4999999999999999]
-                },
-                "id": "2Vwl_h4K_8",
-                "index": "aG",
-                "seed": 655809891
-              },
-              "RbBZTZ2H2f": {
-                "type": "connector",
-                "mode": 1,
-                "strokeWidth": 4,
-                "stroke": "--affine-palette-line-grey",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "source": {
-                  "id": "ydD2xQblFu",
-                  "position": [0.5, 0]
-                },
-                "target": {
-                  "id": "h37vuXQ2Bk"
-                },
-                "id": "RbBZTZ2H2f",
-                "index": "aH",
-                "seed": 1830139278
-              },
-              "hAUiGDCwni": {
-                "type": "connector",
-                "mode": 1,
-                "strokeWidth": 4,
-                "stroke": "--affine-palette-line-grey",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "source": {
-                  "id": "h37vuXQ2Bk",
-                  "position": [1, 0.5]
-                },
-                "target": {
-                  "id": "3TVdFL78JJ",
-                  "position": [0.49999999999999983, 0]
-                },
-                "id": "hAUiGDCwni",
-                "index": "aK",
-                "seed": 602366653
-              },
-              "gUu2DraEHc": {
-                "type": "text",
-                "xywh": "[525.5525784058001,151.41,41.88067626953125,28.5]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Yes"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-grey",
-                "fontSize": 24,
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "gUu2DraEHc",
-                "index": "aM",
-                "seed": 868124845
-              },
-              "YHgu7oxCyx": {
-                "type": "connector",
-                "mode": 1,
-                "strokeWidth": 4,
-                "stroke": "--affine-palette-line-grey",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "source": {
-                  "id": "ydD2xQblFu",
-                  "position": [1, 0.5]
-                },
-                "target": {
-                  "id": "3TVdFL78JJ",
-                  "position": [0, 0.5000000000000001]
-                },
-                "id": "YHgu7oxCyx",
-                "index": "aN",
-                "seed": 1866232091
-              },
-              "n5Ep0HkOKR": {
-                "type": "text",
-                "xywh": "[795.8080465225494,310.0815517259986,33,29]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "No"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-grey",
-                "fontSize": 24,
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "n5Ep0HkOKR",
-                "index": "aO",
-                "seed": 1709632114
-              },
-              "03cE0Z-fxk": {
-                "type": "shape",
-                "xywh": "[1084.273427994343,613.2702190136646,217.73314401131432,218]",
-                "rotate": 0,
-                "shapeType": "diamond",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-yellow",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "none",
-                "roughness": 1.4,
-                "id": "03cE0Z-fxk",
-                "index": "aP",
-                "seed": 640115209,
-                "color": "--affine-palette-line-black",
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Yes\nor\nNo"
-                    }
-                  ]
-                },
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "normal"
-              },
-              "gZUhN-aYzi": {
-                "type": "connector",
-                "mode": 1,
-                "strokeWidth": 4,
-                "stroke": "--affine-palette-line-grey",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "source": {
-                  "id": "3TVdFL78JJ",
-                  "position": [0.5, 1]
-                },
-                "target": {
-                  "id": "03cE0Z-fxk",
-                  "position": [0.5000000000000001, 0]
-                },
-                "id": "gZUhN-aYzi",
-                "index": "aQ",
-                "seed": 968545969
-              },
-              "_QU7lLy0c0": {
-                "type": "connector",
-                "mode": 1,
-                "strokeWidth": 4,
-                "stroke": "--affine-palette-line-grey",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "source": {
-                  "id": "03cE0Z-fxk",
-                  "position": [0, 0.5]
-                },
-                "target": {
-                  "id": "ydD2xQblFu",
-                  "position": [0.5000000000000001, 0.9999999999999999]
-                },
-                "id": "_QU7lLy0c0",
-                "index": "aR",
-                "seed": 1414857367
-              },
-              "ZBppFGHIy0": {
-                "type": "text",
-                "xywh": "[795.8080465225494,684.6786831998384,33,29]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "No"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-grey",
-                "fontSize": 24,
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "ZBppFGHIy0",
-                "index": "aS",
-                "seed": 69272275
-              },
-              "qvhoYUj230": {
-                "type": "shape",
-                "xywh": "[365.98493685016024,1021.0556368689562,304.01012629967965,155.86872626208762]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0.1,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-blue",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "none",
-                "roughness": 1.4,
-                "id": "qvhoYUj230",
-                "index": "aT",
-                "seed": 1559703065,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Action"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "normal"
-              },
-              "xixP2sNR_L": {
-                "type": "connector",
-                "mode": 1,
-                "strokeWidth": 4,
-                "stroke": "--affine-palette-line-grey",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "source": {
-                  "id": "03cE0Z-fxk",
-                  "position": [0.5, 1]
-                },
-                "target": {
-                  "id": "qvhoYUj230",
-                  "position": [0.49999999999999983, 0]
-                },
-                "id": "xixP2sNR_L",
-                "index": "aU",
-                "seed": 238268077
-              },
-              "POQhMd2xAx": {
-                "type": "text",
-                "xywh": "[790.8080465225494,889.6284572778808,43,29]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Yes"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-grey",
-                "fontSize": 24,
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "POQhMd2xAx",
-                "index": "aV",
-                "seed": 1317364024
-              },
-              "R38499YZHD": {
-                "type": "shape",
-                "xywh": "[-372.3894009393302,989.9927987716874,217.73314401131432,218]",
-                "rotate": 0,
-                "shapeType": "diamond",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-yellow",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "none",
-                "roughness": 1.4,
-                "id": "R38499YZHD",
-                "index": "aW",
-                "seed": 1967354475,
-                "color": "--affine-palette-line-black",
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Yes\nor\nNo"
-                    }
-                  ]
-                },
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "normal"
-              },
-              "LKkTnFuF4B": {
-                "type": "connector",
-                "mode": 1,
-                "strokeWidth": 4,
-                "stroke": "--affine-palette-line-grey",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "source": {
-                  "id": "qvhoYUj230",
-                  "position": [0, 0.5]
-                },
-                "target": {
-                  "id": "R38499YZHD",
-                  "position": [0.9999999999999998, 0.5]
-                },
-                "id": "LKkTnFuF4B",
-                "index": "aX",
-                "seed": 559788331,
-                "frontEndpointStyle": "None",
-                "rearEndpointStyle": "Arrow"
-              },
-              "sI0UgSQbhJ": {
-                "type": "shape",
-                "xywh": "[-415.5278920835129,1423.646193915283,304.01012629967965,155.86872626208762]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0.1,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-blue",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "none",
-                "roughness": 1.4,
-                "id": "sI0UgSQbhJ",
-                "index": "aY",
-                "seed": 686892262,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Action"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "normal"
-              },
-              "u46zCKWJW1": {
-                "type": "connector",
-                "mode": 1,
-                "strokeWidth": 4,
-                "stroke": "--affine-palette-line-grey",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "source": {
-                  "id": "R38499YZHD",
-                  "position": [0.5, 1]
-                },
-                "target": {
-                  "id": "sI0UgSQbhJ",
-                  "position": [0.5000000000000002, 0]
-                },
-                "id": "u46zCKWJW1",
-                "index": "aZ",
-                "seed": 241091117
-              },
-              "3WulwKaXKS": {
-                "type": "shape",
-                "xywh": "[-380.370032292969,1726.9003834176424,233.70006458593815,234]",
-                "rotate": 0,
-                "shapeType": "ellipse",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-purple",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-line-yellow",
-                "strokeStyle": "none",
-                "roughness": 1.4,
-                "id": "3WulwKaXKS",
-                "index": "aa",
-                "seed": 1936488363,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Result"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "normal"
-              },
-              "7OY4PHXyk_": {
-                "type": "connector",
-                "mode": 1,
-                "strokeWidth": 4,
-                "stroke": "--affine-palette-line-grey",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "source": {
-                  "id": "sI0UgSQbhJ",
-                  "position": [0.5, 1]
-                },
-                "target": {
-                  "id": "3WulwKaXKS",
-                  "position": [0.5000000000000001, 0]
-                },
-                "id": "7OY4PHXyk_",
-                "index": "ab",
-                "seed": 1390346335,
-                "xywh": "[-263.52282893367305,1638.011671002082,1,212.18000000000006]"
-              },
-              "rwfhtkmxGV": {
-                "type": "text",
-                "xywh": "[-247.48,1301.3200000000002,33,29]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "No"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-grey",
-                "fontSize": 24,
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "rwfhtkmxGV",
-                "index": "ac",
-                "seed": 670777356
-              },
-              "dwbykFhJKm": {
-                "type": "connector",
-                "mode": 1,
-                "strokeWidth": 4,
-                "stroke": "--affine-palette-line-grey",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "source": {
-                  "id": "R38499YZHD",
-                  "position": [0, 0.5]
-                },
-                "target": {
-                  "id": "lfUx8CQ-vY",
-                  "position": [0, 0.5]
-                },
-                "id": "dwbykFhJKm",
-                "index": "ad",
-                "seed": 1423832944
-              },
-              "fEBd99ZiQN": {
-                "type": "text",
-                "xywh": "[-377.54477971118376,584.77,41.88067626953125,28.5]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Yes"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-grey",
-                "fontSize": 24,
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "fEBd99ZiQN",
-                "index": "ae",
-                "seed": 1273423653
-              },
-              "GOXMT-TQ6R": {
-                "type": "text",
-                "xywh": "[-1552.638047141807,-89.43413110013387,707,353]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "A Flowchart template is a diagrammatic tool used to visually represent a process or workflow. \n\nIt typically consists of various shapes like rectangles, diamonds, and arrows that denote steps, decisions, and the flow direction, helping to map out and understand complex processes systematically.\n\nPress “S” to quickly place shapes onto the canvas. Other shapes can be selected from the toolbar or swapped from the shape menu.\n\nPress \"C\" to quickly select the Connector tool. You can draw magnetic between objects on the canvas. The blue handles will let you adjust their exact path.\n\n"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontSize": 20,
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "GOXMT-TQ6R",
-                "index": "af",
-                "seed": 2081052614,
-                "hasMaxWidth": true
-              },
-              "AO_Fu_3p0U": {
-                "type": "text",
-                "xywh": "[-1552.638047141807,-208.46965582048261,309.5908508300781,76.5]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Flowchart"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontSize": 64,
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "AO_Fu_3p0U",
-                "index": "ah",
-                "seed": 1348985286
-              },
-              "a3b3faEw3S": {
-                "type": "group",
-                "children": {
-                  "affine:surface:ymap": true,
-                  "json": {
-                    "GOXMT-TQ6R": true,
-                    "AO_Fu_3p0U": true,
-                    "block:ofacia51GI": true
-                  }
-                },
-                "title": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Group 1"
-                    }
-                  ]
-                },
-                "id": "a3b3faEw3S",
-                "index": "ai",
-                "seed": 1665064781
-              }
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:CUbp6bMsMM",
-              "flavour": "affine:frame",
-              "props": {
-                "title": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Key"
-                    }
-                  ]
-                },
-                "background": "--affine-palette-transparent",
-                "xywh": "[-1593.9377813099973,506.20729872115555,811.2479982635791,333.36808035828614]",
-                "index": "a0"
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:ofacia51GI",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[-1593.9377813099973,-253.99866559224466,780.8156813417015,541.4276639514948]",
-            "background": "--affine-background-secondary-color",
-            "index": "Zz",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 8,
-                "borderSize": 4,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-film"
-              },
-              "collapse": true
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:S2XRRZ9QZa",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "text",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            }
-          ]
-        }
-      ]
-    }
-  }
-}
diff --git a/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/flow-chart.ts b/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/flow-chart.ts
new file mode 100644
index 000000000000..60535fd527a0
--- /dev/null
+++ b/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/flow-chart.ts
@@ -0,0 +1,1040 @@
+import type { Template } from '../builtin-templates.js';
+
+export const flowChart: Template = {
+  name: 'flow chart',
+  preview: '',
+  content: {
+    type: 'page',
+    meta: {
+      id: 'page:home',
+      title: '',
+      createDate: 1702017557277,
+      tags: [],
+    },
+    blocks: {
+      type: 'block',
+      id: 'block:PY8poNCR8Y',
+      flavour: 'affine:page',
+      props: {
+        title: {
+          '$blocksuite:internal:text$': true,
+          delta: [],
+        },
+      },
+      children: [
+        {
+          type: 'block',
+          id: 'block:WDieoRBX9E',
+          flavour: 'affine:surface',
+          props: {
+            elements: {
+              'Ksae9QCWs-': {
+                type: 'shape',
+                xywh: '[-247.47478205709092,-248.0388645045369,304.01012629967965,155.86872626208762]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0.1,
+                filled: true,
+                fillColor: '--affine-palette-shape-blue',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'none',
+                roughness: 1.4,
+                id: 'Ksae9QCWs-',
+                index: 'a0',
+                seed: 1302801432,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Action',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'normal',
+              },
+              grsNaVQSdr: {
+                type: 'shape',
+                xywh: '[-212.31975120022017,-583.6962731429549,233.70006458593815,233.70006458593818]',
+                rotate: 0,
+                shapeType: 'ellipse',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-purple',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-line-yellow',
+                strokeStyle: 'none',
+                roughness: 1.4,
+                id: 'grsNaVQSdr',
+                index: 'a1',
+                seed: 932975567,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Start',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'normal',
+              },
+              ydD2xQblFu: {
+                type: 'shape',
+                xywh: '[409.12046501340956,236.5476392556416,217.73314401131432,218]',
+                rotate: 0,
+                shapeType: 'diamond',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-yellow',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'none',
+                roughness: 1.4,
+                id: 'ydD2xQblFu',
+                index: 'a2',
+                seed: 1937946925,
+                color: '--affine-palette-line-black',
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Yes\nor\nNo',
+                    },
+                  ],
+                },
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'normal',
+              },
+              'lfUx8CQ-vY': {
+                type: 'shape',
+                xywh: '[-247.47506314983983,9.787205810030432,304.01012629967965,155.86872626208762]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0.1,
+                filled: true,
+                fillColor: '--affine-palette-shape-blue',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'none',
+                roughness: 1.4,
+                id: 'lfUx8CQ-vY',
+                index: 'a3',
+                seed: 34577438,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Action',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'normal',
+              },
+              HA3P0gQLSB: {
+                type: 'shape',
+                xywh: '[-246.63099698203268,267.19942246734837,304.01012629967965,156]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0.1,
+                filled: true,
+                fillColor: '--affine-palette-shape-blue',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'none',
+                roughness: 1.4,
+                id: 'HA3P0gQLSB',
+                index: 'a4',
+                seed: 991259797,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Action',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'normal',
+              },
+              '_PzH-12vky': {
+                type: 'shape',
+                xywh: '[-1523.3854715805187,606.7443200687947,304.01012629967965,155.86872626208762]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0.1,
+                filled: true,
+                fillColor: '--affine-palette-shape-blue',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'none',
+                roughness: 1.4,
+                id: '_PzH-12vky',
+                index: 'a5',
+                seed: 2045093249,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Action',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'normal',
+              },
+              EUdfqi0sLy: {
+                type: 'shape',
+                xywh: '[-1116.510445120214,575.6786831998384,217.73314401131432,218]',
+                rotate: 0,
+                shapeType: 'diamond',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-yellow',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'none',
+                roughness: 1.4,
+                id: 'EUdfqi0sLy',
+                index: 'a6',
+                seed: 257218715,
+                color: '--affine-palette-line-black',
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Yes\nor\nNo',
+                    },
+                  ],
+                },
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'normal',
+              },
+              h37vuXQ2Bk: {
+                type: 'shape',
+                xywh: '[365.9819738692269,-68.1443631310438,304.01012629967965,155.86872626208762]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0.1,
+                filled: true,
+                fillColor: '--affine-palette-shape-blue',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'none',
+                roughness: 1.4,
+                id: 'h37vuXQ2Bk',
+                index: 'a7',
+                seed: 1474556994,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Action',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'normal',
+              },
+              '3TVdFL78JJ': {
+                type: 'shape',
+                xywh: '[1041.1352410318743,267.61327612459775,304.01012629967965,155.86872626208762]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0.1,
+                filled: true,
+                fillColor: '--affine-palette-shape-blue',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'none',
+                roughness: 1.4,
+                id: '3TVdFL78JJ',
+                index: 'a8',
+                seed: 1352046864,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Action',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'normal',
+              },
+              h0EbkORWel: {
+                type: 'connector',
+                mode: 1,
+                strokeWidth: 4,
+                stroke: '--affine-palette-line-grey',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                source: {
+                  id: 'grsNaVQSdr',
+                  position: [0.5, 1],
+                },
+                target: {
+                  id: 'Ksae9QCWs-',
+                  position: [0.5, 0],
+                },
+                id: 'h0EbkORWel',
+                index: 'a9',
+                seed: 612591943,
+              },
+              jWUjLqeUhv: {
+                type: 'connector',
+                mode: 1,
+                strokeWidth: 2,
+                stroke: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                source: {
+                  id: 'Ksae9QCWs-',
+                  position: [0.5, 1],
+                },
+                target: {
+                  id: 'lfUx8CQ-vY',
+                  position: [0.5, 0],
+                },
+                id: 'jWUjLqeUhv',
+                index: 'aA',
+                seed: 1495329882,
+              },
+              g9HaseUVqV: {
+                type: 'connector',
+                mode: 1,
+                strokeWidth: 2,
+                stroke: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                source: {
+                  id: 'Ksae9QCWs-',
+                  position: [0.5, 1],
+                },
+                target: {
+                  id: 'lfUx8CQ-vY',
+                  position: [0.5, 0],
+                },
+                id: 'g9HaseUVqV',
+                index: 'aB',
+                seed: 1303540064,
+              },
+              '5cBOgtqmw2': {
+                type: 'connector',
+                mode: 1,
+                strokeWidth: 2,
+                stroke: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                source: {
+                  id: 'Ksae9QCWs-',
+                  position: [0.5, 1],
+                },
+                target: {
+                  id: 'lfUx8CQ-vY',
+                  position: [0.5, 0],
+                },
+                id: '5cBOgtqmw2',
+                index: 'aC',
+                seed: 1700867555,
+              },
+              '73uORSwPtw': {
+                type: 'connector',
+                mode: 1,
+                strokeWidth: 2,
+                stroke: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                source: {
+                  id: 'Ksae9QCWs-',
+                  position: [0.5, 1],
+                },
+                target: {
+                  position: [-70.03439413300964, -28.99846627782921],
+                },
+                id: '73uORSwPtw',
+                index: 'aD',
+                seed: 1958199736,
+              },
+              'Dc-8C3utva': {
+                type: 'connector',
+                mode: 1,
+                strokeWidth: 4,
+                stroke: '--affine-palette-line-grey',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                source: {
+                  id: 'Ksae9QCWs-',
+                  position: [0.5, 1],
+                },
+                target: {
+                  id: 'lfUx8CQ-vY',
+                },
+                id: 'Dc-8C3utva',
+                index: 'aE',
+                seed: 2045084674,
+              },
+              pkwHC7_RuX: {
+                type: 'connector',
+                mode: 1,
+                strokeWidth: 4,
+                stroke: '--affine-palette-line-grey',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                source: {
+                  id: 'lfUx8CQ-vY',
+                  position: [0.5, 1],
+                },
+                target: {
+                  id: 'HA3P0gQLSB',
+                },
+                id: 'pkwHC7_RuX',
+                index: 'aF',
+                seed: 1320381362,
+              },
+              '2Vwl_h4K_8': {
+                type: 'connector',
+                mode: 1,
+                strokeWidth: 4,
+                stroke: '--affine-palette-line-grey',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                source: {
+                  id: 'HA3P0gQLSB',
+                  position: [1, 0.5],
+                },
+                target: {
+                  id: 'ydD2xQblFu',
+                  position: [0, 0.4999999999999999],
+                },
+                id: '2Vwl_h4K_8',
+                index: 'aG',
+                seed: 655809891,
+              },
+              RbBZTZ2H2f: {
+                type: 'connector',
+                mode: 1,
+                strokeWidth: 4,
+                stroke: '--affine-palette-line-grey',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                source: {
+                  id: 'ydD2xQblFu',
+                  position: [0.5, 0],
+                },
+                target: {
+                  id: 'h37vuXQ2Bk',
+                },
+                id: 'RbBZTZ2H2f',
+                index: 'aH',
+                seed: 1830139278,
+              },
+              hAUiGDCwni: {
+                type: 'connector',
+                mode: 1,
+                strokeWidth: 4,
+                stroke: '--affine-palette-line-grey',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                source: {
+                  id: 'h37vuXQ2Bk',
+                  position: [1, 0.5],
+                },
+                target: {
+                  id: '3TVdFL78JJ',
+                  position: [0.49999999999999983, 0],
+                },
+                id: 'hAUiGDCwni',
+                index: 'aK',
+                seed: 602366653,
+              },
+              gUu2DraEHc: {
+                type: 'text',
+                xywh: '[525.5525784058001,151.41,41.88067626953125,28.5]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Yes',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-grey',
+                fontSize: 24,
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: 'gUu2DraEHc',
+                index: 'aM',
+                seed: 868124845,
+              },
+              YHgu7oxCyx: {
+                type: 'connector',
+                mode: 1,
+                strokeWidth: 4,
+                stroke: '--affine-palette-line-grey',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                source: {
+                  id: 'ydD2xQblFu',
+                  position: [1, 0.5],
+                },
+                target: {
+                  id: '3TVdFL78JJ',
+                  position: [0, 0.5000000000000001],
+                },
+                id: 'YHgu7oxCyx',
+                index: 'aN',
+                seed: 1866232091,
+              },
+              n5Ep0HkOKR: {
+                type: 'text',
+                xywh: '[795.8080465225494,310.0815517259986,33,29]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'No',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-grey',
+                fontSize: 24,
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: 'n5Ep0HkOKR',
+                index: 'aO',
+                seed: 1709632114,
+              },
+              '03cE0Z-fxk': {
+                type: 'shape',
+                xywh: '[1084.273427994343,613.2702190136646,217.73314401131432,218]',
+                rotate: 0,
+                shapeType: 'diamond',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-yellow',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'none',
+                roughness: 1.4,
+                id: '03cE0Z-fxk',
+                index: 'aP',
+                seed: 640115209,
+                color: '--affine-palette-line-black',
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Yes\nor\nNo',
+                    },
+                  ],
+                },
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'normal',
+              },
+              'gZUhN-aYzi': {
+                type: 'connector',
+                mode: 1,
+                strokeWidth: 4,
+                stroke: '--affine-palette-line-grey',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                source: {
+                  id: '3TVdFL78JJ',
+                  position: [0.5, 1],
+                },
+                target: {
+                  id: '03cE0Z-fxk',
+                  position: [0.5000000000000001, 0],
+                },
+                id: 'gZUhN-aYzi',
+                index: 'aQ',
+                seed: 968545969,
+              },
+              _QU7lLy0c0: {
+                type: 'connector',
+                mode: 1,
+                strokeWidth: 4,
+                stroke: '--affine-palette-line-grey',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                source: {
+                  id: '03cE0Z-fxk',
+                  position: [0, 0.5],
+                },
+                target: {
+                  id: 'ydD2xQblFu',
+                  position: [0.5000000000000001, 0.9999999999999999],
+                },
+                id: '_QU7lLy0c0',
+                index: 'aR',
+                seed: 1414857367,
+              },
+              ZBppFGHIy0: {
+                type: 'text',
+                xywh: '[795.8080465225494,684.6786831998384,33,29]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'No',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-grey',
+                fontSize: 24,
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: 'ZBppFGHIy0',
+                index: 'aS',
+                seed: 69272275,
+              },
+              qvhoYUj230: {
+                type: 'shape',
+                xywh: '[365.98493685016024,1021.0556368689562,304.01012629967965,155.86872626208762]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0.1,
+                filled: true,
+                fillColor: '--affine-palette-shape-blue',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'none',
+                roughness: 1.4,
+                id: 'qvhoYUj230',
+                index: 'aT',
+                seed: 1559703065,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Action',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'normal',
+              },
+              xixP2sNR_L: {
+                type: 'connector',
+                mode: 1,
+                strokeWidth: 4,
+                stroke: '--affine-palette-line-grey',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                source: {
+                  id: '03cE0Z-fxk',
+                  position: [0.5, 1],
+                },
+                target: {
+                  id: 'qvhoYUj230',
+                  position: [0.49999999999999983, 0],
+                },
+                id: 'xixP2sNR_L',
+                index: 'aU',
+                seed: 238268077,
+              },
+              POQhMd2xAx: {
+                type: 'text',
+                xywh: '[790.8080465225494,889.6284572778808,43,29]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Yes',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-grey',
+                fontSize: 24,
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: 'POQhMd2xAx',
+                index: 'aV',
+                seed: 1317364024,
+              },
+              R38499YZHD: {
+                type: 'shape',
+                xywh: '[-372.3894009393302,989.9927987716874,217.73314401131432,218]',
+                rotate: 0,
+                shapeType: 'diamond',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-yellow',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'none',
+                roughness: 1.4,
+                id: 'R38499YZHD',
+                index: 'aW',
+                seed: 1967354475,
+                color: '--affine-palette-line-black',
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Yes\nor\nNo',
+                    },
+                  ],
+                },
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'normal',
+              },
+              LKkTnFuF4B: {
+                type: 'connector',
+                mode: 1,
+                strokeWidth: 4,
+                stroke: '--affine-palette-line-grey',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                source: {
+                  id: 'qvhoYUj230',
+                  position: [0, 0.5],
+                },
+                target: {
+                  id: 'R38499YZHD',
+                  position: [0.9999999999999998, 0.5],
+                },
+                id: 'LKkTnFuF4B',
+                index: 'aX',
+                seed: 559788331,
+                frontEndpointStyle: 'None',
+                rearEndpointStyle: 'Arrow',
+              },
+              sI0UgSQbhJ: {
+                type: 'shape',
+                xywh: '[-415.5278920835129,1423.646193915283,304.01012629967965,155.86872626208762]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0.1,
+                filled: true,
+                fillColor: '--affine-palette-shape-blue',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'none',
+                roughness: 1.4,
+                id: 'sI0UgSQbhJ',
+                index: 'aY',
+                seed: 686892262,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Action',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'normal',
+              },
+              u46zCKWJW1: {
+                type: 'connector',
+                mode: 1,
+                strokeWidth: 4,
+                stroke: '--affine-palette-line-grey',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                source: {
+                  id: 'R38499YZHD',
+                  position: [0.5, 1],
+                },
+                target: {
+                  id: 'sI0UgSQbhJ',
+                  position: [0.5000000000000002, 0],
+                },
+                id: 'u46zCKWJW1',
+                index: 'aZ',
+                seed: 241091117,
+              },
+              '3WulwKaXKS': {
+                type: 'shape',
+                xywh: '[-380.370032292969,1726.9003834176424,233.70006458593815,234]',
+                rotate: 0,
+                shapeType: 'ellipse',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-purple',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-line-yellow',
+                strokeStyle: 'none',
+                roughness: 1.4,
+                id: '3WulwKaXKS',
+                index: 'aa',
+                seed: 1936488363,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Result',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'normal',
+              },
+              '7OY4PHXyk_': {
+                type: 'connector',
+                mode: 1,
+                strokeWidth: 4,
+                stroke: '--affine-palette-line-grey',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                source: {
+                  id: 'sI0UgSQbhJ',
+                  position: [0.5, 1],
+                },
+                target: {
+                  id: '3WulwKaXKS',
+                  position: [0.5000000000000001, 0],
+                },
+                id: '7OY4PHXyk_',
+                index: 'ab',
+                seed: 1390346335,
+                xywh: '[-263.52282893367305,1638.011671002082,1,212.18000000000006]',
+              },
+              rwfhtkmxGV: {
+                type: 'text',
+                xywh: '[-247.48,1301.3200000000002,33,29]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'No',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-grey',
+                fontSize: 24,
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: 'rwfhtkmxGV',
+                index: 'ac',
+                seed: 670777356,
+              },
+              dwbykFhJKm: {
+                type: 'connector',
+                mode: 1,
+                strokeWidth: 4,
+                stroke: '--affine-palette-line-grey',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                source: {
+                  id: 'R38499YZHD',
+                  position: [0, 0.5],
+                },
+                target: {
+                  id: 'lfUx8CQ-vY',
+                  position: [0, 0.5],
+                },
+                id: 'dwbykFhJKm',
+                index: 'ad',
+                seed: 1423832944,
+              },
+              fEBd99ZiQN: {
+                type: 'text',
+                xywh: '[-377.54477971118376,584.77,41.88067626953125,28.5]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Yes',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-grey',
+                fontSize: 24,
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: 'fEBd99ZiQN',
+                index: 'ae',
+                seed: 1273423653,
+              },
+              'GOXMT-TQ6R': {
+                type: 'text',
+                xywh: '[-1552.638047141807,-89.43413110013387,707,353]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert:
+                        'A Flowchart template is a diagrammatic tool used to visually represent a process or workflow. \n\nIt typically consists of various shapes like rectangles, diamonds, and arrows that denote steps, decisions, and the flow direction, helping to map out and understand complex processes systematically.\n\nPress “S” to quickly place shapes onto the canvas. Other shapes can be selected from the toolbar or swapped from the shape menu.\n\nPress "C" to quickly select the Connector tool. You can draw magnetic between objects on the canvas. The blue handles will let you adjust their exact path.\n\n',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontSize: 20,
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: 'GOXMT-TQ6R',
+                index: 'af',
+                seed: 2081052614,
+                hasMaxWidth: true,
+              },
+              AO_Fu_3p0U: {
+                type: 'text',
+                xywh: '[-1552.638047141807,-208.46965582048261,309.5908508300781,76.5]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Flowchart',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontSize: 64,
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: 'AO_Fu_3p0U',
+                index: 'ah',
+                seed: 1348985286,
+              },
+              a3b3faEw3S: {
+                type: 'group',
+                children: {
+                  'affine:surface:ymap': true,
+                  json: {
+                    'GOXMT-TQ6R': true,
+                    AO_Fu_3p0U: true,
+                    'block:ofacia51GI': true,
+                  },
+                },
+                title: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Group 1',
+                    },
+                  ],
+                },
+                id: 'a3b3faEw3S',
+                index: 'ai',
+                seed: 1665064781,
+              },
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:CUbp6bMsMM',
+              flavour: 'affine:frame',
+              props: {
+                title: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Key',
+                    },
+                  ],
+                },
+                background: '--affine-palette-transparent',
+                xywh: '[-1593.9377813099973,506.20729872115555,811.2479982635791,333.36808035828614]',
+                index: 'a0',
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:ofacia51GI',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[-1593.9377813099973,-253.99866559224466,780.8156813417015,541.4276639514948]',
+            background: '--affine-background-secondary-color',
+            index: 'Zz',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 8,
+                borderSize: 4,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-film',
+              },
+              collapse: true,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:S2XRRZ9QZa',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+      ],
+    },
+  },
+};
diff --git a/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/gantt-chart.json b/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/gantt-chart.json
deleted file mode 100644
index cfef3b166a71..000000000000
--- a/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/gantt-chart.json
+++ /dev/null
@@ -1,999 +0,0 @@
-{
-  "name": "gantt chart",
-  "preview": "",
-  "content": {
-    "type": "page",
-    "meta": {
-      "id": "page:PmFlWlI_4A",
-      "title": "Gantt Chart",
-      "createDate": 1701934642712,
-      "tags": []
-    },
-    "blocks": {
-      "type": "block",
-      "id": "block:rZpJOZThKA",
-      "flavour": "affine:page",
-      "props": {
-        "title": {
-          "$blocksuite:internal:text$": true,
-          "delta": [
-            {
-              "insert": "Monthly Calendar"
-            }
-          ]
-        }
-      },
-      "children": [
-        {
-          "type": "block",
-          "id": "block:rMNPdVXkf7",
-          "flavour": "affine:surface",
-          "props": {
-            "elements": {
-              "u6zHdmzOu9": {
-                "type": "shape",
-                "xywh": "[-228.11828107498832,-872.3958143989109,3513.474350882585,189.5444781885874]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-orange",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "u6zHdmzOu9",
-                "index": "a0",
-                "seed": 104302524,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Project name"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontFamily": "blocksuite:surface:Poppins",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "fontSize": 64
-              },
-              "93OlKObB50": {
-                "type": "shape",
-                "xywh": "[-228.47362662152972,-432.20382303529044,477.0141135841853,296.02031169113934]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-tangerine",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "93OlKObB50",
-                "index": "aHG",
-                "seed": 1385846865,
-                "color": "--affine-palette-line-black",
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Product Team"
-                    }
-                  ]
-                },
-                "fontFamily": "blocksuite:surface:Poppins",
-                "textAlign": "center",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "fontSize": 36
-              },
-              "g05yHKlh0B": {
-                "type": "shape",
-                "xywh": "[-228.47362662152972,-112.63027842736824,477.0141135841853,296.02031169113934]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-purple",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "g05yHKlh0B",
-                "index": "aIG",
-                "seed": 1024566422,
-                "color": "--affine-palette-line-black",
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Design Team"
-                    }
-                  ]
-                },
-                "fontFamily": "blocksuite:surface:Poppins",
-                "textAlign": "center",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "fontSize": 36
-              },
-              "Y7LUOwz66o": {
-                "type": "shape",
-                "xywh": "[-228.47362662152972,206.94326618055396,477.0141135841853,296.02031169113934]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-blue",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "Y7LUOwz66o",
-                "index": "aJG",
-                "seed": 1725109778,
-                "color": "--affine-palette-line-black",
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Development Team"
-                    }
-                  ]
-                },
-                "fontFamily": "blocksuite:surface:Poppins",
-                "textAlign": "center",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "fontSize": 36
-              },
-              "c3PiLo-5WC": {
-                "type": "shape",
-                "xywh": "[-228.47362662152972,526.5168107884763,477.0141135841853,296.02031169113934]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-green",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "c3PiLo-5WC",
-                "index": "aKG",
-                "seed": 443669891,
-                "color": "--affine-palette-line-black",
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Operations Team"
-                    }
-                  ]
-                },
-                "fontFamily": "blocksuite:surface:Poppins",
-                "textAlign": "center",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "fontSize": 36
-              },
-              "AVIb4ZiPXP": {
-                "type": "shape",
-                "xywh": "[-228.47362662152972,-660.7570559520733,478.81955237391344,205]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-yellow",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "AVIb4ZiPXP",
-                "index": "a6",
-                "seed": 1446871931,
-                "color": "--affine-palette-line-black",
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Team"
-                    }
-                  ]
-                },
-                "fontFamily": "blocksuite:surface:Poppins",
-                "textAlign": "center",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "fontSize": 36
-              },
-              "4x2XJKGwn_": {
-                "type": "shape",
-                "xywh": "[277.6371246153118,-660.7570559520733,478.81955237391344,205]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-yellow",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "4x2XJKGwn_",
-                "index": "a7",
-                "seed": 1562786805,
-                "color": "--affine-palette-line-black",
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Week 1"
-                    }
-                  ]
-                },
-                "fontFamily": "blocksuite:surface:Poppins",
-                "textAlign": "center",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "fontSize": 36
-              },
-              "Jijrtp0pzF": {
-                "type": "shape",
-                "xywh": "[783.7478758521531,-660.7570559520733,478.81955237391344,205]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-yellow",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "Jijrtp0pzF",
-                "index": "a8",
-                "seed": 369041213,
-                "color": "--affine-palette-line-black",
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Week 2"
-                    }
-                  ]
-                },
-                "fontFamily": "blocksuite:surface:Poppins",
-                "textAlign": "center",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "fontSize": 36
-              },
-              "U47lQHboUq": {
-                "type": "shape",
-                "xywh": "[1289.8586270889946,-660.7570559520733,478.81955237391344,205]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-yellow",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "U47lQHboUq",
-                "index": "a9",
-                "seed": 1889247856,
-                "color": "--affine-palette-line-black",
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Week 3"
-                    }
-                  ]
-                },
-                "fontFamily": "blocksuite:surface:Poppins",
-                "textAlign": "center",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "fontSize": 36
-              },
-              "u8uju0dmW2": {
-                "type": "shape",
-                "xywh": "[1795.9693783258363,-660.7570559520733,478.81955237391344,205]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-yellow",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "u8uju0dmW2",
-                "index": "aA",
-                "seed": 706323358,
-                "color": "--affine-palette-line-black",
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Week 4"
-                    }
-                  ]
-                },
-                "fontFamily": "blocksuite:surface:Poppins",
-                "textAlign": "center",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "fontSize": 36
-              },
-              "91B-xLOCoV": {
-                "type": "shape",
-                "xywh": "[2302.0801295626775,-660.7570559520733,478.81955237391344,205]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-yellow",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "91B-xLOCoV",
-                "index": "aB",
-                "seed": 1512922881,
-                "color": "--affine-palette-line-black",
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Week 5"
-                    }
-                  ]
-                },
-                "fontFamily": "blocksuite:surface:Poppins",
-                "textAlign": "center",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "fontSize": 36
-              },
-              "sqVx2TNQWX": {
-                "type": "shape",
-                "xywh": "[2808.1908807995187,-660.7570559520733,478.81955237391344,205]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-yellow",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "sqVx2TNQWX",
-                "index": "aC",
-                "seed": 1447411329,
-                "color": "--affine-palette-line-black",
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Week 6"
-                    }
-                  ]
-                },
-                "fontFamily": "blocksuite:surface:Poppins",
-                "textAlign": "center",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "fontSize": 36
-              },
-              "gssA_v6u7r": {
-                "type": "shape",
-                "xywh": "[278.47995496942906,-432.20382303529044,3009.9808921247977,295.9836515351721]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-tangerine",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "gssA_v6u7r",
-                "index": "aHV",
-                "seed": 1767513575,
-                "color": "--affine-palette-line-black"
-              },
-              "JlaxkTN80t": {
-                "type": "shape",
-                "xywh": "[278.47995503768095,-112.63027842736824,3012.9591242400897,296.02031169113934]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-purple",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "JlaxkTN80t",
-                "index": "aIV",
-                "seed": 507545410,
-                "color": "--affine-palette-line-black",
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": []
-                },
-                "fontFamily": "blocksuite:surface:Poppins",
-                "textAlign": "center",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "fontSize": 36
-              },
-              "cD12FctEyF": {
-                "type": "shape",
-                "xywh": "[269.7356162322932,206.94326618055396,3017.274816941139,296.02031169113934]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-blue",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "cD12FctEyF",
-                "index": "aJV",
-                "seed": 271186894,
-                "color": "--affine-palette-line-black",
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": []
-                },
-                "fontFamily": "blocksuite:surface:Poppins",
-                "textAlign": "center",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "fontSize": 36
-              },
-              "CssVZSP7Ql": {
-                "type": "shape",
-                "xywh": "[277.5361712988593,526.5168107884763,3017.274816941139,296.02031169113934]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-green",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "CssVZSP7Ql",
-                "index": "aKV",
-                "seed": 1227614862,
-                "color": "--affine-palette-line-black",
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": []
-                },
-                "fontFamily": "blocksuite:surface:Poppins",
-                "textAlign": "center",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "fontSize": 36
-              },
-              "76W_VC7vk7": {
-                "type": "group",
-                "children": {
-                  "affine:surface:ymap": true,
-                  "json": {
-                    "AVIb4ZiPXP": true,
-                    "4x2XJKGwn_": true,
-                    "Jijrtp0pzF": true,
-                    "U47lQHboUq": true,
-                    "u8uju0dmW2": true,
-                    "91B-xLOCoV": true,
-                    "sqVx2TNQWX": true
-                  }
-                },
-                "title": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Group 5"
-                    }
-                  ]
-                },
-                "id": "76W_VC7vk7",
-                "index": "aL",
-                "seed": 1411929014
-              },
-              "kPLlZTGJ2a": {
-                "type": "text",
-                "xywh": "[-1298.3414896231625,-803.750191073299,750.199951171875,186]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Gantt Chart"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontSize": 124,
-                "fontFamily": "blocksuite:surface:Poppins",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "kPLlZTGJ2a",
-                "index": "aV",
-                "seed": 1859332079
-              },
-              "kJ_GyzoIyW": {
-                "type": "text",
-                "xywh": "[-1298.3414896231625,-544.0859047147646,773,618]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "A Gantt Chart template is a tool for scheduling and tracking project tasks, featuring horizontal bars representing each task's duration against a timeline.\n \nThis template helps in planning, coordinating, and tracking the progress of different tasks within a project.\n\nTo use this Gantt chart, list all project tasks with Note tool, showing dependencies and progress to effectively plan and monitor the project's schedule."
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontSize": 32,
-                "fontFamily": "blocksuite:surface:Poppins",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "kJ_GyzoIyW",
-                "index": "aW",
-                "seed": 955288836,
-                "hasMaxWidth": true
-              },
-              "O6qW3_N5u9": {
-                "type": "group",
-                "children": {
-                  "affine:surface:ymap": true,
-                  "json": {
-                    "kPLlZTGJ2a": true,
-                    "kJ_GyzoIyW": true,
-                    "block:RluLd2sc_d": true
-                  }
-                },
-                "title": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Group 2"
-                    }
-                  ]
-                },
-                "id": "O6qW3_N5u9",
-                "index": "aX",
-                "seed": 941281115,
-                "xywh": "[-1369.0598801721192,-871.3958143989109,920.5142368336792,979.9740584030159]"
-              }
-            }
-          },
-          "children": []
-        },
-        {
-          "type": "block",
-          "id": "block:aq9_cHIa1D",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[354.3509961388838,589.2444991125155,433.12456861620115,102]",
-            "background": "--affine-tag-green",
-            "index": "aM",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 8,
-                "borderSize": 2,
-                "borderStyle": "solid",
-                "shadowType": ""
-              },
-              "collapse": false,
-              "collapsedHeight": 101.26547202042082
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:nIuruAWuoj",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h4",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Operation Team Task 1..."
-                    }
-                  ]
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:9obRouUIDj",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[316.9434255755823,-388.5999870023072,956.5023831485366,102]",
-            "background": "--affine-tag-orange",
-            "index": "aN",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 8,
-                "borderSize": 2,
-                "borderStyle": "solid",
-                "shadowType": ""
-              },
-              "collapse": false,
-              "collapsedHeight": 101.26547202042082
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:1-MMgcXt3h",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h4",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Product Team Task 1..."
-                    }
-                  ]
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:_IIxA-ffLb",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[2349.4085591451085,690.5099711329365,917.5646433088205,102]",
-            "background": "--affine-tag-green",
-            "index": "aO",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 8,
-                "borderSize": 2,
-                "borderStyle": "solid",
-                "shadowType": ""
-              },
-              "collapse": false,
-              "collapsedHeight": 101.26547202042082
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:kT9fouZODa",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h4",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Operation Team Task 2..."
-                    }
-                  ]
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:iNntFCFxdI",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[775.7257472299925,-67.22559886985249,512.2848801152704,102]",
-            "background": "--affine-tag-pink",
-            "index": "aP",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 8,
-                "borderSize": 2,
-                "borderStyle": "solid",
-                "shadowType": ""
-              },
-              "collapse": false,
-              "collapsedHeight": 101.26547202042082
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:Do0jfdYh2o",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h4",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Design Team Task 1..."
-                    }
-                  ]
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:c-gKBjfigA",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[963.8184872780671,56.095071913649605,807.9424593814309,102]",
-            "background": "--affine-tag-pink",
-            "index": "aQ",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 8,
-                "borderSize": 2,
-                "borderStyle": "solid",
-                "shadowType": ""
-              },
-              "collapse": false,
-              "collapsedHeight": 101.26547202042082
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:jHi6hEyyPG",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h4",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Design Team Task 2..."
-                    }
-                  ]
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:-hve0fbnPx",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[1795.969378325836,242.86308190669,760.1443117093463,102.00000000000003]",
-            "background": "--affine-tag-blue",
-            "index": "aR",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 8,
-                "borderSize": 2,
-                "borderStyle": "solid",
-                "shadowType": ""
-              },
-              "collapse": true,
-              "collapsedHeight": 101.26547202042082
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:Ko0OxU7l7l",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h4",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Development Team Task 2..."
-                    }
-                  ]
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:mrTjrA9YLx",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[963.8184872780671,242.86308190668998,512.2848801152704,102]",
-            "background": "--affine-tag-blue",
-            "index": "aS",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 8,
-                "borderSize": 2,
-                "borderStyle": "solid",
-                "shadowType": ""
-              },
-              "collapse": false,
-              "collapsedHeight": 101.26547202042082
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:qcuPs9AdGh",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h4",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Development Team Task 1..."
-                    }
-                  ]
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:0UfZMXMwkc",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[1795.969378325836,365.0437621455573,1463.4164242767897,102]",
-            "background": "--affine-tag-blue",
-            "index": "aT",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 8,
-                "borderSize": 2,
-                "borderStyle": "solid",
-                "shadowType": ""
-              },
-              "collapse": false,
-              "collapsedHeight": 101.26547202042082
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:Uf8v8Vd8Ls",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h4",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Development Team Task 3..."
-                    }
-                  ]
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:Y3Rulg_t9m",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[2349.4085591451085,-286.5999870023072,454.45160923865933,102]",
-            "background": "--affine-tag-orange",
-            "index": "aU",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 8,
-                "borderSize": 2,
-                "borderStyle": "solid",
-                "shadowType": ""
-              },
-              "collapse": false,
-              "collapsedHeight": 101.26547202042082
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:w3FOkZs0gK",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h4",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Product Team Task 2..."
-                    }
-                  ]
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:RluLd2sc_d",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[-1370.2665204062384,-851.4464860788814,920.5142368336792,979.9740584030159]",
-            "background": "--affine-background-secondary-color",
-            "index": "Zz",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 32,
-                "borderSize": 4,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-film"
-              },
-              "collapse": true
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:oFgj4l6pWP",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "text",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            }
-          ]
-        }
-      ]
-    }
-  }
-}
diff --git a/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/gantt-chart.ts b/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/gantt-chart.ts
new file mode 100644
index 000000000000..aff0918f1093
--- /dev/null
+++ b/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/gantt-chart.ts
@@ -0,0 +1,1002 @@
+import type { Template } from '../builtin-templates.js';
+
+export const ganttChart: Template = {
+  name: 'gantt chart',
+  preview: '',
+  content: {
+    type: 'page',
+    meta: {
+      id: 'page:PmFlWlI_4A',
+      title: 'Gantt Chart',
+      createDate: 1701934642712,
+      tags: [],
+    },
+    blocks: {
+      type: 'block',
+      id: 'block:rZpJOZThKA',
+      flavour: 'affine:page',
+      props: {
+        title: {
+          '$blocksuite:internal:text$': true,
+          delta: [
+            {
+              insert: 'Monthly Calendar',
+            },
+          ],
+        },
+      },
+      children: [
+        {
+          type: 'block',
+          id: 'block:rMNPdVXkf7',
+          flavour: 'affine:surface',
+          props: {
+            elements: {
+              u6zHdmzOu9: {
+                type: 'shape',
+                xywh: '[-228.11828107498832,-872.3958143989109,3513.474350882585,189.5444781885874]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-orange',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: 'u6zHdmzOu9',
+                index: 'a0',
+                seed: 104302524,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Project name',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontFamily: 'blocksuite:surface:Poppins',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                fontSize: 64,
+              },
+              '93OlKObB50': {
+                type: 'shape',
+                xywh: '[-228.47362662152972,-432.20382303529044,477.0141135841853,296.02031169113934]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-tangerine',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: '93OlKObB50',
+                index: 'aHG',
+                seed: 1385846865,
+                color: '--affine-palette-line-black',
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Product Team',
+                    },
+                  ],
+                },
+                fontFamily: 'blocksuite:surface:Poppins',
+                textAlign: 'center',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                fontSize: 36,
+              },
+              g05yHKlh0B: {
+                type: 'shape',
+                xywh: '[-228.47362662152972,-112.63027842736824,477.0141135841853,296.02031169113934]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-purple',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: 'g05yHKlh0B',
+                index: 'aIG',
+                seed: 1024566422,
+                color: '--affine-palette-line-black',
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Design Team',
+                    },
+                  ],
+                },
+                fontFamily: 'blocksuite:surface:Poppins',
+                textAlign: 'center',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                fontSize: 36,
+              },
+              Y7LUOwz66o: {
+                type: 'shape',
+                xywh: '[-228.47362662152972,206.94326618055396,477.0141135841853,296.02031169113934]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-blue',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: 'Y7LUOwz66o',
+                index: 'aJG',
+                seed: 1725109778,
+                color: '--affine-palette-line-black',
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Development Team',
+                    },
+                  ],
+                },
+                fontFamily: 'blocksuite:surface:Poppins',
+                textAlign: 'center',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                fontSize: 36,
+              },
+              'c3PiLo-5WC': {
+                type: 'shape',
+                xywh: '[-228.47362662152972,526.5168107884763,477.0141135841853,296.02031169113934]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-green',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: 'c3PiLo-5WC',
+                index: 'aKG',
+                seed: 443669891,
+                color: '--affine-palette-line-black',
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Operations Team',
+                    },
+                  ],
+                },
+                fontFamily: 'blocksuite:surface:Poppins',
+                textAlign: 'center',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                fontSize: 36,
+              },
+              AVIb4ZiPXP: {
+                type: 'shape',
+                xywh: '[-228.47362662152972,-660.7570559520733,478.81955237391344,205]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-yellow',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: 'AVIb4ZiPXP',
+                index: 'a6',
+                seed: 1446871931,
+                color: '--affine-palette-line-black',
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Team',
+                    },
+                  ],
+                },
+                fontFamily: 'blocksuite:surface:Poppins',
+                textAlign: 'center',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                fontSize: 36,
+              },
+              '4x2XJKGwn_': {
+                type: 'shape',
+                xywh: '[277.6371246153118,-660.7570559520733,478.81955237391344,205]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-yellow',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: '4x2XJKGwn_',
+                index: 'a7',
+                seed: 1562786805,
+                color: '--affine-palette-line-black',
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Week 1',
+                    },
+                  ],
+                },
+                fontFamily: 'blocksuite:surface:Poppins',
+                textAlign: 'center',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                fontSize: 36,
+              },
+              Jijrtp0pzF: {
+                type: 'shape',
+                xywh: '[783.7478758521531,-660.7570559520733,478.81955237391344,205]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-yellow',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: 'Jijrtp0pzF',
+                index: 'a8',
+                seed: 369041213,
+                color: '--affine-palette-line-black',
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Week 2',
+                    },
+                  ],
+                },
+                fontFamily: 'blocksuite:surface:Poppins',
+                textAlign: 'center',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                fontSize: 36,
+              },
+              U47lQHboUq: {
+                type: 'shape',
+                xywh: '[1289.8586270889946,-660.7570559520733,478.81955237391344,205]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-yellow',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: 'U47lQHboUq',
+                index: 'a9',
+                seed: 1889247856,
+                color: '--affine-palette-line-black',
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Week 3',
+                    },
+                  ],
+                },
+                fontFamily: 'blocksuite:surface:Poppins',
+                textAlign: 'center',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                fontSize: 36,
+              },
+              u8uju0dmW2: {
+                type: 'shape',
+                xywh: '[1795.9693783258363,-660.7570559520733,478.81955237391344,205]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-yellow',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: 'u8uju0dmW2',
+                index: 'aA',
+                seed: 706323358,
+                color: '--affine-palette-line-black',
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Week 4',
+                    },
+                  ],
+                },
+                fontFamily: 'blocksuite:surface:Poppins',
+                textAlign: 'center',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                fontSize: 36,
+              },
+              '91B-xLOCoV': {
+                type: 'shape',
+                xywh: '[2302.0801295626775,-660.7570559520733,478.81955237391344,205]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-yellow',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: '91B-xLOCoV',
+                index: 'aB',
+                seed: 1512922881,
+                color: '--affine-palette-line-black',
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Week 5',
+                    },
+                  ],
+                },
+                fontFamily: 'blocksuite:surface:Poppins',
+                textAlign: 'center',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                fontSize: 36,
+              },
+              sqVx2TNQWX: {
+                type: 'shape',
+                xywh: '[2808.1908807995187,-660.7570559520733,478.81955237391344,205]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-yellow',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: 'sqVx2TNQWX',
+                index: 'aC',
+                seed: 1447411329,
+                color: '--affine-palette-line-black',
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Week 6',
+                    },
+                  ],
+                },
+                fontFamily: 'blocksuite:surface:Poppins',
+                textAlign: 'center',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                fontSize: 36,
+              },
+              gssA_v6u7r: {
+                type: 'shape',
+                xywh: '[278.47995496942906,-432.20382303529044,3009.9808921247977,295.9836515351721]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-tangerine',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: 'gssA_v6u7r',
+                index: 'aHV',
+                seed: 1767513575,
+                color: '--affine-palette-line-black',
+              },
+              JlaxkTN80t: {
+                type: 'shape',
+                xywh: '[278.47995503768095,-112.63027842736824,3012.9591242400897,296.02031169113934]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-purple',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: 'JlaxkTN80t',
+                index: 'aIV',
+                seed: 507545410,
+                color: '--affine-palette-line-black',
+                text: {
+                  'affine:surface:text': true,
+                  delta: [],
+                },
+                fontFamily: 'blocksuite:surface:Poppins',
+                textAlign: 'center',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                fontSize: 36,
+              },
+              cD12FctEyF: {
+                type: 'shape',
+                xywh: '[269.7356162322932,206.94326618055396,3017.274816941139,296.02031169113934]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-blue',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: 'cD12FctEyF',
+                index: 'aJV',
+                seed: 271186894,
+                color: '--affine-palette-line-black',
+                text: {
+                  'affine:surface:text': true,
+                  delta: [],
+                },
+                fontFamily: 'blocksuite:surface:Poppins',
+                textAlign: 'center',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                fontSize: 36,
+              },
+              CssVZSP7Ql: {
+                type: 'shape',
+                xywh: '[277.5361712988593,526.5168107884763,3017.274816941139,296.02031169113934]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-green',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: 'CssVZSP7Ql',
+                index: 'aKV',
+                seed: 1227614862,
+                color: '--affine-palette-line-black',
+                text: {
+                  'affine:surface:text': true,
+                  delta: [],
+                },
+                fontFamily: 'blocksuite:surface:Poppins',
+                textAlign: 'center',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                fontSize: 36,
+              },
+              '76W_VC7vk7': {
+                type: 'group',
+                children: {
+                  'affine:surface:ymap': true,
+                  json: {
+                    AVIb4ZiPXP: true,
+                    '4x2XJKGwn_': true,
+                    Jijrtp0pzF: true,
+                    U47lQHboUq: true,
+                    u8uju0dmW2: true,
+                    '91B-xLOCoV': true,
+                    sqVx2TNQWX: true,
+                  },
+                },
+                title: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Group 5',
+                    },
+                  ],
+                },
+                id: '76W_VC7vk7',
+                index: 'aL',
+                seed: 1411929014,
+              },
+              kPLlZTGJ2a: {
+                type: 'text',
+                xywh: '[-1298.3414896231625,-803.750191073299,750.199951171875,186]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Gantt Chart',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontSize: 124,
+                fontFamily: 'blocksuite:surface:Poppins',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: 'kPLlZTGJ2a',
+                index: 'aV',
+                seed: 1859332079,
+              },
+              kJ_GyzoIyW: {
+                type: 'text',
+                xywh: '[-1298.3414896231625,-544.0859047147646,773,618]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert:
+                        "A Gantt Chart template is a tool for scheduling and tracking project tasks, featuring horizontal bars representing each task's duration against a timeline.\n \nThis template helps in planning, coordinating, and tracking the progress of different tasks within a project.\n\nTo use this Gantt chart, list all project tasks with Note tool, showing dependencies and progress to effectively plan and monitor the project's schedule.",
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontSize: 32,
+                fontFamily: 'blocksuite:surface:Poppins',
+                fontWeight: '400',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: 'kJ_GyzoIyW',
+                index: 'aW',
+                seed: 955288836,
+                hasMaxWidth: true,
+              },
+              O6qW3_N5u9: {
+                type: 'group',
+                children: {
+                  'affine:surface:ymap': true,
+                  json: {
+                    kPLlZTGJ2a: true,
+                    kJ_GyzoIyW: true,
+                    'block:RluLd2sc_d': true,
+                  },
+                },
+                title: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Group 2',
+                    },
+                  ],
+                },
+                id: 'O6qW3_N5u9',
+                index: 'aX',
+                seed: 941281115,
+                xywh: '[-1369.0598801721192,-871.3958143989109,920.5142368336792,979.9740584030159]',
+              },
+            },
+          },
+          children: [],
+        },
+        {
+          type: 'block',
+          id: 'block:aq9_cHIa1D',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[354.3509961388838,589.2444991125155,433.12456861620115,102]',
+            background: '--affine-tag-green',
+            index: 'aM',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 8,
+                borderSize: 2,
+                borderStyle: 'solid',
+                shadowType: '',
+              },
+              collapse: false,
+              collapsedHeight: 101.26547202042082,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:nIuruAWuoj',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h4',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Operation Team Task 1...',
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:9obRouUIDj',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[316.9434255755823,-388.5999870023072,956.5023831485366,102]',
+            background: '--affine-tag-orange',
+            index: 'aN',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 8,
+                borderSize: 2,
+                borderStyle: 'solid',
+                shadowType: '',
+              },
+              collapse: false,
+              collapsedHeight: 101.26547202042082,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:1-MMgcXt3h',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h4',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Product Team Task 1...',
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:_IIxA-ffLb',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[2349.4085591451085,690.5099711329365,917.5646433088205,102]',
+            background: '--affine-tag-green',
+            index: 'aO',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 8,
+                borderSize: 2,
+                borderStyle: 'solid',
+                shadowType: '',
+              },
+              collapse: false,
+              collapsedHeight: 101.26547202042082,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:kT9fouZODa',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h4',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Operation Team Task 2...',
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:iNntFCFxdI',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[775.7257472299925,-67.22559886985249,512.2848801152704,102]',
+            background: '--affine-tag-pink',
+            index: 'aP',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 8,
+                borderSize: 2,
+                borderStyle: 'solid',
+                shadowType: '',
+              },
+              collapse: false,
+              collapsedHeight: 101.26547202042082,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:Do0jfdYh2o',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h4',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Design Team Task 1...',
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:c-gKBjfigA',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[963.8184872780671,56.095071913649605,807.9424593814309,102]',
+            background: '--affine-tag-pink',
+            index: 'aQ',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 8,
+                borderSize: 2,
+                borderStyle: 'solid',
+                shadowType: '',
+              },
+              collapse: false,
+              collapsedHeight: 101.26547202042082,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:jHi6hEyyPG',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h4',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Design Team Task 2...',
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:-hve0fbnPx',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[1795.969378325836,242.86308190669,760.1443117093463,102.00000000000003]',
+            background: '--affine-tag-blue',
+            index: 'aR',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 8,
+                borderSize: 2,
+                borderStyle: 'solid',
+                shadowType: '',
+              },
+              collapse: true,
+              collapsedHeight: 101.26547202042082,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:Ko0OxU7l7l',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h4',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Development Team Task 2...',
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:mrTjrA9YLx',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[963.8184872780671,242.86308190668998,512.2848801152704,102]',
+            background: '--affine-tag-blue',
+            index: 'aS',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 8,
+                borderSize: 2,
+                borderStyle: 'solid',
+                shadowType: '',
+              },
+              collapse: false,
+              collapsedHeight: 101.26547202042082,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:qcuPs9AdGh',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h4',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Development Team Task 1...',
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:0UfZMXMwkc',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[1795.969378325836,365.0437621455573,1463.4164242767897,102]',
+            background: '--affine-tag-blue',
+            index: 'aT',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 8,
+                borderSize: 2,
+                borderStyle: 'solid',
+                shadowType: '',
+              },
+              collapse: false,
+              collapsedHeight: 101.26547202042082,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:Uf8v8Vd8Ls',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h4',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Development Team Task 3...',
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:Y3Rulg_t9m',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[2349.4085591451085,-286.5999870023072,454.45160923865933,102]',
+            background: '--affine-tag-orange',
+            index: 'aU',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 8,
+                borderSize: 2,
+                borderStyle: 'solid',
+                shadowType: '',
+              },
+              collapse: false,
+              collapsedHeight: 101.26547202042082,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:w3FOkZs0gK',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h4',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Product Team Task 2...',
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:RluLd2sc_d',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[-1370.2665204062384,-851.4464860788814,920.5142368336792,979.9740584030159]',
+            background: '--affine-background-secondary-color',
+            index: 'Zz',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 32,
+                borderSize: 4,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-film',
+              },
+              collapse: true,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:oFgj4l6pWP',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+      ],
+    },
+  },
+};
diff --git a/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/kanban.json b/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/kanban.json
deleted file mode 100644
index 533c08460c00..000000000000
--- a/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/kanban.json
+++ /dev/null
@@ -1,899 +0,0 @@
-{
-  "name": "kanban",
-  "preview": "",
-  "content": {
-    "type": "page",
-    "meta": {
-      "id": "page:home",
-      "title": "BlockSuite Playground",
-      "createDate": 1701765881935,
-      "tags": []
-    },
-    "blocks": {
-      "type": "block",
-      "id": "block:1VxnfD_8xb",
-      "flavour": "affine:page",
-      "props": {
-        "title": {
-          "$blocksuite:internal:text$": true,
-          "delta": [
-            {
-              "insert": "BlockSuite Playground"
-            }
-          ]
-        }
-      },
-      "children": [
-        {
-          "type": "block",
-          "id": "block:pcmYJQ63hX",
-          "flavour": "affine:surface",
-          "props": {
-            "elements": {
-              "6Q-N18m1h7": {
-                "type": "text",
-                "xywh": "[1003.312197418738,-2610.2482247992803,895.1110308192447,108]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "This column represents tasks that are scheduled but not yet started."
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontSize": 36,
-                "fontFamily": "blocksuite:surface:Poppins",
-                "fontWeight": "600",
-                "fontStyle": "italic",
-                "textAlign": "left",
-                "id": "6Q-N18m1h7",
-                "index": "aD",
-                "seed": 818008543,
-                "hasMaxWidth": true
-              },
-              "edyYUt_oJL": {
-                "type": "text",
-                "xywh": "[2438.152409845841,-2611.6320997176986,1015.487548828125,54]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "This column shows tasks that are currently in progress."
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontSize": 36,
-                "fontFamily": "blocksuite:surface:Poppins",
-                "fontWeight": "600",
-                "fontStyle": "italic",
-                "textAlign": "left",
-                "id": "edyYUt_oJL",
-                "index": "aE",
-                "seed": 1621352812
-              },
-              "6Qh8zbMziO": {
-                "type": "text",
-                "xywh": "[4242.464346633909,-2612.6320997176986,1005.5516357421875,54]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "This column includes tasks that have been completed."
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontSize": 36,
-                "fontFamily": "blocksuite:surface:Poppins",
-                "fontWeight": "600",
-                "fontStyle": "italic",
-                "textAlign": "left",
-                "id": "6Qh8zbMziO",
-                "index": "aF",
-                "seed": 507015729
-              },
-              "BmOmdekpay": {
-                "type": "text",
-                "xywh": "[181.50669753721104,-2571.5509442882258,462.51983642578125,54]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Project tracking Kanban"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontSize": 40,
-                "fontFamily": "blocksuite:surface:Satoshi",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "BmOmdekpay",
-                "index": "aG",
-                "seed": 748310487
-              },
-              "JI8htWNAxX": {
-                "type": "text",
-                "xywh": "[181.50669753721104,-2460.1670693698075,543,130]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "A Kanban template for project tracking typically includes a visual board divided into columns representing different stages of a project, such as \"planned,\" \"ongoing,\" and \"Complete.\""
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontSize": 24,
-                "fontFamily": "blocksuite:surface:Satoshi",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "JI8htWNAxX",
-                "index": "aH",
-                "seed": 810997411,
-                "hasMaxWidth": true
-              },
-              "-K-H02zO-R": {
-                "type": "text",
-                "xywh": "[181.506697537211,-2296.6176968560217,543,130]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "This template allows tasks to be added as cards under these columns. As work progresses, cards are moved along the columns, offering a clear, real-time view of the project's progress."
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontSize": 24,
-                "fontFamily": "blocksuite:surface:Satoshi",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "-K-H02zO-R",
-                "index": "aI",
-                "seed": 1630326155,
-                "hasMaxWidth": true
-              },
-              "-vvVHIw4aX": {
-                "type": "text",
-                "xywh": "[181.50669753721104,-2127.40067068264,543,97.5]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "This template is useful for managing workflow, prioritizing tasks, and ensuring efficient project execution."
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontSize": 24,
-                "fontFamily": "blocksuite:surface:Satoshi",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "-vvVHIw4aX",
-                "index": "aJ",
-                "seed": 1907471211,
-                "hasMaxWidth": true
-              },
-              "J_7Uy0M1s3": {
-                "type": "group",
-                "children": {
-                  "affine:surface:ymap": true,
-                  "json": {
-                    "BmOmdekpay": true,
-                    "JI8htWNAxX": true,
-                    "-K-H02zO-R": true,
-                    "-vvVHIw4aX": true,
-                    "block:nc1pGg4Gsh": true
-                  }
-                },
-                "title": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Group 1"
-                    }
-                  ]
-                },
-                "id": "J_7Uy0M1s3",
-                "index": "aK",
-                "seed": 482315495
-              }
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:0TfuSHlg-r",
-              "flavour": "affine:frame",
-              "props": {
-                "title": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Planned"
-                    }
-                  ]
-                },
-                "background": "--affine-tag-purple",
-                "xywh": "[903.6314320451293,-2646.170782828957,1392.4777890462692,2009.7726069909259]",
-                "index": "a0"
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:ud0l5lpJ4M",
-              "flavour": "affine:frame",
-              "props": {
-                "title": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Ongoing"
-                    }
-                  ]
-                },
-                "background": "--affine-tag-yellow",
-                "xywh": "[2408.687017161555,-2646.170782828957,1663.3762265462692,1987.9080784643184]",
-                "index": "a1"
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:13f5S1cQAf",
-              "flavour": "affine:frame",
-              "props": {
-                "title": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Complete"
-                    }
-                  ]
-                },
-                "background": "--affine-tag-gray",
-                "xywh": "[4200.563769981869,-2646.170782828957,1620.2902890462692,1987.9080784643184]",
-                "index": "a2"
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:nc1pGg4Gsh",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[138.15040568039362,-2623.7164418835932,643.6167403419201,760.6976526754111]",
-            "background": "--affine-background-secondary-color",
-            "index": "a0",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 8,
-                "borderSize": 4,
-                "borderStyle": "solid",
-                "shadowType": "--affine-note-shadow-film"
-              },
-              "collapse": true
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:Gf__igY0HL",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "text",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:pzEpwxhPSW",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[1025.8905595508895,-2367.9643675746183,364,360.7657696824615]",
-            "background": "--affine-tag-orange",
-            "index": "a1",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 4,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true,
-              "collapsedHeight": 362.53729127607653
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:8BDU90iR2j",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h1",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:dsUdpkG1uN",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "text",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:JrxG4A4-bl",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "text",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:Uo8YsWZDdn",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "text",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:_9TBhYB2z6",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "text",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:B_Mw4hOTa9",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[1455.9038157514049,-2367.9643675746183,364,345.6208786944021]",
-            "background": "--affine-tag-orange",
-            "index": "a2",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 4,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true,
-              "collapsedHeight": 342.4265140043026
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:Ea6Y3x2abb",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h1",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:bn_mCM4lQY",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[2531.5121606788566,-2362.172146460574,364,360.690320348461]",
-            "background": "--affine-tag-red",
-            "index": "a3",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 4,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true,
-              "collapsedHeight": 362.53729127607653
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:FI8iP8THFj",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h1",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:fFBqn5mixY",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "text",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:VgRB3pm31s",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[3025.821367582859,-2376.4225738654554,364,362.53729127607653]",
-            "background": "--affine-tag-red",
-            "index": "a4",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 4,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:HNYhsiS5CY",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h1",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:1y7yxc_hnc",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[2555.197481910908,-1886.0200352647353,364,362.53729127607653]",
-            "background": "--affine-tag-red",
-            "index": "a5",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 4,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:2bef40UnVW",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h3",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:Ykf1Rx3kie",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[4318.089419077733,-2362.172146460574,364,360.690320348461]",
-            "background": "--affine-tag-blue",
-            "index": "a6",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 4,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true,
-              "collapsedHeight": 362.53729127607653
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:Ecdib6wqhO",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h1",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:Rzm3SAcKwH",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "text",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:Vq7mkZYRdb",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[1025.8905595508895,-2367.9643675746183,364,360.7657696824615]",
-            "background": "--affine-tag-orange",
-            "index": "a7",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 4,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true,
-              "collapsedHeight": 362.53729127607653
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:0J5krbr4VR",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h1",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:7NzKliNr5z",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "text",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:z6ssTxchJP",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "text",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:AT20JufICI",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "text",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:8vpXc-Bjig",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "text",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:J714CSXe6U",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[1455.9038157514049,-2367.9643675746183,364,345.6208786944021]",
-            "background": "--affine-tag-orange",
-            "index": "a8",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 4,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true,
-              "collapsedHeight": 342.4265140043026
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:z61oo3iBr_",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h1",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:F-TNp7zwe4",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[2531.5121606788566,-2362.172146460574,364,360.690320348461]",
-            "background": "--affine-tag-red",
-            "index": "a9",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 4,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true,
-              "collapsedHeight": 362.53729127607653
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:lvduEYLjUU",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h1",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:MM27Z-LS1p",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "text",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:eMA160AKGf",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[3025.821367582859,-2376.4225738654554,364,362.53729127607653]",
-            "background": "--affine-tag-red",
-            "index": "aA",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 4,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:DJnew1ZOyX",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h1",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:RF0q5wPdA4",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[2555.197481910908,-1886.0200352647353,364,362.53729127607653]",
-            "background": "--affine-tag-red",
-            "index": "aB",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 4,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:suo3BHqc9o",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h3",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:KmvUmTxuKl",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[4318.089419077733,-2362.172146460574,364,360.690320348461]",
-            "background": "--affine-tag-blue",
-            "index": "aC",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 4,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true,
-              "collapsedHeight": 362.53729127607653
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:8epKIrafPT",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h1",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:-D3q4nMZ6s",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "text",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            }
-          ]
-        }
-      ]
-    }
-  }
-}
diff --git a/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/kanban.ts b/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/kanban.ts
new file mode 100644
index 000000000000..b0a60e83d262
--- /dev/null
+++ b/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/kanban.ts
@@ -0,0 +1,907 @@
+import type { Template } from '../builtin-templates.js';
+
+export const kanban: Template = {
+  name: 'kanban',
+  preview: '',
+  content: {
+    type: 'page',
+    meta: {
+      id: 'page:home',
+      title: 'BlockSuite Playground',
+      createDate: 1701765881935,
+      tags: [],
+    },
+    blocks: {
+      type: 'block',
+      id: 'block:1VxnfD_8xb',
+      flavour: 'affine:page',
+      props: {
+        title: {
+          '$blocksuite:internal:text$': true,
+          delta: [
+            {
+              insert: 'BlockSuite Playground',
+            },
+          ],
+        },
+      },
+      children: [
+        {
+          type: 'block',
+          id: 'block:pcmYJQ63hX',
+          flavour: 'affine:surface',
+          props: {
+            elements: {
+              '6Q-N18m1h7': {
+                type: 'text',
+                xywh: '[1003.312197418738,-2610.2482247992803,895.1110308192447,108]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert:
+                        'This column represents tasks that are scheduled but not yet started.',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontSize: 36,
+                fontFamily: 'blocksuite:surface:Poppins',
+                fontWeight: '600',
+                fontStyle: 'italic',
+                textAlign: 'left',
+                id: '6Q-N18m1h7',
+                index: 'aD',
+                seed: 818008543,
+                hasMaxWidth: true,
+              },
+              edyYUt_oJL: {
+                type: 'text',
+                xywh: '[2438.152409845841,-2611.6320997176986,1015.487548828125,54]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert:
+                        'This column shows tasks that are currently in progress.',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontSize: 36,
+                fontFamily: 'blocksuite:surface:Poppins',
+                fontWeight: '600',
+                fontStyle: 'italic',
+                textAlign: 'left',
+                id: 'edyYUt_oJL',
+                index: 'aE',
+                seed: 1621352812,
+              },
+              '6Qh8zbMziO': {
+                type: 'text',
+                xywh: '[4242.464346633909,-2612.6320997176986,1005.5516357421875,54]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert:
+                        'This column includes tasks that have been completed.',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontSize: 36,
+                fontFamily: 'blocksuite:surface:Poppins',
+                fontWeight: '600',
+                fontStyle: 'italic',
+                textAlign: 'left',
+                id: '6Qh8zbMziO',
+                index: 'aF',
+                seed: 507015729,
+              },
+              BmOmdekpay: {
+                type: 'text',
+                xywh: '[181.50669753721104,-2571.5509442882258,462.51983642578125,54]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Project tracking Kanban',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontSize: 40,
+                fontFamily: 'blocksuite:surface:Satoshi',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: 'BmOmdekpay',
+                index: 'aG',
+                seed: 748310487,
+              },
+              JI8htWNAxX: {
+                type: 'text',
+                xywh: '[181.50669753721104,-2460.1670693698075,543,130]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert:
+                        'A Kanban template for project tracking typically includes a visual board divided into columns representing different stages of a project, such as "planned," "ongoing," and "Complete."',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontSize: 24,
+                fontFamily: 'blocksuite:surface:Satoshi',
+                fontWeight: '400',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: 'JI8htWNAxX',
+                index: 'aH',
+                seed: 810997411,
+                hasMaxWidth: true,
+              },
+              '-K-H02zO-R': {
+                type: 'text',
+                xywh: '[181.506697537211,-2296.6176968560217,543,130]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert:
+                        "This template allows tasks to be added as cards under these columns. As work progresses, cards are moved along the columns, offering a clear, real-time view of the project's progress.",
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontSize: 24,
+                fontFamily: 'blocksuite:surface:Satoshi',
+                fontWeight: '400',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: '-K-H02zO-R',
+                index: 'aI',
+                seed: 1630326155,
+                hasMaxWidth: true,
+              },
+              '-vvVHIw4aX': {
+                type: 'text',
+                xywh: '[181.50669753721104,-2127.40067068264,543,97.5]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert:
+                        'This template is useful for managing workflow, prioritizing tasks, and ensuring efficient project execution.',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontSize: 24,
+                fontFamily: 'blocksuite:surface:Satoshi',
+                fontWeight: '400',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: '-vvVHIw4aX',
+                index: 'aJ',
+                seed: 1907471211,
+                hasMaxWidth: true,
+              },
+              J_7Uy0M1s3: {
+                type: 'group',
+                children: {
+                  'affine:surface:ymap': true,
+                  json: {
+                    BmOmdekpay: true,
+                    JI8htWNAxX: true,
+                    '-K-H02zO-R': true,
+                    '-vvVHIw4aX': true,
+                    'block:nc1pGg4Gsh': true,
+                  },
+                },
+                title: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Group 1',
+                    },
+                  ],
+                },
+                id: 'J_7Uy0M1s3',
+                index: 'aK',
+                seed: 482315495,
+              },
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:0TfuSHlg-r',
+              flavour: 'affine:frame',
+              props: {
+                title: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Planned',
+                    },
+                  ],
+                },
+                background: '--affine-tag-purple',
+                xywh: '[903.6314320451293,-2646.170782828957,1392.4777890462692,2009.7726069909259]',
+                index: 'a0',
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:ud0l5lpJ4M',
+              flavour: 'affine:frame',
+              props: {
+                title: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Ongoing',
+                    },
+                  ],
+                },
+                background: '--affine-tag-yellow',
+                xywh: '[2408.687017161555,-2646.170782828957,1663.3762265462692,1987.9080784643184]',
+                index: 'a1',
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:13f5S1cQAf',
+              flavour: 'affine:frame',
+              props: {
+                title: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Complete',
+                    },
+                  ],
+                },
+                background: '--affine-tag-gray',
+                xywh: '[4200.563769981869,-2646.170782828957,1620.2902890462692,1987.9080784643184]',
+                index: 'a2',
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:nc1pGg4Gsh',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[138.15040568039362,-2623.7164418835932,643.6167403419201,760.6976526754111]',
+            background: '--affine-background-secondary-color',
+            index: 'a0',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 8,
+                borderSize: 4,
+                borderStyle: 'solid',
+                shadowType: '--affine-note-shadow-film',
+              },
+              collapse: true,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:Gf__igY0HL',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:pzEpwxhPSW',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[1025.8905595508895,-2367.9643675746183,364,360.7657696824615]',
+            background: '--affine-tag-orange',
+            index: 'a1',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 4,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+              collapsedHeight: 362.53729127607653,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:8BDU90iR2j',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h1',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:dsUdpkG1uN',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:JrxG4A4-bl',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:Uo8YsWZDdn',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:_9TBhYB2z6',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:B_Mw4hOTa9',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[1455.9038157514049,-2367.9643675746183,364,345.6208786944021]',
+            background: '--affine-tag-orange',
+            index: 'a2',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 4,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+              collapsedHeight: 342.4265140043026,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:Ea6Y3x2abb',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h1',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:bn_mCM4lQY',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[2531.5121606788566,-2362.172146460574,364,360.690320348461]',
+            background: '--affine-tag-red',
+            index: 'a3',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 4,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+              collapsedHeight: 362.53729127607653,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:FI8iP8THFj',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h1',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:fFBqn5mixY',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:VgRB3pm31s',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[3025.821367582859,-2376.4225738654554,364,362.53729127607653]',
+            background: '--affine-tag-red',
+            index: 'a4',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 4,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:HNYhsiS5CY',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h1',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:1y7yxc_hnc',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[2555.197481910908,-1886.0200352647353,364,362.53729127607653]',
+            background: '--affine-tag-red',
+            index: 'a5',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 4,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:2bef40UnVW',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h3',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:Ykf1Rx3kie',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[4318.089419077733,-2362.172146460574,364,360.690320348461]',
+            background: '--affine-tag-blue',
+            index: 'a6',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 4,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+              collapsedHeight: 362.53729127607653,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:Ecdib6wqhO',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h1',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:Rzm3SAcKwH',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:Vq7mkZYRdb',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[1025.8905595508895,-2367.9643675746183,364,360.7657696824615]',
+            background: '--affine-tag-orange',
+            index: 'a7',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 4,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+              collapsedHeight: 362.53729127607653,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:0J5krbr4VR',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h1',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:7NzKliNr5z',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:z6ssTxchJP',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:AT20JufICI',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:8vpXc-Bjig',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:J714CSXe6U',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[1455.9038157514049,-2367.9643675746183,364,345.6208786944021]',
+            background: '--affine-tag-orange',
+            index: 'a8',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 4,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+              collapsedHeight: 342.4265140043026,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:z61oo3iBr_',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h1',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:F-TNp7zwe4',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[2531.5121606788566,-2362.172146460574,364,360.690320348461]',
+            background: '--affine-tag-red',
+            index: 'a9',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 4,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+              collapsedHeight: 362.53729127607653,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:lvduEYLjUU',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h1',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:MM27Z-LS1p',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:eMA160AKGf',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[3025.821367582859,-2376.4225738654554,364,362.53729127607653]',
+            background: '--affine-tag-red',
+            index: 'aA',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 4,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:DJnew1ZOyX',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h1',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:RF0q5wPdA4',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[2555.197481910908,-1886.0200352647353,364,362.53729127607653]',
+            background: '--affine-tag-red',
+            index: 'aB',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 4,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:suo3BHqc9o',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h3',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:KmvUmTxuKl',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[4318.089419077733,-2362.172146460574,364,360.690320348461]',
+            background: '--affine-tag-blue',
+            index: 'aC',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 4,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+              collapsedHeight: 362.53729127607653,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:8epKIrafPT',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h1',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:-D3q4nMZ6s',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+      ],
+    },
+  },
+};
diff --git a/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/monthly-calendar.json b/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/monthly-calendar.json
deleted file mode 100644
index 69e84233f7c8..000000000000
--- a/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/monthly-calendar.json
+++ /dev/null
@@ -1,1125 +0,0 @@
-{
-  "name": "monthly calendar",
-  "preview": "",
-  "asserts": {
-    "3Awrv7sAQ3cHTsASaFAd5Y5BUEjD8qFfLQEvj1Zgwy4=": "https://imagedelivery.net/S2JgHUJzW7ZzW77qOAfRfA/30f621a9-9d78-47df-5a11-febf50107d00/public",
-    "chxqd_X0VV-NrXrIOAlpqFqwfqR86Bzy8NTT1pbUFUM=": "https://imagedelivery.net/S2JgHUJzW7ZzW77qOAfRfA/47a92a1a-0a2f-478a-ceae-9c98da653b00/public",
-    "lgFhx14co1LjjqQgiqfUUWxhz-14X1nSIolT_NNkhx4=": "https://imagedelivery.net/S2JgHUJzW7ZzW77qOAfRfA/cd9964d8-e2b0-4be6-8d88-5efbf09de600/public",
-    "ls2DZ9NR8rjXZ3WM86wNBnVSZ5kO34avB7bR570FLHU=": "https://imagedelivery.net/S2JgHUJzW7ZzW77qOAfRfA/3dbafd92-cd52-493c-834b-dd3dd32bf400/public",
-    "qmUcg2SDLyyoabxX89Of2QjSUzobJy9uHwhUSqi4yV4=": "https://imagedelivery.net/S2JgHUJzW7ZzW77qOAfRfA/b32cdf4a-b425-4858-23e6-3543a9adcf00/public",
-    "Rwd6ofVQjyQZIYTpxYohFik92cAMrp40IfdCgo1MQJE=": "https://imagedelivery.net/S2JgHUJzW7ZzW77qOAfRfA/2e4b0a67-22e4-4ac7-a639-4f7de8f04a00/public",
-    "SHcrGOvUgwA9HCpJj2W8QASwwlbQaIi39vV81k5DsSc=": "https://imagedelivery.net/S2JgHUJzW7ZzW77qOAfRfA/02ae642c-8fef-4e62-fc49-9558976bbf00/public"
-  },
-  "content": {
-    "type": "page",
-    "meta": {
-      "id": "page:PmFlWlI_4A",
-      "title": "Monthly Calendar",
-      "createDate": 1701934642712,
-      "tags": []
-    },
-    "blocks": {
-      "type": "block",
-      "id": "block:rZpJOZThKA",
-      "flavour": "affine:page",
-      "props": {
-        "title": {
-          "$blocksuite:internal:text$": true,
-          "delta": [
-            {
-              "insert": "Monthly Calendar"
-            }
-          ]
-        }
-      },
-      "children": [
-        {
-          "type": "block",
-          "id": "block:rMNPdVXkf7",
-          "flavour": "affine:surface",
-          "props": {
-            "elements": {
-              "cXBjy0-Dm_": {
-                "type": "shape",
-                "xywh": "[-3706.2924088976333,-584.5537428299078,275.0844971371166,104]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0.1,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-white",
-                "strokeWidth": 8,
-                "strokeColor": "--affine-palette-line-red",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "cXBjy0-Dm_",
-                "index": "b0CV",
-                "seed": 87895933,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "location "
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "italic",
-                "fontSize": 24,
-                "textAlign": "right"
-              },
-              "11bzCGlL9r": {
-                "type": "shape",
-                "xywh": "[-3706.292408897633,-434.9603353572073,275.0844971371166,104]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0.1,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-white",
-                "strokeWidth": 8,
-                "strokeColor": "--affine-palette-line-tangerine",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "11bzCGlL9r",
-                "index": "b0U",
-                "seed": 2103709835,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Time "
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "italic",
-                "fontSize": 24,
-                "textAlign": "right"
-              },
-              "3V4G1V56bF": {
-                "type": "shape",
-                "xywh": "[-3706.292408897633,-285.3669278845068,275.0844971371166,104]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0.1,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-white",
-                "strokeWidth": 8,
-                "strokeColor": "--affine-palette-line-green",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "3V4G1V56bF",
-                "index": "b0GV",
-                "seed": 581338850,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Contacts "
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "italic",
-                "fontSize": 24,
-                "textAlign": "right"
-              },
-              "7AvBCTyQ2C": {
-                "type": "shape",
-                "xywh": "[-3706.292408897633,-139.09497011265762,275.0844971371166,104]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0.1,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-white",
-                "strokeWidth": 8,
-                "strokeColor": "--affine-palette-line-blue",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "7AvBCTyQ2C",
-                "index": "b0LV",
-                "seed": 678411172,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Weather "
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "italic",
-                "fontSize": 24,
-                "textAlign": "right"
-              },
-              "VRSJ64hdR3": {
-                "type": "shape",
-                "xywh": "[-3706.2924088976324,13.819887060894189,275.0844971371166,104]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0.1,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-white",
-                "strokeWidth": 8,
-                "strokeColor": "--affine-palette-line-purple",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "VRSJ64hdR3",
-                "index": "b0SV",
-                "seed": 736786412,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Travel "
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "italic",
-                "fontSize": 24,
-                "textAlign": "right"
-              },
-              "Vm3_lsVALu": {
-                "type": "shape",
-                "xywh": "[-3706.351711164446,171.84529521490538,275.0844971371166,104.13149874516338]",
-                "rotate": 0.06535769481764814,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0.1,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-white",
-                "strokeWidth": 8,
-                "strokeColor": "--affine-palette-line-green",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "Vm3_lsVALu",
-                "index": "b0X",
-                "seed": 414751887,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Cost"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "italic",
-                "fontSize": 24,
-                "textAlign": "right"
-              },
-              "R0rJM1jXn8": {
-                "type": "group",
-                "children": {
-                  "affine:surface:ymap": true,
-                  "json": {
-                    "cXBjy0-Dm_": true,
-                    "block:N24al1Qgl7": true
-                  }
-                },
-                "title": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Group 2"
-                    }
-                  ]
-                },
-                "id": "R0rJM1jXn8",
-                "index": "aqO",
-                "seed": 160763694,
-                "xywh": "[-3386.20889277408,-1114.9443678299078,275.0844971371166,104]"
-              },
-              "gXiwZ7gbKO": {
-                "type": "group",
-                "children": {
-                  "affine:surface:ymap": true,
-                  "json": {
-                    "11bzCGlL9r": true,
-                    "block:ndrvhUSaN1": true
-                  }
-                },
-                "title": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Group 3"
-                    }
-                  ]
-                },
-                "id": "gXiwZ7gbKO",
-                "index": "b0a",
-                "seed": 1151206806,
-                "xywh": "[-3386.20889277408,-965.3509603572073,275.0844971371166,104]"
-              },
-              "bfNy3qWwW8": {
-                "type": "group",
-                "children": {
-                  "affine:surface:ymap": true,
-                  "json": {
-                    "3V4G1V56bF": true,
-                    "block:Rdl-DEiyi4": true
-                  }
-                },
-                "title": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Group 4"
-                    }
-                  ]
-                },
-                "id": "bfNy3qWwW8",
-                "index": "b0b",
-                "seed": 1540134445,
-                "xywh": "[-3386.20889277408,-815.7575528845068,275.0844971371166,104]"
-              },
-              "pNiSjyIw5i": {
-                "type": "group",
-                "children": {
-                  "affine:surface:ymap": true,
-                  "json": {
-                    "7AvBCTyQ2C": true,
-                    "block:LbfY_-Dsu1": true
-                  }
-                },
-                "title": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Group 5"
-                    }
-                  ]
-                },
-                "id": "pNiSjyIw5i",
-                "index": "b0c",
-                "seed": 787762787,
-                "xywh": "[-3386.20889277408,-669.4855951126576,275.0844971371166,104]"
-              },
-              "yGFt3yXm5E": {
-                "type": "group",
-                "children": {
-                  "affine:surface:ymap": true,
-                  "json": {
-                    "VRSJ64hdR3": true,
-                    "block:auHGd3MxO9": true
-                  }
-                },
-                "title": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Group 6"
-                    }
-                  ]
-                },
-                "id": "yGFt3yXm5E",
-                "index": "b0d",
-                "seed": 1833391408,
-                "xywh": "[-3386.20889277408,-516.5707379391058,275.0844971371166,104]"
-              },
-              "FYq5XXZ07_": {
-                "type": "text",
-                "xywh": "[-3219.2387120283856,-672.3733226565537,137.7599639892578,48]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Reminders"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontSize": 32,
-                "fontFamily": "blocksuite:surface:Kalam",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "FYq5XXZ07_",
-                "index": "aq8",
-                "seed": 1656541946
-              },
-              "BMZSr_ImUD": {
-                "type": "text",
-                "xywh": "[-3706.411013432607,-1161.1135813940236,834.2004820069537,418]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "A Monthly Calendar template provides a grid or layout representing the days of a month, typically organized by weeks. \n\nIt's designed for scheduling, planning events, tracking tasks, and managing appointments. \n\nThis template is customizable for different months and years, and often includes space for notes and reminders.\n\nDrag the tags and notes below into the right table and edit it to create your personal calendar."
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontSize": 28,
-                "fontFamily": "blocksuite:surface:Satoshi",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "BMZSr_ImUD",
-                "index": "aoG",
-                "seed": 1207251732,
-                "hasMaxWidth": true
-              },
-              "BYxt0tocQt": {
-                "type": "text",
-                "xywh": "[-3705.337175296088,-1239.6179238473387,293.11993408203125,47.5]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Monthly Calendar"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontSize": 32,
-                "fontFamily": "blocksuite:surface:Poppins",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "BYxt0tocQt",
-                "index": "aoV",
-                "seed": 999761981
-              },
-              "wv-l4luCTg": {
-                "type": "text",
-                "xywh": "[-3706.411013432607,-673.8561415820222,143.23191833496094,48]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Quick Tags"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontSize": 32,
-                "fontFamily": "blocksuite:surface:Kalam",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "wv-l4luCTg",
-                "index": "ar",
-                "seed": 853708973
-              },
-              "fwnuzq04bj": {
-                "type": "connector",
-                "mode": 1,
-                "strokeWidth": 2,
-                "stroke": "--affine-palette-line-grey",
-                "strokeStyle": "dash",
-                "roughness": 1.4,
-                "source": {
-                  "position": [-3328.6304634386593, -679.1025457036071]
-                },
-                "target": {
-                  "position": [-3333.3199393044856, 295.6304026399167]
-                },
-                "controllers": [],
-                "frontEndpointStyle": "None",
-                "rearEndpointStyle": "None",
-                "id": "fwnuzq04bj",
-                "index": "ao8",
-                "seed": 671683017,
-                "rough": false,
-                "xywh": "[-3333.3242992726423,-679.0988668887398,4.6899999999996,974.74]"
-              },
-              "m_3CF51wZt": {
-                "type": "shape",
-                "xywh": "[924.0351754833779,-783.1,275.0844971371166,104]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0.1,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-white",
-                "strokeWidth": 8,
-                "strokeColor": "--affine-palette-line-blue",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "m_3CF51wZt",
-                "index": "ap",
-                "seed": 1525798825,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Weather "
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "italic",
-                "fontSize": 24,
-                "textAlign": "right"
-              },
-              "ptcY2KkWVg": {
-                "type": "group",
-                "children": {
-                  "affine:surface:ymap": true,
-                  "json": {
-                    "m_3CF51wZt": true,
-                    "block:J5zrVSACP9": true
-                  }
-                },
-                "title": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Group 5"
-                    }
-                  ]
-                },
-                "id": "ptcY2KkWVg",
-                "index": "aw",
-                "seed": 8499192,
-                "xywh": "[-3386.20889277408,-669.4855951126576,275.0844971371166,104]"
-              },
-              "2Z81fm-b-G": {
-                "type": "group",
-                "children": {
-                  "affine:surface:ymap": true,
-                  "json": {
-                    "block:Wt2kpwklYP": true,
-                    "Vm3_lsVALu": true
-                  }
-                },
-                "title": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Group 8"
-                    }
-                  ]
-                },
-                "id": "2Z81fm-b-G",
-                "index": "ax",
-                "seed": 2003365081
-              },
-              "aNGP59BYSu": {
-                "type": "shape",
-                "xywh": "[456.9581216113149,-150.78733423910205,275.0844971371166,104]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0.1,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-white",
-                "strokeWidth": 8,
-                "strokeColor": "--affine-palette-line-red",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "aNGP59BYSu",
-                "index": "b0f",
-                "seed": 1847525765,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "location "
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontFamily": "blocksuite:surface:Inter",
-                "fontWeight": "600",
-                "fontStyle": "italic",
-                "fontSize": 24,
-                "textAlign": "right"
-              },
-              "E5LNH_PyTM": {
-                "type": "group",
-                "children": {
-                  "affine:surface:ymap": true,
-                  "json": {
-                    "aNGP59BYSu": true,
-                    "block:hYYAZfrDBZ": true
-                  }
-                },
-                "title": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Group 8"
-                    }
-                  ]
-                },
-                "id": "E5LNH_PyTM",
-                "index": "b0j",
-                "seed": 986987768
-              }
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:N24al1Qgl7",
-              "flavour": "affine:image",
-              "props": {
-                "caption": "",
-                "sourceId": "lgFhx14co1LjjqQgiqfUUWxhz-14X1nSIolT_NNkhx4=",
-                "width": 0,
-                "height": 0,
-                "index": "b0D",
-                "xywh": "[-3696.2107535859004,-568.842319215177,76.5771527705383,76.5771527705385]",
-                "rotate": 0
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:LbfY_-Dsu1",
-              "flavour": "affine:image",
-              "props": {
-                "caption": "",
-                "sourceId": "Rwd6ofVQjyQZIYTpxYohFik92cAMrp40IfdCgo1MQJE=",
-                "width": 0,
-                "height": 0,
-                "index": "b0M",
-                "xywh": "[-3684.2107535859004,-126.06358922853371,79.2896356315082,75.78009438224478]",
-                "rotate": 0
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:ndrvhUSaN1",
-              "flavour": "affine:image",
-              "props": {
-                "caption": "",
-                "sourceId": "chxqd_X0VV-NrXrIOAlpqFqwfqR86Bzy8NTT1pbUFUM=",
-                "width": 0,
-                "height": 0,
-                "index": "b0V",
-                "xywh": "[-3684.2107535859004,-413.5862936781723,67.70791963247379,67.70791963247393]",
-                "rotate": 0
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:Rdl-DEiyi4",
-              "flavour": "affine:image",
-              "props": {
-                "caption": "",
-                "sourceId": "SHcrGOvUgwA9HCpJj2W8QASwwlbQaIi39vV81k5DsSc=",
-                "width": 0,
-                "height": 0,
-                "index": "b0H",
-                "xywh": "[-3684.2107535859004,-267.1995012792322,65.4495965401581,65.77848898508364]",
-                "rotate": 0
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:auHGd3MxO9",
-              "flavour": "affine:image",
-              "props": {
-                "caption": "",
-                "sourceId": "qmUcg2SDLyyoabxX89Of2QjSUzobJy9uHwhUSqi4yV4=",
-                "width": 0,
-                "height": 0,
-                "index": "b0T",
-                "xywh": "[-3684.2107535859004,31.71682762102853,68.8527214293731,68.85272142937326]",
-                "rotate": 0
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:Wt2kpwklYP",
-              "flavour": "affine:image",
-              "props": {
-                "caption": "",
-                "sourceId": "ls2DZ9NR8rjXZ3WM86wNBnVSZ5kO34avB7bR570FLHU=",
-                "width": 0,
-                "height": 0,
-                "index": "b0Y",
-                "xywh": "[-3684.2700558609804,187.52356106262948,72.64346819016563,72.64346819016563]",
-                "rotate": 0
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:-k30zyBh9M",
-              "flavour": "affine:frame",
-              "props": {
-                "title": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Quick Tips"
-                    }
-                  ]
-                },
-                "background": "--affine-palette-transparent",
-                "xywh": "[-3785.8463721309627,-1294.590319678925,1000.4146680362642,1630.220319678925]",
-                "index": "a0"
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:J5zrVSACP9",
-              "flavour": "affine:image",
-              "props": {
-                "caption": "",
-                "sourceId": "Rwd6ofVQjyQZIYTpxYohFik92cAMrp40IfdCgo1MQJE=",
-                "width": 0,
-                "height": 0,
-                "index": "av",
-                "xywh": "[946.1168307951103,-770.068619115876,79.2896356315082,75.78009438224478]",
-                "rotate": 0
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:EXs4u0JY6F",
-              "flavour": "affine:image",
-              "props": {
-                "caption": "",
-                "sourceId": "3Awrv7sAQ3cHTsASaFAd5Y5BUEjD8qFfLQEvj1Zgwy4=",
-                "width": 0,
-                "height": 0,
-                "index": "ao",
-                "xywh": "[-2678.073305415183,-1370.855157436565,4141.853300991372,1798.0963137881806]",
-                "rotate": 0
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:hYYAZfrDBZ",
-              "flavour": "affine:image",
-              "props": {
-                "caption": "",
-                "sourceId": "lgFhx14co1LjjqQgiqfUUWxhz-14X1nSIolT_NNkhx4=",
-                "width": 0,
-                "height": 0,
-                "index": "b0fl",
-                "xywh": "[467.0397769230478,-135.0759106243712,76.5771527705383,76.5771527705385]",
-                "rotate": 0
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:m0-skKuJRF",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[-3230.750686784769,-585.5373386506271,364,187.5747734376902]",
-            "background": "--affine-tag-yellow",
-            "index": "ar",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 4,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:GrAMCM-DWg",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h2",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Work",
-                      "attributes": {
-                        "color": "var(--affine-text-highlight-foreground-orange)"
-                      }
-                    }
-                  ]
-                }
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:HOzMGC1Fy6",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "text",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:MCIh2k7orz",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "text",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:KThE68f8-J",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[-3230.7506867847696,-360.3477223992635,364,187.5747734376902]",
-            "background": "--affine-tag-purple",
-            "index": "as",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 4,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:lN7fdX26oe",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h2",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Personal",
-                      "attributes": {
-                        "color": "var(--affine-text-highlight-foreground-purple)"
-                      }
-                    }
-                  ]
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:zQNpUuWxW4",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[-3230.7506867847696,-135.15810614789996,364,187.5747734376902]",
-            "background": "--affine-tag-blue",
-            "index": "at",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 4,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:wGlPjE56cl",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h2",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Health",
-                      "attributes": {
-                        "color": "var(--affine-text-highlight-foreground-blue)"
-                      }
-                    }
-                  ]
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:yLO_2uZqpR",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[-3230.7506867847696,90.03151010346357,364,187.5747734376902]",
-            "background": "--affine-tag-green",
-            "index": "au",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 4,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:zUPnTmMG4d",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h2",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Leisure",
-                      "attributes": {
-                        "color": "var(--affine-text-highlight-foreground-green)"
-                      }
-                    }
-                  ]
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:sX_l1mnwDm",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[-1588.2917100465877,-1062.6691790295056,364,187.5747734376902]",
-            "background": "--affine-tag-yellow",
-            "index": "b0f",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 4,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:v9Yfd_QOn3",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h2",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Work",
-                      "attributes": {
-                        "color": "var(--affine-text-highlight-foreground-orange)"
-                      }
-                    }
-                  ]
-                }
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:yYqaSEWGk3",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "text",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:UcTuYNhD4_",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "text",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:ktrpa0pubj",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[-2083.4026303752685,-180.88235683150273,364,187.5747734376902]",
-            "background": "--affine-tag-green",
-            "index": "b0g",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 4,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:hSj5Mn7McV",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h2",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Leisure",
-                      "attributes": {
-                        "color": "var(--affine-text-highlight-foreground-green)"
-                      }
-                    }
-                  ]
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:M-4nzkdECr",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[-472.3772580133967,-499.5175294092313,364,187.5747734376902]",
-            "background": "--affine-tag-purple",
-            "index": "b0fV",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 4,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:9H2hUSxnbN",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h2",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Personal",
-                      "attributes": {
-                        "color": "var(--affine-text-highlight-foreground-purple)"
-                      }
-                    }
-                  ]
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:PJpwvyeVDW",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[-606.4977725778675,-441.2121382201028,364,187.5747734376902]",
-            "background": "--affine-tag-blue",
-            "index": "b0i",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 4,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:iD7m4wtdDf",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h2",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Health",
-                      "attributes": {
-                        "color": "var(--affine-text-highlight-foreground-blue)"
-                      }
-                    }
-                  ]
-                }
-              },
-              "children": []
-            }
-          ]
-        }
-      ]
-    }
-  }
-}
diff --git a/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/monthly-calendar.ts b/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/monthly-calendar.ts
new file mode 100644
index 000000000000..cc4991193104
--- /dev/null
+++ b/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/monthly-calendar.ts
@@ -0,0 +1,1135 @@
+import type { Template } from '../builtin-templates.js';
+
+export const monthlyCalendar: Template = {
+  name: 'monthly calendar',
+  preview: '',
+  asserts: {
+    '3Awrv7sAQ3cHTsASaFAd5Y5BUEjD8qFfLQEvj1Zgwy4=':
+      'https://imagedelivery.net/S2JgHUJzW7ZzW77qOAfRfA/30f621a9-9d78-47df-5a11-febf50107d00/public',
+    'chxqd_X0VV-NrXrIOAlpqFqwfqR86Bzy8NTT1pbUFUM=':
+      'https://imagedelivery.net/S2JgHUJzW7ZzW77qOAfRfA/47a92a1a-0a2f-478a-ceae-9c98da653b00/public',
+    'lgFhx14co1LjjqQgiqfUUWxhz-14X1nSIolT_NNkhx4=':
+      'https://imagedelivery.net/S2JgHUJzW7ZzW77qOAfRfA/cd9964d8-e2b0-4be6-8d88-5efbf09de600/public',
+    'ls2DZ9NR8rjXZ3WM86wNBnVSZ5kO34avB7bR570FLHU=':
+      'https://imagedelivery.net/S2JgHUJzW7ZzW77qOAfRfA/3dbafd92-cd52-493c-834b-dd3dd32bf400/public',
+    'qmUcg2SDLyyoabxX89Of2QjSUzobJy9uHwhUSqi4yV4=':
+      'https://imagedelivery.net/S2JgHUJzW7ZzW77qOAfRfA/b32cdf4a-b425-4858-23e6-3543a9adcf00/public',
+    'Rwd6ofVQjyQZIYTpxYohFik92cAMrp40IfdCgo1MQJE=':
+      'https://imagedelivery.net/S2JgHUJzW7ZzW77qOAfRfA/2e4b0a67-22e4-4ac7-a639-4f7de8f04a00/public',
+    'SHcrGOvUgwA9HCpJj2W8QASwwlbQaIi39vV81k5DsSc=':
+      'https://imagedelivery.net/S2JgHUJzW7ZzW77qOAfRfA/02ae642c-8fef-4e62-fc49-9558976bbf00/public',
+  },
+  content: {
+    type: 'page',
+    meta: {
+      id: 'page:PmFlWlI_4A',
+      title: 'Monthly Calendar',
+      createDate: 1701934642712,
+      tags: [],
+    },
+    blocks: {
+      type: 'block',
+      id: 'block:rZpJOZThKA',
+      flavour: 'affine:page',
+      props: {
+        title: {
+          '$blocksuite:internal:text$': true,
+          delta: [
+            {
+              insert: 'Monthly Calendar',
+            },
+          ],
+        },
+      },
+      children: [
+        {
+          type: 'block',
+          id: 'block:rMNPdVXkf7',
+          flavour: 'affine:surface',
+          props: {
+            elements: {
+              'cXBjy0-Dm_': {
+                type: 'shape',
+                xywh: '[-3706.2924088976333,-584.5537428299078,275.0844971371166,104]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0.1,
+                filled: true,
+                fillColor: '--affine-palette-shape-white',
+                strokeWidth: 8,
+                strokeColor: '--affine-palette-line-red',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: 'cXBjy0-Dm_',
+                index: 'b0CV',
+                seed: 87895933,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'location ',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'italic',
+                fontSize: 24,
+                textAlign: 'right',
+              },
+              '11bzCGlL9r': {
+                type: 'shape',
+                xywh: '[-3706.292408897633,-434.9603353572073,275.0844971371166,104]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0.1,
+                filled: true,
+                fillColor: '--affine-palette-shape-white',
+                strokeWidth: 8,
+                strokeColor: '--affine-palette-line-tangerine',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: '11bzCGlL9r',
+                index: 'b0U',
+                seed: 2103709835,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Time ',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'italic',
+                fontSize: 24,
+                textAlign: 'right',
+              },
+              '3V4G1V56bF': {
+                type: 'shape',
+                xywh: '[-3706.292408897633,-285.3669278845068,275.0844971371166,104]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0.1,
+                filled: true,
+                fillColor: '--affine-palette-shape-white',
+                strokeWidth: 8,
+                strokeColor: '--affine-palette-line-green',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: '3V4G1V56bF',
+                index: 'b0GV',
+                seed: 581338850,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Contacts ',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'italic',
+                fontSize: 24,
+                textAlign: 'right',
+              },
+              '7AvBCTyQ2C': {
+                type: 'shape',
+                xywh: '[-3706.292408897633,-139.09497011265762,275.0844971371166,104]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0.1,
+                filled: true,
+                fillColor: '--affine-palette-shape-white',
+                strokeWidth: 8,
+                strokeColor: '--affine-palette-line-blue',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: '7AvBCTyQ2C',
+                index: 'b0LV',
+                seed: 678411172,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Weather ',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'italic',
+                fontSize: 24,
+                textAlign: 'right',
+              },
+              VRSJ64hdR3: {
+                type: 'shape',
+                xywh: '[-3706.2924088976324,13.819887060894189,275.0844971371166,104]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0.1,
+                filled: true,
+                fillColor: '--affine-palette-shape-white',
+                strokeWidth: 8,
+                strokeColor: '--affine-palette-line-purple',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: 'VRSJ64hdR3',
+                index: 'b0SV',
+                seed: 736786412,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Travel ',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'italic',
+                fontSize: 24,
+                textAlign: 'right',
+              },
+              Vm3_lsVALu: {
+                type: 'shape',
+                xywh: '[-3706.351711164446,171.84529521490538,275.0844971371166,104.13149874516338]',
+                rotate: 0.06535769481764814,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0.1,
+                filled: true,
+                fillColor: '--affine-palette-shape-white',
+                strokeWidth: 8,
+                strokeColor: '--affine-palette-line-green',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: 'Vm3_lsVALu',
+                index: 'b0X',
+                seed: 414751887,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Cost',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'italic',
+                fontSize: 24,
+                textAlign: 'right',
+              },
+              R0rJM1jXn8: {
+                type: 'group',
+                children: {
+                  'affine:surface:ymap': true,
+                  json: {
+                    'cXBjy0-Dm_': true,
+                    'block:N24al1Qgl7': true,
+                  },
+                },
+                title: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Group 2',
+                    },
+                  ],
+                },
+                id: 'R0rJM1jXn8',
+                index: 'aqO',
+                seed: 160763694,
+                xywh: '[-3386.20889277408,-1114.9443678299078,275.0844971371166,104]',
+              },
+              gXiwZ7gbKO: {
+                type: 'group',
+                children: {
+                  'affine:surface:ymap': true,
+                  json: {
+                    '11bzCGlL9r': true,
+                    'block:ndrvhUSaN1': true,
+                  },
+                },
+                title: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Group 3',
+                    },
+                  ],
+                },
+                id: 'gXiwZ7gbKO',
+                index: 'b0a',
+                seed: 1151206806,
+                xywh: '[-3386.20889277408,-965.3509603572073,275.0844971371166,104]',
+              },
+              bfNy3qWwW8: {
+                type: 'group',
+                children: {
+                  'affine:surface:ymap': true,
+                  json: {
+                    '3V4G1V56bF': true,
+                    'block:Rdl-DEiyi4': true,
+                  },
+                },
+                title: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Group 4',
+                    },
+                  ],
+                },
+                id: 'bfNy3qWwW8',
+                index: 'b0b',
+                seed: 1540134445,
+                xywh: '[-3386.20889277408,-815.7575528845068,275.0844971371166,104]',
+              },
+              pNiSjyIw5i: {
+                type: 'group',
+                children: {
+                  'affine:surface:ymap': true,
+                  json: {
+                    '7AvBCTyQ2C': true,
+                    'block:LbfY_-Dsu1': true,
+                  },
+                },
+                title: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Group 5',
+                    },
+                  ],
+                },
+                id: 'pNiSjyIw5i',
+                index: 'b0c',
+                seed: 787762787,
+                xywh: '[-3386.20889277408,-669.4855951126576,275.0844971371166,104]',
+              },
+              yGFt3yXm5E: {
+                type: 'group',
+                children: {
+                  'affine:surface:ymap': true,
+                  json: {
+                    VRSJ64hdR3: true,
+                    'block:auHGd3MxO9': true,
+                  },
+                },
+                title: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Group 6',
+                    },
+                  ],
+                },
+                id: 'yGFt3yXm5E',
+                index: 'b0d',
+                seed: 1833391408,
+                xywh: '[-3386.20889277408,-516.5707379391058,275.0844971371166,104]',
+              },
+              FYq5XXZ07_: {
+                type: 'text',
+                xywh: '[-3219.2387120283856,-672.3733226565537,137.7599639892578,48]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Reminders',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontSize: 32,
+                fontFamily: 'blocksuite:surface:Kalam',
+                fontWeight: '400',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: 'FYq5XXZ07_',
+                index: 'aq8',
+                seed: 1656541946,
+              },
+              BMZSr_ImUD: {
+                type: 'text',
+                xywh: '[-3706.411013432607,-1161.1135813940236,834.2004820069537,418]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert:
+                        "A Monthly Calendar template provides a grid or layout representing the days of a month, typically organized by weeks. \n\nIt's designed for scheduling, planning events, tracking tasks, and managing appointments. \n\nThis template is customizable for different months and years, and often includes space for notes and reminders.\n\nDrag the tags and notes below into the right table and edit it to create your personal calendar.",
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontSize: 28,
+                fontFamily: 'blocksuite:surface:Satoshi',
+                fontWeight: '400',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: 'BMZSr_ImUD',
+                index: 'aoG',
+                seed: 1207251732,
+                hasMaxWidth: true,
+              },
+              BYxt0tocQt: {
+                type: 'text',
+                xywh: '[-3705.337175296088,-1239.6179238473387,293.11993408203125,47.5]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Monthly Calendar',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontSize: 32,
+                fontFamily: 'blocksuite:surface:Poppins',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: 'BYxt0tocQt',
+                index: 'aoV',
+                seed: 999761981,
+              },
+              'wv-l4luCTg': {
+                type: 'text',
+                xywh: '[-3706.411013432607,-673.8561415820222,143.23191833496094,48]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Quick Tags',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontSize: 32,
+                fontFamily: 'blocksuite:surface:Kalam',
+                fontWeight: '400',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: 'wv-l4luCTg',
+                index: 'ar',
+                seed: 853708973,
+              },
+              fwnuzq04bj: {
+                type: 'connector',
+                mode: 1,
+                strokeWidth: 2,
+                stroke: '--affine-palette-line-grey',
+                strokeStyle: 'dash',
+                roughness: 1.4,
+                source: {
+                  position: [-3328.6304634386593, -679.1025457036071],
+                },
+                target: {
+                  position: [-3333.3199393044856, 295.6304026399167],
+                },
+                controllers: [],
+                frontEndpointStyle: 'None',
+                rearEndpointStyle: 'None',
+                id: 'fwnuzq04bj',
+                index: 'ao8',
+                seed: 671683017,
+                rough: false,
+                xywh: '[-3333.3242992726423,-679.0988668887398,4.6899999999996,974.74]',
+              },
+              m_3CF51wZt: {
+                type: 'shape',
+                xywh: '[924.0351754833779,-783.1,275.0844971371166,104]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0.1,
+                filled: true,
+                fillColor: '--affine-palette-shape-white',
+                strokeWidth: 8,
+                strokeColor: '--affine-palette-line-blue',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: 'm_3CF51wZt',
+                index: 'ap',
+                seed: 1525798825,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Weather ',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'italic',
+                fontSize: 24,
+                textAlign: 'right',
+              },
+              ptcY2KkWVg: {
+                type: 'group',
+                children: {
+                  'affine:surface:ymap': true,
+                  json: {
+                    m_3CF51wZt: true,
+                    'block:J5zrVSACP9': true,
+                  },
+                },
+                title: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Group 5',
+                    },
+                  ],
+                },
+                id: 'ptcY2KkWVg',
+                index: 'aw',
+                seed: 8499192,
+                xywh: '[-3386.20889277408,-669.4855951126576,275.0844971371166,104]',
+              },
+              '2Z81fm-b-G': {
+                type: 'group',
+                children: {
+                  'affine:surface:ymap': true,
+                  json: {
+                    'block:Wt2kpwklYP': true,
+                    Vm3_lsVALu: true,
+                  },
+                },
+                title: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Group 8',
+                    },
+                  ],
+                },
+                id: '2Z81fm-b-G',
+                index: 'ax',
+                seed: 2003365081,
+              },
+              aNGP59BYSu: {
+                type: 'shape',
+                xywh: '[456.9581216113149,-150.78733423910205,275.0844971371166,104]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0.1,
+                filled: true,
+                fillColor: '--affine-palette-shape-white',
+                strokeWidth: 8,
+                strokeColor: '--affine-palette-line-red',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: 'aNGP59BYSu',
+                index: 'b0f',
+                seed: 1847525765,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'location ',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontFamily: 'blocksuite:surface:Inter',
+                fontWeight: '600',
+                fontStyle: 'italic',
+                fontSize: 24,
+                textAlign: 'right',
+              },
+              E5LNH_PyTM: {
+                type: 'group',
+                children: {
+                  'affine:surface:ymap': true,
+                  json: {
+                    aNGP59BYSu: true,
+                    'block:hYYAZfrDBZ': true,
+                  },
+                },
+                title: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Group 8',
+                    },
+                  ],
+                },
+                id: 'E5LNH_PyTM',
+                index: 'b0j',
+                seed: 986987768,
+              },
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:N24al1Qgl7',
+              flavour: 'affine:image',
+              props: {
+                caption: '',
+                sourceId: 'lgFhx14co1LjjqQgiqfUUWxhz-14X1nSIolT_NNkhx4=',
+                width: 0,
+                height: 0,
+                index: 'b0D',
+                xywh: '[-3696.2107535859004,-568.842319215177,76.5771527705383,76.5771527705385]',
+                rotate: 0,
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:LbfY_-Dsu1',
+              flavour: 'affine:image',
+              props: {
+                caption: '',
+                sourceId: 'Rwd6ofVQjyQZIYTpxYohFik92cAMrp40IfdCgo1MQJE=',
+                width: 0,
+                height: 0,
+                index: 'b0M',
+                xywh: '[-3684.2107535859004,-126.06358922853371,79.2896356315082,75.78009438224478]',
+                rotate: 0,
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:ndrvhUSaN1',
+              flavour: 'affine:image',
+              props: {
+                caption: '',
+                sourceId: 'chxqd_X0VV-NrXrIOAlpqFqwfqR86Bzy8NTT1pbUFUM=',
+                width: 0,
+                height: 0,
+                index: 'b0V',
+                xywh: '[-3684.2107535859004,-413.5862936781723,67.70791963247379,67.70791963247393]',
+                rotate: 0,
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:Rdl-DEiyi4',
+              flavour: 'affine:image',
+              props: {
+                caption: '',
+                sourceId: 'SHcrGOvUgwA9HCpJj2W8QASwwlbQaIi39vV81k5DsSc=',
+                width: 0,
+                height: 0,
+                index: 'b0H',
+                xywh: '[-3684.2107535859004,-267.1995012792322,65.4495965401581,65.77848898508364]',
+                rotate: 0,
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:auHGd3MxO9',
+              flavour: 'affine:image',
+              props: {
+                caption: '',
+                sourceId: 'qmUcg2SDLyyoabxX89Of2QjSUzobJy9uHwhUSqi4yV4=',
+                width: 0,
+                height: 0,
+                index: 'b0T',
+                xywh: '[-3684.2107535859004,31.71682762102853,68.8527214293731,68.85272142937326]',
+                rotate: 0,
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:Wt2kpwklYP',
+              flavour: 'affine:image',
+              props: {
+                caption: '',
+                sourceId: 'ls2DZ9NR8rjXZ3WM86wNBnVSZ5kO34avB7bR570FLHU=',
+                width: 0,
+                height: 0,
+                index: 'b0Y',
+                xywh: '[-3684.2700558609804,187.52356106262948,72.64346819016563,72.64346819016563]',
+                rotate: 0,
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:-k30zyBh9M',
+              flavour: 'affine:frame',
+              props: {
+                title: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Quick Tips',
+                    },
+                  ],
+                },
+                background: '--affine-palette-transparent',
+                xywh: '[-3785.8463721309627,-1294.590319678925,1000.4146680362642,1630.220319678925]',
+                index: 'a0',
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:J5zrVSACP9',
+              flavour: 'affine:image',
+              props: {
+                caption: '',
+                sourceId: 'Rwd6ofVQjyQZIYTpxYohFik92cAMrp40IfdCgo1MQJE=',
+                width: 0,
+                height: 0,
+                index: 'av',
+                xywh: '[946.1168307951103,-770.068619115876,79.2896356315082,75.78009438224478]',
+                rotate: 0,
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:EXs4u0JY6F',
+              flavour: 'affine:image',
+              props: {
+                caption: '',
+                sourceId: '3Awrv7sAQ3cHTsASaFAd5Y5BUEjD8qFfLQEvj1Zgwy4=',
+                width: 0,
+                height: 0,
+                index: 'ao',
+                xywh: '[-2678.073305415183,-1370.855157436565,4141.853300991372,1798.0963137881806]',
+                rotate: 0,
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:hYYAZfrDBZ',
+              flavour: 'affine:image',
+              props: {
+                caption: '',
+                sourceId: 'lgFhx14co1LjjqQgiqfUUWxhz-14X1nSIolT_NNkhx4=',
+                width: 0,
+                height: 0,
+                index: 'b0fl',
+                xywh: '[467.0397769230478,-135.0759106243712,76.5771527705383,76.5771527705385]',
+                rotate: 0,
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:m0-skKuJRF',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[-3230.750686784769,-585.5373386506271,364,187.5747734376902]',
+            background: '--affine-tag-yellow',
+            index: 'ar',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 4,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:GrAMCM-DWg',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h2',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Work',
+                      attributes: {
+                        color: 'var(--affine-text-highlight-foreground-orange)',
+                      },
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:HOzMGC1Fy6',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:MCIh2k7orz',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:KThE68f8-J',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[-3230.7506867847696,-360.3477223992635,364,187.5747734376902]',
+            background: '--affine-tag-purple',
+            index: 'as',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 4,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:lN7fdX26oe',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h2',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Personal',
+                      attributes: {
+                        color: 'var(--affine-text-highlight-foreground-purple)',
+                      },
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:zQNpUuWxW4',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[-3230.7506867847696,-135.15810614789996,364,187.5747734376902]',
+            background: '--affine-tag-blue',
+            index: 'at',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 4,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:wGlPjE56cl',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h2',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Health',
+                      attributes: {
+                        color: 'var(--affine-text-highlight-foreground-blue)',
+                      },
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:yLO_2uZqpR',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[-3230.7506867847696,90.03151010346357,364,187.5747734376902]',
+            background: '--affine-tag-green',
+            index: 'au',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 4,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:zUPnTmMG4d',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h2',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Leisure',
+                      attributes: {
+                        color: 'var(--affine-text-highlight-foreground-green)',
+                      },
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:sX_l1mnwDm',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[-1588.2917100465877,-1062.6691790295056,364,187.5747734376902]',
+            background: '--affine-tag-yellow',
+            index: 'b0f',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 4,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:v9Yfd_QOn3',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h2',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Work',
+                      attributes: {
+                        color: 'var(--affine-text-highlight-foreground-orange)',
+                      },
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:yYqaSEWGk3',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:UcTuYNhD4_',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:ktrpa0pubj',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[-2083.4026303752685,-180.88235683150273,364,187.5747734376902]',
+            background: '--affine-tag-green',
+            index: 'b0g',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 4,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:hSj5Mn7McV',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h2',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Leisure',
+                      attributes: {
+                        color: 'var(--affine-text-highlight-foreground-green)',
+                      },
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:M-4nzkdECr',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[-472.3772580133967,-499.5175294092313,364,187.5747734376902]',
+            background: '--affine-tag-purple',
+            index: 'b0fV',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 4,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:9H2hUSxnbN',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h2',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Personal',
+                      attributes: {
+                        color: 'var(--affine-text-highlight-foreground-purple)',
+                      },
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:PJpwvyeVDW',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[-606.4977725778675,-441.2121382201028,364,187.5747734376902]',
+            background: '--affine-tag-blue',
+            index: 'b0i',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 4,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:iD7m4wtdDf',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h2',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Health',
+                      attributes: {
+                        color: 'var(--affine-text-highlight-foreground-blue)',
+                      },
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+      ],
+    },
+  },
+};
diff --git a/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/storyboard.json b/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/storyboard.json
deleted file mode 100644
index 7425d99a1033..000000000000
--- a/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/storyboard.json
+++ /dev/null
@@ -1,1345 +0,0 @@
-{
-  "name": "storyboard",
-  "preview": "",
-  "asserts": {
-    "pQzvckPjmd0QPBOYJj0lRAezTAl43BtaWqVFZkydgzQ=": "https://imagedelivery.net/S2JgHUJzW7ZzW77qOAfRfA/a5aa36ec-a2e1-4d7f-dd00-ee621f34f500/public",
-    "4rOMygicmDxT3mgVjW1-PtavNtg1TGpkNReRIwRy0fQ=": "https://imagedelivery.net/S2JgHUJzW7ZzW77qOAfRfA/8b7b54ae-b5ae-442f-5733-6fa35d935e00/public"
-  },
-  "version": {},
-  "content": {
-    "type": "page",
-    "meta": {
-      "id": "page:Tk8yvi7TtE",
-      "title": "Storyboard",
-      "createDate": 1701855520579,
-      "tags": []
-    },
-    "blocks": {
-      "type": "block",
-      "id": "block:_sq72SgftX",
-      "flavour": "affine:page",
-      "props": {
-        "title": {
-          "$blocksuite:internal:text$": true,
-          "delta": [
-            {
-              "insert": "Storyboard"
-            }
-          ]
-        }
-      },
-      "children": [
-        {
-          "type": "block",
-          "id": "block:Vslciq5Tsw",
-          "flavour": "affine:surface",
-          "props": {
-            "elements": {
-              "5bPSTkBelz": {
-                "type": "text",
-                "xywh": "[-623.312317566272,-20.125818767528926,102.39999389648438,153.5]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "01"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-grey",
-                "fontSize": 128,
-                "fontFamily": "blocksuite:surface:BebasNeue",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "5bPSTkBelz",
-                "index": "a0",
-                "seed": 888423873
-              },
-              "Cv-Kkmz9aC": {
-                "type": "shape",
-                "xywh": "[-623.312317566272,-510.4671790604059,749.0048669510401,465.24173261151157]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-white",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "Cv-Kkmz9aC",
-                "index": "a1",
-                "seed": 1877921497,
-                "color": "--affine-palette-line-black"
-              },
-              "y5ZK_Hlq2D": {
-                "type": "text",
-                "xywh": "[333.41774645201497,-20.125818767528898,103,154]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "02"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-blue",
-                "fontSize": 128,
-                "fontFamily": "blocksuite:surface:BebasNeue",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "y5ZK_Hlq2D",
-                "index": "a5",
-                "seed": 39875881
-              },
-              "qpnYJBKHGg": {
-                "type": "shape",
-                "xywh": "[333.41774645201497,-510.4671790604059,749.0048669510401,465.24173261151157]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-white",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "qpnYJBKHGg",
-                "index": "a6",
-                "seed": 1076908986,
-                "color": "--affine-palette-line-black"
-              },
-              "671DNrP_sE": {
-                "type": "text",
-                "xywh": "[1290.1478104703021,-20.12581876752894,103,154]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "03"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-purple",
-                "fontSize": 128,
-                "fontFamily": "blocksuite:surface:BebasNeue",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "671DNrP_sE",
-                "index": "a9",
-                "seed": 963046928
-              },
-              "UqX1bKv8di": {
-                "type": "shape",
-                "xywh": "[1290.1478104703021,-510.46717906040595,749.0048669510401,465.24173261151157]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-white",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "UqX1bKv8di",
-                "index": "aA",
-                "seed": 1813280158,
-                "color": "--affine-palette-line-black"
-              },
-              "ZBfrEL1PyL": {
-                "type": "text",
-                "xywh": "[2216.773020328646,-20.12581876752892,103,154]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "04"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-green",
-                "fontSize": 128,
-                "fontFamily": "blocksuite:surface:BebasNeue",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "ZBfrEL1PyL",
-                "index": "aC",
-                "seed": 1654062447
-              },
-              "7_3H8gs_M0": {
-                "type": "shape",
-                "xywh": "[2216.773020328646,-510.46717906040595,749.0048669510401,465.24173261151157]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-white",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "7_3H8gs_M0",
-                "index": "aD",
-                "seed": 1632921055,
-                "color": "--affine-palette-line-black"
-              },
-              "He2q2iLluI": {
-                "type": "text",
-                "xywh": "[-623.3123175662716,905.8585775910734,103,154]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "05"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-orange",
-                "fontSize": 128,
-                "fontFamily": "blocksuite:surface:BebasNeue",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "He2q2iLluI",
-                "index": "aF",
-                "seed": 1329611161
-              },
-              "eRjgoJ_PO0": {
-                "type": "shape",
-                "xywh": "[-623.3123175662716,415.5172172981964,749.0048669510401,465.24173261151157]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-white",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "eRjgoJ_PO0",
-                "index": "aG",
-                "seed": 663330323,
-                "color": "--affine-palette-line-black"
-              },
-              "V-FK3ebnt1": {
-                "type": "text",
-                "xywh": "[356.09442107741177,905.8585775910734,103,154]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "06"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-magenta",
-                "fontSize": 128,
-                "fontFamily": "blocksuite:surface:BebasNeue",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "V-FK3ebnt1",
-                "index": "aI",
-                "seed": 1364259955
-              },
-              "9o9_urPWat": {
-                "type": "shape",
-                "xywh": "[356.09442107741177,415.5172172981964,749.0048669510401,465.24173261151157]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-white",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "9o9_urPWat",
-                "index": "aJ",
-                "seed": 1326119795,
-                "color": "--affine-palette-line-black"
-              },
-              "AxmmlFfmZy": {
-                "type": "text",
-                "xywh": "[1303.8521073764198,905.8585775910734,103,154]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "07"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-blue",
-                "fontSize": 128,
-                "fontFamily": "blocksuite:surface:BebasNeue",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "AxmmlFfmZy",
-                "index": "aL",
-                "seed": 51782970
-              },
-              "aDz5kGBwSw": {
-                "type": "shape",
-                "xywh": "[1303.8521073764198,415.5172172981964,749.0048669510401,465.24173261151157]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-white",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "aDz5kGBwSw",
-                "index": "aM",
-                "seed": 2070815342,
-                "color": "--affine-palette-line-black"
-              },
-              "XUoXvxaQ6o": {
-                "type": "text",
-                "xywh": "[2229.2037444382922,905.8585775910734,103,154]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "08"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-tangerine",
-                "fontSize": 128,
-                "fontFamily": "blocksuite:surface:BebasNeue",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "XUoXvxaQ6o",
-                "index": "aO",
-                "seed": 610565560
-              },
-              "4HpcXHHyCG": {
-                "type": "shape",
-                "xywh": "[2229.2037444382922,415.51721729819644,749.0048669510401,465.24173261151157]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-white",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-transparent",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "4HpcXHHyCG",
-                "index": "aP",
-                "seed": 92714421,
-                "color": "--affine-palette-line-black"
-              },
-              "9D9dgqb3_T": {
-                "type": "text",
-                "xywh": "[-1991.971780114972,-403.81244318618457,371,194]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "A storyboard template is a tool for visualizing a story's narrative with illustrations. \n\nIt's widely used in animation, film, and video game design, and has become essential for businesses in mapping customer experiences.\n\nThis tool is key for team alignment, idea pitching, and understanding customer journeys."
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontSize": 16,
-                "fontFamily": "blocksuite:surface:Satoshi",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "9D9dgqb3_T",
-                "index": "aT",
-                "seed": 172461233,
-                "hasMaxWidth": true
-              },
-              "9kTksrdooV": {
-                "type": "text",
-                "xywh": "[-1993.1100096192029,-455.71746314435444,141.86395263671875,32.5]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Stoardboard"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontSize": 24,
-                "fontFamily": "blocksuite:surface:Satoshi",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "textAlign": "left",
-                "id": "9kTksrdooV",
-                "index": "aU",
-                "seed": 1798838512
-              },
-              "-HQm5uRmiD": {
-                "type": "shape",
-                "xywh": "[-1993.1100096192029,-155.30093141487959,372.1382295042306,121]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0.1,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-white",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-line-black",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "-HQm5uRmiD",
-                "index": "af",
-                "seed": 1243500994,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Use the pen tool\nto sketch out the scenes\nof the storyboard"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontFamily": "blocksuite:surface:Satoshi",
-                "textAlign": "left",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "fontSize": 16
-              },
-              "eDwrSwLvT1": {
-                "type": "shape",
-                "xywh": "[-1993.1100096192029,13.541009953474223,372.1382295042306,126]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0.1,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-white",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-line-black",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "eDwrSwLvT1",
-                "index": "aY",
-                "seed": 740967169,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Double click notes to \ndescribe whats happening \nin each scene"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontFamily": "blocksuite:surface:Satoshi",
-                "textAlign": "left",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "fontSize": 16
-              },
-              "NqZ_5sIXDi": {
-                "type": "text",
-                "xywh": "[-1648.5387887440108,-155.30093141487959,11.583999633789062,47.5]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "1"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontSize": 32,
-                "fontFamily": "blocksuite:surface:Poppins",
-                "fontWeight": "600",
-                "fontStyle": "italic",
-                "textAlign": "left",
-                "id": "NqZ_5sIXDi",
-                "index": "ag",
-                "seed": 1741938248
-              },
-              "CkRZQnBdPT": {
-                "type": "text",
-                "xywh": "[-1652.0912282617626,13.398605829259246,18.367996215820312,47.5]",
-                "rotate": 0,
-                "text": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "2"
-                    }
-                  ]
-                },
-                "color": "--affine-palette-line-black",
-                "fontSize": 32,
-                "fontFamily": "blocksuite:surface:Poppins",
-                "fontWeight": "600",
-                "fontStyle": "italic",
-                "textAlign": "left",
-                "id": "CkRZQnBdPT",
-                "index": "ac",
-                "seed": 794575694
-              },
-              "JuHYf15fsy": {
-                "type": "group",
-                "children": {
-                  "affine:surface:ymap": true,
-                  "json": {
-                    "eDwrSwLvT1": true,
-                    "CkRZQnBdPT": true,
-                    "block:1N0UWZkK_8": true
-                  }
-                },
-                "title": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "Group 1"
-                    }
-                  ]
-                },
-                "id": "JuHYf15fsy",
-                "index": "ad",
-                "seed": 1573998966,
-                "xywh": "[-2072.0422562424897,-60.25228947394268,372.1382295042306,126.14240412421498]"
-              },
-              "puvDjor9-d": {
-                "type": "group",
-                "children": {
-                  "affine:surface:ymap": true,
-                  "json": {
-                    "-HQm5uRmiD": true,
-                    "NqZ_5sIXDi": true,
-                    "block:rjD1NH1bz1": true
-                  }
-                },
-                "title": {
-                  "affine:surface:text": true,
-                  "delta": [
-                    {
-                      "insert": "324234"
-                    }
-                  ]
-                },
-                "id": "puvDjor9-d",
-                "index": "af",
-                "seed": 47439129,
-                "xywh": "[-1967.659085824912,-191.76177163350204,372.1382295042306,121]"
-              },
-              "9pzQ4PtJqc": {
-                "type": "shape",
-                "xywh": "[-2066.2474634433406,-547.4694048830397,1110.2447838460484,789.3937055152682]",
-                "rotate": 0,
-                "shapeType": "rect",
-                "shapeStyle": "General",
-                "radius": 0,
-                "filled": true,
-                "fillColor": "--affine-palette-shape-white",
-                "strokeWidth": 4,
-                "strokeColor": "--affine-palette-line-black",
-                "strokeStyle": "solid",
-                "roughness": 1.4,
-                "id": "9pzQ4PtJqc",
-                "index": "Zz",
-                "seed": 441326486,
-                "color": "--affine-palette-line-black"
-              }
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:fkXg4KufTv",
-              "flavour": "affine:frame",
-              "props": {
-                "title": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Board title"
-                    }
-                  ]
-                },
-                "background": "--affine-tag-gray",
-                "xywh": "[-663.1275820232445,-547.4694048830397,828.6353958649848,711.2490457412829]",
-                "index": "a0"
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:tPPJWh8fBf",
-              "flavour": "affine:frame",
-              "props": {
-                "title": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Board title"
-                    }
-                  ]
-                },
-                "background": "--affine-tag-blue",
-                "xywh": "[293.60248199504247,-547.4694048830397,828.6353958649848,711.2490457412829]",
-                "index": "a1"
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:IrLiYhlb_T",
-              "flavour": "affine:frame",
-              "props": {
-                "title": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Board title"
-                    }
-                  ]
-                },
-                "background": "--affine-tag-purple",
-                "xywh": "[1250.3325460133296,-547.4694048830397,828.6353958649848,711.2490457412829]",
-                "index": "a2"
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:LUJuvPKPdR",
-              "flavour": "affine:frame",
-              "props": {
-                "title": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Board title"
-                    }
-                  ]
-                },
-                "background": "--affine-tag-green",
-                "xywh": "[2176.9577558716733,-547.4694048830397,828.6353958649848,711.2490457412829]",
-                "index": "a3"
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:-y4TFKXJaP",
-              "flavour": "affine:frame",
-              "props": {
-                "title": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Board title"
-                    }
-                  ]
-                },
-                "background": "--affine-tag-yellow",
-                "xywh": "[-663.1275820232444,378.5149914755626,828.6353958649848,711.2490457412829]",
-                "index": "a4"
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:aOTmVs-FuZ",
-              "flavour": "affine:frame",
-              "props": {
-                "title": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Board title"
-                    }
-                  ]
-                },
-                "background": "--affine-tag-red",
-                "xywh": "[316.27915662043904,378.5149914755626,828.6353958649848,711.2490457412829]",
-                "index": "a5"
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:NNBwJnSOBh",
-              "flavour": "affine:frame",
-              "props": {
-                "title": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Board title"
-                    }
-                  ]
-                },
-                "background": "--affine-tag-teal",
-                "xywh": "[1264.036842919447,378.5149914755626,828.6353958649848,711.2490457412829]",
-                "index": "a6"
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:rMJjJ7V6xb",
-              "flavour": "affine:frame",
-              "props": {
-                "title": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Board title"
-                    }
-                  ]
-                },
-                "background": "--affine-tag-orange",
-                "xywh": "[2189.3884799813195,378.5149914755627,828.6353958649848,711.2490457412829]",
-                "index": "a7"
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:rjD1NH1bz1",
-              "flavour": "affine:image",
-              "props": {
-                "caption": "",
-                "sourceId": "pQzvckPjmd0QPBOYJj0lRAezTAl43BtaWqVFZkydgzQ=",
-                "width": 0,
-                "height": 0,
-                "index": "ah",
-                "xywh": "[-1795.5188339520957,-137.42603506396046,157.61387206265383,98.99257227794752]",
-                "rotate": 0
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:1N0UWZkK_8",
-              "flavour": "affine:image",
-              "props": {
-                "caption": "",
-                "sourceId": "4rOMygicmDxT3mgVjW1-PtavNtg1TGpkNReRIwRy0fQ=",
-                "width": 0,
-                "height": 0,
-                "index": "aal",
-                "xywh": "[-1779.307672616336,51.18653958469409,127.21644435457343,81.65683618351409]",
-                "rotate": 0
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:Jrhw1YLWKV",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[-230.1873471257049,-79.13555810124546,372.68990428151096,212.50973933371654]",
-            "background": "--affine-background-secondary-color",
-            "index": "a2",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 2,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:8VZyVPAO_I",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h6",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Describe whats happening in the scene"
-                    }
-                  ]
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:GFpdoPhgc2",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[730.5968545529315,-85.50413258738763,372.83083297527776,218.87831381985876]",
-            "background": "--affine-tag-teal",
-            "index": "a7",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 2,
-                "borderStyle": "solid",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:fUXH2joezs",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h6",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Describe whats happening in the scene"
-                    }
-                  ]
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:Fb5AygNUnr",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[1678.3545408519394,-77.3784889090899,371.9321020416821,217.1878667538341]",
-            "background": "--affine-tag-pink",
-            "index": "aB",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 2,
-                "borderStyle": "solid",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:BmuUA6tq3T",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h6",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Describe whats happening in the scene"
-                    }
-                  ]
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:fYGdA3MvTu",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[2603.706177913812,-77.37848890908987,373.20567483815285,216.99615367852667]",
-            "background": "--affine-tag-yellow",
-            "index": "aE",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 2,
-                "borderStyle": "solid",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:Zmykj3phX3",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h6",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Describe whats happening in the scene"
-                    }
-                  ]
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:pxhK-W1vEZ",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[-236.37915998110554,848.6059074495124,373.20567483815285,207.95975843368183]",
-            "background": "--affine-tag-orange",
-            "index": "aH",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 2,
-                "borderStyle": "solid",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:zIPWPdYTQU",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h6",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Describe whats happening in the scene"
-                    }
-                  ]
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:gB_LQwY9cK",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[743.027578662578,848.6059074495124,373.20567483815296,206.363094177334]",
-            "background": "--affine-tag-purple",
-            "index": "aK",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 2,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:0NjuAbiCKz",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h6",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Describe whats happening in the scene"
-                    }
-                  ]
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:ow9HsFYnuJ",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[1690.785264961586,848.6059074495124,373.2056748381531,210.93935583599136]",
-            "background": "--affine-tag-gray",
-            "index": "aN",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 2,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:QzGVkmTwxV",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h6",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Describe whats happening in the scene"
-                    }
-                  ]
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:Fonoa8wxUT",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[2616.136902023459,848.6059074495124,373.20567483815285,210.8557329187879]",
-            "background": "--affine-tag-blue",
-            "index": "aQ",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 2,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-sticker"
-              },
-              "collapse": true
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:HjrnOLxGkv",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h6",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Describe whats happening in the scene"
-                    }
-                  ]
-                }
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:W050lCccMc",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "text",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:LTdGuueeCp",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "text",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": []
-                }
-              },
-              "children": []
-            }
-          ]
-        },
-        {
-          "type": "block",
-          "id": "block:kF8KTh-WvC",
-          "flavour": "affine:note",
-          "props": {
-            "xywh": "[-1487.0582041163204,-467.4589900465258,448,618]",
-            "background": "--affine-palette-transparent",
-            "index": "aR",
-            "hidden": false,
-            "edgeless": {
-              "style": {
-                "borderRadius": 0,
-                "borderSize": 4,
-                "borderStyle": "none",
-                "shadowType": "--affine-note-shadow-film"
-              }
-            }
-          },
-          "children": [
-            {
-              "type": "block",
-              "id": "block:48VdaTzf8L",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h3",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Storyboard brief"
-                    }
-                  ]
-                }
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:V9VYl5WXhx",
-              "flavour": "affine:divider",
-              "props": {},
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:7cNtrQ0W6g",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h6",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Story summary"
-                    }
-                  ]
-                }
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:LJzurmfoOl",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "text",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Describe the purpose and outcome of the storyboards in paragraph form. Outline any main points.",
-                      "attributes": {
-                        "color": "var(--affine-text-highlight-foreground-grey)"
-                      }
-                    }
-                  ]
-                }
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:lbS_RuR-vF",
-              "flavour": "affine:divider",
-              "props": {},
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:g9MuIZIzLx",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h6",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Key goals and needs"
-                    }
-                  ]
-                }
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:CWIonXIklJ",
-              "flavour": "affine:list",
-              "props": {
-                "type": "numbered",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "This is item 1"
-                    }
-                  ]
-                },
-                "checked": false,
-                "collapsed": false
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:PhYhzCaieP",
-              "flavour": "affine:list",
-              "props": {
-                "type": "numbered",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "This is item 2"
-                    }
-                  ]
-                },
-                "checked": false,
-                "collapsed": false
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:PLkpsctwaY",
-              "flavour": "affine:list",
-              "props": {
-                "type": "numbered",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "This is item 3"
-                    }
-                  ]
-                },
-                "checked": false,
-                "collapsed": false
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:MxqJnBLuJe",
-              "flavour": "affine:divider",
-              "props": {},
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:GNPBYTu7Fc",
-              "flavour": "affine:paragraph",
-              "props": {
-                "type": "h6",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "Key pains and constraints"
-                    }
-                  ]
-                }
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:tq_8TfOK6n",
-              "flavour": "affine:list",
-              "props": {
-                "type": "bulleted",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "This is item 1"
-                    }
-                  ]
-                },
-                "checked": false,
-                "collapsed": false
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:GAEEyaqD4x",
-              "flavour": "affine:list",
-              "props": {
-                "type": "bulleted",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "This is item 2"
-                    }
-                  ]
-                },
-                "checked": false,
-                "collapsed": false
-              },
-              "children": []
-            },
-            {
-              "type": "block",
-              "id": "block:Tm7U_L0sbq",
-              "flavour": "affine:list",
-              "props": {
-                "type": "bulleted",
-                "text": {
-                  "$blocksuite:internal:text$": true,
-                  "delta": [
-                    {
-                      "insert": "This is item 3"
-                    }
-                  ]
-                },
-                "checked": false,
-                "collapsed": false
-              },
-              "children": []
-            }
-          ]
-        }
-      ]
-    }
-  }
-}
diff --git a/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/storyboard.ts b/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/storyboard.ts
new file mode 100644
index 000000000000..655a19cc2150
--- /dev/null
+++ b/packages/blocks/src/page-block/edgeless/components/toolbar/template/json/storyboard.ts
@@ -0,0 +1,1353 @@
+import type { Template } from '../builtin-templates.js';
+
+export const storyboard: Template = {
+  name: 'storyboard',
+  preview: '',
+  asserts: {
+    'pQzvckPjmd0QPBOYJj0lRAezTAl43BtaWqVFZkydgzQ=':
+      'https://imagedelivery.net/S2JgHUJzW7ZzW77qOAfRfA/a5aa36ec-a2e1-4d7f-dd00-ee621f34f500/public',
+    '4rOMygicmDxT3mgVjW1-PtavNtg1TGpkNReRIwRy0fQ=':
+      'https://imagedelivery.net/S2JgHUJzW7ZzW77qOAfRfA/8b7b54ae-b5ae-442f-5733-6fa35d935e00/public',
+  },
+  version: {},
+  content: {
+    type: 'page',
+    meta: {
+      id: 'page:Tk8yvi7TtE',
+      title: 'Storyboard',
+      createDate: 1701855520579,
+      tags: [],
+    },
+    blocks: {
+      type: 'block',
+      id: 'block:_sq72SgftX',
+      flavour: 'affine:page',
+      props: {
+        title: {
+          '$blocksuite:internal:text$': true,
+          delta: [
+            {
+              insert: 'Storyboard',
+            },
+          ],
+        },
+      },
+      children: [
+        {
+          type: 'block',
+          id: 'block:Vslciq5Tsw',
+          flavour: 'affine:surface',
+          props: {
+            elements: {
+              '5bPSTkBelz': {
+                type: 'text',
+                xywh: '[-623.312317566272,-20.125818767528926,102.39999389648438,153.5]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: '01',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-grey',
+                fontSize: 128,
+                fontFamily: 'blocksuite:surface:BebasNeue',
+                fontWeight: '400',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: '5bPSTkBelz',
+                index: 'a0',
+                seed: 888423873,
+              },
+              'Cv-Kkmz9aC': {
+                type: 'shape',
+                xywh: '[-623.312317566272,-510.4671790604059,749.0048669510401,465.24173261151157]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-white',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: 'Cv-Kkmz9aC',
+                index: 'a1',
+                seed: 1877921497,
+                color: '--affine-palette-line-black',
+              },
+              y5ZK_Hlq2D: {
+                type: 'text',
+                xywh: '[333.41774645201497,-20.125818767528898,103,154]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: '02',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-blue',
+                fontSize: 128,
+                fontFamily: 'blocksuite:surface:BebasNeue',
+                fontWeight: '400',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: 'y5ZK_Hlq2D',
+                index: 'a5',
+                seed: 39875881,
+              },
+              qpnYJBKHGg: {
+                type: 'shape',
+                xywh: '[333.41774645201497,-510.4671790604059,749.0048669510401,465.24173261151157]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-white',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: 'qpnYJBKHGg',
+                index: 'a6',
+                seed: 1076908986,
+                color: '--affine-palette-line-black',
+              },
+              '671DNrP_sE': {
+                type: 'text',
+                xywh: '[1290.1478104703021,-20.12581876752894,103,154]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: '03',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-purple',
+                fontSize: 128,
+                fontFamily: 'blocksuite:surface:BebasNeue',
+                fontWeight: '400',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: '671DNrP_sE',
+                index: 'a9',
+                seed: 963046928,
+              },
+              UqX1bKv8di: {
+                type: 'shape',
+                xywh: '[1290.1478104703021,-510.46717906040595,749.0048669510401,465.24173261151157]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-white',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: 'UqX1bKv8di',
+                index: 'aA',
+                seed: 1813280158,
+                color: '--affine-palette-line-black',
+              },
+              ZBfrEL1PyL: {
+                type: 'text',
+                xywh: '[2216.773020328646,-20.12581876752892,103,154]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: '04',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-green',
+                fontSize: 128,
+                fontFamily: 'blocksuite:surface:BebasNeue',
+                fontWeight: '400',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: 'ZBfrEL1PyL',
+                index: 'aC',
+                seed: 1654062447,
+              },
+              '7_3H8gs_M0': {
+                type: 'shape',
+                xywh: '[2216.773020328646,-510.46717906040595,749.0048669510401,465.24173261151157]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-white',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: '7_3H8gs_M0',
+                index: 'aD',
+                seed: 1632921055,
+                color: '--affine-palette-line-black',
+              },
+              He2q2iLluI: {
+                type: 'text',
+                xywh: '[-623.3123175662716,905.8585775910734,103,154]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: '05',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-orange',
+                fontSize: 128,
+                fontFamily: 'blocksuite:surface:BebasNeue',
+                fontWeight: '400',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: 'He2q2iLluI',
+                index: 'aF',
+                seed: 1329611161,
+              },
+              eRjgoJ_PO0: {
+                type: 'shape',
+                xywh: '[-623.3123175662716,415.5172172981964,749.0048669510401,465.24173261151157]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-white',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: 'eRjgoJ_PO0',
+                index: 'aG',
+                seed: 663330323,
+                color: '--affine-palette-line-black',
+              },
+              'V-FK3ebnt1': {
+                type: 'text',
+                xywh: '[356.09442107741177,905.8585775910734,103,154]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: '06',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-magenta',
+                fontSize: 128,
+                fontFamily: 'blocksuite:surface:BebasNeue',
+                fontWeight: '400',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: 'V-FK3ebnt1',
+                index: 'aI',
+                seed: 1364259955,
+              },
+              '9o9_urPWat': {
+                type: 'shape',
+                xywh: '[356.09442107741177,415.5172172981964,749.0048669510401,465.24173261151157]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-white',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: '9o9_urPWat',
+                index: 'aJ',
+                seed: 1326119795,
+                color: '--affine-palette-line-black',
+              },
+              AxmmlFfmZy: {
+                type: 'text',
+                xywh: '[1303.8521073764198,905.8585775910734,103,154]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: '07',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-blue',
+                fontSize: 128,
+                fontFamily: 'blocksuite:surface:BebasNeue',
+                fontWeight: '400',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: 'AxmmlFfmZy',
+                index: 'aL',
+                seed: 51782970,
+              },
+              aDz5kGBwSw: {
+                type: 'shape',
+                xywh: '[1303.8521073764198,415.5172172981964,749.0048669510401,465.24173261151157]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-white',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: 'aDz5kGBwSw',
+                index: 'aM',
+                seed: 2070815342,
+                color: '--affine-palette-line-black',
+              },
+              XUoXvxaQ6o: {
+                type: 'text',
+                xywh: '[2229.2037444382922,905.8585775910734,103,154]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: '08',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-tangerine',
+                fontSize: 128,
+                fontFamily: 'blocksuite:surface:BebasNeue',
+                fontWeight: '400',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: 'XUoXvxaQ6o',
+                index: 'aO',
+                seed: 610565560,
+              },
+              '4HpcXHHyCG': {
+                type: 'shape',
+                xywh: '[2229.2037444382922,415.51721729819644,749.0048669510401,465.24173261151157]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-white',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-transparent',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: '4HpcXHHyCG',
+                index: 'aP',
+                seed: 92714421,
+                color: '--affine-palette-line-black',
+              },
+              '9D9dgqb3_T': {
+                type: 'text',
+                xywh: '[-1991.971780114972,-403.81244318618457,371,194]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert:
+                        "A storyboard template is a tool for visualizing a story's narrative with illustrations. \n\nIt's widely used in animation, film, and video game design, and has become essential for businesses in mapping customer experiences.\n\nThis tool is key for team alignment, idea pitching, and understanding customer journeys.",
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontSize: 16,
+                fontFamily: 'blocksuite:surface:Satoshi',
+                fontWeight: '400',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: '9D9dgqb3_T',
+                index: 'aT',
+                seed: 172461233,
+                hasMaxWidth: true,
+              },
+              '9kTksrdooV': {
+                type: 'text',
+                xywh: '[-1993.1100096192029,-455.71746314435444,141.86395263671875,32.5]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Stoardboard',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontSize: 24,
+                fontFamily: 'blocksuite:surface:Satoshi',
+                fontWeight: '600',
+                fontStyle: 'normal',
+                textAlign: 'left',
+                id: '9kTksrdooV',
+                index: 'aU',
+                seed: 1798838512,
+              },
+              '-HQm5uRmiD': {
+                type: 'shape',
+                xywh: '[-1993.1100096192029,-155.30093141487959,372.1382295042306,121]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0.1,
+                filled: true,
+                fillColor: '--affine-palette-shape-white',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-line-black',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: '-HQm5uRmiD',
+                index: 'af',
+                seed: 1243500994,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert:
+                        'Use the pen tool\nto sketch out the scenes\nof the storyboard',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontFamily: 'blocksuite:surface:Satoshi',
+                textAlign: 'left',
+                fontWeight: '400',
+                fontStyle: 'normal',
+                fontSize: 16,
+              },
+              eDwrSwLvT1: {
+                type: 'shape',
+                xywh: '[-1993.1100096192029,13.541009953474223,372.1382295042306,126]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0.1,
+                filled: true,
+                fillColor: '--affine-palette-shape-white',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-line-black',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: 'eDwrSwLvT1',
+                index: 'aY',
+                seed: 740967169,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert:
+                        'Double click notes to \ndescribe whats happening \nin each scene',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontFamily: 'blocksuite:surface:Satoshi',
+                textAlign: 'left',
+                fontWeight: '400',
+                fontStyle: 'normal',
+                fontSize: 16,
+              },
+              NqZ_5sIXDi: {
+                type: 'text',
+                xywh: '[-1648.5387887440108,-155.30093141487959,11.583999633789062,47.5]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: '1',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontSize: 32,
+                fontFamily: 'blocksuite:surface:Poppins',
+                fontWeight: '600',
+                fontStyle: 'italic',
+                textAlign: 'left',
+                id: 'NqZ_5sIXDi',
+                index: 'ag',
+                seed: 1741938248,
+              },
+              CkRZQnBdPT: {
+                type: 'text',
+                xywh: '[-1652.0912282617626,13.398605829259246,18.367996215820312,47.5]',
+                rotate: 0,
+                text: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: '2',
+                    },
+                  ],
+                },
+                color: '--affine-palette-line-black',
+                fontSize: 32,
+                fontFamily: 'blocksuite:surface:Poppins',
+                fontWeight: '600',
+                fontStyle: 'italic',
+                textAlign: 'left',
+                id: 'CkRZQnBdPT',
+                index: 'ac',
+                seed: 794575694,
+              },
+              JuHYf15fsy: {
+                type: 'group',
+                children: {
+                  'affine:surface:ymap': true,
+                  json: {
+                    eDwrSwLvT1: true,
+                    CkRZQnBdPT: true,
+                    'block:1N0UWZkK_8': true,
+                  },
+                },
+                title: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: 'Group 1',
+                    },
+                  ],
+                },
+                id: 'JuHYf15fsy',
+                index: 'ad',
+                seed: 1573998966,
+                xywh: '[-2072.0422562424897,-60.25228947394268,372.1382295042306,126.14240412421498]',
+              },
+              'puvDjor9-d': {
+                type: 'group',
+                children: {
+                  'affine:surface:ymap': true,
+                  json: {
+                    '-HQm5uRmiD': true,
+                    NqZ_5sIXDi: true,
+                    'block:rjD1NH1bz1': true,
+                  },
+                },
+                title: {
+                  'affine:surface:text': true,
+                  delta: [
+                    {
+                      insert: '324234',
+                    },
+                  ],
+                },
+                id: 'puvDjor9-d',
+                index: 'af',
+                seed: 47439129,
+                xywh: '[-1967.659085824912,-191.76177163350204,372.1382295042306,121]',
+              },
+              '9pzQ4PtJqc': {
+                type: 'shape',
+                xywh: '[-2066.2474634433406,-547.4694048830397,1110.2447838460484,789.3937055152682]',
+                rotate: 0,
+                shapeType: 'rect',
+                shapeStyle: 'General',
+                radius: 0,
+                filled: true,
+                fillColor: '--affine-palette-shape-white',
+                strokeWidth: 4,
+                strokeColor: '--affine-palette-line-black',
+                strokeStyle: 'solid',
+                roughness: 1.4,
+                id: '9pzQ4PtJqc',
+                index: 'Zz',
+                seed: 441326486,
+                color: '--affine-palette-line-black',
+              },
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:fkXg4KufTv',
+              flavour: 'affine:frame',
+              props: {
+                title: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Board title',
+                    },
+                  ],
+                },
+                background: '--affine-tag-gray',
+                xywh: '[-663.1275820232445,-547.4694048830397,828.6353958649848,711.2490457412829]',
+                index: 'a0',
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:tPPJWh8fBf',
+              flavour: 'affine:frame',
+              props: {
+                title: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Board title',
+                    },
+                  ],
+                },
+                background: '--affine-tag-blue',
+                xywh: '[293.60248199504247,-547.4694048830397,828.6353958649848,711.2490457412829]',
+                index: 'a1',
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:IrLiYhlb_T',
+              flavour: 'affine:frame',
+              props: {
+                title: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Board title',
+                    },
+                  ],
+                },
+                background: '--affine-tag-purple',
+                xywh: '[1250.3325460133296,-547.4694048830397,828.6353958649848,711.2490457412829]',
+                index: 'a2',
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:LUJuvPKPdR',
+              flavour: 'affine:frame',
+              props: {
+                title: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Board title',
+                    },
+                  ],
+                },
+                background: '--affine-tag-green',
+                xywh: '[2176.9577558716733,-547.4694048830397,828.6353958649848,711.2490457412829]',
+                index: 'a3',
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:-y4TFKXJaP',
+              flavour: 'affine:frame',
+              props: {
+                title: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Board title',
+                    },
+                  ],
+                },
+                background: '--affine-tag-yellow',
+                xywh: '[-663.1275820232444,378.5149914755626,828.6353958649848,711.2490457412829]',
+                index: 'a4',
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:aOTmVs-FuZ',
+              flavour: 'affine:frame',
+              props: {
+                title: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Board title',
+                    },
+                  ],
+                },
+                background: '--affine-tag-red',
+                xywh: '[316.27915662043904,378.5149914755626,828.6353958649848,711.2490457412829]',
+                index: 'a5',
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:NNBwJnSOBh',
+              flavour: 'affine:frame',
+              props: {
+                title: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Board title',
+                    },
+                  ],
+                },
+                background: '--affine-tag-teal',
+                xywh: '[1264.036842919447,378.5149914755626,828.6353958649848,711.2490457412829]',
+                index: 'a6',
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:rMJjJ7V6xb',
+              flavour: 'affine:frame',
+              props: {
+                title: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Board title',
+                    },
+                  ],
+                },
+                background: '--affine-tag-orange',
+                xywh: '[2189.3884799813195,378.5149914755627,828.6353958649848,711.2490457412829]',
+                index: 'a7',
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:rjD1NH1bz1',
+              flavour: 'affine:image',
+              props: {
+                caption: '',
+                sourceId: 'pQzvckPjmd0QPBOYJj0lRAezTAl43BtaWqVFZkydgzQ=',
+                width: 0,
+                height: 0,
+                index: 'ah',
+                xywh: '[-1795.5188339520957,-137.42603506396046,157.61387206265383,98.99257227794752]',
+                rotate: 0,
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:1N0UWZkK_8',
+              flavour: 'affine:image',
+              props: {
+                caption: '',
+                sourceId: '4rOMygicmDxT3mgVjW1-PtavNtg1TGpkNReRIwRy0fQ=',
+                width: 0,
+                height: 0,
+                index: 'aal',
+                xywh: '[-1779.307672616336,51.18653958469409,127.21644435457343,81.65683618351409]',
+                rotate: 0,
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:Jrhw1YLWKV',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[-230.1873471257049,-79.13555810124546,372.68990428151096,212.50973933371654]',
+            background: '--affine-background-secondary-color',
+            index: 'a2',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 2,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:8VZyVPAO_I',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h6',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Describe whats happening in the scene',
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:GFpdoPhgc2',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[730.5968545529315,-85.50413258738763,372.83083297527776,218.87831381985876]',
+            background: '--affine-tag-teal',
+            index: 'a7',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 2,
+                borderStyle: 'solid',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:fUXH2joezs',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h6',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Describe whats happening in the scene',
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:Fb5AygNUnr',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[1678.3545408519394,-77.3784889090899,371.9321020416821,217.1878667538341]',
+            background: '--affine-tag-pink',
+            index: 'aB',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 2,
+                borderStyle: 'solid',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:BmuUA6tq3T',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h6',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Describe whats happening in the scene',
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:fYGdA3MvTu',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[2603.706177913812,-77.37848890908987,373.20567483815285,216.99615367852667]',
+            background: '--affine-tag-yellow',
+            index: 'aE',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 2,
+                borderStyle: 'solid',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:Zmykj3phX3',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h6',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Describe whats happening in the scene',
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:pxhK-W1vEZ',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[-236.37915998110554,848.6059074495124,373.20567483815285,207.95975843368183]',
+            background: '--affine-tag-orange',
+            index: 'aH',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 2,
+                borderStyle: 'solid',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:zIPWPdYTQU',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h6',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Describe whats happening in the scene',
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:gB_LQwY9cK',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[743.027578662578,848.6059074495124,373.20567483815296,206.363094177334]',
+            background: '--affine-tag-purple',
+            index: 'aK',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 2,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:0NjuAbiCKz',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h6',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Describe whats happening in the scene',
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:ow9HsFYnuJ',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[1690.785264961586,848.6059074495124,373.2056748381531,210.93935583599136]',
+            background: '--affine-tag-gray',
+            index: 'aN',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 2,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:QzGVkmTwxV',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h6',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Describe whats happening in the scene',
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:Fonoa8wxUT',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[2616.136902023459,848.6059074495124,373.20567483815285,210.8557329187879]',
+            background: '--affine-tag-blue',
+            index: 'aQ',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 2,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-sticker',
+              },
+              collapse: true,
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:HjrnOLxGkv',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h6',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Describe whats happening in the scene',
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:W050lCccMc',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:LTdGuueeCp',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+        {
+          type: 'block',
+          id: 'block:kF8KTh-WvC',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[-1487.0582041163204,-467.4589900465258,448,618]',
+            background: '--affine-palette-transparent',
+            index: 'aR',
+            hidden: false,
+            edgeless: {
+              style: {
+                borderRadius: 0,
+                borderSize: 4,
+                borderStyle: 'none',
+                shadowType: '--affine-note-shadow-film',
+              },
+            },
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:48VdaTzf8L',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h3',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Storyboard brief',
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:V9VYl5WXhx',
+              flavour: 'affine:divider',
+              props: {},
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:7cNtrQ0W6g',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h6',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Story summary',
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:LJzurmfoOl',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert:
+                        'Describe the purpose and outcome of the storyboards in paragraph form. Outline any main points.',
+                      attributes: {
+                        color: 'var(--affine-text-highlight-foreground-grey)',
+                      },
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:lbS_RuR-vF',
+              flavour: 'affine:divider',
+              props: {},
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:g9MuIZIzLx',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h6',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Key goals and needs',
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:CWIonXIklJ',
+              flavour: 'affine:list',
+              props: {
+                type: 'numbered',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'This is item 1',
+                    },
+                  ],
+                },
+                checked: false,
+                collapsed: false,
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:PhYhzCaieP',
+              flavour: 'affine:list',
+              props: {
+                type: 'numbered',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'This is item 2',
+                    },
+                  ],
+                },
+                checked: false,
+                collapsed: false,
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:PLkpsctwaY',
+              flavour: 'affine:list',
+              props: {
+                type: 'numbered',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'This is item 3',
+                    },
+                  ],
+                },
+                checked: false,
+                collapsed: false,
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:MxqJnBLuJe',
+              flavour: 'affine:divider',
+              props: {},
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:GNPBYTu7Fc',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'h6',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'Key pains and constraints',
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:tq_8TfOK6n',
+              flavour: 'affine:list',
+              props: {
+                type: 'bulleted',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'This is item 1',
+                    },
+                  ],
+                },
+                checked: false,
+                collapsed: false,
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:GAEEyaqD4x',
+              flavour: 'affine:list',
+              props: {
+                type: 'bulleted',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'This is item 2',
+                    },
+                  ],
+                },
+                checked: false,
+                collapsed: false,
+              },
+              children: [],
+            },
+            {
+              type: 'block',
+              id: 'block:Tm7U_L0sbq',
+              flavour: 'affine:list',
+              props: {
+                type: 'bulleted',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'This is item 3',
+                    },
+                  ],
+                },
+                checked: false,
+                collapsed: false,
+              },
+              children: [],
+            },
+          ],
+        },
+      ],
+    },
+  },
+};
diff --git a/packages/blocks/src/page-block/edgeless/components/toolbar/template/templates.ts b/packages/blocks/src/page-block/edgeless/components/toolbar/template/templates.ts
index f9900580fe63..f93ecf594a93 100644
--- a/packages/blocks/src/page-block/edgeless/components/toolbar/template/templates.ts
+++ b/packages/blocks/src/page-block/edgeless/components/toolbar/template/templates.ts
@@ -1,13 +1,13 @@
 import type { TemplateCategory } from './builtin-templates.js';
-import flowchart from './json/flow-chart.json';
-import ganttchart from './json/gantt-chart.json';
-import kanban from './json/kanban.json';
-import monthlycalendar from './json/monthly-calendar.json';
-import storyboard from './json/storyboard.json';
+import { flowChart } from './json/flow-chart.js';
+import { ganttChart } from './json/gantt-chart.js';
+import { kanban } from './json/kanban.js';
+import { monthlyCalendar } from './json/monthly-calendar.js';
+import { storyboard } from './json/storyboard.js';
 
 export const templates: TemplateCategory[] = [
   {
     name: 'Project managerment',
-    templates: [kanban, storyboard, monthlycalendar, ganttchart, flowchart],
+    templates: [kanban, storyboard, monthlyCalendar, ganttChart, flowChart],
   },
 ];
diff --git a/packages/blocks/src/page-block/edgeless/utils/query.ts b/packages/blocks/src/page-block/edgeless/utils/query.ts
index 76a4420e1873..0353fbfb79ab 100644
--- a/packages/blocks/src/page-block/edgeless/utils/query.ts
+++ b/packages/blocks/src/page-block/edgeless/utils/query.ts
@@ -75,6 +75,14 @@ export function isBookmarkBlock(
   );
 }
 
+export function isEmbeddedBlock(
+  element: BaseBlockModel | EdgelessElement | null
+): element is BookmarkBlockModel {
+  return (
+    !!element && 'flavour' in element && /affine:embed-*/.test(element.flavour)
+  );
+}
+
 export function isCanvasElement(
   selectable: Selectable | null
 ): selectable is CanvasElement {
diff --git a/packages/blocks/src/page-block/index.ts b/packages/blocks/src/page-block/index.ts
index d5485ebb3289..0f8efc4f7068 100644
--- a/packages/blocks/src/page-block/index.ts
+++ b/packages/blocks/src/page-block/index.ts
@@ -13,6 +13,7 @@ export {
 } from './edgeless/components/utils.js';
 export * from './edgeless/edgeless-page-block.js';
 export { type PageBlockModel, PageBlockSchema } from './page-model.js';
+export { PageService } from './page-service.js';
 export * from './types.js';
 export * from './utils/index.js';
 export * from './widgets/index.js';
diff --git a/packages/blocks/src/page-block/widgets/block-hub/components/block-hub.ts b/packages/blocks/src/page-block/widgets/block-hub/components/block-hub.ts
index 815229ad6a07..ab8c02842588 100644
--- a/packages/blocks/src/page-block/widgets/block-hub/components/block-hub.ts
+++ b/packages/blocks/src/page-block/widgets/block-hub/components/block-hub.ts
@@ -7,7 +7,6 @@ import { customElement, query, queryAll, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
 import type { DragIndicator } from '../../../../_common/components/drag-indicator.js';
-import { toast } from '../../../../_common/components/toast.js';
 import { BlockHubIcon, CrossIcon } from '../../../../_common/icons/index.js';
 import {
   asyncFocusRichText,
@@ -26,14 +25,13 @@ import {
   Rect,
   stopPropagation,
 } from '../../../../_common/utils/index.js';
-import { humanFileSize } from '../../../../_common/utils/math.js';
 import { getServiceOrRegister } from '../../../../_legacy/service/index.js';
 import { toggleBookmarkCreateModal } from '../../../../bookmark-block/components/index.js';
+import { ImageService } from '../../../../image-block/image-service.js';
 import {
+  addImageBlock,
   addSiblingImageBlock,
-  uploadBlobForImage,
-} from '../../../../image-block/image/utils.js';
-import { ImageService } from '../../../../image-block/image-service.js';
+} from '../../../../image-block/utils.js';
 import { DocPageBlockComponent } from '../../../../page-block/doc/doc-page-block.js';
 import type { EdgelessPageBlockComponent } from '../../../../page-block/edgeless/edgeless-page-block.js';
 import { autoScroll } from '../../../../page-block/text-selection/utils.js';
@@ -463,24 +461,13 @@ export class BlockHub extends WithDisposable(ShadowlessElement) {
       lastType !== 'database'
     ) {
       const imageFiles = await getImageFilesFromLocal();
+
       const imageService = this._host.spec.getService('affine:image');
       assertExists(imageService);
       assertInstanceOf(imageService, ImageService);
       const maxFileSize = imageService.maxFileSize;
-      const isSizeExceeded = imageFiles.some(file => file.size > maxFileSize);
-      if (isSizeExceeded) {
-        toast(
-          `You can only upload files less than ${humanFileSize(
-            maxFileSize,
-            true,
-            0
-          )}`
-        );
-      } else {
-        imageFiles.forEach(file => {
-          addSiblingImageBlock(page, file, lastModelState.model);
-        });
-      }
+
+      addSiblingImageBlock(imageFiles, maxFileSize, lastModelState.model);
     } else if (props.flavour === 'affine:bookmark') {
       const url = await toggleBookmarkCreateModal(this._host);
       url &&
@@ -589,30 +576,20 @@ export class BlockHub extends WithDisposable(ShadowlessElement) {
     // TO DO: fix image loading state for blockhub
     if (data.flavour === 'affine:image' && data.type === 'image') {
       const imageFiles = await getImageFilesFromLocal();
+
       const imageService = this._host.spec.getService('affine:image');
       assertExists(imageService);
       assertInstanceOf(imageService, ImageService);
       const maxFileSize = imageService.maxFileSize;
-      const isSizeExceeded = imageFiles.some(file => file.size > maxFileSize);
-      if (isSizeExceeded) {
-        toast(
-          `You can only upload files less than ${humanFileSize(
-            maxFileSize,
-            true,
-            0
-          )}`
-        );
-      } else {
-        imageFiles.forEach(file => {
-          const blockId = page.addBlock(
-            'affine:image',
-            { flavour: 'affine:image', size: file.size },
-            defaultNoteBlock
-          );
-          uploadBlobForImage(page, blockId, file);
-          lastId = blockId;
-        });
-      }
+
+      const blockIds = addImageBlock(
+        imageFiles,
+        maxFileSize,
+        page,
+        defaultNoteBlock
+      );
+
+      lastId = blockIds[blockIds.length - 1];
     } else if (data.flavour === 'affine:bookmark') {
       const url = await toggleBookmarkCreateModal(this._host);
       url &&
diff --git a/packages/blocks/src/page-block/widgets/drag-handle/components/drag-preview.ts b/packages/blocks/src/page-block/widgets/drag-handle/components/drag-preview.ts
index 43e4bb8a19c6..e791930fe60f 100644
--- a/packages/blocks/src/page-block/widgets/drag-handle/components/drag-preview.ts
+++ b/packages/blocks/src/page-block/widgets/drag-handle/components/drag-preview.ts
@@ -3,8 +3,17 @@ import { baseTheme } from '@toeverything/theme';
 import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
+import { Point } from '../../../../_common/utils/index.js';
+
 @customElement('affine-drag-preview')
 export class DragPreview extends ShadowlessElement {
+  offset: Point;
+
+  constructor(offset?: Point) {
+    super();
+    this.offset = offset ?? new Point(0, 0);
+  }
+
   override render() {
     return html`<style>
       affine-drag-preview {
@@ -21,7 +30,7 @@ export class DragPreview extends ShadowlessElement {
         font-weight: 400;
         top: 0;
         left: 0;
-        opacity: 0.843;
+        opacity: 0.5;
         cursor: none;
         user-select: none;
         pointer-events: none;
@@ -39,7 +48,7 @@ export class DragPreview extends ShadowlessElement {
         margin-top: 0;
       }
 
-      affine-drag-preview.grabbing {
+      .affine-drag-preview-grabbing * {
         cursor: grabbing;
       }
 
diff --git a/packages/blocks/src/page-block/widgets/drag-handle/config.ts b/packages/blocks/src/page-block/widgets/drag-handle/config.ts
index e5b8ae7f8053..cb13c9b8a8ca 100644
--- a/packages/blocks/src/page-block/widgets/drag-handle/config.ts
+++ b/packages/blocks/src/page-block/widgets/drag-handle/config.ts
@@ -2,18 +2,27 @@ import type { PointerEventState } from '@blocksuite/block-std';
 import type { Disposable } from '@blocksuite/global/utils';
 import type { BlockElement } from '@blocksuite/lit';
 
-import type { Rect } from '../../../_common/utils/index.js';
+import type { Point, Rect } from '../../../_common/utils/index.js';
+import type { DragPreview } from './components/drag-preview.js';
+
+export const DRAG_HANDLE_CONTAINER_HEIGHT = 24;
+export const DRAG_HANDLE_CONTAINER_WIDTH = 16;
+export const DRAG_HANDLE_CONTAINER_WIDTH_TOP_LEVEL = 8;
+export const DRAG_HANDLE_CONTAINER_OFFSET_LEFT = 2;
+export const DRAG_HANDLE_CONTAINER_OFFSET_LEFT_LIST = 18;
+export const DRAG_HANDLE_CONTAINER_OFFSET_LEFT_TOP_LEVEL = 5;
+export const DRAG_HANDLE_CONTAINER_PADDING = 8;
 
-export const DEFAULT_DRAG_HANDLE_CONTAINER_HEIGHT = 24;
-export const DRAG_HANDLE_OFFSET_LEFT = 2;
-export const LIST_DRAG_HANDLE_OFFSET_LEFT = 18;
 export const DRAG_HANDLE_GRABBER_HEIGHT = 12;
 export const DRAG_HANDLE_GRABBER_WIDTH = 4;
+export const DRAG_HANDLE_GRABBER_WIDTH_HOVERED = 2;
 export const DRAG_HANDLE_GRABBER_BORDER_RADIUS = 4;
 export const DRAG_HANDLE_GRABBER_MARGIN = 4;
+
+export const HOVER_AREA_RECT_PADDING_TOP_LEVEL = 6;
+
 export const NOTE_CONTAINER_PADDING = 24;
 export const DRAG_HOVER_RECT_PADDING = 4;
-export const HOVER_DRAG_HANDLE_GRABBER_WIDTH = 2;
 
 export const BLOCK_CHILDREN_CONTAINER_PADDING_LEFT = 26;
 
@@ -24,23 +33,35 @@ export type DropResult = {
   dropType: DropType;
 };
 
-export type DragHandleOption = {
-  flavour: string;
-  onDragStart?: (
+export type OnDragStartProps = {
+  state: PointerEventState;
+  startDragging: (
+    blockElements: BlockElement[],
     state: PointerEventState,
-    startDragging: (
-      blockElements: BlockElement[],
-      state: PointerEventState
-    ) => void
-  ) => boolean;
+    dragPreview?: HTMLElement,
+    dragPreviewOffset?: Point
+  ) => void;
+  anchorBlockId: string;
+  anchorBlockPath: string[] | null;
+};
+
+export type OnDragEndProps = {
+  state: PointerEventState;
+  draggingElements: BlockElement[];
+  dropBlockId: string;
+  dropType: DropType | null;
+  dragPreview: DragPreview;
+};
+
+export type DragHandleOption = {
+  flavour: string | RegExp;
+  edgeless?: boolean;
+  onDragStart?: (props: OnDragStartProps) => boolean;
   onDragMove?: (
     state: PointerEventState,
     draggingElements?: BlockElement[]
   ) => boolean;
-  onDragEnd?: (
-    state: PointerEventState,
-    draggingElements: BlockElement[]
-  ) => boolean;
+  onDragEnd?: (props: OnDragEndProps) => boolean;
 };
 
 export class DragHandleOptionsRunner {
@@ -50,20 +71,30 @@ export class DragHandleOptionsRunner {
     return Array.from(this.optionMap.keys());
   }
 
+  getOption(flavour: string): DragHandleOption | undefined {
+    return this.options.find(option => {
+      if (typeof option.flavour === 'string') {
+        return option.flavour === flavour;
+      } else {
+        return option.flavour.test(flavour);
+      }
+    });
+  }
+
   register(option: DragHandleOption): Disposable {
     const currentOption =
-      this.getExistingOptionWithSameFlavour(option) || option;
+      this._getExistingOptionWithSameFlavour(option) || option;
     const count = this.optionMap.get(currentOption) || 0;
     this.optionMap.set(currentOption, count + 1);
 
     return {
       dispose: () => {
-        this.decreaseOptionCount(currentOption);
+        this._decreaseOptionCount(currentOption);
       },
     };
   }
 
-  private getExistingOptionWithSameFlavour(
+  private _getExistingOptionWithSameFlavour(
     option: DragHandleOption
   ): DragHandleOption | undefined {
     return Array.from(this.optionMap.keys()).find(
@@ -71,7 +102,7 @@ export class DragHandleOptionsRunner {
     );
   }
 
-  private decreaseOptionCount(option: DragHandleOption) {
+  private _decreaseOptionCount(option: DragHandleOption) {
     const count = this.optionMap.get(option) || 0;
     if (count > 1) {
       this.optionMap.set(option, count - 1);
diff --git a/packages/blocks/src/page-block/widgets/drag-handle/drag-handle.ts b/packages/blocks/src/page-block/widgets/drag-handle/drag-handle.ts
index 616d3d13f155..a4b1bc659450 100644
--- a/packages/blocks/src/page-block/widgets/drag-handle/drag-handle.ts
+++ b/packages/blocks/src/page-block/widgets/drag-handle/drag-handle.ts
@@ -2,45 +2,56 @@ import {
   PathFinder,
   type PointerEventState,
   type UIEventHandler,
-  type UIEventStateContext,
 } from '@blocksuite/block-std';
-import { assertExists, DisposableGroup } from '@blocksuite/global/utils';
+import {
+  assertExists,
+  assertInstanceOf,
+  DisposableGroup,
+} from '@blocksuite/global/utils';
 import type { BlockElement } from '@blocksuite/lit';
 import { WidgetElement } from '@blocksuite/lit';
-import type { BaseBlockModel } from '@blocksuite/store';
+import { type BaseBlockModel } from '@blocksuite/store';
 import { html, render } from 'lit';
 import { customElement, query, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+import { BLOCK_ID_ATTR } from '../../../_common/consts.js';
 import {
+  type EdgelessTool,
   getBlockComponentByModel,
   getBlockElementsExcludeSubtrees,
   getCurrentNativeRange,
   getModelByBlockComponent,
-  isEdgelessPage,
   isPageMode,
   matchFlavours,
   Point,
   Rect,
+  type TopLevelBlockModel,
 } from '../../../_common/utils/index.js';
-import { DocPageBlockComponent } from '../../doc/doc-page-block.js';
-import { EdgelessPageBlockComponent } from '../../edgeless/edgeless-page-block.js';
-import { autoScroll } from '../../text-selection/utils.js';
+import { DocPageBlockComponent } from '../../../page-block/doc/doc-page-block.js';
+import { EdgelessPageBlockComponent } from '../../../page-block/edgeless/edgeless-page-block.js';
+import {
+  getSelectedRect,
+  isTopLevelBlock,
+} from '../../../page-block/edgeless/utils/query.js';
+import { autoScroll } from '../../../page-block/text-selection/utils.js';
 import { DragPreview } from './components/drag-preview.js';
 import { DropIndicator } from './components/drop-indicator.js';
+import type { DragHandleOption, DropResult, DropType } from './config.js';
+import { DragHandleOptionsRunner } from './config.js';
 import {
+  DRAG_HANDLE_CONTAINER_OFFSET_LEFT_TOP_LEVEL,
+  DRAG_HANDLE_CONTAINER_PADDING,
+  DRAG_HANDLE_CONTAINER_WIDTH,
+  DRAG_HANDLE_CONTAINER_WIDTH_TOP_LEVEL,
   DRAG_HANDLE_GRABBER_BORDER_RADIUS,
   DRAG_HANDLE_GRABBER_HEIGHT,
   DRAG_HANDLE_GRABBER_WIDTH,
+  DRAG_HANDLE_GRABBER_WIDTH_HOVERED,
   DRAG_HOVER_RECT_PADDING,
-  type DragHandleOption,
-  DragHandleOptionsRunner,
-  type DropResult,
-  type DropType,
-  HOVER_DRAG_HANDLE_GRABBER_WIDTH,
-  NOTE_CONTAINER_PADDING,
+  HOVER_AREA_RECT_PADDING_TOP_LEVEL,
 } from './config.js';
-import { DRAG_HANDLE_WIDTH, styles } from './styles.js';
+import { styles } from './styles.js';
 import {
   calcDropTarget,
   captureEventTarget,
@@ -55,6 +66,7 @@ import {
   includeTextSelection,
   insideDatabaseTable,
   isBlockPathEqual,
+  isOutOfNoteBlock,
   updateDragHandleClassName,
 } from './utils.js';
 
@@ -87,10 +99,6 @@ export class AffineDragHandleWidget extends WidgetElement<
   lastDragPointerState: PointerEventState | null = null;
   scale = 1;
   rafID = 0;
-  dragPreviewOffset = {
-    x: 0,
-    y: 0,
-  };
 
   @state()
   private _dragHoverRect: {
@@ -100,12 +108,15 @@ export class AffineDragHandleWidget extends WidgetElement<
     top: number;
   } | null = null;
 
-  private _hoveredBlockId = '';
-  private _hoveredBlockPath: string[] | null = null;
   private _lastHoveredBlockPath: string[] | null = null;
   private _lastShowedBlock: { path: string[]; el: BlockElement } | null = null;
-  private _hoverDragHandle = false;
-  private _dragHandlePointerDown = false;
+
+  private _isHoverDragHandleVisible = false;
+  private _isDragHandleHovered = false;
+  private _isTopLevelDragHandleVisible = false;
+
+  private _anchorBlockId = '';
+  private _anchorBlockPath: string[] | null = null;
 
   private _anchorModelDisposables: DisposableGroup | null = null;
 
@@ -125,6 +136,18 @@ export class AffineDragHandleWidget extends WidgetElement<
       : this.host.selection.filter('block');
   }
 
+  get anchorBlockElement(): BlockElement | null {
+    if (!this._anchorBlockPath) return null;
+    return this._getBlockElementFromViewStore(this._anchorBlockPath);
+  }
+
+  get anchorEdgelessElement(): TopLevelBlockModel | null {
+    if (isPageMode(this.page) || !this._anchorBlockId) return null;
+    const { surface } = this.pageBlockElement as EdgelessPageBlockComponent;
+    const edgelessElement = surface.pickById(this._anchorBlockId);
+    return isTopLevelBlock(edgelessElement) ? edgelessElement : null;
+  }
+
   clearRaf() {
     if (this.rafID) {
       cancelAnimationFrame(this.rafID);
@@ -132,27 +155,10 @@ export class AffineDragHandleWidget extends WidgetElement<
     }
   }
 
-  outOfNoteBlock = (noteBlock: Element, point: Point) => {
-    // TODO: need to find a better way to check if the point is out of note block
-    const rect = noteBlock.getBoundingClientRect();
-    const padding = NOTE_CONTAINER_PADDING * this.scale;
-    return rect
-      ? isPageMode(this.page)
-        ? point.y < rect.top ||
-          point.y > rect.bottom ||
-          point.x > rect.right + padding
-        : point.y < rect.top ||
-          point.y > rect.bottom ||
-          point.x < rect.left - padding ||
-          point.x > rect.right + padding
-      : true;
-  };
-
   /**
    * When dragging, should update indicator position and target drop block id
    */
   getDropResult = (state: PointerEventState): DropResult | null => {
-    let dropIndicator = null;
     const point = getContainerOffsetPoint(state);
     const closestBlockElement = getClosestBlockByPoint(
       this.page,
@@ -160,36 +166,47 @@ export class AffineDragHandleWidget extends WidgetElement<
       point
     );
     if (!closestBlockElement) {
-      return dropIndicator;
+      return null;
     }
 
     const blockId = closestBlockElement.model.id;
     const blockPath = closestBlockElement.path;
-    assertExists(blockId);
-    assertExists(blockPath);
+    const model = closestBlockElement.model;
+
+    const isDatabase = matchFlavours(model, ['affine:database']);
+    if (isDatabase) {
+      return null;
+    }
+
+    // note block can only be dropped into another note block
+    // prevent note block from being dropped into other blocks
+    const isDraggedElementNote =
+      this.draggingElements.length === 1 &&
+      matchFlavours(this.draggingElements[0].model, ['affine:note']);
+
+    if (isDraggedElementNote) {
+      const parentElement = this._getBlockElementFromViewStore(
+        PathFinder.parent(closestBlockElement.path)
+      );
+      if (!parentElement) return null;
+      if (!matchFlavours(parentElement.model, ['affine:note'])) return null;
+    }
 
     // Should make sure that target drop block is
-    // neither within the selected block
-    // nor a child-block of any selected block
+    // neither within the dragging elements
+    // nor a child-block of any dragging elements
     if (
       containBlock(
-        this.selectedBlocks.map(selection => selection.blockId),
+        this.draggingElements.map(blockElement => blockElement.model.id),
         blockId
       ) ||
-      containChildBlock(this.selectedBlocks, blockPath)
+      containChildBlock(this.draggingElements, blockPath)
     ) {
-      return dropIndicator;
+      return null;
     }
 
-    this.dropBlockId = blockId;
-
     let rect = null;
-    const model = closestBlockElement.model;
-
-    const isDatabase = matchFlavours(model, ['affine:database']);
-    if (isDatabase) {
-      return dropIndicator;
-    }
+    let dropType: DropType = 'before';
 
     const result = calcDropTarget(
       point,
@@ -199,7 +216,6 @@ export class AffineDragHandleWidget extends WidgetElement<
       this.scale
     );
 
-    let dropType: DropType = 'before';
     if (result) {
       rect = result.rect;
       if (rect) {
@@ -211,33 +227,21 @@ export class AffineDragHandleWidget extends WidgetElement<
       dropType = result.dropType;
     }
 
-    dropIndicator = {
+    if (isDraggedElementNote && dropType === 'in') return null;
+
+    const dropIndicator = {
       rect,
-      dropBlockId: this.dropBlockId,
+      dropBlockId: blockId,
       dropType,
     };
 
     return dropIndicator;
   };
 
-  createDropIndicator = () => {
-    if (!this.dropIndicator) this.dropIndicator = new DropIndicator();
-    this.blockElement.append(this.dropIndicator);
-  };
-
-  updateDropIndicator = (indicator: DropResult | null) => {
-    this.dropBlockId = indicator?.dropBlockId ?? '';
-    this.dropType = indicator?.dropType ?? null;
-    if (this.dropIndicator) {
-      this.dropIndicator.rect = indicator?.rect ?? null;
-    }
-  };
-
-  removeDropIndicator = () => {
-    if (this.dropIndicator) {
-      this.dropIndicator.remove();
-      this.dropIndicator = null;
-    }
+  updateDropResult = (dropResult: DropResult | null) => {
+    this.dropBlockId = dropResult?.dropBlockId ?? '';
+    this.dropType = dropResult?.dropType ?? null;
+    if (this.dropIndicator) this.dropIndicator.rect = dropResult?.rect ?? null;
   };
 
   resetDropResult = () => {
@@ -246,7 +250,14 @@ export class AffineDragHandleWidget extends WidgetElement<
     if (this.dropIndicator) this.dropIndicator.rect = null;
   };
 
-  updateIndicator = (
+  createDropIndicator = () => {
+    if (!this.dropIndicator) {
+      this.dropIndicator = new DropIndicator();
+      this.blockElement.append(this.dropIndicator);
+    }
+  };
+
+  updateDropIndicator = (
     state: PointerEventState,
     shouldAutoScroll: boolean = false
   ) => {
@@ -256,11 +267,14 @@ export class AffineDragHandleWidget extends WidgetElement<
       this.pageBlockElement,
       point
     );
-    if (!closestNoteBlock || this.outOfNoteBlock(closestNoteBlock, point)) {
+    if (
+      !closestNoteBlock ||
+      isOutOfNoteBlock(this.page, closestNoteBlock, point, this.scale)
+    ) {
       this.resetDropResult();
     } else {
-      const dropIndicator = this.getDropResult(state);
-      this.updateDropIndicator(dropIndicator);
+      const dropResult = this.getDropResult(state);
+      this.updateDropResult(dropResult);
     }
 
     this.lastDragPointerState = state;
@@ -273,66 +287,93 @@ export class AffineDragHandleWidget extends WidgetElement<
         return;
       }
       this.rafID = requestAnimationFrame(() =>
-        this.updateIndicator(state, true)
+        this.updateDropIndicator(state, true)
       );
     } else {
       this.clearRaf();
     }
   };
 
+  private _updateDropIndicatorOnScroll = () => {
+    if (
+      !this.dragging ||
+      this.draggingElements.length === 0 ||
+      !this.lastDragPointerState
+    )
+      return;
+
+    const state = this.lastDragPointerState;
+    this.rafID = requestAnimationFrame(() =>
+      this.updateDropIndicator(state, false)
+    );
+  };
+
+  removeDropIndicator = () => {
+    if (this.dropIndicator) {
+      this.dropIndicator.remove();
+      this.dropIndicator = null;
+    }
+  };
+
   calculatePreviewOffset = (
     blockElements: BlockElement[],
     state: PointerEventState
   ) => {
     const { top, left } = blockElements[0].getBoundingClientRect();
-    const { x: offsetX, y: offsetY } = state.containerOffset;
-    const { x, y } = state.point;
-    return {
-      x: x - left + offsetX,
-      y: y - top + offsetY,
-    };
+    const point = getContainerOffsetPoint(state);
+    const previewOffset = new Point(point.x - left, point.y - top);
+    return previewOffset;
   };
 
   createDragPreview = (
     blockElements: BlockElement[],
-    state: PointerEventState
-  ) => {
-    if (!this.dragPreview) this.dragPreview = new DragPreview();
-
-    const fragment = document.createDocumentFragment();
-    let width = 0;
-    blockElements.forEach(element => {
-      width = Math.max(width, element.getBoundingClientRect().width);
-      const container = document.createElement('div');
-      container.classList.add('affine-block-element');
-      render(this.host.renderModel(element.model), container);
-      fragment.appendChild(container);
-    });
+    state: PointerEventState,
+    dragPreviewEl?: HTMLElement,
+    dragPreviewOffset?: Point
+  ): DragPreview => {
+    let dragPreview: DragPreview;
+    if (dragPreviewEl) {
+      dragPreview = new DragPreview(dragPreviewOffset);
+      dragPreview.appendChild(dragPreviewEl);
+    } else {
+      const fragment = document.createDocumentFragment();
+      let width = 0;
+      blockElements.forEach(element => {
+        width = Math.max(width, element.getBoundingClientRect().width);
+        const container = document.createElement('div');
+        container.classList.add('affine-block-element');
+        render(this.host.renderModel(element.model), container);
+        fragment.appendChild(container);
+      });
 
-    this.dragPreviewOffset = this.calculatePreviewOffset(blockElements, state);
-    const posX = state.x - this.dragPreviewOffset.x;
-    const posY = state.y - this.dragPreviewOffset.y;
-    this.dragPreview.style.width = `${width / this.scale}px`;
-    this.dragPreview.style.transform = `translate(${posX}px, ${posY}px) scale(${this.scale})`;
-    this.dragPreview.classList.add('grabbing');
-    this.dragPreview.style.display = 'block';
+      const offset = this.calculatePreviewOffset(blockElements, state);
+      const posX = state.x - offset.x;
+      const posY = state.y - offset.y;
 
-    this.dragPreview.appendChild(fragment);
-    this.pageBlockElement.appendChild(this.dragPreview);
+      dragPreview = new DragPreview(offset);
+      dragPreview.style.width = `${width / this.scale}px`;
+      dragPreview.style.transform = `translate(${posX}px, ${posY}px) scale(${this.scale})`;
+      dragPreview.appendChild(fragment);
+    }
+    dragPreview.classList.add('grabbing');
+    dragPreview.style.display = 'block';
+    this.pageBlockElement.appendChild(dragPreview);
+    return dragPreview;
   };
 
-  updateDragPreviewPosition = (
-    dragPreview: DragPreview | null,
-    state: PointerEventState
-  ) => {
-    if (!this.dragging || this.draggingElements.length === 0 || !dragPreview)
-      return;
+  updateDragPreviewPosition = (state: PointerEventState) => {
+    if (!this.dragPreview) return;
 
-    const point = new Point(state.x, state.y);
-    const posX = point.x - this.dragPreviewOffset.x;
-    const posY = point.y - this.dragPreviewOffset.y;
+    const dragPreviewOffset = this.dragPreview.offset;
+    const posX = state.x - dragPreviewOffset.x;
+    const posY = state.y - dragPreviewOffset.y;
+    this.dragPreview.style.transform = `translate(${posX}px, ${posY}px) scale(${this.scale})`;
+  };
 
-    dragPreview.style.transform = `translate(${posX}px, ${posY}px) scale(${this.scale})`;
+  private _updateDragPreviewOnZoom = () => {
+    if (this.dragPreview && this.lastDragPointerState) {
+      this.updateDragPreviewPosition(this.lastDragPointerState);
+    }
   };
 
   removeDragPreview = () => {
@@ -342,26 +383,77 @@ export class AffineDragHandleWidget extends WidgetElement<
     }
   };
 
-  startDragging = (blockElements: BlockElement[], state: PointerEventState) => {
+  changeCursorToGrabbing = () => {
+    document.documentElement.classList.add('affine-drag-preview-grabbing');
+  };
+
+  resetCursor = () => {
+    document.documentElement.classList.remove('affine-drag-preview-grabbing');
+  };
+
+  startDragging = (
+    blockElements: BlockElement[],
+    state: PointerEventState,
+    dragPreviewEl?: HTMLElement,
+    dragPreviewOffset?: Point
+  ) => {
+    if (!blockElements.length) return;
+
     this.draggingElements = blockElements;
-    this.createDragPreview(blockElements, state);
+
+    if (this.dragPreview) this.removeDragPreview();
+    this.dragPreview = this.createDragPreview(
+      blockElements,
+      state,
+      dragPreviewEl,
+      dragPreviewOffset
+    );
+
     this.dragging = true;
+    this.changeCursorToGrabbing();
     this.createDropIndicator();
-    this.hide();
+    this._hide();
   };
 
-  hide = (force = false) => {
+  private _hide = (force = false) => {
     updateDragHandleClassName();
-    if (!this._dragHandleContainer) return;
 
-    this._hoverDragHandle = false;
-    if (this._dragHandleContainer.style.display !== 'none')
+    this._isHoverDragHandleVisible = false;
+    this._isTopLevelDragHandleVisible = false;
+    this._isDragHandleHovered = false;
+
+    this._anchorBlockId = '';
+    this._anchorBlockPath = null;
+
+    if (this._dragHandleContainer)
       this._dragHandleContainer.style.display = 'none';
 
     if (force) this._reset();
   };
 
-  private _handleAnchorModelDisposables(blockElement: BlockElement) {
+  private _reset() {
+    this.draggingElements = [];
+    this.dropBlockId = '';
+    this.dropType = null;
+    this.lastDragPointerState = null;
+    this.rafID = 0;
+    this.dragging = false;
+
+    this._dragHoverRect = null;
+    this._lastHoveredBlockPath = null;
+    this._lastShowedBlock = null;
+    this._anchorBlockId = '';
+    this._anchorBlockPath = null;
+    this._isHoverDragHandleVisible = false;
+    this._isDragHandleHovered = false;
+    this._isTopLevelDragHandleVisible = false;
+
+    this.removeDragPreview();
+    this.removeDropIndicator();
+    this.resetCursor();
+  }
+
+  private _handleAnchorModelDisposables(blockModel: BaseBlockModel) {
     if (this._anchorModelDisposables) {
       this._anchorModelDisposables.dispose();
       this._anchorModelDisposables = null;
@@ -369,12 +461,10 @@ export class AffineDragHandleWidget extends WidgetElement<
 
     this._anchorModelDisposables = new DisposableGroup();
     this._anchorModelDisposables.add(
-      blockElement.model.propsUpdated.on(() => this.hide())
+      blockModel.propsUpdated.on(() => this._hide())
     );
 
-    this._anchorModelDisposables.add(
-      blockElement.model.deleted.on(() => this.hide())
-    );
+    this._anchorModelDisposables.add(blockModel.deleted.on(() => this._hide()));
   }
 
   private _getBlockElementFromViewStore(path: string[]) {
@@ -405,49 +495,26 @@ export class AffineDragHandleWidget extends WidgetElement<
     return top + paddingTop + this._viewportOffset.top;
   }
 
-  private _reset() {
-    this.draggingElements = [];
-    this.dropBlockId = '';
-    this.dropType = null;
-    this.lastDragPointerState = null;
-    this.rafID = 0;
-    this.dragging = false;
-    this.dragPreviewOffset = {
-      x: 0,
-      y: 0,
-    };
-
-    this._dragHoverRect = null;
-    this._hoveredBlockId = '';
-    this._hoveredBlockPath = null;
-    this._lastHoveredBlockPath = null;
-    this._lastShowedBlock = null;
-    this._hoverDragHandle = false;
-    this._dragHandlePointerDown = false;
-
-    this.removeDragPreview();
-    this.removeDropIndicator();
-  }
-
-  private _resetDragHandleGrabber() {
-    this._dragHandleGrabber.style.width = `${
-      DRAG_HANDLE_GRABBER_WIDTH * this.scale
-    }px`;
-    this._dragHandleGrabber.style.borderRadius = `${
-      DRAG_HANDLE_GRABBER_BORDER_RADIUS * this.scale
-    }px`;
+  /** Check if given blockElement is selected */
+  private _isBlockSelected(block?: BlockElement) {
+    if (!block) return false;
+    return this.selectedBlocks.some(
+      selection => selection.blockId === block.model.id
+    );
   }
 
   // Single block: drag handle should show on the vertical middle of the first line of element
   // Multiple blocks: drag handle should show on the vertical middle of all blocks
-  private _show(blockElement: BlockElement) {
+  private async _showDragHandleOnHoverBlock(blockPath: string[]) {
+    const blockElement = this._getBlockElementFromViewStore(blockPath);
+    assertExists(blockElement);
+
     const container = this._dragHandleContainer;
     const grabber = this._dragHandleGrabber;
     if (!container || !grabber) return;
 
     let { left } = blockElement.getBoundingClientRect();
     const draggingAreaRect = this._getDraggingAreaRect(blockElement);
-    if (!draggingAreaRect) return;
 
     // Some blocks have padding, should consider padding when calculating position
     const computedStyle = getComputedStyle(blockElement);
@@ -457,14 +524,13 @@ export class AffineDragHandleWidget extends WidgetElement<
     const containerHeight = getDragHandleContainerHeight(blockElement.model);
 
     // Ad-hoc solution for list with toggle icon
-    const blockElements = this._getHoveredBlocks();
-    const offsetLeft = getDragHandleLeftPadding(blockElements);
-    updateDragHandleClassName(blockElements);
+    updateDragHandleClassName([blockElement]);
+    const offsetLeft = getDragHandleLeftPadding([blockElement]);
     // End of ad-hoc solution
 
     const posLeft =
       left -
-      (DRAG_HANDLE_WIDTH + offsetLeft) * this.scale +
+      (DRAG_HANDLE_CONTAINER_WIDTH + offsetLeft) * this.scale +
       this._viewportOffset.left;
     const posTop = this._getTopWithBlockElement(blockElement);
 
@@ -482,7 +548,7 @@ export class AffineDragHandleWidget extends WidgetElement<
       container.style.transition = transition ? 'padding 0.25s ease' : 'none';
       container.style.paddingTop = `${paddingTop}px`;
       container.style.paddingBottom = `${paddingBottom}px`;
-      container.style.width = `${DRAG_HANDLE_WIDTH * this.scale}px`;
+      container.style.width = `${DRAG_HANDLE_CONTAINER_WIDTH * this.scale}px`;
       container.style.left = `${posLeft}px`;
       container.style.top = `${draggingAreaRect.top}px`;
       container.style.display = 'flex';
@@ -494,7 +560,7 @@ export class AffineDragHandleWidget extends WidgetElement<
     } else if (this.selectedBlocks.length) {
       if (this._isBlockSelected(blockElement))
         applyStyle(
-          this._hoverDragHandle &&
+          this._isDragHandleHovered &&
             this._isBlockSelected(this._lastShowedBlock?.el)
         );
       else applyStyle(false);
@@ -502,39 +568,82 @@ export class AffineDragHandleWidget extends WidgetElement<
       applyStyle(false);
     }
 
-    this._resetDragHandleGrabber();
-    this._handleAnchorModelDisposables(blockElement);
+    grabber.style.width = `${DRAG_HANDLE_GRABBER_WIDTH * this.scale}px`;
+    grabber.style.borderRadius = `${
+      DRAG_HANDLE_GRABBER_BORDER_RADIUS * this.scale
+    }px`;
+
+    this._handleAnchorModelDisposables(blockElement.model);
     if (!isBlockPathEqual(blockElement.path, this._lastShowedBlock?.path)) {
       this._lastShowedBlock = {
         path: blockElement.path,
         el: blockElement,
       };
     }
-  }
 
-  /** Check if given blockElement is selected */
-  private _isBlockSelected(block?: BlockElement) {
-    if (!block) return false;
-    return this.selectedBlocks.some(
-      selection => selection.blockId === block.model.id
-    );
+    this._isHoverDragHandleVisible = true;
   }
 
-  private _showDragHandleOnHoverBlock(blockPath: string[]) {
-    const blockElement = this._getBlockElementFromViewStore(blockPath);
+  private _showDragHandleOnTopLevelBlocks() {
+    if (isPageMode(this.page)) return;
+    const edgelessPage = this.pageBlockElement as EdgelessPageBlockComponent;
 
+    if (!this._anchorBlockPath) return;
+    const blockElement = this.anchorBlockElement;
     assertExists(blockElement);
-    this._show(blockElement);
+
+    const edgelessElement = edgelessPage.surface.pickById(
+      blockElement.model.id
+    );
+    assertExists(edgelessElement);
+
+    const container = this._dragHandleContainer;
+    const grabber = this._dragHandleGrabber;
+    if (!container || !grabber) return;
+
+    const rect = getSelectedRect([edgelessElement]);
+    const [left, top] = edgelessPage.surface.toViewCoord(rect.left, rect.top);
+    const height = rect.height * this.scale;
+
+    const posLeft =
+      left -
+      (DRAG_HANDLE_CONTAINER_WIDTH_TOP_LEVEL +
+        DRAG_HANDLE_CONTAINER_OFFSET_LEFT_TOP_LEVEL) *
+        this.scale +
+      this._viewportOffset.left;
+
+    const posTop = top + this._viewportOffset.top;
+
+    container.style.transition = 'none';
+    container.style.paddingTop = `0px`;
+    container.style.paddingBottom = `0px`;
+    container.style.width = `${
+      DRAG_HANDLE_CONTAINER_WIDTH_TOP_LEVEL * this.scale
+    }px`;
+    container.style.left = `${posLeft}px`;
+    container.style.top = `${posTop}px`;
+    container.style.display = 'flex';
+    container.style.height = `${height}px`;
+
+    grabber.style.width = `${DRAG_HANDLE_GRABBER_WIDTH_HOVERED * this.scale}px`;
+    grabber.style.borderRadius = `${
+      DRAG_HANDLE_GRABBER_BORDER_RADIUS * this.scale
+    }px`;
+
+    this._handleAnchorModelDisposables(blockElement.model);
+
+    this._isTopLevelDragHandleVisible = true;
   }
 
   private _getHoveredBlocks(): BlockElement[] {
-    if (!this._hoveredBlockPath) return [];
-    const hoverBlock = this._getBlockElementFromViewStore(
-      this._hoveredBlockPath
-    );
-    if (!hoverBlock) return [];
+    if (!this._isHoverDragHandleVisible || !this._anchorBlockPath) return [];
+
+    const hoverBlock = this.anchorBlockElement;
+    assertExists(hoverBlock);
+
     const selections = this.selectedBlocks;
     let blockElements: BlockElement[] = [];
+
     // When current selection is TextSelection, should cover all the blocks in native range
     if (selections.length > 0 && includeTextSelection(selections)) {
       const range = getCurrentNativeRange();
@@ -554,17 +663,16 @@ export class AffineDragHandleWidget extends WidgetElement<
     if (
       containBlock(
         blockElements.map(block => PathFinder.id(block.path)),
-        PathFinder.id(this._hoveredBlockPath)
+        PathFinder.id(this._anchorBlockPath)
       )
     ) {
       return blockElements;
     }
+
     return [hoverBlock];
   }
 
-  private _getDraggingAreaRect(blockElement: BlockElement) {
-    if (!this._hoveredBlockPath) return;
-
+  private _getDraggingAreaRect(blockElement: BlockElement): Rect {
     // When hover block is in selected blocks, should show hover rect on the selected blocks
     // Top: the top of the first selected block
     // Left: the left of the first selected block
@@ -584,7 +692,7 @@ export class AffineDragHandleWidget extends WidgetElement<
     const offsetLeft = getDragHandleLeftPadding(blockElements);
 
     // Add padding to hover rect
-    left -= (DRAG_HANDLE_WIDTH + offsetLeft) * this.scale;
+    left -= (DRAG_HANDLE_CONTAINER_WIDTH + offsetLeft) * this.scale;
     top -= DRAG_HOVER_RECT_PADDING * this.scale;
     right += DRAG_HOVER_RECT_PADDING * this.scale;
     bottom += DRAG_HOVER_RECT_PADDING * this.scale;
@@ -597,6 +705,46 @@ export class AffineDragHandleWidget extends WidgetElement<
     return new Rect(left, top, right, bottom);
   }
 
+  private _getHoverAreaRectTopLevelBlock(
+    edgelessElement: TopLevelBlockModel
+  ): Rect | null {
+    if (isPageMode(this.page)) return null;
+    const edgelessPage = this.pageBlockElement as EdgelessPageBlockComponent;
+
+    const rect = getSelectedRect([edgelessElement]);
+    let [left, top] = edgelessPage.surface.toViewCoord(rect.left, rect.top);
+    const width = rect.width * this.scale;
+    const height = rect.height * this.scale;
+
+    let [right, bottom] = [left + width, top + height];
+
+    const offsetLeft = DRAG_HANDLE_CONTAINER_OFFSET_LEFT_TOP_LEVEL * this.scale;
+    const padding = HOVER_AREA_RECT_PADDING_TOP_LEVEL * this.scale;
+
+    left -= DRAG_HANDLE_CONTAINER_WIDTH_TOP_LEVEL * this.scale + offsetLeft;
+    top -= padding;
+    right += padding;
+    bottom += padding;
+
+    left += this._viewportOffset.left;
+    top += this._viewportOffset.top;
+    right += this._viewportOffset.left;
+    bottom += this._viewportOffset.top;
+
+    return new Rect(left, top, right, bottom);
+  }
+
+  private _updateDragHoverRectTopLevelBlock() {
+    if (!this._dragHoverRect) return;
+
+    const edgelessElement = this.anchorEdgelessElement;
+
+    if (edgelessElement) {
+      this._dragHoverRect =
+        this._getHoverAreaRectTopLevelBlock(edgelessElement);
+    }
+  }
+
   private _setSelectedBlocks(blockElements: BlockElement[], noteId?: string) {
     const { selection } = this.host;
     const selections = blockElements.map(blockElement =>
@@ -607,7 +755,7 @@ export class AffineDragHandleWidget extends WidgetElement<
 
     // When current page is edgeless page
     // We need to remain surface selection and set editing as true
-    if (isEdgelessPage(this.pageBlockElement)) {
+    if (!isPageMode(this.page)) {
       const surfaceElementId = noteId ? noteId : getNoteId(blockElements[0]);
       const surfaceSelection = selection.getInstance(
         'surface',
@@ -626,16 +774,12 @@ export class AffineDragHandleWidget extends WidgetElement<
     return this.host.rangeManager;
   }
 
-  private _removeHoverRect() {
-    this._dragHoverRect = null;
-    this._dragHandlePointerDown = false;
-  }
-
   private _canEditing = (noteBlock: BlockElement) => {
     if (noteBlock.page.id !== this.page.id) return false;
 
     if (isPageMode(this.page)) return true;
     const edgelessPage = this.pageBlockElement as EdgelessPageBlockComponent;
+
     const noteBlockId = noteBlock.path[noteBlock.path.length - 1];
     return (
       edgelessPage.selectionManager.editing &&
@@ -643,26 +787,56 @@ export class AffineDragHandleWidget extends WidgetElement<
     );
   };
 
-  private _scrollToUpdateIndicator = () => {
-    if (
-      !this.dragging ||
-      this.draggingElements.length === 0 ||
-      !this.lastDragPointerState
-    )
+  private _checkTopLevelBlockSelection = () => {
+    if (this.page.readonly || isPageMode(this.page)) {
+      this._hide();
       return;
+    }
 
-    const state = this.lastDragPointerState;
-    this.rafID = requestAnimationFrame(() =>
-      this.updateIndicator(state, false)
-    );
+    const edgelessPage = this.pageBlockElement as EdgelessPageBlockComponent;
+    const selection = edgelessPage.selectionManager;
+    const selectedElements = selection.elements;
+    if (selection.editing || selectedElements.length !== 1) {
+      this._hide();
+      return;
+    }
+
+    const selectedElement = selectedElements[0];
+    if (!isTopLevelBlock(selectedElement)) {
+      this._hide();
+      return;
+    }
+
+    const flavour = selectedElement.flavour;
+    const dragHandleOptions = this.optionRunner.getOption(flavour);
+    if (!dragHandleOptions || !dragHandleOptions.edgeless) {
+      this._hide();
+      return;
+    }
+
+    // FIXME: this is a workaround for the bug that the path of selected element is not correct
+    // ref: Github issues #5623, #5624
+    const blockElement = this.pageBlockElement.querySelector(
+      `[${BLOCK_ID_ATTR}="${selectedElement.id}"]`
+    ) as BlockElement | null;
+    if (!blockElement) {
+      this._hide();
+      return;
+    }
+
+    this._anchorBlockId = selectedElement.id;
+    this._anchorBlockPath = blockElement.path;
+
+    this._showDragHandleOnTopLevelBlocks();
   };
 
   /**
    * When pointer move on block, should show drag handle
    * And update hover block id and path
    */
-  private _pointerMoveOnBlock = (ctx: UIEventStateContext) => {
-    const state = ctx.get('pointerState');
+  private _pointerMoveOnBlock = (state: PointerEventState) => {
+    if (this._isTopLevelDragHandleVisible) return;
+
     const point = getContainerOffsetPoint(state);
     const closestBlockElement = getClosestBlockByPoint(
       this.page,
@@ -670,55 +844,49 @@ export class AffineDragHandleWidget extends WidgetElement<
       point
     );
     if (!closestBlockElement) {
-      this._hoveredBlockId = '';
-      this._hoveredBlockPath = null;
+      this._anchorBlockId = '';
+      this._anchorBlockPath = null;
       return;
     }
 
     const blockId = closestBlockElement.getAttribute(this.host.blockIdAttr);
-    const blockPath = closestBlockElement.path;
     assertExists(blockId);
-    assertExists(blockPath);
 
-    this._hoveredBlockId = blockId;
-    this._hoveredBlockPath = blockPath;
+    this._anchorBlockId = blockId;
+    this._anchorBlockPath = closestBlockElement.path;
 
     if (insideDatabaseTable(closestBlockElement) || this.page.readonly) {
-      this.hide();
+      this._hide();
       return;
     }
 
     // If current block is not the last hovered block, show drag handle beside the hovered block
     if (
       (!this._lastHoveredBlockPath ||
-        this._hoveredBlockPath.join('|') !==
-          this._lastHoveredBlockPath?.join('|') ||
-        this._dragHandleContainer.style.display === 'none') &&
-      !this._hoverDragHandle
+        !isBlockPathEqual(this._anchorBlockPath, this._lastHoveredBlockPath) ||
+        !this._isHoverDragHandleVisible) &&
+      !this._isDragHandleHovered
     ) {
-      this._show(closestBlockElement);
-      this._lastHoveredBlockPath = this._hoveredBlockPath;
+      this._showDragHandleOnHoverBlock(this._anchorBlockPath);
+      this._lastHoveredBlockPath = this._anchorBlockPath;
     }
   };
 
   private _pointerMoveHandler: UIEventHandler = ctx => {
-    if (this.page.readonly) {
-      this.hide();
+    if (this.page.readonly || this.dragging) {
+      this._hide();
       return;
     }
-    const state = ctx.get('pointerState');
+    if (this._isTopLevelDragHandleVisible) return;
 
+    const state = ctx.get('pointerState');
     const { target } = state.raw;
     const element = captureEventTarget(target);
-    // WHen pointer not on block or on dragging, should do nothing
-    if (!element || this.dragging) {
-      return;
-    }
+    // When pointer not on block or on dragging, should do nothing
+    if (!element) return;
 
     // When pointer on drag handle, should do nothing
-    if (element.closest('.affine-drag-handle-container')) {
-      return;
-    }
+    if (element.closest('.affine-drag-handle-container')) return;
 
     // TODO: need to optimize
     // When pointer out of note block hover area or inside database, should hide drag handle
@@ -727,18 +895,18 @@ export class AffineDragHandleWidget extends WidgetElement<
       this.page,
       this.pageBlockElement,
       point
-    );
+    ) as BlockElement | null;
     if (
-      !closestNoteBlock ||
-      !this._canEditing(closestNoteBlock as BlockElement) ||
-      this.outOfNoteBlock(closestNoteBlock, point)
+      closestNoteBlock &&
+      this._canEditing(closestNoteBlock) &&
+      !isOutOfNoteBlock(this.page, closestNoteBlock, point, this.scale)
     ) {
-      this.hide();
-      return;
+      this._pointerMoveOnBlock(state);
+      return true;
     }
 
-    this._pointerMoveOnBlock(ctx);
-    return true;
+    this._hide();
+    return false;
   };
 
   /**
@@ -747,17 +915,15 @@ export class AffineDragHandleWidget extends WidgetElement<
    * Should clear selection if current block is the first selected block
    */
   private _clickHandler: UIEventHandler = ctx => {
+    if (!this._isHoverDragHandleVisible) return;
+
     const state = ctx.get('pointerState');
     const { target } = state.raw;
     const element = captureEventTarget(target);
-    if (
-      !element ||
-      !element.closest('affine-drag-handle-widget') ||
-      !this._hoveredBlockId ||
-      !this._hoveredBlockPath
-    ) {
-      return;
-    }
+    const insideDragHandle = !!element?.closest('affine-drag-handle-widget');
+    if (!insideDragHandle) return;
+
+    if (!this._anchorBlockId || !this._anchorBlockPath) return;
 
     const { selection } = this.host;
     const selectedBlocks = this.selectedBlocks;
@@ -766,21 +932,22 @@ export class AffineDragHandleWidget extends WidgetElement<
     if (
       selectedBlocks.length > 0 &&
       !includeTextSelection(selectedBlocks) &&
-      selectedBlocks[0].blockId === this._hoveredBlockId
+      selectedBlocks[0].blockId === this._anchorBlockId
     ) {
       selection.clear(['block']);
       this._dragHoverRect = null;
-      this._showDragHandleOnHoverBlock(this._hoveredBlockPath);
+      this._showDragHandleOnHoverBlock(this._anchorBlockPath);
       return;
     }
 
     // Should select the block if current block is not selected
-    const blockElement = this._getBlockElementFromViewStore(
-      this._hoveredBlockPath
-    );
-
+    const blockElement = this.anchorBlockElement;
     assertExists(blockElement);
-    if (selectedBlocks.length > 1) this._show(blockElement);
+
+    if (selectedBlocks.length > 1) {
+      this._showDragHandleOnHoverBlock(this._anchorBlockPath);
+    }
+
     this._setSelectedBlocks([blockElement]);
 
     return true;
@@ -790,20 +957,20 @@ export class AffineDragHandleWidget extends WidgetElement<
     const event = state.raw;
     const { target } = event;
     const element = captureEventTarget(target);
-    const inside = !!element?.closest('affine-drag-handle-widget');
+    const insideDragHandle = !!element?.closest('affine-drag-handle-widget');
     // Should only start dragging when pointer down on drag handle
     // And current mouse button is left button
-    if (!inside || !this._hoveredBlockId || !this._hoveredBlockPath) {
+    if (!insideDragHandle) {
+      this._hide();
       return false;
     }
 
+    if (!this._isHoverDragHandleVisible) return;
     // Get current hover block element by path
-    const hoverBlockElement = this._getBlockElementFromViewStore(
-      this._hoveredBlockPath
-    );
-    if (!hoverBlockElement) {
-      return false;
-    }
+    assertExists(this._anchorBlockId);
+    assertExists(this._anchorBlockPath);
+    const hoverBlockElement = this.anchorBlockElement;
+    if (!hoverBlockElement) return false;
 
     let selections = this.selectedBlocks;
 
@@ -830,14 +997,11 @@ export class AffineDragHandleWidget extends WidgetElement<
       selections.length === 0 ||
       !containBlock(
         selections.map(selection => selection.blockId),
-        this._hoveredBlockId
+        this._anchorBlockId
       )
     ) {
-      const blockElement = this._getBlockElementFromViewStore(
-        this._hoveredBlockPath
-      );
+      const blockElement = this.anchorBlockElement;
       assertExists(blockElement);
-
       this._setSelectedBlocks([blockElement]);
     }
 
@@ -857,25 +1021,57 @@ export class AffineDragHandleWidget extends WidgetElement<
 
     this.startDragging(blockElementsExcludingChildren, state);
 
+    this._hide();
     return true;
   };
 
-  private _onDragMove = (ctx: UIEventStateContext) => {
+  private _onDragMove = (state: PointerEventState) => {
     this.clearRaf();
-
-    const state = ctx.get('pointerState');
-    this.rafID = requestAnimationFrame(() => this.updateIndicator(state, true));
-
+    this.rafID = requestAnimationFrame(() =>
+      this.updateDropIndicator(state, true)
+    );
     return true;
   };
 
-  private _onDragEnd = () => {
+  private _onDragEnd = (state: PointerEventState) => {
     const targetBlockId = this.dropBlockId;
     const dropType = this.dropType;
     const draggingElements = this.draggingElements;
+    this._hide(true);
 
-    this.hide(true);
-    if (!targetBlockId) return false;
+    // handle drop of blocks from note onto edgeless container
+    if (!targetBlockId) {
+      const target = captureEventTarget(state.raw.target);
+
+      const isTargetEdgelessContainer =
+        target?.classList.contains('edgeless') &&
+        target?.classList.contains('affine-block-children-container');
+      if (!isTargetEdgelessContainer) return false;
+
+      const selectedBlocks = getBlockElementsExcludeSubtrees(draggingElements)
+        .map(element => getModelByBlockComponent(element))
+        .filter((x): x is BaseBlockModel => !!x);
+      if (selectedBlocks.length === 0) return false;
+
+      const isSurfaceComponent = selectedBlocks.some(block => {
+        const parent = this.page.getParent(block.id);
+        return matchFlavours(parent, ['affine:surface']);
+      });
+      if (isSurfaceComponent) return true;
+
+      const edgelessPage = this.pageBlockElement;
+      assertInstanceOf(edgelessPage, EdgelessPageBlockComponent);
+
+      const newNoteId = edgelessPage.addNoteWithPoint(
+        new Point(state.x, state.y)
+      );
+      const newNoteBlock = this.page.getBlockById(newNoteId);
+      assertExists(newNoteBlock);
+
+      this.page.moveBlocks(selectedBlocks, newNoteBlock);
+
+      return true;
+    }
 
     // Should make sure drop block id is not in selected blocks
     if (
@@ -883,31 +1079,33 @@ export class AffineDragHandleWidget extends WidgetElement<
         this.selectedBlocks.map(selection => selection.blockId),
         targetBlockId
       )
-    ) {
+    )
       return false;
-    }
 
     const selectedBlocks = getBlockElementsExcludeSubtrees(draggingElements)
       .map(element => getModelByBlockComponent(element))
       .filter((x): x is BaseBlockModel => !!x);
+    if (!selectedBlocks.length) return false;
+
     const targetBlock = this.page.getBlockById(targetBlockId);
+    assertExists(targetBlock);
 
     const shouldInsertIn = dropType === 'in';
+
     const parent = shouldInsertIn
       ? targetBlock
       : this.page.getParent(targetBlockId);
+    assertExists(parent);
 
-    if (targetBlock && parent && selectedBlocks.length > 0) {
-      if (shouldInsertIn) {
-        this.page.moveBlocks(selectedBlocks, targetBlock);
-      } else {
-        this.page.moveBlocks(
-          selectedBlocks,
-          parent,
-          targetBlock,
-          dropType === 'before'
-        );
-      }
+    if (shouldInsertIn) {
+      this.page.moveBlocks(selectedBlocks, targetBlock);
+    } else {
+      this.page.moveBlocks(
+        selectedBlocks,
+        parent,
+        targetBlock,
+        dropType === 'before'
+      );
     }
 
     // TODO: need a better way to update selection
@@ -945,7 +1143,14 @@ export class AffineDragHandleWidget extends WidgetElement<
 
     // call default drag start handler if no option return true
     for (const option of this.optionRunner.options) {
-      if (option.onDragStart?.(state, this.startDragging)) {
+      if (
+        option.onDragStart?.({
+          state,
+          startDragging: this.startDragging,
+          anchorBlockId: this._anchorBlockId,
+          anchorBlockPath: this._anchorBlockPath,
+        })
+      ) {
         return true;
       }
     }
@@ -960,6 +1165,10 @@ export class AffineDragHandleWidget extends WidgetElement<
    * Update drop block id
    */
   private _dragMoveHandler: UIEventHandler = ctx => {
+    if (this._isHoverDragHandleVisible || this._isTopLevelDragHandleVisible) {
+      this._hide();
+    }
+
     if (!this.dragging || this.draggingElements.length === 0) {
       return false;
     }
@@ -967,7 +1176,7 @@ export class AffineDragHandleWidget extends WidgetElement<
     ctx.get('defaultState').event.preventDefault();
 
     const state = ctx.get('pointerState');
-    this.updateDragPreviewPosition(this.dragPreview, state);
+    this.updateDragPreviewPosition(state);
 
     for (const option of this.optionRunner.options) {
       if (option.onDragMove?.(state, this.draggingElements)) {
@@ -976,7 +1185,7 @@ export class AffineDragHandleWidget extends WidgetElement<
     }
 
     // call default drag move handler if no option return true
-    return this._onDragMove(ctx);
+    return this._onDragMove(state);
   };
 
   /**
@@ -987,23 +1196,35 @@ export class AffineDragHandleWidget extends WidgetElement<
     this.clearRaf();
     if (
       !this.dragging ||
+      !this.dragPreview ||
       this.draggingElements.length === 0 ||
       this.page.readonly
     ) {
-      this.hide(true);
+      this._hide(true);
       return false;
     }
+
     const state = ctx.get('pointerState');
 
     for (const option of this.optionRunner.options) {
-      if (option.onDragEnd?.(state, this.draggingElements)) {
-        this.hide(true);
+      if (
+        option.onDragEnd?.({
+          state,
+          draggingElements: this.draggingElements,
+          dropBlockId: this.dropBlockId,
+          dropType: this.dropType,
+          dragPreview: this.dragPreview,
+        })
+      ) {
+        this._hide(true);
         return true;
       }
     }
 
-    //call default drag end handler if no option return true
-    return this._onDragEnd();
+    // call default drag end handler if no option return true
+    this._onDragEnd(state);
+    if (!isPageMode(this.page)) this._checkTopLevelBlockSelection();
+    return true;
   };
 
   private _pointerOutHandler: UIEventHandler = ctx => {
@@ -1023,79 +1244,99 @@ export class AffineDragHandleWidget extends WidgetElement<
     const inPage = !!relatedElement?.closest('.affine-doc-viewport');
 
     const inDragHandle = !!relatedElement?.closest('affine-drag-handle-widget');
-    if (outOfPageViewPort && !inDragHandle && !inPage) {
-      this.hide();
-    }
+    if (outOfPageViewPort && !inDragHandle && !inPage) this._hide();
   };
 
-  private _onDragHandleHover = () => {
-    if (!this._hoveredBlockPath || !this._dragHandleGrabber) return;
+  private _onDragHandlePointerEnter = () => {
+    const container = this._dragHandleContainer;
+    const grabber = this._dragHandleGrabber;
+    if (!container || !grabber) return;
 
-    const blockElement = this._getBlockElementFromViewStore(
-      this._hoveredBlockPath
-    );
-    if (!blockElement) return;
+    if (this._isHoverDragHandleVisible) {
+      assertExists(this._anchorBlockPath);
+      const blockElement = this.anchorBlockElement;
+      if (!blockElement) return;
+
+      const padding = DRAG_HANDLE_CONTAINER_PADDING * this.scale;
+      container.style.paddingTop = `${padding}px`;
+      container.style.paddingBottom = `${padding}px`;
+      container.style.transition = `padding 0.25s ease`;
+
+      grabber.style.width = `${
+        DRAG_HANDLE_GRABBER_WIDTH_HOVERED * this.scale
+      }px`;
+      grabber.style.borderRadius = `${
+        DRAG_HANDLE_GRABBER_BORDER_RADIUS * this.scale
+      }px`;
+
+      this._isDragHandleHovered = true;
+    } else if (this._isTopLevelDragHandleVisible) {
+      const edgelessElement = this.anchorEdgelessElement;
+      if (!edgelessElement) return;
+
+      this._dragHoverRect =
+        this._getHoverAreaRectTopLevelBlock(edgelessElement);
+      this._isDragHandleHovered = true;
+    }
+  };
 
-    const draggingAreaRect = this._getDraggingAreaRect(blockElement);
-    if (!draggingAreaRect) return;
+  private _onDragHandlePointerDown = () => {
+    if (!this._isHoverDragHandleVisible || !this._anchorBlockPath) return;
 
-    const padding = 8 * this.scale;
-    this._dragHandleContainer.style.paddingTop = `${padding}px`;
-    this._dragHandleContainer.style.paddingBottom = `${padding}px`;
-    this._dragHandleContainer.style.transition = `padding 0.25s ease`;
+    const blockElement = this.anchorBlockElement;
+    if (!blockElement) return;
 
-    this._dragHandleGrabber.style.width = `${
-      HOVER_DRAG_HANDLE_GRABBER_WIDTH * this.scale
-    }px`;
-    this._dragHandleGrabber.style.borderRadius = `${
-      DRAG_HANDLE_GRABBER_BORDER_RADIUS * this.scale
-    }px`;
+    this._dragHoverRect = this._getDraggingAreaRect(blockElement) ?? null;
+  };
 
-    this._hoverDragHandle = true;
+  private _onDragHandlePointerUp = () => {
+    if (!this._isHoverDragHandleVisible) return;
+    this._dragHoverRect = null;
   };
 
-  private _onDragHandlePointerDown = () => {
-    if (!this._hoveredBlockPath || !this._dragHandleGrabber) return;
+  private _onDragHandlePointerLeave = () => {
+    this._isDragHandleHovered = false;
+    this._dragHoverRect = null;
 
-    const blockElement = this._getBlockElementFromViewStore(
-      this._hoveredBlockPath
-    );
-    if (!blockElement) return;
-    this._dragHandlePointerDown = true;
+    if (this._isTopLevelDragHandleVisible) return;
 
-    // Show drag hover rect only when pointer down on drag handle for a while
-    // Do not show when just click on drag handle
-    setTimeout(() => {
-      if (this._dragHandlePointerDown) {
-        this._dragHoverRect = this._getDraggingAreaRect(blockElement) ?? null;
-      }
-    }, 100);
+    if (this.dragging) return;
+
+    if (!this._anchorBlockPath) return;
+    this._showDragHandleOnHoverBlock(this._anchorBlockPath);
   };
 
-  private _onDragHandlePointerLeave = () => {
-    if (this._dragHandlePointerDown) this._removeHoverRect();
+  private _handleEdgelessToolUpdated = (newTool: EdgelessTool) => {
+    if (newTool.type === 'default') {
+      this._checkTopLevelBlockSelection();
+    } else {
+      this._hide();
+    }
+  };
 
-    if (!this._hoveredBlockPath) return;
+  private _handleEdgelessViewPortUpdated = (zoom: number) => {
+    this.scale = zoom;
 
-    const blockElement = this._getBlockElementFromViewStore(
-      this._hoveredBlockPath
-    );
-    if (!blockElement) return;
+    this._updateDragPreviewOnZoom();
+    this._updateDropIndicatorOnScroll();
 
-    if (this.dragging) return;
-    this._show(blockElement);
-    this._hoverDragHandle = false;
+    if (this._isTopLevelDragHandleVisible) {
+      this._showDragHandleOnTopLevelBlocks();
+      this._updateDragHoverRectTopLevelBlock();
+    } else {
+      this._hide();
+    }
   };
 
   override firstUpdated() {
-    this.hide(true);
+    this._hide(true);
 
     // When pointer enter drag handle grabber
     // Extend drag handle grabber to the height of the hovered block
     this._disposables.addFromEvent(
       this._dragHandleContainer,
       'pointerenter',
-      this._onDragHandleHover
+      this._onDragHandlePointerEnter
     );
 
     this._disposables.addFromEvent(
@@ -1107,9 +1348,7 @@ export class AffineDragHandleWidget extends WidgetElement<
     this._disposables.addFromEvent(
       this._dragHandleContainer,
       'pointerup',
-      () => {
-        if (this._dragHandlePointerDown) this._removeHoverRect();
-      }
+      this._onDragHandlePointerUp
     );
 
     // When pointer leave drag handle grabber, should reset drag handle grabber style
@@ -1119,32 +1358,63 @@ export class AffineDragHandleWidget extends WidgetElement<
       this._onDragHandlePointerLeave
     );
 
-    if (isEdgelessPage(this.pageBlockElement)) {
-      const edgelessPage = this.pageBlockElement;
+    if (isPageMode(this.page)) {
+      const docPage = this.pageBlockElement as DocPageBlockComponent;
+
+      this._disposables.add(
+        docPage.slots.viewportUpdated.on(() => this._hide())
+      );
+
+      const viewportElement = docPage.viewportElement;
+      assertExists(viewportElement);
+
+      this._disposables.addFromEvent(viewportElement, 'scrollend', () => {
+        this._updateDropIndicatorOnScroll();
+      });
+    } else {
+      const edgelessPage = this.pageBlockElement as EdgelessPageBlockComponent;
+
       this._disposables.add(
-        edgelessPage.slots.edgelessToolUpdated.on(newTool => {
-          if (newTool.type !== 'default') this.hide();
+        edgelessPage.slots.edgelessToolUpdated.on(
+          this._handleEdgelessToolUpdated
+        )
+      );
+
+      this._disposables.add(
+        edgelessPage.slots.viewportUpdated.on(({ zoom }) => {
+          this._handleEdgelessViewPortUpdated(zoom);
         })
       );
+
       this._disposables.add(
-        edgelessPage.slots.viewportUpdated.on(() => {
-          this.hide();
-          this.scale = edgelessPage.surface.viewport.zoom;
+        edgelessPage.selectionManager.slots.updated.on(() => {
+          this._checkTopLevelBlockSelection();
+        })
+      );
 
-          this._scrollToUpdateIndicator();
+      this._disposables.add(
+        edgelessPage.slots.readonlyUpdated.on(() => {
+          this._checkTopLevelBlockSelection();
         })
       );
-    } else {
-      const docPage = this.pageBlockElement;
+
       this._disposables.add(
-        docPage.slots.viewportUpdated.on(() => this.hide())
+        edgelessPage.slots.draggingAreaUpdated.on(() => {
+          this._checkTopLevelBlockSelection();
+        })
       );
 
-      const viewportElement = docPage.viewportElement;
-      assertExists(viewportElement);
-      this._disposables.addFromEvent(viewportElement, 'scroll', () => {
-        this._scrollToUpdateIndicator();
-      });
+      this._disposables.add(
+        edgelessPage.slots.elementResizeStart.on(() => {
+          this._hide();
+        })
+      );
+
+      this._disposables.add(
+        edgelessPage.slots.elementResizeEnd.on(() => {
+          this._checkTopLevelBlockSelection();
+        })
+      );
     }
   }
 
@@ -1155,15 +1425,12 @@ export class AffineDragHandleWidget extends WidgetElement<
     this.handleEvent('dragStart', this._dragStartHandler);
     this.handleEvent('dragMove', this._dragMoveHandler);
     this.handleEvent('dragEnd', this._dragEndHandler);
-    this.handleEvent('wheel', () => this.hide());
     this.handleEvent('pointerOut', this._pointerOutHandler);
-    this.handleEvent('beforeInput', () => this.hide());
+    this.handleEvent('beforeInput', () => this._hide());
   }
 
   override disconnectedCallback() {
-    this.hide(true);
-    this.removeDragPreview();
-    this.removeDropIndicator();
+    this._hide(true);
     this._disposables.dispose();
     this._anchorModelDisposables?.dispose();
     super.disconnectedCallback();
diff --git a/packages/blocks/src/page-block/widgets/drag-handle/styles.ts b/packages/blocks/src/page-block/widgets/drag-handle/styles.ts
index cafbc2816b27..a1df7537f119 100644
--- a/packages/blocks/src/page-block/widgets/drag-handle/styles.ts
+++ b/packages/blocks/src/page-block/widgets/drag-handle/styles.ts
@@ -1,7 +1,6 @@
 import { css } from 'lit';
 
-export const DRAG_HANDLE_HEIGHT = 24; // px
-export const DRAG_HANDLE_WIDTH = 16; // px
+import { DRAG_HANDLE_CONTAINER_WIDTH } from './config.js';
 
 export const styles = css`
   .affine-drag-handle-widget {
@@ -18,7 +17,7 @@ export const styles = css`
     position: absolute;
     display: flex;
     justify-content: center;
-    width: ${DRAG_HANDLE_WIDTH}px;
+    width: ${DRAG_HANDLE_CONTAINER_WIDTH}px;
     min-height: 12px;
     pointer-events: auto;
     user-select: none;
diff --git a/packages/blocks/src/page-block/widgets/drag-handle/utils.ts b/packages/blocks/src/page-block/widgets/drag-handle/utils.ts
index 2017bb7b110a..574b032a760c 100644
--- a/packages/blocks/src/page-block/widgets/drag-handle/utils.ts
+++ b/packages/blocks/src/page-block/widgets/drag-handle/utils.ts
@@ -3,6 +3,7 @@ import {
   PathFinder,
   type PointerEventState,
 } from '@blocksuite/block-std';
+import { assertExists } from '@blocksuite/global/utils';
 import type { BlockElement } from '@blocksuite/lit';
 import type { BaseBlockModel, Page } from '@blocksuite/store';
 
@@ -20,13 +21,18 @@ import {
   Rect,
 } from '../../../_common/utils/index.js';
 import type { ParagraphBlockModel } from '../../../paragraph-block/index.js';
+import type { EdgelessBlockType } from '../../../surface-block/index.js';
+import { Bound } from '../../../surface-block/index.js';
+import type { EdgelessPageBlockComponent } from '../../edgeless/edgeless-page-block.js';
 import {
   BLOCK_CHILDREN_CONTAINER_PADDING_LEFT,
-  DEFAULT_DRAG_HANDLE_CONTAINER_HEIGHT,
-  DRAG_HANDLE_OFFSET_LEFT,
+  DRAG_HANDLE_CONTAINER_HEIGHT,
+  DRAG_HANDLE_CONTAINER_OFFSET_LEFT,
+  DRAG_HANDLE_CONTAINER_OFFSET_LEFT_LIST,
   type DropResult,
   type DropType,
-  LIST_DRAG_HANDLE_OFFSET_LEFT,
+  NOTE_CONTAINER_PADDING,
+  type OnDragEndProps,
 } from './config.js';
 
 const heightMap: { [key: string]: number } = {
@@ -52,18 +58,18 @@ export const getDragHandleContainerHeight = (model: BaseBlockModel) => {
     key = (model as ParagraphBlockModel).type;
   }
 
-  const height = heightMap[key] ?? DEFAULT_DRAG_HANDLE_CONTAINER_HEIGHT;
+  const height = heightMap[key] ?? DRAG_HANDLE_CONTAINER_HEIGHT;
 
   return height;
 };
 
 // To check if the block is a child block of the selected blocks
 export const containChildBlock = (
-  selections: BaseSelection[],
+  blockElements: BlockElement[],
   childPath: string[]
 ) => {
-  return selections.some(selection => {
-    const { path } = selection;
+  return blockElements.some(blockElement => {
+    const path = blockElement.path;
     return PathFinder.includes(childPath, path);
   });
 };
@@ -118,6 +124,27 @@ export const getContainerOffsetPoint = (state: PointerEventState) => {
   return new Point(x, y);
 };
 
+export const isOutOfNoteBlock = (
+  page: Page,
+  noteBlock: Element,
+  point: Point,
+  scale: number
+) => {
+  // TODO: need to find a better way to check if the point is out of note block
+  const rect = noteBlock.getBoundingClientRect();
+  const padding = NOTE_CONTAINER_PADDING * scale;
+  return rect
+    ? isPageMode(page)
+      ? point.y < rect.top ||
+        point.y > rect.bottom ||
+        point.x > rect.right + padding
+      : point.y < rect.top ||
+        point.y > rect.bottom ||
+        point.x < rect.left - padding ||
+        point.x > rect.right + padding
+    : true;
+};
+
 export const getClosestNoteBlock = (
   page: Page,
   pageBlock: BlockComponent,
@@ -305,8 +332,8 @@ export function getDragHandleLeftPadding(blockElements: BlockElement[]) {
       blockElement.model.children.length > 0
   );
   const offsetLeft = hasToggleList
-    ? LIST_DRAG_HANDLE_OFFSET_LEFT
-    : DRAG_HANDLE_OFFSET_LEFT;
+    ? DRAG_HANDLE_CONTAINER_OFFSET_LEFT_LIST
+    : DRAG_HANDLE_CONTAINER_OFFSET_LEFT;
   return offsetLeft;
 }
 
@@ -317,3 +344,85 @@ export function updateDragHandleClassName(blockElements: BlockElement[] = []) {
   previousEle = blockElements;
   blockElements.forEach(blockElement => blockElement.classList.add(className));
 }
+
+function getBlockProps(model: BaseBlockModel) {
+  const keys = model.keys as (keyof typeof model)[];
+  const values = keys.map(key => model[key]);
+  const blockProps = Object.fromEntries(keys.map((key, i) => [key, values[i]]));
+  return blockProps;
+}
+
+export function convertDragPreviewDocToEdgeless({
+  blockComponent,
+  dragPreview,
+  cssSelector,
+  width,
+  height,
+}: OnDragEndProps & {
+  blockComponent: BlockElement;
+  cssSelector: string;
+  width?: number;
+  height?: number;
+}): boolean {
+  const edgelessPage = blockComponent.closest(
+    'affine-edgeless-page'
+  ) as EdgelessPageBlockComponent;
+  if (!edgelessPage) return false;
+
+  const previewEl = dragPreview.querySelector(cssSelector);
+  assertExists(previewEl);
+  const rect = previewEl.getBoundingClientRect();
+  const point = edgelessPage.surface.toModelCoord(rect.x, rect.y);
+  const bound = new Bound(
+    point[0],
+    point[1],
+    width ?? previewEl.clientWidth,
+    height ?? previewEl.clientHeight
+  );
+
+  const blockModel = blockComponent.model;
+  const blockProps = getBlockProps(blockModel);
+
+  edgelessPage.surface.addElement(
+    blockComponent.flavour as EdgelessBlockType,
+    {
+      ...blockProps,
+      xywh: bound.serialize(),
+    },
+    edgelessPage.surface.model
+  );
+  blockComponent.page.deleteBlock(blockModel);
+  return true;
+}
+
+export function convertDragPreviewEdgelessToDoc({
+  blockComponent,
+  dropBlockId,
+  dropType,
+}: OnDragEndProps & {
+  blockComponent: BlockElement;
+}): boolean {
+  const page = blockComponent.page;
+  const targetBlock = page.getBlockById(dropBlockId);
+  if (!targetBlock) return false;
+
+  const shouldInsertIn = dropType === 'in';
+  const parentBlock = shouldInsertIn
+    ? targetBlock
+    : page.getParent(targetBlock);
+  assertExists(parentBlock);
+  const parentIndex = shouldInsertIn
+    ? 0
+    : parentBlock.children.indexOf(targetBlock);
+
+  const blockModel = blockComponent.model;
+  const blockProps = getBlockProps(blockModel);
+  delete blockProps.width;
+  delete blockProps.height;
+  delete blockProps.xywh;
+  delete blockProps.zIndex;
+
+  page.addBlock(blockModel.flavour, blockProps, parentBlock, parentIndex);
+  page.deleteBlock(blockModel);
+  return true;
+}
diff --git a/packages/blocks/src/page-block/widgets/image-toolbar/image-options.ts b/packages/blocks/src/page-block/widgets/image-toolbar/image-options.ts
index 52d08d6b0ec8..3868d70fac14 100644
--- a/packages/blocks/src/page-block/widgets/image-toolbar/image-options.ts
+++ b/packages/blocks/src/page-block/widgets/image-toolbar/image-options.ts
@@ -12,13 +12,13 @@ import {
 } from '../../../_common/icons/index.js';
 import { stopPropagation } from '../../../_common/utils/event.js';
 import { turnImageIntoCardView } from '../../../attachment-block/utils.js';
+import type { ImageBlockModel } from '../../../image-block/index.js';
+import { openLeditsEditor } from '../../../image-block/ledits/main.js';
 import {
   copyImage,
   downloadImage,
   focusCaption,
-} from '../../../image-block/image/utils.js';
-import { type ImageBlockModel } from '../../../image-block/index.js';
-import { openLeditsEditor } from '../../../image-block/ledits/main.js';
+} from '../../../image-block/utils.js';
 
 export function ImageOptionsTemplate({
   ref: containerRef,
diff --git a/packages/blocks/src/page-block/widgets/slash-menu/config.ts b/packages/blocks/src/page-block/widgets/slash-menu/config.ts
index 2ed6183285ef..9e2b998b29b5 100644
--- a/packages/blocks/src/page-block/widgets/slash-menu/config.ts
+++ b/packages/blocks/src/page-block/widgets/slash-menu/config.ts
@@ -36,14 +36,13 @@ import {
   resetNativeSelection,
 } from '../../../_common/utils/index.js';
 import { clearMarksOnDiscontinuousInput } from '../../../_common/utils/inline-editor.js';
-import { humanFileSize } from '../../../_common/utils/math.js';
 import { getServiceOrRegister } from '../../../_legacy/service/index.js';
 import { AttachmentService } from '../../../attachment-block/attachment-service.js';
 import { addSiblingAttachmentBlock } from '../../../attachment-block/utils.js';
 import { toggleBookmarkCreateModal } from '../../../bookmark-block/components/modal/bookmark-create-modal.js';
 import type { FrameBlockModel } from '../../../frame-block/index.js';
-import { addSiblingImageBlock } from '../../../image-block/image/utils.js';
 import { ImageService } from '../../../image-block/image-service.js';
+import { addSiblingImageBlock } from '../../../image-block/utils.js';
 import type { SurfaceBlockModel } from '../../../models.js';
 import type { NoteBlockModel } from '../../../note-block/index.js';
 import { copyBlock } from '../../../page-block/doc/utils.js';
@@ -261,26 +260,13 @@ export const menuGroups: SlashMenuOptions['menus'] = [
           }
 
           const imageFiles = await getImageFilesFromLocal();
+
           const imageService = pageElement.host.spec.getService('affine:image');
           assertExists(imageService);
           assertInstanceOf(imageService, ImageService);
           const maxFileSize = imageService.maxFileSize;
-          const isSizeExceeded = imageFiles.some(
-            file => file.size > maxFileSize
-          );
-          if (isSizeExceeded) {
-            toast(
-              `You can only upload files less than ${humanFileSize(
-                maxFileSize,
-                true,
-                0
-              )}`
-            );
-          } else {
-            imageFiles.forEach(file => {
-              addSiblingImageBlock(pageElement.page, file, model);
-            });
-          }
+
+          addSiblingImageBlock(imageFiles, maxFileSize, model);
         }),
       },
       {
@@ -319,13 +305,17 @@ export const menuGroups: SlashMenuOptions['menus'] = [
           const page = pageElement.page;
           const parent = page.getParent(model);
           if (!parent) return;
+
           const file = await openFileOrFiles();
           if (!file) return;
-          const service = pageElement.host.spec.getService('affine:attachment');
-          assertExists(service);
-          assertInstanceOf(service, AttachmentService);
-          const maxFileSize = service.maxFileSize;
-          addSiblingAttachmentBlock(file, model, maxFileSize);
+
+          const attachmentService =
+            pageElement.host.spec.getService('affine:attachment');
+          assertExists(attachmentService);
+          assertInstanceOf(attachmentService, AttachmentService);
+          const maxFileSize = attachmentService.maxFileSize;
+
+          addSiblingAttachmentBlock(file, maxFileSize, model);
         }),
       },
     ],
diff --git a/packages/store/src/workspace/page.ts b/packages/store/src/workspace/page.ts
index 4bf8a55a2ba2..238a296c5a82 100644
--- a/packages/store/src/workspace/page.ts
+++ b/packages/store/src/workspace/page.ts
@@ -394,7 +394,6 @@ export class Page extends Space<FlatBlockMap> {
     const childBlocksPerParent = new Map<BaseBlockModel, BaseBlockModel[]>();
     blocksToMove.forEach(block => {
       const parentBlock = this.getParent(block);
-
       if (!parentBlock) {
         throw new Error("Can't find parent block for the current block");
       }
diff --git a/tests/bookmark.spec.ts b/tests/bookmark.spec.ts
index 7b4b54d49923..cd9090ace267 100644
--- a/tests/bookmark.spec.ts
+++ b/tests/bookmark.spec.ts
@@ -383,7 +383,9 @@ test(scoped`support dragging bookmark block directly`, async ({ page }) => {
   await page.mouse.down();
   await page.waitForTimeout(200);
 
-  await page.mouse.move(rect.x + 40, rect.y + rect.height + 80);
+  await page.mouse.move(rect.x + 40, rect.y + rect.height + 80, {
+    steps: 5,
+  });
   await page.waitForTimeout(200);
 
   await page.mouse.up();
diff --git a/tests/edgeless/note.spec.ts b/tests/edgeless/note.spec.ts
index 2de66dd16301..c12dbd395042 100644
--- a/tests/edgeless/note.spec.ts
+++ b/tests/edgeless/note.spec.ts
@@ -302,7 +302,7 @@ test('dragging un-selected note', async ({ page }) => {
   ]);
 });
 
-test('drag handle should be shown when a note is actived in default mode or hidden in other modes', async ({
+test('drag handle should be shown when a note is activated in default mode or hidden in other modes', async ({
   page,
 }) => {
   await enterPlaygroundRoom(page);
@@ -405,8 +405,10 @@ test.describe('note slicer', () => {
 
     assertRectExist(buttonRect);
 
+    // FIXME: note-slicer-button is partly covered by drag handle
+    // increased mouse move x to 5 to avoid this
     await page.mouse.move(
-      buttonRect.x + 1,
+      buttonRect.x + 5,
       buttonRect.y + buttonRect.height / 2
     );
 
@@ -478,8 +480,10 @@ test.describe('note slicer', () => {
 
     assertRectExist(buttonRect);
 
+    // FIXME: note-slicer-button is partly covered by drag handle
+    // increased mouse move x to 5 to avoid this
     await page.mouse.move(
-      buttonRect.x + 1,
+      buttonRect.x + 5,
       buttonRect.y + buttonRect.height / 2
     );
 
@@ -612,7 +616,9 @@ test('undo/redo should work correctly after clipping', async ({ page }) => {
 
   assertRectExist(buttonRect);
 
-  await page.mouse.move(buttonRect.x + 1, buttonRect.y + buttonRect.height / 2);
+  // FIXME: note-slicer-button is partly covered by drag handle
+  // increased mouse move x to 5 to avoid this
+  await page.mouse.move(buttonRect.x + 5, buttonRect.y + buttonRect.height / 2);
 
   await waitNextFrame(page, 2000);
   await page.locator('affine-note-slicer-popupbutton').click();