fix(editor): transform to draftmodel first when get snapshot (#10477)

fix AF-2283

.github/CODEOWNERS

@@ -1 +1,2 @@
 /blocksuite/ @toeverything/blocksuite-core
+/packages/frontend/core/src/blocksuite @toeverything/blocksuite-core

.github/helm/affine/Chart.yaml

@@ -3,4 +3,4 @@ name: affine
 description: AFFiNE cloud chart
 type: application
 version: 0.0.0
-appVersion: "0.19.0"
+appVersion: "0.20.0"

.github/helm/affine/charts/graphql/Chart.yaml

@@ -3,7 +3,7 @@ name: graphql
 description: AFFiNE GraphQL server
 type: application
 version: 0.0.0
-appVersion: "0.19.0"
+appVersion: "0.20.0"
 dependencies:
   - name: gcloud-sql-proxy
     version: 0.0.0

.github/helm/affine/charts/sync/Chart.yaml

@@ -3,7 +3,7 @@ name: sync
 description: AFFiNE Sync Server
 type: application
 version: 0.0.0
-appVersion: "0.19.0"
+appVersion: "0.20.0"
 dependencies:
   - name: gcloud-sql-proxy
     version: 0.0.0

Cargo.toml

@@ -15,11 +15,16 @@ affine_common    = { path = "./packages/common/native" }
 affine_nbstore   = { path = "./packages/frontend/native/nbstore" }
 anyhow           = "1"
 base64-simd      = "0.8"
+block2           = "0.6"
 chrono           = "0.4"
+core-foundation  = "0.10"
+coreaudio-rs     = "0.12"
 criterion2       = { version = "2", default-features = false }
+dispatch2        = "0.2"
 dotenvy          = "0.15"
 file-format      = { version = "0.26", features = ["reader"] }
 homedir          = "0.3"
+libc             = "0.2"
 mimalloc         = "0.1"
 napi             = { version = "3.0.0-alpha.12", features = ["async", "chrono_date", "error_anyhow", "napi9", "serde"] }
 napi-build       = { version = "2" }
@@ -31,6 +36,8 @@ once_cell        = "1"
 parking_lot      = "0.12"
 rand             = "0.9"
 rayon            = "1.10"
+rubato           = "0.16"
+screencapturekit = "0.3"
 serde            = "1"
 serde_json       = "1"
 sha3             = "0.10"

blocksuite/affine/all/package.json

@@ -98,5 +98,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/block-attachment/package.json

@@ -23,10 +23,10 @@
     "@blocksuite/icons": "^2.2.1",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
-    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.11",
+    "@toeverything/theme": "^1.1.12",
     "file-type": "^20.0.0",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
@@ -42,5 +42,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/block-bookmark/package.json

@@ -22,10 +22,10 @@
     "@blocksuite/icons": "^2.2.1",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
-    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.11",
+    "@toeverything/theme": "^1.1.12",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "zod": "^3.23.8"
@@ -40,5 +40,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/block-code/package.json

@@ -21,10 +21,10 @@
     "@blocksuite/icons": "^2.2.3",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
-    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.11",
+    "@toeverything/theme": "^1.1.12",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
@@ -41,5 +41,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/block-data-view/package.json

@@ -23,10 +23,10 @@
     "@blocksuite/icons": "^2.2.3",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
-    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.11",
+    "@toeverything/theme": "^1.1.12",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
@@ -42,5 +42,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/block-data-view/src/data-view-model.ts

@@ -5,7 +5,11 @@ import {
   type InsertToPosition,
 } from '@blocksuite/affine-shared/utils';
 import type { DataViewDataType } from '@blocksuite/data-view';
-import { BlockModel, defineBlockSchema } from '@blocksuite/store';
+import {
+  BlockModel,
+  BlockSchemaExtension,
+  defineBlockSchema,
+} from '@blocksuite/store';
 
 type Props = {
   title: string;
@@ -93,3 +97,6 @@ export const DataViewBlockSchema = defineBlockSchema({
     return new DataViewBlockModel();
   },
 });
+
+export const DataViewBlockSchemaExtension =
+  BlockSchemaExtension(DataViewBlockSchema);

blocksuite/affine/block-database/package.json

@@ -23,10 +23,10 @@
     "@blocksuite/icons": "^2.2.1",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
-    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.11",
+    "@toeverything/theme": "^1.1.12",
     "@types/mdast": "^4.0.4",
     "date-fns": "^4.0.0",
     "lit": "^3.2.0",
@@ -44,5 +44,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/block-divider/package.json

@@ -20,10 +20,10 @@
     "@blocksuite/global": "workspace:*",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
-    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.11",
+    "@toeverything/theme": "^1.1.12",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
@@ -39,5 +39,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/block-edgeless-text/package.json

@@ -22,10 +22,10 @@
     "@blocksuite/icons": "^2.2.1",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
-    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.11",
+    "@toeverything/theme": "^1.1.12",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "zod": "^3.23.8"
@@ -40,5 +40,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/block-embed/package.json

@@ -22,10 +22,10 @@
     "@blocksuite/icons": "^2.2.1",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
-    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.11",
+    "@toeverything/theme": "^1.1.12",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "yjs": "^13.6.21",
@@ -44,5 +44,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/block-embed/src/common/embed-block-element.ts

@@ -9,6 +9,7 @@ import {
   EMBED_CARD_WIDTH,
 } from '@blocksuite/affine-shared/consts';
 import { DocModeProvider } from '@blocksuite/affine-shared/services';
+import { findAncestorModel } from '@blocksuite/affine-shared/utils';
 import type { BlockService } from '@blocksuite/block-std';
 import type { GfxCompatibleProps } from '@blocksuite/block-std/gfx';
 import type { BlockModel } from '@blocksuite/store';
@@ -57,7 +58,15 @@ export class EmbedBlockComponent<
     ) {
       this.style.display = 'block';
 
-      if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
+      const insideNote = findAncestorModel(
+        this.model,
+        m => m.flavour === 'affine:note'
+      );
+
+      if (
+        !insideNote &&
+        this.std.get(DocModeProvider).getEditorMode() === 'edgeless'
+      ) {
         this.style.minWidth = `${EMBED_CARD_MIN_WIDTH}px`;
       }
     }

blocksuite/affine/block-embed/src/embed-github-block/styles.ts

@@ -2,6 +2,7 @@ import { css, html } from 'lit';
 
 export const styles = css`
   .affine-embed-github-block {
+    container: affine-embed-github-block / inline-size;
     box-sizing: border-box;
     display: flex;
     width: 100%;
@@ -24,6 +25,7 @@ export const styles = css`
     padding: 12px;
     border-radius: var(--1, 0px);
     opacity: var(--add, 1);
+    overflow: hidden;
   }
 
   .affine-embed-github-content-title {
@@ -376,6 +378,15 @@ export const styles = css`
       display: none;
     }
   }
+
+  @container affine-embed-github-block (width < 375px) {
+    .affine-embed-github-content {
+      width: 100%;
+    }
+    .affine-embed-github-banner {
+      display: none;
+    }
+  }
 `;
 
 export const GithubIcon = html`<svg

blocksuite/affine/block-embed/src/embed-synced-doc-block/embed-synced-doc-block.ts

@@ -26,9 +26,9 @@ import {
 } from '@blocksuite/affine-shared/utils';
 import {
   BlockSelection,
-  BlockServiceWatcher,
   BlockStdScope,
   type EditorHost,
+  LifeCycleWatcher,
 } from '@blocksuite/block-std';
 import {
   GfxControllerIdentifier,
@@ -124,27 +124,31 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
       this.std.getOptional(EditorSettingProvider) ??
       signal(GeneralSettingSchema.parse({}));
 
-    class EmbedSyncedDocWatcher extends BlockServiceWatcher {
-      static override readonly flavour = 'affine:embed-synced-doc';
+    class EmbedSyncedDocWatcher extends LifeCycleWatcher {
+      static override key = 'embed-synced-doc-watcher';
 
-      override mounted() {
-        const disposableGroup = this.blockService.disposables;
-        const slots = this.blockService.specSlots;
-        disposableGroup.add(
-          slots.viewConnected.on(({ component }) => {
-            const nextComponent = component as EmbedSyncedDocBlockComponent;
+      override mounted(): void {
+        const { view } = this.std;
+        view.viewUpdated.on(payload => {
+          if (
+            payload.type !== 'block' ||
+            payload.view.model.flavour !== 'affine:embed-synced-doc'
+          ) {
+            return;
+          }
+          const nextComponent = payload.view as EmbedSyncedDocBlockComponent;
+          if (payload.method === 'add') {
             nextComponent.depth = nextDepth;
             currentDisposables.add(() => {
               nextComponent.depth = 0;
             });
-          })
-        );
-        disposableGroup.add(
-          slots.viewDisconnected.on(({ component }) => {
-            const nextComponent = component as EmbedSyncedDocBlockComponent;
+            return;
+          }
+          if (payload.method === 'delete') {
             nextComponent.depth = 0;
-          })
-        );
+            return;
+          }
+        });
       }
     }
 
@@ -231,6 +235,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
             [theme]: true,
             surface: false,
             selected: this.selected$.value,
+            'show-hover-border': true,
           })}
           @click=${this._handleClick}
           style=${containerStyleMap}

blocksuite/affine/block-embed/src/embed-synced-doc-block/styles.ts

@@ -57,10 +57,13 @@ export const blockStyles = css`
   }
 
   .affine-embed-synced-doc-container {
-    border: 1px solid var(--affine-border-color);
+    border: 1px solid transparent;
     border-radius: 8px;
     overflow: hidden;
   }
+  .affine-embed-synced-doc-container.show-hover-border:hover {
+    border-color: var(--affine-border-color);
+  }
   .affine-embed-synced-doc-container.page {
     display: block;
     width: 100%;
@@ -151,7 +154,12 @@ export const blockStyles = css`
   }
 
   .affine-embed-synced-doc-container.surface {
+    border-color: var(--affine-border-color);
     background: var(--affine-background-primary-color);
+
+    affine-preview-root {
+      padding: 0 24px;
+    }
   }
 
   .affine-embed-synced-doc-container

blocksuite/affine/block-frame/package.json

@@ -21,10 +21,10 @@
     "@blocksuite/global": "workspace:*",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
-    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.11",
+    "@toeverything/theme": "^1.1.12",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
@@ -41,5 +41,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/block-image/package.json

@@ -23,10 +23,10 @@
     "@blocksuite/icons": "^2.2.1",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
-    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.11",
+    "@toeverything/theme": "^1.1.12",
     "file-type": "^20.0.0",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
@@ -42,5 +42,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/block-latex/package.json

@@ -21,10 +21,10 @@
     "@blocksuite/global": "workspace:*",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
-    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.11",
+    "@toeverything/theme": "^1.1.12",
     "@types/katex": "^0.16.7",
     "@types/mdast": "^4.0.4",
     "katex": "^0.16.11",
@@ -43,5 +43,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/block-list/package.json

@@ -20,10 +20,10 @@
     "@blocksuite/global": "workspace:*",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
-    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.11",
+    "@toeverything/theme": "^1.1.12",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
@@ -42,5 +42,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/block-note/package.json

@@ -23,10 +23,10 @@
     "@blocksuite/icons": "^2.2.1",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
-    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.11",
+    "@toeverything/theme": "^1.1.12",
     "@types/mdast": "^4.0.4",
     "@vanilla-extract/css": "^1.17.0",
     "lit": "^3.2.0",
@@ -43,5 +43,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/block-paragraph/package.json

@@ -20,10 +20,10 @@
     "@blocksuite/global": "workspace:*",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
-    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.11",
+    "@toeverything/theme": "^1.1.12",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
@@ -39,5 +39,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/block-root/package.json

@@ -42,10 +42,10 @@
     "@blocksuite/icons": "^2.2.1",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
-    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.11",
+    "@toeverything/theme": "^1.1.12",
     "@types/lodash-es": "^4.17.12",
     "@types/mdast": "^4.0.4",
     "@vanilla-extract/css": "^1.17.0",
@@ -69,5 +69,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/block-root/src/common-specs/index.ts

@@ -6,19 +6,19 @@ import {
   PageViewportServiceExtension,
   ThemeService,
 } from '@blocksuite/affine-shared/services';
+import { dragHandleWidget } from '@blocksuite/affine-widget-drag-handle';
+import { docRemoteSelectionWidget } from '@blocksuite/affine-widget-remote-selection';
+import { scrollAnchoringWidget } from '@blocksuite/affine-widget-scroll-anchoring';
 import { FlavourExtension } from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 
 import { RootBlockAdapterExtensions } from '../adapters/extension';
 import {
-  docRemoteSelectionWidget,
-  dragHandleWidget,
   embedCardToolbarWidget,
   formatBarWidget,
   innerModalWidget,
   linkedDocWidget,
   modalWidget,
-  scrollAnchoringWidget,
   slashMenuWidget,
   viewportOverlayWidget,
 } from './widgets';

blocksuite/affine/block-root/src/common-specs/widgets.ts

@@ -1,6 +1,3 @@
-import { AFFINE_DRAG_HANDLE_WIDGET } from '@blocksuite/affine-widget-drag-handle';
-import { AFFINE_DOC_REMOTE_SELECTION_WIDGET } from '@blocksuite/affine-widget-remote-selection';
-import { AFFINE_SCROLL_ANCHORING_WIDGET } from '@blocksuite/affine-widget-scroll-anchoring';
 import { WidgetViewExtension } from '@blocksuite/block-std';
 import { literal, unsafeStatic } from 'lit/static-html.js';
 
@@ -32,11 +29,6 @@ export const linkedDocWidget = WidgetViewExtension(
   AFFINE_LINKED_DOC_WIDGET,
   literal`${unsafeStatic(AFFINE_LINKED_DOC_WIDGET)}`
 );
-export const dragHandleWidget = WidgetViewExtension(
-  'affine:page',
-  AFFINE_DRAG_HANDLE_WIDGET,
-  literal`${unsafeStatic(AFFINE_DRAG_HANDLE_WIDGET)}`
-);
 export const embedCardToolbarWidget = WidgetViewExtension(
   'affine:page',
   AFFINE_EMBED_CARD_TOOLBAR_WIDGET,
@@ -47,18 +39,8 @@ export const formatBarWidget = WidgetViewExtension(
   AFFINE_FORMAT_BAR_WIDGET,
   literal`${unsafeStatic(AFFINE_FORMAT_BAR_WIDGET)}`
 );
-export const docRemoteSelectionWidget = WidgetViewExtension(
-  'affine:page',
-  AFFINE_DOC_REMOTE_SELECTION_WIDGET,
-  literal`${unsafeStatic(AFFINE_DOC_REMOTE_SELECTION_WIDGET)}`
-);
 export const viewportOverlayWidget = WidgetViewExtension(
   'affine:page',
   AFFINE_VIEWPORT_OVERLAY_WIDGET,
   literal`${unsafeStatic(AFFINE_VIEWPORT_OVERLAY_WIDGET)}`
 );
-export const scrollAnchoringWidget = WidgetViewExtension(
-  'affine:page',
-  AFFINE_SCROLL_ANCHORING_WIDGET,
-  literal`${unsafeStatic(AFFINE_SCROLL_ANCHORING_WIDGET)}`
-);

blocksuite/affine/block-root/src/edgeless/clipboard/clipboard.ts

@@ -64,7 +64,6 @@ import {
   BlockSnapshotSchema,
   fromJSON,
   type SliceSnapshot,
-  Transformer,
 } from '@blocksuite/store';
 import DOMPurify from 'dompurify';
 import * as Y from 'yjs';
@@ -373,15 +372,7 @@ export class EdgelessClipboardController extends PageClipboard {
       if (mayBeSurfaceDataJson !== undefined) {
         const elementsRawData = JSON.parse(mayBeSurfaceDataJson);
         const { snapshot, blobs } = elementsRawData;
-        const job = new Transformer({
-          schema: this.std.workspace.schema,
-          blobCRUD: this.std.workspace.blobSync,
-          docCRUD: {
-            create: (id: string) => this.std.workspace.createDoc({ id }),
-            get: (id: string) => this.std.workspace.getDoc(id),
-            delete: (id: string) => this.std.workspace.removeDoc(id),
-          },
-        });
+        const job = this.std.store.getTransformer();
         const map = job.assetsManager.getAssets();
         decodeClipboardBlobs(blobs, map);
         for (const blobId of map.keys()) {
@@ -1377,15 +1368,7 @@ export async function prepareClipboardData(
   selectedAll: GfxModel[],
   std: BlockStdScope
 ) {
-  const job = new Transformer({
-    schema: std.workspace.schema,
-    blobCRUD: std.workspace.blobSync,
-    docCRUD: {
-      create: (id: string) => std.workspace.createDoc({ id }),
-      get: (id: string) => std.workspace.getDoc(id),
-      delete: (id: string) => std.workspace.removeDoc(id),
-    },
-  });
+  const job = std.store.getTransformer();
   const selected = await Promise.all(
     selectedAll.map(async selected => {
       const data = serializeElement(selected, selectedAll, job);

blocksuite/affine/block-root/src/edgeless/components/frame/frame-preview.ts

@@ -1,9 +1,9 @@
 import type { FrameBlockModel } from '@blocksuite/affine-model';
 import { SpecProvider } from '@blocksuite/affine-shared/utils';
 import {
-  BlockServiceWatcher,
   BlockStdScope,
   type EditorHost,
+  LifeCycleWatcher,
   ShadowlessElement,
 } from '@blocksuite/block-std';
 import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
@@ -117,22 +117,26 @@ export class FramePreview extends WithDisposable(ShadowlessElement) {
 
   private _initSpec() {
     const refreshViewport = this._refreshViewport.bind(this);
-    class FramePreviewWatcher extends BlockServiceWatcher {
-      static override readonly flavour = 'affine:page';
+    class FramePreviewWatcher extends LifeCycleWatcher {
+      static override key = 'frame-preview-watcher';
 
       override mounted() {
-        const blockService = this.blockService;
-        blockService.disposables.add(
-          blockService.specSlots.viewConnected.on(({ component }) => {
-            const edgelessBlock =
-              component as EdgelessRootPreviewBlockComponent;
-
-            edgelessBlock.editorViewportSelector = 'frame-preview-viewport';
-            edgelessBlock.service.viewport.sizeUpdated.once(() => {
-              refreshViewport();
-            });
-          })
-        );
+        const { view } = this.std;
+        view.viewUpdated.on(payload => {
+          if (
+            payload.type !== 'block' ||
+            payload.method !== 'add' ||
+            payload.view.model.flavour !== 'affine:page'
+          ) {
+            return;
+          }
+          const edgelessBlock =
+            payload.view as EdgelessRootPreviewBlockComponent;
+          edgelessBlock.editorViewportSelector = 'frame-preview-viewport';
+          edgelessBlock.service.viewport.sizeUpdated.once(() => {
+            refreshViewport();
+          });
+        });
       }
     }
     this._previewSpec.extend([FramePreviewWatcher]);

blocksuite/affine/block-root/src/edgeless/components/panel/color-panel.ts

@@ -1,5 +1,9 @@
 import type { Color, ColorScheme, Palette } from '@blocksuite/affine-model';
-import { isTransparent, resolveColor } from '@blocksuite/affine-model';
+import {
+  DefaultTheme,
+  isTransparent,
+  resolveColor,
+} from '@blocksuite/affine-model';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { css, html, LitElement, nothing, svg, type TemplateResult } from 'lit';
@@ -253,7 +257,7 @@ export class EdgelessColorPanel extends LitElement {
   accessor openColorPicker!: (e: MouseEvent) => void;
 
   @property({ type: Array })
-  accessor palettes: readonly Palette[] = [];
+  accessor palettes: readonly Palette[] = DefaultTheme.Palettes;
 
   @property({ attribute: false })
   accessor theme!: ColorScheme;

blocksuite/affine/block-root/src/edgeless/components/panel/stroke-style-panel.ts

@@ -1,8 +1,4 @@
-import {
-  type ColorScheme,
-  DefaultTheme,
-  type StrokeStyle,
-} from '@blocksuite/affine-model';
+import { type ColorScheme, type StrokeStyle } from '@blocksuite/affine-model';
 import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/utils';
 import { css, html, LitElement } from 'lit';
@@ -44,7 +40,6 @@ export class StrokeStylePanel extends WithDisposable(LitElement) {
         aria-label="Border colors"
         .value=${this.strokeColor}
         .theme=${this.theme}
-        .palettes=${DefaultTheme.Palettes}
         .hollowCircle=${this.hollowCircle}
         @select=${(e: ColorEvent) => this.setStrokeColor(e)}
       >

blocksuite/affine/block-root/src/edgeless/components/toolbar/brush/brush-menu.ts

@@ -65,7 +65,7 @@ export class EdgelessBrushMenu extends EdgelessToolbarToolMixin(
             class="one-way"
             .value=${this._props$.value.color}
             .theme=${this._theme$.value}
-            .palettes=${DefaultTheme.StrokeColorPalettes}
+            .palettes=${DefaultTheme.StrokeColorShortPalettes}
             .hasTransparent=${!this.edgeless.doc
               .get(FeatureFlagService)
               .getFlag('enable_color_picker')}

blocksuite/affine/block-root/src/edgeless/components/toolbar/connector/connector-menu.ts

@@ -133,7 +133,7 @@ export class EdgelessConnectorMenu extends EdgelessToolbarToolMixin(
             class="one-way"
             .value=${stroke}
             .theme=${this._theme$.value}
-            .palettes=${DefaultTheme.StrokeColorPalettes}
+            .palettes=${DefaultTheme.StrokeColorShortPalettes}
             .hasTransparent=${!this.edgeless.doc
               .get(FeatureFlagService)
               .getFlag('enable_color_picker')}

blocksuite/affine/block-root/src/edgeless/components/toolbar/shape/shape-menu.ts

@@ -75,9 +75,10 @@ export class EdgelessShapeMenu extends SignalWatcher(
     const filled = !isTransparent(value);
     const fillColor = value;
     const strokeColor = filled
-      ? DefaultTheme.StrokeColorPalettes.find(palette => palette.key === key)
-          ?.value
-      : DefaultTheme.StrokeColorMap.Grey;
+      ? DefaultTheme.StrokeColorShortPalettes.find(
+          palette => palette.key === key
+        )?.value
+      : DefaultTheme.StrokeColorShortMap.Grey;
 
     const { shapeName } = this._props$.value;
     this.edgeless.std
@@ -173,7 +174,7 @@ export class EdgelessShapeMenu extends SignalWatcher(
             class="one-way"
             .value=${fillColor}
             .theme=${this._theme$.value}
-            .palettes=${DefaultTheme.FillColorPalettes}
+            .palettes=${DefaultTheme.FillColorShortPalettes}
             .hasTransparent=${!this.edgeless.doc
               .get(FeatureFlagService)
               .getFlag('enable_color_picker')}

blocksuite/affine/block-root/src/edgeless/components/toolbar/text/text-menu.ts

@@ -33,7 +33,7 @@ export class EdgelessTextMenu extends EdgelessToolbarToolMixin(LitElement) {
             class="one-way"
             .value=${this.color}
             .theme=${this._theme$.value}
-            .palettes=${DefaultTheme.StrokeColorPalettes}
+            .palettes=${DefaultTheme.StrokeColorShortPalettes}
             @select=${(e: ColorEvent) => this.onChange({ color: e.detail })}
           ></edgeless-color-panel>
         </div>

blocksuite/affine/block-root/src/edgeless/edgeless-root-spec.ts

@@ -1,12 +1,15 @@
-import { AFFINE_EDGELESS_AUTO_CONNECT_WIDGET } from '@blocksuite/affine-widget-edgeless-auto-connect';
-import { AFFINE_FRAME_TITLE_WIDGET } from '@blocksuite/affine-widget-frame-title';
-import { AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET } from '@blocksuite/affine-widget-remote-selection';
+import { autoConnectWidget } from '@blocksuite/affine-widget-edgeless-auto-connect';
+import { frameTitleWidget } from '@blocksuite/affine-widget-frame-title';
+import { edgelessRemoteSelectionWidget } from '@blocksuite/affine-widget-remote-selection';
 import {
-  BlockServiceWatcher,
   BlockViewExtension,
+  LifeCycleWatcher,
   WidgetViewExtension,
 } from '@blocksuite/block-std';
-import { ToolController } from '@blocksuite/block-std/gfx';
+import {
+  GfxControllerIdentifier,
+  ToolController,
+} from '@blocksuite/block-std/gfx';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal, unsafeStatic } from 'lit/static-html.js';
 
@@ -20,31 +23,16 @@ import { EDGELESS_SELECTED_RECT_WIDGET } from './components/rects/edgeless-selec
 import { EDGELESS_TOOLBAR_WIDGET } from './components/toolbar/edgeless-toolbar.js';
 import { EdgelessRootService } from './edgeless-root-service.js';
 
-export const edgelessRemoteSelectionWidget = WidgetViewExtension(
-  'affine:page',
-  AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET,
-  literal`${unsafeStatic(AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET)}`
-);
 export const edgelessZoomToolbarWidget = WidgetViewExtension(
   'affine:page',
   AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET,
   literal`${unsafeStatic(AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET)}`
 );
-export const frameTitleWidget = WidgetViewExtension(
-  'affine:page',
-  AFFINE_FRAME_TITLE_WIDGET,
-  literal`${unsafeStatic(AFFINE_FRAME_TITLE_WIDGET)}`
-);
 export const elementToolbarWidget = WidgetViewExtension(
   'affine:page',
   EDGELESS_ELEMENT_TOOLBAR_WIDGET,
   literal`${unsafeStatic(EDGELESS_ELEMENT_TOOLBAR_WIDGET)}`
 );
-export const autoConnectWidget = WidgetViewExtension(
-  'affine:page',
-  AFFINE_EDGELESS_AUTO_CONNECT_WIDGET,
-  literal`${unsafeStatic(AFFINE_EDGELESS_AUTO_CONNECT_WIDGET)}`
-);
 export const edgelessDraggingAreaWidget = WidgetViewExtension(
   'affine:page',
   EDGELESS_DRAGGING_AREA_WIDGET,
@@ -71,17 +59,12 @@ export const edgelessToolbarWidget = WidgetViewExtension(
   literal`${unsafeStatic(EDGELESS_TOOLBAR_WIDGET)}`
 );
 
-class EdgelessLocker extends BlockServiceWatcher {
-  static override readonly flavour = 'affine:page';
+class EdgelessLocker extends LifeCycleWatcher {
+  static override key = 'edgeless-locker';
 
   override mounted() {
-    const service = this.blockService;
-    service.disposables.add(
-      service.specSlots.viewConnected.on(({ service }) => {
-        // Does not allow the user to move and zoom.
-        (service as EdgelessRootService).locked = true;
-      })
-    );
+    const { viewport } = this.std.get(GfxControllerIdentifier);
+    viewport.locked = true;
   }
 }
 

blocksuite/affine/block-root/src/edgeless/services/template.ts

@@ -16,7 +16,7 @@ import {
   type DocSnapshot,
   DocSnapshotSchema,
   type SnapshotNode,
-  Transformer,
+  type Transformer,
 } from '@blocksuite/store';
 import type * as Y from 'yjs';
 /**
@@ -90,16 +90,7 @@ export class TemplateJob {
   type: TemplateType;
 
   constructor({ model, type, middlewares }: TemplateJobConfig) {
-    this.job = new Transformer({
-      schema: model.doc.workspace.schema,
-      blobCRUD: model.doc.workspace.blobSync,
-      docCRUD: {
-        create: (id: string) => model.doc.workspace.createDoc({ id }),
-        get: (id: string) => model.doc.workspace.getDoc(id),
-        delete: (id: string) => model.doc.workspace.removeDoc(id),
-      },
-      middlewares: [],
-    });
+    this.job = model.doc.getTransformer();
     this.model = model;
     this.type = TEMPLATE_TYPES.includes(type as TemplateType)
       ? (type as TemplateType)
@@ -320,8 +311,7 @@ export class TemplateJob {
     from: Record<string, Record<string, unknown>>,
     to: Y.Map<Y.Map<unknown>>
   ) {
-    const schema =
-      this.model.doc.workspace.schema.flavourSchemaMap.get('affine:surface');
+    const schema = this.model.doc.schema.get('affine:surface');
     const surfaceTransformer = schema?.transformer?.(
       new Map()
     ) as SurfaceBlockTransformer;

blocksuite/affine/block-root/src/edgeless/utils/clone-utils.ts

@@ -19,7 +19,7 @@ import {
   isGfxGroupCompatibleModel,
   type SerializedElement,
 } from '@blocksuite/block-std/gfx';
-import { type BlockSnapshot, Transformer } from '@blocksuite/store';
+import type { BlockSnapshot, Transformer } from '@blocksuite/store';
 
 /**
  * return all elements in the tree of the elements
@@ -40,15 +40,7 @@ export function getSortedCloneElements(elements: GfxModel[]) {
 
 export function prepareCloneData(elements: GfxModel[], std: BlockStdScope) {
   elements = sortEdgelessElements(elements);
-  const job = new Transformer({
-    schema: std.workspace.schema,
-    blobCRUD: std.workspace.blobSync,
-    docCRUD: {
-      create: (id: string) => std.workspace.createDoc({ id }),
-      get: (id: string) => std.workspace.getDoc(id),
-      delete: (id: string) => std.workspace.removeDoc(id),
-    },
-  });
+  const job = std.store.getTransformer();
   const res = elements.map(element => {
     const data = serializeElement(element, elements, job);
     return data;

blocksuite/affine/block-root/src/preview/preview-root-block.ts

@@ -10,7 +10,6 @@ export class PreviewRootBlockComponent extends BlockComponent {
   static override styles = css`
     affine-preview-root {
       display: block;
-      padding: 0 24px;
     }
   `;
 

blocksuite/affine/block-root/src/transformers/html.ts

@@ -8,19 +8,21 @@ import {
 import { SpecProvider } from '@blocksuite/affine-shared/utils';
 import { Container } from '@blocksuite/global/di';
 import { sha } from '@blocksuite/global/utils';
-import type { Store, Workspace } from '@blocksuite/store';
+import type { Schema, Store, Workspace } from '@blocksuite/store';
 import { extMimeMap, Transformer } from '@blocksuite/store';
 
 import { createAssetsArchive, download, Unzip } from './utils.js';
 
 type ImportHTMLToDocOptions = {
   collection: Workspace;
+  schema: Schema;
   html: string;
   fileName?: string;
 };
 
 type ImportHTMLZipOptions = {
   collection: Workspace;
+  schema: Schema;
   imported: Blob;
 };
 
@@ -41,19 +43,10 @@ function getProvider() {
  */
 async function exportDoc(doc: Store) {
   const provider = getProvider();
-  const job = new Transformer({
-    schema: doc.schema,
-    blobCRUD: doc.blobSync,
-    docCRUD: {
-      create: (id: string) => doc.workspace.createDoc({ id }),
-      get: (id: string) => doc.workspace.getDoc(id),
-      delete: (id: string) => doc.workspace.removeDoc(id),
-    },
-    middlewares: [
-      docLinkBaseURLMiddleware(doc.workspace.id),
-      titleMiddleware(doc.workspace.meta.docMetas),
-    ],
-  });
+  const job = doc.getTransformer([
+    docLinkBaseURLMiddleware(doc.workspace.id),
+    titleMiddleware(doc.workspace.meta.docMetas),
+  ]);
   const snapshot = job.docToSnapshot(doc);
   const adapter = new HtmlAdapter(job, provider);
   if (!snapshot) {
@@ -87,18 +80,20 @@ async function exportDoc(doc: Store) {
  *
  * @param options - The import options.
  * @param options.collection - The target doc collection.
+ * @param options.schema - The schema of the target doc collection.
  * @param options.html - The HTML content to import.
  * @param options.fileName - Optional filename for the imported doc.
  * @returns A Promise that resolves to the ID of the newly created doc, or undefined if import fails.
  */
 async function importHTMLToDoc({
   collection,
+  schema,
   html,
   fileName,
 }: ImportHTMLToDocOptions) {
   const provider = getProvider();
   const job = new Transformer({
-    schema: collection.schema,
+    schema,
     blobCRUD: collection.blobSync,
     docCRUD: {
       create: (id: string) => collection.createDoc({ id }),
@@ -127,10 +122,15 @@ async function importHTMLToDoc({
  *
  * @param options - The import options.
  * @param options.collection - The target doc collection.
+ * @param options.schema - The schema of the target doc collection.
  * @param options.imported - The zip file as a Blob.
  * @returns A Promise that resolves to an array of IDs of the newly created docs.
  */
-async function importHTMLZip({ collection, imported }: ImportHTMLZipOptions) {
+async function importHTMLZip({
+  collection,
+  schema,
+  imported,
+}: ImportHTMLZipOptions) {
   const provider = getProvider();
   const unzip = new Unzip();
   await unzip.load(imported);
@@ -161,7 +161,7 @@ async function importHTMLZip({ collection, imported }: ImportHTMLZipOptions) {
     htmlBlobs.map(async ([fileName, blob]) => {
       const fileNameWithoutExt = fileName.replace(/\.[^/.]+$/, '');
       const job = new Transformer({
-        schema: collection.schema,
+        schema,
         blobCRUD: collection.blobSync,
         docCRUD: {
           create: (id: string) => collection.createDoc({ id }),

blocksuite/affine/block-root/src/transformers/markdown.ts

@@ -9,7 +9,7 @@ import { SpecProvider } from '@blocksuite/affine-shared/utils';
 import { Container } from '@blocksuite/global/di';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
 import { assertExists, sha } from '@blocksuite/global/utils';
-import type { Store, Workspace } from '@blocksuite/store';
+import type { Schema, Store, Workspace } from '@blocksuite/store';
 import { extMimeMap, Transformer } from '@blocksuite/store';
 
 import { createAssetsArchive, download, Unzip } from './utils.js';
@@ -31,12 +31,14 @@ type ImportMarkdownToBlockOptions = {
 
 type ImportMarkdownToDocOptions = {
   collection: Workspace;
+  schema: Schema;
   markdown: string;
   fileName?: string;
 };
 
 type ImportMarkdownZipOptions = {
   collection: Workspace;
+  schema: Schema;
   imported: Blob;
 };
 
@@ -47,19 +49,10 @@ type ImportMarkdownZipOptions = {
  */
 async function exportDoc(doc: Store) {
   const provider = getProvider();
-  const job = new Transformer({
-    schema: doc.schema,
-    blobCRUD: doc.blobSync,
-    docCRUD: {
-      create: (id: string) => doc.workspace.createDoc({ id }),
-      get: (id: string) => doc.workspace.getDoc(id),
-      delete: (id: string) => doc.workspace.removeDoc(id),
-    },
-    middlewares: [
-      docLinkBaseURLMiddleware(doc.workspace.id),
-      titleMiddleware(doc.workspace.meta.docMetas),
-    ],
-  });
+  const job = doc.getTransformer([
+    docLinkBaseURLMiddleware(doc.workspace.id),
+    titleMiddleware(doc.workspace.meta.docMetas),
+  ]);
   const snapshot = job.docToSnapshot(doc);
 
   const adapter = new MarkdownAdapter(job, provider);
@@ -107,19 +100,10 @@ async function importMarkdownToBlock({
   blockId,
 }: ImportMarkdownToBlockOptions) {
   const provider = getProvider();
-  const job = new Transformer({
-    schema: doc.schema,
-    blobCRUD: doc.blobSync,
-    docCRUD: {
-      create: (id: string) => doc.workspace.createDoc({ id }),
-      get: (id: string) => doc.workspace.getDoc(id),
-      delete: (id: string) => doc.workspace.removeDoc(id),
-    },
-    middlewares: [
-      defaultImageProxyMiddleware,
-      docLinkBaseURLMiddleware(doc.workspace.id),
-    ],
-  });
+  const job = doc.getTransformer([
+    defaultImageProxyMiddleware,
+    docLinkBaseURLMiddleware(doc.workspace.id),
+  ]);
   const adapter = new MarkdownAdapter(job, provider);
   const snapshot = await adapter.toSliceSnapshot({
     file: markdown,
@@ -143,18 +127,20 @@ async function importMarkdownToBlock({
  * Imports Markdown content into a new doc within a collection.
  * @param options Object containing import options
  * @param options.collection The target doc collection
+ * @param options.schema The schema of the target doc collection
  * @param options.markdown The Markdown content to import
  * @param options.fileName Optional filename for the imported doc
  * @returns A Promise that resolves to the ID of the newly created doc, or undefined if import fails
  */
 async function importMarkdownToDoc({
   collection,
+  schema,
   markdown,
   fileName,
 }: ImportMarkdownToDocOptions) {
   const provider = getProvider();
   const job = new Transformer({
-    schema: collection.schema,
+    schema,
     blobCRUD: collection.blobSync,
     docCRUD: {
       create: (id: string) => collection.createDoc({ id }),
@@ -182,11 +168,13 @@ async function importMarkdownToDoc({
  * Imports a zip file containing Markdown files and assets into a collection.
  * @param options Object containing import options
  * @param options.collection The target doc collection
+ * @param options.schema The schema of the target doc collection
  * @param options.imported The zip file as a Blob
  * @returns A Promise that resolves to an array of IDs of the newly created docs
  */
 async function importMarkdownZip({
   collection,
+  schema,
   imported,
 }: ImportMarkdownZipOptions) {
   const provider = getProvider();
@@ -219,7 +207,7 @@ async function importMarkdownZip({
     markdownBlobs.map(async ([fileName, blob]) => {
       const fileNameWithoutExt = fileName.replace(/\.[^/.]+$/, '');
       const job = new Transformer({
-        schema: collection.schema,
+        schema,
         blobCRUD: collection.blobSync,
         docCRUD: {
           create: (id: string) => collection.createDoc({ id }),

blocksuite/affine/block-root/src/transformers/notion-html.ts

@@ -3,12 +3,18 @@ import { NotionHtmlAdapter } from '@blocksuite/affine-shared/adapters';
 import { SpecProvider } from '@blocksuite/affine-shared/utils';
 import { Container } from '@blocksuite/global/di';
 import { sha } from '@blocksuite/global/utils';
-import { extMimeMap, Transformer, type Workspace } from '@blocksuite/store';
+import {
+  extMimeMap,
+  type Schema,
+  Transformer,
+  type Workspace,
+} from '@blocksuite/store';
 
 import { Unzip } from './utils.js';
 
 type ImportNotionZipOptions = {
   collection: Workspace;
+  schema: Schema;
   imported: Blob;
 };
 
@@ -26,6 +32,7 @@ function getProvider() {
  *
  * @param options - The options for importing.
  * @param options.collection - The BlockSuite document collection.
+ * @param options.schema - The schema of the BlockSuite document collection.
  * @param options.imported - The imported zip file as a Blob.
  *
  * @returns A promise that resolves to an object containing:
@@ -36,6 +43,7 @@ function getProvider() {
  */
 async function importNotionZip({
   collection,
+  schema,
   imported,
 }: ImportNotionZipOptions) {
   const provider = getProvider();
@@ -117,7 +125,7 @@ async function importNotionZip({
     }
     const pagePromises = Array.from(pagePaths).map(async path => {
       const job = new Transformer({
-        schema: collection.schema,
+        schema,
         blobCRUD: collection.blobSync,
         docCRUD: {
           create: (id: string) => collection.createDoc({ id }),

blocksuite/affine/block-root/src/transformers/zip.ts

@@ -3,15 +3,19 @@ import {
   titleMiddleware,
 } from '@blocksuite/affine-shared/adapters';
 import { sha } from '@blocksuite/global/utils';
-import type { DocSnapshot, Store, Workspace } from '@blocksuite/store';
+import type { DocSnapshot, Schema, Store, Workspace } from '@blocksuite/store';
 import { extMimeMap, getAssetName, Transformer } from '@blocksuite/store';
 
 import { download, Unzip, Zip } from '../transformers/utils.js';
 
-async function exportDocs(collection: Workspace, docs: Store[]) {
+async function exportDocs(
+  collection: Workspace,
+  schema: Schema,
+  docs: Store[]
+) {
   const zip = new Zip();
   const job = new Transformer({
-    schema: collection.schema,
+    schema,
     blobCRUD: collection.blobSync,
     docCRUD: {
       create: (id: string) => collection.createDoc({ id }),
@@ -29,7 +33,10 @@ async function exportDocs(collection: Workspace, docs: Store[]) {
     snapshots
       .filter((snapshot): snapshot is DocSnapshot => !!snapshot)
       .map(async snapshot => {
-        const snapshotName = `${snapshot.meta.title || 'untitled'}.snapshot.json`;
+        // Use the title and id as the snapshot file name
+        const title = snapshot.meta.title || 'untitled';
+        const id = snapshot.meta.id;
+        const snapshotName = `${title}-${id}.snapshot.json`;
         await zip.file(snapshotName, JSON.stringify(snapshot, null, 2));
       })
   );
@@ -63,10 +70,15 @@ async function exportDocs(collection: Workspace, docs: Store[]) {
   }
 
   const downloadBlob = await zip.generate();
+  // Use the collection id as the zip file name
   return download(downloadBlob, `${collection.id}.bs.zip`);
 }
 
-async function importDocs(collection: Workspace, imported: Blob) {
+async function importDocs(
+  collection: Workspace,
+  schema: Schema,
+  imported: Blob
+) {
   const unzip = new Unzip();
   await unzip.load(imported);
 
@@ -94,7 +106,7 @@ async function importDocs(collection: Workspace, imported: Blob) {
   }
 
   const job = new Transformer({
-    schema: collection.schema,
+    schema,
     blobCRUD: collection.blobSync,
     docCRUD: {
       create: (id: string) => collection.createDoc({ id }),

blocksuite/affine/block-root/src/widgets/element-toolbar/change-brush-button.ts

@@ -134,13 +134,12 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) {
           return html`
             <edgeless-color-picker-button
               class="color"
-              .label=${'Color'}
+              .label="${'Color'}"
               .pick=${this.pickColor}
               .color=${selectedColor}
               .colors=${colors}
               .colorType=${type}
               .theme=${colorScheme}
-              .palettes=${DefaultTheme.Palettes}
             >
             </edgeless-color-picker-button>
           `;
@@ -159,7 +158,6 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) {
             <edgeless-color-panel
               .value=${selectedColor}
               .theme=${colorScheme}
-              .palettes=${DefaultTheme.Palettes}
               @select=${this._setBrushColor}
             >
             </edgeless-color-panel>

blocksuite/affine/block-root/src/widgets/element-toolbar/change-connector-button.ts

@@ -373,13 +373,12 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
             return html`
               <edgeless-color-picker-button
                 class="stroke-color"
-                .label=${'Stroke style'}
+                .label="${'Stroke style'}"
                 .pick=${this.pickColor}
                 .color=${selectedColor}
                 .colors=${colors}
                 .colorType=${type}
                 .theme=${colorScheme}
-                .palettes=${DefaultTheme.Palettes}
                 .hollowCircle=${true}
               >
                 <div

blocksuite/affine/block-root/src/widgets/element-toolbar/change-frame-button.ts

@@ -13,7 +13,6 @@ import { renderToolbarSeparator } from '@blocksuite/affine-components/toolbar';
 import {
   type ColorScheme,
   DEFAULT_NOTE_HEIGHT,
-  DefaultTheme,
   type FrameBlockModel,
   NoteBlockModel,
   NoteDisplayMode,
@@ -201,13 +200,12 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
             return html`
               <edgeless-color-picker-button
                 class="background"
-                .label=${'Background'}
+                .label="${'Background'}"
                 .pick=${this.pickColor}
                 .color=${background}
                 .colors=${colors}
                 .colorType=${type}
                 .theme=${colorScheme}
-                .palettes=${DefaultTheme.Palettes}
               >
               </edgeless-color-picker-button>
             `;
@@ -229,7 +227,6 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
               <edgeless-color-panel
                 .value=${background}
                 .theme=${colorScheme}
-                .palettes=${DefaultTheme.Palettes}
                 @select=${this._setFrameBackground}
               >
               </edgeless-color-panel>

blocksuite/affine/block-root/src/widgets/element-toolbar/change-shape-button.ts

@@ -338,7 +338,6 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
                 .colors=${colors}
                 .colorType=${type}
                 .theme=${colorScheme}
-                .palettes=${DefaultTheme.Palettes}
               >
               </edgeless-color-picker-button>
             `;
@@ -362,7 +361,6 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
                 aria-label="Fill colors"
                 .value=${selectedFillColor}
                 .theme=${colorScheme}
-                .palettes=${DefaultTheme.Palettes}
                 @select=${this._setShapeFillColor}
               >
               </edgeless-color-panel>
@@ -390,7 +388,6 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
                 .colors=${colors}
                 .colorType=${type}
                 .theme=${colorScheme}
-                .palettes=${DefaultTheme.Palettes}
                 .hollowCircle=${true}
               >
                 <div
@@ -453,8 +450,8 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
               () => html`
                 <editor-icon-button
                   aria-label="Add text"
-                  .tooltip=${'Add text'}
-                  .iconSize=${'20px'}
+                  .tooltip="${'Add text'}"
+                  .iconSize="${'20px'}"
                   @click=${this._addText}
                 >
                   ${AddTextIcon()}
@@ -465,7 +462,7 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
               'menu',
               () => html`
                 <edgeless-change-text-menu
-                  .elementType=${'shape'}
+                  .elementType="${'shape'}"
                   .elements=${elements}
                   .edgeless=${this.edgeless}
                 ></edgeless-change-text-menu>

blocksuite/affine/block-root/src/widgets/element-toolbar/change-text-menu.ts

@@ -344,6 +344,10 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {
       matchFontFaces.length === 1 &&
       matchFontFaces[0].style === selectedFontStyle &&
       matchFontFaces[0].weight === selectedFontWeight;
+    const palettes =
+      this.elementType === 'shape'
+        ? DefaultTheme.ShapeTextColorPalettes
+        : DefaultTheme.Palettes;
 
     return join(
       [
@@ -389,14 +393,14 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {
             return html`
               <edgeless-color-picker-button
                 class="text-color"
-                .label=${'Text color'}
+                .label="${'Text color'}"
                 .pick=${this.pickColor}
                 .isText=${true}
                 .color=${selectedColor}
                 .colors=${colors}
                 .colorType=${type}
                 .theme=${colorScheme}
-                .palettes=${DefaultTheme.Palettes}
+                .palettes=${palettes}
               >
               </edgeless-color-picker-button>
             `;
@@ -418,7 +422,7 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {
               <edgeless-color-panel
                 .value=${selectedColor}
                 .theme=${colorScheme}
-                .palettes=${DefaultTheme.Palettes}
+                .palettes=${palettes}
                 @select=${this._setTextColor}
               ></edgeless-color-panel>
             </editor-menu-button>

blocksuite/affine/block-root/src/widgets/linked-doc/config.ts

@@ -233,6 +233,7 @@ export function createNewDocMenuGroup(
           };
           showImportModal({
             collection: doc.workspace,
+            schema: doc.schema,
             onSuccess,
             onFail,
           });

blocksuite/affine/block-root/src/widgets/linked-doc/import-doc/import-doc.ts

@@ -8,7 +8,7 @@ import {
 } from '@blocksuite/affine-components/icons';
 import { openFileOrFiles } from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/utils';
-import type { Workspace } from '@blocksuite/store';
+import type { Schema, Workspace } from '@blocksuite/store';
 import { html, LitElement, type PropertyValues } from 'lit';
 import { query, state } from 'lit/decorators.js';
 
@@ -31,6 +31,7 @@ export class ImportDoc extends WithDisposable(LitElement) {
 
   constructor(
     private readonly collection: Workspace,
+    private readonly schema: Schema,
     private readonly onSuccess?: OnSuccessHandler,
     private readonly onFail?: OnFailHandler,
     private readonly abortController = new AbortController()
@@ -63,6 +64,7 @@ export class ImportDoc extends WithDisposable(LitElement) {
       }
       const pageId = await HtmlTransformer.importHTMLToDoc({
         collection: this.collection,
+        schema: this.schema,
         html: text,
         fileName,
       });
@@ -93,6 +95,7 @@ export class ImportDoc extends WithDisposable(LitElement) {
       }
       const pageId = await MarkdownTransformer.importMarkdownToDoc({
         collection: this.collection,
+        schema: this.schema,
         markdown: text,
         fileName,
       });
@@ -117,6 +120,7 @@ export class ImportDoc extends WithDisposable(LitElement) {
     const { entryId, pageIds, isWorkspaceFile, hasMarkdown } =
       await NotionHtmlTransformer.importNotionZip({
         collection: this.collection,
+        schema: this.schema,
         imported: file,
       });
     needLoading && this.abortController.abort();

blocksuite/affine/block-root/src/widgets/linked-doc/import-doc/index.ts

@@ -1,4 +1,4 @@
-import type { Workspace } from '@blocksuite/store';
+import type { Schema, Workspace } from '@blocksuite/store';
 
 import {
   ImportDoc,
@@ -7,12 +7,14 @@ import {
 } from './import-doc.js';
 
 export function showImportModal({
+  schema,
   collection,
   onSuccess,
   onFail,
   container = document.body,
   abortController = new AbortController(),
 }: {
+  schema: Schema;
   collection: Workspace;
   onSuccess?: OnSuccessHandler;
   onFail?: OnFailHandler;
@@ -22,6 +24,7 @@ export function showImportModal({
 }) {
   const importDoc = new ImportDoc(
     collection,
+    schema,
     onSuccess,
     onFail,
     abortController

blocksuite/affine/block-root/src/widgets/linked-doc/index.ts

@@ -20,10 +20,8 @@ import { choose } from 'lit/directives/choose.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import {
-  type PageRootBlockComponent,
-  RootBlockConfigExtension,
-} from '../../index.js';
+import type { PageRootBlockComponent } from '../../page/page-root-block.js';
+import { RootBlockConfigExtension } from '../../root-config.js';
 import {
   type AFFINE_LINKED_DOC_WIDGET,
   getMenus,

blocksuite/affine/block-surface-ref/package.json

@@ -24,7 +24,7 @@
     "@blocksuite/store": "workspace:*",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.11",
+    "@toeverything/theme": "^1.1.12",
     "fractional-indexing": "^3.2.0",
     "lit": "^3.2.0",
     "lodash.chunk": "^4.2.0",
@@ -44,5 +44,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/block-surface-ref/src/surface-ref-block.ts

@@ -423,8 +423,9 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
 
       override mounted() {
         const disposable = this.std.view.viewUpdated.on(payload => {
+          if (payload.type !== 'block') return;
           if (
-            payload.type === 'add' &&
+            payload.method === 'add' &&
             matchModels(payload.view.model, [RootBlockModel])
           ) {
             disposable.dispose();

blocksuite/affine/block-surface/package.json

@@ -22,7 +22,7 @@
     "@blocksuite/store": "workspace:*",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.11",
+    "@toeverything/theme": "^1.1.12",
     "fractional-indexing": "^3.2.0",
     "html2canvas": "^1.4.1",
     "lit": "^3.2.0",
@@ -46,5 +46,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/block-surface/src/index.ts

@@ -50,7 +50,11 @@ export {
 } from './adapters/index.js';
 export type { SurfaceContext } from './surface-block.js';
 export { SurfaceBlockComponent } from './surface-block.js';
-export { SurfaceBlockModel, SurfaceBlockSchema } from './surface-model.js';
+export {
+  SurfaceBlockModel,
+  SurfaceBlockSchema,
+  SurfaceBlockSchemaExtension,
+} from './surface-model.js';
 export type { SurfaceBlockService } from './surface-service.js';
 export {
   EdgelessSurfaceBlockSpec,

blocksuite/affine/block-surface/src/surface-model.ts

@@ -5,7 +5,7 @@ import type {
 import type { SurfaceBlockProps } from '@blocksuite/block-std/gfx';
 import { SurfaceBlockModel as BaseSurfaceModel } from '@blocksuite/block-std/gfx';
 import { DisposableGroup } from '@blocksuite/global/utils';
-import { defineBlockSchema } from '@blocksuite/store';
+import { BlockSchemaExtension, defineBlockSchema } from '@blocksuite/store';
 import * as Y from 'yjs';
 
 import { elementsCtorMap } from './element-model/index.js';
@@ -36,6 +36,9 @@ export const SurfaceBlockSchema = defineBlockSchema({
   toModel: () => new SurfaceBlockModel(),
 });
 
+export const SurfaceBlockSchemaExtension =
+  BlockSchemaExtension(SurfaceBlockSchema);
+
 export type SurfaceMiddleware = (surface: SurfaceBlockModel) => () => void;
 
 export class SurfaceBlockModel extends BaseSurfaceModel {

blocksuite/affine/block-surface/src/surface-transformer.ts

@@ -1,4 +1,8 @@
 import type { SurfaceBlockProps } from '@blocksuite/block-std/gfx';
+import {
+  SURFACE_TEXT_UNIQ_IDENTIFIER,
+  SURFACE_YMAP_UNIQ_IDENTIFIER,
+} from '@blocksuite/block-std/gfx';
 import type {
   FromSnapshotPayload,
   SnapshotNode,
@@ -7,10 +11,6 @@ import type {
 import { BaseBlockTransformer } from '@blocksuite/store';
 import * as Y from 'yjs';
 
-const SURFACE_TEXT_UNIQ_IDENTIFIER = 'affine:surface:text';
-// Used for group children field
-const SURFACE_YMAP_UNIQ_IDENTIFIER = 'affine:surface:ymap';
-
 export class SurfaceBlockTransformer extends BaseBlockTransformer<SurfaceBlockProps> {
   private _elementToJSON(element: Y.Map<unknown>) {
     const value: Record<string, unknown> = {};

blocksuite/affine/block-table/package.json

@@ -22,7 +22,7 @@
     "@blocksuite/global": "workspace:*",
     "@blocksuite/icons": "^2.2.1",
     "@blocksuite/store": "workspace:*",
-    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/dom": "^1.6.13",
     "@preact/signals-core": "^1.8.0",
     "@vanilla-extract/css": "^1.17.0",
     "lit": "^3.2.0",
@@ -39,5 +39,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/block-table/src/adapters/html.ts

@@ -30,7 +30,10 @@ export const tableBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher = {
       }
       const { walkerContext } = context;
       if (o.node.tagName === 'table') {
-        const tableProps = parseTableFromHtml(o.node);
+        const astToDelta = context.deltaConverter.astToDelta.bind(
+          context.deltaConverter
+        );
+        const tableProps = parseTableFromHtml(o.node, astToDelta);
         walkerContext.openNode(
           {
             type: 'block',

blocksuite/affine/block-table/src/adapters/markdown.ts

@@ -25,12 +25,15 @@ export const tableBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher = {
     enter: (o, context) => {
       const { walkerContext } = context;
       if (o.node.type === 'table') {
+        const astToDelta = context.deltaConverter.astToDelta.bind(
+          context.deltaConverter
+        );
         walkerContext.openNode(
           {
             type: 'block',
             id: nanoid(),
             flavour: TableModelFlavour,
-            props: parseTableFromMarkdown(o.node),
+            props: parseTableFromMarkdown(o.node, astToDelta),
             children: [],
           },
           'children'

blocksuite/affine/block-table/src/adapters/plain-text.ts

@@ -7,6 +7,7 @@ import {
   BlockPlainTextAdapterExtension,
   type BlockPlainTextAdapterMatcher,
 } from '@blocksuite/affine-shared/adapters';
+import type { DeltaInsert } from '@blocksuite/inline';
 import { nanoid } from '@blocksuite/store';
 
 import { createTableProps, formatTable, processTable } from './utils.js';
@@ -21,10 +22,14 @@ export const tableBlockPlainTextAdapterMatcher: BlockPlainTextAdapterMatcher = {
       const text = o.node.content;
       const rowTexts = text.split('\n');
       if (rowTexts.length <= 1) return;
-      const rowTextLists: string[][] = [];
+      const rowTextLists: DeltaInsert[][][] = [];
       let columnCount: number | null = null;
       for (const row of rowTexts) {
-        const cells = row.split('\t');
+        const cells = row.split('\t').map<DeltaInsert[]>(text => [
+          {
+            insert: text,
+          },
+        ]);
         if (cells.length <= 1) return;
         if (columnCount == null) {
           columnCount = cells.length;

blocksuite/affine/block-table/src/adapters/utils.ts

@@ -5,14 +5,23 @@ import type {
   TableRow,
 } from '@blocksuite/affine-model';
 import {
-  AdapterTextUtils,
-  HastUtils,
+  type HtmlAST,
+  type MarkdownAST,
 } from '@blocksuite/affine-shared/adapters';
+import { HastUtils } from '@blocksuite/affine-shared/adapters';
 import { generateFractionalIndexingKeyBetween } from '@blocksuite/affine-shared/utils';
 import type { DeltaInsert } from '@blocksuite/inline';
 import { nanoid } from '@blocksuite/store';
-import type { Element, ElementContent } from 'hast';
-import type { PhrasingContent, Table as MarkdownTable, TableCell } from 'mdast';
+import type { Element } from 'hast';
+import type { Table as MarkdownTable } from 'mdast';
+
+type RichTextType = DeltaInsert[];
+const createRichText = (text: RichTextType) => {
+  return {
+    '$blocksuite:internal:text$': true,
+    delta: text,
+  };
+};
 function calculateColumnWidths(rows: string[][]): number[] {
   return (
     rows[0]?.map((_, colIndex) =>
@@ -92,15 +101,6 @@ export const processTable = (
   });
   return table;
 };
-const getTextFromElement = (element: ElementContent): string => {
-  if (element.type === 'text') {
-    return element.value.trim();
-  }
-  if (element.type === 'element') {
-    return element.children.map(child => getTextFromElement(child)).join('');
-  }
-  return '';
-};
 
 const getAllTag = (node: Element | undefined, tagName: string): Element[] => {
   if (!node) {
@@ -120,7 +120,7 @@ const getAllTag = (node: Element | undefined, tagName: string): Element[] => {
   return [];
 };
 
-export const createTableProps = (rowTextLists: string[][]) => {
+export const createTableProps = (deltasLists: RichTextType[][]) => {
   const createIdAndOrder = (count: number) => {
     const result: { id: string; order: string }[] = Array.from({
       length: count,
@@ -135,8 +135,8 @@ export const createTableProps = (rowTextLists: string[][]) => {
     }
     return result;
   };
-  const columnCount = Math.max(...rowTextLists.map(row => row.length));
-  const rowCount = rowTextLists.length;
+  const columnCount = Math.max(...deltasLists.map(row => row.length));
+  const rowCount = deltasLists.length;
 
   const columns: TableColumn[] = createIdAndOrder(columnCount).map(v => ({
     columnId: v.id,
@@ -156,9 +156,9 @@ export const createTableProps = (rowTextLists: string[][]) => {
         continue;
       }
       const cellId = `${row.rowId}:${column.columnId}`;
-      const text = rowTextLists[i]?.[j];
+      const text = deltasLists[i]?.[j];
       cells[cellId] = {
-        text: AdapterTextUtils.createText(text ?? ''),
+        text: createRichText(text ?? []),
       };
     }
   }
@@ -172,7 +172,8 @@ export const createTableProps = (rowTextLists: string[][]) => {
 };
 
 export const parseTableFromHtml = (
-  element: Element
+  element: Element,
+  astToDelta: (ast: HtmlAST) => RichTextType
 ): TableBlockPropsSerialized => {
   const headerRows = getAllTag(element, 'thead').flatMap(node =>
     getAllTag(node, 'tr').map(tr => getAllTag(tr, 'th'))
@@ -184,33 +185,26 @@ export const parseTableFromHtml = (
     getAllTag(node, 'tr').map(tr => getAllTag(tr, 'td'))
   );
   const allRows = [...headerRows, ...bodyRows, ...footerRows];
-  const rowTextLists: string[][] = [];
+  const rowTextLists: RichTextType[][] = [];
   allRows.forEach(cells => {
-    const row: string[] = [];
+    const row: RichTextType[] = [];
     cells.forEach(cell => {
-      row.push(getTextFromElement(cell));
+      row.push(astToDelta(cell));
     });
     rowTextLists.push(row);
   });
   return createTableProps(rowTextLists);
 };
 
-const getTextFromTableCell = (node: TableCell) => {
-  const getTextFromPhrasingContent = (node: PhrasingContent) => {
-    if (node.type === 'text') {
-      return node.value;
-    }
-    return '';
-  };
-  return node.children.map(child => getTextFromPhrasingContent(child)).join('');
-};
-
-export const parseTableFromMarkdown = (node: MarkdownTable) => {
-  const rowTextLists: string[][] = [];
+export const parseTableFromMarkdown = (
+  node: MarkdownTable,
+  astToDelta: (ast: MarkdownAST) => RichTextType
+) => {
+  const rowTextLists: RichTextType[][] = [];
   node.children.forEach(row => {
-    const rowText: string[] = [];
+    const rowText: RichTextType[] = [];
     row.children.forEach(cell => {
-      rowText.push(getTextFromTableCell(cell));
+      rowText.push(astToDelta(cell));
     });
     rowTextLists.push(rowText);
   });

blocksuite/affine/components/package.json

@@ -20,11 +20,11 @@
     "@blocksuite/icons": "^2.2.1",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
-    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@lottiefiles/dotlottie-wc": "^0.4.0",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.11",
+    "@toeverything/theme": "^1.1.12",
     "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.4",
     "collapse-white-space": "^2.1.0",
@@ -74,5 +74,5 @@
     "@types/katex": "^0.16.7",
     "@types/lodash.clonedeep": "^4.5.9"
   },
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/components/src/color-picker/button.ts

@@ -1,5 +1,5 @@
 import type { ColorScheme, Palette } from '@blocksuite/affine-model';
-import { resolveColor } from '@blocksuite/affine-model';
+import { DefaultTheme, resolveColor } from '@blocksuite/affine-model';
 import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/utils';
 import { html, LitElement } from 'lit';
@@ -188,7 +188,7 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
   accessor menuButton!: EditorMenuButton;
 
   @property({ attribute: false })
-  accessor palettes: Palette[] = [];
+  accessor palettes: Palette[] = DefaultTheme.Palettes;
 
   @property({ attribute: false })
   accessor pick!: (event: PickColorEvent) => void;

blocksuite/affine/components/src/rich-text/format/config.ts

@@ -1,4 +1,4 @@
-import type { EditorHost } from '@blocksuite/block-std';
+import { type EditorHost, TextSelection } from '@blocksuite/block-std';
 import type { TemplateResult } from 'lit';
 
 import {
@@ -26,6 +26,7 @@ export interface TextFormatConfig {
   hotkey?: string;
   activeWhen: (host: EditorHost) => boolean;
   action: (host: EditorHost) => void;
+  textChecker?: (host: EditorHost) => boolean;
 }
 
 export const textFormatConfigs: TextFormatConfig[] = [
@@ -124,5 +125,14 @@ export const textFormatConfigs: TextFormatConfig[] = [
     action: host => {
       host.std.command.chain().pipe(toggleLink).run();
     },
+    // should check text length
+    textChecker: host => {
+      const textSelection = host.std.selection.find(TextSelection);
+      if (!textSelection || textSelection.isCollapsed()) return false;
+
+      return Boolean(
+        textSelection.from.length + (textSelection.to?.length ?? 0)
+      );
+    },
   },
 ];

blocksuite/affine/components/src/rich-text/inline/presets/nodes/footnote-node/footnote-config.ts

@@ -25,6 +25,7 @@ export interface FootNoteNodeConfig {
   customPopupRenderer?: FootNotePopupRenderer;
   interactive?: boolean;
   hidePopup?: boolean;
+  disableHoverEffect?: boolean;
   onPopupClick?: FootNotePopupClickHandler;
 }
 
@@ -33,7 +34,9 @@ export class FootNoteNodeConfigProvider {
   private _customPopupRenderer?: FootNotePopupRenderer;
   private _hidePopup: boolean;
   private _interactive: boolean;
+  private _disableHoverEffect: boolean;
   private _onPopupClick?: FootNotePopupClickHandler;
+
   get customNodeRenderer() {
     return this._customNodeRenderer;
   }
@@ -58,6 +61,10 @@ export class FootNoteNodeConfigProvider {
     return this._interactive;
   }
 
+  get disableHoverEffect() {
+    return this._disableHoverEffect;
+  }
+
   constructor(
     config: FootNoteNodeConfig,
     readonly std: BlockStdScope
@@ -66,6 +73,7 @@ export class FootNoteNodeConfigProvider {
     this._customPopupRenderer = config.customPopupRenderer;
     this._hidePopup = config.hidePopup ?? false;
     this._interactive = config.interactive ?? true;
+    this._disableHoverEffect = config.disableHoverEffect ?? false;
     this._onPopupClick = config.onPopupClick;
   }
 
@@ -85,6 +93,10 @@ export class FootNoteNodeConfigProvider {
     this._interactive = interactive;
   }
 
+  setDisableHoverEffect(disableHoverEffect: boolean) {
+    this._disableHoverEffect = disableHoverEffect;
+  }
+
   setPopupClick(onPopupClick: FootNotePopupClickHandler) {
     this._onPopupClick = onPopupClick;
   }

blocksuite/affine/components/src/rich-text/inline/presets/nodes/footnote-node/footnote-node.ts

@@ -19,6 +19,7 @@ import { shift } from '@floating-ui/dom';
 import { baseTheme } from '@toeverything/theme';
 import { css, html, nothing, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
+import { classMap } from 'lit-html/directives/class-map.js';
 import { ref } from 'lit-html/directives/ref.js';
 
 import { HoverController } from '../../../../../hover/controller';
@@ -35,19 +36,36 @@ export class AffineFootnoteNode extends WithDisposable(ShadowlessElement) {
       cursor: pointer;
     }
 
-    .footnote-content-default {
-      display: inline-block;
-      background: ${unsafeCSSVarV2('button/primary')};
-      color: ${unsafeCSSVarV2('button/pureWhiteText')};
-      width: 14px;
-      height: 14px;
-      line-height: 14px;
-      font-size: 10px;
-      font-weight: 400;
-      border-radius: 50%;
-      text-align: center;
-      text-overflow: ellipsis;
-      font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
+    .footnote-node {
+      .footnote-content-default {
+        display: inline-block;
+        background: ${unsafeCSSVarV2('block/footnote/numberBgHover')};
+        color: ${unsafeCSSVarV2('button/pureWhiteText')};
+        width: 14px;
+        height: 14px;
+        line-height: 14px;
+        font-size: 10px;
+        font-weight: 400;
+        border-radius: 50%;
+        text-align: center;
+        text-overflow: ellipsis;
+        font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
+        transition: background 0.3s ease-in-out;
+      }
+    }
+
+    .footnote-node.hover-effect {
+      .footnote-content-default {
+        color: var(--affine-text-primary-color);
+        background: ${unsafeCSSVarV2('block/footnote/numberBg')};
+      }
+    }
+
+    .footnote-node.hover-effect:hover {
+      .footnote-content-default {
+        color: ${unsafeCSSVarV2('button/pureWhiteText')};
+        background: ${unsafeCSSVarV2('block/footnote/numberBgHover')};
+      }
     }
   `;
 
@@ -67,6 +85,10 @@ export class AffineFootnoteNode extends WithDisposable(ShadowlessElement) {
     return this.config?.hidePopup;
   }
 
+  get disableHoverEffect() {
+    return this.config?.disableHoverEffect;
+  }
+
   get onPopupClick() {
     return this.config?.onPopupClick;
   }
@@ -142,7 +164,7 @@ export class AffineFootnoteNode extends WithDisposable(ShadowlessElement) {
         },
       };
     },
-    { enterDelay: 500 }
+    { enterDelay: 300 }
   );
 
   override render() {
@@ -156,9 +178,14 @@ export class AffineFootnoteNode extends WithDisposable(ShadowlessElement) {
       ? this.customNodeRenderer(footnote, this.std)
       : this._FootNoteDefaultContent(footnote);
 
+    const nodeClasses = classMap({
+      'footnote-node': true,
+      'hover-effect': !this.disableHoverEffect,
+    });
+
     return html`<span
       ${this.hidePopup ? '' : ref(this._whenHover.setReference)}
-      class="footnote-node"
+      class=${nodeClasses}
       >${node}<v-text .str=${ZERO_WIDTH_NON_JOINER}></v-text
     ></span>`;
   }

blocksuite/affine/components/src/rich-text/inline/presets/nodes/footnote-node/footnote-popup-chip.ts

@@ -14,6 +14,7 @@ export class FootNotePopupChip extends LitElement {
       gap: 4px;
       box-sizing: border-box;
       cursor: default;
+      transition: width 0.3s ease-in-out;
     }
 
     .prefix-icon,

blocksuite/affine/components/src/rich-text/inline/presets/nodes/footnote-node/footnote-popup.ts

@@ -26,7 +26,6 @@ export class FootNotePopup extends SignalWatcher(WithDisposable(LitElement)) {
     .footnote-popup-container {
       border-radius: 4px;
       box-shadow: ${unsafeCSSVar('overlayPanelShadow')};
-      border-radius: 4px;
       background-color: ${unsafeCSSVarV2('layer/background/primary')};
       border: 0.5px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
     }

blocksuite/affine/components/src/rich-text/keymap/format.ts

@@ -20,8 +20,14 @@ export const textFormatKeymap = (std: BlockStdScope) =>
             const textSelection = selection.find(TextSelection);
             if (!textSelection) return;
 
+            const allowed = config.textChecker?.(std.host) ?? true;
+            if (!allowed) return;
+
+            const event = ctx.get('keyboardState').raw;
+            event.stopPropagation();
+            event.preventDefault();
+
             config.action(std.host);
-            ctx.get('keyboardState').raw.preventDefault();
             return true;
           },
         };

blocksuite/affine/components/src/toggle-button/toggle-button.ts

@@ -13,8 +13,11 @@ export class ToggleButton extends WithDisposable(ShadowlessElement) {
     .toggle-icon {
       display: flex;
       align-items: start;
-      margin-top: 0.45em;
+      justify-content: start;
       position: absolute;
+      width: 16px;
+      height: 16px;
+      top: calc((1em - 16px) / 2 + 5px);
       left: 0;
       transform: translateX(-100%);
       border-radius: 4px;
@@ -22,6 +25,7 @@ export class ToggleButton extends WithDisposable(ShadowlessElement) {
       opacity: 0;
       transition: opacity 0.2s ease-in-out;
     }
+
     .toggle-icon:hover {
       background: var(--affine-hover-color);
     }

blocksuite/affine/data-view/package.json

@@ -20,10 +20,10 @@
     "@blocksuite/icons": "^2.2.1",
     "@blocksuite/store": "workspace:*",
     "@emotion/hash": "^0.9.2",
-    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.11",
+    "@toeverything/theme": "^1.1.12",
     "date-fns": "^4.0.0",
     "lit": "^3.2.0",
     "yjs": "^13.6.21",
@@ -43,5 +43,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/data-view/src/property-presets/checkbox/define.ts

@@ -3,17 +3,30 @@ import { propertyType } from '../../core/property/property-config.js';
 
 export const checkboxPropertyType = propertyType('checkbox');
 
+const FALSE_VALUES = new Set([
+  'false',
+  'no',
+  '0',
+  '',
+  'undefined',
+  'null',
+  '否',
+  '不',
+  '错',
+  '错误',
+  '取消',
+  '关闭',
+]);
+
 export const checkboxPropertyModelConfig =
   checkboxPropertyType.modelConfig<boolean>({
     name: 'Checkbox',
     type: () => t.boolean.instance(),
     defaultData: () => ({}),
     cellToString: ({ value }) => (value ? 'True' : 'False'),
-    cellFromString: ({ value }) => {
-      return {
-        value: value !== 'False',
-      };
-    },
+    cellFromString: ({ value }) => ({
+      value: !FALSE_VALUES.has((value?.trim() ?? '').toLowerCase()),
+    }),
     cellToJson: ({ value }) => value ?? null,
     cellFromJson: ({ value }) =>
       typeof value !== 'boolean' ? undefined : value,

blocksuite/affine/fragment-frame-panel/package.json

@@ -23,10 +23,10 @@
     "@blocksuite/icons": "^2.2.1",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
-    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.11",
+    "@toeverything/theme": "^1.1.12",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "zod": "^3.23.8"
@@ -41,5 +41,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/fragment-outline/package.json

@@ -22,10 +22,10 @@
     "@blocksuite/icons": "^2.2.1",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
-    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.11",
+    "@toeverything/theme": "^1.1.12",
     "@vanilla-extract/css": "^1.17.0",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
@@ -41,5 +41,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/model/package.json

@@ -17,7 +17,7 @@
     "@blocksuite/global": "workspace:*",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
-    "@toeverything/theme": "^1.1.11",
+    "@toeverything/theme": "^1.1.12",
     "fractional-indexing": "^3.2.0",
     "yjs": "^13.6.21",
     "zod": "^3.23.8"
@@ -31,5 +31,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/model/src/blocks/attachment/attachment-model.ts

@@ -3,7 +3,11 @@ import type {
   GfxElementGeometry,
 } from '@blocksuite/block-std/gfx';
 import { GfxCompatible } from '@blocksuite/block-std/gfx';
-import { BlockModel, defineBlockSchema } from '@blocksuite/store';
+import {
+  BlockModel,
+  BlockSchemaExtension,
+  defineBlockSchema,
+} from '@blocksuite/store';
 
 import type { EmbedCardStyle } from '../../utils/index.js';
 import { AttachmentBlockTransformer } from './attachment-transformer.js';
@@ -86,6 +90,10 @@ export const AttachmentBlockSchema = defineBlockSchema({
   toModel: () => new AttachmentBlockModel(),
 });
 
+export const AttachmentBlockSchemaExtension = BlockSchemaExtension(
+  AttachmentBlockSchema
+);
+
 export class AttachmentBlockModel
   extends GfxCompatible<AttachmentBlockProps>(BlockModel)
   implements GfxElementGeometry {}

blocksuite/affine/model/src/blocks/bookmark/bookmark-model.ts

@@ -3,7 +3,11 @@ import type {
   GfxElementGeometry,
 } from '@blocksuite/block-std/gfx';
 import { GfxCompatible } from '@blocksuite/block-std/gfx';
-import { BlockModel, defineBlockSchema } from '@blocksuite/store';
+import {
+  BlockModel,
+  BlockSchemaExtension,
+  defineBlockSchema,
+} from '@blocksuite/store';
 
 import type { EmbedCardStyle, LinkPreviewData } from '../../utils/index.js';
 
@@ -54,6 +58,9 @@ export const BookmarkBlockSchema = defineBlockSchema({
   toModel: () => new BookmarkBlockModel(),
 });
 
+export const BookmarkBlockSchemaExtension =
+  BlockSchemaExtension(BookmarkBlockSchema);
+
 export class BookmarkBlockModel
   extends GfxCompatible<BookmarkBlockProps>(BlockModel)
   implements GfxElementGeometry {}

blocksuite/affine/model/src/blocks/code/code-model.ts

@@ -1,4 +1,9 @@
-import { BlockModel, defineBlockSchema, type Text } from '@blocksuite/store';
+import {
+  BlockModel,
+  BlockSchemaExtension,
+  defineBlockSchema,
+  type Text,
+} from '@blocksuite/store';
 
 interface CodeBlockProps {
   text: Text;
@@ -30,6 +35,8 @@ export const CodeBlockSchema = defineBlockSchema({
   toModel: () => new CodeBlockModel(),
 });
 
+export const CodeBlockSchemaExtension = BlockSchemaExtension(CodeBlockSchema);
+
 export class CodeBlockModel extends BlockModel<CodeBlockProps> {
   override text!: Text;
 }

blocksuite/affine/model/src/blocks/database/database-model.ts

@@ -1,5 +1,9 @@
 import type { Text } from '@blocksuite/store';
-import { BlockModel, defineBlockSchema } from '@blocksuite/store';
+import {
+  BlockModel,
+  BlockSchemaExtension,
+  defineBlockSchema,
+} from '@blocksuite/store';
 
 import type { Column, SerializedCells, ViewBasicDataType } from './types.js';
 
@@ -28,3 +32,6 @@ export const DatabaseBlockSchema = defineBlockSchema({
   },
   toModel: () => new DatabaseBlockModel(),
 });
+
+export const DatabaseBlockSchemaExtension =
+  BlockSchemaExtension(DatabaseBlockSchema);

blocksuite/affine/model/src/blocks/divider/divider-model.ts

@@ -1,4 +1,8 @@
-import { BlockModel, defineBlockSchema } from '@blocksuite/store';
+import {
+  BlockModel,
+  BlockSchemaExtension,
+  defineBlockSchema,
+} from '@blocksuite/store';
 
 export const DividerBlockSchema = defineBlockSchema({
   flavour: 'affine:divider',
@@ -15,3 +19,6 @@ type Props = {
 };
 
 export class DividerBlockModel extends BlockModel<Props> {}
+
+export const DividerBlockSchemaExtension =
+  BlockSchemaExtension(DividerBlockSchema);

blocksuite/affine/model/src/blocks/edgeless-text/edgeless-text-model.ts

@@ -3,7 +3,11 @@ import type {
   GfxElementGeometry,
 } from '@blocksuite/block-std/gfx';
 import { GfxCompatible } from '@blocksuite/block-std/gfx';
-import { BlockModel, defineBlockSchema } from '@blocksuite/store';
+import {
+  BlockModel,
+  BlockSchemaExtension,
+  defineBlockSchema,
+} from '@blocksuite/store';
 import { z } from 'zod';
 
 import {
@@ -76,6 +80,10 @@ export const EdgelessTextBlockSchema = defineBlockSchema({
   },
 });
 
+export const EdgelessTextBlockSchemaExtension = BlockSchemaExtension(
+  EdgelessTextBlockSchema
+);
+
 export class EdgelessTextBlockModel
   extends GfxCompatible<EdgelessTextProps>(BlockModel)
   implements GfxElementGeometry {}

blocksuite/affine/model/src/blocks/embed/figma/figma-schema.ts

@@ -1,3 +1,5 @@
+import { BlockSchemaExtension } from '@blocksuite/store';
+
 import { createEmbedBlockSchema } from '../../../utils/index.js';
 import {
   type EmbedFigmaBlockProps,
@@ -20,3 +22,7 @@ export const EmbedFigmaBlockSchema = createEmbedBlockSchema({
   toModel: () => new EmbedFigmaModel(),
   props: (): EmbedFigmaBlockProps => defaultEmbedFigmaProps,
 });
+
+export const EmbedFigmaBlockSchemaExtension = BlockSchemaExtension(
+  EmbedFigmaBlockSchema
+);

blocksuite/affine/model/src/blocks/embed/github/github-schema.ts

@@ -1,3 +1,5 @@
+import { BlockSchemaExtension } from '@blocksuite/store';
+
 import { createEmbedBlockSchema } from '../../../utils/index.js';
 import {
   type EmbedGithubBlockProps,
@@ -29,3 +31,7 @@ export const EmbedGithubBlockSchema = createEmbedBlockSchema({
   toModel: () => new EmbedGithubModel(),
   props: (): EmbedGithubBlockProps => defaultEmbedGithubProps,
 });
+
+export const EmbedGithubBlockSchemaExtension = BlockSchemaExtension(
+  EmbedGithubBlockSchema
+);

blocksuite/affine/model/src/blocks/embed/html/html-schema.ts

@@ -1,3 +1,5 @@
+import { BlockSchemaExtension } from '@blocksuite/store';
+
 import { createEmbedBlockSchema } from '../../../utils/index.js';
 import {
   type EmbedHtmlBlockProps,
@@ -18,3 +20,6 @@ export const EmbedHtmlBlockSchema = createEmbedBlockSchema({
   toModel: () => new EmbedHtmlModel(),
   props: (): EmbedHtmlBlockProps => defaultEmbedHtmlProps,
 });
+
+export const EmbedHtmlBlockSchemaExtension =
+  BlockSchemaExtension(EmbedHtmlBlockSchema);

blocksuite/affine/model/src/blocks/embed/linked-doc/linked-doc-schema.ts

@@ -1,3 +1,5 @@
+import { BlockSchemaExtension } from '@blocksuite/store';
+
 import { createEmbedBlockSchema } from '../../../utils/index.js';
 import {
   type EmbedLinkedDocBlockProps,
@@ -20,3 +22,7 @@ export const EmbedLinkedDocBlockSchema = createEmbedBlockSchema({
   toModel: () => new EmbedLinkedDocModel(),
   props: (): EmbedLinkedDocBlockProps => defaultEmbedLinkedDocBlockProps,
 });
+
+export const EmbedLinkedDocBlockSchemaExtension = BlockSchemaExtension(
+  EmbedLinkedDocBlockSchema
+);

blocksuite/affine/model/src/blocks/embed/loom/loom-schema.ts

@@ -1,3 +1,5 @@
+import { BlockSchemaExtension } from '@blocksuite/store';
+
 import { createEmbedBlockSchema } from '../../../utils/index.js';
 import {
   type EmbedLoomBlockProps,
@@ -22,3 +24,6 @@ export const EmbedLoomBlockSchema = createEmbedBlockSchema({
   toModel: () => new EmbedLoomModel(),
   props: (): EmbedLoomBlockProps => defaultEmbedLoomProps,
 });
+
+export const EmbedLoomBlockSchemaExtension =
+  BlockSchemaExtension(EmbedLoomBlockSchema);

blocksuite/affine/model/src/blocks/embed/synced-doc/synced-doc-schema.ts

@@ -1,3 +1,5 @@
+import { BlockSchemaExtension } from '@blocksuite/store';
+
 import { createEmbedBlockSchema } from '../../../utils/index.js';
 import {
   type EmbedSyncedDocBlockProps,
@@ -21,3 +23,7 @@ export const EmbedSyncedDocBlockSchema = createEmbedBlockSchema({
   toModel: () => new EmbedSyncedDocModel(),
   props: (): EmbedSyncedDocBlockProps => defaultEmbedSyncedDocBlockProps,
 });
+
+export const EmbedSyncedDocBlockSchemaExtension = BlockSchemaExtension(
+  EmbedSyncedDocBlockSchema
+);

blocksuite/affine/model/src/blocks/embed/youtube/youtube-schema.ts

@@ -1,3 +1,5 @@
+import { BlockSchemaExtension } from '@blocksuite/store';
+
 import { createEmbedBlockSchema } from '../../../utils/index.js';
 import {
   type EmbedYoutubeBlockProps,
@@ -25,3 +27,7 @@ export const EmbedYoutubeBlockSchema = createEmbedBlockSchema({
   toModel: () => new EmbedYoutubeModel(),
   props: (): EmbedYoutubeBlockProps => defaultEmbedYoutubeProps,
 });
+
+export const EmbedYoutubeBlockSchemaExtension = BlockSchemaExtension(
+  EmbedYoutubeBlockSchema
+);

blocksuite/affine/model/src/blocks/frame/frame-model.ts

@@ -15,7 +15,12 @@ import {
   hasDescendantElementImpl,
 } from '@blocksuite/block-std/gfx';
 import { Bound } from '@blocksuite/global/utils';
-import { BlockModel, defineBlockSchema, type Text } from '@blocksuite/store';
+import {
+  BlockModel,
+  BlockSchemaExtension,
+  defineBlockSchema,
+  type Text,
+} from '@blocksuite/store';
 import { z } from 'zod';
 
 import { type Color, ColorSchema, DefaultTheme } from '../../themes/index.js';
@@ -57,6 +62,8 @@ export const FrameBlockSchema = defineBlockSchema({
   },
 });
 
+export const FrameBlockSchemaExtension = BlockSchemaExtension(FrameBlockSchema);
+
 export class FrameBlockModel
   extends GfxCompatible<FrameBlockProps>(BlockModel)
   implements GfxElementGeometry, GfxGroupCompatibleInterface

blocksuite/affine/model/src/blocks/image/image-model.ts

@@ -3,7 +3,11 @@ import type {
   GfxElementGeometry,
 } from '@blocksuite/block-std/gfx';
 import { GfxCompatible } from '@blocksuite/block-std/gfx';
-import { BlockModel, defineBlockSchema } from '@blocksuite/store';
+import {
+  BlockModel,
+  BlockSchemaExtension,
+  defineBlockSchema,
+} from '@blocksuite/store';
 
 import { ImageBlockTransformer } from './image-transformer.js';
 
@@ -40,6 +44,8 @@ export const ImageBlockSchema = defineBlockSchema({
   toModel: () => new ImageBlockModel(),
 });
 
+export const ImageBlockSchemaExtension = BlockSchemaExtension(ImageBlockSchema);
+
 export class ImageBlockModel
   extends GfxCompatible<ImageBlockProps>(BlockModel)
   implements GfxElementGeometry {}

blocksuite/affine/model/src/blocks/latex/latex-model.ts

@@ -3,7 +3,11 @@ import {
   GfxCompatible,
   type GfxElementGeometry,
 } from '@blocksuite/block-std/gfx';
-import { BlockModel, defineBlockSchema } from '@blocksuite/store';
+import {
+  BlockModel,
+  BlockSchemaExtension,
+  defineBlockSchema,
+} from '@blocksuite/store';
 
 export type LatexProps = {
   latex: string;
@@ -34,6 +38,8 @@ export const LatexBlockSchema = defineBlockSchema({
   },
 });
 
+export const LatexBlockSchemaExtension = BlockSchemaExtension(LatexBlockSchema);
+
 export class LatexBlockModel
   extends GfxCompatible<LatexProps>(BlockModel)
   implements GfxElementGeometry {}

blocksuite/affine/model/src/blocks/list/list-model.ts

@@ -1,5 +1,9 @@
 import type { Text } from '@blocksuite/store';
-import { BlockModel, defineBlockSchema } from '@blocksuite/store';
+import {
+  BlockModel,
+  BlockSchemaExtension,
+  defineBlockSchema,
+} from '@blocksuite/store';
 
 // `toggle` type has been deprecated, do not use it
 export type ListType = 'bulleted' | 'numbered' | 'todo' | 'toggle';
@@ -38,6 +42,8 @@ export const ListBlockSchema = defineBlockSchema({
   toModel: () => new ListBlockModel(),
 });
 
+export const ListBlockSchemaExtension = BlockSchemaExtension(ListBlockSchema);
+
 export class ListBlockModel extends BlockModel<ListProps> {
   override text!: Text;
 }

blocksuite/affine/model/src/blocks/note/note-model.ts

@@ -4,7 +4,11 @@ import type {
 } from '@blocksuite/block-std/gfx';
 import { GfxCompatible } from '@blocksuite/block-std/gfx';
 import { Bound } from '@blocksuite/global/utils';
-import { BlockModel, defineBlockSchema } from '@blocksuite/store';
+import {
+  BlockModel,
+  BlockSchemaExtension,
+  defineBlockSchema,
+} from '@blocksuite/store';
 import { z } from 'zod';
 
 import {
@@ -21,6 +25,7 @@ import {
   StrokeStyleSchema,
 } from '../../consts/note';
 import { type Color, ColorSchema, DefaultTheme } from '../../themes';
+import { TableModelFlavour } from '../table';
 
 export const NoteZodSchema = z
   .object({
@@ -47,7 +52,6 @@ export const NoteZodSchema = z
       },
     },
   });
-import { TableModelFlavour } from '../table';
 
 export const NoteBlockSchema = defineBlockSchema({
   flavour: 'affine:note',
@@ -92,6 +96,7 @@ export const NoteBlockSchema = defineBlockSchema({
   },
 });
 
+export const NoteBlockSchemaExtension = BlockSchemaExtension(NoteBlockSchema);
 export type NoteProps = {
   background: Color;
   displayMode: NoteDisplayMode;

blocksuite/affine/model/src/blocks/paragraph/paragraph-model.ts

@@ -1,4 +1,9 @@
-import { BlockModel, defineBlockSchema, type Text } from '@blocksuite/store';
+import {
+  BlockModel,
+  BlockSchemaExtension,
+  defineBlockSchema,
+  type Text,
+} from '@blocksuite/store';
 
 export type ParagraphType =
   | 'text'
@@ -37,6 +42,9 @@ export const ParagraphBlockSchema = defineBlockSchema({
   toModel: () => new ParagraphBlockModel(),
 });
 
+export const ParagraphBlockSchemaExtension =
+  BlockSchemaExtension(ParagraphBlockSchema);
+
 export class ParagraphBlockModel extends BlockModel<ParagraphProps> {
   override text!: Text;
 

blocksuite/affine/model/src/blocks/root/root-block-model.ts

@@ -1,5 +1,9 @@
 import type { Text } from '@blocksuite/store';
-import { BlockModel, defineBlockSchema } from '@blocksuite/store';
+import {
+  BlockModel,
+  BlockSchemaExtension,
+  defineBlockSchema,
+} from '@blocksuite/store';
 
 export type RootBlockProps = {
   title: Text;
@@ -51,3 +55,5 @@ export const RootBlockSchema = defineBlockSchema({
   },
   toModel: () => new RootBlockModel(),
 });
+
+export const RootBlockSchemaExtension = BlockSchemaExtension(RootBlockSchema);

blocksuite/affine/model/src/blocks/surface-ref/surface-ref-model.ts

@@ -1,4 +1,8 @@
-import { BlockModel, defineBlockSchema } from '@blocksuite/store';
+import {
+  BlockModel,
+  BlockSchemaExtension,
+  defineBlockSchema,
+} from '@blocksuite/store';
 
 export type SurfaceRefProps = {
   reference: string;
@@ -21,4 +25,8 @@ export const SurfaceRefBlockSchema = defineBlockSchema({
   toModel: () => new SurfaceRefBlockModel(),
 });
 
+export const SurfaceRefBlockSchemaExtension = BlockSchemaExtension(
+  SurfaceRefBlockSchema
+);
+
 export class SurfaceRefBlockModel extends BlockModel<SurfaceRefProps> {}