From 26285f7dcbada2e57211b48e5702edc6100683c7 Mon Sep 17 00:00:00 2001
From: Saul-Mirone <Saul-Mirone@outlook.com>
Date: Sun, 16 Mar 2025 05:48:34 +0000
Subject: [PATCH] feat(editor): unify block props api (#10888)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes: [BS-2707](https://linear.app/affine-design/issue/BS-2707/统一使用props获取和更新block-prop)
---
 .../block-attachment/src/attachment-block.ts  |   6 +-
 .../src/attachment-edgeless-block.ts          |   2 +-
 .../src/components/rename-model.ts            |   2 +-
 .../block-attachment/src/configs/toolbar.ts   |   2 +-
 .../blocks/block-attachment/src/embed.ts      |  24 ++--
 .../blocks/block-attachment/src/utils.ts      |   9 +-
 .../block-bookmark/src/bookmark-block.ts      |   4 +-
 .../src/bookmark-edgeless-block.ts            |   4 +-
 .../src/components/bookmark-card.ts           |   3 +-
 .../block-bookmark/src/configs/toolbar.ts     |  12 +-
 .../affine/blocks/block-bookmark/src/utils.ts |   2 +-
 .../blocks/block-callout/src/callout-block.ts |   4 +-
 .../blocks/block-code/src/code-block.ts       |  20 ++--
 .../code-toolbar/components/lang-button.ts    |   4 +-
 .../block-code/src/code-toolbar/config.ts     |   2 +-
 .../block-code/src/code-toolbar/utils.ts      |   6 +-
 .../block-data-view/src/block-meta/todo.ts    |   2 +-
 .../blocks/block-data-view/src/data-source.ts |  28 ++---
 .../block-data-view/src/data-view-block.ts    |   6 +-
 .../block-data-view/src/data-view-model.ts    |  16 +--
 .../blocks/block-database/src/data-source.ts  |  30 ++---
 .../block-database/src/database-block.ts      |  10 +-
 .../src/detail-panel/note-renderer.ts         |   2 +-
 .../block-database/src/utils/block-utils.ts   |  60 +++++-----
 .../src/commands/insert-edgeless-text.ts      |   2 +-
 .../src/edgeless-text-block.ts                |  16 +--
 .../src/common/render-linked-doc.ts           |  16 +--
 .../blocks/block-embed/src/configs/toolbar.ts |  25 +++--
 .../embed-figma-block/embed-figma-block.ts    |   8 +-
 .../embed-github-block/embed-github-block.ts  |  16 ++-
 .../src/embed-github-block/utils.ts           |   4 +-
 .../components/fullscreen-toolbar.ts          |   2 +-
 .../src/embed-html-block/configs/toolbar.ts   |   2 +-
 .../src/embed-html-block/embed-html-block.ts  |   6 +-
 .../embed-iframe-link-edit-popup.ts           |   2 +-
 .../src/embed-iframe-block/configs/toolbar.ts |   6 +-
 .../embed-edgeless-iframe-block.ts            |   4 +-
 .../embed-iframe-block/embed-iframe-block.ts  |  12 +-
 .../embed-linked-doc-block/configs/toolbar.ts |  10 +-
 .../embed-edgeless-linked-doc-block.ts        |   3 +-
 .../embed-linked-doc-block.ts                 |  31 +++---
 .../src/embed-loom-block/embed-loom-block.ts  |  12 +-
 .../block-embed/src/embed-loom-block/utils.ts |   2 +-
 .../embed-synced-doc-block/configs/toolbar.ts |   2 +-
 .../embed-edgeless-synced-doc-block.ts        |   9 +-
 .../embed-synced-doc-block.ts                 |  24 ++--
 .../embed-youtube-block.ts                    |  12 +-
 .../src/embed-youtube-block/utils.ts          |   2 +-
 .../blocks/block-frame/src/frame-block.ts     |   2 +-
 .../blocks/block-frame/src/frame-manager.ts   |  54 +++++----
 .../src/components/image-block-fallback.ts    |   4 +-
 .../src/components/page-image-block.ts        |   2 +-
 .../block-image/src/image-edgeless-block.ts   |   2 +-
 .../affine/blocks/block-image/src/utils.ts    |  16 ++-
 .../blocks/block-latex/src/latex-block.ts     |   4 +-
 .../block-list/src/commands/indent-list.ts    |   2 +-
 .../block-list/src/commands/split-list.ts     |  32 +++---
 .../blocks/block-list/src/commands/utils.ts   |  20 ++--
 .../blocks/block-list/src/list-block.ts       |  24 ++--
 .../block-list/src/utils/forward-delete.ts    |   8 +-
 .../block-list/src/utils/get-list-icon.ts     |   8 +-
 .../src/commands/change-note-display-mode.ts  |   6 +-
 .../block-note/src/commands/dedent-block.ts   |   4 +-
 .../block-note/src/commands/dedent-blocks.ts  |   4 +-
 .../block-note/src/commands/indent-block.ts   |   6 +-
 .../block-note/src/commands/indent-blocks.ts  |   8 +-
 .../components/edgeless-note-background.ts    |   4 +-
 .../src/components/edgeless-note-mask.ts      |   6 +-
 .../block-note/src/note-edgeless-block.ts     |  22 ++--
 .../src/commands/dedent-paragraph.ts          |   4 +-
 .../src/commands/indent-paragraph.ts          |  10 +-
 .../src/commands/split-paragraph.ts           |  10 +-
 .../block-paragraph/src/heading-icon.ts       |   2 +-
 .../block-paragraph/src/paragraph-block.ts    |  32 +++---
 .../block-paragraph/src/paragraph-keymap.ts   |  18 +--
 .../block-paragraph/src/paragraph-service.ts  |   4 +-
 .../src/utils/forward-delete.ts               |   6 +-
 .../src/utils/merge-with-prev.ts              |   6 +-
 .../blocks/block-root/src/configs/toolbar.ts  |   2 +-
 .../components/auto-complete/utils.ts         |   8 +-
 .../edgeless/components/note-slicer/index.ts  |   6 +-
 .../rects/edgeless-selected-rect.ts           |  20 ++--
 .../text/edgeless-frame-title-editor.ts       |   2 +-
 .../toolbar/present/frame-order-menu.ts       |   9 +-
 .../toolbar/presentation-toolbar.ts           |   2 +-
 .../src/edgeless/edgeless-keyboard.ts         |   2 +-
 .../src/edgeless/edgeless-root-block.ts       |   4 +-
 .../src/edgeless/utils/clipboard-utils.ts     |   4 +-
 .../src/keyboard/keyboard-manager.ts          |   4 +-
 .../block-root/src/page/page-root-block.ts    |   9 +-
 .../src/preview/preview-root-block.ts         |   3 +-
 .../change-attachment-button.ts               |   4 +-
 .../change-embed-card-button.ts               |  48 ++++----
 .../element-toolbar/change-frame-button.ts    |   6 +-
 .../element-toolbar/change-group-button.ts    |   2 +-
 .../element-toolbar/change-note-button.ts     |  38 +++----
 .../element-toolbar/more-menu/config.ts       |   2 +-
 .../more-menu/render-linked-doc.ts            |   2 +-
 .../src/widgets/keyboard-toolbar/config.ts    |   2 +-
 .../src/configs/slash-menu.ts                 |   2 +-
 .../block-surface-ref/src/portal/note.ts      |   7 +-
 .../src/surface-ref-block.ts                  |  36 +++---
 .../block-surface/src/commands/auto-align.ts  |   6 +-
 .../export-manager/export-manager.ts          |   8 +-
 .../block-surface/src/surface-transformer.ts  |   2 +-
 .../block-surface/src/utils/add-note.ts       |   4 +-
 .../block-surface/src/utils/update-xywh.ts    |   6 +-
 .../components/src/caption/block-caption.ts   |   4 +-
 .../embed-card-caption-edit-modal.ts          |   2 +-
 .../embed-card-modal/embed-card-edit-modal.ts |   8 +-
 .../fragment-doc-title/src/doc-title.ts       |  14 +--
 .../src/body/frame-panel-body.ts              |   8 +-
 .../src/card/frame-card-title-editor.ts       |   2 +-
 .../src/card/frame-card-title.ts              |   4 +-
 .../fragment-outline/src/card/outline-card.ts |  12 +-
 .../src/card/outline-preview.ts               |  38 ++++---
 .../fragments/fragment-outline/src/config.ts  |   7 +-
 .../src/mobile-outline-panel.ts               |   8 +-
 .../fragment-outline/src/utils/query.ts       |   4 +-
 .../attachment/attachment-transformer.ts      |   2 +-
 .../model/src/blocks/callout/callout-model.ts |   4 +-
 .../model/src/blocks/code/code-model.ts       |   4 +-
 .../edgeless-text/edgeless-text-model.ts      |  11 +-
 .../model/src/blocks/frame/frame-model.ts     |  20 +++-
 .../src/blocks/image/image-transformer.ts     |   2 +-
 .../model/src/blocks/list/list-model.ts       |   4 +-
 .../model/src/blocks/note/note-model.ts       |   4 +-
 .../src/blocks/paragraph/paragraph-model.ts   |   4 +-
 .../model/src/blocks/root/root-block-model.ts |   7 +-
 .../rich-text/src/format/delete-text.ts       |   2 +-
 .../affine/rich-text/src/markdown/divider.ts  |   2 +-
 .../rich-text/src/markdown/markdown-input.ts  |   4 +-
 .../rich-text/src/markdown/paragraph.ts       |   2 +-
 .../affine/rich-text/src/markdown/to-code.ts  |   5 +-
 .../shared/src/adapters/middlewares/copy.ts   |   2 +-
 .../shared/src/adapters/middlewares/paste.ts  |   2 +-
 .../src/adapters/middlewares/replace-id.ts    |  24 ++--
 .../shared/src/services/block-meta-service.ts |  20 ----
 .../shared/src/utils/collapsed/paragraph.ts   |   8 +-
 .../affine/shared/src/utils/model/getter.ts   |   4 +-
 .../affine/shared/src/utils/model/list.ts     |  13 ++-
 .../src/middleware/new-id-cross-doc.ts        |   4 +-
 .../src/middleware/reorder-list.ts            |   5 +-
 .../widgets/widget-drag-handle/src/utils.ts   |   6 +-
 .../src/watchers/drag-event-watcher.ts        |   4 +-
 .../src/watchers/pointer-event-watcher.ts     |   2 +-
 .../widget-edgeless-auto-connect/src/index.ts |  14 ++-
 .../widget-frame-title/src/frame-title.ts     |  10 +-
 .../widgets/widget-slash-menu/src/config.ts   |  20 ++--
 .../src/__tests__/editor-host.unit.spec.ts    |   2 +-
 .../block-std/src/__tests__/test-spec.ts      |   2 +-
 .../src/gfx/model/gfx-block-model.ts          |  36 ++++++
 .../src/gfx/model/surface/surface-model.ts    |   4 +
 .../store/src/__tests__/block.unit.spec.ts    | 104 +++++++++---------
 .../store/src/__tests__/doc.unit.spec.ts      |  40 +++----
 .../store/src/model/block/block-model.ts      |  32 ++----
 .../framework/store/src/model/block/draft.ts  |  11 +-
 .../store/src/model/block/sync-controller.ts  |  32 +++---
 .../framework/store/src/model/store/query.ts  |   2 +-
 .../framework/store/src/model/store/utils.ts  |   2 +-
 .../framework/store/src/transformer/base.ts   |   2 +-
 .../store/src/transformer/transformer.ts      |   6 +-
 .../src/__tests__/edgeless/last-props.spec.ts |  26 +++--
 .../src/__tests__/edgeless/layer.spec.ts      |   4 +-
 .../components/attachment-viewer-panel.ts     |   6 +-
 .../playground/apps/starter/data/database.ts  |   4 +-
 blocksuite/tests-legacy/e2e/utils/asserts.ts  |   8 +-
 .../core/src/blocksuite/ai/_common/config.ts  |   2 +-
 .../blocksuite/ai/actions/edgeless-handler.ts |  12 +-
 .../ai/blocks/ai-chat-block/ai-chat-block.ts  |   2 +-
 .../ai-chat-block/ai-chat-edgeless-block.ts   |   4 +-
 .../blocksuite/ai/extensions/ai-paragraph.ts  |   4 +-
 .../ai/peek-view/chat-block-peek-view.ts      |   8 +-
 .../core/src/blocksuite/ai/utils/extract.ts   |   4 +-
 .../blocksuite/ai/utils/selection-utils.ts    |   6 +-
 .../extensions/attachment-embed-view.tsx      |   5 +-
 .../extensions/editor-config/toolbar/index.ts |  14 +--
 .../extensions/entry/enable-mobile.ts         |   2 +-
 .../note-config/edgeless-note-header.tsx      |  20 ++--
 .../components/attachment-viewer/error.tsx    |   2 +-
 .../components/attachment-viewer/index.tsx    |   2 +-
 .../pdf-viewer-embedded-inner.tsx             |   4 +-
 .../src/components/attachment-viewer/utils.ts |  10 +-
 .../pages/workspace/attachment/index.tsx      |   6 +-
 .../services/doc-database-backlinks.ts        |   2 +-
 .../core/src/modules/doc/entities/doc.ts      |   4 +-
 .../modules/docs-search/worker/in-worker.ts   |  18 +--
 .../core/src/modules/pdf/renderer/utils.ts    |   2 +-
 .../modules/peek-view/entities/peek-view.ts   |   4 +-
 .../peek-view/view/image-preview/index.tsx    |   8 +-
 .../blocksuite/clipboard/clipboard.spec.ts    |   4 +-
 .../e2e/blocksuite/edgeless/note.spec.ts      |   2 +-
 .../e2e/blocksuite/paragraph.spec.ts          |  42 ++++---
 193 files changed, 1019 insertions(+), 891 deletions(-)

diff --git a/blocksuite/affine/blocks/block-attachment/src/attachment-block.ts b/blocksuite/affine/blocks/block-attachment/src/attachment-block.ts
index 220a7376f1..dc319c5b75 100644
--- a/blocksuite/affine/blocks/block-attachment/src/attachment-block.ts
+++ b/blocksuite/affine/blocks/block-attachment/src/attachment-block.ts
@@ -28,7 +28,7 @@ import { checkAttachmentBlob, downloadAttachmentBlob } from './utils';
 
 @Peekable({
   enableOn: ({ model }: AttachmentBlockComponent) => {
-    return model.type.endsWith('pdf');
+    return model.props.type.endsWith('pdf');
   },
 })
 export class AttachmentBlockComponent extends CaptionedBlockComponent<AttachmentBlockModel> {
@@ -104,7 +104,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
 
     this.contentEditable = 'false';
 
-    if (!this.model.style) {
+    if (!this.model.props.style) {
       this.doc.withoutTransact(() => {
         this.doc.updateBlock(this.model, {
           style: AttachmentBlockStyles[1],
@@ -170,7 +170,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
   }
 
   override renderBlock() {
-    const { name, size, style } = this.model;
+    const { name, size, style } = this.model.props;
     const cardStyle = style ?? AttachmentBlockStyles[1];
 
     const theme = this.std.get(ThemeProvider).theme;
diff --git a/blocksuite/affine/blocks/block-attachment/src/attachment-edgeless-block.ts b/blocksuite/affine/blocks/block-attachment/src/attachment-edgeless-block.ts
index d9d3b1e8e9..048f1c9184 100644
--- a/blocksuite/affine/blocks/block-attachment/src/attachment-edgeless-block.ts
+++ b/blocksuite/affine/blocks/block-attachment/src/attachment-edgeless-block.ts
@@ -42,7 +42,7 @@ export class AttachmentEdgelessBlockComponent extends toGfxBlockComponent(
   }
 
   override renderGfxBlock() {
-    const { style$ } = this.model;
+    const { style$ } = this.model.props;
     const cardStyle = style$.value ?? AttachmentBlockStyles[1];
     const width = EMBED_CARD_WIDTH[cardStyle];
     const height = EMBED_CARD_HEIGHT[cardStyle];
diff --git a/blocksuite/affine/blocks/block-attachment/src/components/rename-model.ts b/blocksuite/affine/blocks/block-attachment/src/components/rename-model.ts
index 8957e4da87..bfc8076c68 100644
--- a/blocksuite/affine/blocks/block-attachment/src/components/rename-model.ts
+++ b/blocksuite/affine/blocks/block-attachment/src/components/rename-model.ts
@@ -19,7 +19,7 @@ export const RenameModal = ({
   const inputRef = createRef<HTMLInputElement>();
   // Fix auto focus
   setTimeout(() => inputRef.value?.focus());
-  const originalName = model.name;
+  const originalName = model.props.name;
   const nameWithoutExtension = originalName.slice(
     0,
     originalName.lastIndexOf('.')
diff --git a/blocksuite/affine/blocks/block-attachment/src/configs/toolbar.ts b/blocksuite/affine/blocks/block-attachment/src/configs/toolbar.ts
index 53cfe9d88b..2db47aaa06 100644
--- a/blocksuite/affine/blocks/block-attachment/src/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/block-attachment/src/configs/toolbar.ts
@@ -100,7 +100,7 @@ const createAttachmentViewDropdownMenuWith = <T extends SelectionConstructor>(
       const actions = this.actions.map(action => ({ ...action }));
       const viewType$ = computed(() => {
         const [cardAction, embedAction] = actions;
-        const embed = model.embed$.value ?? false;
+        const embed = model.props.embed$.value ?? false;
 
         cardAction.disabled = !embed;
         embedAction.disabled = embed && embedProvider.embedded(model);
diff --git a/blocksuite/affine/blocks/block-attachment/src/embed.ts b/blocksuite/affine/blocks/block-attachment/src/embed.ts
index 14b59c5af0..671ef34ca7 100644
--- a/blocksuite/affine/blocks/block-attachment/src/embed.ts
+++ b/blocksuite/affine/blocks/block-attachment/src/embed.ts
@@ -113,11 +113,11 @@ export class AttachmentEmbedService extends Extension {
     blobUrl?: string,
     maxFileSize = this._maxFileSize
   ) {
-    if (!model.embed || !blobUrl) return;
+    if (!model.props.embed || !blobUrl) return;
 
     const config = this.values.find(config => config.check(model, maxFileSize));
     if (!config || !config.template) {
-      console.error('No embed view template found!', model, model.type);
+      console.error('No embed view template found!', model, model.props.type);
       return;
     }
 
@@ -130,7 +130,7 @@ const embedConfig: AttachmentEmbedConfig[] = [
     name: 'image',
     check: model =>
       model.doc.schema.flavourSchemaMap.has('affine:image') &&
-      model.type.startsWith('image/'),
+      model.props.type.startsWith('image/'),
     async action(model, std) {
       const component = std.view.getBlock(model.id);
       if (!component) return;
@@ -141,7 +141,7 @@ const embedConfig: AttachmentEmbedConfig[] = [
   {
     name: 'pdf',
     check: (model, maxFileSize) =>
-      model.type === 'application/pdf' && model.size <= maxFileSize,
+      model.props.type === 'application/pdf' && model.props.size <= maxFileSize,
     template: (_, blobUrl) => {
       // More options: https://tinytip.co/tips/html-pdf-params/
       // https://chromium.googlesource.com/chromium/src/+/refs/tags/121.0.6153.1/chrome/browser/resources/pdf/open_pdf_params_parser.ts
@@ -162,7 +162,7 @@ const embedConfig: AttachmentEmbedConfig[] = [
   {
     name: 'video',
     check: (model, maxFileSize) =>
-      model.type.startsWith('video/') && model.size <= maxFileSize,
+      model.props.type.startsWith('video/') && model.props.size <= maxFileSize,
     template: (_, blobUrl) =>
       html`<video
         style="max-height: max-content;"
@@ -175,7 +175,7 @@ const embedConfig: AttachmentEmbedConfig[] = [
   {
     name: 'audio',
     check: (model, maxFileSize) =>
-      model.type.startsWith('audio/') && model.size <= maxFileSize,
+      model.props.type.startsWith('audio/') && model.props.size <= maxFileSize,
     template: (_, blobUrl) =>
       html`<audio controls src=${blobUrl} style="margin: 4px;"></audio>`,
   },
@@ -190,13 +190,15 @@ export async function turnIntoImageBlock(model: AttachmentBlockModel) {
     return;
   }
 
-  const sourceId = model.sourceId;
+  const sourceId = model.props.sourceId;
   if (!sourceId) return;
 
   const { saveAttachmentData, getImageData } = withTempBlobData();
-  saveAttachmentData(sourceId, { name: model.name });
+  saveAttachmentData(sourceId, { name: model.props.name });
 
-  let imageSize = model.sourceId ? getImageData(model.sourceId) : undefined;
+  let imageSize = model.props.sourceId
+    ? getImageData(model.props.sourceId)
+    : undefined;
 
   const bounds = model.xywh
     ? Bound.fromXYWH(model.deserializedXYWH)
@@ -223,8 +225,8 @@ export async function turnIntoImageBlock(model: AttachmentBlockModel) {
 
   const imageProp: Partial<ImageBlockProps> = {
     sourceId,
-    caption: model.caption,
-    size: model.size,
+    caption: model.props.caption,
+    size: model.props.size,
     ...imageSize,
     ...others,
   };
diff --git a/blocksuite/affine/blocks/block-attachment/src/utils.ts b/blocksuite/affine/blocks/block-attachment/src/utils.ts
index 99b7da35b8..52530f9b14 100644
--- a/blocksuite/affine/blocks/block-attachment/src/utils.ts
+++ b/blocksuite/affine/blocks/block-attachment/src/utils.ts
@@ -98,7 +98,7 @@ export async function uploadAttachmentBlob(
 }
 
 export async function getAttachmentBlob(model: AttachmentBlockModel) {
-  const sourceId = model.sourceId;
+  const sourceId = model.props.sourceId;
   if (!sourceId) {
     return null;
   }
@@ -107,7 +107,7 @@ export async function getAttachmentBlob(model: AttachmentBlockModel) {
   let blob = await doc.blobSync.get(sourceId);
 
   if (blob) {
-    blob = new Blob([blob], { type: model.type });
+    blob = new Blob([blob], { type: model.props.type });
   }
 
   return blob;
@@ -115,7 +115,8 @@ export async function getAttachmentBlob(model: AttachmentBlockModel) {
 
 export async function checkAttachmentBlob(block: AttachmentBlockComponent) {
   const model = block.model;
-  const { id, sourceId } = model;
+  const { id } = model;
+  const { sourceId } = model.props;
 
   if (isAttachmentUploading(id)) {
     block.loading = true;
@@ -174,7 +175,7 @@ export function downloadAttachmentBlob(block: AttachmentBlockComponent) {
     return;
   }
 
-  const name = model.name;
+  const name = model.props.name;
   const shortName = name.length < 20 ? name : name.slice(0, 20) + '...';
 
   if (error || !blobUrl) {
diff --git a/blocksuite/affine/blocks/block-bookmark/src/bookmark-block.ts b/blocksuite/affine/blocks/block-bookmark/src/bookmark-block.ts
index ff38946758..e287eafbee 100644
--- a/blocksuite/affine/blocks/block-bookmark/src/bookmark-block.ts
+++ b/blocksuite/affine/blocks/block-bookmark/src/bookmark-block.ts
@@ -28,7 +28,7 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBloc
   protected containerStyleMap!: ReturnType<typeof styleMap>;
 
   open = () => {
-    let link = this.model.url;
+    let link = this.model.props.url;
     if (!link.match(/^[a-zA-Z]+:\/\//)) {
       link = 'https://' + link;
     }
@@ -57,7 +57,7 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBloc
 
     this.contentEditable = 'false';
 
-    if (!this.model.description && !this.model.title) {
+    if (!this.model.props.description && !this.model.props.title) {
       this.refreshData();
     }
 
diff --git a/blocksuite/affine/blocks/block-bookmark/src/bookmark-edgeless-block.ts b/blocksuite/affine/blocks/block-bookmark/src/bookmark-edgeless-block.ts
index 4542249e5c..bb723615d3 100644
--- a/blocksuite/affine/blocks/block-bookmark/src/bookmark-edgeless-block.ts
+++ b/blocksuite/affine/blocks/block-bookmark/src/bookmark-edgeless-block.ts
@@ -16,7 +16,7 @@ export class BookmarkEdgelessBlockComponent extends toGfxBlockComponent(
 
   override getRenderingRect() {
     const elementBound = this.model.elementBound;
-    const style = this.model.style$.value;
+    const style = this.model.props.style$.value;
 
     return {
       x: elementBound.x,
@@ -28,7 +28,7 @@ export class BookmarkEdgelessBlockComponent extends toGfxBlockComponent(
   }
 
   override renderGfxBlock() {
-    const style = this.model.style$.value;
+    const style = this.model.props.style$.value;
     const width = EMBED_CARD_WIDTH[style];
     const height = EMBED_CARD_HEIGHT[style];
     const bound = this.model.elementBound;
diff --git a/blocksuite/affine/blocks/block-bookmark/src/components/bookmark-card.ts b/blocksuite/affine/blocks/block-bookmark/src/components/bookmark-card.ts
index 05e15f3922..098b38899d 100644
--- a/blocksuite/affine/blocks/block-bookmark/src/components/bookmark-card.ts
+++ b/blocksuite/affine/blocks/block-bookmark/src/components/bookmark-card.ts
@@ -54,7 +54,8 @@ export class BookmarkCard extends WithDisposable(ShadowlessElement) {
   }
 
   override render() {
-    const { icon, title, url, description, image, style } = this.bookmark.model;
+    const { icon, title, url, description, image, style } =
+      this.bookmark.model.props;
 
     const cardClassMap = classMap({
       loading: this.loading,
diff --git a/blocksuite/affine/blocks/block-bookmark/src/configs/toolbar.ts b/blocksuite/affine/blocks/block-bookmark/src/configs/toolbar.ts
index fbfbc1def9..bc79a65b23 100644
--- a/blocksuite/affine/blocks/block-bookmark/src/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/block-bookmark/src/configs/toolbar.ts
@@ -43,7 +43,7 @@ export const builtinToolbarConfig = {
         );
         if (!model) return null;
 
-        const { url } = model;
+        const { url } = model.props;
 
         return html`<affine-link-preview .url=${url}></affine-link-preview>`;
       },
@@ -61,7 +61,8 @@ export const builtinToolbarConfig = {
             );
             if (!model) return;
 
-            const { title, caption, url, parent } = model;
+            const { title, caption, url } = model.props;
+            const { parent } = model;
             const index = parent?.children.indexOf(model);
 
             const yText = new Y.Text();
@@ -103,7 +104,7 @@ export const builtinToolbarConfig = {
 
             const options = ctx.std
               .get(EmbedOptionProvider)
-              .getEmbedBlockOptions(model.url);
+              .getEmbedBlockOptions(model.props.url);
 
             return options?.viewType !== 'embed';
           },
@@ -114,7 +115,8 @@ export const builtinToolbarConfig = {
             );
             if (!model) return;
 
-            const { caption, url, style, parent } = model;
+            const { caption, url, style } = model.props;
+            const { parent } = model;
             const index = parent?.children.indexOf(model);
 
             const options = ctx.std
@@ -232,7 +234,7 @@ export const builtinToolbarConfig = {
             .actions=${actions}
             .context=${ctx}
             .toggle=${toggle}
-            .style$=${model.style$}
+            .style$=${model.props.style$}
           ></affine-card-style-dropdown-menu>`
         )}`;
       },
diff --git a/blocksuite/affine/blocks/block-bookmark/src/utils.ts b/blocksuite/affine/blocks/block-bookmark/src/utils.ts
index 75fb44c73b..502139838e 100644
--- a/blocksuite/affine/blocks/block-bookmark/src/utils.ts
+++ b/blocksuite/affine/blocks/block-bookmark/src/utils.ts
@@ -17,7 +17,7 @@ export async function refreshBookmarkUrlData(
 
     const linkPreviewer = bookmarkElement.doc.get(LinkPreviewerService);
     const bookmarkUrlData = await linkPreviewer.query(
-      bookmarkElement.model.url,
+      bookmarkElement.model.props.url,
       signal
     );
 
diff --git a/blocksuite/affine/blocks/block-callout/src/callout-block.ts b/blocksuite/affine/blocks/block-callout/src/callout-block.ts
index aeaf9a4dd3..00f6ae00f3 100644
--- a/blocksuite/affine/blocks/block-callout/src/callout-block.ts
+++ b/blocksuite/affine/blocks/block-callout/src/callout-block.ts
@@ -57,7 +57,7 @@ export class CalloutBlockComponent extends CaptionedBlockComponent<CalloutBlockM
       template: html`<affine-emoji-menu
         .theme=${theme}
         .onEmojiSelect=${(data: any) => {
-          this.model.emoji = data.native;
+          this.model.props.emoji = data.native;
         }}
       ></affine-emoji-menu>`,
       portalStyles: {
@@ -109,7 +109,7 @@ export class CalloutBlockComponent extends CaptionedBlockComponent<CalloutBlockM
           contenteditable="false"
           class="affine-callout-emoji-container"
         >
-          <span class="affine-callout-emoji">${this.model.emoji}</span>
+          <span class="affine-callout-emoji">${this.model.props.emoji$}</span>
         </div>
         <div class="affine-callout-children">
           ${this.renderChildren(this.model)}
diff --git a/blocksuite/affine/blocks/block-code/src/code-block.ts b/blocksuite/affine/blocks/block-code/src/code-block.ts
index 7463262085..693d46a494 100644
--- a/blocksuite/affine/blocks/block-code/src/code-block.ts
+++ b/blocksuite/affine/blocks/block-code/src/code-block.ts
@@ -47,7 +47,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<
   highlightTokens$: Signal<ThemedToken[][]> = signal([]);
 
   languageName$: Signal<string> = computed(() => {
-    const lang = this.model.language$.value;
+    const lang = this.model.props.language$.value;
     if (lang === null) {
       return 'Plain Text';
     }
@@ -83,7 +83,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<
   }
 
   private _updateHighlightTokens() {
-    const modelLang = this.model.language$.value;
+    const modelLang = this.model.props.language$.value;
     if (modelLang === null) {
       this.highlightTokens$.value = [];
       return;
@@ -97,7 +97,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<
     );
 
     if (matchedInfo) {
-      this.model.language$.value = matchedInfo.id;
+      this.model.props.language$.value = matchedInfo.id;
       const langImport = matchedInfo.import;
       const lang = matchedInfo.id;
 
@@ -108,8 +108,8 @@ export class CodeBlockComponent extends CaptionedBlockComponent<
         return;
       }
 
-      noop(this.model.text.deltas$.value);
-      const code = this.model.text.toString();
+      noop(this.model.props.text.deltas$.value);
+      const code = this.model.props.text.toString();
 
       const loadedLanguages = highlighter.getLoadedLanguages();
       if (!loadedLanguages.includes(lang)) {
@@ -131,7 +131,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<
     } else {
       this.highlightTokens$.value = [];
       // clear language if not found
-      this.model.language$.value = null;
+      this.model.props.language$.value = null;
     }
   }
 
@@ -339,7 +339,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<
         const inlineEditor = this.inlineEditor;
         const inlineRange = inlineEditor?.getInlineRange();
         if (!inlineRange || !inlineEditor) return;
-        const isEnd = model.text.length === inlineRange.index;
+        const isEnd = model.props.text.length === inlineRange.index;
         if (!isEnd) return;
         const parent = this.doc.getParent(model);
         if (!parent) return;
@@ -389,11 +389,11 @@ export class CodeBlockComponent extends CaptionedBlockComponent<
         class=${classMap({
           'affine-code-block-container': true,
           mobile: IS_MOBILE,
-          wrap: this.model.wrap,
+          wrap: this.model.props.wrap,
         })}
       >
         <rich-text
-          .yText=${this.model.text.yText}
+          .yText=${this.model.props.text.yText}
           .inlineEventSource=${this.topContenteditableElement ?? nothing}
           .undoManager=${this.doc.history}
           .attributesSchema=${this.inlineManager.getSchema()}
@@ -402,7 +402,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<
           .inlineRangeProvider=${this._inlineRangeProvider}
           .enableClipboard=${false}
           .enableUndoRedo=${false}
-          .wrapText=${this.model.wrap}
+          .wrapText=${this.model.props.wrap}
           .verticalScrollContainerGetter=${() => getViewportElement(this.host)}
           .vLineRenderer=${showLineNumbers
             ? (vLine: VLine) => {
diff --git a/blocksuite/affine/blocks/block-code/src/code-toolbar/components/lang-button.ts b/blocksuite/affine/blocks/block-code/src/code-toolbar/components/lang-button.ts
index 2416062e63..89b0a6adf0 100644
--- a/blocksuite/affine/blocks/block-code/src/code-toolbar/components/lang-button.ts
+++ b/blocksuite/affine/blocks/block-code/src/code-toolbar/components/lang-button.ts
@@ -76,10 +76,10 @@ export class LanguageListButton extends WithDisposable(
           sortedBundledLanguages.unshift(item);
         }
         this.blockComponent.doc.transact(() => {
-          this.blockComponent.model.language$.value = item.name;
+          this.blockComponent.model.props.language$.value = item.name;
         });
       },
-      active: item => item.name === this.blockComponent.model.language,
+      active: item => item.name === this.blockComponent.model.props.language,
       items: this._sortedBundledLanguages,
     };
 
diff --git a/blocksuite/affine/blocks/block-code/src/code-toolbar/config.ts b/blocksuite/affine/blocks/block-code/src/code-toolbar/config.ts
index ac490dbcf5..4475308fb8 100644
--- a/blocksuite/affine/blocks/block-code/src/code-toolbar/config.ts
+++ b/blocksuite/affine/blocks/block-code/src/code-toolbar/config.ts
@@ -110,7 +110,7 @@ export const clipboardGroup: MenuItemGroup<CodeBlockToolbarContext> = {
     {
       type: 'wrap',
       generate: ({ blockComponent, close }) => {
-        const wrapped = blockComponent.model.wrap;
+        const wrapped = blockComponent.model.props.wrap;
         const label = wrapped ? 'Cancel wrap' : 'Wrap';
         const icon = wrapped ? CancelWrapIcon : WrapIcon;
 
diff --git a/blocksuite/affine/blocks/block-code/src/code-toolbar/utils.ts b/blocksuite/affine/blocks/block-code/src/code-toolbar/utils.ts
index ede0e40851..e9162af7fd 100644
--- a/blocksuite/affine/blocks/block-code/src/code-toolbar/utils.ts
+++ b/blocksuite/affine/blocks/block-code/src/code-toolbar/utils.ts
@@ -1,14 +1,14 @@
 import type { CodeBlockModel } from '@blocksuite/affine-model';
 
 export const duplicateCodeBlock = (model: CodeBlockModel) => {
-  const keys = model.keys as (keyof typeof model)[];
-  const values = keys.map(key => model[key]);
+  const keys = model.keys as (keyof (typeof model)['props'])[];
+  const values = keys.map(key => model.props[key]);
   const blockProps = Object.fromEntries(keys.map((key, i) => [key, values[i]]));
   const { text: _text, ...duplicateProps } = blockProps;
 
   const newProps = {
     flavour: model.flavour,
-    text: model.text.clone(),
+    text: model.props.text.clone(),
     ...duplicateProps,
   };
 
diff --git a/blocksuite/affine/blocks/block-data-view/src/block-meta/todo.ts b/blocksuite/affine/blocks/block-data-view/src/block-meta/todo.ts
index 334dbbecbe..ae8e8d195f 100644
--- a/blocksuite/affine/blocks/block-data-view/src/block-meta/todo.ts
+++ b/blocksuite/affine/blocks/block-data-view/src/block-meta/todo.ts
@@ -8,6 +8,6 @@ export const todoMeta = createBlockMeta<ListBlockModel>({
       return false;
     }
 
-    return (block.model as ListBlockModel).type === 'todo';
+    return (block.model as ListBlockModel).props.type === 'todo';
   },
 });
diff --git a/blocksuite/affine/blocks/block-data-view/src/data-source.ts b/blocksuite/affine/blocks/block-data-view/src/data-source.ts
index 6680c30f4f..2b7434e6f2 100644
--- a/blocksuite/affine/blocks/block-data-view/src/data-source.ts
+++ b/blocksuite/affine/blocks/block-data-view/src/data-source.ts
@@ -47,7 +47,7 @@ export class BlockQueryDataSource extends DataSourceBase {
   get properties(): string[] {
     return [
       ...this.meta.properties.map(v => v.key),
-      ...this.block.columns.map(v => v.id),
+      ...this.block.props.columns.map(v => v.id),
     ];
   }
 
@@ -107,7 +107,9 @@ export class BlockQueryDataSource extends DataSourceBase {
 
   private newColumnName() {
     let i = 1;
-    while (this.block.columns.some(column => column.name === `Column ${i}`)) {
+    while (
+      this.block.props.columns.some(column => column.name === `Column ${i}`)
+    ) {
       i++;
     }
     return `Column ${i}`;
@@ -116,8 +118,8 @@ export class BlockQueryDataSource extends DataSourceBase {
   cellValueChange(rowId: string, propertyId: string, value: unknown): void {
     const viewColumn = this.getViewColumn(propertyId);
     if (viewColumn) {
-      this.block.cells[rowId] = {
-        ...this.block.cells[rowId],
+      this.block.props.cells[rowId] = {
+        ...this.block.props.cells[rowId],
         [propertyId]: value,
       };
       return;
@@ -133,7 +135,7 @@ export class BlockQueryDataSource extends DataSourceBase {
   cellValueGet(rowId: string, propertyId: string): unknown {
     const viewColumn = this.getViewColumn(propertyId);
     if (viewColumn) {
-      return this.block.cells[rowId]?.[propertyId];
+      return this.block.props.cells[rowId]?.[propertyId];
     }
     const block = this.blockMap.get(rowId);
     if (block) {
@@ -143,7 +145,7 @@ export class BlockQueryDataSource extends DataSourceBase {
   }
 
   getViewColumn(id: string) {
-    return this.block.columns.find(v => v.id === id);
+    return this.block.props.columns.find(v => v.id === id);
   }
 
   listenToDoc(doc: Store) {
@@ -174,7 +176,7 @@ export class BlockQueryDataSource extends DataSourceBase {
     ].create(this.newColumnName());
 
     const id = doc.workspace.idGenerator();
-    if (this.block.columns.some(v => v.id === id)) {
+    if (this.block.props.columns.some(v => v.id === id)) {
       return id;
     }
     doc.transact(() => {
@@ -182,8 +184,8 @@ export class BlockQueryDataSource extends DataSourceBase {
         ...column,
         id,
       };
-      this.block.columns.splice(
-        insertPositionToIndex(insertToPosition, this.block.columns),
+      this.block.props.columns.splice(
+        insertPositionToIndex(insertToPosition, this.block.props.columns),
         0,
         col
       );
@@ -211,9 +213,9 @@ export class BlockQueryDataSource extends DataSourceBase {
   }
 
   propertyDelete(_id: string): void {
-    const index = this.block.columns.findIndex(v => v.id === _id);
+    const index = this.block.props.columns.findIndex(v => v.id === _id);
     if (index >= 0) {
-      this.block.columns.splice(index, 1);
+      this.block.props.columns.splice(index, 1);
     }
   }
 
@@ -293,8 +295,8 @@ export class BlockQueryDataSource extends DataSourceBase {
       viewColumn.data = result.property;
       currentCells.forEach((value, i) => {
         if (value != null || result.cells[i] != null) {
-          this.block.cells[rows[i]] = {
-            ...this.block.cells[rows[i]],
+          this.block.props.cells[rows[i]] = {
+            ...this.block.props.cells[rows[i]],
             [propertyId]: result.cells[i],
           };
         }
diff --git a/blocksuite/affine/blocks/block-data-view/src/data-view-block.ts b/blocksuite/affine/blocks/block-data-view/src/data-view-block.ts
index ca19831328..f4d238e69b 100644
--- a/blocksuite/affine/blocks/block-data-view/src/data-view-block.ts
+++ b/blocksuite/affine/blocks/block-data-view/src/data-view-block.ts
@@ -96,10 +96,10 @@ export class DataViewBlockComponent extends CaptionedBlockComponent<DataViewBloc
       options: {
         items: [
           menu.input({
-            initialValue: this.model.title,
+            initialValue: this.model.props.title,
             placeholder: 'Untitled',
             onChange: text => {
-              this.model.title = text;
+              this.model.props.title = text;
             },
           }),
           menu.action({
@@ -158,7 +158,7 @@ export class DataViewBlockComponent extends CaptionedBlockComponent<DataViewBloc
       return html`
         <div style="margin-bottom: 16px;display:flex;flex-direction: column">
           <div style="display:flex;gap:8px;padding: 0 6px;margin-bottom: 8px;">
-            <div>${this.model.title}</div>
+            <div>${this.model.props.title}</div>
             ${this.renderDatabaseOps()}
           </div>
           <div
diff --git a/blocksuite/affine/blocks/block-data-view/src/data-view-model.ts b/blocksuite/affine/blocks/block-data-view/src/data-view-model.ts
index 46a7c636f2..4aad47c205 100644
--- a/blocksuite/affine/blocks/block-data-view/src/data-view-model.ts
+++ b/blocksuite/affine/blocks/block-data-view/src/data-view-model.ts
@@ -25,24 +25,24 @@ export class DataViewBlockModel extends BlockModel<Props> {
 
   applyViewsUpdate() {
     this.doc.updateBlock(this, {
-      views: this.views,
+      views: this.props.views,
     });
   }
 
   deleteView(id: string) {
     this.doc.captureSync();
     this.doc.transact(() => {
-      this.views = this.views.filter(v => v.id !== id);
+      this.props.views = this.props.views.filter(v => v.id !== id);
     });
   }
 
   duplicateView(id: string): string {
     const newId = this.doc.workspace.idGenerator();
     this.doc.transact(() => {
-      const index = this.views.findIndex(v => v.id === id);
-      const view = this.views[index];
+      const index = this.props.views.findIndex(v => v.id === id);
+      const view = this.props.views[index];
       if (view) {
-        this.views.splice(
+        this.props.views.splice(
           index + 1,
           0,
           JSON.parse(JSON.stringify({ ...view, id: newId }))
@@ -54,8 +54,8 @@ export class DataViewBlockModel extends BlockModel<Props> {
 
   moveViewTo(id: string, position: InsertToPosition) {
     this.doc.transact(() => {
-      this.views = arrayMove(
-        this.views,
+      this.props.views = arrayMove(
+        this.props.views,
         v => v.id === id,
         arr => insertPositionToIndex(position, arr)
       );
@@ -68,7 +68,7 @@ export class DataViewBlockModel extends BlockModel<Props> {
     update: (data: DataViewDataType) => Partial<DataViewDataType>
   ) {
     this.doc.transact(() => {
-      this.views = this.views.map(v => {
+      this.props.views = this.props.views.map(v => {
         if (v.id !== id) {
           return v;
         }
diff --git a/blocksuite/affine/blocks/block-database/src/data-source.ts b/blocksuite/affine/blocks/block-database/src/data-source.ts
index 2c8cc0c2a6..e899b05663 100644
--- a/blocksuite/affine/blocks/block-database/src/data-source.ts
+++ b/blocksuite/affine/blocks/block-database/src/data-source.ts
@@ -70,7 +70,7 @@ export class DatabaseBlockDataSource extends DataSourceBase {
   properties$: ReadonlySignal<string[]> = computed(() => {
     const fixedPropertiesSet = new Set(this.fixedProperties$.value);
     const properties: string[] = [];
-    this._model.columns$.value.forEach(column => {
+    this._model.props.columns$.value.forEach(column => {
       if (fixedPropertiesSet.has(column.type)) {
         fixedPropertiesSet.delete(column.type);
       }
@@ -96,7 +96,7 @@ export class DatabaseBlockDataSource extends DataSourceBase {
   viewConverts = databaseBlockViewConverts;
 
   viewDataList$: ReadonlySignal<DataViewDataType[]> = computed(() => {
-    return this._model.views$.value as DataViewDataType[];
+    return this._model.props.views$.value as DataViewDataType[];
   });
 
   override viewManager: ViewManager = new ViewManagerBase(this);
@@ -140,7 +140,9 @@ export class DatabaseBlockDataSource extends DataSourceBase {
   private newPropertyName() {
     let i = 1;
     while (
-      this._model.columns$.value.some(column => column.name === `Column ${i}`)
+      this._model.props.columns$.value.some(
+        column => column.name === `Column ${i}`
+      )
     ) {
       i++;
     }
@@ -164,7 +166,7 @@ export class DatabaseBlockDataSource extends DataSourceBase {
       dataSource: this,
       newValue: value,
       setValue: newValue => {
-        if (this._model.columns$.value.some(v => v.id === propertyId)) {
+        if (this._model.props.columns$.value.some(v => v.id === propertyId)) {
           updateCell(this._model, rowId, {
             columnId: propertyId,
             value: newValue,
@@ -227,11 +229,11 @@ export class DatabaseBlockDataSource extends DataSourceBase {
         index: number;
       }
     | undefined {
-    const index = this._model.columns$.value.findIndex(
+    const index = this._model.props.columns$.value.findIndex(
       v => v.id === propertyId
     );
     if (index >= 0) {
-      const column = this._model.columns$.value[index];
+      const column = this._model.props.columns$.value[index];
       if (!column) {
         return;
       }
@@ -281,11 +283,11 @@ export class DatabaseBlockDataSource extends DataSourceBase {
     this._model.doc.transact(() => {
       if (index >= 0) {
         const result = updater(prevColumn);
-        this._model.columns[index] = { ...prevColumn, ...result };
+        this._model.props.columns[index] = { ...prevColumn, ...result };
       } else {
         const result = updater(prevColumn);
-        this._model.columns = [
-          ...this._model.columns,
+        this._model.props.columns = [
+          ...this._model.props.columns,
           { ...prevColumn, ...result },
         ];
       }
@@ -327,11 +329,13 @@ export class DatabaseBlockDataSource extends DataSourceBase {
       return;
     }
     this.doc.captureSync();
-    const index = this._model.columns.findIndex(v => v.id === id);
+    const index = this._model.props.columns.findIndex(v => v.id === id);
     if (index < 0) return;
 
     this.doc.transact(() => {
-      this._model.columns = this._model.columns.filter((_, i) => i !== index);
+      this._model.props.columns = this._model.props.columns.filter(
+        (_, i) => i !== index
+      );
     });
   }
 
@@ -345,7 +349,7 @@ export class DatabaseBlockDataSource extends DataSourceBase {
       return;
     }
     const { id: copyId, ...nonIdProps } = currentSchema;
-    const names = new Set(this._model.columns$.value.map(v => v.name));
+    const names = new Set(this._model.props.columns$.value.map(v => v.name));
     let index = 1;
     while (names.has(`${nonIdProps.name}(${index})`)) {
       index++;
@@ -476,7 +480,7 @@ export class DatabaseBlockDataSource extends DataSourceBase {
   viewDataAdd(viewData: DataViewDataType): string {
     this._model.doc.captureSync();
     this._model.doc.transact(() => {
-      this._model.views = [...this._model.views, viewData];
+      this._model.props.views = [...this._model.props.views, viewData];
     });
     return viewData.id;
   }
diff --git a/blocksuite/affine/blocks/block-database/src/database-block.ts b/blocksuite/affine/blocks/block-database/src/database-block.ts
index bc8b81e6e1..686bf50a56 100644
--- a/blocksuite/affine/blocks/block-database/src/database-block.ts
+++ b/blocksuite/affine/blocks/block-database/src/database-block.ts
@@ -110,10 +110,14 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     const options = this.optionsConfig.configure(this.model, {
       items: [
         menu.input({
-          initialValue: this.model.title.toString(),
+          initialValue: this.model.props.title.toString(),
           placeholder: 'Untitled',
           onChange: text => {
-            this.model.title.replace(0, this.model.title.length, text);
+            this.model.props.title.replace(
+              0,
+              this.model.props.title.length,
+              text
+            );
           },
         }),
         menu.action({
@@ -162,7 +166,7 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     const addRow = () => dataViewMethod.addRow?.('start');
     return html` <affine-database-title
       style="overflow: hidden"
-      .titleText="${this.model.title}"
+      .titleText="${this.model.props.title}"
       .readonly="${this.dataSource.readonly$.value}"
       .onPressEnterKey="${addRow}"
     ></affine-database-title>`;
diff --git a/blocksuite/affine/blocks/block-database/src/detail-panel/note-renderer.ts b/blocksuite/affine/blocks/block-database/src/detail-panel/note-renderer.ts
index 72f5d55048..f80016a584 100644
--- a/blocksuite/affine/blocks/block-database/src/detail-panel/note-renderer.ts
+++ b/blocksuite/affine/blocks/block-database/src/detail-panel/note-renderer.ts
@@ -68,7 +68,7 @@ export class NoteRenderer
       );
       collection.meta.setDocMeta(note.id, { title: rowContent });
       if (note.root) {
-        (note.root as RootBlockModel).title.insert(rowContent ?? '', 0);
+        (note.root as RootBlockModel).props.title.insert(rowContent ?? '', 0);
         note.root.children
           .find(child => child.flavour === 'affine:note')
           ?.children.find(block =>
diff --git a/blocksuite/affine/blocks/block-database/src/utils/block-utils.ts b/blocksuite/affine/blocks/block-database/src/utils/block-utils.ts
index 57729d6872..8b0fb0fe6f 100644
--- a/blocksuite/affine/blocks/block-database/src/utils/block-utils.ts
+++ b/blocksuite/affine/blocks/block-database/src/utils/block-utils.ts
@@ -20,7 +20,7 @@ export function addProperty(
   }
 ): string {
   const id = column.id ?? model.doc.workspace.idGenerator();
-  if (model.columns.some(v => v.id === id)) {
+  if (model.props.columns.some(v => v.id === id)) {
     return id;
   }
   model.doc.transact(() => {
@@ -28,8 +28,8 @@ export function addProperty(
       ...column,
       id,
     };
-    model.columns.splice(
-      insertPositionToIndex(position, model.columns),
+    model.props.columns.splice(
+      insertPositionToIndex(position, model.props.columns),
       0,
       col
     );
@@ -43,10 +43,10 @@ export function copyCellsByProperty(
   toId: Column['id']
 ) {
   model.doc.transact(() => {
-    Object.keys(model.cells).forEach(rowId => {
-      const cell = model.cells[rowId]?.[fromId];
-      if (cell && model.cells[rowId]) {
-        model.cells[rowId][toId] = {
+    Object.keys(model.props.cells).forEach(rowId => {
+      const cell = model.props.cells[rowId]?.[fromId];
+      if (cell && model.props.cells[rowId]) {
+        model.props.cells[rowId][toId] = {
           ...cell,
           columnId: toId,
         };
@@ -59,18 +59,18 @@ export function deleteColumn(
   model: DatabaseBlockModel,
   columnId: Column['id']
 ) {
-  const index = model.columns.findIndex(v => v.id === columnId);
+  const index = model.props.columns.findIndex(v => v.id === columnId);
   if (index < 0) return;
 
   model.doc.transact(() => {
-    model.columns.splice(index, 1);
+    model.props.columns.splice(index, 1);
   });
 }
 
 export function deleteRows(model: DatabaseBlockModel, rowIds: string[]) {
   model.doc.transact(() => {
     for (const rowId of rowIds) {
-      delete model.cells[rowId];
+      delete model.props.cells[rowId];
     }
   });
 }
@@ -78,17 +78,17 @@ export function deleteRows(model: DatabaseBlockModel, rowIds: string[]) {
 export function deleteView(model: DatabaseBlockModel, id: string) {
   model.doc.captureSync();
   model.doc.transact(() => {
-    model.views = model.views.filter(v => v.id !== id);
+    model.props.views = model.props.views.filter(v => v.id !== id);
   });
 }
 
 export function duplicateView(model: DatabaseBlockModel, id: string): string {
   const newId = model.doc.workspace.idGenerator();
   model.doc.transact(() => {
-    const index = model.views.findIndex(v => v.id === id);
-    const view = model.views[index];
+    const index = model.props.views.findIndex(v => v.id === id);
+    const view = model.props.views[index];
     if (view) {
-      model.views.splice(
+      model.props.views.splice(
         index + 1,
         0,
         JSON.parse(JSON.stringify({ ...view, id: newId }))
@@ -109,7 +109,7 @@ export function getCell(
       value: rowId,
     };
   }
-  const yRow = model.cells$.value[rowId];
+  const yRow = model.props.cells$.value[rowId];
   const yCell = yRow?.[columnId] ?? null;
   if (!yCell) return null;
 
@@ -123,7 +123,7 @@ export function getProperty(
   model: DatabaseBlockModel,
   id: Column['id']
 ): Column | undefined {
-  return model.columns.find(v => v.id === id);
+  return model.props.columns.find(v => v.id === id);
 }
 
 export function moveViewTo(
@@ -132,8 +132,8 @@ export function moveViewTo(
   position: InsertToPosition
 ) {
   model.doc.transact(() => {
-    model.views = arrayMove(
-      model.views,
+    model.props.views = arrayMove(
+      model.props.views,
       v => v.id === id,
       arr => insertPositionToIndex(position, arr)
     );
@@ -163,11 +163,11 @@ export function updateCell(
       console.error('Invalid columnId');
       return;
     }
-    if (!model.cells[rowId]) {
-      model.cells[rowId] = Object.create(null);
+    if (!model.props.cells[rowId]) {
+      model.props.cells[rowId] = Object.create(null);
     }
-    if (model.cells[rowId]) {
-      model.cells[rowId][columnId] = {
+    if (model.props.cells[rowId]) {
+      model.props.cells[rowId][columnId] = {
         columnId: columnId,
         value: cell.value,
       };
@@ -189,11 +189,11 @@ export function updateCells(
       ) {
         throw new Error('Invalid rowId');
       }
-      if (!model.cells[rowId]) {
-        model.cells[rowId] = Object.create(null);
+      if (!model.props.cells[rowId]) {
+        model.props.cells[rowId] = Object.create(null);
       }
-      if (model.cells[rowId]) {
-        model.cells[rowId][columnId] = {
+      if (model.props.cells[rowId]) {
+        model.props.cells[rowId][columnId] = {
           columnId,
           value,
         };
@@ -208,17 +208,17 @@ export function updateProperty(
   updater: ColumnUpdater,
   defaultValue?: Record<string, unknown>
 ) {
-  const index = model.columns.findIndex(v => v.id === id);
+  const index = model.props.columns.findIndex(v => v.id === id);
   if (index == null) {
     return;
   }
   model.doc.transact(() => {
-    const column = model.columns[index];
+    const column = model.props.columns[index];
     if (!column) {
       return;
     }
     const result = updater(column);
-    model.columns[index] = { ...defaultValue, ...column, ...result };
+    model.props.columns[index] = { ...defaultValue, ...column, ...result };
   });
   return id;
 }
@@ -229,7 +229,7 @@ export const updateView = <ViewData extends ViewBasicDataType>(
   update: (data: ViewData) => Partial<ViewData>
 ) => {
   model.doc.transact(() => {
-    model.views = model.views.map(v => {
+    model.props.views = model.props.views.map(v => {
       if (v.id !== id) {
         return v;
       }
diff --git a/blocksuite/affine/blocks/block-edgeless-text/src/commands/insert-edgeless-text.ts b/blocksuite/affine/blocks/block-edgeless-text/src/commands/insert-edgeless-text.ts
index 98b6b42b7c..44f5fb0517 100644
--- a/blocksuite/affine/blocks/block-edgeless-text/src/commands/insert-edgeless-text.ts
+++ b/blocksuite/affine/blocks/block-edgeless-text/src/commands/insert-edgeless-text.ts
@@ -60,7 +60,7 @@ export const insertEdgelessTextCommand: Command<
         if (!editing || id !== textId) {
           const textBlock = host.view.getBlock(textId);
           if (textBlock instanceof EdgelessTextBlockComponent) {
-            textBlock.model.hasMaxWidth = true;
+            textBlock.model.props.hasMaxWidth = true;
           }
 
           disposable.unsubscribe();
diff --git a/blocksuite/affine/blocks/block-edgeless-text/src/edgeless-text-block.ts b/blocksuite/affine/blocks/block-edgeless-text/src/edgeless-text-block.ts
index b0430887b4..dd1b65b182 100644
--- a/blocksuite/affine/blocks/block-edgeless-text/src/edgeless-text-block.ts
+++ b/blocksuite/affine/blocks/block-edgeless-text/src/edgeless-text-block.ts
@@ -43,7 +43,7 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
       return;
     }
 
-    if (!this.model.hasMaxWidth) {
+    if (!this.model.props.hasMaxWidth) {
       this._updateW();
     }
 
@@ -213,14 +213,14 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
       );
     });
     disposables.addFromEvent(this, 'compositionend', () => {
-      if (this.model.hasMaxWidth) {
+      if (this.model.props.hasMaxWidth) {
         composingWidth = EDGELESS_TEXT_BLOCK_MIN_WIDTH;
         return;
       }
       // when IME finish container will crash to a small width, so
       // we set a max width to prevent this
       this._textContainer.style.width = `${composingWidth}px`;
-      this.model.hasMaxWidth = true;
+      this.model.props.hasMaxWidth = true;
       requestAnimationFrame(() => {
         this._textContainer.style.width = '';
       });
@@ -237,11 +237,11 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
     const deltaX = scaledX - bound.x;
     const deltaY = scaledY - bound.y;
 
-    return `translate(${translateX + deltaX}px, ${translateY + deltaY}px) scale(${zoom * this.model.scale})`;
+    return `translate(${translateX + deltaX}px, ${translateY + deltaY}px) scale(${zoom * this.model.props.scale})`;
   }
 
   override getRenderingRect() {
-    const { xywh, scale, rotate, hasMaxWidth } = this.model;
+    const { xywh, scale, rotate, hasMaxWidth } = this.model.props;
     const bound = Bound.deserialize(xywh);
     const w = hasMaxWidth ? bound.w / scale : undefined;
 
@@ -257,7 +257,7 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
 
   override renderGfxBlock() {
     const { model } = this;
-    const { rotate, hasMaxWidth } = model;
+    const { rotate, hasMaxWidth } = model.props;
     const editing = this._editing;
     const containerStyle: StyleInfo = {
       transform: `rotate(${rotate}deg)`,
@@ -291,10 +291,10 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
   }
 
   override renderPageContent() {
-    const { fontFamily, fontStyle, fontWeight, textAlign } = this.model;
+    const { fontFamily, fontStyle, fontWeight, textAlign } = this.model.props;
     const color = this.std
       .get(ThemeProvider)
-      .generateColorProperty(this.model.color, '#000000');
+      .generateColorProperty(this.model.props.color, '#000000');
 
     const style = styleMap({
       '--edgeless-text-color': color,
diff --git a/blocksuite/affine/blocks/block-embed/src/common/render-linked-doc.ts b/blocksuite/affine/blocks/block-embed/src/common/render-linked-doc.ts
index 2f4e0b89ac..58a3f7e6d6 100644
--- a/blocksuite/affine/blocks/block-embed/src/common/render-linked-doc.ts
+++ b/blocksuite/affine/blocks/block-embed/src/common/render-linked-doc.ts
@@ -37,7 +37,7 @@ export function renderLinkedDocInCard(
   const linkedDoc = card.linkedDoc;
   if (!linkedDoc) {
     console.error(
-      `Trying to load page ${card.model.pageId} in linked page block, but the page is not found.`
+      `Trying to load page ${card.model.props.pageId} in linked page block, but the page is not found.`
     );
     return;
   }
@@ -62,7 +62,7 @@ async function renderPageAsBanner(card: EmbedSyncedDocCard) {
   const linkedDoc = card.linkedDoc;
   if (!linkedDoc) {
     console.error(
-      `Trying to load page ${card.model.pageId} in linked page block, but the page is not found.`
+      `Trying to load page ${card.model.props.pageId} in linked page block, but the page is not found.`
     );
     return;
   }
@@ -89,7 +89,7 @@ async function renderImageAsBanner(
   card: EmbedSyncedDocCard,
   image: BlockModel
 ) {
-  const sourceId = (image as ImageBlockModel).sourceId;
+  const sourceId = (image as ImageBlockModel).props.sourceId;
   if (!sourceId) return;
 
   const storage = card.linkedDoc?.blobSync;
@@ -131,7 +131,7 @@ async function renderNoteContent(
   const doc = card.linkedDoc;
   if (!doc) {
     console.error(
-      `Trying to load page ${card.model.pageId} in linked page block, but the page is not found.`
+      `Trying to load page ${card.model.props.pageId} in linked page block, but the page is not found.`
     );
     return;
   }
@@ -141,7 +141,7 @@ async function renderNoteContent(
     return;
   }
 
-  const cardStyle = card.model.style;
+  const cardStyle = card.model.props.style;
   const isHorizontal = cardStyle === 'horizontal';
   const allowFlavours = isHorizontal ? [] : [ImageBlockModel];
 
@@ -230,7 +230,7 @@ export function getNotesFromDoc(doc: Store) {
   const notes = doc.root?.children.filter(
     child =>
       matchModels(child, [NoteBlockModel]) &&
-      child.displayMode !== NoteDisplayMode.EdgelessOnly
+      child.props.displayMode !== NoteDisplayMode.EdgelessOnly
   );
 
   if (!notes || !notes.length) {
@@ -313,8 +313,8 @@ export function getTitleFromSelectedModels(selectedModels: DraftModel[]) {
     model: DraftModel
   ): model is DraftModel<ParagraphBlockModel> =>
     model.flavour === 'affine:paragraph';
-  if (isParagraph(firstBlock) && firstBlock.type.startsWith('h')) {
-    return firstBlock.text?.toString();
+  if (isParagraph(firstBlock) && firstBlock.props.type.startsWith('h')) {
+    return firstBlock.props.text.toString();
   }
   return undefined;
 }
diff --git a/blocksuite/affine/blocks/block-embed/src/configs/toolbar.ts b/blocksuite/affine/blocks/block-embed/src/configs/toolbar.ts
index 0257858980..35bb9faafd 100644
--- a/blocksuite/affine/blocks/block-embed/src/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/block-embed/src/configs/toolbar.ts
@@ -55,7 +55,7 @@ export function createBuiltinToolbarConfigForExternal(
           const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
           if (!model || !isExternalEmbedModel(model)) return null;
 
-          const { url } = model;
+          const { url } = model.props;
           const options = ctx.std
             .get(EmbedOptionProvider)
             .getEmbedBlockOptions(url);
@@ -75,7 +75,8 @@ export function createBuiltinToolbarConfigForExternal(
               const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
               if (!model || !isExternalEmbedModel(model)) return;
 
-              const { title, caption, url: link, parent } = model;
+              const { title, caption, url: link } = model.props;
+              const { parent } = model;
               const index = parent?.children.indexOf(model);
 
               const yText = new Y.Text();
@@ -107,7 +108,7 @@ export function createBuiltinToolbarConfigForExternal(
               const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
               if (!model || !isExternalEmbedModel(model)) return true;
 
-              const { url } = model;
+              const { url } = model.props;
               const options = ctx.std
                 .get(EmbedOptionProvider)
                 .getEmbedBlockOptions(url);
@@ -118,13 +119,14 @@ export function createBuiltinToolbarConfigForExternal(
               const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
               if (!model || !isExternalEmbedModel(model)) return;
 
-              const { url, caption, parent } = model;
+              const { url, caption } = model.props;
+              const { parent } = model;
               const index = parent?.children.indexOf(model);
               const options = ctx.std
                 .get(EmbedOptionProvider)
                 .getEmbedBlockOptions(url);
 
-              let { style } = model;
+              let { style } = model.props;
               let flavour = 'affine:bookmark';
 
               if (options?.viewType === 'card') {
@@ -166,7 +168,7 @@ export function createBuiltinToolbarConfigForExternal(
               const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
               if (!model || !isExternalEmbedModel(model)) return false;
 
-              const { url } = model;
+              const { url } = model.props;
               const options = ctx.std
                 .get(EmbedOptionProvider)
                 .getEmbedBlockOptions(url);
@@ -177,7 +179,7 @@ export function createBuiltinToolbarConfigForExternal(
               const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
               if (!model || !isExternalEmbedModel(model)) return false;
 
-              const { url } = model;
+              const { url } = model.props;
               const options = ctx.std
                 .get(EmbedOptionProvider)
                 .getEmbedBlockOptions(url);
@@ -188,7 +190,8 @@ export function createBuiltinToolbarConfigForExternal(
               const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
               if (!model || !isExternalEmbedModel(model)) return;
 
-              const { url, caption, parent } = model;
+              const { url, caption } = model.props;
+              const { parent } = model;
               const index = parent?.children.indexOf(model);
               const options = ctx.std
                 .get(EmbedOptionProvider)
@@ -197,7 +200,7 @@ export function createBuiltinToolbarConfigForExternal(
               if (options?.viewType !== 'embed') return;
 
               const { flavour, styles } = options;
-              let { style } = model;
+              let { style } = model.props;
 
               if (!styles.includes(style)) {
                 style =
@@ -231,7 +234,7 @@ export function createBuiltinToolbarConfigForExternal(
           const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
           if (!model || !isExternalEmbedModel(model)) return null;
 
-          const { url } = model;
+          const { url } = model.props;
           const viewType =
             ctx.std.get(EmbedOptionProvider).getEmbedBlockOptions(url)
               ?.viewType ?? 'card';
@@ -309,7 +312,7 @@ export function createBuiltinToolbarConfigForExternal(
               .actions=${actions}
               .context=${ctx}
               .toggle=${toggle}
-              .style$=${model.style$}
+              .style$=${model.props.style$}
             ></affine-card-style-dropdown-menu>`
           )}`;
         },
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-figma-block/embed-figma-block.ts b/blocksuite/affine/blocks/block-embed/src/embed-figma-block/embed-figma-block.ts
index 3bd6899646..cc36f0f60d 100644
--- a/blocksuite/affine/blocks/block-embed/src/embed-figma-block/embed-figma-block.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-figma-block/embed-figma-block.ts
@@ -22,7 +22,7 @@ export class EmbedFigmaBlockComponent extends EmbedBlockComponent<EmbedFigmaMode
   protected _isResizing = false;
 
   open = () => {
-    let link = this.model.url;
+    let link = this.model.props.url;
     if (!link.match(/^[a-zA-Z]+:\/\//)) {
       link = 'https://' + link;
     }
@@ -51,9 +51,9 @@ export class EmbedFigmaBlockComponent extends EmbedBlockComponent<EmbedFigmaMode
 
   override connectedCallback() {
     super.connectedCallback();
-    this._cardStyle = this.model.style;
+    this._cardStyle = this.model.props.style;
 
-    if (!this.model.title) {
+    if (!this.model.props.title) {
       this.doc.withoutTransact(() => {
         this.doc.updateBlock(this.model, {
           title: 'Figma',
@@ -90,7 +90,7 @@ export class EmbedFigmaBlockComponent extends EmbedBlockComponent<EmbedFigmaMode
   }
 
   override renderBlock() {
-    const { title, description, url } = this.model;
+    const { title, description, url } = this.model.props;
     const titleText = title ?? 'Figma';
 
     return this.renderEmbed(
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-github-block/embed-github-block.ts b/blocksuite/affine/blocks/block-embed/src/embed-github-block/embed-github-block.ts
index e38c6852b8..a97763243a 100644
--- a/blocksuite/affine/blocks/block-embed/src/embed-github-block/embed-github-block.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-github-block/embed-github-block.ts
@@ -31,7 +31,7 @@ export class EmbedGithubBlockComponent extends EmbedBlockComponent<
   override _cardStyle: (typeof EmbedGithubStyles)[number] = 'horizontal';
 
   open = () => {
-    let link = this.model.url;
+    let link = this.model.props.url;
     if (!link.match(/^[a-zA-Z]+:\/\//)) {
       link = 'https://' + link;
     }
@@ -75,11 +75,15 @@ export class EmbedGithubBlockComponent extends EmbedBlockComponent<
 
   override connectedCallback() {
     super.connectedCallback();
-    this._cardStyle = this.model.style;
+    this._cardStyle = this.model.props.style;
 
-    if (!this.model.owner || !this.model.repo || !this.model.githubId) {
+    if (
+      !this.model.props.owner ||
+      !this.model.props.repo ||
+      !this.model.props.githubId
+    ) {
       this.doc.withoutTransact(() => {
-        const url = this.model.url;
+        const url = this.model.props.url;
         const urlMatch = url.match(githubUrlRegex);
         if (urlMatch) {
           const [, owner, repo, githubType, githubId] = urlMatch;
@@ -94,7 +98,7 @@ export class EmbedGithubBlockComponent extends EmbedBlockComponent<
     }
 
     this.doc.withoutTransact(() => {
-      if (!this.model.description && !this.model.title) {
+      if (!this.model.props.description && !this.model.props.title) {
         this.refreshData();
       } else {
         this.refreshStatus();
@@ -123,7 +127,7 @@ export class EmbedGithubBlockComponent extends EmbedBlockComponent<
       description,
       image,
       style,
-    } = this.model;
+    } = this.model.props;
 
     const loading = this.loading;
     const theme = this.std.get(ThemeProvider).theme;
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-github-block/utils.ts b/blocksuite/affine/blocks/block-embed/src/embed-github-block/utils.ts
index e8a1673bea..9d01669859 100644
--- a/blocksuite/affine/blocks/block-embed/src/embed-github-block/utils.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-github-block/utils.ts
@@ -24,7 +24,7 @@ export async function queryEmbedGithubData(
 ): Promise<Partial<EmbedGithubBlockUrlData>> {
   const [githubApiData, openGraphData] = await Promise.all([
     queryEmbedGithubApiData(embedGithubModel, signal),
-    linkPreviewer.query(embedGithubModel.url, signal),
+    linkPreviewer.query(embedGithubModel.props.url, signal),
   ]);
   return { ...githubApiData, ...openGraphData };
 }
@@ -33,7 +33,7 @@ export async function queryEmbedGithubApiData(
   embedGithubModel: EmbedGithubModel,
   signal?: AbortSignal
 ): Promise<Partial<EmbedGithubBlockUrlData>> {
-  const { owner, repo, githubType, githubId } = embedGithubModel;
+  const { owner, repo, githubType, githubId } = embedGithubModel.props;
   let githubApiData: Partial<EmbedGithubBlockUrlData> = {};
 
   // github's public api has a rate limit of 60 requests per hour
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-html-block/components/fullscreen-toolbar.ts b/blocksuite/affine/blocks/block-embed/src/embed-html-block/components/fullscreen-toolbar.ts
index 7eda881411..f86a655a1a 100644
--- a/blocksuite/affine/blocks/block-embed/src/embed-html-block/components/fullscreen-toolbar.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-html-block/components/fullscreen-toolbar.ts
@@ -108,7 +108,7 @@ export class EmbedHtmlFullscreenToolbar extends LitElement {
 
     this.embedHtml.std.clipboard
       .writeToClipboard(items => {
-        items['text/plain'] = this.embedHtml.model.html ?? '';
+        items['text/plain'] = this.embedHtml.model.props.html ?? '';
         return items;
       })
       .then(() => {
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-html-block/configs/toolbar.ts b/blocksuite/affine/blocks/block-embed/src/embed-html-block/configs/toolbar.ts
index 8292585a45..977641d35a 100644
--- a/blocksuite/affine/blocks/block-embed/src/embed-html-block/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-html-block/configs/toolbar.ts
@@ -88,7 +88,7 @@ export const builtinToolbarConfig = {
             .actions=${actions}
             .context=${ctx}
             .toggle=${toggle}
-            .style$=${model.style$}
+            .style=${model.props.style$}
           ></affine-card-style-dropdown-menu>`
         )}`;
       },
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-html-block/embed-html-block.ts b/blocksuite/affine/blocks/block-embed/src/embed-html-block/embed-html-block.ts
index c6c97acbd3..2aca9354b7 100644
--- a/blocksuite/affine/blocks/block-embed/src/embed-html-block/embed-html-block.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-html-block/embed-html-block.ts
@@ -49,7 +49,7 @@ export class EmbedHtmlBlockComponent extends EmbedBlockComponent<EmbedHtmlModel>
 
   override connectedCallback() {
     super.connectedCallback();
-    this._cardStyle = this.model.style;
+    this._cardStyle = this.model.props.style;
 
     // this is required to prevent iframe from capturing pointer events
     this.disposables.add(
@@ -80,11 +80,11 @@ export class EmbedHtmlBlockComponent extends EmbedBlockComponent<EmbedHtmlModel>
           margin: 0;
         }
       </style>
-      ${this.model.html}
+      ${this.model.props.html}
     `;
 
     return this.renderEmbed(() => {
-      if (!this.model.html) {
+      if (!this.model.props.html) {
         return html` <div class="affine-html-empty">Empty</div>`;
       }
       return html`
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/components/embed-iframe-link-edit-popup.ts b/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/components/embed-iframe-link-edit-popup.ts
index 1f3e3e3ada..6eb846e63e 100644
--- a/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/components/embed-iframe-link-edit-popup.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/components/embed-iframe-link-edit-popup.ts
@@ -155,7 +155,7 @@ export class EmbedIframeLinkEditPopup extends SignalWatcher(
 
   override render() {
     const isInputEmpty = this._isInputEmpty();
-    const { url$ } = this.model;
+    const { url$ } = this.model.props;
 
     return html`
       <div class="embed-iframe-link-edit-popup">
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/configs/toolbar.ts b/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/configs/toolbar.ts
index 5f0b4ba5f5..833cfeb9e4 100644
--- a/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/configs/toolbar.ts
@@ -49,7 +49,8 @@ export const builtinToolbarConfig = {
             );
             if (!model) return;
 
-            const { title, caption, url, parent } = model;
+            const { title, caption, url } = model.props;
+            const { parent } = model;
             const index = parent?.children.indexOf(model);
 
             const yText = new Y.Text();
@@ -84,7 +85,8 @@ export const builtinToolbarConfig = {
             );
             if (!model) return;
 
-            const { url, caption, parent } = model;
+            const { url, caption } = model.props;
+            const { parent } = model;
             const index = parent?.children.indexOf(model);
 
             const flavour = 'affine:bookmark';
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/embed-edgeless-iframe-block.ts b/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/embed-edgeless-iframe-block.ts
index 09626fcb67..4298d8ac97 100644
--- a/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/embed-edgeless-iframe-block.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/embed-edgeless-iframe-block.ts
@@ -37,8 +37,8 @@ export class EmbedEdgelessIframeBlockComponent extends toGfxBlockComponent(
       return nothing;
     }
 
-    const bound = Bound.deserialize(this.model.xywh$.value);
-    const scale = this.model.scale$.value;
+    const bound = Bound.deserialize(this.model.props.xywh$.value);
+    const scale = this.model.props.scale$.value;
     const width = bound.w / scale;
     const height = bound.h / scale;
     const style = {
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/embed-iframe-block.ts b/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/embed-iframe-block.ts
index 8492f0d0f7..45c7d56ad5 100644
--- a/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/embed-iframe-block.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/embed-iframe-block.ts
@@ -75,7 +75,7 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
   }
 
   open = () => {
-    const link = this.model.url;
+    const link = this.model.props.url;
     window.open(link, '_blank');
   };
 
@@ -95,7 +95,7 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
         );
       }
 
-      const { url } = this.model;
+      const { url } = this.model.props;
       if (!url) {
         throw new BlockSuiteError(
           ErrorCode.ValueNotExists,
@@ -110,7 +110,7 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
       ]);
 
       // if the embed data is not found, and the iframeUrl is not set, throw an error
-      const currentIframeUrl = this.model.iframeUrl;
+      const currentIframeUrl = this.model.props.iframeUrl;
       if (!embedData && !currentIframeUrl) {
         throw new BlockSuiteError(
           ErrorCode.ValueNotExists,
@@ -172,7 +172,7 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
   };
 
   private readonly _renderIframe = () => {
-    const { iframeUrl } = this.model;
+    const { iframeUrl } = this.model.props;
     const {
       widthPercent,
       heightInNote,
@@ -226,13 +226,13 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
 
     this.contentEditable = 'false';
 
-    if (!this.model.iframeUrl) {
+    if (!this.model.props.iframeUrl) {
       this.doc.withoutTransact(() => {
         this.refreshData().catch(console.error);
       });
     } else {
       // update iframe options, to ensure the iframe is rendered with the correct options
-      this._updateIframeOptions(this.model.url);
+      this._updateIframeOptions(this.model.props.url);
       this.status$.value = 'success';
     }
 
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-linked-doc-block/configs/toolbar.ts b/blocksuite/affine/blocks/block-embed/src/embed-linked-doc-block/configs/toolbar.ts
index 503a8bd8b4..f4a7d5924a 100644
--- a/blocksuite/affine/blocks/block-embed/src/embed-linked-doc-block/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-linked-doc-block/configs/toolbar.ts
@@ -44,10 +44,10 @@ export const builtinToolbarConfig = {
         if (!component) return null;
 
         const model = component.model;
-        if (!model.title) return null;
+        if (!model.props.title) return null;
 
         const originalTitle =
-          ctx.workspace.getDoc(model.pageId)?.meta?.title || 'Untitled';
+          ctx.workspace.getDoc(model.props.pageId)?.meta?.title || 'Untitled';
 
         return html`<affine-linked-doc-title
           .title=${originalTitle}
@@ -99,10 +99,10 @@ export const builtinToolbarConfig = {
             const model = component.model;
 
             // same doc
-            if (model.pageId === ctx.store.id) return true;
+            if (model.props.pageId === ctx.store.id) return true;
 
             // linking to block
-            if (referenceToNode(model)) return true;
+            if (referenceToNode(model.props)) return true;
 
             return false;
           },
@@ -197,7 +197,7 @@ export const builtinToolbarConfig = {
             .actions=${actions}
             .context=${ctx}
             .toggle=${toggle}
-            .style$=${model.style$}
+            .style$=${model.props.style$}
           ></affine-card-style-dropdown-menu>`
         )}`;
       },
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-linked-doc-block/embed-edgeless-linked-doc-block.ts b/blocksuite/affine/blocks/block-embed/src/embed-linked-doc-block/embed-edgeless-linked-doc-block.ts
index a30de9ed21..e04095918b 100644
--- a/blocksuite/affine/blocks/block-embed/src/embed-linked-doc-block/embed-edgeless-linked-doc-block.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-linked-doc-block/embed-edgeless-linked-doc-block.ts
@@ -20,7 +20,8 @@ export class EmbedEdgelessLinkedDocBlockComponent extends toEdgelessEmbedBlock(
   EmbedLinkedDocBlockComponent
 ) {
   override convertToEmbed = () => {
-    const { id, doc, caption, xywh } = this.model;
+    const { caption, xywh } = this.model.props;
+    const { doc, id } = this.model;
 
     const style = 'syncedDoc';
     const bound = Bound.deserialize(xywh);
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-linked-doc-block/embed-linked-doc-block.ts b/blocksuite/affine/blocks/block-embed/src/embed-linked-doc-block/embed-linked-doc-block.ts
index 97142bde9e..ed897421e1 100644
--- a/blocksuite/affine/blocks/block-embed/src/embed-linked-doc-block/embed-linked-doc-block.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-linked-doc-block/embed-linked-doc-block.ts
@@ -102,7 +102,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
     }
 
     if (!this.isError) {
-      const cardStyle = this.model.style;
+      const cardStyle = this.model.props.style;
       if (cardStyle === 'horizontal' || cardStyle === 'vertical') {
         renderLinkedDocInCard(this);
       }
@@ -118,7 +118,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
   };
 
   private readonly _setDocUpdatedAt = () => {
-    const meta = this.doc.workspace.meta.getDocMeta(this.model.pageId);
+    const meta = this.doc.workspace.meta.getDocMeta(this.model.props.pageId);
     if (meta) {
       const date = meta.updatedDate || meta.createDate;
       this._docUpdatedAt = new Date(date);
@@ -130,7 +130,8 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
   convertToEmbed = () => {
     if (this._referenceToNode) return;
 
-    const { doc, caption, parent } = this.model;
+    const { caption } = this.model.props;
+    const { parent, doc } = this.model;
     const index = parent?.children.indexOf(this.model);
 
     const blockId = doc.addBlock(
@@ -181,7 +182,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
   };
 
   referenceInfo$ = computed(() => {
-    const { pageId, params, title$, description$ } = this.model;
+    const { pageId, params, title$, description$ } = this.model.props;
     return cloneReferenceInfo({
       pageId,
       params,
@@ -229,7 +230,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
   });
 
   get docTitle() {
-    return this.model.title || this.linkedDoc?.meta?.title || 'Untitled';
+    return this.model.props.title || this.linkedDoc?.meta?.title || 'Untitled';
   }
 
   get editorMode() {
@@ -237,8 +238,8 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
   }
 
   get linkedDoc() {
-    return this.std.workspace.getDoc(this.model.pageId, {
-      id: this.model.pageId,
+    return this.std.workspace.getDoc(this.model.props.pageId, {
+      id: this.model.props.pageId,
     });
   }
 
@@ -275,8 +276,8 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
   override connectedCallback() {
     super.connectedCallback();
 
-    this._cardStyle = this.model.style;
-    this._referenceToNode = referenceToNode(this.model);
+    this._cardStyle = this.model.props.style;
+    this._referenceToNode = referenceToNode(this.model.props);
 
     this._load().catch(e => {
       console.error(e);
@@ -325,14 +326,14 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
       );
 
       if (this._referenceToNode) {
-        this._linkedDocMode = this.model.params?.mode ?? 'page';
+        this._linkedDocMode = this.model.props.params?.mode ?? 'page';
       } else {
         const docMode = this.std.get(DocModeProvider);
-        this._linkedDocMode = docMode.getPrimaryMode(this.model.pageId);
+        this._linkedDocMode = docMode.getPrimaryMode(this.model.props.pageId);
         this.disposables.add(
           docMode.onPrimaryModeChange(mode => {
             this._linkedDocMode = mode;
-          }, this.model.pageId)
+          }, this.model.props.pageId)
         );
       }
     }
@@ -340,7 +341,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
     this.disposables.add(
       this.model.propsUpdated.subscribe(({ key }) => {
         if (key === 'style') {
-          this._cardStyle = this.model.style;
+          this._cardStyle = this.model.props.style;
         }
         if (key === 'pageId' || key === 'style') {
           this._load().catch(e => {
@@ -395,7 +396,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
         ? LoadingIcon
         : this.icon$.value;
     const title = isLoading ? 'Loading...' : this.title$;
-    const description = this.model.description$;
+    const description = this.model.props.description$;
 
     const showDefaultNoteContent = isError || isLoading || isDeleted || isEmpty;
     const defaultNoteContent = isError
@@ -503,7 +504,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
   override updated() {
     // update card style when linked doc deleted
     const linkedDoc = this.linkedDoc;
-    const { xywh, style } = this.model;
+    const { xywh, style } = this.model.props;
     const bound = Bound.deserialize(xywh);
     if (linkedDoc && style === 'horizontalThin') {
       bound.w = EMBED_CARD_WIDTH.horizontal;
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-loom-block/embed-loom-block.ts b/blocksuite/affine/blocks/block-embed/src/embed-loom-block/embed-loom-block.ts
index f29011446f..1cc5bbba59 100644
--- a/blocksuite/affine/blocks/block-embed/src/embed-loom-block/embed-loom-block.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-loom-block/embed-loom-block.ts
@@ -27,7 +27,7 @@ export class EmbedLoomBlockComponent extends EmbedBlockComponent<
   protected _isResizing = false;
 
   open = () => {
-    let link = this.model.url;
+    let link = this.model.props.url;
     if (!link.match(/^[a-zA-Z]+:\/\//)) {
       link = 'https://' + link;
     }
@@ -60,11 +60,11 @@ export class EmbedLoomBlockComponent extends EmbedBlockComponent<
 
   override connectedCallback() {
     super.connectedCallback();
-    this._cardStyle = this.model.style;
+    this._cardStyle = this.model.props.style;
 
-    if (!this.model.videoId) {
+    if (!this.model.props.videoId) {
       this.doc.withoutTransact(() => {
-        const url = this.model.url;
+        const url = this.model.props.url;
         const urlMatch = url.match(loomUrlRegex);
         if (urlMatch) {
           const [, videoId] = urlMatch;
@@ -75,7 +75,7 @@ export class EmbedLoomBlockComponent extends EmbedBlockComponent<
       });
     }
 
-    if (!this.model.description && !this.model.title) {
+    if (!this.model.props.description && !this.model.props.title) {
       this.doc.withoutTransact(() => {
         this.refreshData();
       });
@@ -111,7 +111,7 @@ export class EmbedLoomBlockComponent extends EmbedBlockComponent<
   }
 
   override renderBlock() {
-    const { image, title = 'Loom', description, videoId } = this.model;
+    const { image, title = 'Loom', description, videoId } = this.model.props;
 
     const loading = this.loading;
     const theme = this.std.get(ThemeProvider).theme;
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-loom-block/utils.ts b/blocksuite/affine/blocks/block-embed/src/embed-loom-block/utils.ts
index 3fa81360c8..c8f6c492a0 100644
--- a/blocksuite/affine/blocks/block-embed/src/embed-loom-block/utils.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-loom-block/utils.ts
@@ -12,7 +12,7 @@ export async function queryEmbedLoomData(
   embedLoomModel: EmbedLoomModel,
   signal?: AbortSignal
 ): Promise<Partial<EmbedLoomBlockUrlData>> {
-  const url = embedLoomModel.url;
+  const url = embedLoomModel.props.url;
 
   const loomEmbedData: Partial<EmbedLoomBlockUrlData> =
     await queryLoomOEmbedData(url, signal);
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-synced-doc-block/configs/toolbar.ts b/blocksuite/affine/blocks/block-embed/src/embed-synced-doc-block/configs/toolbar.ts
index d57a11c809..75039c8f99 100644
--- a/blocksuite/affine/blocks/block-embed/src/embed-synced-doc-block/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-synced-doc-block/configs/toolbar.ts
@@ -65,7 +65,7 @@ export const builtinToolbarConfig = {
             return {
               ...action,
               disabled: shouldOpenInActiveView
-                ? component.model.pageId === ctx.store.id
+                ? component.model.props.pageId === ctx.store.id
                 : false,
               when: allowed,
               run: (_ctx: ToolbarContext) =>
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-synced-doc-block/embed-edgeless-synced-doc-block.ts b/blocksuite/affine/blocks/block-embed/src/embed-synced-doc-block/embed-edgeless-synced-doc-block.ts
index 72b3b177c7..c7417fb2bb 100644
--- a/blocksuite/affine/blocks/block-embed/src/embed-synced-doc-block/embed-edgeless-synced-doc-block.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-synced-doc-block/embed-edgeless-synced-doc-block.ts
@@ -37,7 +37,7 @@ export class EmbedEdgelessSyncedDocBlockComponent extends toEdgelessEmbedBlock(
       position: 'relative',
       width: '100%',
     });
-    const modelScale = this.model.scale ?? 1;
+    const modelScale = this.model.props.scale ?? 1;
     const bound = Bound.deserialize(this.model.xywh);
     const width = bound.w / modelScale;
     const height = bound.h / modelScale;
@@ -58,7 +58,7 @@ export class EmbedEdgelessSyncedDocBlockComponent extends toEdgelessEmbedBlock(
     }
     const theme = this.isPageMode ? appTheme : edgelessTheme;
 
-    const scale = this.model.scale ?? 1;
+    const scale = this.model.props.scale ?? 1;
 
     this.dataset.nestedEditor = '';
 
@@ -121,7 +121,8 @@ export class EmbedEdgelessSyncedDocBlockComponent extends toEdgelessEmbedBlock(
   };
 
   override convertToCard = (aliasInfo?: AliasInfo) => {
-    const { id, doc, caption, xywh } = this.model;
+    const { id, doc, xywh } = this.model;
+    const { caption } = this.model.props;
 
     const style = 'vertical';
     const bound = Bound.deserialize(xywh);
@@ -155,7 +156,7 @@ export class EmbedEdgelessSyncedDocBlockComponent extends toEdgelessEmbedBlock(
   };
 
   override renderGfxBlock() {
-    const { style, xywh } = this.model;
+    const { style, xywh } = this.model.props;
     const bound = Bound.deserialize(xywh);
 
     this.embedContainerStyle.width = `${bound.w}px`;
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-synced-doc-block/embed-synced-doc-block.ts b/blocksuite/affine/blocks/block-embed/src/embed-synced-doc-block/embed-synced-doc-block.ts
index 1e395314f2..bb8f544bb6 100644
--- a/blocksuite/affine/blocks/block-embed/src/embed-synced-doc-block/embed-synced-doc-block.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-synced-doc-block/embed-synced-doc-block.ts
@@ -280,7 +280,8 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
   });
 
   convertToCard = (aliasInfo?: AliasInfo) => {
-    const { doc, caption } = this.model;
+    const { doc } = this.model;
+    const { caption } = this.model.props;
 
     const parent = doc.getParent(this.model);
     if (!parent) {
@@ -343,14 +344,14 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
   };
 
   icon$ = computed(() => {
-    const { pageId, params } = this.model;
+    const { pageId, params } = this.model.props;
     return this.std
       .get(DocDisplayMetaProvider)
       .icon(pageId, { params, referenced: true }).value;
   });
 
   open = (event?: Partial<DocLinkClickedEvent>) => {
-    const pageId = this.model.pageId;
+    const pageId = this.model.props.pageId;
     if (pageId === this.doc.id) return;
 
     this.std
@@ -366,7 +367,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
   };
 
   title$ = computed(() => {
-    const { pageId, params } = this.model;
+    const { pageId, params } = this.model.props;
     return this.std
       .get(DocDisplayMetaProvider)
       .title(pageId, { params, referenced: true });
@@ -402,19 +403,20 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
   }
 
   get referenceInfo(): ReferenceInfo {
-    return cloneReferenceInfo(this.model);
+    return cloneReferenceInfo(this.model.props);
   }
 
   get syncedDoc() {
     const options: GetBlocksOptions = { readonly: true };
     if (this.isPageMode) options.query = this._pageFilter;
-    return this.std.workspace.getDoc(this.model.pageId, options);
+    return this.std.workspace.getDoc(this.model.props.pageId, options);
   }
 
   private _checkCycle() {
     let editorHost: EditorHost | null = this.host;
     while (editorHost && !this._cycle) {
-      this._cycle = !!editorHost && editorHost.doc.id === this.model.pageId;
+      this._cycle =
+        !!editorHost && editorHost.doc.id === this.model.props.pageId;
       editorHost = editorHost.parentElement?.closest('editor-host') ?? null;
     }
   }
@@ -483,7 +485,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
   }
 
   private _setDocUpdatedAt() {
-    const meta = this.doc.workspace.meta.getDocMeta(this.model.pageId);
+    const meta = this.doc.workspace.meta.getDocMeta(this.model.props.pageId);
     if (meta) {
       const date = meta.updatedDate || meta.createDate;
       this._docUpdatedAt = new Date(date);
@@ -496,7 +498,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
 
   override connectedCallback() {
     super.connectedCallback();
-    this._cardStyle = this.model.style;
+    this._cardStyle = this.model.props.style;
 
     this.style.display = 'block';
     this._load().catch(e => {
@@ -526,13 +528,13 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
 
     if (!this.linkedMode) {
       const docMode = this.std.get(DocModeProvider);
-      this.syncedDocMode = docMode.getPrimaryMode(this.model.pageId);
+      this.syncedDocMode = docMode.getPrimaryMode(this.model.props.pageId);
       this._isEmptySyncedDoc = isEmptyDoc(this.syncedDoc, this.editorMode);
       this.disposables.add(
         docMode.onPrimaryModeChange(mode => {
           this.syncedDocMode = mode;
           this._isEmptySyncedDoc = isEmptyDoc(this.syncedDoc, this.editorMode);
-        }, this.model.pageId)
+        }, this.model.props.pageId)
       );
     }
 
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-youtube-block/embed-youtube-block.ts b/blocksuite/affine/blocks/block-embed/src/embed-youtube-block/embed-youtube-block.ts
index 5f1b00014c..474e818459 100644
--- a/blocksuite/affine/blocks/block-embed/src/embed-youtube-block/embed-youtube-block.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-youtube-block/embed-youtube-block.ts
@@ -30,7 +30,7 @@ export class EmbedYoutubeBlockComponent extends EmbedBlockComponent<
   protected _isResizing = false;
 
   open = () => {
-    let link = this.model.url;
+    let link = this.model.props.url;
     if (!link.match(/^[a-zA-Z]+:\/\//)) {
       link = 'https://' + link;
     }
@@ -63,11 +63,11 @@ export class EmbedYoutubeBlockComponent extends EmbedBlockComponent<
 
   override connectedCallback() {
     super.connectedCallback();
-    this._cardStyle = this.model.style;
+    this._cardStyle = this.model.props.style;
 
-    if (!this.model.videoId) {
+    if (!this.model.props.videoId) {
       this.doc.withoutTransact(() => {
-        const url = this.model.url;
+        const url = this.model.props.url;
         const urlMatch = url.match(youtubeUrlRegex);
         if (urlMatch) {
           const [, videoId] = urlMatch;
@@ -78,7 +78,7 @@ export class EmbedYoutubeBlockComponent extends EmbedBlockComponent<
       });
     }
 
-    if (!this.model.description && !this.model.title) {
+    if (!this.model.props.description && !this.model.props.title) {
       this.doc.withoutTransact(() => {
         this.refreshData();
       });
@@ -125,7 +125,7 @@ export class EmbedYoutubeBlockComponent extends EmbedBlockComponent<
       creator,
       creatorImage,
       videoId,
-    } = this.model;
+    } = this.model.props;
 
     const loading = this.loading;
     const theme = this.std.get(ThemeProvider).theme;
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-youtube-block/utils.ts b/blocksuite/affine/blocks/block-embed/src/embed-youtube-block/utils.ts
index dd4dfa14ea..e6b378d0c0 100644
--- a/blocksuite/affine/blocks/block-embed/src/embed-youtube-block/utils.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-youtube-block/utils.ts
@@ -12,7 +12,7 @@ export async function queryEmbedYoutubeData(
   linkPreviewer: LinkPreviewerService,
   signal?: AbortSignal
 ): Promise<Partial<EmbedYoutubeBlockUrlData>> {
-  const url = embedYoutubeModel.url;
+  const url = embedYoutubeModel.props.url;
 
   const [videoOpenGraphData, videoOEmbedData] = await Promise.all([
     linkPreviewer.query(url, signal),
diff --git a/blocksuite/affine/blocks/block-frame/src/frame-block.ts b/blocksuite/affine/blocks/block-frame/src/frame-block.ts
index 93c938a958..1693532574 100644
--- a/blocksuite/affine/blocks/block-frame/src/frame-block.ts
+++ b/blocksuite/affine/blocks/block-frame/src/frame-block.ts
@@ -56,7 +56,7 @@ export class FrameBlockComponent extends GfxBlockComponent<FrameBlockModel> {
     const { model, showBorder, std } = this;
     const backgroundColor = std
       .get(ThemeProvider)
-      .generateColorProperty(model.background, DefaultTheme.transparent);
+      .generateColorProperty(model.props.background, DefaultTheme.transparent);
     const _isNavigator =
       this.gfx.tool.currentToolName$.value === 'frameNavigator';
     const frameIndex = this.gfx.layer.getZIndex(model);
diff --git a/blocksuite/affine/blocks/block-frame/src/frame-manager.ts b/blocksuite/affine/blocks/block-frame/src/frame-manager.ts
index 7710fe4c07..7bfc4849f8 100644
--- a/blocksuite/affine/blocks/block-frame/src/frame-manager.ts
+++ b/blocksuite/affine/blocks/block-frame/src/frame-manager.ts
@@ -154,7 +154,9 @@ export class EdgelessFrameManager extends GfxExtension {
   }
 
   static framePresentationComparator<
-    T extends FrameBlockModel | { index: string; presentationIndex?: string },
+    T extends
+      | FrameBlockModel
+      | { props: { index: string; presentationIndex?: string } },
   >(a: T, b: T) {
     function stringCompare(a: string, b: string) {
       if (a < b) return -1;
@@ -162,29 +164,40 @@ export class EdgelessFrameManager extends GfxExtension {
       return 0;
     }
 
+    const isModel = (
+      x:
+        | FrameBlockModel
+        | { props: { index: string; presentationIndex?: string } }
+    ): x is FrameBlockModel => {
+      return 'presentationIndex$' in x;
+    };
+
     if (
-      'presentationIndex$' in a &&
-      'presentationIndex$' in b &&
-      a.presentationIndex$.value &&
-      b.presentationIndex$.value
+      isModel(a) &&
+      isModel(b) &&
+      a.props.presentationIndex$.value &&
+      b.props.presentationIndex$.value
     ) {
       return stringCompare(
-        a.presentationIndex$.value,
-        b.presentationIndex$.value
+        a.props.presentationIndex$.value,
+        b.props.presentationIndex$.value
       );
-    } else if (a.presentationIndex && b.presentationIndex) {
-      return stringCompare(a.presentationIndex, b.presentationIndex);
-    } else if (a.presentationIndex) {
+    } else if (a.props.presentationIndex && b.props.presentationIndex) {
+      return stringCompare(
+        a.props.presentationIndex,
+        b.props.presentationIndex
+      );
+    } else if (a.props.presentationIndex) {
       return -1;
-    } else if (b.presentationIndex) {
+    } else if (b.props.presentationIndex) {
       return 1;
     } else {
-      return stringCompare(a.index, b.index);
+      return stringCompare(a.props.index, b.props.index);
     }
   }
 
   private _addChildrenToLegacyFrame(frame: FrameBlockModel) {
-    if (frame.childElementIds !== undefined) return;
+    if (frame.props.childElementIds !== undefined) return;
     const elements = this.getElementsInFrameBound(frame);
     const childElements = elements.filter(
       element => this.getParentFrame(element) === null && element !== frame
@@ -281,7 +294,7 @@ export class EdgelessFrameManager extends GfxExtension {
   addElementsToFrame(frame: FrameBlockModel, elements: GfxModel[]) {
     if (frame.isLocked()) return;
 
-    if (frame.childElementIds === undefined) {
+    if (frame.props.childElementIds === undefined) {
       this._addChildrenToLegacyFrame(frame);
     }
 
@@ -369,7 +382,7 @@ export class EdgelessFrameManager extends GfxExtension {
 
   generatePresentationIndex() {
     const before =
-      this.frames[this.frames.length - 1]?.presentationIndex ?? null;
+      this.frames[this.frames.length - 1]?.props.presentationIndex ?? null;
 
     return generateKeyBetweenV2(before, null);
   }
@@ -380,7 +393,7 @@ export class EdgelessFrameManager extends GfxExtension {
    * 2. Return all child elements of the frame if `childElements` exists.
    */
   getChildElementsInFrame(frame: FrameBlockModel): GfxModel[] {
-    if (frame.childElementIds === undefined) {
+    if (frame.props.childElementIds === undefined) {
       return this.getElementsInFrameBound(frame).filter(
         element => this.getParentFrame(element) !== null
       );
@@ -431,24 +444,25 @@ export class EdgelessFrameManager extends GfxExtension {
   refreshLegacyFrameOrder() {
     const frames = this.frames.splice(0, this.frames.length);
 
-    let splitIndex = frames.findIndex(frame => frame.presentationIndex);
+    let splitIndex = frames.findIndex(frame => frame.props.presentationIndex);
     if (splitIndex === 0) return;
 
     if (splitIndex === -1) splitIndex = frames.length;
 
     let afterPreIndex =
-      frames[splitIndex]?.presentationIndex || generateKeyBetweenV2(null, null);
+      frames[splitIndex]?.props.presentationIndex ||
+      generateKeyBetweenV2(null, null);
 
     for (let index = splitIndex - 1; index >= 0; index--) {
       const preIndex = generateKeyBetweenV2(null, afterPreIndex);
-      frames[index].presentationIndex = preIndex;
+      frames[index].props.presentationIndex = preIndex;
       afterPreIndex = preIndex;
     }
   }
 
   removeAllChildrenFromFrame(frame: FrameBlockModel) {
     this.gfx.doc.transact(() => {
-      frame.childElementIds = {};
+      frame.props.childElementIds = {};
     });
   }
 
diff --git a/blocksuite/affine/blocks/block-image/src/components/image-block-fallback.ts b/blocksuite/affine/blocks/block-image/src/components/image-block-fallback.ts
index 94332c3c1c..11d03b603e 100644
--- a/blocksuite/affine/blocks/block-image/src/components/image-block-fallback.ts
+++ b/blocksuite/affine/blocks/block-image/src/components/image-block-fallback.ts
@@ -94,8 +94,8 @@ export class ImageBlockFallbackCard extends WithDisposable(ShadowlessElement) {
         : 'Image';
 
     const size =
-      !!model.size && model.size > 0
-        ? humanFileSize(model.size, true, 0)
+      !!model.props.size && model.props.size > 0
+        ? humanFileSize(model.props.size, true, 0)
         : null;
 
     return html`
diff --git a/blocksuite/affine/blocks/block-image/src/components/page-image-block.ts b/blocksuite/affine/blocks/block-image/src/components/page-image-block.ts
index e8fe769110..d4a80d34be 100644
--- a/blocksuite/affine/blocks/block-image/src/components/page-image-block.ts
+++ b/blocksuite/affine/blocks/block-image/src/components/page-image-block.ts
@@ -249,7 +249,7 @@ export class ImageBlockPageComponent extends WithDisposable(ShadowlessElement) {
       };
     }
 
-    const { width, height } = this._model;
+    const { width, height } = this._model.props;
     if (!width || !height) {
       return {
         width: 'unset',
diff --git a/blocksuite/affine/blocks/block-image/src/image-edgeless-block.ts b/blocksuite/affine/blocks/block-image/src/image-edgeless-block.ts
index 19cee0cae6..ce8d840d9a 100644
--- a/blocksuite/affine/blocks/block-image/src/image-edgeless-block.ts
+++ b/blocksuite/affine/blocks/block-image/src/image-edgeless-block.ts
@@ -42,7 +42,7 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
     this.retryCount = 0;
     fetchImageBlob(this)
       .then(() => {
-        const { width, height } = this.model;
+        const { width, height } = this.model.props;
         if ((!width || !height) && this.blob) {
           return resetImageSize(this);
         }
diff --git a/blocksuite/affine/blocks/block-image/src/utils.ts b/blocksuite/affine/blocks/block-image/src/utils.ts
index 7e13bfb050..6d6e87fada 100644
--- a/blocksuite/affine/blocks/block-image/src/utils.ts
+++ b/blocksuite/affine/blocks/block-image/src/utils.ts
@@ -97,7 +97,7 @@ export async function uploadBlobForImage(
 }
 
 async function getImageBlob(model: ImageBlockModel) {
-  const sourceId = model.sourceId;
+  const sourceId = model.props.sourceId;
   if (!sourceId) {
     return null;
   }
@@ -131,7 +131,7 @@ export async function fetchImageBlob(
   block: ImageBlockComponent | ImageEdgelessBlockComponent
 ) {
   try {
-    if (block.model.sourceId !== block.lastSourceId || !block.blobUrl) {
+    if (block.model.props.sourceId !== block.lastSourceId || !block.blobUrl) {
       block.loading = true;
       block.error = false;
       block.blob = undefined;
@@ -145,7 +145,8 @@ export async function fetchImageBlob(
     }
 
     const { model } = block;
-    const { id, sourceId, doc } = model;
+    const { sourceId } = model.props;
+    const { id, doc } = model;
 
     if (isImageUploading(id)) {
       return;
@@ -405,7 +406,7 @@ export async function turnImageIntoCardView(
   }
 
   const model = block.model;
-  const sourceId = model.sourceId;
+  const sourceId = model.props.sourceId;
   const blob = await getImageBlob(model);
   if (!sourceId || !blob) {
     console.error('Image data not available');
@@ -413,14 +414,17 @@ export async function turnImageIntoCardView(
   }
 
   const { saveImageData, getAttachmentData } = withTempBlobData();
-  saveImageData(sourceId, { width: model.width, height: model.height });
+  saveImageData(sourceId, {
+    width: model.props.width,
+    height: model.props.height,
+  });
   const attachmentConvertData = getAttachmentData(sourceId);
   const attachmentProp: Partial<AttachmentBlockProps> = {
     sourceId,
     name: DEFAULT_ATTACHMENT_NAME,
     size: blob.size,
     type: blob.type,
-    caption: model.caption,
+    caption: model.props.caption,
     ...attachmentConvertData,
   };
   transformModel(model, 'affine:attachment', attachmentProp);
diff --git a/blocksuite/affine/blocks/block-latex/src/latex-block.ts b/blocksuite/affine/blocks/block-latex/src/latex-block.ts
index 04392c6696..1cceb6bd90 100644
--- a/blocksuite/affine/blocks/block-latex/src/latex-block.ts
+++ b/blocksuite/affine/blocks/block-latex/src/latex-block.ts
@@ -43,7 +43,7 @@ export class LatexBlockComponent extends CaptionedBlockComponent<LatexBlockModel
 
     disposables.add(
       effect(() => {
-        const latex = this.model.latex$.value;
+        const latex = this.model.props.latex$.value;
 
         katexContainer.replaceChildren();
         // @ts-expect-error lit hack won't fix
@@ -119,7 +119,7 @@ export class LatexBlockComponent extends CaptionedBlockComponent<LatexBlockModel
     const portal = createLitPortal({
       template: html`<latex-editor-menu
         .std=${this.std}
-        .latexSignal=${this.model.latex$}
+        .latexSignal=${this.model.props.latex$}
         .abortController=${this._editorAbortController}
       ></latex-editor-menu>`,
       container: this.host,
diff --git a/blocksuite/affine/blocks/block-list/src/commands/indent-list.ts b/blocksuite/affine/blocks/block-list/src/commands/indent-list.ts
index b956e0ced3..8635cda9ff 100644
--- a/blocksuite/affine/blocks/block-list/src/commands/indent-list.ts
+++ b/blocksuite/affine/blocks/block-list/src/commands/indent-list.ts
@@ -127,7 +127,7 @@ export const indentListCommand: Command<{
   if (
     nearestHeading &&
     matchModels(nearestHeading, [ParagraphBlockModel]) &&
-    nearestHeading.collapsed
+    nearestHeading.props.collapsed
   ) {
     store.updateBlock(nearestHeading, {
       collapsed: false,
diff --git a/blocksuite/affine/blocks/block-list/src/commands/split-list.ts b/blocksuite/affine/blocks/block-list/src/commands/split-list.ts
index 0c131e8baa..919ae9084b 100644
--- a/blocksuite/affine/blocks/block-list/src/commands/split-list.ts
+++ b/blocksuite/affine/blocks/block-list/src/commands/split-list.ts
@@ -35,7 +35,7 @@ export const splitListCommand: Command<{
 
   doc.captureSync();
 
-  if (model.text.length === 0) {
+  if (model.props.text.length === 0) {
     /**
      * case 1: target is top most, convert the list into a paragraph
      *
@@ -65,7 +65,7 @@ export const splitListCommand: Command<{
       let base = 1;
       nextContinuousNumberedLists.forEach(list => {
         doc.transact(() => {
-          list.order = base;
+          list.props.order = base;
         });
         base += 1;
       });
@@ -114,8 +114,8 @@ export const splitListCommand: Command<{
 
   let newListId: string | null = null;
 
-  if (model.children.length > 0 && !model.collapsed) {
-    const afterText = model.text.split(inlineIndex);
+  if (model.children.length > 0 && !model.props.collapsed) {
+    const afterText = model.props.text.split(inlineIndex);
     if (inlineIndex === 0) {
       /**
        * case 3: list has children (list not collapsed), split the list at the start of line
@@ -132,11 +132,11 @@ export const splitListCommand: Command<{
       newListId = doc.addBlock(
         'affine:list',
         {
-          type: model.type,
+          type: model.props.type,
           text: afterText,
           order:
-            model.type === 'numbered' && model.order !== null
-              ? model.order + 1
+            model.props.type === 'numbered' && model.props.order !== null
+              ? model.props.order + 1
               : null,
         },
         parent,
@@ -147,15 +147,15 @@ export const splitListCommand: Command<{
       // move children to new list
       doc.moveBlocks(model.children, newList);
 
-      if (model.type === 'numbered' && model.order !== null) {
+      if (model.props.type === 'numbered' && model.props.order !== null) {
         const nextContinuousNumberedLists = getNextContinuousNumberedLists(
           doc,
           newListId
         );
-        let base = model.order + 2;
+        let base = model.props.order + 2;
         nextContinuousNumberedLists.forEach(list => {
           doc.transact(() => {
-            list.order = base;
+            list.props.order = base;
           });
           base += 1;
         });
@@ -176,15 +176,15 @@ export const splitListCommand: Command<{
       newListId = doc.addBlock(
         'affine:list',
         {
-          type: model.type,
+          type: model.props.type,
           text: afterText,
-          order: model.type === 'numbered' ? 1 : null,
+          order: model.props.type === 'numbered' ? 1 : null,
         },
         model,
         0
       );
 
-      if (model.type === 'numbered') {
+      if (model.props.type === 'numbered') {
         const nextContinuousNumberedLists = getNextContinuousNumberedLists(
           doc,
           newListId
@@ -192,7 +192,7 @@ export const splitListCommand: Command<{
         let base = 2;
         nextContinuousNumberedLists.forEach(list => {
           doc.transact(() => {
-            list.order = base;
+            list.props.order = base;
           });
           base += 1;
         });
@@ -223,11 +223,11 @@ export const splitListCommand: Command<{
      * - |a
      * - bbb
      */
-    const afterText = model.text.split(inlineIndex);
+    const afterText = model.props.text.split(inlineIndex);
     newListId = doc.addBlock(
       'affine:list',
       {
-        type: model.type,
+        type: model.props.type,
         text: afterText,
         order: null,
       },
diff --git a/blocksuite/affine/blocks/block-list/src/commands/utils.ts b/blocksuite/affine/blocks/block-list/src/commands/utils.ts
index 1dcb2f2a3b..d6975e0510 100644
--- a/blocksuite/affine/blocks/block-list/src/commands/utils.ts
+++ b/blocksuite/affine/blocks/block-list/src/commands/utils.ts
@@ -23,7 +23,7 @@ export function correctNumberedListsOrderToPrev(
 
   if (
     !matchModels(model, [ListBlockModel]) ||
-    model.type$.value !== 'numbered'
+    model.props.type$.value !== 'numbered'
   ) {
     return;
   }
@@ -34,19 +34,19 @@ export function correctNumberedListsOrderToPrev(
     if (
       previousSibling &&
       matchModels(previousSibling, [ListBlockModel]) &&
-      previousSibling.type === 'numbered'
+      previousSibling.props.type === 'numbered'
     ) {
-      if (!previousSibling.order) previousSibling.order = 1;
-      model.order = previousSibling.order + 1;
+      if (!previousSibling.props.order) previousSibling.props.order = 1;
+      model.props.order = previousSibling.props.order + 1;
     } else {
-      model.order = 1;
+      model.props.order = 1;
     }
 
     // step 2
-    let base = model.order + 1;
+    let base = model.props.order + 1;
     const continuousNumberedLists = getNextContinuousNumberedLists(doc, model);
     continuousNumberedLists.forEach(list => {
-      list.order = base;
+      list.props.order = base;
       base++;
     });
   };
@@ -60,11 +60,11 @@ export function correctNumberedListsOrderToPrev(
 
 export function correctListOrder(doc: Store, model: ListBlockModel) {
   // old numbered list has no order
-  if (model.type === 'numbered' && !Number.isInteger(model.order)) {
+  if (model.props.type === 'numbered' && !Number.isInteger(model.props.order)) {
     correctNumberedListsOrderToPrev(doc, model, false);
   }
   // if list is not numbered, order should be null
-  if (model.type !== 'numbered') {
-    model.order = null;
+  if (model.props.type !== 'numbered') {
+    model.props.order = null;
   }
 }
diff --git a/blocksuite/affine/blocks/block-list/src/list-block.ts b/blocksuite/affine/blocks/block-list/src/list-block.ts
index 0fd909328d..44c4d03e04 100644
--- a/blocksuite/affine/blocks/block-list/src/list-block.ts
+++ b/blocksuite/affine/blocks/block-list/src/list-block.ts
@@ -41,24 +41,24 @@ export class ListBlockComponent extends CaptionedBlockComponent<ListBlockModel>
     e.stopPropagation();
     e.preventDefault();
 
-    if (this.model.type === 'toggle') {
+    if (this.model.props.type === 'toggle') {
       if (this.doc.readonly) {
         this._readonlyCollapsed = !this._readonlyCollapsed;
       } else {
         this.doc.captureSync();
         this.doc.updateBlock(this.model, {
-          collapsed: !this.model.collapsed,
+          collapsed: !this.model.props.collapsed,
         });
       }
 
       return;
-    } else if (this.model.type === 'todo') {
+    } else if (this.model.props.type === 'todo') {
       if (this.doc.readonly) return;
 
       this.doc.captureSync();
-      const checkedPropObj = { checked: !this.model.checked };
+      const checkedPropObj = { checked: !this.model.props.checked };
       this.doc.updateBlock(this.model, checkedPropObj);
-      if (this.model.checked) {
+      if (this.model.props.checked) {
         const checkEl = this.querySelector('.affine-list-block__todo-prefix');
         if (checkEl) {
           playCheckAnimation(checkEl).catch(console.error);
@@ -110,22 +110,22 @@ export class ListBlockComponent extends CaptionedBlockComponent<ListBlockModel>
 
     this.disposables.add(
       effect(() => {
-        const collapsed = this.model.collapsed$.value;
+        const collapsed = this.model.props.collapsed$.value;
         this._readonlyCollapsed = collapsed;
       })
     );
 
     this.disposables.add(
       effect(() => {
-        const type = this.model.type$.value;
-        const order = this.model.order$.value;
+        const type = this.model.props.type$.value;
+        const order = this.model.props.order$.value;
         // old numbered list has no order
         if (type === 'numbered' && !Number.isInteger(order)) {
           correctNumberedListsOrderToPrev(this.doc, this.model, false);
         }
         // if list is not numbered, order should be null
         if (type !== 'numbered' && order !== null) {
-          this.model.order = null;
+          this.model.props.order = null;
         }
       })
     );
@@ -141,7 +141,7 @@ export class ListBlockComponent extends CaptionedBlockComponent<ListBlockModel>
     const { model, _onClickIcon } = this;
     const collapsed = this.doc.readonly
       ? this._readonlyCollapsed
-      : model.collapsed;
+      : model.props.collapsed;
 
     const listIcon = getListIcon(model, !collapsed, _onClickIcon);
 
@@ -161,7 +161,7 @@ export class ListBlockComponent extends CaptionedBlockComponent<ListBlockModel>
           class=${classMap({
             'affine-list-rich-text-wrapper': true,
             'affine-list--checked':
-              this.model.type === 'todo' && this.model.checked,
+              this.model.props.type === 'todo' && this.model.props.checked,
             [TOGGLE_BUTTON_PARENT_CLASS]: true,
           })}
         >
@@ -184,7 +184,7 @@ export class ListBlockComponent extends CaptionedBlockComponent<ListBlockModel>
             : nothing}
           ${listIcon}
           <rich-text
-            .yText=${this.model.text.yText}
+            .yText=${this.model.props.text.yText}
             .inlineEventSource=${this.topContenteditableElement ?? nothing}
             .undoManager=${this.doc.history}
             .attributeRenderer=${this.attributeRenderer}
diff --git a/blocksuite/affine/blocks/block-list/src/utils/forward-delete.ts b/blocksuite/affine/blocks/block-list/src/utils/forward-delete.ts
index 15bcc733c5..1ce73fa1f2 100644
--- a/blocksuite/affine/blocks/block-list/src/utils/forward-delete.ts
+++ b/blocksuite/affine/blocks/block-list/src/utils/forward-delete.ts
@@ -27,12 +27,12 @@ export function forwardDelete(std: BlockStdScope): true | undefined {
   const doc = std.store;
   const model = doc.getBlock(text.from.blockId)?.model;
   if (!model || !matchModels(model, [ListBlockModel])) return;
-  const isEnd = isCollapsed && text.from.index === model.text.length;
+  const isEnd = isCollapsed && text.from.index === model.props.text.length;
   if (!isEnd) return;
   // Has children in list
   const firstChild = model.firstChild();
   if (firstChild) {
-    model.text.join(firstChild.text as Text);
+    model.props.text.join(firstChild.text as Text);
     const grandChildren = firstChild.children;
     if (grandChildren) {
       doc.moveBlocks(grandChildren, model);
@@ -49,7 +49,7 @@ export function forwardDelete(std: BlockStdScope): true | undefined {
   const nextSibling = doc.getNext(model);
   const nextText = nextSibling?.text;
   if (nextSibling && nextText) {
-    model.text.join(nextText);
+    model.props.text.join(nextText);
     if (nextSibling.children) {
       if (!parent) return;
       doc.moveBlocks(nextSibling.children, parent, model, false);
@@ -63,7 +63,7 @@ export function forwardDelete(std: BlockStdScope): true | undefined {
   const nextBlock = getNextContentBlock(std.host, model);
   const nextBlockText = nextBlock?.text;
   if (nextBlock && nextBlockText) {
-    model.text.join(nextBlock.text as Text);
+    model.props.text.join(nextBlock.text as Text);
     if (nextBlock.children) {
       const nextBlockParent = doc.getParent(nextBlock);
       if (!nextBlockParent) return;
diff --git a/blocksuite/affine/blocks/block-list/src/utils/get-list-icon.ts b/blocksuite/affine/blocks/block-list/src/utils/get-list-icon.ts
index be34d8166c..7cb6964620 100644
--- a/blocksuite/affine/blocks/block-list/src/utils/get-list-icon.ts
+++ b/blocksuite/affine/blocks/block-list/src/utils/get-list-icon.ts
@@ -36,7 +36,7 @@ export function getListIcon(
   onClick: (e: MouseEvent) => void
 ) {
   const deep = getListDeep(model);
-  switch (model.type) {
+  switch (model.props.type) {
     case 'bulleted':
       return html`<div
         contenteditable="false"
@@ -51,7 +51,7 @@ export function getListIcon(
         class="affine-list-block__prefix affine-list-block__numbered"
         @click=${onClick}
       >
-        ${model.order ? getNumberPrefix(model.order, deep) : '1.'}
+        ${model.props.order ? getNumberPrefix(model.props.order, deep) : '1.'}
       </div>`;
     case 'todo':
       return html`<div
@@ -59,7 +59,7 @@ export function getListIcon(
         class=${`affine-list-block__prefix affine-list-block__todo-prefix ${model.doc.readonly ? 'readonly' : ''}`}
         @click=${onClick}
       >
-        ${model.checked
+        ${model.props.checked
           ? CheckBoxCheckSolidIcon({ style: 'color: #1E96EB' })
           : CheckBoxUnIcon()}
       </div>`;
@@ -72,7 +72,7 @@ export function getListIcon(
         ${showChildren ? ToggleDownIcon() : ToggleRightIcon()}
       </div>`;
     default:
-      console.error('Unknown list type', model.type, model);
+      console.error('Unknown list type', model.props.type, model);
       return null;
   }
 }
diff --git a/blocksuite/affine/blocks/block-note/src/commands/change-note-display-mode.ts b/blocksuite/affine/blocks/block-note/src/commands/change-note-display-mode.ts
index ab052bfef9..14d5c254a2 100644
--- a/blocksuite/affine/blocks/block-note/src/commands/change-note-display-mode.ts
+++ b/blocksuite/affine/blocks/block-note/src/commands/change-note-display-mode.ts
@@ -12,7 +12,7 @@ export const changeNoteDisplayMode: Command<{
   const noteBlockModel = std.store.getBlock(noteId)?.model;
   if (!noteBlockModel || !matchModels(noteBlockModel, [NoteBlockModel])) return;
 
-  const currentMode = noteBlockModel.displayMode;
+  const currentMode = noteBlockModel.props.displayMode;
   if (currentMode === mode) return;
 
   if (stopCapture) std.store.captureSync();
@@ -29,10 +29,10 @@ export const changeNoteDisplayMode: Command<{
       matchModels(child, [NoteBlockModel])
     );
     const firstEdgelessOnlyNote = notes.find(
-      note => note.displayMode === NoteDisplayMode.EdgelessOnly
+      note => note.props.displayMode === NoteDisplayMode.EdgelessOnly
     );
     const lastPageVisibleNote = notes.findLast(
-      note => note.displayMode !== NoteDisplayMode.EdgelessOnly
+      note => note.props.displayMode !== NoteDisplayMode.EdgelessOnly
     );
 
     if (currentMode === NoteDisplayMode.EdgelessOnly) {
diff --git a/blocksuite/affine/blocks/block-note/src/commands/dedent-block.ts b/blocksuite/affine/blocks/block-note/src/commands/dedent-block.ts
index b1a279424b..3dd92bfc15 100644
--- a/blocksuite/affine/blocks/block-note/src/commands/dedent-block.ts
+++ b/blocksuite/affine/blocks/block-note/src/commands/dedent-block.ts
@@ -47,8 +47,8 @@ export const dedentBlock: Command<{
 
   if (
     matchModels(model, [ParagraphBlockModel]) &&
-    model.type.startsWith('h') &&
-    model.collapsed
+    model.props.type.startsWith('h') &&
+    model.props.collapsed
   ) {
     const collapsedSiblings = calculateCollapsedSiblings(model);
     store.moveBlocks([model, ...collapsedSiblings], grandParent, parent, false);
diff --git a/blocksuite/affine/blocks/block-note/src/commands/dedent-blocks.ts b/blocksuite/affine/blocks/block-note/src/commands/dedent-blocks.ts
index 21012b6c39..4cac085e9e 100644
--- a/blocksuite/affine/blocks/block-note/src/commands/dedent-blocks.ts
+++ b/blocksuite/affine/blocks/block-note/src/commands/dedent-blocks.ts
@@ -59,8 +59,8 @@ export const dedentBlocks: Command<{
     if (!model) return;
     if (
       matchModels(model, [ParagraphBlockModel]) &&
-      model.type.startsWith('h') &&
-      model.collapsed
+      model.props.type.startsWith('h') &&
+      model.props.collapsed
     ) {
       const collapsedSiblings = calculateCollapsedSiblings(model);
       collapsedIds.push(...collapsedSiblings.map(sibling => sibling.id));
diff --git a/blocksuite/affine/blocks/block-note/src/commands/indent-block.ts b/blocksuite/affine/blocks/block-note/src/commands/indent-block.ts
index a8bdc51794..bf1d419935 100644
--- a/blocksuite/affine/blocks/block-note/src/commands/indent-block.ts
+++ b/blocksuite/affine/blocks/block-note/src/commands/indent-block.ts
@@ -51,8 +51,8 @@ export const indentBlock: Command<{
 
   if (
     matchModels(model, [ParagraphBlockModel]) &&
-    model.type.startsWith('h') &&
-    model.collapsed
+    model.props.type.startsWith('h') &&
+    model.props.collapsed
   ) {
     const collapsedSiblings = calculateCollapsedSiblings(model);
     store.moveBlocks([model, ...collapsedSiblings], previousSibling);
@@ -63,7 +63,7 @@ export const indentBlock: Command<{
   // update collapsed state of affine list
   if (
     matchModels(previousSibling, [ListBlockModel]) &&
-    previousSibling.collapsed
+    previousSibling.props.collapsed
   ) {
     store.updateBlock(previousSibling, {
       collapsed: false,
diff --git a/blocksuite/affine/blocks/block-note/src/commands/indent-blocks.ts b/blocksuite/affine/blocks/block-note/src/commands/indent-blocks.ts
index 8a6e137fd4..c25e9b1c10 100644
--- a/blocksuite/affine/blocks/block-note/src/commands/indent-blocks.ts
+++ b/blocksuite/affine/blocks/block-note/src/commands/indent-blocks.ts
@@ -60,8 +60,8 @@ export const indentBlocks: Command<{
     if (!model) return;
     if (
       matchModels(model, [ParagraphBlockModel]) &&
-      model.type.startsWith('h') &&
-      model.collapsed
+      model.props.type.startsWith('h') &&
+      model.props.collapsed
     ) {
       const collapsedSiblings = calculateCollapsedSiblings(model);
       collapsedIds.push(...collapsedSiblings.map(sibling => sibling.id));
@@ -85,7 +85,7 @@ export const indentBlocks: Command<{
     if (
       nearestHeading &&
       matchModels(nearestHeading, [ParagraphBlockModel]) &&
-      nearestHeading.collapsed
+      nearestHeading.props.collapsed
     ) {
       store.updateBlock(nearestHeading, { collapsed: false });
     }
@@ -106,7 +106,7 @@ export const indentBlocks: Command<{
     if (
       nearestHeading &&
       matchModels(nearestHeading, [ParagraphBlockModel]) &&
-      nearestHeading.collapsed
+      nearestHeading.props.collapsed
     ) {
       store.updateBlock(nearestHeading, { collapsed: false });
     }
diff --git a/blocksuite/affine/blocks/block-note/src/components/edgeless-note-background.ts b/blocksuite/affine/blocks/block-note/src/components/edgeless-note-background.ts
index 1b82d49559..dd17b5ed12 100644
--- a/blocksuite/affine/blocks/block-note/src/components/edgeless-note-background.ts
+++ b/blocksuite/affine/blocks/block-note/src/components/edgeless-note-background.ts
@@ -44,13 +44,13 @@ export class EdgelessNoteBackground extends SignalWatcher(
     const themeProvider = this.std.get(ThemeProvider);
     const theme = themeProvider.theme$.value;
     const backgroundColor = themeProvider.generateColorProperty(
-      this.note.background$.value,
+      this.note.props.background$.value,
       DefaultTheme.noteBackgrounColor,
       theme
     );
 
     const { borderRadius, borderSize, borderStyle, shadowType } =
-      this.note.edgeless$.value.style;
+      this.note.props.edgeless$.value.style;
 
     return {
       borderRadius: borderRadius + 'px',
diff --git a/blocksuite/affine/blocks/block-note/src/components/edgeless-note-mask.ts b/blocksuite/affine/blocks/block-note/src/components/edgeless-note-mask.ts
index 11997ab166..e94469626c 100644
--- a/blocksuite/affine/blocks/block-note/src/components/edgeless-note-mask.ts
+++ b/blocksuite/affine/blocks/block-note/src/components/edgeless-note-mask.ts
@@ -15,9 +15,9 @@ export class EdgelessNoteMask extends SignalWatcher(
     const maskDOM = this.renderRoot!.querySelector('.affine-note-mask');
     const observer = new ResizeObserver(entries => {
       for (const entry of entries) {
-        if (!this.model.edgeless.collapse) {
+        if (!this.model.props.edgeless.collapse) {
           const bound = Bound.deserialize(this.model.xywh);
-          const scale = this.model.edgeless.scale ?? 1;
+          const scale = this.model.props.edgeless.scale ?? 1;
           const height = entry.contentRect.height * scale;
 
           if (!height || almostEqual(bound.h, height)) {
@@ -53,7 +53,7 @@ export class EdgelessNoteMask extends SignalWatcher(
           zIndex: '1',
           pointerEvents: this.editing || this.disableMask ? 'none' : 'auto',
           borderRadius: `${
-            this.model.edgeless.style.borderRadius * this.zoom
+            this.model.props.edgeless.style.borderRadius * this.zoom
           }px`,
         })}
       ></div>
diff --git a/blocksuite/affine/blocks/block-note/src/note-edgeless-block.ts b/blocksuite/affine/blocks/block-note/src/note-edgeless-block.ts
index a2381276b4..a130902de3 100644
--- a/blocksuite/affine/blocks/block-note/src/note-edgeless-block.ts
+++ b/blocksuite/affine/blocks/block-note/src/note-edgeless-block.ts
@@ -25,7 +25,7 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
 ) {
   private get _isShowCollapsedContent() {
     return (
-      this.model.edgeless.collapse &&
+      this.model.props.edgeless.collapse &&
       this.gfx.selection.has(this.model.id) &&
       !this._dragging &&
       (this._isResizing || this._isHover)
@@ -41,7 +41,7 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
       return nothing;
     }
 
-    const { xywh, edgeless } = this.model;
+    const { xywh, edgeless } = this.model.props;
     const { borderSize } = edgeless.style;
 
     const extraPadding = this._editing ? ACTIVE_NOTE_EXTRA_PADDING : 0;
@@ -100,19 +100,19 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
   private _setCollapse(event: MouseEvent) {
     event.stopImmediatePropagation();
 
-    const { collapse, collapsedHeight } = this.model.edgeless;
+    const { collapse, collapsedHeight } = this.model.props.edgeless;
 
     if (collapse) {
       this.model.doc.updateBlock(this.model, () => {
-        this.model.edgeless.collapse = false;
+        this.model.props.edgeless.collapse = false;
       });
     } else if (collapsedHeight) {
-      const { xywh, edgeless } = this.model;
+      const { xywh, edgeless } = this.model.props;
       const bound = Bound.deserialize(xywh);
       bound.h = collapsedHeight * (edgeless.scale ?? 1);
       this.model.doc.updateBlock(this.model, () => {
-        this.model.edgeless.collapse = true;
-        this.model.xywh = bound.serialize();
+        this.model.props.edgeless.collapse = true;
+        this.model.props.xywh = bound.serialize();
       });
     }
 
@@ -164,7 +164,7 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
       const rect = this._noteContent?.getBoundingClientRect();
       if (!rect) return;
       const zoom = this.gfx.viewport.zoom;
-      const scale = this.model.edgeless.scale ?? 1;
+      const scale = this.model.props.edgeless.scale ?? 1;
       this._noteFullHeight =
         rect.height / scale / zoom + 2 * EDGELESS_BLOCK_CHILD_PADDING;
     });
@@ -184,7 +184,7 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
   }
 
   override getRenderingRect() {
-    const { xywh, edgeless } = this.model;
+    const { xywh, edgeless } = this.model.props;
     const { collapse, scale = 1 } = edgeless;
 
     const bound = Bound.deserialize(xywh);
@@ -202,11 +202,11 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
 
   override renderGfxBlock() {
     const { model } = this;
-    const { displayMode } = model;
+    const { displayMode } = model.props;
     if (!!displayMode && displayMode === NoteDisplayMode.DocOnly)
       return nothing;
 
-    const { xywh, edgeless } = model;
+    const { xywh, edgeless } = model.props;
     const { borderRadius } = edgeless.style;
     const { collapse = false, collapsedHeight, scale = 1 } = edgeless;
 
diff --git a/blocksuite/affine/blocks/block-paragraph/src/commands/dedent-paragraph.ts b/blocksuite/affine/blocks/block-paragraph/src/commands/dedent-paragraph.ts
index 1ba7e54dc3..865ad41d83 100644
--- a/blocksuite/affine/blocks/block-paragraph/src/commands/dedent-paragraph.ts
+++ b/blocksuite/affine/blocks/block-paragraph/src/commands/dedent-paragraph.ts
@@ -90,8 +90,8 @@ export const dedentParagraphCommand: Command<{
 
   if (
     matchModels(model, [ParagraphBlockModel]) &&
-    model.type.startsWith('h') &&
-    model.collapsed
+    model.props.type.startsWith('h') &&
+    model.props.collapsed
   ) {
     const collapsedSiblings = calculateCollapsedSiblings(model);
     store.moveBlocks([model, ...collapsedSiblings], grandParent, parent, false);
diff --git a/blocksuite/affine/blocks/block-paragraph/src/commands/indent-paragraph.ts b/blocksuite/affine/blocks/block-paragraph/src/commands/indent-paragraph.ts
index 70eed55879..444dc37c9c 100644
--- a/blocksuite/affine/blocks/block-paragraph/src/commands/indent-paragraph.ts
+++ b/blocksuite/affine/blocks/block-paragraph/src/commands/indent-paragraph.ts
@@ -96,7 +96,7 @@ export const indentParagraphCommand: Command<{
     if (
       nearestHeading &&
       matchModels(nearestHeading, [ParagraphBlockModel]) &&
-      nearestHeading.collapsed
+      nearestHeading.props.collapsed
     ) {
       store.updateBlock(nearestHeading, {
         collapsed: false,
@@ -106,8 +106,8 @@ export const indentParagraphCommand: Command<{
 
   if (
     matchModels(model, [ParagraphBlockModel]) &&
-    model.type.startsWith('h') &&
-    model.collapsed
+    model.props.type.startsWith('h') &&
+    model.props.collapsed
   ) {
     const collapsedSiblings = calculateCollapsedSiblings(model);
     store.moveBlocks([model, ...collapsedSiblings], previousSibling);
@@ -125,7 +125,7 @@ export const indentParagraphCommand: Command<{
     if (
       nearestHeading &&
       matchModels(nearestHeading, [ParagraphBlockModel]) &&
-      nearestHeading.collapsed
+      nearestHeading.props.collapsed
     ) {
       store.updateBlock(nearestHeading, {
         collapsed: false,
@@ -136,7 +136,7 @@ export const indentParagraphCommand: Command<{
   // update collapsed state of affine list
   if (
     matchModels(previousSibling, [ListBlockModel]) &&
-    previousSibling.collapsed
+    previousSibling.props.collapsed
   ) {
     store.updateBlock(previousSibling, {
       collapsed: false,
diff --git a/blocksuite/affine/blocks/block-paragraph/src/commands/split-paragraph.ts b/blocksuite/affine/blocks/block-paragraph/src/commands/split-paragraph.ts
index d801d54610..f66b73d130 100644
--- a/blocksuite/affine/blocks/block-paragraph/src/commands/split-paragraph.ts
+++ b/blocksuite/affine/blocks/block-paragraph/src/commands/split-paragraph.ts
@@ -37,16 +37,16 @@ export const splitParagraphCommand: Command<
   // be deleted and not counted as model.text.yText.length.
   // Example: "`a`[enter]" -> yText[<ContentFormat: Code>, "a", <ContentFormat: Code>]
   // In this case, we should not split the block.
-  if (model.text.yText.length < splitIndex + splitLength) return;
+  if (model.props.text.yText.length < splitIndex + splitLength) return;
 
   if (model.children.length > 0 && splitIndex > 0) {
     store.captureSync();
-    const right = model.text.split(splitIndex, splitLength);
+    const right = model.props.text.split(splitIndex, splitLength);
     const id = store.addBlock(
       model.flavour,
       {
         text: right,
-        type: model.type,
+        type: model.props.type,
       },
       model,
       0
@@ -60,12 +60,12 @@ export const splitParagraphCommand: Command<
   const index = parent.children.indexOf(model);
   if (index < 0) return;
   store.captureSync();
-  const right = model.text.split(splitIndex, splitLength);
+  const right = model.props.text.split(splitIndex, splitLength);
   const id = store.addBlock(
     model.flavour,
     {
       text: right,
-      type: model.type,
+      type: model.props.type,
     },
     parent,
     index + 1
diff --git a/blocksuite/affine/blocks/block-paragraph/src/heading-icon.ts b/blocksuite/affine/blocks/block-paragraph/src/heading-icon.ts
index 2c573de330..f7421051ad 100644
--- a/blocksuite/affine/blocks/block-paragraph/src/heading-icon.ts
+++ b/blocksuite/affine/blocks/block-paragraph/src/heading-icon.ts
@@ -67,7 +67,7 @@ export class ParagraphHeadingIcon extends SignalWatcher(
   `;
 
   override render() {
-    const type = this.model.type$.value;
+    const type = this.model.props.type$.value;
     if (!type.startsWith('h')) return nothing;
 
     const i = parseInt(type.slice(1));
diff --git a/blocksuite/affine/blocks/block-paragraph/src/paragraph-block.ts b/blocksuite/affine/blocks/block-paragraph/src/paragraph-block.ts
index 6d6f28efa7..beae8098bd 100644
--- a/blocksuite/affine/blocks/block-paragraph/src/paragraph-block.ts
+++ b/blocksuite/affine/blocks/block-paragraph/src/paragraph-block.ts
@@ -148,20 +148,20 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<
 
     this.disposables.add(
       effect(() => {
-        const type = this.model.type$.value;
-        if (!type.startsWith('h') && this.model.collapsed) {
-          this.model.collapsed = false;
+        const type = this.model.props.type$.value;
+        if (!type.startsWith('h') && this.model.props.collapsed) {
+          this.model.props.collapsed = false;
         }
       })
     );
 
     this.disposables.add(
       effect(() => {
-        const collapsed = this.model.collapsed$.value;
+        const collapsed = this.model.props.collapsed$.value;
         this._readonlyCollapsed = collapsed;
 
         // reset text selection when selected block is collapsed
-        if (this.model.type$.value.startsWith('h') && collapsed) {
+        if (this.model.props.type$.value.startsWith('h') && collapsed) {
           const collapsedSiblings = this.collapsedSiblings;
           const textSelection = this.host.selection.find(TextSelection);
 
@@ -181,19 +181,19 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<
     // # 456
     //
     // we need to update collapsed state of 123 when 456 converted to text
-    let beforeType = this.model.type$.peek();
+    let beforeType = this.model.props.type$.peek();
     this.disposables.add(
       effect(() => {
-        const type = this.model.type$.value;
+        const type = this.model.props.type$.value;
         if (beforeType !== type && !type.startsWith('h')) {
           const nearestHeading = getNearestHeadingBefore(this.model);
           if (
             nearestHeading &&
-            nearestHeading.type.startsWith('h') &&
-            nearestHeading.collapsed &&
+            nearestHeading.props.type.startsWith('h') &&
+            nearestHeading.props.collapsed &&
             !this.doc.readonly
           ) {
-            nearestHeading.collapsed = false;
+            nearestHeading.props.collapsed = false;
           }
         }
         beforeType = type;
@@ -208,14 +208,14 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<
   }
 
   override renderBlock(): TemplateResult<1> {
-    const { type$ } = this.model;
+    const { type$ } = this.model.props;
     const collapsed = this.doc.readonly
       ? this._readonlyCollapsed
-      : this.model.collapsed;
+      : this.model.props.collapsed;
     const collapsedSiblings = this.collapsedSiblings;
 
     let style = html``;
-    if (this.model.type$.value.startsWith('h') && collapsed) {
+    if (this.model.props.type$.value.startsWith('h') && collapsed) {
       style = html`
         <style>
           ${collapsedSiblings.map(sibling =>
@@ -259,14 +259,14 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<
             [TOGGLE_BUTTON_PARENT_CLASS]: true,
           })}
         >
-          ${this.model.type$.value.startsWith('h')
+          ${this.model.props.type$.value.startsWith('h')
             ? html`
                 <affine-paragraph-heading-icon
                   .model=${this.model}
                 ></affine-paragraph-heading-icon>
               `
             : nothing}
-          ${this.model.type$.value.startsWith('h') &&
+          ${this.model.props.type$.value.startsWith('h') &&
           collapsedSiblings.length > 0
             ? html`
                 <blocksuite-toggle-button
@@ -285,7 +285,7 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<
               `
             : nothing}
           <rich-text
-            .yText=${this.model.text.yText}
+            .yText=${this.model.props.text.yText}
             .inlineEventSource=${this.topContenteditableElement ?? nothing}
             .undoManager=${this.doc.history}
             .attributesSchema=${this.attributesSchema}
diff --git a/blocksuite/affine/blocks/block-paragraph/src/paragraph-keymap.ts b/blocksuite/affine/blocks/block-paragraph/src/paragraph-keymap.ts
index 1ba4f05f0e..c414bf1bf7 100644
--- a/blocksuite/affine/blocks/block-paragraph/src/paragraph-keymap.ts
+++ b/blocksuite/affine/blocks/block-paragraph/src/paragraph-keymap.ts
@@ -53,7 +53,7 @@ export const ParagraphKeymapExtension = KeymapExtension(
 
         // When deleting at line start of a paragraph block,
         // firstly switch it to normal text, then delete this empty block.
-        if (model.type !== 'text') {
+        if (model.props.type !== 'text') {
           // Try to switch to normal text
           store.captureSync();
           store.updateBlock(model, { type: 'text' });
@@ -91,7 +91,7 @@ export const ParagraphKeymapExtension = KeymapExtension(
         if (!inlineRange || !inlineEditor) return;
         const raw = ctx.get('keyboardState').raw;
         raw.preventDefault();
-        if (model.type === 'quote') {
+        if (model.props.type === 'quote') {
           store.captureSync();
           inlineEditor.insertText(inlineRange, '\n');
           inlineEditor.setInlineRange({
@@ -123,10 +123,10 @@ export const ParagraphKeymapExtension = KeymapExtension(
         if (!inlineRange || !inlineEditor) return;
 
         const raw = ctx.get('keyboardState').raw;
-        const isEnd = model.text.length === inlineRange.index;
+        const isEnd = model.props.text.length === inlineRange.index;
 
-        if (model.type === 'quote') {
-          const textStr = model.text.toString();
+        if (model.props.type === 'quote') {
+          const textStr = model.props.text.toString();
 
           /**
            * If quote block ends with two blank lines, split the block
@@ -145,7 +145,7 @@ export const ParagraphKeymapExtension = KeymapExtension(
           if (isEnd && endWithTwoBlankLines) {
             raw.preventDefault();
             store.captureSync();
-            model.text.delete(inlineRange.index - 1, 1);
+            model.props.text.delete(inlineRange.index - 1, 1);
             std.command.chain().pipe(addParagraphCommand).run();
             return true;
           }
@@ -158,17 +158,17 @@ export const ParagraphKeymapExtension = KeymapExtension(
           return true;
         }
 
-        if (model.type.startsWith('h') && model.collapsed) {
+        if (model.props.type.startsWith('h') && model.props.collapsed) {
           const parent = store.getParent(model);
           if (!parent) return true;
           const index = parent.children.indexOf(model);
           if (index === -1) return true;
           const collapsedSiblings = calculateCollapsedSiblings(model);
 
-          const rightText = model.text.split(inlineRange.index);
+          const rightText = model.props.text.split(inlineRange.index);
           const newId = store.addBlock(
             model.flavour,
-            { type: model.type, text: rightText },
+            { type: model.props.type, text: rightText },
             parent,
             index + collapsedSiblings.length + 1
           );
diff --git a/blocksuite/affine/blocks/block-paragraph/src/paragraph-service.ts b/blocksuite/affine/blocks/block-paragraph/src/paragraph-service.ts
index abbedc5e5e..611f198531 100644
--- a/blocksuite/affine/blocks/block-paragraph/src/paragraph-service.ts
+++ b/blocksuite/affine/blocks/block-paragraph/src/paragraph-service.ts
@@ -8,7 +8,7 @@ export class ParagraphBlockService extends BlockService {
   static override readonly flavour = ParagraphBlockSchema.model.flavour;
 
   placeholderGenerator: (model: ParagraphBlockModel) => string = model => {
-    if (model.type === 'text') {
+    if (model.props.type === 'text') {
       return "Type '/' for commands";
     }
 
@@ -21,6 +21,6 @@ export class ParagraphBlockService extends BlockService {
       h6: 'Heading 6',
       quote: '',
     };
-    return placeholders[model.type];
+    return placeholders[model.props.type];
   };
 }
diff --git a/blocksuite/affine/blocks/block-paragraph/src/utils/forward-delete.ts b/blocksuite/affine/blocks/block-paragraph/src/utils/forward-delete.ts
index 71d547eb83..691f153f1b 100644
--- a/blocksuite/affine/blocks/block-paragraph/src/utils/forward-delete.ts
+++ b/blocksuite/affine/blocks/block-paragraph/src/utils/forward-delete.ts
@@ -32,7 +32,7 @@ export function forwardDelete(std: BlockStdScope) {
     matchModels(model.parent, [CalloutBlockModel])
   )
     return;
-  const isEnd = isCollapsed && text.from.index === model.text.length;
+  const isEnd = isCollapsed && text.from.index === model.props.text.length;
   if (!isEnd) return;
   const parent = store.getParent(model);
   if (!parent) return;
@@ -57,7 +57,7 @@ export function forwardDelete(std: BlockStdScope) {
   }
 
   if (matchModels(nextSibling, [ParagraphBlockModel, ListBlockModel])) {
-    model.text.join(nextSibling.text);
+    model.props.text.join(nextSibling.props.text);
     if (nextSibling.children) {
       const parent = store.getParent(nextSibling);
       if (!parent) return false;
@@ -70,7 +70,7 @@ export function forwardDelete(std: BlockStdScope) {
 
   const nextBlock = getNextContentBlock(host, model);
   if (nextBlock?.text) {
-    model.text.join(nextBlock.text);
+    model.props.text.join(nextBlock.text);
     if (nextBlock.children) {
       const parent = store.getParent(nextBlock);
       if (!parent) return false;
diff --git a/blocksuite/affine/blocks/block-paragraph/src/utils/merge-with-prev.ts b/blocksuite/affine/blocks/block-paragraph/src/utils/merge-with-prev.ts
index 7f6bc447e9..e69a1f03bb 100644
--- a/blocksuite/affine/blocks/block-paragraph/src/utils/merge-with-prev.ts
+++ b/blocksuite/affine/blocks/block-paragraph/src/utils/merge-with-prev.ts
@@ -72,8 +72,8 @@ export function mergeWithPrev(editorHost: EditorHost, model: BlockModel) {
     )
       return false;
 
-    const lengthBeforeJoin = prevBlock.text?.length ?? 0;
-    prevBlock.text.join(model.text as Text);
+    const lengthBeforeJoin = prevBlock.props.text?.length ?? 0;
+    prevBlock.props.text.join(model.text as Text);
     doc.deleteBlock(model, {
       bringChildrenTo: parent,
     });
@@ -138,7 +138,7 @@ function handleNoPreviousSibling(editorHost: EditorHost, model: ExtendedModel) {
   }
 
   const rootModel = model.doc.root as RootBlockModel;
-  const title = rootModel.title;
+  const title = rootModel.props.title;
 
   doc.captureSync();
   let textLength = 0;
diff --git a/blocksuite/affine/blocks/block-root/src/configs/toolbar.ts b/blocksuite/affine/blocks/block-root/src/configs/toolbar.ts
index 254c5d50a9..a697aac452 100644
--- a/blocksuite/affine/blocks/block-root/src/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/block-root/src/configs/toolbar.ts
@@ -74,7 +74,7 @@ const conversionsActionGroup = {
       textConversionConfigs.find(
         ({ flavour, type }) =>
           flavour === model.flavour &&
-          (type ? 'type' in model && type === model.type : true)
+          (type ? 'type' in model.props && type === model.props.type : true)
       ) ?? textConversionConfigs[0];
     const update = (flavour: string, type?: string) => {
       chain
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/auto-complete/utils.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/auto-complete/utils.ts
index bb77f3c978..e3801ad6cc 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/components/auto-complete/utils.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/components/auto-complete/utils.ts
@@ -293,9 +293,9 @@ export function createEdgelessElement(
     id = doc.addBlock(
       'affine:note',
       {
-        background: current.background,
-        displayMode: current.displayMode,
-        edgeless: current.edgeless,
+        background: current.props.background,
+        displayMode: current.props.displayMode,
+        edgeless: current.props.edgeless,
         xywh: bound.serialize(),
       },
       edgeless.model.id
@@ -309,7 +309,7 @@ export function createEdgelessElement(
     }
     assertType<NoteBlockModel>(note);
     doc.updateBlock(note, () => {
-      note.edgeless.collapse = true;
+      note.props.edgeless.collapse = true;
     });
     doc.addBlock('affine:paragraph', {}, note.id);
 
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/note-slicer/index.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/note-slicer/index.ts
index a3a08e772a..1ec6967675 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/components/note-slicer/index.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/components/note-slicer/index.ts
@@ -154,14 +154,14 @@ export class NoteSlicer extends WidgetComponent<
       index: originIndex,
       xywh,
       background,
-      children,
       displayMode,
-    } = this._anchorNote;
+    } = this._anchorNote.props;
+    const { children } = this._anchorNote;
     const {
       collapse: _,
       collapsedHeight: __,
       ...restOfEdgeless
-    } = this._anchorNote.edgeless;
+    } = this._anchorNote.props.edgeless;
     const anchorBlockId = this._noteBlockIds[this._activeSlicerIndex];
     if (!anchorBlockId) return;
     const sliceIndex = children.findIndex(block => block.id === anchorBlockId);
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/rects/edgeless-selected-rect.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/rects/edgeless-selected-rect.ts
index 1e125f7159..9019df4d01 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/components/rects/edgeless-selected-rect.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/components/rects/edgeless-selected-rect.ts
@@ -1009,7 +1009,7 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<
       direction === HandleDirection.BottomRight ||
       direction === HandleDirection.BottomLeft
     ) {
-      const newScale = element.scale * (bound.w / oldXYWH.w);
+      const newScale = element.props.scale * (bound.w / oldXYWH.w);
       this._scalePercent = `${Math.round(newScale * 100)}%`;
       this._scaleDirection = direction;
 
@@ -1030,11 +1030,11 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<
       if (!textPortal.checkWidthOverflow(bound.w)) return;
 
       const newRealWidth = clamp(
-        bound.w / element.scale,
+        bound.w / element.props.scale,
         EDGELESS_TEXT_BLOCK_MIN_WIDTH,
         Infinity
       );
-      bound.w = newRealWidth * element.scale;
+      bound.w = newRealWidth * element.props.scale;
       this.gfx.updateElement(element.id, {
         xywh: Bound.serialize({
           ...bound,
@@ -1068,7 +1068,7 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<
   ) {
     const curBound = Bound.deserialize(element.xywh);
 
-    let scale = element.scale ?? 1;
+    let scale = element.props.scale ?? 1;
     let width = curBound.w / scale;
     let height = curBound.h / scale;
     if (this._shiftKey) {
@@ -1123,7 +1123,7 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<
   ) {
     const curBound = Bound.deserialize(element.xywh);
 
-    let scale = element.edgeless.scale ?? 1;
+    let scale = element.props.edgeless.scale ?? 1;
     if (this._shiftKey) {
       scale = (bound.w / curBound.w) * scale;
       this._scalePercent = `${Math.round(scale * 100)}%`;
@@ -1138,14 +1138,14 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<
 
     if (bound.h > NOTE_MIN_HEIGHT * scale) {
       this.doc.updateBlock(element, () => {
-        element.edgeless.collapse = true;
-        element.edgeless.collapsedHeight = bound.h / scale;
+        element.props.edgeless.collapse = true;
+        element.props.edgeless.collapsedHeight = bound.h / scale;
       });
     }
 
     this.gfx.updateElement(element.id, {
       edgeless: {
-        ...element.edgeless,
+        ...element.props.edgeless,
         scale,
       },
       xywh: bound.serialize(),
@@ -1160,13 +1160,13 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<
     const curBound = Bound.deserialize(element.xywh);
 
     if (isImageBlock(element)) {
-      const { height } = element;
+      const { height } = element.props;
       if (height) {
         this._scalePercent = `${Math.round((bound.h / height) * 100)}%`;
         this._scaleDirection = direction;
       }
     } else {
-      const cardStyle = (element as BookmarkBlockModel).style;
+      const cardStyle = (element as BookmarkBlockModel).props.style;
       const height = EMBED_CARD_HEIGHT[cardStyle];
       this._scalePercent = `${Math.round((bound.h / height) * 100)}%`;
       this._scaleDirection = direction;
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/text/edgeless-frame-title-editor.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/text/edgeless-frame-title-editor.ts
index a3f9efac1f..4f6f010775 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/components/text/edgeless-frame-title-editor.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/components/text/edgeless-frame-title-editor.ts
@@ -158,7 +158,7 @@ export class EdgelessFrameTitleEditor extends WithDisposable(
 
     return html`<div class="frame-title-editor" style=${inlineEditorStyle}>
       <rich-text
-        .yText=${this.frameModel.title.yText}
+        .yText=${this.frameModel.props.title.yText}
         .enableFormat=${false}
         .enableAutoScrollHorizontally=${false}
         style=${richTextStyle}
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/present/frame-order-menu.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/present/frame-order-menu.ts
index e72eda1ba4..e8d5a58cd2 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/present/frame-order-menu.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/present/frame-order-menu.ts
@@ -179,8 +179,9 @@ export class EdgelessFrameOrderMenu extends SignalWatcher(
           // Legacy compatibility
           frameMgr.refreshLegacyFrameOrder();
 
-          const before = this._frames[newIndex - 1]?.presentationIndex || null;
-          const after = this._frames[newIndex]?.presentationIndex || null;
+          const before =
+            this._frames[newIndex - 1]?.props.presentationIndex || null;
+          const after = this._frames[newIndex]?.props.presentationIndex || null;
 
           const frame = this._frames[index];
 
@@ -223,7 +224,7 @@ export class EdgelessFrameOrderMenu extends SignalWatcher(
           (frame, index) => html`
             <div class="item draggable" id=${frame.id} index=${index}>
               <div class="drag-indicator"></div>
-              <div class="title">${frame.title.toString()}</div>
+              <div class="title">${frame.props.title.toString()}</div>
             </div>
           `
         )}
@@ -232,7 +233,7 @@ export class EdgelessFrameOrderMenu extends SignalWatcher(
           ${frame
             ? html`<div class="drag-indicator"></div>
                 <div class="index">${this._curIndex + 1}</div>
-                <div class="title">${frame.title.toString()}</div>`
+                <div class="title">${frame.props.title.toString()}</div>`
             : nothing}
         </div>
       </div>
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/presentation-toolbar.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/presentation-toolbar.ts
index edb61aca2e..8fe52a7c95 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/presentation-toolbar.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/presentation-toolbar.ts
@@ -345,7 +345,7 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
               class="edgeless-frame-navigator-title"
               @click=${() => this._moveToCurrentFrame()}
             >
-              ${frame?.title ?? 'no frame'}
+              ${frame?.props.title ?? 'no frame'}
             </span>`}
 
         <span class="edgeless-frame-navigator-count">
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-keyboard.ts b/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-keyboard.ts
index 91301ab1d0..b942db4bb7 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-keyboard.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-keyboard.ts
@@ -261,7 +261,7 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
                     block.group === null &&
                     !(
                       matchModels(block, [NoteBlockModel]) &&
-                      block.displayMode === NoteDisplayMode.DocOnly
+                      block.props.displayMode === NoteDisplayMode.DocOnly
                     )
                 )
                 .map(block => block.id),
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-root-block.ts b/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-root-block.ts
index 74f4a2d13d..66e024d0d9 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-root-block.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-root-block.ts
@@ -318,10 +318,10 @@ export class EdgelessRootBlockComponent extends BlockComponent<
       const note = this.model.children.find(
         (child): child is NoteBlockModel =>
           matchModels(child, [NoteBlockModel]) &&
-          child.displayMode !== NoteDisplayMode.EdgelessOnly
+          child.props.displayMode !== NoteDisplayMode.EdgelessOnly
       );
 
-      if (primaryMode !== 'page' || !note || note.edgeless.collapse)
+      if (primaryMode !== 'page' || !note || note.props.edgeless.collapse)
         return false;
 
       const leftPadding = parseInt(
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/utils/clipboard-utils.ts b/blocksuite/affine/blocks/block-root/src/edgeless/utils/clipboard-utils.ts
index 19d3bbf8c9..e90782fee0 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/utils/clipboard-utils.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/utils/clipboard-utils.ts
@@ -106,9 +106,7 @@ export function createNewPresentationIndexes(
       const { data } = BlockSnapshotSchema.safeParse(block);
       return data?.flavour === 'affine:frame';
     })
-    .sort((a, b) =>
-      EdgelessFrameManager.framePresentationComparator(a.props, b.props)
-    );
+    .sort((a, b) => EdgelessFrameManager.framePresentationComparator(a, b));
 
   const frameMgr = edgeless.service.frame;
   let before = frameMgr.generatePresentationIndex();
diff --git a/blocksuite/affine/blocks/block-root/src/keyboard/keyboard-manager.ts b/blocksuite/affine/blocks/block-root/src/keyboard/keyboard-manager.ts
index da4a5d1311..3c4a07ea16 100644
--- a/blocksuite/affine/blocks/block-root/src/keyboard/keyboard-manager.ts
+++ b/blocksuite/affine/blocks/block-root/src/keyboard/keyboard-manager.ts
@@ -40,8 +40,8 @@ export class PageKeyboardManager {
 
       if (
         matchModels(model, [ParagraphBlockModel]) &&
-        model.type.startsWith('h') &&
-        model.collapsed
+        model.props.type.startsWith('h') &&
+        model.props.collapsed
       ) {
         const component = this.rootComponent.host.view.getBlock(id);
         if (!(component instanceof ParagraphBlockComponent)) return;
diff --git a/blocksuite/affine/blocks/block-root/src/page/page-root-block.ts b/blocksuite/affine/blocks/block-root/src/page/page-root-block.ts
index 5d39a03f19..e95e6a3ba6 100644
--- a/blocksuite/affine/blocks/block-root/src/page/page-root-block.ts
+++ b/blocksuite/affine/blocks/block-root/src/page/page-root-block.ts
@@ -238,7 +238,7 @@ export class PageRootBlockComponent extends BlockComponent<
         const blocks = this.model.children
           .filter(model => {
             if (matchModels(model, [NoteBlockModel])) {
-              if (model.displayMode === NoteDisplayMode.EdgelessOnly)
+              if (model.props.displayMode === NoteDisplayMode.EdgelessOnly)
                 return false;
 
               return true;
@@ -332,7 +332,7 @@ export class PageRootBlockComponent extends BlockComponent<
       const notes = this.model.children.filter(
         (child): child is NoteBlockModel =>
           child instanceof NoteBlockModel &&
-          child.displayMode !== NoteDisplayMode.EdgelessOnly
+          child.props.displayMode !== NoteDisplayMode.EdgelessOnly
       );
 
       // make sure there is a block can be focused
@@ -358,7 +358,7 @@ export class PageRootBlockComponent extends BlockComponent<
         if (
           !lastBlock ||
           !matchModels(lastBlock, [ParagraphBlockModel]) ||
-          lastBlock.text.length !== 0
+          lastBlock.props.text.length !== 0
         ) {
           this.std.command.exec(appendParagraphCommand);
         }
@@ -436,7 +436,8 @@ export class PageRootBlockComponent extends BlockComponent<
       const isNote = matchModels(child, [NoteBlockModel]);
       const note = child as NoteBlockModel;
       const displayOnEdgeless =
-        !!note.displayMode && note.displayMode === NoteDisplayMode.EdgelessOnly;
+        !!note.props.displayMode &&
+        note.props.displayMode === NoteDisplayMode.EdgelessOnly;
       // Should remove deprecated `hidden` property in the future
       return !(isNote && displayOnEdgeless);
     });
diff --git a/blocksuite/affine/blocks/block-root/src/preview/preview-root-block.ts b/blocksuite/affine/blocks/block-root/src/preview/preview-root-block.ts
index 28cc7d1b3d..c4617bd9ce 100644
--- a/blocksuite/affine/blocks/block-root/src/preview/preview-root-block.ts
+++ b/blocksuite/affine/blocks/block-root/src/preview/preview-root-block.ts
@@ -36,7 +36,8 @@ export class PreviewRootBlockComponent extends BlockComponent {
       const isNote = matchModels(child, [NoteBlockModel]);
       const note = child as NoteBlockModel;
       const displayOnEdgeless =
-        !!note.displayMode && note.displayMode === NoteDisplayMode.EdgelessOnly;
+        !!note.props.displayMode &&
+        note.props.displayMode === NoteDisplayMode.EdgelessOnly;
       // Should remove deprecated `hidden` property in the future
       return !(isNote && displayOnEdgeless);
     });
diff --git a/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-attachment-button.ts b/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-attachment-button.ts
index 3f006cf38d..d1d9f9f579 100644
--- a/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-attachment-button.ts
+++ b/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-attachment-button.ts
@@ -85,7 +85,7 @@ export class EdgelessChangeAttachmentButton extends WithDisposable(LitElement) {
   override render() {
     return join(
       [
-        this.model.style === 'pdf'
+        this.model.props.style === 'pdf'
           ? null
           : html`
               <editor-menu-button
@@ -100,7 +100,7 @@ export class EdgelessChangeAttachmentButton extends WithDisposable(LitElement) {
                 `}
               >
                 <card-style-panel
-                  .value=${this.model.style}
+                  .value=${this.model.props.style}
                   .options=${this._getCardStyleOptions}
                   .onSelect=${this._setCardStyle}
                 >
diff --git a/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-embed-card-button.ts b/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-embed-card-button.ts
index 5e375fa3fb..f0a5db1b38 100644
--- a/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-embed-card-button.ts
+++ b/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-embed-card-button.ts
@@ -147,7 +147,8 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
       return;
     }
 
-    const { id, url, xywh, style, caption } = this.model;
+    const { xywh, style, caption } = this.model.props;
+    const { id, url } = this.model;
 
     let targetFlavour = 'affine:bookmark',
       targetStyle = style;
@@ -207,7 +208,8 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
 
     const { flavour, styles } = this._embedOptions;
 
-    const { id, url, xywh, style } = this.model;
+    const { id, url, xywh } = this.model;
+    const { style } = this.model.props;
 
     const targetStyle = styles.includes(style) ? style : styles[0];
 
@@ -241,12 +243,12 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
   private readonly _copyUrl = () => {
     let url!: ReturnType<GenerateDocUrlService['generateDocUrl']>;
 
-    if ('url' in this.model) {
-      url = this.model.url;
+    if ('url' in this.model.props) {
+      url = this.model.props.url;
     } else if (isInternalEmbedModel(this.model)) {
       url = this.std
         .getOptional(GenerateDocUrlProvider)
-        ?.generateDocUrl(this.model.pageId, this.model.params);
+        ?.generateDocUrl(this.model.props.pageId, this.model.props.params);
     }
 
     if (!url) return;
@@ -263,14 +265,14 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
   private _embedOptions: EmbedOptions | null = null;
 
   private readonly _getScale = () => {
-    if ('scale' in this.model) {
-      return this.model.scale ?? 1;
+    if ('scale' in this.model.props) {
+      return this.model.props.scale ?? 1;
     } else if (isEmbedHtmlBlock(this.model)) {
       return 1;
     }
 
     const bound = Bound.deserialize(this.model.xywh);
-    return bound.h / EMBED_CARD_HEIGHT[this.model.style];
+    return bound.h / EMBED_CARD_HEIGHT[this.model.props.style];
   };
 
   private readonly _open = ({ openMode }: { openMode?: OpenDocMode } = {}) => {
@@ -343,16 +345,16 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
     if (isEmbedHtmlBlock(this.model)) return;
 
     const bound = Bound.deserialize(this.model.xywh);
-    if ('scale' in this.model) {
-      const oldScale = this.model.scale ?? 1;
+    if ('scale' in this.model.props) {
+      const oldScale = this.model.props.scale ?? 1;
       const ratio = scale / oldScale;
       bound.w *= ratio;
       bound.h *= ratio;
       const xywh = bound.serialize();
       this.model.doc.updateBlock(this.model, { scale, xywh });
     } else {
-      bound.h = EMBED_CARD_HEIGHT[this.model.style] * scale;
-      bound.w = EMBED_CARD_WIDTH[this.model.style] * scale;
+      bound.h = EMBED_CARD_HEIGHT[this.model.props.style] * scale;
+      bound.w = EMBED_CARD_WIDTH[this.model.props.style] * scale;
       const xywh = bound.serialize();
       this.model.doc.updateBlock(this.model, { xywh });
     }
@@ -456,9 +458,9 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
     }
     return (
       isEmbedLinkedDocBlock(this.model) &&
-      (referenceToNode(this.model) ||
+      (referenceToNode(this.model.props) ||
         !!this._blockComponent?.closest('affine-embed-synced-doc-block') ||
-        this.model.pageId === this._doc.id)
+        this.model.props.pageId === this._doc.id)
     );
   }
 
@@ -516,7 +518,7 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
   get _originalDocInfo(): AliasInfo | undefined {
     const model = this.model;
     const doc = isInternalEmbedModel(model)
-      ? this.std.workspace.getDoc(model.pageId)
+      ? this.std.workspace.getDoc(model.props.pageId)
       : null;
 
     if (doc) {
@@ -533,7 +535,7 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
   get _originalDocTitle() {
     const model = this.model;
     const doc = isInternalEmbedModel(model)
-      ? this.std.workspace.getDoc(model.pageId)
+      ? this.std.workspace.getDoc(model.props.pageId)
       : null;
 
     return doc?.meta?.title || 'Untitled';
@@ -582,7 +584,7 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
           type: item.type,
           icon: item.icon,
           disabled:
-            this.model.pageId === this._doc.id &&
+            this.model.props.pageId === this._doc.id &&
             item.type === 'open-in-active-view',
           action: () => {
             if (item.type === 'open-in-center-peek') {
@@ -723,30 +725,30 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
     const model = this.model;
     const isHtmlBlockModel = isEmbedHtmlBlock(model);
 
-    if ('url' in this.model) {
+    if ('url' in this.model.props) {
       this._embedOptions = this.std
         .get(EmbedOptionProvider)
-        .getEmbedBlockOptions(this.model.url);
+        .getEmbedBlockOptions(this.model.props.url);
     }
 
     const buttons = [
       this._openMenuButton(),
 
-      this._canShowUrlOptions && 'url' in model
+      this._canShowUrlOptions && 'url' in model.props
         ? html`
             <a
               class="affine-link-preview"
-              href=${model.url}
+              href=${model.props.url}
               rel="noopener noreferrer"
               target="_blank"
             >
-              <span>${getHostName(model.url)}</span>
+              <span>${getHostName(model.props.url)}</span>
             </a>
           `
         : nothing,
 
       // internal embed model
-      isEmbedLinkedDocBlock(model) && model.title
+      isEmbedLinkedDocBlock(model) && model.props.title
         ? html`
             <editor-icon-button
               class="doc-title"
diff --git a/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-frame-button.ts b/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-frame-button.ts
index 514741f4a3..ea23ffa52c 100644
--- a/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-frame-button.ts
+++ b/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-frame-button.ts
@@ -34,7 +34,7 @@ function getMostCommonColor(
   colorScheme: ColorScheme
 ): string {
   const colors = countBy(elements, (ele: FrameBlockModel) =>
-    resolveColor(ele.background, colorScheme)
+    resolveColor(ele.props.background, colorScheme)
   );
   const max = maxBy(Object.entries(colors), ([_k, count]) => count);
   return max ? (max[0] as string) : 'transparent';
@@ -73,7 +73,7 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
     const notes = rootModel.children.filter(
       model =>
         matchModels(model, [NoteBlockModel]) &&
-        model.displayMode !== NoteDisplayMode.EdgelessOnly
+        model.props.displayMode !== NoteDisplayMode.EdgelessOnly
     );
     const lastNote = notes[notes.length - 1];
     const referenceFrame = this.frames[0];
@@ -180,7 +180,7 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
             .pick=${this.pickColor}
             .color=${background}
             .theme=${colorScheme}
-            .originalColor=${this.frames[0].background}
+            .originalColor=${this.frames[0].props.background}
             .enableCustomColor=${enableCustomColor}
           >
           </edgeless-color-picker-button>
diff --git a/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-group-button.ts b/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-group-button.ts
index 475da06edb..b2eb6d8d95 100644
--- a/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-group-button.ts
+++ b/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-group-button.ts
@@ -25,7 +25,7 @@ export class EdgelessChangeGroupButton extends WithDisposable(LitElement) {
     const notes = rootModel.children.filter(
       model =>
         matchModels(model, [NoteBlockModel]) &&
-        model.displayMode !== NoteDisplayMode.EdgelessOnly
+        model.props.displayMode !== NoteDisplayMode.EdgelessOnly
     );
     const lastNote = notes[notes.length - 1];
     const referenceGroup = this.groups[0];
diff --git a/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-note-button.ts b/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-note-button.ts
index b9fb0fd042..ab20001792 100644
--- a/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-note-button.ts
+++ b/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-note-button.ts
@@ -73,7 +73,7 @@ function getMostCommonBackground(
   colorScheme: ColorScheme
 ): string {
   const colors = countBy(elements, (ele: NoteBlockModel) =>
-    resolveColor(ele.background, colorScheme)
+    resolveColor(ele.props.background, colorScheme)
   );
   const max = maxBy(Object.entries(colors), ([_k, count]) => count);
   return max
@@ -90,9 +90,9 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
     this.notes.forEach(note => {
       const props = {
         edgeless: {
-          ...note.edgeless,
+          ...note.props.edgeless,
           style: {
-            ...note.edgeless.style,
+            ...note.props.edgeless.style,
             borderRadius,
           },
         },
@@ -105,13 +105,13 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
     this.notes.forEach(note => {
       this.doc.updateBlock(note, () => {
         const bound = Bound.deserialize(note.xywh);
-        const oldScale = note.edgeless.scale ?? 1;
+        const oldScale = note.props.edgeless.scale ?? 1;
         const ratio = scale / oldScale;
         bound.w *= ratio;
         bound.h *= ratio;
         const xywh = bound.serialize();
         note.xywh = xywh;
-        note.edgeless.scale = scale;
+        note.props.edgeless.scale = scale;
       });
     });
   };
@@ -155,19 +155,19 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
   private _setCollapse() {
     this.doc.captureSync();
     this.notes.forEach(note => {
-      const { collapse, collapsedHeight } = note.edgeless;
+      const { collapse, collapsedHeight } = note.props.edgeless;
 
       if (collapse) {
         this.doc.updateBlock(note, () => {
-          note.edgeless.collapse = false;
+          note.props.edgeless.collapse = false;
         });
       } else if (collapsedHeight) {
-        const { xywh, edgeless } = note;
+        const { xywh, edgeless } = note.props;
         const bound = Bound.deserialize(xywh);
         bound.h = collapsedHeight * (edgeless.scale ?? 1);
         this.doc.updateBlock(note, () => {
-          note.edgeless.collapse = true;
-          note.xywh = bound.serialize();
+          note.props.edgeless.collapse = true;
+          note.props.xywh = bound.serialize();
         });
       }
     });
@@ -175,7 +175,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
   }
 
   private _setDisplayMode(note: NoteBlockModel, newMode: NoteDisplayMode) {
-    const oldMode = note.displayMode;
+    const oldMode = note.props.displayMode;
     this.edgeless.std.command.exec(changeNoteDisplayMode, {
       noteId: note.id,
       mode: newMode,
@@ -268,9 +268,9 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
     this.notes.forEach(note => {
       const props = {
         edgeless: {
-          ...note.edgeless,
+          ...note.props.edgeless,
           style: {
-            ...note.edgeless.style,
+            ...note.props.edgeless.style,
             shadowType,
           },
         },
@@ -283,9 +283,9 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
     this.notes.forEach(note => {
       const props = {
         edgeless: {
-          ...note.edgeless,
+          ...note.props.edgeless,
           style: {
-            ...note.edgeless.style,
+            ...note.props.edgeless.style,
             borderStyle,
           },
         },
@@ -298,9 +298,9 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
     this.notes.forEach(note => {
       const props = {
         edgeless: {
-          ...note.edgeless,
+          ...note.props.edgeless,
           style: {
-            ...note.edgeless.style,
+            ...note.props.edgeless.style,
             borderSize,
           },
         },
@@ -322,7 +322,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
   override render() {
     const len = this.notes.length;
     const note = this.notes[0];
-    const { edgeless, displayMode } = note;
+    const { edgeless, displayMode } = note.props;
     const { shadowType, borderRadius, borderSize, borderStyle } =
       edgeless.style;
     const colorScheme = this.edgeless.surface.renderer.getColorScheme();
@@ -406,7 +406,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
               .colorPanelClass=${'small'}
               .theme=${colorScheme}
               .palettes=${DefaultTheme.NoteBackgroundColorPalettes}
-              .originalColor=${note.background}
+              .originalColor=${note.props.background}
               .enableCustomColor=${enableCustomColor}
             >
             </edgeless-color-picker-button>
diff --git a/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/more-menu/config.ts b/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/more-menu/config.ts
index 1f32c33abb..617b11489e 100644
--- a/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/more-menu/config.ts
+++ b/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/more-menu/config.ts
@@ -153,7 +153,7 @@ export const openGroup: MenuItemGroup<ElementToolbarMoreMenuContext> = {
 
         if (!linkedDocBlock) return;
 
-        const disabled = linkedDocBlock.pageId === ctx.doc.id;
+        const disabled = linkedDocBlock.props.pageId === ctx.doc.id;
 
         return {
           action: () => {
diff --git a/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/more-menu/render-linked-doc.ts b/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/more-menu/render-linked-doc.ts
index fb9495459d..37e403922f 100644
--- a/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/more-menu/render-linked-doc.ts
+++ b/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/more-menu/render-linked-doc.ts
@@ -86,7 +86,7 @@ export function createLinkedDocFromEdgelessElements(
           });
         } else {
           if (isFrameBlock(model)) {
-            mapFrameIds(blockProps as unknown as FrameBlockModel, ids);
+            mapFrameIds(blockProps as FrameBlockModel['props'], ids);
           }
 
           newId = linkedDoc.addBlock(model.flavour, blockProps, surfaceId);
diff --git a/blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/config.ts b/blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/config.ts
index 6e9baea59a..ae50632c53 100644
--- a/blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/config.ts
+++ b/blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/config.ts
@@ -584,7 +584,7 @@ const documentGroupFrameToolGroup: DynamicKeyboardToolPanelGroup = ({
     .map(block => block.model) as FrameBlockModel[];
 
   const frameItems = frameModels.map<KeyboardToolbarActionItem>(frameModel => ({
-    name: 'Frame: ' + frameModel.title.toString(),
+    name: 'Frame: ' + frameModel.props.title.toString(),
     icon: FrameIcon(),
     action: ({ std }) => {
       std.command
diff --git a/blocksuite/affine/blocks/block-surface-ref/src/configs/slash-menu.ts b/blocksuite/affine/blocks/block-surface-ref/src/configs/slash-menu.ts
index e9fa42f98d..c6aabb0e5c 100644
--- a/blocksuite/affine/blocks/block-surface-ref/src/configs/slash-menu.ts
+++ b/blocksuite/affine/blocks/block-surface-ref/src/configs/slash-menu.ts
@@ -23,7 +23,7 @@ const surfaceRefSlashMenuConfig: SlashMenuConfig = {
       .map(block => block.model as FrameBlockModel);
 
     const frameItems = frameModels.map<SlashMenuActionItem>(frameModel => ({
-      name: 'Frame: ' + frameModel.title,
+      name: 'Frame: ' + frameModel.props.title,
       icon: FrameIcon(),
       group: `5_Document Group & Frame@${index++}`,
       tooltip: {
diff --git a/blocksuite/affine/blocks/block-surface-ref/src/portal/note.ts b/blocksuite/affine/blocks/block-surface-ref/src/portal/note.ts
index 921820d20f..bd7b3bd097 100644
--- a/blocksuite/affine/blocks/block-surface-ref/src/portal/note.ts
+++ b/blocksuite/affine/blocks/block-surface-ref/src/portal/note.ts
@@ -68,13 +68,16 @@ export class SurfaceRefNotePortal extends WithDisposable(ShadowlessElement) {
 
   override render() {
     const { model, index } = this;
-    const { displayMode, edgeless } = model;
+    const { displayMode, edgeless } = model.props;
     if (!!displayMode && displayMode === NoteDisplayMode.DocOnly)
       return nothing;
 
     const backgroundColor = this.host.std
       .get(ThemeProvider)
-      .generateColorProperty(model.background, DefaultTheme.noteBackgrounColor);
+      .generateColorProperty(
+        model.props.background,
+        DefaultTheme.noteBackgrounColor
+      );
 
     const [modelX, modelY, modelW, modelH] = deserializeXYWH(model.xywh);
     const style = {
diff --git a/blocksuite/affine/blocks/block-surface-ref/src/surface-ref-block.ts b/blocksuite/affine/blocks/block-surface-ref/src/surface-ref-block.ts
index 304b664a85..13907bd003 100644
--- a/blocksuite/affine/blocks/block-surface-ref/src/surface-ref-block.ts
+++ b/blocksuite/affine/blocks/block-surface-ref/src/surface-ref-block.ts
@@ -316,19 +316,19 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
     this._surfaceModel = surfaceModel;
 
     const findReferencedModel = (): [GfxModel | null, string] => {
-      if (!this.model.reference) return [null, this.doc.id];
+      if (!this.model.props.reference) return [null, this.doc.id];
 
-      if (this.doc.getBlock(this.model.reference)) {
+      if (this.doc.getBlock(this.model.props.reference)) {
         return [
-          this.doc.getBlock(this.model.reference)
+          this.doc.getBlock(this.model.props.reference)
             ?.model as GfxBlockElementModel,
           this.doc.id,
         ];
       }
 
-      if (this._surfaceModel?.getElementById(this.model.reference)) {
+      if (this._surfaceModel?.getElementById(this.model.props.reference)) {
         return [
-          this._surfaceModel.getElementById(this.model.reference),
+          this._surfaceModel.getElementById(this.model.props.reference),
           this.doc.id,
         ];
       }
@@ -337,17 +337,18 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
         .map(doc => doc.getStore())
         .find(
           doc =>
-            doc.getBlock(this.model.reference) ||
-            getSurfaceBlock(doc)?.getElementById(this.model.reference)
+            doc.getBlock(this.model.props.reference) ||
+            getSurfaceBlock(doc)?.getElementById(this.model.props.reference)
         );
 
       if (doc) {
         this._surfaceModel = getSurfaceBlock(doc);
       }
 
-      if (doc && doc.getBlock(this.model.reference)) {
+      if (doc && doc.getBlock(this.model.props.reference)) {
         return [
-          doc.getBlock(this.model.reference)?.model as GfxBlockElementModel,
+          doc.getBlock(this.model.props.reference)
+            ?.model as GfxBlockElementModel,
           doc.id,
         ];
       }
@@ -355,7 +356,10 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
       if (doc) {
         const surfaceBlock = getSurfaceBlock(doc);
         if (surfaceBlock) {
-          return [surfaceBlock.getElementById(this.model.reference), doc.id];
+          return [
+            surfaceBlock.getElementById(this.model.props.reference),
+            doc.id,
+          ];
         }
       }
 
@@ -379,7 +383,7 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
       this.model.propsUpdated.subscribe(payload => {
         if (
           payload.key === 'reference' &&
-          this.model.reference !== this._referencedModel?.id
+          this.model.props.reference !== this._referencedModel?.id
         ) {
           init();
         }
@@ -389,7 +393,7 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
     if (surfaceModel && this._referencedModel instanceof SurfaceElementModel) {
       this._disposables.add(
         surfaceModel.elementRemoved.subscribe(({ id }) => {
-          if (this.model.reference === id) {
+          if (this.model.props.reference === id) {
             init();
           }
         })
@@ -399,7 +403,7 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
     if (this._referencedModel instanceof GfxBlockElementModel) {
       this._disposables.add(
         this.doc.slots.blockUpdated.subscribe(({ type, id }) => {
-          if (type === 'delete' && id === this.model.reference) {
+          if (type === 'delete' && id === this.model.props.reference) {
             init();
           }
         })
@@ -442,7 +446,7 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
     }
     this._previewSpec.extend([SurfaceRefViewportInitializer]);
 
-    const referenceId = this.model.reference;
+    const referenceId = this.model.props.reference;
     const setReferenceXYWH = (xywh: typeof this._referenceXYWH) => {
       this._referenceXYWH = xywh;
     };
@@ -564,7 +568,7 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
       <div class="placeholder-image">${noContentPlaceholder}</div>
       <div class="placeholder-text">
         No Such
-        ${NO_CONTENT_TITLE[model.refFlavour ?? 'DEFAULT'] ??
+        ${NO_CONTENT_TITLE[model.props.refFlavour ?? 'DEFAULT'] ??
         NO_CONTENT_TITLE.DEFAULT}
       </div>
       <div class="placeholder-action">
@@ -574,7 +578,7 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
         </button>
       </div>
       <div class="placeholder-reason">
-        ${NO_CONTENT_REASON[model.refFlavour ?? 'DEFAULT'] ??
+        ${NO_CONTENT_REASON[model.props.refFlavour ?? 'DEFAULT'] ??
         NO_CONTENT_REASON.DEFAULT}
       </div>
     </div>`;
diff --git a/blocksuite/affine/blocks/block-surface/src/commands/auto-align.ts b/blocksuite/affine/blocks/block-surface/src/commands/auto-align.ts
index 22af56ca98..104137df24 100644
--- a/blocksuite/affine/blocks/block-surface/src/commands/auto-align.ts
+++ b/blocksuite/affine/blocks/block-surface/src/commands/auto-align.ts
@@ -121,14 +121,14 @@ function autoResizeElements(
     }
 
     if (ele instanceof NoteBlockModel) {
-      const curScale = ele.edgeless.scale ?? 1;
+      const curScale = ele.props.edgeless.scale ?? 1;
       const nextScale = curScale * (ALIGN_HEIGHT / ele.elementBound.h);
       const bound = Bound.deserialize(ele.xywh);
       bound.h = bound.h * (nextScale / curScale);
       bound.w = bound.w * (nextScale / curScale);
       updateElement(ele.id, {
         edgeless: {
-          ...ele.edgeless,
+          ...ele.props.edgeless,
           scale: nextScale,
         },
         xywh: bound.serialize(),
@@ -137,7 +137,7 @@ function autoResizeElements(
       ele instanceof EdgelessTextBlockModel ||
       ele instanceof EmbedSyncedDocModel
     ) {
-      const curScale = ele.scale ?? 1;
+      const curScale = ele.props.scale ?? 1;
       const nextScale = curScale * (ALIGN_HEIGHT / ele.elementBound.h);
       const bound = Bound.deserialize(ele.xywh);
       bound.h = bound.h * (nextScale / curScale);
diff --git a/blocksuite/affine/blocks/block-surface/src/extensions/export-manager/export-manager.ts b/blocksuite/affine/blocks/block-surface/src/extensions/export-manager/export-manager.ts
index d48d5c8bba..f6f42ae2df 100644
--- a/blocksuite/affine/blocks/block-surface/src/extensions/export-manager/export-manager.ts
+++ b/blocksuite/affine/blocks/block-surface/src/extensions/export-manager/export-manager.ts
@@ -459,9 +459,9 @@ export class ExportManager {
       nodes ?? gfx.getElementsByBound(bound, { type: 'block' }) ?? [];
     for (const block of blocks) {
       if (matchModels(block, [ImageBlockModel])) {
-        if (!block.sourceId) return;
+        if (!block.props.sourceId) return;
 
-        const blob = await block.doc.blobSync.get(block.sourceId);
+        const blob = await block.doc.blobSync.get(block.props.sourceId);
         if (!blob) return;
 
         const blobToImage = (blob: Blob) =>
@@ -564,7 +564,7 @@ export class ExportManager {
     const pdfBase64 = await pdfDoc.saveAsBase64({ dataUri: true });
 
     FileExporter.exportFile(
-      (rootModel as RootBlockModel).title.toString() + '.pdf',
+      (rootModel as RootBlockModel).props.title.toString() + '.pdf',
       pdfBase64
     );
   }
@@ -578,7 +578,7 @@ export class ExportManager {
     }
 
     FileExporter.exportPng(
-      (this.doc.root as RootBlockModel).title.toString(),
+      (this.doc.root as RootBlockModel).props.title.toString(),
       canvasImage.toDataURL('image/png')
     );
   }
diff --git a/blocksuite/affine/blocks/block-surface/src/surface-transformer.ts b/blocksuite/affine/blocks/block-surface/src/surface-transformer.ts
index 0ee97513a0..17ee3cbb2c 100644
--- a/blocksuite/affine/blocks/block-surface/src/surface-transformer.ts
+++ b/blocksuite/affine/blocks/block-surface/src/surface-transformer.ts
@@ -90,7 +90,7 @@ export class SurfaceBlockTransformer extends BaseBlockTransformer<SurfaceBlockPr
 
   override toSnapshot(payload: ToSnapshotPayload<SurfaceBlockProps>) {
     const snapshot = super.toSnapshot(payload);
-    const elementsValue = payload.model.elements.getValue();
+    const elementsValue = payload.model.props.elements.getValue();
     const value: Record<string, unknown> = {};
     /**
      * When the selectedElements is defined, only the selected elements will be serialized.
diff --git a/blocksuite/affine/blocks/block-surface/src/utils/add-note.ts b/blocksuite/affine/blocks/block-surface/src/utils/add-note.ts
index efa9bb19c2..672a33d1c9 100644
--- a/blocksuite/affine/blocks/block-surface/src/utils/add-note.ts
+++ b/blocksuite/affine/blocks/block-surface/src/utils/add-note.ts
@@ -102,8 +102,8 @@ export function addNote(
   if (options.collapse && height > NOTE_MIN_HEIGHT) {
     const note = doc.getBlockById(noteId) as NoteBlockModel;
     doc.updateBlock(note, () => {
-      note.edgeless.collapse = true;
-      note.edgeless.collapsedHeight = height;
+      note.props.edgeless.collapse = true;
+      note.props.edgeless.collapsedHeight = height;
     });
   }
   gfx.tool.setTool(
diff --git a/blocksuite/affine/blocks/block-surface/src/utils/update-xywh.ts b/blocksuite/affine/blocks/block-surface/src/utils/update-xywh.ts
index 6474bb1614..5fa44368e4 100644
--- a/blocksuite/affine/blocks/block-surface/src/utils/update-xywh.ts
+++ b/blocksuite/affine/blocks/block-surface/src/utils/update-xywh.ts
@@ -47,13 +47,13 @@ export function updateXYWH(
   if (ele instanceof ConnectorElementModel) {
     ele.moveTo(bound);
   } else if (ele instanceof NoteBlockModel) {
-    const scale = ele.edgeless.scale ?? 1;
+    const scale = ele.props.edgeless.scale ?? 1;
     bound.w = clamp(bound.w, NOTE_MIN_WIDTH * scale, Infinity);
     bound.h = clamp(bound.h, NOTE_MIN_HEIGHT * scale, Infinity);
     if (bound.h >= NOTE_MIN_HEIGHT * scale) {
       updateBlock(ele, () => {
-        ele.edgeless.collapse = true;
-        ele.edgeless.collapsedHeight = bound.h / scale;
+        ele.props.edgeless.collapse = true;
+        ele.props.edgeless.collapsedHeight = bound.h / scale;
       });
     }
     updateElement(ele.id, {
diff --git a/blocksuite/affine/components/src/caption/block-caption.ts b/blocksuite/affine/components/src/caption/block-caption.ts
index 702618b786..158fe3bcfb 100644
--- a/blocksuite/affine/components/src/caption/block-caption.ts
+++ b/blocksuite/affine/components/src/caption/block-caption.ts
@@ -121,12 +121,12 @@ export class BlockCaptionEditor<
   override connectedCallback(): void {
     super.connectedCallback();
 
-    this.caption = this.model.caption;
+    this.caption = this.model.props.caption;
 
     this.disposables.add(
       this.model.propsUpdated.subscribe(({ key }) => {
         if (key === 'caption') {
-          this.caption = this.model.caption;
+          this.caption = this.model.props.caption;
           if (!this._focus) {
             this.display = !!this.caption?.length;
           }
diff --git a/blocksuite/affine/components/src/embed-card-modal/embed-card-caption-edit-modal.ts b/blocksuite/affine/components/src/embed-card-modal/embed-card-caption-edit-modal.ts
index da101657dc..1de8eabe7b 100644
--- a/blocksuite/affine/components/src/embed-card-modal/embed-card-caption-edit-modal.ts
+++ b/blocksuite/affine/components/src/embed-card-modal/embed-card-caption-edit-modal.ts
@@ -64,7 +64,7 @@ export class EmbedCardEditCaptionEditModal extends WithDisposable(
             <textarea
               class="embed-card-modal-input caption"
               placeholder="Write a caption..."
-              .value=${this._model.caption ?? ''}
+              .value=${this._model.props.caption ?? ''}
             ></textarea>
           </div>
           <div class="embed-card-modal-row">
diff --git a/blocksuite/affine/components/src/embed-card-modal/embed-card-edit-modal.ts b/blocksuite/affine/components/src/embed-card-modal/embed-card-edit-modal.ts
index 6572ce77f2..495cd91098 100644
--- a/blocksuite/affine/components/src/embed-card-modal/embed-card-edit-modal.ts
+++ b/blocksuite/affine/components/src/embed-card-modal/embed-card-edit-modal.ts
@@ -246,9 +246,9 @@ export class EmbedCardEditModal extends SignalWatcher(
   }
 
   private _updateInfo() {
-    const title = this.model.title || this.originalDocInfo?.title || '';
+    const title = this.model.props.title || this.originalDocInfo?.title || '';
     const description =
-      this.model.description || this.originalDocInfo?.description || '';
+      this.model.props.description || this.originalDocInfo?.description || '';
 
     this.title$.value = title;
     this.description$.value = description;
@@ -395,8 +395,8 @@ export class EmbedCardEditModal extends SignalWatcher(
   accessor resetButtonDisabled$ = computed<boolean>(
     () =>
       !(
-        Boolean(this.model.title$.value?.length) ||
-        Boolean(this.model.description$.value?.length)
+        Boolean(this.model.props.title?.length) ||
+        Boolean(this.model.props.description?.length)
       )
   );
 
diff --git a/blocksuite/affine/fragments/fragment-doc-title/src/doc-title.ts b/blocksuite/affine/fragments/fragment-doc-title/src/doc-title.ts
index bec2867d45..3943122b47 100644
--- a/blocksuite/affine/fragments/fragment-doc-title/src/doc-title.ts
+++ b/blocksuite/affine/fragments/fragment-doc-title/src/doc-title.ts
@@ -72,7 +72,7 @@ export class DocTitle extends WithDisposable(ShadowlessElement) {
     const note = this._rootModel.children.find(
       (child): child is NoteBlockModel =>
         matchModels(child, [NoteBlockModel]) &&
-        child.displayMode !== NoteDisplayMode.EdgelessOnly
+        child.props.displayMode !== NoteDisplayMode.EdgelessOnly
     );
     if (note) return note;
 
@@ -89,7 +89,7 @@ export class DocTitle extends WithDisposable(ShadowlessElement) {
 
       const inlineRange = this.inlineEditor?.getInlineRange();
       if (inlineRange) {
-        const rightText = this._rootModel.title.split(inlineRange.index);
+        const rightText = this._rootModel.props.title.split(inlineRange.index);
         const newFirstParagraphId = this.doc.addBlock(
           'affine:paragraph',
           { text: rightText },
@@ -129,7 +129,7 @@ export class DocTitle extends WithDisposable(ShadowlessElement) {
 
   private readonly _updateTitleInMeta = () => {
     this.doc.workspace.meta.setDocMeta(this.doc.id, {
-      title: this._rootModel.title.toString(),
+      title: this._rootModel.props.title.toString(),
     });
   };
 
@@ -188,14 +188,14 @@ export class DocTitle extends WithDisposable(ShadowlessElement) {
       this._updateTitleInMeta();
       this.requestUpdate();
     };
-    this._rootModel.title.yText.observe(updateMetaTitle);
+    this._rootModel.props.title.yText.observe(updateMetaTitle);
     this._disposables.add(() => {
-      this._rootModel.title.yText.unobserve(updateMetaTitle);
+      this._rootModel.props.title.yText.unobserve(updateMetaTitle);
     });
   }
 
   override render() {
-    const isEmpty = !this._rootModel.title.length && !this._isComposing;
+    const isEmpty = !this._rootModel.props.title.length && !this._isComposing;
 
     return html`
       <div
@@ -205,7 +205,7 @@ export class DocTitle extends WithDisposable(ShadowlessElement) {
         data-block-is-title="true"
       >
         <rich-text
-          .yText=${this._rootModel.title.yText}
+          .yText=${this._rootModel.props.title.yText}
           .undoManager=${this.doc.history}
           .verticalScrollContainerGetter=${() => this._viewport}
           .readonly=${this.doc.readonly}
diff --git a/blocksuite/affine/fragments/fragment-frame-panel/src/body/frame-panel-body.ts b/blocksuite/affine/fragments/fragment-frame-panel/src/body/frame-panel-body.ts
index 1f3da856a1..b9a9c6a2e2 100644
--- a/blocksuite/affine/fragments/fragment-frame-panel/src/body/frame-panel-body.ts
+++ b/blocksuite/affine/fragments/fragment-frame-panel/src/body/frame-panel-body.ts
@@ -150,7 +150,7 @@ export class FramePanelBody extends SignalWatcher(
   private readonly _updateFrameItems = () => {
     this._frameItems = this.frames.map((frame, idx) => ({
       frame,
-      frameIndex: frame.presentationIndex ?? frame.index,
+      frameIndex: frame.props.presentationIndex ?? frame.props.index,
       cardIndex: idx,
     }));
   };
@@ -307,8 +307,8 @@ export class FramePanelBody extends SignalWatcher(
 
       // update selected frames index
       // make the indexes larger than the frame before and smaller than the frame after
-      let before = frames[insertIndex - 1]?.presentationIndex || null;
-      const after = frames[insertIndex]?.presentationIndex || null;
+      let before = frames[insertIndex - 1]?.props.presentationIndex || null;
+      const after = frames[insertIndex]?.props.presentationIndex || null;
       selectedFrames.forEach(frame => {
         const newIndex = generateKeyBetweenV2(before, after);
         frame.doc.updateBlock(frame, {
@@ -352,7 +352,7 @@ export class FramePanelBody extends SignalWatcher(
     frames.forEach((frame, idx) => {
       const frameItem = {
         frame,
-        frameIndex: frame.presentationIndex ?? frame.index,
+        frameIndex: frame.props.presentationIndex ?? frame.props.index,
         cardIndex: idx,
       };
 
diff --git a/blocksuite/affine/fragments/fragment-frame-panel/src/card/frame-card-title-editor.ts b/blocksuite/affine/fragments/fragment-frame-panel/src/card/frame-card-title-editor.ts
index a0e6b0c036..6cc89d23c5 100644
--- a/blocksuite/affine/fragments/fragment-frame-panel/src/card/frame-card-title-editor.ts
+++ b/blocksuite/affine/fragments/fragment-frame-panel/src/card/frame-card-title-editor.ts
@@ -94,7 +94,7 @@ export class FrameCardTitleEditor extends WithDisposable(ShadowlessElement) {
       display: 'block',
     });
     return html`<rich-text
-      .yText=${this.frameModel.title.yText}
+      .yText=${this.frameModel.props.title.yText}
       .enableFormat=${false}
       .enableAutoScrollHorizontally=${true}
       .enableUndoRedo=${false}
diff --git a/blocksuite/affine/fragments/fragment-frame-panel/src/card/frame-card-title.ts b/blocksuite/affine/fragments/fragment-frame-panel/src/card/frame-card-title.ts
index 584403e44e..5f94e66386 100644
--- a/blocksuite/affine/fragments/fragment-frame-panel/src/card/frame-card-title.ts
+++ b/blocksuite/affine/fragments/fragment-frame-panel/src/card/frame-card-title.ts
@@ -116,7 +116,7 @@ export class FrameCardTitle extends WithDisposable(ShadowlessElement) {
         <span
           @click=${(e: MouseEvent) => e.stopPropagation()}
           @dblclick=${this._mountTitleEditor}
-          >${this.frame.title}</span
+          >${this.frame.props.title}</span
         >
       </div>
     </div>`;
@@ -124,7 +124,7 @@ export class FrameCardTitle extends WithDisposable(ShadowlessElement) {
 
   override updated(_changedProperties: PropertyValues) {
     if (_changedProperties.has('frame')) {
-      this._setFrameDisposables(this.frame.title.yText);
+      this._setFrameDisposables(this.frame.props.title.yText);
     }
   }
 
diff --git a/blocksuite/affine/fragments/fragment-outline/src/card/outline-card.ts b/blocksuite/affine/fragments/fragment-outline/src/card/outline-card.ts
index 099fa1d36f..85afd88cad 100644
--- a/blocksuite/affine/fragments/fragment-outline/src/card/outline-card.ts
+++ b/blocksuite/affine/fragments/fragment-outline/src/card/outline-card.ts
@@ -90,7 +90,8 @@ export class OutlineNoteCard extends SignalWatcher(
     this.disposables.add(
       std.dnd.draggable<NoteCardEntity>({
         element: this,
-        canDrag: () => this.note.displayMode !== NoteDisplayMode.EdgelessOnly,
+        canDrag: () =>
+          this.note.props.displayMode !== NoteDisplayMode.EdgelessOnly,
         onDragStart: () => {
           if (this.status !== 'selected') {
             this.dispatchEvent(
@@ -139,7 +140,7 @@ export class OutlineNoteCard extends SignalWatcher(
           noteId: this.note.id,
         }),
         canDrop: () => {
-          return this.note.displayMode !== NoteDisplayMode.EdgelessOnly;
+          return this.note.props.displayMode !== NoteDisplayMode.EdgelessOnly;
         },
       })
     );
@@ -167,16 +168,17 @@ export class OutlineNoteCard extends SignalWatcher(
   }
 
   override render() {
-    const { children, displayMode } = this.note;
+    const { displayMode } = this.note.props;
+    const { children } = this.note;
     const currentMode = this._getCurrentModeLabel(displayMode);
     const invisible =
-      this.note.displayMode$.value === NoteDisplayMode.EdgelessOnly;
+      this.note.props.displayMode$.value === NoteDisplayMode.EdgelessOnly;
 
     const enableSorting = this._context.enableSorting$.value;
 
     return html`
       <div
-        data-visibility=${this.note.displayMode}
+        data-visibility=${this.note.props.displayMode}
         data-sortable=${enableSorting}
         data-status=${this.status}
         class=${styles.outlineCard}
diff --git a/blocksuite/affine/fragments/fragment-outline/src/card/outline-preview.ts b/blocksuite/affine/fragments/fragment-outline/src/card/outline-preview.ts
index 41f64eb4a2..674c0ceb0d 100644
--- a/blocksuite/affine/fragments/fragment-outline/src/card/outline-preview.ts
+++ b/blocksuite/affine/fragments/fragment-outline/src/card/outline-preview.ts
@@ -45,8 +45,8 @@ export class OutlineBlockPreview extends SignalWatcher(
 
   private _TextBlockPreview(block: ParagraphBlockModel | ListBlockModel) {
     const deltas: DeltaInsert<AffineTextAttributes>[] =
-      block.text.yText.toDelta();
-    if (!block.text.length) return nothing;
+      block.props.text.yText.toDelta();
+    if (!block.props.text.length) return nothing;
     const iconClass = this.disabledIcon ? styles.iconDisabled : styles.icon;
 
     const previewText = deltas.map(delta => {
@@ -90,17 +90,21 @@ export class OutlineBlockPreview extends SignalWatcher(
     });
 
     const headingClass =
-      block.type in styles.subtypeStyles
-        ? styles.subtypeStyles[block.type as keyof typeof styles.subtypeStyles]
+      block.props.type in styles.subtypeStyles
+        ? styles.subtypeStyles[
+            block.props.type as keyof typeof styles.subtypeStyles
+          ]
         : '';
 
     return html`<span
-        data-testid="outline-block-preview-${block.type}"
+        data-testid="outline-block-preview-${block.props.type}"
         class="${styles.text} ${styles.textGeneral} ${headingClass}"
         >${previewText}</span
       >
       ${this._context.showIcons$.value
-        ? html`<span class=${iconClass}>${previewIconMap[block.type]}</span>`
+        ? html`<span class=${iconClass}
+            >${previewIconMap[block.props.type]}</span
+          >`
         : nothing}`;
   }
 
@@ -126,12 +130,12 @@ export class OutlineBlockPreview extends SignalWatcher(
     switch (block.flavour) {
       case 'affine:page':
         assertType<RootBlockModel>(block);
-        return block.title.length > 0
+        return block.props.title.length > 0
           ? html`<span
               data-testid="outline-block-preview-title"
               class="${styles.text} ${styles.subtypeStyles.title}"
             >
-              ${block.title$.value}
+              ${block.props.title$.value}
             </span>`
           : nothing;
       case 'affine:paragraph':
@@ -144,7 +148,9 @@ export class OutlineBlockPreview extends SignalWatcher(
         assertType<BookmarkBlockModel>(block);
         return html`
           <span class="${styles.text} ${styles.textGeneral}"
-            >${block.title || block.url || placeholderMap['bookmark']}</span
+            >${block.props.title ||
+            block.props.url ||
+            placeholderMap['bookmark']}</span
           >
           ${showPreviewIcon
             ? html`<span class=${iconClass}
@@ -156,7 +162,7 @@ export class OutlineBlockPreview extends SignalWatcher(
         assertType<CodeBlockModel>(block);
         return html`
           <span class="${styles.text} ${styles.textGeneral}"
-            >${block.language ?? placeholderMap['code']}</span
+            >${block.props.language ?? placeholderMap['code']}</span
           >
           ${showPreviewIcon
             ? html`<span class=${iconClass}>${previewIconMap['code']}</span>`
@@ -166,8 +172,8 @@ export class OutlineBlockPreview extends SignalWatcher(
         assertType<DatabaseBlockModel>(block);
         return html`
           <span class="${styles.text} ${styles.textGeneral}"
-            >${block.title.toString().length
-              ? block.title.toString()
+            >${block.props.title.toString().length
+              ? block.props.title.toString()
               : placeholderMap['database']}</span
           >
           ${showPreviewIcon
@@ -178,8 +184,8 @@ export class OutlineBlockPreview extends SignalWatcher(
         assertType<ImageBlockModel>(block);
         return html`
           <span class="${styles.text} ${styles.textGeneral}"
-            >${block.caption?.length
-              ? block.caption
+            >${block.props.caption?.length
+              ? block.props.caption
               : placeholderMap['image']}</span
           >
           ${showPreviewIcon
@@ -190,8 +196,8 @@ export class OutlineBlockPreview extends SignalWatcher(
         assertType<AttachmentBlockModel>(block);
         return html`
           <span class="${styles.text} ${styles.textGeneral}"
-            >${block.name?.length
-              ? block.name
+            >${block.props.name?.length
+              ? block.props.name
               : placeholderMap['attachment']}</span
           >
           ${showPreviewIcon
diff --git a/blocksuite/affine/fragments/fragment-outline/src/config.ts b/blocksuite/affine/fragments/fragment-outline/src/config.ts
index cea37bddca..b69ec7429b 100644
--- a/blocksuite/affine/fragments/fragment-outline/src/config.ts
+++ b/blocksuite/affine/fragments/fragment-outline/src/config.ts
@@ -27,7 +27,7 @@ import type { TemplateResult } from 'lit';
 const _16px = { width: '16px', height: '16px' };
 
 const paragraphIconMap: Record<
-  ParagraphBlockModel['type'],
+  ParagraphBlockModel['props']['type'],
   TemplateResult<1>
 > = {
   quote: QuoteIcon(_16px),
@@ -54,7 +54,10 @@ export const previewIconMap = {
   attachment: AttachmentIcon(_16px),
 };
 
-const paragraphPlaceholderMap: Record<ParagraphBlockModel['type'], string> = {
+const paragraphPlaceholderMap: Record<
+  ParagraphBlockModel['props']['type'],
+  string
+> = {
   quote: 'Quote',
   text: 'Text Block',
   h1: 'Heading 1',
diff --git a/blocksuite/affine/fragments/fragment-outline/src/mobile-outline-panel.ts b/blocksuite/affine/fragments/fragment-outline/src/mobile-outline-panel.ts
index 35e2fc39e7..0125695741 100644
--- a/blocksuite/affine/fragments/fragment-outline/src/mobile-outline-panel.ts
+++ b/blocksuite/affine/fragments/fragment-outline/src/mobile-outline-panel.ts
@@ -140,13 +140,13 @@ export class MobileOutlineMenu extends SignalWatcher(
     let text = '';
     if (matchModels(item, [RootBlockModel])) {
       className = 'title';
-      text = item.title$.value.toString();
+      text = item.props.title$.value.toString();
     } else if (
       matchModels(item, [ParagraphBlockModel]) &&
-      ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(item.type$.value)
+      ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(item.props.type$.value)
     ) {
-      className = item.type$.value;
-      text = item.text$.value.toString();
+      className = item.props.type$.value;
+      text = item.props.text$.value.toString();
     } else {
       return nothing;
     }
diff --git a/blocksuite/affine/fragments/fragment-outline/src/utils/query.ts b/blocksuite/affine/fragments/fragment-outline/src/utils/query.ts
index f1beff057d..fb34595059 100644
--- a/blocksuite/affine/fragments/fragment-outline/src/utils/query.ts
+++ b/blocksuite/affine/fragments/fragment-outline/src/utils/query.ts
@@ -25,7 +25,7 @@ export function getNotesFromDoc(
   rootModel.children.forEach(block => {
     if (!matchModels(block, [NoteBlockModel])) return;
 
-    if (modes.includes(block.displayMode$.value)) {
+    if (modes.includes(block.props.displayMode$.value)) {
       notes.push(block);
     }
   });
@@ -42,7 +42,7 @@ export function isHeadingBlock(
 ): block is ParagraphBlockModel {
   return (
     matchModels(block, [ParagraphBlockModel]) &&
-    headingKeys.has(block.type$.value)
+    headingKeys.has(block.props.type$.value)
   );
 }
 
diff --git a/blocksuite/affine/model/src/blocks/attachment/attachment-transformer.ts b/blocksuite/affine/model/src/blocks/attachment/attachment-transformer.ts
index b8608b0eb6..19c74070d4 100644
--- a/blocksuite/affine/model/src/blocks/attachment/attachment-transformer.ts
+++ b/blocksuite/affine/model/src/blocks/attachment/attachment-transformer.ts
@@ -24,7 +24,7 @@ export class AttachmentBlockTransformer extends BaseBlockTransformer<AttachmentB
     snapshot: ToSnapshotPayload<AttachmentBlockProps>
   ): BlockSnapshotLeaf {
     const snapshotRet = super.toSnapshot(snapshot);
-    const sourceId = snapshot.model.sourceId;
+    const sourceId = snapshot.model.props.sourceId;
     if (sourceId) {
       const pathBlobIdMap = snapshot.assets.getPathBlobIdMap();
       pathBlobIdMap.set(snapshot.model.id, sourceId);
diff --git a/blocksuite/affine/model/src/blocks/callout/callout-model.ts b/blocksuite/affine/model/src/blocks/callout/callout-model.ts
index 3ba2f013f1..881bb6d65b 100644
--- a/blocksuite/affine/model/src/blocks/callout/callout-model.ts
+++ b/blocksuite/affine/model/src/blocks/callout/callout-model.ts
@@ -31,9 +31,7 @@ export type CalloutProps = {
   text: Text;
 };
 
-export class CalloutBlockModel extends BlockModel<CalloutProps> {
-  override text!: Text;
-}
+export class CalloutBlockModel extends BlockModel<CalloutProps> {}
 
 export const CalloutBlockSchemaExtension =
   BlockSchemaExtension(CalloutBlockSchema);
diff --git a/blocksuite/affine/model/src/blocks/code/code-model.ts b/blocksuite/affine/model/src/blocks/code/code-model.ts
index a06e1a7b51..f755a1a26b 100644
--- a/blocksuite/affine/model/src/blocks/code/code-model.ts
+++ b/blocksuite/affine/model/src/blocks/code/code-model.ts
@@ -37,6 +37,4 @@ export const CodeBlockSchema = defineBlockSchema({
 
 export const CodeBlockSchemaExtension = BlockSchemaExtension(CodeBlockSchema);
 
-export class CodeBlockModel extends BlockModel<CodeBlockProps> {
-  override text!: Text;
-}
+export class CodeBlockModel extends BlockModel<CodeBlockProps> {}
diff --git a/blocksuite/affine/model/src/blocks/edgeless-text/edgeless-text-model.ts b/blocksuite/affine/model/src/blocks/edgeless-text/edgeless-text-model.ts
index 126542f420..f2f26c81a4 100644
--- a/blocksuite/affine/model/src/blocks/edgeless-text/edgeless-text-model.ts
+++ b/blocksuite/affine/model/src/blocks/edgeless-text/edgeless-text-model.ts
@@ -86,4 +86,13 @@ export const EdgelessTextBlockSchemaExtension = BlockSchemaExtension(
 
 export class EdgelessTextBlockModel
   extends GfxCompatible<EdgelessTextProps>(BlockModel)
-  implements GfxElementGeometry {}
+  implements GfxElementGeometry
+{
+  get color() {
+    return this.props.color;
+  }
+
+  set color(color: EdgelessTextProps['color']) {
+    this.props.color = color;
+  }
+}
diff --git a/blocksuite/affine/model/src/blocks/frame/frame-model.ts b/blocksuite/affine/model/src/blocks/frame/frame-model.ts
index cda24f1f3b..bc7c2b8207 100644
--- a/blocksuite/affine/model/src/blocks/frame/frame-model.ts
+++ b/blocksuite/affine/model/src/blocks/frame/frame-model.ts
@@ -87,7 +87,9 @@ export class FrameBlockModel
   }
 
   get childIds() {
-    return this.childElementIds ? Object.keys(this.childElementIds) : [];
+    return this.props.childElementIds
+      ? Object.keys(this.props.childElementIds)
+      : [];
   }
 
   get descendantElements(): GfxModel[] {
@@ -98,7 +100,10 @@ export class FrameBlockModel
     if (!canSafeAddToContainer(this, element)) return;
 
     this.doc.transact(() => {
-      this.childElementIds = { ...this.childElementIds, [element.id]: true };
+      this.props.childElementIds = {
+        ...this.props.childElementIds,
+        [element.id]: true,
+      };
     });
   }
 
@@ -114,8 +119,8 @@ export class FrameBlockModel
     }
 
     this.doc.transact(() => {
-      this.childElementIds = {
-        ...this.childElementIds,
+      this.props.childElementIds = {
+        ...this.props.childElementIds,
         ...newChildren,
       };
     });
@@ -126,7 +131,9 @@ export class FrameBlockModel
   }
 
   hasChild(element: GfxModel): boolean {
-    return this.childElementIds ? element.id in this.childElementIds : false;
+    return this.props.childElementIds
+      ? element.id in this.props.childElementIds
+      : false;
   }
 
   hasDescendant(element: GfxModel): boolean {
@@ -147,7 +154,8 @@ export class FrameBlockModel
 
   removeChild(element: GfxModel): void {
     this.doc.transact(() => {
-      this.childElementIds && delete this.childElementIds[element.id];
+      this.props.childElementIds &&
+        delete this.props.childElementIds[element.id];
     });
   }
 }
diff --git a/blocksuite/affine/model/src/blocks/image/image-transformer.ts b/blocksuite/affine/model/src/blocks/image/image-transformer.ts
index 4a5bcf4624..bc87a87a39 100644
--- a/blocksuite/affine/model/src/blocks/image/image-transformer.ts
+++ b/blocksuite/affine/model/src/blocks/image/image-transformer.ts
@@ -24,7 +24,7 @@ export class ImageBlockTransformer extends BaseBlockTransformer<ImageBlockProps>
     snapshot: ToSnapshotPayload<ImageBlockProps>
   ): BlockSnapshotLeaf {
     const snapshotRet = super.toSnapshot(snapshot);
-    const sourceId = snapshot.model.sourceId;
+    const sourceId = snapshot.model.props.sourceId;
     if (sourceId) {
       const pathBlobIdMap = snapshot.assets.getPathBlobIdMap();
       pathBlobIdMap.set(snapshot.model.id, sourceId);
diff --git a/blocksuite/affine/model/src/blocks/list/list-model.ts b/blocksuite/affine/model/src/blocks/list/list-model.ts
index af9be6c205..e5c34902de 100644
--- a/blocksuite/affine/model/src/blocks/list/list-model.ts
+++ b/blocksuite/affine/model/src/blocks/list/list-model.ts
@@ -44,6 +44,4 @@ export const ListBlockSchema = defineBlockSchema({
 
 export const ListBlockSchemaExtension = BlockSchemaExtension(ListBlockSchema);
 
-export class ListBlockModel extends BlockModel<ListProps> {
-  override text!: Text;
-}
+export class ListBlockModel extends BlockModel<ListProps> {}
diff --git a/blocksuite/affine/model/src/blocks/note/note-model.ts b/blocksuite/affine/model/src/blocks/note/note-model.ts
index 08f6cd8f6a..4967fc7698 100644
--- a/blocksuite/affine/model/src/blocks/note/note-model.ts
+++ b/blocksuite/affine/model/src/blocks/note/note-model.ts
@@ -130,7 +130,7 @@ export class NoteBlockModel
   implements GfxElementGeometry
 {
   private _isSelectable(): boolean {
-    return this.displayMode !== NoteDisplayMode.DocOnly;
+    return this.props.displayMode !== NoteDisplayMode.DocOnly;
   }
 
   override containsBound(bounds: Bound): boolean {
@@ -169,7 +169,7 @@ export class NoteBlockModel
       this.parent?.children.find(
         child =>
           child instanceof NoteBlockModel &&
-          child.displayMode !== NoteDisplayMode.EdgelessOnly
+          child.props.displayMode !== NoteDisplayMode.EdgelessOnly
       ) === this
     );
   }
diff --git a/blocksuite/affine/model/src/blocks/paragraph/paragraph-model.ts b/blocksuite/affine/model/src/blocks/paragraph/paragraph-model.ts
index a2a713c4b4..84ed8bb5b9 100644
--- a/blocksuite/affine/model/src/blocks/paragraph/paragraph-model.ts
+++ b/blocksuite/affine/model/src/blocks/paragraph/paragraph-model.ts
@@ -53,9 +53,7 @@ export const ParagraphBlockSchemaExtension =
   BlockSchemaExtension(ParagraphBlockSchema);
 
 export class ParagraphBlockModel extends BlockModel<ParagraphProps> {
-  override text!: Text;
-
   override isEmpty(): boolean {
-    return this.text$.value.length === 0 && this.children.length === 0;
+    return this.props.text$.value.length === 0 && this.children.length === 0;
   }
 }
diff --git a/blocksuite/affine/model/src/blocks/root/root-block-model.ts b/blocksuite/affine/model/src/blocks/root/root-block-model.ts
index 99b045b332..375e7b0fb5 100644
--- a/blocksuite/affine/model/src/blocks/root/root-block-model.ts
+++ b/blocksuite/affine/model/src/blocks/root/root-block-model.ts
@@ -18,9 +18,12 @@ export class RootBlockModel extends BlockModel<RootBlockProps> {
         const model = this.doc.getBlockById(id);
         if (model instanceof RootBlockModel) {
           const newDocMeta = this.doc.workspace.meta.getDocMeta(model.doc.id);
-          if (!newDocMeta || newDocMeta.title !== model.title.toString()) {
+          if (
+            !newDocMeta ||
+            newDocMeta.title !== model.props.title.toString()
+          ) {
             this.doc.workspace.meta.setDocMeta(model.doc.id, {
-              title: model.title.toString(),
+              title: model.props.title.toString(),
             });
           }
         }
diff --git a/blocksuite/affine/rich-text/src/format/delete-text.ts b/blocksuite/affine/rich-text/src/format/delete-text.ts
index 6e29390e6b..06d7649a5b 100644
--- a/blocksuite/affine/rich-text/src/format/delete-text.ts
+++ b/blocksuite/affine/rich-text/src/format/delete-text.ts
@@ -26,7 +26,7 @@ export const deleteTextCommand: Command<{
 
   let fromText: Text | undefined;
   if (matchModels(fromElement.model, [RootBlockModel])) {
-    fromText = fromElement.model.title;
+    fromText = fromElement.model.props.title;
   } else {
     fromText = fromElement.model.text;
   }
diff --git a/blocksuite/affine/rich-text/src/markdown/divider.ts b/blocksuite/affine/rich-text/src/markdown/divider.ts
index 1c1ad817a3..9d58143fb5 100644
--- a/blocksuite/affine/rich-text/src/markdown/divider.ts
+++ b/blocksuite/affine/rich-text/src/markdown/divider.ts
@@ -17,7 +17,7 @@ export function toDivider(
   const { store: doc } = std;
   if (
     matchModels(model, [DividerBlockModel]) ||
-    (matchModels(model, [ParagraphBlockModel]) && model.type === 'quote')
+    (matchModels(model, [ParagraphBlockModel]) && model.props.type === 'quote')
   ) {
     return;
   }
diff --git a/blocksuite/affine/rich-text/src/markdown/markdown-input.ts b/blocksuite/affine/rich-text/src/markdown/markdown-input.ts
index a50998c187..ee422d3377 100644
--- a/blocksuite/affine/rich-text/src/markdown/markdown-input.ts
+++ b/blocksuite/affine/rich-text/src/markdown/markdown-input.ts
@@ -38,8 +38,8 @@ export function markdownInput(
   if (!isMarkdownPrefix(prefixText)) return;
 
   const isParagraph = matchModels(model, [ParagraphBlockModel]);
-  const isHeading = isParagraph && model.type.startsWith('h');
-  const isParagraphQuoteBlock = isParagraph && model.type === 'quote';
+  const isHeading = isParagraph && model.props.type.startsWith('h');
+  const isParagraphQuoteBlock = isParagraph && model.props.type === 'quote';
   const isCodeBlock = matchModels(model, [CodeBlockModel]);
   if (
     isHeading ||
diff --git a/blocksuite/affine/rich-text/src/markdown/paragraph.ts b/blocksuite/affine/rich-text/src/markdown/paragraph.ts
index f9fe82c07a..c8a5466b7b 100644
--- a/blocksuite/affine/rich-text/src/markdown/paragraph.ts
+++ b/blocksuite/affine/rich-text/src/markdown/paragraph.ts
@@ -36,7 +36,7 @@ export function toParagraph(
     return id;
   }
 
-  if (matchModels(model, [ParagraphBlockModel]) && model.type !== type) {
+  if (matchModels(model, [ParagraphBlockModel]) && model.props.type !== type) {
     beforeConvert(std, model, prefix.length);
 
     doc.updateBlock(model, { type });
diff --git a/blocksuite/affine/rich-text/src/markdown/to-code.ts b/blocksuite/affine/rich-text/src/markdown/to-code.ts
index f187feeb26..b91dc5796f 100644
--- a/blocksuite/affine/rich-text/src/markdown/to-code.ts
+++ b/blocksuite/affine/rich-text/src/markdown/to-code.ts
@@ -11,7 +11,10 @@ export function toCode(
   prefixText: string,
   language: string | null
 ) {
-  if (matchModels(model, [ParagraphBlockModel]) && model.type === 'quote') {
+  if (
+    matchModels(model, [ParagraphBlockModel]) &&
+    model.props.type === 'quote'
+  ) {
     return;
   }
 
diff --git a/blocksuite/affine/shared/src/adapters/middlewares/copy.ts b/blocksuite/affine/shared/src/adapters/middlewares/copy.ts
index ea7d73d955..c07d8fba51 100644
--- a/blocksuite/affine/shared/src/adapters/middlewares/copy.ts
+++ b/blocksuite/affine/shared/src/adapters/middlewares/copy.ts
@@ -25,7 +25,7 @@ const handlePoint = (
   if (isRootDraftModel(model)) {
     if (length === 0) return;
     (snapshot.props.title as Record<string, unknown>).delta =
-      model.title.sliceToDelta(index, length + index);
+      model.props.title.sliceToDelta(index, length + index);
     return;
   }
 
diff --git a/blocksuite/affine/shared/src/adapters/middlewares/paste.ts b/blocksuite/affine/shared/src/adapters/middlewares/paste.ts
index 6dc3795cfe..a5073090f7 100644
--- a/blocksuite/affine/shared/src/adapters/middlewares/paste.ts
+++ b/blocksuite/affine/shared/src/adapters/middlewares/paste.ts
@@ -485,7 +485,7 @@ class PasteTr {
     if (this.firstSnapshot!.props.type) {
       this.firstSnapshot!.props.type = (
         this.pointState.model as ParagraphBlockModel
-      ).type;
+      ).props.type;
     }
   }
 
diff --git a/blocksuite/affine/shared/src/adapters/middlewares/replace-id.ts b/blocksuite/affine/shared/src/adapters/middlewares/replace-id.ts
index 113c542062..d1cb573eaa 100644
--- a/blocksuite/affine/shared/src/adapters/middlewares/replace-id.ts
+++ b/blocksuite/affine/shared/src/adapters/middlewares/replace-id.ts
@@ -19,10 +19,10 @@ export const replaceIdMiddleware =
         payload.snapshot.flavour === 'affine:database'
       ) {
         const model = payload.model as DatabaseBlockModel;
-        Object.keys(model.cells).forEach(cellId => {
+        Object.keys(model.props.cells).forEach(cellId => {
           if (idMap.has(cellId)) {
-            model.cells[idMap.get(cellId)!] = model.cells[cellId];
-            delete model.cells[cellId];
+            model.props.cells[idMap.get(cellId)!] = model.props.cells[cellId];
+            delete model.props.cells[cellId];
           }
         });
       }
@@ -35,7 +35,7 @@ export const replaceIdMiddleware =
         const model = payload.model as ParagraphBlockModel | ListBlockModel;
         let prev = 0;
         const delta: DeltaOperation[] = [];
-        for (const d of model.text.toDelta()) {
+        for (const d of model.props.text.toDelta()) {
           if (d.attributes?.reference?.pageId) {
             const newId = idMap.get(d.attributes.reference.pageId);
             if (!newId) {
@@ -62,7 +62,7 @@ export const replaceIdMiddleware =
           }
         }
         if (delta.length > 0) {
-          model.text.applyDelta(delta);
+          model.props.text.applyDelta(delta);
         }
       }
 
@@ -71,20 +71,20 @@ export const replaceIdMiddleware =
         payload.snapshot.flavour === 'affine:surface-ref'
       ) {
         const model = payload.model as SurfaceRefBlockModel;
-        const original = model.reference;
+        const original = model.props.reference;
         // If there exists a replacement, replace the reference with the new id.
         // Otherwise,
         // 1. If the reference is an affine:frame not in doc, generate a new id.
         // 2. If the reference is graph, keep the original id.
         if (idMap.has(original)) {
-          model.reference = idMap.get(original)!;
+          model.props.reference = idMap.get(original)!;
         } else if (
-          model.refFlavour === 'affine:frame' &&
+          model.props.refFlavour === 'affine:frame' &&
           !model.doc.hasBlock(original)
         ) {
           const newId = idGenerator();
           idMap.set(original, newId);
-          model.reference = newId;
+          model.props.reference = newId;
         }
       }
 
@@ -98,16 +98,16 @@ export const replaceIdMiddleware =
         const model = payload.model as
           | EmbedLinkedDocModel
           | EmbedSyncedDocModel;
-        const original = model.pageId;
+        const original = model.props.pageId;
         // If the pageId is not in the doc, generate a new id.
         // If we already have a replacement, use it.
         if (!docCRUD.get(original)) {
           if (idMap.has(original)) {
-            model.pageId = idMap.get(original)!;
+            model.props.pageId = idMap.get(original)!;
           } else {
             const newId = idGenerator();
             idMap.set(original, newId);
-            model.pageId = newId;
+            model.props.pageId = newId;
           }
         }
       }
diff --git a/blocksuite/affine/shared/src/services/block-meta-service.ts b/blocksuite/affine/shared/src/services/block-meta-service.ts
index 1732daeeae..df7f00b53b 100644
--- a/blocksuite/affine/shared/src/services/block-meta-service.ts
+++ b/blocksuite/affine/shared/src/services/block-meta-service.ts
@@ -59,13 +59,6 @@ export class BlockMetaService extends StoreExtension {
     const now = getNow();
 
     this.store.withoutTransact(() => {
-      const isFlatModel = model.schema.model.isFlatData;
-      if (!isFlatModel) {
-        model['meta:createdAt'] = now;
-        model['meta:createdBy'] = writer.id;
-        return;
-      }
-
       model.props['meta:createdAt'] = now;
       model.props['meta:createdBy'] = writer.id;
     });
@@ -81,19 +74,6 @@ export class BlockMetaService extends StoreExtension {
     const now = getNow();
 
     this.store.withoutTransact(() => {
-      const isFlatModel = model.schema.model.isFlatData;
-      if (!isFlatModel) {
-        model['meta:updatedAt'] = now;
-        model['meta:updatedBy'] = writer.id;
-        if (!model['meta:createdAt']) {
-          model['meta:createdAt'] = now;
-        }
-        if (!model['meta:createdBy']) {
-          model['meta:createdBy'] = writer.id;
-        }
-        return;
-      }
-
       model.props['meta:updatedAt'] = now;
       model.props['meta:updatedBy'] = writer.id;
       if (!model.props['meta:createdAt']) {
diff --git a/blocksuite/affine/shared/src/utils/collapsed/paragraph.ts b/blocksuite/affine/shared/src/utils/collapsed/paragraph.ts
index 69948af48e..c36dc60f42 100644
--- a/blocksuite/affine/shared/src/utils/collapsed/paragraph.ts
+++ b/blocksuite/affine/shared/src/utils/collapsed/paragraph.ts
@@ -16,10 +16,10 @@ export function calculateCollapsedSiblings(
     if (
       i > index &&
       matchModels(child, [ParagraphBlockModel]) &&
-      child.type.startsWith('h')
+      child.props.type.startsWith('h')
     ) {
-      const modelLevel = parseInt(model.type.slice(1));
-      const childLevel = parseInt(child.type.slice(1));
+      const modelLevel = parseInt(model.props.type.slice(1));
+      const childLevel = parseInt(child.props.type.slice(1));
       return childLevel <= modelLevel;
     }
     return false;
@@ -47,7 +47,7 @@ export function getNearestHeadingBefore(
     const sibling = parent.children[i];
     if (
       matchModels(sibling, [ParagraphBlockModel]) &&
-      sibling.type.startsWith('h')
+      sibling.props.type.startsWith('h')
     ) {
       return sibling;
     }
diff --git a/blocksuite/affine/shared/src/utils/model/getter.ts b/blocksuite/affine/shared/src/utils/model/getter.ts
index 21bb33257d..850a71db1e 100644
--- a/blocksuite/affine/shared/src/utils/model/getter.ts
+++ b/blocksuite/affine/shared/src/utils/model/getter.ts
@@ -49,7 +49,7 @@ export function getLastNoteBlock(doc: Store) {
     const child = children[i];
     if (
       matchModels(child, [NoteBlockModel]) &&
-      child.displayMode !== NoteDisplayMode.EdgelessOnly
+      child.props.displayMode !== NoteDisplayMode.EdgelessOnly
     ) {
       note = child as NoteBlockModel;
       break;
@@ -65,7 +65,7 @@ export function getFirstNoteBlock(doc: Store) {
   for (const child of children) {
     if (
       matchModels(child, [NoteBlockModel]) &&
-      child.displayMode !== NoteDisplayMode.EdgelessOnly
+      child.props.displayMode !== NoteDisplayMode.EdgelessOnly
     ) {
       note = child as NoteBlockModel;
       break;
diff --git a/blocksuite/affine/shared/src/utils/model/list.ts b/blocksuite/affine/shared/src/utils/model/list.ts
index 71b23b89bd..d54084bcd1 100644
--- a/blocksuite/affine/shared/src/utils/model/list.ts
+++ b/blocksuite/affine/shared/src/utils/model/list.ts
@@ -23,7 +23,7 @@ export function getNextContinuousNumberedLists(
   const firstNotNumberedListIndex = parent.children.findIndex(
     (model, i) =>
       i > modelIndex &&
-      (!matchModels(model, [ListBlockModel]) || model.type !== 'numbered')
+      (!matchModels(model, [ListBlockModel]) || model.props.type !== 'numbered')
   );
   const newContinuousLists = parent.children.slice(
     modelIndex + 1,
@@ -31,7 +31,8 @@ export function getNextContinuousNumberedLists(
   );
   if (
     !newContinuousLists.every(
-      model => matchModels(model, [ListBlockModel]) && model.type === 'numbered'
+      model =>
+        matchModels(model, [ListBlockModel]) && model.props.type === 'numbered'
     )
   )
     return [];
@@ -56,11 +57,11 @@ export function toNumberedList(
   if (
     prevSibling &&
     matchModels(prevSibling, [ListBlockModel]) &&
-    prevSibling.type === 'numbered'
+    prevSibling.props.type === 'numbered'
   ) {
     doc.transact(() => {
-      if (!prevSibling.order) prevSibling.order = 1;
-      realOrder = prevSibling.order + 1;
+      if (!prevSibling.props.order) prevSibling.props.order = 1;
+      realOrder = prevSibling.props.order + 1;
     });
   }
 
@@ -93,7 +94,7 @@ export function toNumberedList(
   let base = realOrder + 1;
   nextContinuousNumberedLists.forEach(list => {
     doc.transact(() => {
-      list.order = base;
+      list.props.order = base;
     });
     base += 1;
   });
diff --git a/blocksuite/affine/widgets/widget-drag-handle/src/middleware/new-id-cross-doc.ts b/blocksuite/affine/widgets/widget-drag-handle/src/middleware/new-id-cross-doc.ts
index c11ca250dc..755277d597 100644
--- a/blocksuite/affine/widgets/widget-drag-handle/src/middleware/new-id-cross-doc.ts
+++ b/blocksuite/affine/widgets/widget-drag-handle/src/middleware/new-id-cross-doc.ts
@@ -27,7 +27,7 @@ export const newIdCrossDoc =
         payload.type === 'block' &&
         matchModels(payload.model, [DatabaseBlockModel])
       ) {
-        const originalCells = payload.model.cells;
+        const originalCells = payload.model.props.cells;
         const newCells = {
           ...originalCells,
         };
@@ -38,7 +38,7 @@ export const newIdCrossDoc =
           }
         });
 
-        payload.model.cells$.value = newCells;
+        payload.model.props.cells$.value = newCells;
       }
     });
   };
diff --git a/blocksuite/affine/widgets/widget-drag-handle/src/middleware/reorder-list.ts b/blocksuite/affine/widgets/widget-drag-handle/src/middleware/reorder-list.ts
index 3e9f55c5e5..865fb279f6 100644
--- a/blocksuite/affine/widgets/widget-drag-handle/src/middleware/reorder-list.ts
+++ b/blocksuite/affine/widgets/widget-drag-handle/src/middleware/reorder-list.ts
@@ -10,7 +10,10 @@ export const reorderList =
     slots.afterImport.subscribe(payload => {
       if (payload.type === 'block') {
         const model = payload.model;
-        if (matchModels(model, [ListBlockModel]) && model.type === 'numbered') {
+        if (
+          matchModels(model, [ListBlockModel]) &&
+          model.props.type === 'numbered'
+        ) {
           const next = std.store.getNext(model);
           correctNumberedListsOrderToPrev(std.store, model);
           if (next) {
diff --git a/blocksuite/affine/widgets/widget-drag-handle/src/utils.ts b/blocksuite/affine/widgets/widget-drag-handle/src/utils.ts
index dfcb2270ec..dfe1ad62a0 100644
--- a/blocksuite/affine/widgets/widget-drag-handle/src/utils.ts
+++ b/blocksuite/affine/widgets/widget-drag-handle/src/utils.ts
@@ -59,8 +59,8 @@ export const getDragHandleContainerHeight = (model: BlockModel) => {
   const flavour = model.flavour;
   const index = flavour.indexOf(':');
   let key = flavour.slice(index + 1);
-  if (key === 'paragraph' && (model as ParagraphBlockModel).type) {
-    key = (model as ParagraphBlockModel).type;
+  if (key === 'paragraph' && (model as ParagraphBlockModel).props.type) {
+    key = (model as ParagraphBlockModel).props.type;
   }
 
   const height = heightMap[key] ?? DRAG_HANDLE_CONTAINER_HEIGHT;
@@ -253,7 +253,7 @@ export function getDragHandleLeftPadding(blocks: BlockComponent[]) {
       (matchModels(block.model, [ListBlockModel]) &&
         block.model.children.length > 0) ||
       (block instanceof ParagraphBlockComponent &&
-        block.model.type.startsWith('h') &&
+        block.model.props.type.startsWith('h') &&
         block.collapsedSiblings.length > 0)
   );
   const offsetLeft = hasToggleList
diff --git a/blocksuite/affine/widgets/widget-drag-handle/src/watchers/drag-event-watcher.ts b/blocksuite/affine/widgets/widget-drag-handle/src/watchers/drag-event-watcher.ts
index 24cd7638c1..8a0dea12c7 100644
--- a/blocksuite/affine/widgets/widget-drag-handle/src/watchers/drag-event-watcher.ts
+++ b/blocksuite/affine/widgets/widget-drag-handle/src/watchers/drag-event-watcher.ts
@@ -454,8 +454,8 @@ export class DragEventWatcher {
         // if block is toggled heading, should select all siblings
         if (
           block instanceof ParagraphBlockComponent &&
-          block.model.type.startsWith('h') &&
-          block.model.collapsed
+          block.model.props.type.startsWith('h') &&
+          block.model.props.collapsed
         ) {
           const collapsedSiblings = block.collapsedSiblings.flatMap(
             sibling => this.widget.host.view.getBlock(sibling.id) ?? []
diff --git a/blocksuite/affine/widgets/widget-drag-handle/src/watchers/pointer-event-watcher.ts b/blocksuite/affine/widgets/widget-drag-handle/src/watchers/pointer-event-watcher.ts
index f3b1e95315..e72839be45 100644
--- a/blocksuite/affine/widgets/widget-drag-handle/src/watchers/pointer-event-watcher.ts
+++ b/blocksuite/affine/widgets/widget-drag-handle/src/watchers/pointer-event-watcher.ts
@@ -258,7 +258,7 @@ export class PointerEventWatcher {
       this.widget.noteScale.value =
         this.widget.mode === 'page'
           ? 1
-          : (closestNoteBlock?.model.edgeless.scale ?? 1);
+          : (closestNoteBlock?.model.props.edgeless.scale ?? 1);
 
       if (
         closestNoteBlock &&
diff --git a/blocksuite/affine/widgets/widget-edgeless-auto-connect/src/index.ts b/blocksuite/affine/widgets/widget-edgeless-auto-connect/src/index.ts
index 41cea4a93b..ff0d071448 100644
--- a/blocksuite/affine/widgets/widget-edgeless-auto-connect/src/index.ts
+++ b/blocksuite/affine/widgets/widget-edgeless-auto-connect/src/index.ts
@@ -199,16 +199,18 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<RootBlockModel> {
 
     notes.forEach(note => {
       if (isNoteBlock(note)) {
-        if (note.displayMode$.value === NoteDisplayMode.EdgelessOnly) {
+        if (note.props.displayMode$.value === NoteDisplayMode.EdgelessOnly) {
           edgelessOnlyNotesSet.add(note);
-        } else if (note.displayMode$.value === NoteDisplayMode.DocAndEdgeless) {
+        } else if (
+          note.props.displayMode$.value === NoteDisplayMode.DocAndEdgeless
+        ) {
           pageVisibleBlocks.set(note, 1);
         }
       }
 
       note.children.forEach(model => {
         if (matchModels(model, [SurfaceRefBlockModel])) {
-          const reference = this._crud.getElementById(model.reference);
+          const reference = this._crud.getElementById(model.props.reference);
 
           if (!isAutoConnectElement(reference)) return;
 
@@ -294,7 +296,9 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<RootBlockModel> {
         selectedElements.length === 1 &&
         !this._selection.editing &&
         (isNoteBlock(selectedElements[0]) ||
-          surfaceRefs.some(ref => ref.reference === selectedElements[0].id))
+          surfaceRefs.some(
+            ref => ref.props.reference === selectedElements[0].id
+          ))
       ) {
         this._show = true;
       } else {
@@ -342,7 +346,7 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<RootBlockModel> {
         surface.elementUpdated.subscribe(payload => {
           if (
             payload.props['xywh'] &&
-            surfaceRefs.some(ref => ref.reference === payload.id)
+            surfaceRefs.some(ref => ref.props.reference === payload.id)
           ) {
             this.requestUpdate();
           }
diff --git a/blocksuite/affine/widgets/widget-frame-title/src/frame-title.ts b/blocksuite/affine/widgets/widget-frame-title/src/frame-title.ts
index c351b41658..0a0651461d 100644
--- a/blocksuite/affine/widgets/widget-frame-title/src/frame-title.ts
+++ b/blocksuite/affine/widgets/widget-frame-title/src/frame-title.ts
@@ -38,7 +38,7 @@ export class AffineFrameTitle extends SignalWatcher(
   get colors() {
     let backgroundColor = this.std
       .get(ThemeProvider)
-      .getColorValue(this.model.background, undefined, true);
+      .getColorValue(this.model.props.background, undefined, true);
     if (isTransparent(backgroundColor)) {
       backgroundColor = this.std
         .get(ThemeProvider)
@@ -206,14 +206,14 @@ export class AffineFrameTitle extends SignalWatcher(
     this._zoom = gfx.viewport.zoom;
 
     const updateTitle = () => {
-      this._frameTitle = this.model.title.toString().trim();
+      this._frameTitle = this.model.props.title.toString().trim();
     };
     _disposables.add(() => {
-      this.model.title.yText.unobserve(updateTitle);
+      this.model.props.title.yText.unobserve(updateTitle);
     });
-    this.model.title.yText.observe(updateTitle);
+    this.model.props.title.yText.observe(updateTitle);
 
-    this._frameTitle = this.model.title.toString().trim();
+    this._frameTitle = this.model.props.title.toString().trim();
     this._xywh = this.model.xywh;
   }
 
diff --git a/blocksuite/affine/widgets/widget-slash-menu/src/config.ts b/blocksuite/affine/widgets/widget-slash-menu/src/config.ts
index f378f52ea5..e48ab57e3f 100644
--- a/blocksuite/affine/widgets/widget-slash-menu/src/config.ts
+++ b/blocksuite/affine/widgets/widget-slash-menu/src/config.ts
@@ -1,5 +1,8 @@
 import { toast } from '@blocksuite/affine-components/toast';
-import type { ParagraphBlockModel } from '@blocksuite/affine-model';
+import type {
+  ListBlockModel,
+  ParagraphBlockModel,
+} from '@blocksuite/affine-model';
 import { insertContent } from '@blocksuite/affine-rich-text';
 import {
   ArrowDownBigIcon,
@@ -149,14 +152,17 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
           }
           const index = parent.children.indexOf(model);
 
-          // TODO add clone model util
+          // FIXME: this clone is not correct
           host.doc.addBlock(
-            model.flavour as never,
+            model.flavour,
             {
-              type: (model as ParagraphBlockModel).type,
-              text: new Text(model.text.toDelta() as DeltaInsert[]),
-              // @ts-expect-error FIXME: ts error
-              checked: model.checked,
+              type: (model as ParagraphBlockModel).props.type,
+              text: new Text(
+                (
+                  model as ParagraphBlockModel
+                ).props.text.toDelta() as DeltaInsert[]
+              ),
+              checked: (model as ListBlockModel).props.checked,
             },
             host.doc.getParent(model),
             index
diff --git a/blocksuite/framework/block-std/src/__tests__/editor-host.unit.spec.ts b/blocksuite/framework/block-std/src/__tests__/editor-host.unit.spec.ts
index 389ae10e28..1a659b6af5 100644
--- a/blocksuite/framework/block-std/src/__tests__/editor-host.unit.spec.ts
+++ b/blocksuite/framework/block-std/src/__tests__/editor-host.unit.spec.ts
@@ -54,7 +54,7 @@ describe('editor host', () => {
 
     expect(headingElm!.tagName).toBe('TEST-H1-BLOCK');
 
-    (headingBlock.model as HeadingBlockModel).type = 'h2';
+    (headingBlock.model as HeadingBlockModel).props.type = 'h2';
     await wait(50);
     headingElm = editorContainer.std.view.getBlock(headingId);
 
diff --git a/blocksuite/framework/block-std/src/__tests__/test-spec.ts b/blocksuite/framework/block-std/src/__tests__/test-spec.ts
index 9cecf4e59c..3f5871481c 100644
--- a/blocksuite/framework/block-std/src/__tests__/test-spec.ts
+++ b/blocksuite/framework/block-std/src/__tests__/test-spec.ts
@@ -12,7 +12,7 @@ export const testSpecs: ExtensionType[] = [
   BlockViewExtension('test:note', literal`test-note-block`),
 
   BlockViewExtension('test:heading', model => {
-    const h = (model as HeadingBlockModel).type$.value;
+    const h = (model as HeadingBlockModel).props.type$.value;
 
     if (h === 'h1') {
       return literal`test-h1-block`;
diff --git a/blocksuite/framework/block-std/src/gfx/model/gfx-block-model.ts b/blocksuite/framework/block-std/src/gfx/model/gfx-block-model.ts
index 2649559ea9..e75984a117 100644
--- a/blocksuite/framework/block-std/src/gfx/model/gfx-block-model.ts
+++ b/blocksuite/framework/block-std/src/gfx/model/gfx-block-model.ts
@@ -63,6 +63,42 @@ export class GfxBlockElementModel<
 
   connectable = true;
 
+  get xywh() {
+    return this.props.xywh;
+  }
+
+  get xywh$() {
+    return this.props.xywh$;
+  }
+
+  set xywh(xywh: SerializedXYWH) {
+    this.props.xywh = xywh;
+  }
+
+  get index() {
+    return this.props.index;
+  }
+
+  get index$() {
+    return this.props.index$;
+  }
+
+  set index(index: string) {
+    this.props.index = index;
+  }
+
+  get lockedBySelf(): boolean | undefined {
+    return this.props.lockedBySelf;
+  }
+
+  get lockedBySelf$() {
+    return this.props.lockedBySelf$;
+  }
+
+  set lockedBySelf(lockedBySelf: boolean | undefined) {
+    this.props.lockedBySelf = lockedBySelf;
+  }
+
   /**
    * Defines the extension of the response area beyond the element's bounding box.
    * This tuple specifies the horizontal and vertical margins to be added to the element's [x, y, width, height].
diff --git a/blocksuite/framework/block-std/src/gfx/model/surface/surface-model.ts b/blocksuite/framework/block-std/src/gfx/model/surface/surface-model.ts
index 83cd499ca2..d46ffc8118 100644
--- a/blocksuite/framework/block-std/src/gfx/model/surface/surface-model.ts
+++ b/blocksuite/framework/block-std/src/gfx/model/surface/surface-model.ts
@@ -109,6 +109,10 @@ export class SurfaceBlockModel extends BlockModel<SurfaceBlockProps> {
     return models;
   }
 
+  get elements() {
+    return this.props.elements;
+  }
+
   get localElementModels() {
     return this.localElements;
   }
diff --git a/blocksuite/framework/store/src/__tests__/block.unit.spec.ts b/blocksuite/framework/store/src/__tests__/block.unit.spec.ts
index 71e3288979..0b1adf01b8 100644
--- a/blocksuite/framework/store/src/__tests__/block.unit.spec.ts
+++ b/blocksuite/framework/store/src/__tests__/block.unit.spec.ts
@@ -104,8 +104,8 @@ test('init block without props should add default props', () => {
   const model = block.model as RootModel;
 
   expect(yBlock.get('prop:count')).toBe(0);
-  expect(model.count).toBe(0);
-  expect(model.style).toEqual({});
+  expect(model.props.count).toBe(0);
+  expect(model.props.style).toEqual({});
 });
 
 describe('block model should has signal props', () => {
@@ -120,38 +120,38 @@ describe('block model should has signal props', () => {
     const block = new Block(doc.schema, yBlock, doc);
     const model = block.model as RootModel;
 
-    const isOdd = computed(() => model.count$.value % 2 === 1);
+    const isOdd = computed(() => model.props.count$.value % 2 === 1);
 
-    expect(model.count$.value).toBe(0);
+    expect(model.props.count$.value).toBe(0);
     expect(isOdd.peek()).toBe(false);
 
     // set prop
-    model.count = 1;
-    expect(model.count$.value).toBe(1);
+    model.props.count = 1;
+    expect(model.props.count$.value).toBe(1);
     expect(isOdd.peek()).toBe(true);
     expect(yBlock.get('prop:count')).toBe(1);
 
     // set signal
-    model.count$.value = 2;
-    expect(model.count).toBe(2);
+    model.props.count$.value = 2;
+    expect(model.props.count).toBe(2);
     expect(isOdd.peek()).toBe(false);
     expect(yBlock.get('prop:count')).toBe(2);
 
     // set prop
     yBlock.set('prop:count', 3);
-    expect(model.count).toBe(3);
-    expect(model.count$.value).toBe(3);
+    expect(model.props.count).toBe(3);
+    expect(model.props.count$.value).toBe(3);
     expect(isOdd.peek()).toBe(true);
 
     const toggleEffect = vi.fn();
     effect(() => {
-      toggleEffect(model.toggle$.value);
+      toggleEffect(model.props.toggle$.value);
     });
     expect(toggleEffect).toHaveBeenCalledTimes(1);
     const runToggle = () => {
-      const next = !model.toggle;
-      model.toggle = next;
-      expect(model.toggle$.value).toBe(next);
+      const next = !model.props.toggle;
+      model.props.toggle = next;
+      expect(model.props.toggle$.value).toBe(next);
     };
     const times = 10;
     for (let i = 0; i < times; i++) {
@@ -159,9 +159,9 @@ describe('block model should has signal props', () => {
     }
     expect(toggleEffect).toHaveBeenCalledTimes(times + 1);
     const runToggleReverse = () => {
-      const next = !model.toggle;
-      model.toggle$.value = next;
-      expect(model.toggle).toBe(next);
+      const next = !model.props.toggle;
+      model.props.toggle$.value = next;
+      expect(model.props.toggle).toBe(next);
     };
     for (let i = 0; i < times; i++) {
       runToggleReverse();
@@ -179,22 +179,22 @@ describe('block model should has signal props', () => {
 
     const block = new Block(doc.schema, yBlock, doc);
     const model = block.model as RootModel;
-    expect(model.style).toEqual({});
+    expect(model.props.style).toEqual({});
 
-    model.style = { color: 'red' };
+    model.props.style = { color: 'red' };
     expect((yBlock.get('prop:style') as Y.Map<unknown>).toJSON()).toEqual({
       color: 'red',
     });
-    expect(model.style$.value).toEqual({ color: 'red' });
+    expect(model.props.style$.value).toEqual({ color: 'red' });
 
-    model.style.color = 'yellow';
+    model.props.style.color = 'yellow';
     expect((yBlock.get('prop:style') as Y.Map<unknown>).toJSON()).toEqual({
       color: 'yellow',
     });
-    expect(model.style$.value).toEqual({ color: 'yellow' });
+    expect(model.props.style$.value).toEqual({ color: 'yellow' });
 
-    model.style$.value = { color: 'blue' };
-    expect(model.style.color).toBe('blue');
+    model.props.style$.value = { color: 'blue' };
+    expect(model.props.style.color).toBe('blue');
     expect((yBlock.get('prop:style') as Y.Map<unknown>).toJSON()).toEqual({
       color: 'blue',
     });
@@ -202,8 +202,8 @@ describe('block model should has signal props', () => {
     const map = new Y.Map();
     map.set('color', 'green');
     yBlock.set('prop:style', map);
-    expect(model.style.color).toBe('green');
-    expect(model.style$.value).toEqual({ color: 'green' });
+    expect(model.props.style.color).toBe('green');
+    expect(model.props.style$.value).toEqual({ color: 'green' });
   });
 
   test('with stash and pop', () => {
@@ -218,34 +218,34 @@ describe('block model should has signal props', () => {
     const block = new Block(doc.schema, yBlock, doc, { onChange });
     const model = block.model as RootModel;
 
-    expect(model.count).toBe(0);
+    expect(model.props.count).toBe(0);
     model.stash('count');
 
     onChange.mockClear();
-    model.count = 1;
-    expect(model.count$.value).toBe(1);
+    model.props.count = 1;
+    expect(model.props.count$.value).toBe(1);
     expect(yBlock.get('prop:count')).toBe(0);
     expect(onChange).toHaveBeenCalledTimes(1);
 
-    model.count$.value = 2;
-    expect(model.count).toBe(2);
+    model.props.count$.value = 2;
+    expect(model.props.count).toBe(2);
     expect(yBlock.get('prop:count')).toBe(0);
     expect(onChange).toHaveBeenCalledTimes(2);
 
     model.pop('count');
     expect(yBlock.get('prop:count')).toBe(2);
-    expect(model.count).toBe(2);
-    expect(model.count$.value).toBe(2);
+    expect(model.props.count).toBe(2);
+    expect(model.props.count$.value).toBe(2);
     expect(onChange).toHaveBeenCalledTimes(3);
 
     model.stash('count');
     yBlock.set('prop:count', 3);
-    expect(model.count).toBe(3);
-    expect(model.count$.value).toBe(3);
+    expect(model.props.count).toBe(3);
+    expect(model.props.count$.value).toBe(3);
 
-    model.count$.value = 4;
+    model.props.count$.value = 4;
     expect(yBlock.get('prop:count')).toBe(3);
-    expect(model.count).toBe(4);
+    expect(model.props.count).toBe(4);
 
     model.pop('count');
     expect(yBlock.get('prop:count')).toBe(4);
@@ -266,22 +266,22 @@ test('on change', () => {
   });
   const model = block.model as RootModel;
 
-  model.title = internalPrimitives.Text('abc');
+  model.props.title = internalPrimitives.Text('abc');
   expect(onPropsUpdated).toHaveBeenCalledWith(expect.anything(), 'title', true);
-  expect(model.title$.value.toDelta()).toEqual([{ insert: 'abc' }]);
+  expect(model.props.title$.value.toDelta()).toEqual([{ insert: 'abc' }]);
 
   onPropsUpdated.mockClear();
 
-  model.title.insert('d', 1);
+  model.props.title.insert('d', 1);
   expect(onPropsUpdated).toHaveBeenCalledWith(expect.anything(), 'title', true);
 
-  expect(model.title$.value.toDelta()).toEqual([{ insert: 'adbc' }]);
+  expect(model.props.title$.value.toDelta()).toEqual([{ insert: 'adbc' }]);
 
   onPropsUpdated.mockClear();
 
-  model.boxed.getValue()!.set('foo', 0);
+  model.props.boxed.getValue()!.set('foo', 0);
   expect(onPropsUpdated).toHaveBeenCalledWith(expect.anything(), 'boxed', true);
-  expect(model.boxed$.value.getValue()!.toJSON()).toEqual({
+  expect(model.props.boxed$.value.getValue()!.toJSON()).toEqual({
     foo: 0,
   });
 });
@@ -299,33 +299,33 @@ test('deep sync', () => {
     onChange: onPropsUpdated,
   });
   const model = block.model as TableModel;
-  expect(model.cols).toEqual({});
-  expect(model.rows).toEqual([]);
+  expect(model.props.cols).toEqual({});
+  expect(model.props.rows).toEqual([]);
 
-  model.cols = {
+  model.props.cols = {
     '1': { color: 'red' },
   };
   const onColsUpdated = vi.fn();
   const onRowsUpdated = vi.fn();
   effect(() => {
-    onColsUpdated(model.cols$.value);
+    onColsUpdated(model.props.cols$.value);
   });
   effect(() => {
-    onRowsUpdated(model.rows$.value);
+    onRowsUpdated(model.props.rows$.value);
   });
   const getColsMap = () => yBlock.get('prop:cols') as Y.Map<unknown>;
   const getRowsArr = () => yBlock.get('prop:rows') as Y.Array<unknown>;
   expect(getColsMap().toJSON()).toEqual({
     '1': { color: 'red' },
   });
-  expect(model.cols$.value).toEqual({
+  expect(model.props.cols$.value).toEqual({
     '1': { color: 'red' },
   });
 
   onPropsUpdated.mockClear();
   onColsUpdated.mockClear();
 
-  model.cols['2'] = { color: 'blue' };
+  model.props.cols['2'] = { color: 'blue' };
   expect(getColsMap().toJSON()).toEqual({
     '1': { color: 'red' },
     '2': { color: 'blue' },
@@ -355,7 +355,7 @@ test('deep sync', () => {
   onPropsUpdated.mockClear();
   onRowsUpdated.mockClear();
 
-  model.rows.push({ color: 'yellow' });
+  model.props.rows.push({ color: 'yellow' });
   expect(onPropsUpdated).toHaveBeenCalledWith(expect.anything(), 'rows', true);
   expect(onRowsUpdated).toHaveBeenCalledWith([{ color: 'yellow' }]);
   expect(onPropsUpdated).toHaveBeenCalledTimes(1);
@@ -368,7 +368,7 @@ test('deep sync', () => {
   row1.set('color', 'green');
   expect(onRowsUpdated).toHaveBeenCalledWith([{ color: 'green' }]);
   expect(onPropsUpdated).toHaveBeenCalledWith(expect.anything(), 'rows', true);
-  expect(model.rows$.value).toEqual([{ color: 'green' }]);
+  expect(model.props.rows$.value).toEqual([{ color: 'green' }]);
   expect(onPropsUpdated).toHaveBeenCalledTimes(1);
   expect(onRowsUpdated).toHaveBeenCalledTimes(1);
 });
diff --git a/blocksuite/framework/store/src/__tests__/doc.unit.spec.ts b/blocksuite/framework/store/src/__tests__/doc.unit.spec.ts
index e93c1f0d71..081adb24ef 100644
--- a/blocksuite/framework/store/src/__tests__/doc.unit.spec.ts
+++ b/blocksuite/framework/store/src/__tests__/doc.unit.spec.ts
@@ -49,37 +49,37 @@ test('trigger props updated', () => {
   const getItems = () => rootModel.yBlock.get('prop:items') as Y.Array<unknown>;
   const getCount = () => rootModel.yBlock.get('prop:count');
 
-  rootModel.count = 1;
+  rootModel.props.count = 1;
   expect(onPropsUpdated).toBeCalledTimes(1);
   expect(onPropsUpdated).toHaveBeenNthCalledWith(1, { key: 'count' });
   expect(getCount()).toBe(1);
 
-  rootModel.count = 2;
+  rootModel.props.count = 2;
   expect(onPropsUpdated).toBeCalledTimes(2);
   expect(onPropsUpdated).toHaveBeenNthCalledWith(2, { key: 'count' });
   expect(getCount()).toBe(2);
 
-  rootModel.style.color = 'blue';
+  rootModel.props.style.color = 'blue';
   expect(onPropsUpdated).toBeCalledTimes(3);
   expect(onPropsUpdated).toHaveBeenNthCalledWith(3, { key: 'style' });
   expect(getColor()).toBe('blue');
 
-  rootModel.style = { color: 'red' };
+  rootModel.props.style = { color: 'red' };
   expect(onPropsUpdated).toBeCalledTimes(4);
   expect(onPropsUpdated).toHaveBeenNthCalledWith(4, { key: 'style' });
   expect(getColor()).toBe('red');
 
-  rootModel.style.color = 'green';
+  rootModel.props.style.color = 'green';
   expect(onPropsUpdated).toBeCalledTimes(5);
   expect(onPropsUpdated).toHaveBeenNthCalledWith(5, { key: 'style' });
   expect(getColor()).toBe('green');
 
-  rootModel.items.push(1);
+  rootModel.props.items.push(1);
   expect(onPropsUpdated).toBeCalledTimes(6);
   expect(onPropsUpdated).toHaveBeenNthCalledWith(6, { key: 'items' });
   expect(getItems().get(0)).toBe(1);
 
-  rootModel.items[0] = { id: '1' };
+  rootModel.props.items[0] = { id: '1' };
   expect(onPropsUpdated).toBeCalledTimes(7);
   expect(onPropsUpdated).toHaveBeenNthCalledWith(7, { key: 'items' });
   expect(getItems().get(0)).toBeInstanceOf(Y.Map);
@@ -107,13 +107,13 @@ test('stash and pop', () => {
   const getColor = () =>
     (rootModel.yBlock.get('prop:style') as Y.Map<string>).get('color');
 
-  rootModel.count = 1;
+  rootModel.props.count = 1;
   expect(onPropsUpdated).toBeCalledTimes(1);
   expect(onPropsUpdated).toHaveBeenNthCalledWith(1, { key: 'count' });
   expect(getCount()).toBe(1);
 
   rootModel.stash('count');
-  rootModel.count = 2;
+  rootModel.props.count = 2;
   expect(onPropsUpdated).toBeCalledTimes(3);
   expect(onPropsUpdated).toHaveBeenNthCalledWith(3, { key: 'count' });
   expect(rootModel.yBlock.get('prop:count')).toBe(1);
@@ -123,13 +123,13 @@ test('stash and pop', () => {
   expect(onPropsUpdated).toHaveBeenNthCalledWith(4, { key: 'count' });
   expect(rootModel.yBlock.get('prop:count')).toBe(2);
 
-  rootModel.style.color = 'blue';
+  rootModel.props.style.color = 'blue';
   expect(getColor()).toBe('blue');
   expect(onPropsUpdated).toBeCalledTimes(5);
   expect(onPropsUpdated).toHaveBeenNthCalledWith(5, { key: 'style' });
 
   rootModel.stash('style');
-  rootModel.style = {
+  rootModel.props.style = {
     color: 'red',
   };
   expect(getColor()).toBe('blue');
@@ -145,7 +145,7 @@ test('stash and pop', () => {
   expect(onPropsUpdated).toBeCalledTimes(9);
   expect(onPropsUpdated).toHaveBeenNthCalledWith(9, { key: 'style' });
 
-  rootModel.style.color = 'green';
+  rootModel.props.style.color = 'green';
   expect(onPropsUpdated).toBeCalledTimes(10);
   expect(onPropsUpdated).toHaveBeenNthCalledWith(10, { key: 'style' });
   expect(getColor()).toBe('red');
@@ -173,33 +173,33 @@ test('always get latest value in onChange', () => {
   let value: unknown;
   rootModel.propsUpdated.subscribe(({ key }) => {
     // @ts-expect-error ignore
-    value = rootModel[key];
+    value = rootModel.props[key];
   });
 
-  rootModel.count = 1;
+  rootModel.props.count = 1;
   expect(value).toBe(1);
 
   rootModel.stash('count');
 
-  rootModel.count = 2;
+  rootModel.props.count = 2;
   expect(value).toBe(2);
 
   rootModel.pop('count');
 
-  rootModel.count = 3;
+  rootModel.props.count = 3;
   expect(value).toBe(3);
 
-  rootModel.style.color = 'blue';
+  rootModel.props.style.color = 'blue';
   expect(value).toEqual({ color: 'blue' });
 
   rootModel.stash('style');
-  rootModel.style = { color: 'red' };
+  rootModel.props.style = { color: 'red' };
   expect(value).toEqual({ color: 'red' });
-  rootModel.style.color = 'green';
+  rootModel.props.style.color = 'green';
   expect(value).toEqual({ color: 'green' });
 
   rootModel.pop('style');
-  rootModel.style.color = 'yellow';
+  rootModel.props.style.color = 'yellow';
   expect(value).toEqual({ color: 'yellow' });
 });
 
diff --git a/blocksuite/framework/store/src/model/block/block-model.ts b/blocksuite/framework/store/src/model/block/block-model.ts
index 411a8e142a..438cbc8d34 100644
--- a/blocksuite/framework/store/src/model/block/block-model.ts
+++ b/blocksuite/framework/store/src/model/block/block-model.ts
@@ -11,28 +11,10 @@ import type { BlockSchemaType } from './zod.js';
 type SignaledProps<Props> = Props & {
   [P in keyof Props & string as `${P}$`]: Signal<Props[P]>;
 };
-/**
- * The MagicProps function is used to append the props to the class.
- * For example:
- *
- * ```ts
- * class MyBlock extends MagicProps()<{ foo: string }> {}
- * const myBlock = new MyBlock();
- * // You'll get type checking for the foo prop
- * myBlock.foo = 'bar';
- * ```
- */
-function MagicProps(): { new <Props>(): Props } {
-  return class {} as never;
-}
 
 const modelLabel = Symbol('model_label');
 
-// @ts-expect-error allow magic props
-export class BlockModel<
-  Props extends object = object,
-  PropsSignal extends object = SignaledProps<Props>,
-> extends MagicProps()<PropsSignal> {
+export class BlockModel<Props extends object = object> {
   private readonly _children = signal<string[]>([]);
 
   private _store!: Store;
@@ -82,8 +64,15 @@ export class BlockModel<
 
   stash!: (prop: keyof Props & string) => void;
 
-  // text is optional
-  text?: Text;
+  get text(): Text | undefined {
+    return (this.props as { text?: Text }).text;
+  }
+
+  set text(text: Text) {
+    if (this.keys.includes('text')) {
+      (this.props as { text?: Text }).text = text;
+    }
+  }
 
   yBlock!: YBlock;
 
@@ -125,7 +114,6 @@ export class BlockModel<
   }
 
   constructor() {
-    super();
     this._onCreated = {
       dispose: this.created.pipe(take(1)).subscribe(() => {
         this._children.value = this.yBlock.get('sys:children').toArray();
diff --git a/blocksuite/framework/store/src/model/block/draft.ts b/blocksuite/framework/store/src/model/block/draft.ts
index 1a1a92c854..79d8c95dce 100644
--- a/blocksuite/framework/store/src/model/block/draft.ts
+++ b/blocksuite/framework/store/src/model/block/draft.ts
@@ -11,18 +11,17 @@ export type DraftModel<Model extends BlockModel = BlockModel> = Pick<
   PropsInDraft
 > & {
   children: DraftModel[];
-} & ModelProps<Model> & {
-    [draftModelSymbol]: true;
-  };
+  props: ModelProps<Model>;
+  [draftModelSymbol]: true;
+};
 
 export function toDraftModel<Model extends BlockModel = BlockModel>(
   origin: Model
 ): DraftModel<Model> {
   const { id, version, flavour, role, keys, text, children } = origin;
 
-  const isFlatData = origin.schema.model.isFlatData;
   const props = origin.keys.reduce((acc, key) => {
-    const target = isFlatData ? origin.props : origin;
+    const target = origin.props;
     const value = target[key as keyof typeof target];
     return {
       ...acc,
@@ -38,6 +37,6 @@ export function toDraftModel<Model extends BlockModel = BlockModel>(
     keys,
     text,
     children: children.map(toDraftModel),
-    ...props,
+    props,
   } as DraftModel<Model>;
 }
diff --git a/blocksuite/framework/store/src/model/block/sync-controller.ts b/blocksuite/framework/store/src/model/block/sync-controller.ts
index da48a4d04b..3986d769e7 100644
--- a/blocksuite/framework/store/src/model/block/sync-controller.ts
+++ b/blocksuite/framework/store/src/model/block/sync-controller.ts
@@ -55,12 +55,12 @@ export class SyncController {
           const proxy = this._getPropsProxy(keyName, value);
           this._byPassUpdate(() => {
             // @ts-expect-error allow magic props
-            this.model[keyName] = proxy;
+            this.model.props[keyName] = proxy;
             const signalKey = `${keyName}$`;
             this._mutex(() => {
-              if (signalKey in this.model) {
+              if (signalKey in this.model.props) {
                 // @ts-expect-error allow magic props
-                this.model[signalKey].value = y2Native(value);
+                this.model.props[signalKey].value = y2Native(value);
               }
             });
           });
@@ -71,10 +71,10 @@ export class SyncController {
           const keyName = key.replace('prop:', '');
           this._byPassUpdate(() => {
             // @ts-expect-error allow magic props
-            delete this.model[keyName];
-            if (`${keyName}$` in this.model) {
+            delete this.model.props[keyName];
+            if (`${keyName}$` in this.model.props) {
               // @ts-expect-error allow magic props
-              this.model[`${keyName}$`].value = undefined;
+              this.model.props[`${keyName}$`].value = undefined;
             }
           });
           this.onChange?.(keyName, isLocal);
@@ -146,7 +146,7 @@ export class SyncController {
           if (!this.model) return;
           _mutex(() => {
             // @ts-expect-error allow magic props
-            this.model[key] = value;
+            this.model.props[key] = value;
           });
         });
         const subscription = model.deleted.subscribe(() => {
@@ -161,7 +161,6 @@ export class SyncController {
       },
       {} as Record<string, unknown>
     );
-    Object.assign(model, signalWithProps);
 
     model.id = this.id;
     model.keys = Object.keys(props);
@@ -172,7 +171,7 @@ export class SyncController {
       model.doc = this.doc;
     }
 
-    const proxy = new Proxy(model, {
+    const proxy = new Proxy(signalWithProps, {
       has: (target, p) => {
         return Reflect.has(target, p);
       },
@@ -217,14 +216,15 @@ export class SyncController {
         return Reflect.deleteProperty(target, p);
       },
     });
+    model._props = proxy;
 
-    function setValue(target: BlockModel, p: string, value: unknown) {
+    function setValue(target: UnRecord, p: string, value: unknown) {
       _mutex(() => {
         // @ts-expect-error allow magic props
         target[`${p}$`].value = value;
       });
     }
-    return proxy;
+    return model;
   }
 
   private _getPropsProxy(name: string, value: unknown) {
@@ -232,10 +232,10 @@ export class SyncController {
       onChange: (_, isLocal) => {
         this.onChange?.(name, isLocal);
         const signalKey = `${name}$`;
-        if (signalKey in this.model) {
+        if (signalKey in this.model.props) {
           this._mutex(() => {
             // @ts-expect-error allow magic props
-            this.model[signalKey].value = y2Native(value);
+            this.model.props[signalKey].value = y2Native(value);
           });
         }
       },
@@ -331,13 +331,13 @@ export class SyncController {
   private _popProp(prop: string) {
     const model = this.model as BlockModel<Record<string, unknown>>;
 
-    const value = model[prop];
+    const value = model.props[prop];
     this._stashed.delete(prop);
-    model[prop] = value;
+    model.props[prop] = value;
   }
 
   private _stashProp(prop: string) {
-    (this.model as BlockModel<Record<string, unknown>>)[prop] = y2Native(
+    (this.model as BlockModel<Record<string, unknown>>).props[prop] = y2Native(
       this.yBlock.get(`prop:${prop}`),
       {
         transform: (value, origin) => {
diff --git a/blocksuite/framework/store/src/model/store/query.ts b/blocksuite/framework/store/src/model/store/query.ts
index a640ef7790..e06c359233 100644
--- a/blocksuite/framework/store/src/model/store/query.ts
+++ b/blocksuite/framework/store/src/model/store/query.ts
@@ -39,7 +39,7 @@ function getBlockViewType(query: Query, block: Block): BlockViewType {
     (acc, key) => {
       return {
         ...acc,
-        [key]: block.model[key as keyof BlockModel],
+        [key]: block.model.props[key as keyof BlockModel['props']],
       };
     },
     {} as Record<string, unknown>
diff --git a/blocksuite/framework/store/src/model/store/utils.ts b/blocksuite/framework/store/src/model/store/utils.ts
index 3b91094122..35220b9114 100644
--- a/blocksuite/framework/store/src/model/store/utils.ts
+++ b/blocksuite/framework/store/src/model/store/utils.ts
@@ -19,7 +19,7 @@ export function syncBlockProps(
     if (value === undefined) return;
 
     // @ts-expect-error allow props
-    model[key] = value;
+    model.props[key] = value;
   });
 
   // set default value
diff --git a/blocksuite/framework/store/src/transformer/base.ts b/blocksuite/framework/store/src/transformer/base.ts
index d341e3a4dd..74a7c6f987 100644
--- a/blocksuite/framework/store/src/transformer/base.ts
+++ b/blocksuite/framework/store/src/transformer/base.ts
@@ -51,7 +51,7 @@ export class BaseBlockTransformer<Props extends object = object> {
     }
     return Object.fromEntries(
       draftModel.keys.map(key => {
-        const value = draftModel[key as keyof typeof draftModel];
+        const value = draftModel.props[key as keyof typeof draftModel.props];
         return [key, toJSON(value)];
       })
     );
diff --git a/blocksuite/framework/store/src/transformer/transformer.ts b/blocksuite/framework/store/src/transformer/transformer.ts
index 3f360eab79..75ca81ea70 100644
--- a/blocksuite/framework/store/src/transformer/transformer.ts
+++ b/blocksuite/framework/store/src/transformer/transformer.ts
@@ -457,8 +457,8 @@ export class Transformer {
         id: flat.snapshot.id,
         flavour: flat.snapshot.flavour,
         children: [],
-        ...props,
-      } as DraftModel;
+        props,
+      } as unknown as DraftModel;
     } catch (error) {
       console.error(`Error when transforming snapshot to model data:`);
       console.error(error);
@@ -529,7 +529,7 @@ export class Transformer {
 
       const actualIndex =
         startIndex !== undefined ? startIndex + index : undefined;
-      doc.addBlock(flavour, draft as object, parentId, actualIndex);
+      doc.addBlock(flavour, { id, ...draft.props }, parentId, actualIndex);
 
       const model = doc.getBlock(id)?.model;
       if (!model) {
diff --git a/blocksuite/integration-test/src/__tests__/edgeless/last-props.spec.ts b/blocksuite/integration-test/src/__tests__/edgeless/last-props.spec.ts
index f5ea712771..f94907d63e 100644
--- a/blocksuite/integration-test/src/__tests__/edgeless/last-props.spec.ts
+++ b/blocksuite/integration-test/src/__tests__/edgeless/last-props.spec.ts
@@ -232,8 +232,8 @@ describe('apply last props', () => {
       throw new Error('id is not found');
     }
     const text = service.crud.getElementById(id) as EdgelessTextBlockModel;
-    expect(text.color).toBe(DefaultTheme.textColor);
-    expect(text.fontFamily).toBe(FontFamily.Inter);
+    expect(text.props.color).toBe(DefaultTheme.textColor);
+    expect(text.props.fontFamily).toBe(FontFamily.Inter);
     service.crud.updateElement(id, {
       color: DefaultTheme.StrokeColorShortMap.Green,
       fontFamily: FontFamily.OrelegaOne,
@@ -244,8 +244,8 @@ describe('apply last props', () => {
       throw new Error('id2 is not found');
     }
     const text2 = service.crud.getElementById(id2) as EdgelessTextBlockModel;
-    expect(text2.color).toBe(DefaultTheme.StrokeColorShortMap.Green);
-    expect(text2.fontFamily).toBe(FontFamily.OrelegaOne);
+    expect(text2.props.color).toBe(DefaultTheme.StrokeColorShortMap.Green);
+    expect(text2.props.fontFamily).toBe(FontFamily.OrelegaOne);
   });
 
   test('note', () => {
@@ -254,8 +254,8 @@ describe('apply last props', () => {
       throw new Error('id is not found');
     }
     const note = service.crud.getElementById(id) as NoteBlockModel;
-    expect(note.background).toEqual(DefaultTheme.noteBackgrounColor);
-    expect(note.edgeless.style.shadowType).toBe(DEFAULT_NOTE_SHADOW);
+    expect(note.props.background).toEqual(DefaultTheme.noteBackgrounColor);
+    expect(note.props.edgeless.style.shadowType).toBe(DEFAULT_NOTE_SHADOW);
     service.crud.updateElement(id, {
       background: DefaultTheme.NoteBackgroundColorMap.Purple,
       edgeless: {
@@ -270,10 +270,10 @@ describe('apply last props', () => {
       throw new Error('id2 is not found');
     }
     const note2 = service.crud.getElementById(id2) as NoteBlockModel;
-    expect(note2.background).toEqual(
+    expect(note2.props.background).toEqual(
       DefaultTheme.NoteBackgroundColorMap.Purple
     );
-    expect(note2.edgeless.style.shadowType).toBe(NoteShadow.Film);
+    expect(note2.props.edgeless.style.shadowType).toBe(NoteShadow.Film);
   });
 
   test('frame', () => {
@@ -283,7 +283,7 @@ describe('apply last props', () => {
       throw new Error('id is not found');
     }
     const note = service.crud.getElementById(id) as FrameBlockModel;
-    expect(note.background).toBe('transparent');
+    expect(note.props.background).toBe('transparent');
     service.crud.updateElement(id, {
       background: DefaultTheme.StrokeColorShortMap.Purple,
     });
@@ -293,7 +293,9 @@ describe('apply last props', () => {
       throw new Error('id2 is not found');
     }
     const frame2 = service.crud.getElementById(id2) as FrameBlockModel;
-    expect(frame2.background).toBe(DefaultTheme.StrokeColorShortMap.Purple);
+    expect(frame2.props.background).toBe(
+      DefaultTheme.StrokeColorShortMap.Purple
+    );
     service.crud.updateElement(id2, {
       background: { normal: '#def4e740' },
     });
@@ -303,7 +305,7 @@ describe('apply last props', () => {
       throw new Error('id3 is not found');
     }
     const frame3 = service.crud.getElementById(id3) as FrameBlockModel;
-    expect(frame3.background).toEqual({ normal: '#def4e740' });
+    expect(frame3.props.background).toEqual({ normal: '#def4e740' });
     service.crud.updateElement(id3, {
       background: { light: '#a381aa23', dark: '#6e907452' },
     });
@@ -313,7 +315,7 @@ describe('apply last props', () => {
       throw new Error('id4 is not found');
     }
     const frame4 = service.crud.getElementById(id4) as FrameBlockModel;
-    expect(frame4.background).toEqual({
+    expect(frame4.props.background).toEqual({
       light: '#a381aa23',
       dark: '#6e907452',
     });
diff --git a/blocksuite/integration-test/src/__tests__/edgeless/layer.spec.ts b/blocksuite/integration-test/src/__tests__/edgeless/layer.spec.ts
index a2ebba8370..0021125b7f 100644
--- a/blocksuite/integration-test/src/__tests__/edgeless/layer.spec.ts
+++ b/blocksuite/integration-test/src/__tests__/edgeless/layer.spec.ts
@@ -848,7 +848,9 @@ test('the actual rendering z-index should satisfy the logic order of their index
       const zIndex = Number(block.style.zIndex);
       const nextZIndex = Number(blocks[index + 1].style.zIndex);
 
-      expect(model.index <= nextModel.index).equals(zIndex <= nextZIndex);
+      expect(model.props.index <= nextModel.props.index).equals(
+        zIndex <= nextZIndex
+      );
     });
 });
 
diff --git a/blocksuite/playground/apps/_common/components/attachment-viewer-panel.ts b/blocksuite/playground/apps/_common/components/attachment-viewer-panel.ts
index a52183ed13..05ddc555ae 100644
--- a/blocksuite/playground/apps/_common/components/attachment-viewer-panel.ts
+++ b/blocksuite/playground/apps/_common/components/attachment-viewer-panel.ts
@@ -151,7 +151,7 @@ export class AttachmentViewerPanel extends SignalWatcher(
   open(model: AttachmentBlockModel) {
     this.#dialog.showModal();
 
-    const { name, size } = model;
+    const { name, size } = model.props;
 
     const fileType = name.split('.').pop() ?? '';
     const icon = getAttachmentFileIcon(fileType);
@@ -165,7 +165,7 @@ export class AttachmentViewerPanel extends SignalWatcher(
     };
 
     if (!isPDF) return;
-    if (!model.sourceId) return;
+    if (!model.props.sourceId) return;
     if (this.#worker) return;
 
     const process = async ({ data }: MessageEvent<MessageData>) => {
@@ -182,7 +182,7 @@ export class AttachmentViewerPanel extends SignalWatcher(
           console.debug('connected');
           this.#state.value = State.Connected;
 
-          const blob = await model.doc.blobSync.get(model.sourceId!);
+          const blob = await model.doc.blobSync.get(model.props.sourceId!);
 
           if (!blob) return;
           const buffer = await blob.arrayBuffer();
diff --git a/blocksuite/playground/apps/starter/data/database.ts b/blocksuite/playground/apps/starter/data/database.ts
index 4451312814..f3541e6b05 100644
--- a/blocksuite/playground/apps/starter/data/database.ts
+++ b/blocksuite/playground/apps/starter/data/database.ts
@@ -43,7 +43,7 @@ export const database: InitFn = (collection: Workspace, id: string) => {
       const database = doc.getBlockById(databaseId) as DatabaseBlockModel;
       const datasource = new DatabaseBlockDataSource(database);
       datasource.viewManager.viewAdd('table');
-      database.title = new Text(title);
+      database.props.title = new Text(title);
       const richTextId = datasource.propertyAdd(
         'end',
         databaseBlockColumns.richTextColumnConfig.type
@@ -61,7 +61,7 @@ export const database: InitFn = (collection: Workspace, id: string) => {
       if (group) {
         const groupTrait =
           datasource.viewManager.currentView$.value?.traitGet(groupTraitKey);
-        groupTrait?.changeGroup(database.columns[1].id);
+        groupTrait?.changeGroup(database.props.columns[1].id);
       }
       const paragraphTypes: ParagraphType[] = [
         'text',
diff --git a/blocksuite/tests-legacy/e2e/utils/asserts.ts b/blocksuite/tests-legacy/e2e/utils/asserts.ts
index 5ebd4af67d..63495ed316 100644
--- a/blocksuite/tests-legacy/e2e/utils/asserts.ts
+++ b/blocksuite/tests-legacy/e2e/utils/asserts.ts
@@ -363,7 +363,7 @@ export async function assertRichTextModelType(
       if (!block) {
         throw new Error('block component is undefined');
       }
-      return (block.model as BlockModel<{ type: string }>).type;
+      return (block.model as BlockModel<{ type: string }>).props.type;
     },
     { index, BLOCK_ID_ATTR }
   );
@@ -509,7 +509,7 @@ export async function assertBlockType(
 
       const model = element.model;
       // @ts-ignore
-      return model.type;
+      return model.props.type;
     },
     { id }
   );
@@ -574,7 +574,7 @@ export async function assertBlockProps(
       const model = element.model as BlockModel;
       return Object.fromEntries(
         // @ts-ignore
-        Object.keys(props).map(key => [key, (model[key] as unknown).toString()])
+        Object.keys(props).map(key => [key, model.props[key].toString()])
       );
     },
     [id, props] as const
@@ -590,7 +590,7 @@ export async function assertBlockTypes(page: Page, blockTypes: string[]) {
       Array.from(elements)
         .slice(2)
         // @ts-ignore
-        .map(el => el.model.type)
+        .map(el => el.model.props.type)
     );
   });
   expect(actual).toEqual(blockTypes);
diff --git a/packages/frontend/core/src/blocksuite/ai/_common/config.ts b/packages/frontend/core/src/blocksuite/ai/_common/config.ts
index dc1f981fb6..3a236320ec 100644
--- a/packages/frontend/core/src/blocksuite/ai/_common/config.ts
+++ b/packages/frontend/core/src/blocksuite/ai/_common/config.ts
@@ -287,7 +287,7 @@ const GenerateWithAIGroup: AIItemGroupConfig = {
         return selectedModels.every(
           model =>
             matchModels(model, [ParagraphBlockModel, ListBlockModel]) &&
-            !model.type.startsWith('h')
+            !model.props.type.startsWith('h')
         );
       },
     },
diff --git a/packages/frontend/core/src/blocksuite/ai/actions/edgeless-handler.ts b/packages/frontend/core/src/blocksuite/ai/actions/edgeless-handler.ts
index ef1a692ca9..8aad1ff02c 100644
--- a/packages/frontend/core/src/blocksuite/ai/actions/edgeless-handler.ts
+++ b/packages/frontend/core/src/blocksuite/ai/actions/edgeless-handler.ts
@@ -9,12 +9,13 @@ import {
   EdgelessTextBlockModel,
   EmbedSyncedDocModel,
   ImageBlockModel,
+  type ImageBlockProps,
   NoteBlockModel,
   ShapeElementModel,
   TextElementModel,
 } from '@blocksuite/affine/model';
 import { matchModels } from '@blocksuite/affine/shared/utils';
-import { Slice } from '@blocksuite/affine/store';
+import { type BlockModel, Slice } from '@blocksuite/affine/store';
 import type { TemplateResult } from 'lit';
 
 import { getContentFromSlice } from '../../utils';
@@ -87,8 +88,9 @@ export async function getContentFromSelected(
 
   function isImageWithCaption(
     el: ImageBlockModel
-  ): el is RemoveUndefinedKey<ImageBlockModel, 'caption'> {
-    return el.caption !== undefined && el.caption.length !== 0;
+  ): el is ImageBlockModel &
+    BlockModel<RemoveUndefinedKey<ImageBlockProps, 'caption'>> {
+    return el.props.caption !== undefined && el.props.caption.length !== 0;
   }
 
   const { notes, texts, shapes, images, edgelessTexts, embedSyncedDocs } =
@@ -96,7 +98,7 @@ export async function getContentFromSelected(
       notes: NoteBlockModel[];
       texts: TextElementModel[];
       shapes: RemoveUndefinedKey<ShapeElementModel, 'text'>[];
-      images: RemoveUndefinedKey<ImageBlockModel, 'caption'>[];
+      images: RemoveUndefinedKey<ImageBlockProps, 'caption'>[];
       edgelessTexts: EdgelessTextBlockModel[];
       embedSyncedDocs: EmbedSyncedDocModel[];
     }>(
@@ -108,7 +110,7 @@ export async function getContentFromSelected(
         } else if (cur instanceof ShapeElementModel && isShapeWithText(cur)) {
           pre.shapes.push(cur);
         } else if (cur instanceof ImageBlockModel && isImageWithCaption(cur)) {
-          pre.images.push(cur);
+          pre.images.push(cur.props);
         } else if (cur instanceof EdgelessTextBlockModel) {
           pre.edgelessTexts.push(cur);
         } else if (cur instanceof EmbedSyncedDocModel) {
diff --git a/packages/frontend/core/src/blocksuite/ai/blocks/ai-chat-block/ai-chat-block.ts b/packages/frontend/core/src/blocksuite/ai/blocks/ai-chat-block/ai-chat-block.ts
index 2d6b293d21..902f7ad45f 100644
--- a/packages/frontend/core/src/blocksuite/ai/blocks/ai-chat-block/ai-chat-block.ts
+++ b/packages/frontend/core/src/blocksuite/ai/blocks/ai-chat-block/ai-chat-block.ts
@@ -18,7 +18,7 @@ export class AIChatBlockComponent extends BlockComponent<AIChatBlockModel> {
 
   // Deserialize messages from JSON string and verify the type using zod
   private readonly _deserializeChatMessages = computed(() => {
-    const messages = this.model.messages$.value;
+    const messages = this.model.props.messages$.value;
     try {
       const result = ChatMessagesSchema.safeParse(JSON.parse(messages));
       if (result.success) {
diff --git a/packages/frontend/core/src/blocksuite/ai/blocks/ai-chat-block/ai-chat-edgeless-block.ts b/packages/frontend/core/src/blocksuite/ai/blocks/ai-chat-block/ai-chat-edgeless-block.ts
index 0434a2a301..8e4726127e 100644
--- a/packages/frontend/core/src/blocksuite/ai/blocks/ai-chat-block/ai-chat-edgeless-block.ts
+++ b/packages/frontend/core/src/blocksuite/ai/blocks/ai-chat-block/ai-chat-edgeless-block.ts
@@ -9,8 +9,8 @@ export class EdgelessAIChatBlockComponent extends toGfxBlockComponent(
   AIChatBlockComponent
 ) {
   override renderGfxBlock() {
-    const bound = Bound.deserialize(this.model.xywh$.value);
-    const scale = this.model.scale$.value;
+    const bound = Bound.deserialize(this.model.props.xywh$.value);
+    const scale = this.model.props.scale$.value;
     const width = bound.w / scale;
     const height = bound.h / scale;
     const style = {
diff --git a/packages/frontend/core/src/blocksuite/ai/extensions/ai-paragraph.ts b/packages/frontend/core/src/blocksuite/ai/extensions/ai-paragraph.ts
index 7fee821937..a900f40044 100644
--- a/packages/frontend/core/src/blocksuite/ai/extensions/ai-paragraph.ts
+++ b/packages/frontend/core/src/blocksuite/ai/extensions/ai-paragraph.ts
@@ -12,7 +12,7 @@ class AIParagraphBlockWatcher extends LifeCycleWatcher {
     super.mounted();
     const service = this.std.get(ParagraphBlockService);
     service.placeholderGenerator = model => {
-      if (model.type === 'text') {
+      if (model.props.type === 'text') {
         return "Type '/' for commands, 'space' for AI";
       }
 
@@ -25,7 +25,7 @@ class AIParagraphBlockWatcher extends LifeCycleWatcher {
         h6: 'Heading 6',
         quote: '',
       };
-      return placeholders[model.type];
+      return placeholders[model.props.type];
     };
   }
 }
diff --git a/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-peek-view.ts b/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-peek-view.ts
index d582d9b242..30641a51fd 100644
--- a/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-peek-view.ts
+++ b/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-peek-view.ts
@@ -44,11 +44,11 @@ export class AIChatBlockPeekView extends LitElement {
   }
 
   private get parentSessionId() {
-    return this.parentModel.sessionId;
+    return this.parentModel.props.sessionId;
   }
 
   private get historyMessagesString() {
-    return this.parentModel.messages;
+    return this.parentModel.props.messages;
   }
 
   private get parentChatBlockId() {
@@ -56,11 +56,11 @@ export class AIChatBlockPeekView extends LitElement {
   }
 
   private get parentRootDocId() {
-    return this.parentModel.rootDocId;
+    return this.parentModel.props.rootDocId;
   }
 
   private get parentRootWorkspaceId() {
-    return this.parentModel.rootWorkspaceId;
+    return this.parentModel.props.rootWorkspaceId;
   }
 
   private _textRendererOptions: TextRendererOptions = {};
diff --git a/packages/frontend/core/src/blocksuite/ai/utils/extract.ts b/packages/frontend/core/src/blocksuite/ai/utils/extract.ts
index ce8a7bb3c6..5b891e2f6c 100644
--- a/packages/frontend/core/src/blocksuite/ai/utils/extract.ts
+++ b/packages/frontend/core/src/blocksuite/ai/utils/extract.ts
@@ -145,7 +145,7 @@ export async function extractPageAll(
   const blobs = await Promise.all(
     blockModels.map(async s => {
       if (s.flavour !== 'affine:image') return null;
-      const sourceId = (s as ImageBlockModel)?.sourceId;
+      const sourceId = (s as ImageBlockModel)?.props.sourceId;
       if (!sourceId) return null;
       const blob = await (sourceId ? host.doc.blobSync.get(sourceId) : null);
       if (!blob) return null;
@@ -190,7 +190,7 @@ function getNoteBlockModels(doc: Store) {
     .getBlocksByFlavour('affine:note')
     .filter(
       note =>
-        (note.model as NoteBlockModel).displayMode !==
+        (note.model as NoteBlockModel).props.displayMode !==
         NoteDisplayMode.EdgelessOnly
     )
     .map(note => note.model as NoteBlockModel);
diff --git a/packages/frontend/core/src/blocksuite/ai/utils/selection-utils.ts b/packages/frontend/core/src/blocksuite/ai/utils/selection-utils.ts
index ea85ec0c27..a54d5beb36 100644
--- a/packages/frontend/core/src/blocksuite/ai/utils/selection-utils.ts
+++ b/packages/frontend/core/src/blocksuite/ai/utils/selection-utils.ts
@@ -263,7 +263,7 @@ export const getSelectedImagesAsBlobs = async (host: EditorHost) => {
 
   const blobs = await Promise.all(
     data.selectedBlocks?.map(async b => {
-      const sourceId = (b.model as ImageBlockModel).sourceId;
+      const sourceId = (b.model as ImageBlockModel).props.sourceId;
       if (!sourceId) return null;
       const blob = await host.doc.blobSync.get(sourceId);
       if (!blob) return null;
@@ -295,9 +295,9 @@ export const imageCustomInput = async (host: EditorHost) => {
 
   const imageBlock = selectedElements[0];
   if (!(imageBlock instanceof ImageBlockModel)) return;
-  if (!imageBlock.sourceId) return;
+  if (!imageBlock.props.sourceId) return;
 
-  const blob = await host.doc.blobSync.get(imageBlock.sourceId);
+  const blob = await host.doc.blobSync.get(imageBlock.props.sourceId);
   if (!blob) return;
 
   return {
diff --git a/packages/frontend/core/src/blocksuite/extensions/attachment-embed-view.tsx b/packages/frontend/core/src/blocksuite/extensions/attachment-embed-view.tsx
index 8b79a5560b..d019912934 100644
--- a/packages/frontend/core/src/blocksuite/extensions/attachment-embed-view.tsx
+++ b/packages/frontend/core/src/blocksuite/extensions/attachment-embed-view.tsx
@@ -16,9 +16,10 @@ export function patchForAttachmentEmbedViews(
       di.override(AttachmentEmbedConfigIdentifier('pdf'), () => ({
         name: 'pdf',
         check: (model, maxFileSize) =>
-          model.type === 'application/pdf' && model.size <= maxFileSize,
+          model.props.type === 'application/pdf' &&
+          model.props.size <= maxFileSize,
         action: model => {
-          const bound = Bound.deserialize(model.xywh);
+          const bound = Bound.deserialize(model.props.xywh);
           bound.w = 537 + 24 + 2;
           bound.h = 759 + 46 + 24 + 2;
           model.doc.updateBlock(model, {
diff --git a/packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/index.ts b/packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/index.ts
index d0087da7bf..5e4aa7167f 100644
--- a/packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/index.ts
+++ b/packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/index.ts
@@ -410,7 +410,7 @@ function createExternalLinkableToolbarConfig(
               )?.model;
               if (!model) return;
 
-              const { url } = model;
+              const { url } = model.props;
 
               navigator.clipboard.writeText(url).catch(console.error);
               toast(ctx.host, 'Copied link to clipboard');
@@ -523,7 +523,7 @@ function createOpenDocActionGroup(
           return {
             ...action,
             disabled: shouldOpenInActiveView
-              ? component.model.pageId === ctx.store.id
+              ? component.model.props.pageId === ctx.store.id
               : false,
             when:
               allowed &&
@@ -590,7 +590,7 @@ const embedLinkedDocToolbarConfig = {
             );
             if (!model) return;
 
-            const { pageId, params } = model;
+            const { pageId, params } = model.props;
 
             const url = ctx.std
               .getOptional(GenerateDocUrlProvider)
@@ -625,7 +625,7 @@ const embedLinkedDocToolbarConfig = {
             ctx.hide();
 
             const model = component.model;
-            const doc = ctx.workspace.getDoc(model.pageId);
+            const doc = ctx.workspace.getDoc(model.props.pageId);
             const abortController = new AbortController();
             abortController.signal.onabort = () => ctx.show();
 
@@ -683,7 +683,7 @@ const embedSyncedDocToolbarConfig = {
             );
             if (!model) return;
 
-            const { pageId, params } = model;
+            const { pageId, params } = model.props;
 
             const url = ctx.std
               .getOptional(GenerateDocUrlProvider)
@@ -718,7 +718,7 @@ const embedSyncedDocToolbarConfig = {
             ctx.hide();
 
             const model = component.model;
-            const doc = ctx.workspace.getDoc(model.pageId);
+            const doc = ctx.workspace.getDoc(model.props.pageId);
             const abortController = new AbortController();
             abortController.signal.onabort = () => ctx.show();
 
@@ -920,7 +920,7 @@ const embedIframeToolbarConfig = {
             )?.model;
             if (!model) return;
 
-            const { url } = model;
+            const { url } = model.props;
 
             navigator.clipboard.writeText(url).catch(console.error);
             toast(ctx.host, 'Copied link to clipboard');
diff --git a/packages/frontend/core/src/blocksuite/extensions/entry/enable-mobile.ts b/packages/frontend/core/src/blocksuite/extensions/entry/enable-mobile.ts
index bfb4bf53ff..1dafa39364 100644
--- a/packages/frontend/core/src/blocksuite/extensions/entry/enable-mobile.ts
+++ b/packages/frontend/core/src/blocksuite/extensions/entry/enable-mobile.ts
@@ -86,7 +86,7 @@ class MobileSpecsPatches extends LifeCycleWatcher {
           h6: 'Heading 6',
           quote: '',
         };
-        return placeholders[model.type];
+        return placeholders[model.props.type];
       };
     }
   }
diff --git a/packages/frontend/core/src/blocksuite/extensions/note-config/edgeless-note-header.tsx b/packages/frontend/core/src/blocksuite/extensions/note-config/edgeless-note-header.tsx
index a21a22bcd4..5ffd1a82d5 100644
--- a/packages/frontend/core/src/blocksuite/extensions/note-config/edgeless-note-header.tsx
+++ b/packages/frontend/core/src/blocksuite/extensions/note-config/edgeless-note-header.tsx
@@ -25,7 +25,7 @@ import * as styles from './edgeless-note-header.css';
 
 const EdgelessNoteToggleButton = ({ note }: { note: NoteBlockModel }) => {
   const t = useI18n();
-  const [collapsed, setCollapsed] = useState(note.edgeless.collapse);
+  const [collapsed, setCollapsed] = useState(note.props.edgeless.collapse);
   const editor = useService(EditorService).editor;
   const editorContainer = useLiveData(editor.editorContainer$);
   const gfx = editorContainer?.std.get(GfxControllerIdentifier);
@@ -39,7 +39,7 @@ const EdgelessNoteToggleButton = ({ note }: { note: NoteBlockModel }) => {
   );
 
   useEffect(() => {
-    return note.edgeless$.subscribe(({ collapse, collapsedHeight }) => {
+    return note.props.edgeless$.subscribe(({ collapse, collapsedHeight }) => {
       if (
         collapse &&
         collapsedHeight &&
@@ -50,7 +50,7 @@ const EdgelessNoteToggleButton = ({ note }: { note: NoteBlockModel }) => {
         setCollapsed(false);
       }
     });
-  }, [note.edgeless$]);
+  }, [note.props.edgeless$]);
 
   useEffect(() => {
     if (!gfx) return;
@@ -60,7 +60,7 @@ const EdgelessNoteToggleButton = ({ note }: { note: NoteBlockModel }) => {
     const dispose = selection.slots.updated.subscribe(() => {
       if (selection.has(note.id) && selection.editing) {
         note.doc.transact(() => {
-          note.edgeless.collapse = false;
+          note.props.edgeless.collapse = false;
         });
       }
     });
@@ -74,13 +74,13 @@ const EdgelessNoteToggleButton = ({ note }: { note: NoteBlockModel }) => {
     });
     note.doc.transact(() => {
       if (collapsed) {
-        note.edgeless.collapse = false;
+        note.props.edgeless.collapse = false;
       } else {
-        const bound = Bound.deserialize(note.xywh);
-        bound.h = styles.headerHeight * (note.edgeless.scale ?? 1);
-        note.xywh = bound.serialize();
-        note.edgeless.collapse = true;
-        note.edgeless.collapsedHeight = styles.headerHeight;
+        const bound = Bound.deserialize(note.props.xywh);
+        bound.h = styles.headerHeight * (note.props.edgeless.scale ?? 1);
+        note.props.xywh = bound.serialize();
+        note.props.edgeless.collapse = true;
+        note.props.edgeless.collapsedHeight = styles.headerHeight;
         gfx?.selection.clear();
       }
     });
diff --git a/packages/frontend/core/src/components/attachment-viewer/error.tsx b/packages/frontend/core/src/components/attachment-viewer/error.tsx
index b450f37a0d..237f6ea603 100644
--- a/packages/frontend/core/src/components/attachment-viewer/error.tsx
+++ b/packages/frontend/core/src/components/attachment-viewer/error.tsx
@@ -90,7 +90,7 @@ interface ErrorProps {
 
 export const Error = ({ model, ext }: ErrorProps) => {
   const t = useI18n();
-  const Icon = FILE_ICONS[model.type] ?? FileIcon;
+  const Icon = FILE_ICONS[model.props.type] ?? FileIcon;
   const title = t['com.affine.attachment.preview.error.title']();
   const subtitle = `.${ext} ${t['com.affine.attachment.preview.error.subtitle']()}`;
 
diff --git a/packages/frontend/core/src/components/attachment-viewer/index.tsx b/packages/frontend/core/src/components/attachment-viewer/index.tsx
index d36e81344a..3bd1e48acb 100644
--- a/packages/frontend/core/src/components/attachment-viewer/index.tsx
+++ b/packages/frontend/core/src/components/attachment-viewer/index.tsx
@@ -36,7 +36,7 @@ export const AttachmentViewerView = ({ model }: AttachmentViewerProps) => {
 };
 
 const AttachmentViewerInner = (props: PDFViewerProps) => {
-  return props.model.type.endsWith('pdf') ? (
+  return props.model.props.type.endsWith('pdf') ? (
     <AttachmentPreviewErrorBoundary>
       <PDFViewer {...props} />
     </AttachmentPreviewErrorBoundary>
diff --git a/packages/frontend/core/src/components/attachment-viewer/pdf-viewer-embedded-inner.tsx b/packages/frontend/core/src/components/attachment-viewer/pdf-viewer-embedded-inner.tsx
index d0829af8e2..664ea53cdd 100644
--- a/packages/frontend/core/src/components/attachment-viewer/pdf-viewer-embedded-inner.tsx
+++ b/packages/frontend/core/src/components/attachment-viewer/pdf-viewer-embedded-inner.tsx
@@ -67,7 +67,7 @@ export function PDFViewerEmbeddedInner({ model }: PDFViewerProps) {
     useMemo(() => (pageEntity ? pageEntity.page.bitmap$ : null), [pageEntity])
   );
 
-  const [name, setName] = useState(model.name);
+  const [name, setName] = useState(model.props.name);
   const [cursor, setCursor] = useState(0);
   const [isLoading, setIsLoading] = useState(true);
   const [visibility, setVisibility] = useState(false);
@@ -108,7 +108,7 @@ export function PDFViewerEmbeddedInner({ model }: PDFViewerProps) {
     };
   }, [cursor, meta, peek]);
 
-  useEffect(() => model.name$.subscribe(val => setName(val)), [model]);
+  useEffect(() => model.props.name$.subscribe(val => setName(val)), [model]);
 
   useEffect(() => {
     const canvas = canvasRef.current;
diff --git a/packages/frontend/core/src/components/attachment-viewer/utils.ts b/packages/frontend/core/src/components/attachment-viewer/utils.ts
index 6c5cf34cd0..6f1a26df41 100644
--- a/packages/frontend/core/src/components/attachment-viewer/utils.ts
+++ b/packages/frontend/core/src/components/attachment-viewer/utils.ts
@@ -6,7 +6,7 @@ import { downloadBlob } from '../../utils/resource';
 import type { PDFViewerProps } from './types';
 
 export async function getAttachmentBlob(model: AttachmentBlockModel) {
-  const sourceId = model.sourceId;
+  const sourceId = model.props.sourceId;
   if (!sourceId) {
     return null;
   }
@@ -15,7 +15,7 @@ export async function getAttachmentBlob(model: AttachmentBlockModel) {
   let blob = await doc.blobSync.get(sourceId);
 
   if (blob) {
-    blob = new Blob([blob], { type: model.type });
+    blob = new Blob([blob], { type: model.props.type });
   }
 
   return blob;
@@ -25,16 +25,16 @@ export async function download(model: AttachmentBlockModel) {
   const blob = await getAttachmentBlob(model);
   if (!blob) return;
 
-  await downloadBlob(blob, model.name);
+  await downloadBlob(blob, model.props.name);
 }
 
 export function buildAttachmentProps(
   model: AttachmentBlockModel
 ): PDFViewerProps {
-  const pieces = model.name.split('.');
+  const pieces = model.props.name.split('.');
   const ext = pieces.pop() || '';
   const name = pieces.join('.');
-  const size = filesize(model.size);
+  const size = filesize(model.props.size);
   return { model, name, ext, size };
 }
 
diff --git a/packages/frontend/core/src/desktop/pages/workspace/attachment/index.tsx b/packages/frontend/core/src/desktop/pages/workspace/attachment/index.tsx
index ae2a36d6f6..a60c14d7e2 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/attachment/index.tsx
+++ b/packages/frontend/core/src/desktop/pages/workspace/attachment/index.tsx
@@ -67,8 +67,10 @@ export const AttachmentPage = ({
   if (doc && model) {
     return (
       <FrameworkScope scope={doc.scope}>
-        <ViewTitle title={model.name} />
-        <ViewIcon icon={model.type.endsWith('pdf') ? 'pdf' : 'attachment'} />
+        <ViewTitle title={model.props.name} />
+        <ViewIcon
+          icon={model.props.type.endsWith('pdf') ? 'pdf' : 'attachment'}
+        />
         <AttachmentViewerView model={model} />
       </FrameworkScope>
     );
diff --git a/packages/frontend/core/src/modules/doc-info/services/doc-database-backlinks.ts b/packages/frontend/core/src/modules/doc-info/services/doc-database-backlinks.ts
index 050ddfb159..c9d4b97e73 100644
--- a/packages/frontend/core/src/modules/doc-info/services/doc-database-backlinks.ts
+++ b/packages/frontend/core/src/modules/doc-info/services/doc-database-backlinks.ts
@@ -98,7 +98,7 @@ export class DocDatabaseBacklinksService extends Service {
                 doc: docRef.doc,
                 docId: backlink.docId,
                 databaseId: dbModel.id,
-                databaseName: dbModel.title.yText.toString(),
+                databaseName: dbModel.props.title.yText.toString(),
                 dataSource: dataSource,
               });
             } else {
diff --git a/packages/frontend/core/src/modules/doc/entities/doc.ts b/packages/frontend/core/src/modules/doc/entities/doc.ts
index 7e04804f8b..c1b433af7d 100644
--- a/packages/frontend/core/src/modules/doc/entities/doc.ts
+++ b/packages/frontend/core/src/modules/doc/entities/doc.ts
@@ -90,8 +90,8 @@ export class Doc extends Entity {
       ?.model as RootBlockModel | undefined;
     if (pageBlock) {
       this.blockSuiteDoc.transact(() => {
-        pageBlock.title.delete(0, pageBlock.title.length);
-        pageBlock.title.insert(newTitle, 0);
+        pageBlock.props.title.delete(0, pageBlock.props.title.length);
+        pageBlock.props.title.insert(newTitle, 0);
       });
       this.record.setMeta({ title: newTitle });
     }
diff --git a/packages/frontend/core/src/modules/docs-search/worker/in-worker.ts b/packages/frontend/core/src/modules/docs-search/worker/in-worker.ts
index d84a575410..5e62ab1893 100644
--- a/packages/frontend/core/src/modules/docs-search/worker/in-worker.ts
+++ b/packages/frontend/core/src/modules/docs-search/worker/in-worker.ts
@@ -138,7 +138,7 @@ function generateMarkdownPreviewBuilder(
     );
 
     return {
-      ...props,
+      props,
       id: yblock.get('sys:id') as string,
       flavour,
       children: [],
@@ -147,7 +147,7 @@ function generateMarkdownPreviewBuilder(
       keys: Array.from(yblock.keys())
         .filter(key => key.startsWith('prop:'))
         .map(key => key.substring(5)),
-    } as DraftModel;
+    } as unknown as DraftModel;
   }
 
   const titleMiddleware: TransformerMiddleware = ({ adapterConfigs }) => {
@@ -300,12 +300,12 @@ function generateMarkdownPreviewBuilder(
 
     const info = ['an image block'];
 
-    if (model.sourceId) {
-      info.push(`file id ${model.sourceId}`);
+    if (model.props.sourceId) {
+      info.push(`file id ${model.props.sourceId}`);
     }
 
-    if (model.caption) {
-      info.push(`with caption ${model.caption}`);
+    if (model.props.caption) {
+      info.push(`with caption ${model.props.caption}`);
     }
 
     return info.join(', ') + '\n';
@@ -353,8 +353,8 @@ function generateMarkdownPreviewBuilder(
     if (!isBookmarkModel(draftModel)) {
       return null;
     }
-    const title = draftModel.title;
-    const url = draftModel.url;
+    const title = draftModel.props.title;
+    const url = draftModel.props.url;
     return `[${title}](${url})\n`;
   };
 
@@ -370,7 +370,7 @@ function generateMarkdownPreviewBuilder(
       return null;
     }
 
-    return `[${draftModel.name}](${draftModel.sourceId})\n`;
+    return `[${draftModel.props.name}](${draftModel.props.sourceId})\n`;
   };
 
   const generateTableMarkdownPreview = (block: BlockDocumentInfo) => {
diff --git a/packages/frontend/core/src/modules/pdf/renderer/utils.ts b/packages/frontend/core/src/modules/pdf/renderer/utils.ts
index 47013d9bd1..562a5c441b 100644
--- a/packages/frontend/core/src/modules/pdf/renderer/utils.ts
+++ b/packages/frontend/core/src/modules/pdf/renderer/utils.ts
@@ -1,7 +1,7 @@
 import type { AttachmentBlockModel } from '@blocksuite/affine/model';
 
 export async function downloadBlobToBuffer(model: AttachmentBlockModel) {
-  const sourceId = model.sourceId;
+  const sourceId = model.props.sourceId;
   if (!sourceId) {
     throw new Error('Attachment not found');
   }
diff --git a/packages/frontend/core/src/modules/peek-view/entities/peek-view.ts b/packages/frontend/core/src/modules/peek-view/entities/peek-view.ts
index 2cbe35729f..cab16bba83 100644
--- a/packages/frontend/core/src/modules/peek-view/entities/peek-view.ts
+++ b/packages/frontend/core/src/modules/peek-view/entities/peek-view.ts
@@ -147,7 +147,7 @@ function resolvePeekInfoFromPeekTarget(
         isEmbedLinkedDocModel(blockModel) ||
         isEmbedSyncedDocModel(blockModel)
       ) {
-        const { pageId: docId, params } = blockModel;
+        const { pageId: docId, params } = blockModel.props;
         const info: DocPeekViewInfo = {
           type: 'doc',
           docRef: { docId, ...params },
@@ -174,7 +174,7 @@ function resolvePeekInfoFromPeekTarget(
           docRef: {
             docId: blockModel.doc.id,
             blockIds: [blockModel.id],
-            filetype: blockModel.type,
+            filetype: blockModel.props.type,
           },
         };
       } else if (isImageBlockModel(blockModel)) {
diff --git a/packages/frontend/core/src/modules/peek-view/view/image-preview/index.tsx b/packages/frontend/core/src/modules/peek-view/view/image-preview/index.tsx
index b23377ee5c..b67ec408c2 100644
--- a/packages/frontend/core/src/modules/peek-view/view/image-preview/index.tsx
+++ b/packages/frontend/core/src/modules/peek-view/view/image-preview/index.tsx
@@ -75,7 +75,9 @@ function useImageBlob(
           return null;
         }
         const blockModel = block.model as ImageBlockModel;
-        return await docCollection.blobSync.get(blockModel.sourceId as string);
+        return await docCollection.blobSync.get(
+          blockModel.props.sourceId as string
+        );
       },
       suspense: false,
     }
@@ -154,8 +156,8 @@ const ImagePreviewModalImpl = ({
     return block.model as ImageBlockModel;
   }, [blockId, blocksuiteDoc]);
   const caption = useMemo(() => {
-    return blockModel?.caption ?? '';
-  }, [blockModel?.caption]);
+    return blockModel?.props.caption ?? '';
+  }, [blockModel?.props.caption]);
   const [blocks, setBlocks] = useState<ImageBlockModel[]>([]);
   const [cursor, setCursor] = useState(0);
   const zoomRef = useRef<HTMLDivElement | null>(null);
diff --git a/tests/affine-local/e2e/blocksuite/clipboard/clipboard.spec.ts b/tests/affine-local/e2e/blocksuite/clipboard/clipboard.spec.ts
index 106d87af8b..43732fa140 100644
--- a/tests/affine-local/e2e/blocksuite/clipboard/clipboard.spec.ts
+++ b/tests/affine-local/e2e/blocksuite/clipboard/clipboard.spec.ts
@@ -43,8 +43,8 @@ async function verifyParagraphContent(
       .nth(index)
       .evaluate(
         (block: ParagraphBlockComponent, expected: string) =>
-          block.model.type === 'text' &&
-          block.model.text.toString() === expected,
+          block.model.props.type === 'text' &&
+          block.model.props.text.toString() === expected,
         expectedText
       )
   ).toBeTruthy();
diff --git a/tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts b/tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts
index c68d0c443f..bfaca7c939 100644
--- a/tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts
+++ b/tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts
@@ -296,7 +296,7 @@ test.describe('edgeless note element toolbar', () => {
           'affine-edgeless-root'
         ) as EdgelessRootBlockComponent;
         const note = root.gfx.getElementById(noteId) as NoteBlockModel;
-        return note.edgeless;
+        return note.props.edgeless;
       }, noteId);
     };
 
diff --git a/tests/affine-local/e2e/blocksuite/paragraph.spec.ts b/tests/affine-local/e2e/blocksuite/paragraph.spec.ts
index 0c07d53e57..b76e990379 100644
--- a/tests/affine-local/e2e/blocksuite/paragraph.spec.ts
+++ b/tests/affine-local/e2e/blocksuite/paragraph.spec.ts
@@ -175,7 +175,7 @@ test('add new heading when press enter at the end of collapsed heading', async (
       .nth(1)
       .evaluate(
         (block: ParagraphBlockComponent) =>
-          block.model.text.toString() === 'bbb'
+          block.model.props.text.toString() === 'bbb'
       )
   ).toBeTruthy();
   await pressEnter(page);
@@ -184,7 +184,8 @@ test('add new heading when press enter at the end of collapsed heading', async (
       .nth(1)
       .evaluate(
         (block: ParagraphBlockComponent) =>
-          block.model.type === 'text' && block.model.text.toString() === ''
+          block.model.props.type === 'text' &&
+          block.model.props.text.toString() === ''
       )
   ).toBeTruthy();
   expect(
@@ -192,7 +193,7 @@ test('add new heading when press enter at the end of collapsed heading', async (
       .nth(2)
       .evaluate(
         (block: ParagraphBlockComponent) =>
-          block.model.text.toString() === 'bbb'
+          block.model.props.text.toString() === 'bbb'
       )
   ).toBeTruthy();
 
@@ -202,7 +203,7 @@ test('add new heading when press enter at the end of collapsed heading', async (
       .nth(1)
       .evaluate(
         (block: ParagraphBlockComponent) =>
-          block.model.text.toString() === 'bbb'
+          block.model.props.text.toString() === 'bbb'
       )
   ).toBeTruthy();
   expect(await paragraph.nth(1).isVisible()).toBeTruthy();
@@ -221,7 +222,8 @@ test('add new heading when press enter at the end of collapsed heading', async (
       .nth(2)
       .evaluate(
         (block: ParagraphBlockComponent) =>
-          block.model.type === 'h1' && block.model.text.toString() === ''
+          block.model.props.type === 'h1' &&
+          block.model.props.text.toString() === ''
       )
   ).toBeTruthy();
 });
@@ -262,7 +264,8 @@ test('unfold collapsed heading when its siblings changed to text type from headi
       .nth(2)
       .evaluate(
         (block: ParagraphBlockComponent) =>
-          block.model.type === 'h1' && block.model.text.toString() === 'ccc'
+          block.model.props.type === 'h1' &&
+          block.model.props.text.toString() === 'ccc'
       )
   ).toBeTruthy();
   await page.keyboard.press('Backspace');
@@ -271,7 +274,8 @@ test('unfold collapsed heading when its siblings changed to text type from headi
       .nth(2)
       .evaluate(
         (block: ParagraphBlockComponent) =>
-          block.model.type === 'text' && block.model.text.toString() === 'ccc'
+          block.model.props.type === 'text' &&
+          block.model.props.text.toString() === 'ccc'
       )
   ).toBeTruthy();
   expect(await paragraph.nth(1).isVisible()).toBeTruthy();
@@ -292,7 +296,8 @@ test('also move children when dedent collapsed heading', async ({ page }) => {
       .nth(0)
       .evaluate(
         (block: ParagraphBlockComponent) =>
-          block.model.type === 'h1' && block.model.text.toString() === 'bbb'
+          block.model.props.type === 'h1' &&
+          block.model.props.text.toString() === 'bbb'
       )
   ).toBeTruthy();
   expect(
@@ -300,7 +305,8 @@ test('also move children when dedent collapsed heading', async ({ page }) => {
       .nth(1)
       .evaluate(
         (block: ParagraphBlockComponent) =>
-          block.model.type === 'text' && block.model.text.toString() === 'ccc'
+          block.model.props.type === 'text' &&
+          block.model.props.text.toString() === 'ccc'
       )
   ).toBeTruthy();
 
@@ -319,7 +325,8 @@ test('also move children when dedent collapsed heading', async ({ page }) => {
       .nth(1)
       .evaluate(
         (block: ParagraphBlockComponent) =>
-          block.model.type === 'h1' && block.model.text.toString() === 'bbb'
+          block.model.props.type === 'h1' &&
+          block.model.props.text.toString() === 'bbb'
       )
   ).toBeTruthy();
   expect(
@@ -327,7 +334,8 @@ test('also move children when dedent collapsed heading', async ({ page }) => {
       .nth(2)
       .evaluate(
         (block: ParagraphBlockComponent) =>
-          block.model.type === 'text' && block.model.text.toString() === 'ccc'
+          block.model.props.type === 'text' &&
+          block.model.props.text.toString() === 'ccc'
       )
   ).toBeTruthy();
 
@@ -364,7 +372,8 @@ test('also move collapsed siblings when indent collapsed heading', async ({
       .nth(0)
       .evaluate(
         (block: ParagraphBlockComponent) =>
-          block.model.type === 'h1' && block.model.text.toString() === 'bbb'
+          block.model.props.type === 'h1' &&
+          block.model.props.text.toString() === 'bbb'
       )
   ).toBeTruthy();
   await undoByKeyboard(page);
@@ -386,7 +395,8 @@ test('also move collapsed siblings when indent collapsed heading', async ({
       .nth(0)
       .evaluate(
         (block: ParagraphBlockComponent) =>
-          block.model.type === 'h1' && block.model.text.toString() === 'bbb'
+          block.model.props.type === 'h1' &&
+          block.model.props.text.toString() === 'bbb'
       )
   ).toBeTruthy();
   expect(
@@ -396,7 +406,8 @@ test('also move collapsed siblings when indent collapsed heading', async ({
       .nth(1)
       .evaluate(
         (block: ParagraphBlockComponent) =>
-          block.model.type === 'text' && block.model.text.toString() === 'ccc'
+          block.model.props.type === 'text' &&
+          block.model.props.text.toString() === 'ccc'
       )
   ).toBeTruthy();
 });
@@ -428,7 +439,8 @@ test('unfold collapsed heading when its other blocks indented to be its sibling'
       .nth(2)
       .evaluate(
         (block: ParagraphBlockComponent) =>
-          block.model.type === 'text' && block.model.text.toString() === 'ccc'
+          block.model.props.type === 'text' &&
+          block.model.props.text.toString() === 'ccc'
       )
   ).toBeTruthy();
   await paragraph.locator('blocksuite-toggle-button .toggle-icon').click();