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

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

blocksuite/affine/blocks/block-image/src/components/image-block-fallback.ts

@@ -94,8 +94,8 @@ export class ImageBlockFallbackCard extends WithDisposable(ShadowlessElement) {
         : 'Image';
 
     const size =
-      !!model.size && model.size > 0
-        ? humanFileSize(model.size, true, 0)
+      !!model.props.size && model.props.size > 0
+        ? humanFileSize(model.props.size, true, 0)
         : null;
 
     return html`

blocksuite/affine/blocks/block-image/src/components/page-image-block.ts

@@ -249,7 +249,7 @@ export class ImageBlockPageComponent extends WithDisposable(ShadowlessElement) {
       };
     }
 
-    const { width, height } = this._model;
+    const { width, height } = this._model.props;
     if (!width || !height) {
       return {
         width: 'unset',

blocksuite/affine/blocks/block-image/src/image-edgeless-block.ts

@@ -42,7 +42,7 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
     this.retryCount = 0;
     fetchImageBlob(this)
       .then(() => {
-        const { width, height } = this.model;
+        const { width, height } = this.model.props;
         if ((!width || !height) && this.blob) {
           return resetImageSize(this);
         }

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

@@ -97,7 +97,7 @@ export async function uploadBlobForImage(
 }
 
 async function getImageBlob(model: ImageBlockModel) {
-  const sourceId = model.sourceId;
+  const sourceId = model.props.sourceId;
   if (!sourceId) {
     return null;
   }
@@ -131,7 +131,7 @@ export async function fetchImageBlob(
   block: ImageBlockComponent | ImageEdgelessBlockComponent
 ) {
   try {
-    if (block.model.sourceId !== block.lastSourceId || !block.blobUrl) {
+    if (block.model.props.sourceId !== block.lastSourceId || !block.blobUrl) {
       block.loading = true;
       block.error = false;
       block.blob = undefined;
@@ -145,7 +145,8 @@ export async function fetchImageBlob(
     }
 
     const { model } = block;
-    const { id, sourceId, doc } = model;
+    const { sourceId } = model.props;
+    const { id, doc } = model;
 
     if (isImageUploading(id)) {
       return;
@@ -405,7 +406,7 @@ export async function turnImageIntoCardView(
   }
 
   const model = block.model;
-  const sourceId = model.sourceId;
+  const sourceId = model.props.sourceId;
   const blob = await getImageBlob(model);
   if (!sourceId || !blob) {
     console.error('Image data not available');
@@ -413,14 +414,17 @@ export async function turnImageIntoCardView(
   }
 
   const { saveImageData, getAttachmentData } = withTempBlobData();
-  saveImageData(sourceId, { width: model.width, height: model.height });
+  saveImageData(sourceId, {
+    width: model.props.width,
+    height: model.props.height,
+  });
   const attachmentConvertData = getAttachmentData(sourceId);
   const attachmentProp: Partial<AttachmentBlockProps> = {
     sourceId,
     name: DEFAULT_ATTACHMENT_NAME,
     size: blob.size,
     type: blob.type,
-    caption: model.caption,
+    caption: model.props.caption,
     ...attachmentConvertData,
   };
   transformModel(model, 'affine:attachment', attachmentProp);