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

.github/workflows/build-test.yml

@@ -624,8 +624,7 @@ jobs:
         with:
           filters: |
             changed:
-              - 'packages/frontend/core/src/blocksuite/presets/ai/**'
-              - 'packages/frontend/core/src/components/blocksuite/block-suite-editor/ai/**'
+              - 'packages/frontend/core/src/blocksuite/ai/**'
               - 'tests/affine-cloud-copilot/**'
 
       - name: Setup Node.js

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

@@ -17,7 +17,6 @@
     "@blocksuite/blocks": "workspace:*",
     "@blocksuite/global": "workspace:*",
     "@blocksuite/inline": "workspace:*",
-    "@blocksuite/presets": "workspace:*",
     "@blocksuite/store": "workspace:*",
     "@blocksuite/sync": "workspace:*"
   },
@@ -37,7 +36,6 @@
     "./inline": "./src/inline/index.ts",
     "./inline/consts": "./src/inline/consts.ts",
     "./inline/types": "./src/inline/types.ts",
-    "./presets": "./src/presets/index.ts",
     "./blocks": "./src/blocks/index.ts",
     "./blocks/schemas": "./src/blocks/schemas.ts",
     "./sync": "./src/sync/index.ts"
@@ -83,9 +81,6 @@
       "inline/types": [
         "dist/inline/types.d.ts"
       ],
-      "presets": [
-        "dist/presets/index.d.ts"
-      ],
       "blocks": [
         "dist/blocks/index.d.ts"
       ],
@@ -103,5 +98,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/all/src/effects.ts

@@ -1,7 +1,5 @@
 import { effects as blocksEffects } from '@blocksuite/blocks/effects';
-import { effects as presetsEffects } from '@blocksuite/presets/effects';
 
 export function effects() {
   blocksEffects();
-  presetsEffects();
 }

blocksuite/affine/all/src/presets/index.ts

@@ -1 +0,0 @@
-export * from '@blocksuite/presets';

blocksuite/affine/all/tsconfig.json

@@ -11,7 +11,6 @@
     { "path": "../../blocks" },
     { "path": "../../framework/global" },
     { "path": "../../framework/inline" },
-    { "path": "../../presets" },
     { "path": "../../framework/store" },
     { "path": "../../framework/sync" }
   ]

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.7",
+    "@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-attachment/src/attachment-block.ts

@@ -38,8 +38,6 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
 
   protected _isResizing = false;
 
-  protected _isSelected = false;
-
   protected _whenHover: HoverController | null = new HoverController(
     this,
     ({ abortController }) => {

blocksuite/affine/block-attachment/src/attachment-edgeless-block.ts

@@ -35,7 +35,7 @@ export class AttachmentEdgelessBlockComponent extends toGfxBlockComponent(
       this.slots.elementResizeEnd.on(() => {
         this._isResizing = false;
         this._showOverlay =
-          this._isResizing || this._isDragging || !this._isSelected;
+          this._isResizing || this._isDragging || !this.selected$.peek();
       })
     );
   }

blocksuite/affine/block-attachment/src/embed.ts

@@ -1,20 +1,25 @@
-import type {
-  AttachmentBlockModel,
-  ImageBlockProps,
+import {
+  type AttachmentBlockModel,
+  type ImageBlockProps,
+  MAX_IMAGE_WIDTH,
 } from '@blocksuite/affine-model';
 import { FileSizeLimitService } from '@blocksuite/affine-shared/services';
 import {
+  readImageSize,
   transformModel,
   withTempBlobData,
 } from '@blocksuite/affine-shared/utils';
 import { type BlockStdScope, StdIdentifier } from '@blocksuite/block-std';
 import type { Container } from '@blocksuite/global/di';
 import { createIdentifier } from '@blocksuite/global/di';
+import { Bound } from '@blocksuite/global/utils';
 import type { ExtensionType } from '@blocksuite/store';
 import { Extension } from '@blocksuite/store';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
+import { getAttachmentBlob } from './utils';
+
 export type AttachmentEmbedConfig = {
   name: string;
   /**
@@ -24,7 +29,10 @@ export type AttachmentEmbedConfig = {
   /**
    * The action will be executed when the 「Turn into embed view」 button is clicked.
    */
-  action?: (model: AttachmentBlockModel) => Promise<void> | void;
+  action?: (
+    model: AttachmentBlockModel,
+    std: BlockStdScope
+  ) => Promise<void> | void;
   /**
    * The template will be used to render the embed view.
    */
@@ -89,11 +97,11 @@ export class AttachmentEmbedService extends Extension {
   // Converts to embed view.
   convertTo(model: AttachmentBlockModel, maxFileSize = this._maxFileSize) {
     const config = this.values.find(config => config.check(model, maxFileSize));
-    if (!config || !config.action) {
+    if (!config?.action) {
       model.doc.updateBlock(model, { embed: true });
       return;
     }
-    config.action(model)?.catch(console.error);
+    config.action(model, this.std)?.catch(console.error);
   }
 
   embedded(model: AttachmentBlockModel, maxFileSize = this._maxFileSize) {
@@ -123,7 +131,12 @@ const embedConfig: AttachmentEmbedConfig[] = [
     check: model =>
       model.doc.schema.flavourSchemaMap.has('affine:image') &&
       model.type.startsWith('image/'),
-    action: model => turnIntoImageBlock(model),
+    async action(model, std) {
+      const component = std.view.getBlock(model.id);
+      if (!component) return;
+
+      await turnIntoImageBlock(model);
+    },
   },
   {
     name: 'pdf',
@@ -171,7 +184,7 @@ const embedConfig: AttachmentEmbedConfig[] = [
 /**
  * Turn the attachment block into an image block.
  */
-export function turnIntoImageBlock(model: AttachmentBlockModel) {
+export async function turnIntoImageBlock(model: AttachmentBlockModel) {
   if (!model.doc.schema.flavourSchemaMap.has('affine:image')) {
     console.error('The image flavour is not supported!');
     return;
@@ -183,15 +196,37 @@ export function turnIntoImageBlock(model: AttachmentBlockModel) {
   const { saveAttachmentData, getImageData } = withTempBlobData();
   saveAttachmentData(sourceId, { name: model.name });
 
-  const imageConvertData = model.sourceId
-    ? getImageData(model.sourceId)
+  let imageSize = model.sourceId ? getImageData(model.sourceId) : undefined;
+
+  const bounds = model.xywh
+    ? Bound.fromXYWH(model.deserializedXYWH)
     : undefined;
 
+  if (bounds) {
+    if (!imageSize?.width || !imageSize?.height) {
+      const blob = await getAttachmentBlob(model);
+      if (blob) {
+        imageSize = await readImageSize(blob);
+      }
+    }
+
+    if (imageSize?.width && imageSize?.height) {
+      const p = imageSize.height / imageSize.width;
+      imageSize.width = Math.min(imageSize.width, MAX_IMAGE_WIDTH);
+      imageSize.height = imageSize.width * p;
+      bounds.w = imageSize.width;
+      bounds.h = imageSize.height;
+    }
+  }
+
+  const others = bounds ? { xywh: bounds.serialize() } : undefined;
+
   const imageProp: Partial<ImageBlockProps> = {
     sourceId,
     caption: model.caption,
     size: model.size,
-    ...imageConvertData,
+    ...imageSize,
+    ...others,
   };
   transformModel(model, 'affine:image', imageProp);
 }

blocksuite/affine/block-attachment/src/utils.ts

@@ -97,7 +97,7 @@ export async function uploadAttachmentBlob(
   }
 }
 
-async function getAttachmentBlob(model: AttachmentBlockModel) {
+export async function getAttachmentBlob(model: AttachmentBlockModel) {
   const sourceId = model.sourceId;
   if (!sourceId) {
     return null;

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.7",
+    "@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-bookmark/src/bookmark-block.ts

@@ -4,9 +4,10 @@ import {
 } from '@blocksuite/affine-components/caption';
 import type { BookmarkBlockModel } from '@blocksuite/affine-model';
 import { DocModeProvider } from '@blocksuite/affine-shared/services';
+import { computed, type ReadonlySignal } from '@preact/signals-core';
 import { html } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
+import { type ClassInfo, classMap } from 'lit/directives/class-map.js';
 import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
 import { refreshBookmarkUrlData } from './utils.js';
@@ -14,6 +15,12 @@ import { refreshBookmarkUrlData } from './utils.js';
 export const BOOKMARK_MIN_WIDTH = 450;
 
 export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBlockModel> {
+  selectedStyle$: ReadonlySignal<ClassInfo> | null = computed<ClassInfo>(
+    () => ({
+      'selected-style': this.selected$.value,
+    })
+  );
+
   private _fetchAbortController?: AbortController;
 
   blockDraggable = true;
@@ -69,16 +76,12 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBloc
   }
 
   override renderBlock() {
-    const selected = this.selected$.value;
-    const isInEdgeless =
-      this.std.get(DocModeProvider).getEditorMode() === 'edgeless';
-
     return html`
       <div
         draggable="${this.blockDraggable ? 'true' : 'false'}"
         class=${classMap({
           'affine-bookmark-container': true,
-          'selected-style': selected && !isInEdgeless,
+          ...this.selectedStyle$?.value,
         })}
         style=${this.containerStyleMap}
       >

blocksuite/affine/block-bookmark/src/bookmark-edgeless-block.ts

@@ -10,6 +10,8 @@ import { BookmarkBlockComponent } from './bookmark-block.js';
 export class BookmarkEdgelessBlockComponent extends toGfxBlockComponent(
   BookmarkBlockComponent
 ) {
+  override selectedStyle$ = null;
+
   override blockDraggable = false;
 
   override getRenderingRect() {

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.7",
+    "@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.7",
+    "@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.7",
+    "@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-database/src/adapters/notion-html.ts

@@ -1,9 +1,9 @@
 import { DatabaseBlockSchema } from '@blocksuite/affine-model';
 import {
+  AdapterTextUtils,
   BlockNotionHtmlAdapterExtension,
   type BlockNotionHtmlAdapterMatcher,
   HastUtils,
-  TextUtils,
 } from '@blocksuite/affine-shared/adapters';
 import { getTagColor } from '@blocksuite/data-view';
 import { type BlockSnapshot, nanoid } from '@blocksuite/store';
@@ -219,7 +219,7 @@ export const databaseBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatche
                     column.type = 'rich-text';
                     row[column.id] = {
                       columnId: column.id,
-                      value: TextUtils.createText(text),
+                      value: AdapterTextUtils.createText(text),
                     };
                   } else {
                     row[column.id] = {
@@ -235,11 +235,11 @@ export const databaseBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatche
                 }
                 if (
                   column.type === 'rich-text' &&
-                  !TextUtils.isText(row[column.id].value)
+                  !AdapterTextUtils.isText(row[column.id].value)
                 ) {
                   row[column.id] = {
                     columnId: column.id,
-                    value: TextUtils.createText(row[column.id].value),
+                    value: AdapterTextUtils.createText(row[column.id].value),
                   };
                 }
               });

blocksuite/affine/block-database/src/data-source.ts

@@ -34,8 +34,6 @@ import {
 } from './properties/index.js';
 import {
   addProperty,
-  applyCellsUpdate,
-  applyPropertyUpdate,
   copyCellsByProperty,
   deleteRows,
   deleteView,
@@ -169,7 +167,6 @@ export class DatabaseBlockDataSource extends DataSourceBase {
         columnId: propertyId,
         value: newValue,
       });
-      applyCellsUpdate(this._model);
     }
   }
 
@@ -199,7 +196,6 @@ export class DatabaseBlockDataSource extends DataSourceBase {
       insertToPosition,
       property.create(this.newPropertyName())
     );
-    applyPropertyUpdate(this._model);
     return result;
   }
 
@@ -283,7 +279,6 @@ export class DatabaseBlockDataSource extends DataSourceBase {
   propertyDataSet(propertyId: string, data: Record<string, unknown>): void {
     this._runCapture();
     this.updateProperty(propertyId, () => ({ data }));
-    applyPropertyUpdate(this._model);
   }
 
   propertyDataTypeGet(propertyId: string): TypeInstance | undefined {
@@ -337,7 +332,6 @@ export class DatabaseBlockDataSource extends DataSourceBase {
       schema
     );
     copyCellsByProperty(this._model, copyId, id);
-    applyPropertyUpdate(this._model);
     return id;
   }
 
@@ -366,7 +360,6 @@ export class DatabaseBlockDataSource extends DataSourceBase {
   propertyNameSet(propertyId: string, name: string): void {
     this.doc.captureSync();
     this.updateProperty(propertyId, () => ({ name }));
-    applyPropertyUpdate(this._model);
   }
 
   override propertyReadonlyGet(propertyId: string): boolean {
@@ -421,7 +414,6 @@ export class DatabaseBlockDataSource extends DataSourceBase {
       }
     });
     updateCells(this._model, propertyId, cells);
-    applyPropertyUpdate(this._model);
   }
 
   rowAdd(insertPosition: InsertToPosition | number): string {

blocksuite/affine/block-database/src/detail-panel/block-renderer.ts

@@ -127,7 +127,7 @@ export class BlockRenderer
         .attributesSchema=${this.attributesSchema}
         .attributeRenderer=${this.attributeRenderer}
         .embedChecker=${this.inlineManager.embedChecker}
-        .markdownShortcutHandler=${this.inlineManager.markdownShortcutHandler}
+        .markdownMatches=${this.inlineManager.markdownMatches}
         class="inline-editor"
       ></rich-text>
     `;

blocksuite/affine/block-database/src/properties/rich-text/cell-renderer.ts

@@ -221,7 +221,7 @@ export class RichTextCell extends BaseRichTextCell {
         .attributesSchema=${this.attributesSchema}
         .attributeRenderer=${this.attributeRenderer}
         .embedChecker=${this.inlineManager?.embedChecker}
-        .markdownShortcutHandler=${this.inlineManager?.markdownShortcutHandler}
+        .markdownMatches=${this.inlineManager?.markdownMatches}
         .readonly=${true}
         class="affine-database-rich-text inline-editor"
       ></rich-text>`
@@ -525,7 +525,7 @@ export class RichTextCellEditing extends BaseRichTextCell {
       .attributesSchema=${this.attributesSchema}
       .attributeRenderer=${this.attributeRenderer}
       .embedChecker=${this.inlineManager?.embedChecker}
-      .markdownShortcutHandler=${this.inlineManager?.markdownShortcutHandler}
+      .markdownMatches=${this.inlineManager?.markdownMatches}
       .verticalScrollContainerGetter=${() =>
         this.topContenteditableElement?.host
           ? getViewportElement(this.topContenteditableElement.host)

blocksuite/affine/block-database/src/properties/title/text.ts

@@ -187,7 +187,7 @@ export class HeaderAreaTextCell extends BaseTextCell {
       .attributesSchema="${this.attributesSchema}"
       .attributeRenderer="${this.attributeRenderer}"
       .embedChecker="${this.inlineManager?.embedChecker}"
-      .markdownShortcutHandler="${this.inlineManager?.markdownShortcutHandler}"
+      .markdownMatches="${this.inlineManager?.markdownMatches}"
       .readonly="${true}"
       class="data-view-header-area-rich-text"
     ></rich-text>`;
@@ -391,7 +391,7 @@ export class HeaderAreaTextCellEditing extends BaseTextCell {
       .attributesSchema="${this.attributesSchema}"
       .attributeRenderer="${this.attributeRenderer}"
       .embedChecker="${this.inlineManager?.embedChecker}"
-      .markdownShortcutHandler="${this.inlineManager?.markdownShortcutHandler}"
+      .markdownMatches="${this.inlineManager?.markdownMatches}"
       .readonly="${this.readonly}"
       .enableClipboard="${false}"
       .verticalScrollContainerGetter="${() =>

blocksuite/affine/block-database/src/utils/block-utils.ts

@@ -37,24 +37,6 @@ export function addProperty(
   return id;
 }
 
-export function applyCellsUpdate(model: DatabaseBlockModel) {
-  model.doc.updateBlock(model, {
-    cells: model.cells,
-  });
-}
-
-export function applyPropertyUpdate(model: DatabaseBlockModel) {
-  model.doc.updateBlock(model, {
-    columns: model.columns,
-  });
-}
-
-export function applyViewsUpdate(model: DatabaseBlockModel) {
-  model.doc.updateBlock(model, {
-    views: model.views,
-  });
-}
-
 export function copyCellsByProperty(
   model: DatabaseBlockModel,
   fromId: Column['id'],
@@ -156,7 +138,6 @@ export function moveViewTo(
       arr => insertPositionToIndex(position, arr)
     );
   });
-  applyViewsUpdate(model);
 }
 
 export function updateCell(
@@ -255,6 +236,5 @@ export const updateView = <ViewData extends ViewBasicDataType>(
       return { ...v, ...update(v as ViewData) };
     });
   });
-  applyViewsUpdate(model);
 };
 export const DATABASE_CONVERT_WHITE_LIST = ['affine:list', 'affine:paragraph'];

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.7",
+    "@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.7",
+    "@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,17 +22,17 @@
     "@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.7",
+    "@toeverything/theme": "^1.1.12",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "yjs": "^13.6.21",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "vitest": "3.0.5"
+    "vitest": "3.0.6"
   },
   "exports": {
     ".": "./src/index.ts",
@@ -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,13 +9,15 @@ 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';
+import { computed, type ReadonlySignal } from '@preact/signals-core';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
+import { type ClassInfo, classMap } from 'lit/directives/class-map.js';
 import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
 export class EmbedBlockComponent<
@@ -23,6 +25,12 @@ export class EmbedBlockComponent<
   Service extends BlockService = BlockService,
   WidgetName extends string = string,
 > extends CaptionedBlockComponent<Model, Service, WidgetName> {
+  selectedStyle$: ReadonlySignal<ClassInfo> | null = computed<ClassInfo>(
+    () => ({
+      'selected-style': this.selected$.value,
+    })
+  );
+
   private _fetchAbortController = new AbortController();
 
   _cardStyle: EmbedCardStyle = 'horizontal';
@@ -43,10 +51,6 @@ export class EmbedBlockComponent<
   protected embedContainerStyle: StyleInfo = {};
 
   renderEmbed = (content: () => TemplateResult) => {
-    const selected = this.selected$.value;
-    const isInEdgeless =
-      this.std.get(DocModeProvider).getEditorMode() === 'edgeless';
-
     if (
       this._cardStyle === 'horizontal' ||
       this._cardStyle === 'horizontalThin' ||
@@ -54,7 +58,15 @@ export class EmbedBlockComponent<
     ) {
       this.style.display = 'block';
 
-      if (isInEdgeless) {
+      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`;
       }
     }
@@ -64,7 +76,7 @@ export class EmbedBlockComponent<
         draggable="${this.blockDraggable ? 'true' : 'false'}"
         class=${classMap({
           'embed-block-container': true,
-          'selected-style': selected && !isInEdgeless,
+          ...this.selectedStyle$?.value,
         })}
         style=${styleMap({
           height: `${this._cardHeight}px`,

blocksuite/affine/block-embed/src/common/render-linked-doc.ts

@@ -197,7 +197,7 @@ async function renderNoteContent(
     match: ids.map(id => ({ id, viewType: 'display' })),
   };
   const previewDoc = doc.doc.getStore({ query });
-  const previewSpec = SpecProvider.getInstance().getSpec('page:preview');
+  const previewSpec = SpecProvider._.getSpec('preview:page');
   const previewStd = new BlockStdScope({
     store: previewDoc,
     extensions: previewSpec.value,
@@ -404,7 +404,6 @@ export function createLinkedDocFromSlice(
   snapshots: BlockSnapshot[],
   docTitle?: string
 ) {
-  // const modelsWithChildren = (list:BlockModel[]):BlockModel[]=>list.flatMap(model=>[model,...modelsWithChildren(model.children)])
   const linkedDoc = doc.workspace.createDoc({});
   linkedDoc.load(() => {
     const rootId = linkedDoc.addBlock('affine:page', {

blocksuite/affine/block-embed/src/common/to-edgeless-embed-block.ts

@@ -22,6 +22,8 @@ export function toEdgelessEmbedBlock<
   B extends typeof EmbedBlockComponent<Model, Service, WidgetName>,
 >(block: B) {
   return class extends toGfxBlockComponent(block) {
+    override selectedStyle$ = null;
+
     _isDragging = false;
 
     _isResizing = false;

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-linked-doc-block/adapters/html.ts

@@ -1,8 +1,8 @@
 import { EmbedLinkedDocBlockSchema } from '@blocksuite/affine-model';
 import {
+  AdapterTextUtils,
   BlockHtmlAdapterExtension,
   type BlockHtmlAdapterMatcher,
-  TextUtils,
 } from '@blocksuite/affine-shared/adapters';
 
 export const embedLinkedDocBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher = {
@@ -18,7 +18,7 @@ export const embedLinkedDocBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher = {
         return;
       }
       const title = configs.get('title:' + o.node.props.pageId) ?? 'untitled';
-      const url = TextUtils.generateDocUrl(
+      const url = AdapterTextUtils.generateDocUrl(
         configs.get('docLinkBaseUrl') ?? '',
         String(o.node.props.pageId),
         o.node.props.params ?? Object.create(null)

blocksuite/affine/block-embed/src/embed-linked-doc-block/adapters/markdown.ts

@@ -1,8 +1,8 @@
 import { EmbedLinkedDocBlockSchema } from '@blocksuite/affine-model';
 import {
+  AdapterTextUtils,
   BlockMarkdownAdapterExtension,
   type BlockMarkdownAdapterMatcher,
-  TextUtils,
 } from '@blocksuite/affine-shared/adapters';
 
 export const embedLinkedDocBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher =
@@ -19,7 +19,7 @@ export const embedLinkedDocBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatc
           return;
         }
         const title = configs.get('title:' + o.node.props.pageId) ?? 'untitled';
-        const url = TextUtils.generateDocUrl(
+        const url = AdapterTextUtils.generateDocUrl(
           configs.get('docLinkBaseUrl') ?? '',
           String(o.node.props.pageId),
           o.node.props.params ?? Object.create(null)

blocksuite/affine/block-embed/src/embed-linked-doc-block/adapters/plain-text.ts

@@ -1,8 +1,8 @@
 import { EmbedLinkedDocBlockSchema } from '@blocksuite/affine-model';
 import {
+  AdapterTextUtils,
   BlockPlainTextAdapterExtension,
   type BlockPlainTextAdapterMatcher,
-  TextUtils,
 } from '@blocksuite/affine-shared/adapters';
 
 export const embedLinkedDocBlockPlainTextAdapterMatcher: BlockPlainTextAdapterMatcher =
@@ -19,7 +19,7 @@ export const embedLinkedDocBlockPlainTextAdapterMatcher: BlockPlainTextAdapterMa
           return;
         }
         const title = configs.get('title:' + o.node.props.pageId) ?? 'untitled';
-        const url = TextUtils.generateDocUrl(
+        const url = AdapterTextUtils.generateDocUrl(
           configs.get('docLinkBaseUrl') ?? '',
           String(o.node.props.pageId),
           o.node.props.params ?? Object.create(null)

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

@@ -246,7 +246,9 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
   }
 
   get linkedDoc() {
-    return this.std.workspace.getDoc(this.model.pageId);
+    return this.std.workspace.getDoc(this.model.pageId, {
+      id: this.model.pageId,
+    });
   }
 
   private _handleDoubleClick(event: MouseEvent) {

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

@@ -70,7 +70,7 @@ export class EmbedEdgelessSyncedDocBlockComponent extends toEdgelessEmbedBlock(
             <div class="affine-page-viewport" data-theme=${appTheme}>
               ${new BlockStdScope({
                 store: syncedDoc,
-                extensions: this._buildPreviewSpec('page:preview'),
+                extensions: this._buildPreviewSpec('preview:page'),
               }).render()}
             </div>
           `,
@@ -81,7 +81,7 @@ export class EmbedEdgelessSyncedDocBlockComponent extends toEdgelessEmbedBlock(
             <div class="affine-edgeless-viewport" data-theme=${edgelessTheme}>
               ${new BlockStdScope({
                 store: syncedDoc,
-                extensions: this._buildPreviewSpec('edgeless:preview'),
+                extensions: this._buildPreviewSpec('preview:edgeless'),
               }).render()}
             </div>
           `,
@@ -164,7 +164,7 @@ export class EmbedEdgelessSyncedDocBlockComponent extends toEdgelessEmbedBlock(
     this.cardStyleMap = {
       display: 'block',
       width: `${EMBED_CARD_WIDTH[style]}px`,
-      height: `${EMBED_CARD_WIDTH[style]}px`,
+      height: `${EMBED_CARD_HEIGHT[style]}px`,
       transform: `scale(${bound.w / EMBED_CARD_WIDTH[style]}, ${bound.h / EMBED_CARD_HEIGHT[style]})`,
       transformOrigin: '0 0',
     };

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,
@@ -116,35 +116,39 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
     ],
   };
 
-  protected _buildPreviewSpec = (name: 'page:preview' | 'edgeless:preview') => {
+  protected _buildPreviewSpec = (name: 'preview:page' | 'preview:edgeless') => {
     const nextDepth = this.depth + 1;
-    const previewSpecBuilder = SpecProvider.getInstance().getSpec(name);
+    const previewSpecBuilder = SpecProvider._.getSpec(name);
     const currentDisposables = this.disposables;
     const editorSetting =
       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;
+          }
+        });
       }
     }
 
@@ -203,7 +207,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
             <div class="affine-page-viewport" data-theme=${appTheme}>
               ${new BlockStdScope({
                 store: syncedDoc,
-                extensions: this._buildPreviewSpec('page:preview'),
+                extensions: this._buildPreviewSpec('preview:page'),
               }).render()}
             </div>
           `,
@@ -214,7 +218,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
             <div class="affine-edgeless-viewport" data-theme=${edgelessTheme}>
               ${new BlockStdScope({
                 store: syncedDoc,
-                extensions: this._buildPreviewSpec('edgeless:preview'),
+                extensions: this._buildPreviewSpec('preview:edgeless'),
               }).render()}
             </div>
           `,
@@ -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}
@@ -245,7 +250,10 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
                     </span>
                   </div>
                 `
-              : guard([editorMode, syncedDoc], renderEditor)}
+              : guard(
+                  [editorMode, syncedDoc, appTheme, edgelessTheme],
+                  renderEditor
+                )}
           </div>
           <div
             class=${classMap({

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

@@ -57,9 +57,13 @@ export const blockStyles = css`
   }
 
   .affine-embed-synced-doc-container {
+    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%;
@@ -69,12 +73,6 @@ export const blockStyles = css`
     width: 100%;
     height: calc(${EMBED_CARD_HEIGHT.syncedDoc}px + 36px);
   }
-  .affine-embed-synced-doc-container:hover.light {
-    box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.08);
-  }
-  .affine-embed-synced-doc-container:hover.dark {
-    box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.14);
-  }
   .affine-embed-synced-doc-header-wrapper {
     position: absolute;
     top: 0;
@@ -127,9 +125,6 @@ export const blockStyles = css`
     z-index: 1;
     cursor: pointer;
   }
-  .affine-embed-synced-doc-editor-overlay:hover {
-    background: var(--affine-hover-color);
-  }
 
   .affine-embed-synced-doc-editor-empty {
     display: flex;
@@ -159,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

@@ -13,6 +13,7 @@
   "author": "toeverything",
   "license": "MIT",
   "dependencies": {
+    "@blocksuite/affine-block-surface": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
@@ -20,13 +21,14 @@
     "@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.7",
+    "@toeverything/theme": "^1.1.12",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
+    "yjs": "^13.6.21",
     "zod": "^3.23.8"
   },
   "exports": {
@@ -39,5 +41,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

blocksuite/affine/block-frame/src/frame-manager.ts

@@ -21,14 +21,13 @@ import {
   type IVec,
   type SerializedXYWH,
 } from '@blocksuite/global/utils';
-import { Text } from '@blocksuite/store';
+import { type BlockModel, Text } from '@blocksuite/store';
 import * as Y from 'yjs';
 
-import { areSetsEqual } from './utils/misc.js';
-import { isFrameBlock } from './utils/query.js';
-
 const FRAME_PADDING = 40;
 
+export type NavigatorMode = 'fill' | 'fit';
+
 export class FrameOverlay extends Overlay {
   static override overlayName: string = 'frame';
 
@@ -461,3 +460,13 @@ export class EdgelessFrameManager extends GfxExtension {
     this._disposable.dispose();
   }
 }
+
+function areSetsEqual<T>(setA: Set<T>, setB: Set<T>) {
+  if (setA.size !== setB.size) return false;
+  for (const a of setA) if (!setB.has(a)) return false;
+  return true;
+}
+
+export function isFrameBlock(element: unknown): element is FrameBlockModel {
+  return !!element && (element as BlockModel).flavour === 'affine:frame';
+}

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

@@ -1,2 +1,4 @@
 export * from './frame-block.js';
+export * from './frame-manager.js';
 export * from './frame-spec.js';
+export * from './tool.js';

blocksuite/affine/block-frame/src/tool.ts

@@ -1,6 +1,6 @@
 import { BaseTool } from '@blocksuite/block-std/gfx';
 
-import type { NavigatorMode } from '../../../_common/edgeless/frame/consts.js';
+import type { NavigatorMode } from './frame-manager';
 
 type PresentToolOption = {
   mode?: NavigatorMode;

blocksuite/affine/block-frame/tsconfig.json

@@ -7,6 +7,7 @@
   },
   "include": ["./src"],
   "references": [
+    { "path": "../block-surface" },
     { "path": "../components" },
     { "path": "../model" },
     { "path": "../shared" },

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.7",
+    "@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-image/src/adapters/index.ts

@@ -1,3 +1,4 @@
 export * from './html.js';
 export * from './markdown.js';
+export * from './middleware.js';
 export * from './notion-html.js';

blocksuite/affine/block-image/src/image-service.ts

@@ -40,17 +40,18 @@ export const ImageDropOption = FileDropConfigExtension({
     if (isInsideEdgelessEditor(std.host)) {
       const gfx = std.get(GfxControllerIdentifier);
       point = gfx.viewport.toViewCoordFromClientCoord(point);
-      addImages(std, files, { point, maxWidth: MAX_IMAGE_WIDTH }).catch(
-        console.error
-      );
+      addImages(std, files, { point, maxWidth: MAX_IMAGE_WIDTH })
+        .then(() => {
+          std.getOptional(TelemetryProvider)?.track('CanvasElementAdded', {
+            control: 'canvas:drop',
+            page: 'whiteboard editor',
+            module: 'toolbar',
+            segment: 'toolbar',
+            type: 'image',
+          });
+        })
+        .catch(console.error);
 
-      std.getOptional(TelemetryProvider)?.track('CanvasElementAdded', {
-        control: 'canvas:drop',
-        page: 'whiteboard editor',
-        module: 'toolbar',
-        segment: 'toolbar',
-        type: 'image',
-      });
       return true;
     }
 

blocksuite/affine/block-image/src/image-spec.ts

@@ -33,4 +33,4 @@ export const ImageBlockSpec: ExtensionType[] = [
   ImageBlockAdapterExtensions,
 ].flat();
 
-export const ImageStoreSpec: ExtensionType[] = [ImageProxyService].flat();
+export const ImageStoreSpec: ExtensionType[] = [ImageProxyService];

blocksuite/affine/block-image/src/utils.ts

@@ -12,6 +12,7 @@ import {
 import {
   downloadBlob,
   humanFileSize,
+  readImageSize,
   transformModel,
   withTempBlobData,
 } from '@blocksuite/affine-shared/utils';
@@ -425,27 +426,6 @@ export async function turnImageIntoCardView(
   transformModel(model, 'affine:attachment', attachmentProp);
 }
 
-export function readImageSize(file: File | Blob) {
-  return new Promise<{ width: number; height: number }>(resolve => {
-    const size = { width: 0, height: 0 };
-    const img = new Image();
-
-    img.onload = () => {
-      size.width = img.width;
-      size.height = img.height;
-      URL.revokeObjectURL(img.src);
-      resolve(size);
-    };
-
-    img.onerror = () => {
-      URL.revokeObjectURL(img.src);
-      resolve(size);
-    };
-
-    img.src = URL.createObjectURL(file);
-  });
-}
-
 export async function addImages(
   std: BlockStdScope,
   files: File[],
@@ -512,9 +492,17 @@ export async function addImages(
   // upload image data and update the image model
   const uploadPromises = imageFiles.map(async (file, index) => {
     const { point, blockId } = dropInfos[index];
+    const block = std.store.getBlock(blockId);
+    const imageSize = await readImageSize(file);
+
+    if (!imageSize.width || !imageSize.height) {
+      std.store.deleteBlock(block!.model);
+
+      toast(std.host, 'Failed to read image size, please try another image');
+      throw new Error('Failed to read image size');
+    }
 
     const sourceId = await std.store.blobSync.set(file);
-    const imageSize = await readImageSize(file);
 
     const center = Vec.toVec(point);
     // If maxWidth is provided, limit the width of the image to maxWidth

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.7",
+    "@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,17 +20,17 @@
     "@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.7",
+    "@toeverything/theme": "^1.1.12",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "vitest": "3.0.5"
+    "vitest": "3.0.6"
   },
   "exports": {
     ".": "./src/index.ts",
@@ -42,5 +42,5 @@
     "!src/__tests__",
     "!dist/__tests__"
   ],
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

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

@@ -1,9 +1,9 @@
 import { ListBlockSchema } from '@blocksuite/affine-model';
 import {
+  AdapterTextUtils,
   BlockHtmlAdapterExtension,
   type BlockHtmlAdapterMatcher,
   HastUtils,
-  TextUtils,
 } from '@blocksuite/affine-shared/adapters';
 import type { DeltaInsert } from '@blocksuite/inline';
 import { nanoid } from '@blocksuite/store';
@@ -124,7 +124,7 @@ export const listBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher = {
           Array.isArray(currentTNode.properties.className) &&
           currentTNode.properties.className.includes('todo-list')
         ) ===
-          TextUtils.isNullish(
+          AdapterTextUtils.isNullish(
             o.node.props.type === 'todo'
               ? (o.node.props.checked as boolean)
               : undefined
@@ -177,7 +177,7 @@ export const listBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher = {
           Array.isArray(previousTNode.properties.className) &&
           previousTNode.properties.className.includes('todo-list')
         ) ===
-          TextUtils.isNullish(
+          AdapterTextUtils.isNullish(
             o.node.props.type === 'todo'
               ? (o.node.props.checked as boolean)
               : undefined

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

@@ -1,9 +1,9 @@
 import { ListBlockSchema } from '@blocksuite/affine-model';
 import {
+  AdapterTextUtils,
   BlockMarkdownAdapterExtension,
   type BlockMarkdownAdapterMatcher,
   type MarkdownAST,
-  TextUtils,
 } from '@blocksuite/affine-shared/adapters';
 import type { DeltaInsert } from '@blocksuite/inline';
 import { nanoid } from '@blocksuite/store';
@@ -75,8 +75,8 @@ export const listBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher = {
         walkerContext.getNodeContext('affine:list:parent') === o.parent &&
         currentTNode.type === 'list' &&
         currentTNode.ordered === (o.node.props.type === 'numbered') &&
-        TextUtils.isNullish(currentTNode.children[0].checked) ===
-          TextUtils.isNullish(
+        AdapterTextUtils.isNullish(currentTNode.children[0].checked) ===
+          AdapterTextUtils.isNullish(
             o.node.props.type === 'todo'
               ? (o.node.props.checked as boolean)
               : undefined
@@ -129,8 +129,8 @@ export const listBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher = {
         currentTNode.type === 'listItem' &&
         previousTNode?.type === 'list' &&
         previousTNode.ordered === (o.node.props.type === 'numbered') &&
-        TextUtils.isNullish(currentTNode.checked) ===
-          TextUtils.isNullish(
+        AdapterTextUtils.isNullish(currentTNode.checked) ===
+          AdapterTextUtils.isNullish(
             o.node.props.type === 'todo'
               ? (o.node.props.checked as boolean)
               : undefined

blocksuite/affine/block-list/src/list-block.ts

@@ -85,10 +85,6 @@ export class ListBlockComponent extends CaptionedBlockComponent<ListBlockModel>
     return this.std.get(DefaultInlineManagerExtension.identifier);
   }
 
-  get markdownShortcutHandler() {
-    return this.inlineManager.markdownShortcutHandler;
-  }
-
   override get topContenteditableElement() {
     if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
       return this.closest<BlockComponent>(NOTE_SELECTOR);
@@ -193,7 +189,7 @@ export class ListBlockComponent extends CaptionedBlockComponent<ListBlockModel>
             .undoManager=${this.doc.history}
             .attributeRenderer=${this.attributeRenderer}
             .attributesSchema=${this.attributesSchema}
-            .markdownShortcutHandler=${this.markdownShortcutHandler}
+            .markdownMatches=${this.inlineManager?.markdownMatches}
             .embedChecker=${this.embedChecker}
             .readonly=${this.doc.readonly}
             .inlineRangeProvider=${this._inlineRangeProvider}

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.7",
+    "@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.7",
+    "@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-paragraph/src/paragraph-block.ts

@@ -90,10 +90,6 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<
     return this.std.get(DefaultInlineManagerExtension.identifier);
   }
 
-  get markdownShortcutHandler() {
-    return this.inlineManager.markdownShortcutHandler;
-  }
-
   override get topContenteditableElement() {
     if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
       return this.closest<BlockComponent>(NOTE_SELECTOR);
@@ -294,7 +290,7 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<
             .undoManager=${this.doc.history}
             .attributesSchema=${this.attributesSchema}
             .attributeRenderer=${this.attributeRenderer}
-            .markdownShortcutHandler=${this.markdownShortcutHandler}
+            .markdownMatches=${this.inlineManager?.markdownMatches}
             .embedChecker=${this.embedChecker}
             .readonly=${this.doc.readonly}
             .inlineRangeProvider=${this._inlineRangeProvider}

blocksuite/affine/block-root/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@blocksuite/affine-block-root",
+  "description": "Root block for BlockSuite.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "test:unit": "nx vite:test --run --passWithNoTests",
+    "test:unit:coverage": "nx vite:test --run --coverage",
+    "test:e2e": "playwright test"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-block-attachment": "workspace:*",
+    "@blocksuite/affine-block-bookmark": "workspace:*",
+    "@blocksuite/affine-block-data-view": "workspace:*",
+    "@blocksuite/affine-block-database": "workspace:*",
+    "@blocksuite/affine-block-edgeless-text": "workspace:*",
+    "@blocksuite/affine-block-embed": "workspace:*",
+    "@blocksuite/affine-block-frame": "workspace:*",
+    "@blocksuite/affine-block-image": "workspace:*",
+    "@blocksuite/affine-block-latex": "workspace:*",
+    "@blocksuite/affine-block-list": "workspace:*",
+    "@blocksuite/affine-block-note": "workspace:*",
+    "@blocksuite/affine-block-paragraph": "workspace:*",
+    "@blocksuite/affine-block-surface": "workspace:*",
+    "@blocksuite/affine-block-surface-ref": "workspace:*",
+    "@blocksuite/affine-block-table": "workspace:*",
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/affine-widget-drag-handle": "workspace:*",
+    "@blocksuite/affine-widget-edgeless-auto-connect": "workspace:*",
+    "@blocksuite/affine-widget-frame-title": "workspace:*",
+    "@blocksuite/affine-widget-remote-selection": "workspace:*",
+    "@blocksuite/affine-widget-scroll-anchoring": "workspace:*",
+    "@blocksuite/block-std": "workspace:*",
+    "@blocksuite/data-view": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.2.1",
+    "@blocksuite/inline": "workspace:*",
+    "@blocksuite/store": "workspace:*",
+    "@floating-ui/dom": "^1.6.13",
+    "@lit/context": "^1.1.2",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.12",
+    "@types/lodash-es": "^4.17.12",
+    "@types/mdast": "^4.0.4",
+    "@vanilla-extract/css": "^1.17.0",
+    "dompurify": "^3.2.4",
+    "fflate": "^0.8.2",
+    "html2canvas": "^1.4.1",
+    "lit": "^3.2.0",
+    "lodash-es": "^4.17.21",
+    "minimatch": "^10.0.1",
+    "simple-xml-to-json": "^1.2.2",
+    "yjs": "^13.6.21",
+    "zod": "^3.23.8"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.20.0"
+}

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

@@ -1,4 +1,9 @@
 import { deleteTextCommand } from '@blocksuite/affine-components/rich-text';
+import {
+  pasteMiddleware,
+  replaceIdMiddleware,
+  surfaceRefToEmbed,
+} from '@blocksuite/affine-shared/adapters';
 import {
   clearAndSelectFirstModelCommand,
   deleteSelectedModelsCommand,
@@ -22,6 +27,23 @@ import { ReadOnlyClipboard } from './readonly-clipboard';
 export class PageClipboard extends ReadOnlyClipboard {
   protected _init = () => {
     this._initAdapters();
+    const paste = pasteMiddleware(this._std);
+    // Use surfaceRefToEmbed middleware to convert surface-ref to embed-linked-doc
+    // When pastina a surface-ref block to another doc
+    const surfaceRefToEmbedMiddleware = surfaceRefToEmbed(this._std);
+    const replaceId = replaceIdMiddleware(
+      this._std.store.workspace.idGenerator
+    );
+    this._std.clipboard.use(paste);
+    this._std.clipboard.use(surfaceRefToEmbedMiddleware);
+    this._std.clipboard.use(replaceId);
+    this._disposables.add({
+      dispose: () => {
+        this._std.clipboard.unuse(paste);
+        this._std.clipboard.unuse(surfaceRefToEmbedMiddleware);
+        this._std.clipboard.unuse(replaceId);
+      },
+    });
   };
 
   onBlockSnapshotPaste = async (
@@ -61,8 +83,20 @@ export class PageClipboard extends ReadOnlyClipboard {
     this._std.store.captureSync();
     this._std.command
       .chain()
-      .try(cmd => [
-        cmd.pipe(getTextSelectionCommand),
+      .try<{}>(cmd => [
+        cmd.pipe(getTextSelectionCommand).pipe((ctx, next) => {
+          const { currentTextSelection } = ctx;
+          if (!currentTextSelection) {
+            return;
+          }
+          const { from, to } = currentTextSelection;
+          if (to && from.blockId !== to.blockId) {
+            this._std.command.exec(deleteTextCommand, {
+              currentTextSelection,
+            });
+          }
+          return next();
+        }),
         cmd
           .pipe(getSelectedModelsCommand)
           .pipe(clearAndSelectFirstModelCommand)
@@ -131,3 +165,5 @@ export class PageClipboard extends ReadOnlyClipboard {
     }
   }
 }
+
+export { pasteMiddleware };

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

@@ -1,3 +1,4 @@
+import { defaultImageProxyMiddleware } from '@blocksuite/affine-block-image';
 import {
   AttachmentAdapter,
   copyMiddleware,
@@ -5,7 +6,7 @@ import {
   ImageAdapter,
   MixTextAdapter,
   NotionTextAdapter,
-  pasteMiddleware,
+  titleMiddleware,
 } from '@blocksuite/affine-shared/adapters';
 import {
   copySelectedModelsCommand,
@@ -15,11 +16,6 @@ import {
 import type { BlockComponent, UIEventHandler } from '@blocksuite/block-std';
 import { DisposableGroup } from '@blocksuite/global/utils';
 
-import {
-  defaultImageProxyMiddleware,
-  replaceIdMiddleware,
-  titleMiddleware,
-} from '../../_common/transformers/middlewares.js';
 import { ClipboardAdapter } from './adapter.js';
 
 /**
@@ -64,12 +60,7 @@ export class ReadOnlyClipboard {
     this._std.clipboard.registerAdapter('text/plain', MixTextAdapter, 70);
     this._std.clipboard.registerAdapter('*/*', AttachmentAdapter, 60);
     const copy = copyMiddleware(this._std);
-    const paste = pasteMiddleware(this._std);
     this._std.clipboard.use(copy);
-    this._std.clipboard.use(paste);
-    this._std.clipboard.use(
-      replaceIdMiddleware(this._std.store.workspace.idGenerator)
-    );
     this._std.clipboard.use(
       titleMiddleware(this._std.store.workspace.meta.docMetas)
     );
@@ -91,10 +82,6 @@ export class ReadOnlyClipboard {
         this._std.clipboard.unregisterAdapter('text/html');
         this._std.clipboard.unregisterAdapter('*/*');
         this._std.clipboard.unuse(copy);
-        this._std.clipboard.unuse(paste);
-        this._std.clipboard.unuse(
-          replaceIdMiddleware(this._std.store.workspace.idGenerator)
-        );
         this._std.clipboard.unuse(
           titleMiddleware(this._std.store.workspace.meta.docMetas)
         );
@@ -135,4 +122,4 @@ export class ReadOnlyClipboard {
   }
 }
 
-export { copyMiddleware, pasteMiddleware };
+export { copyMiddleware };

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,18 +64,17 @@ import {
   BlockSnapshotSchema,
   fromJSON,
   type SliceSnapshot,
-  Transformer,
 } from '@blocksuite/store';
 import DOMPurify from 'dompurify';
 import * as Y from 'yjs';
 
-import { getRootByEditorHost } from '../../../_common/utils/query.js';
 import { ClipboardAdapter } from '../../clipboard/adapter.js';
 import { PageClipboard } from '../../clipboard/index.js';
 import {
   decodeClipboardBlobs,
   encodeClipboardBlobs,
 } from '../../clipboard/utils.js';
+import type { RootBlockComponent } from '../../types.js';
 import type { EdgelessRootBlockComponent } from '../edgeless-root-block.js';
 import { edgelessElementsBoundFromRawData } from '../utils/bound-utils.js';
 import { createNewPresentationIndexes } from '../utils/clipboard-utils.js';
@@ -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);
@@ -1439,3 +1422,12 @@ function tryGetSvgFromClipboard(clipboardData: DataTransfer) {
   const file = new File([blob], 'pasted-image.svg', { type: 'image/svg+xml' });
   return file;
 }
+
+function getRootByEditorHost(
+  editorHost: EditorHost
+): RootBlockComponent | null {
+  const model = editorHost.doc.root;
+  if (!model) return null;
+  const root = editorHost.view.getBlock(model.id);
+  return root as RootBlockComponent | null;
+}

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

@@ -1,8 +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';
@@ -18,7 +19,6 @@ import { css, html, nothing, type PropertyValues } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { SpecProvider } from '../../../../_specs/index.js';
 import type { EdgelessRootPreviewBlockComponent } from '../../edgeless-root-preview-block.js';
 
 const DEFAULT_PREVIEW_CONTAINER_WIDTH = 280;
@@ -80,8 +80,7 @@ export class FramePreview extends WithDisposable(ShadowlessElement) {
 
   private _previewDoc: Store | null = null;
 
-  private readonly _previewSpec =
-    SpecProvider.getInstance().getSpec('edgeless:preview');
+  private readonly _previewSpec = SpecProvider._.getSpec('preview:edgeless');
 
   private readonly _updateFrameViewportWH = () => {
     const [, , w, h] = deserializeXYWH(this.frame.xywh);
@@ -118,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/note-slicer/index.ts

@@ -1,5 +1,10 @@
+import type { NoteBlockComponent } from '@blocksuite/affine-block-note';
 import { isNoteBlock } from '@blocksuite/affine-block-surface';
-import { DEFAULT_NOTE_HEIGHT } from '@blocksuite/affine-model';
+import {
+  DEFAULT_NOTE_HEIGHT,
+  type NoteBlockModel,
+  type RootBlockModel,
+} from '@blocksuite/affine-model';
 import { EDGELESS_BLOCK_CHILD_PADDING } from '@blocksuite/affine-shared/consts';
 import { TelemetryProvider } from '@blocksuite/affine-shared/services';
 import { getRectByBlockComponent } from '@blocksuite/affine-shared/utils';
@@ -17,12 +22,7 @@ import { state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import type {
-  EdgelessRootBlockComponent,
-  NoteBlockComponent,
-  NoteBlockModel,
-  RootBlockModel,
-} from '../../../../index.js';
+import type { EdgelessRootBlockComponent } from '../../edgeless-root-block';
 
 const DIVIDING_LINE_OFFSET = 4;
 const NEW_NOTE_GAP = 40;
@@ -373,7 +373,7 @@ export class NoteSlicer extends WidgetComponent<
     if (!noteBlock || !this._divingLinePositions.length) return nothing;
 
     const rect = getRectByBlockComponent(noteBlock);
-    const width = rect.width - 2 * EDGELESS_BLOCK_CHILD_PADDING;
+    const width = rect.width - 2 * EDGELESS_BLOCK_CHILD_PADDING * this._zoom;
     const buttonPosition = this._divingLinePositions[this._activeSlicerIndex];
 
     return html`<div class="note-slicer-container">
@@ -383,7 +383,6 @@ export class NoteSlicer extends WidgetComponent<
           left: `${buttonPosition.x - 66 * this._zoom}px`,
           top: `${buttonPosition.y}px`,
           opacity: 1,
-          scale: `${this._zoom}`,
           transform: 'translateY(-50%)',
         })}
       >

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)}
       >