feat(editor): unify block props api (#10888)

Closes: [BS-2707](https://linear.app/affine-design/issue/BS-2707/统一使用props获取和更新block-prop)

blocksuite/affine/widgets/widget-drag-handle/src/middleware/new-id-cross-doc.ts

@@ -27,7 +27,7 @@ export const newIdCrossDoc =
         payload.type === 'block' &&
         matchModels(payload.model, [DatabaseBlockModel])
       ) {
-        const originalCells = payload.model.cells;
+        const originalCells = payload.model.props.cells;
         const newCells = {
           ...originalCells,
         };
@@ -38,7 +38,7 @@ export const newIdCrossDoc =
           }
         });
 
-        payload.model.cells$.value = newCells;
+        payload.model.props.cells$.value = newCells;
       }
     });
   };

blocksuite/affine/widgets/widget-drag-handle/src/middleware/reorder-list.ts

@@ -10,7 +10,10 @@ export const reorderList =
     slots.afterImport.subscribe(payload => {
       if (payload.type === 'block') {
         const model = payload.model;
-        if (matchModels(model, [ListBlockModel]) && model.type === 'numbered') {
+        if (
+          matchModels(model, [ListBlockModel]) &&
+          model.props.type === 'numbered'
+        ) {
           const next = std.store.getNext(model);
           correctNumberedListsOrderToPrev(std.store, model);
           if (next) {

blocksuite/affine/widgets/widget-drag-handle/src/utils.ts

@@ -59,8 +59,8 @@ export const getDragHandleContainerHeight = (model: BlockModel) => {
   const flavour = model.flavour;
   const index = flavour.indexOf(':');
   let key = flavour.slice(index + 1);
-  if (key === 'paragraph' && (model as ParagraphBlockModel).type) {
-    key = (model as ParagraphBlockModel).type;
+  if (key === 'paragraph' && (model as ParagraphBlockModel).props.type) {
+    key = (model as ParagraphBlockModel).props.type;
   }
 
   const height = heightMap[key] ?? DRAG_HANDLE_CONTAINER_HEIGHT;
@@ -253,7 +253,7 @@ export function getDragHandleLeftPadding(blocks: BlockComponent[]) {
       (matchModels(block.model, [ListBlockModel]) &&
         block.model.children.length > 0) ||
       (block instanceof ParagraphBlockComponent &&
-        block.model.type.startsWith('h') &&
+        block.model.props.type.startsWith('h') &&
         block.collapsedSiblings.length > 0)
   );
   const offsetLeft = hasToggleList

blocksuite/affine/widgets/widget-drag-handle/src/watchers/drag-event-watcher.ts

@@ -454,8 +454,8 @@ export class DragEventWatcher {
         // if block is toggled heading, should select all siblings
         if (
           block instanceof ParagraphBlockComponent &&
-          block.model.type.startsWith('h') &&
-          block.model.collapsed
+          block.model.props.type.startsWith('h') &&
+          block.model.props.collapsed
         ) {
           const collapsedSiblings = block.collapsedSiblings.flatMap(
             sibling => this.widget.host.view.getBlock(sibling.id) ?? []

blocksuite/affine/widgets/widget-drag-handle/src/watchers/pointer-event-watcher.ts

@@ -258,7 +258,7 @@ export class PointerEventWatcher {
       this.widget.noteScale.value =
         this.widget.mode === 'page'
           ? 1
-          : (closestNoteBlock?.model.edgeless.scale ?? 1);
+          : (closestNoteBlock?.model.props.edgeless.scale ?? 1);
 
       if (
         closestNoteBlock &&

blocksuite/affine/widgets/widget-edgeless-auto-connect/src/index.ts

@@ -199,16 +199,18 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<RootBlockModel> {
 
     notes.forEach(note => {
       if (isNoteBlock(note)) {
-        if (note.displayMode$.value === NoteDisplayMode.EdgelessOnly) {
+        if (note.props.displayMode$.value === NoteDisplayMode.EdgelessOnly) {
           edgelessOnlyNotesSet.add(note);
-        } else if (note.displayMode$.value === NoteDisplayMode.DocAndEdgeless) {
+        } else if (
+          note.props.displayMode$.value === NoteDisplayMode.DocAndEdgeless
+        ) {
           pageVisibleBlocks.set(note, 1);
         }
       }
 
       note.children.forEach(model => {
         if (matchModels(model, [SurfaceRefBlockModel])) {
-          const reference = this._crud.getElementById(model.reference);
+          const reference = this._crud.getElementById(model.props.reference);
 
           if (!isAutoConnectElement(reference)) return;
 
@@ -294,7 +296,9 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<RootBlockModel> {
         selectedElements.length === 1 &&
         !this._selection.editing &&
         (isNoteBlock(selectedElements[0]) ||
-          surfaceRefs.some(ref => ref.reference === selectedElements[0].id))
+          surfaceRefs.some(
+            ref => ref.props.reference === selectedElements[0].id
+          ))
       ) {
         this._show = true;
       } else {
@@ -342,7 +346,7 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<RootBlockModel> {
         surface.elementUpdated.subscribe(payload => {
           if (
             payload.props['xywh'] &&
-            surfaceRefs.some(ref => ref.reference === payload.id)
+            surfaceRefs.some(ref => ref.props.reference === payload.id)
           ) {
             this.requestUpdate();
           }

blocksuite/affine/widgets/widget-frame-title/src/frame-title.ts

@@ -38,7 +38,7 @@ export class AffineFrameTitle extends SignalWatcher(
   get colors() {
     let backgroundColor = this.std
       .get(ThemeProvider)
-      .getColorValue(this.model.background, undefined, true);
+      .getColorValue(this.model.props.background, undefined, true);
     if (isTransparent(backgroundColor)) {
       backgroundColor = this.std
         .get(ThemeProvider)
@@ -206,14 +206,14 @@ export class AffineFrameTitle extends SignalWatcher(
     this._zoom = gfx.viewport.zoom;
 
     const updateTitle = () => {
-      this._frameTitle = this.model.title.toString().trim();
+      this._frameTitle = this.model.props.title.toString().trim();
     };
     _disposables.add(() => {
-      this.model.title.yText.unobserve(updateTitle);
+      this.model.props.title.yText.unobserve(updateTitle);
     });
-    this.model.title.yText.observe(updateTitle);
+    this.model.props.title.yText.observe(updateTitle);
 
-    this._frameTitle = this.model.title.toString().trim();
+    this._frameTitle = this.model.props.title.toString().trim();
     this._xywh = this.model.xywh;
   }
 

blocksuite/affine/widgets/widget-slash-menu/src/config.ts

@@ -1,5 +1,8 @@
 import { toast } from '@blocksuite/affine-components/toast';
-import type { ParagraphBlockModel } from '@blocksuite/affine-model';
+import type {
+  ListBlockModel,
+  ParagraphBlockModel,
+} from '@blocksuite/affine-model';
 import { insertContent } from '@blocksuite/affine-rich-text';
 import {
   ArrowDownBigIcon,
@@ -149,14 +152,17 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
           }
           const index = parent.children.indexOf(model);
 
-          // TODO add clone model util
+          // FIXME: this clone is not correct
           host.doc.addBlock(
-            model.flavour as never,
+            model.flavour,
             {
-              type: (model as ParagraphBlockModel).type,
-              text: new Text(model.text.toDelta() as DeltaInsert[]),
-              // @ts-expect-error FIXME: ts error
-              checked: model.checked,
+              type: (model as ParagraphBlockModel).props.type,
+              text: new Text(
+                (
+                  model as ParagraphBlockModel
+                ).props.text.toDelta() as DeltaInsert[]
+              ),
+              checked: (model as ListBlockModel).props.checked,
             },
             host.doc.getParent(model),
             index