feat(core): support snapshot preview in editor settings (#8094)

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/sJGviKxfE3Ap685cl5bj/a991f7d2-f9c6-4241-a24b-b8c01cb86af3.mov">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/sJGviKxfE3Ap685cl5bj/a991f7d2-f9c6-4241-a24b-b8c01cb86af3.mov">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/a991f7d2-f9c6-4241-a24b-b8c01cb86af3.mov">录屏2024-09-04 22.26.47.mov</video>

packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/connector.tsx

@@ -190,8 +190,7 @@ export const ConnectorSettings = () => {
     <>
       <EdgelessSnapshot
         title={t['com.affine.settings.editorSettings.edgeless.connecter']()}
-        option={['mock-option']}
+        docName="connector"
-        type="mock-type"
       />
       <SettingRow
         name={t[

packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/docs/connector.json

@@ -0,0 +1,78 @@
+{
+  "type": "page",
+  "meta": {
+    "id": "v4nxnq2Al2",
+    "title": "",
+    "createDate": 1725459565290,
+    "tags": []
+  },
+  "blocks": {
+    "type": "block",
+    "id": "eDFE5HokPO",
+    "flavour": "affine:page",
+    "version": 2,
+    "props": {
+      "title": {
+        "$blocksuite:internal:text$": true,
+        "delta": []
+      }
+    },
+    "children": [
+      {
+        "type": "block",
+        "id": "ZksVPLRI0K",
+        "flavour": "affine:surface",
+        "version": 5,
+        "props": {
+          "elements": {
+            "hdqh5vFnzj": {
+              "index": "a0",
+              "seed": 263456687,
+              "frontEndpointStyle": "None",
+              "mode": 2,
+              "rearEndpointStyle": "Arrow",
+              "rough": false,
+              "roughness": 1.4,
+              "source": {
+                "position": [196.0625, 145.84765625]
+              },
+              "stroke": "--affine-palette-line-grey",
+              "strokeStyle": "solid",
+              "strokeWidth": 2,
+              "target": {
+                "position": [418.5859375, 52.13671875]
+              },
+              "type": "connector",
+              "id": "hdqh5vFnzj"
+            }
+          }
+        },
+        "children": [
+          {
+            "type": "block",
+            "id": "TNgzGwq6Ct",
+            "flavour": "affine:frame",
+            "version": 1,
+            "props": {
+              "title": {
+                "$blocksuite:internal:text$": true,
+                "delta": [
+                  {
+                    "insert": "Frame 1"
+                  }
+                ]
+              },
+              "background": "--affine-palette-transparent",
+              "xywh": "[-13.38671875,-4.5625,739.3828125,192.51171875]",
+              "index": "a0",
+              "childElementIds": {
+                "hdqh5vFnzj": true
+              }
+            },
+            "children": []
+          }
+        ]
+      }
+    ]
+  }
+}

packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/docs/index.ts

@@ -0,0 +1,55 @@
+import { AffineSchemas } from '@blocksuite/blocks';
+import type { Doc, DocSnapshot } from '@blocksuite/store';
+import { DocCollection, Job, Schema } from '@blocksuite/store';
+
+const getCollection = (() => {
+  let collection: DocCollection | null = null;
+  return async function () {
+    if (collection) {
+      return collection;
+    }
+    const schema = new Schema();
+    schema.register(AffineSchemas);
+    collection = new DocCollection({ schema });
+    collection.meta.initialize();
+    return collection;
+  };
+})();
+
+export type DocName =
+  | 'note'
+  | 'pen'
+  | 'shape'
+  | 'text'
+  | 'connector'
+  | 'mindmap';
+
+const docMap = new Map<DocName, Promise<Doc | undefined>>();
+
+export async function getDocByName(name: DocName) {
+  const rawData: Record<DocName, any> = {
+    note: (await import('./note.json')).default,
+    pen: (await import('./pen.json')).default,
+    shape: (await import('./shape.json')).default,
+    text: (await import('./text.json')).default,
+    connector: (await import('./connector.json')).default,
+    mindmap: (await import('./mindmap.json')).default,
+  };
+  if (docMap.get(name)) {
+    return docMap.get(name);
+  }
+  const snapshot = rawData[name] as DocSnapshot;
+  const promiseDoc = initDocFromSnapshot(snapshot);
+  docMap.set(name, promiseDoc);
+  return promiseDoc;
+}
+
+async function initDocFromSnapshot(snapshot: DocSnapshot) {
+  const collection = await getCollection();
+  const job = new Job({
+    collection,
+    middlewares: [],
+  });
+
+  return await job.snapshotToDoc(snapshot);
+}

packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/docs/mindmap.json

@@ -0,0 +1,238 @@
+{
+  "type": "page",
+  "meta": {
+    "id": "0P4XpxtY1T",
+    "title": "",
+    "createDate": 1725500529462,
+    "tags": []
+  },
+  "blocks": {
+    "type": "block",
+    "id": "o_kDMq1Y2z",
+    "flavour": "affine:page",
+    "version": 2,
+    "props": {
+      "title": {
+        "$blocksuite:internal:text$": true,
+        "delta": []
+      }
+    },
+    "children": [
+      {
+        "type": "block",
+        "id": "CX3YRdnn7u",
+        "flavour": "affine:surface",
+        "version": 5,
+        "props": {
+          "elements": {
+            "uXwcJ22j4U": {
+              "index": "a1",
+              "seed": 521352102,
+              "children": {
+                "affine:surface:ymap": true,
+                "json": {
+                  "5Jk9NbvuPN": {
+                    "index": "a0"
+                  },
+                  "DqF847301v": {
+                    "index": "a0",
+                    "parent": "5Jk9NbvuPN"
+                  },
+                  "3cpFVUO7z_": {
+                    "index": "a1",
+                    "parent": "5Jk9NbvuPN"
+                  },
+                  "cq1V7jb9Nw": {
+                    "index": "a2",
+                    "parent": "5Jk9NbvuPN"
+                  }
+                }
+              },
+              "layoutType": 0,
+              "style": 1,
+              "type": "mindmap",
+              "id": "uXwcJ22j4U"
+            },
+            "5Jk9NbvuPN": {
+              "index": "a0",
+              "seed": 2040865434,
+              "color": "--affine-black",
+              "fillColor": "--affine-white",
+              "filled": true,
+              "fontFamily": "blocksuite:surface:Poppins",
+              "fontSize": 20,
+              "fontWeight": "600",
+              "maxWidth": 400,
+              "padding": [11, 22],
+              "radius": 8,
+              "rotate": 0,
+              "roughness": 1.4,
+              "shadow": {
+                "offsetX": 0,
+                "offsetY": 6,
+                "blur": 12,
+                "color": "rgba(0, 0, 0, 0.14)"
+              },
+              "shapeStyle": "General",
+              "shapeType": "rect",
+              "strokeColor": "#84CFFF",
+              "strokeStyle": "solid",
+              "strokeWidth": 4,
+              "text": {
+                "affine:surface:text": true,
+                "delta": [
+                  {
+                    "insert": "Mind Map"
+                  }
+                ]
+              },
+              "textResizing": 0,
+              "xywh": "[219.1787109375,-137.21072387695312,144.7799530029297,52]",
+              "type": "shape",
+              "id": "5Jk9NbvuPN"
+            },
+            "DqF847301v": {
+              "index": "a0",
+              "seed": 42391752,
+              "color": "--affine-black",
+              "fillColor": "--affine-white",
+              "filled": true,
+              "fontFamily": "blocksuite:surface:Poppins",
+              "fontSize": 16,
+              "fontWeight": "500",
+              "maxWidth": false,
+              "padding": [6, 22],
+              "radius": 8,
+              "rotate": 0,
+              "roughness": 1.4,
+              "shadow": {
+                "offsetX": 0,
+                "offsetY": 6,
+                "blur": 12,
+                "color": "rgba(0, 0, 0, 0.14)"
+              },
+              "shapeStyle": "General",
+              "shapeType": "rect",
+              "strokeColor": "--affine-palette-line-purple",
+              "strokeStyle": "solid",
+              "strokeWidth": 3,
+              "text": {
+                "affine:surface:text": true,
+                "delta": [
+                  {
+                    "insert": "Text"
+                  }
+                ]
+              },
+              "textResizing": 0,
+              "xywh": "[563.9586639404297,-210.21072387695312,76.83197021484375,36]",
+              "type": "shape",
+              "id": "DqF847301v"
+            },
+            "3cpFVUO7z_": {
+              "index": "a0",
+              "seed": 1821565231,
+              "color": "--affine-black",
+              "fillColor": "--affine-white",
+              "filled": true,
+              "fontFamily": "blocksuite:surface:Poppins",
+              "fontSize": 16,
+              "fontWeight": "500",
+              "maxWidth": false,
+              "padding": [6, 22],
+              "radius": 8,
+              "rotate": 0,
+              "roughness": 1.4,
+              "shadow": {
+                "offsetX": 0,
+                "offsetY": 6,
+                "blur": 12,
+                "color": "rgba(0, 0, 0, 0.14)"
+              },
+              "shapeStyle": "General",
+              "shapeType": "rect",
+              "strokeColor": "--affine-palette-line-magenta",
+              "strokeStyle": "solid",
+              "strokeWidth": 3,
+              "text": {
+                "affine:surface:text": true,
+                "delta": [
+                  {
+                    "insert": "Text"
+                  }
+                ]
+              },
+              "textResizing": 0,
+              "xywh": "[563.9586639404297,-129.21072387695312,76.83197021484375,36]",
+              "type": "shape",
+              "id": "3cpFVUO7z_"
+            },
+            "cq1V7jb9Nw": {
+              "index": "a0",
+              "seed": 1835053830,
+              "color": "--affine-black",
+              "fillColor": "--affine-white",
+              "filled": true,
+              "fontFamily": "blocksuite:surface:Poppins",
+              "fontSize": 16,
+              "fontWeight": "500",
+              "maxWidth": false,
+              "padding": [6, 22],
+              "radius": 8,
+              "rotate": 0,
+              "roughness": 1.4,
+              "shadow": {
+                "offsetX": 0,
+                "offsetY": 6,
+                "blur": 12,
+                "color": "rgba(0, 0, 0, 0.14)"
+              },
+              "shapeStyle": "General",
+              "shapeType": "rect",
+              "strokeColor": "--affine-palette-line-orange",
+              "strokeStyle": "solid",
+              "strokeWidth": 3,
+              "text": {
+                "affine:surface:text": true,
+                "delta": [
+                  {
+                    "insert": "Text"
+                  }
+                ]
+              },
+              "textResizing": 0,
+              "xywh": "[563.9586639404297,-48.210723876953125,76.83197021484375,36]",
+              "type": "shape",
+              "id": "cq1V7jb9Nw"
+            }
+          }
+        },
+        "children": [
+          {
+            "type": "block",
+            "id": "yUWjMW5rEZ",
+            "flavour": "affine:frame",
+            "version": 1,
+            "props": {
+              "title": {
+                "$blocksuite:internal:text$": true,
+                "delta": [
+                  {
+                    "insert": "Frame 1"
+                  }
+                ]
+              },
+              "background": "--affine-palette-transparent",
+              "xywh": "[138.3125,-266.609375,602.640625,321.26171875]",
+              "index": "a0",
+              "childElementIds": {
+                "uXwcJ22j4U": true
+              }
+            },
+            "children": []
+          }
+        ]
+      }
+    ]
+  }
+}

packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/docs/note.json

@@ -0,0 +1,138 @@
+{
+  "type": "page",
+  "meta": {
+    "id": "pfXt9oH_Rb",
+    "title": "Note",
+    "createDate": 1725451650158,
+    "tags": []
+  },
+  "blocks": {
+    "type": "block",
+    "id": "hNFCyKIXqH",
+    "flavour": "affine:page",
+    "version": 2,
+    "props": {
+      "title": {
+        "$blocksuite:internal:text$": true,
+        "delta": [
+          {
+            "insert": "Note"
+          }
+        ]
+      }
+    },
+    "children": [
+      {
+        "type": "block",
+        "id": "odnFJlKwxt",
+        "flavour": "affine:surface",
+        "version": 5,
+        "props": {
+          "elements": {}
+        },
+        "children": [
+          {
+            "type": "block",
+            "id": "D1UhpqzS37",
+            "flavour": "affine:frame",
+            "version": 1,
+            "props": {
+              "title": {
+                "$blocksuite:internal:text$": true,
+                "delta": [
+                  {
+                    "insert": "Frame 1"
+                  }
+                ]
+              },
+              "background": "--affine-palette-transparent",
+              "xywh": "[361.3046875,-9.600906372070312,803.04296875,291.26953125]",
+              "index": "a0",
+              "childElementIds": {
+                "C5e-RyxlTI": true
+              }
+            },
+            "children": []
+          }
+        ]
+      },
+      {
+        "type": "block",
+        "id": "C5e-RyxlTI",
+        "flavour": "affine:note",
+        "version": 1,
+        "props": {
+          "xywh": "[538.826171875,46.71159362792969,448,180]",
+          "background": "--affine-note-background-blue",
+          "index": "a3",
+          "hidden": false,
+          "displayMode": "edgeless",
+          "edgeless": {
+            "style": {
+              "borderRadius": 0,
+              "borderSize": 4,
+              "borderStyle": "none",
+              "shadowType": "--affine-note-shadow-sticker"
+            }
+          }
+        },
+        "children": [
+          {
+            "type": "block",
+            "id": "AjSEjoCq1Q",
+            "flavour": "affine:paragraph",
+            "version": 1,
+            "props": {
+              "type": "h1",
+              "text": {
+                "$blocksuite:internal:text$": true,
+                "delta": [
+                  {
+                    "insert": "Write, draw, plan all at once."
+                  }
+                ]
+              }
+            },
+            "children": []
+          },
+          {
+            "type": "block",
+            "id": "s5v28mktAO",
+            "flavour": "affine:paragraph",
+            "version": 1,
+            "props": {
+              "type": "text",
+              "text": {
+                "$blocksuite:internal:text$": true,
+                "delta": [
+                  {
+                    "insert": "AFFiNE is a workspace with fully merged docs,"
+                  }
+                ]
+              }
+            },
+            "children": []
+          },
+          {
+            "type": "block",
+            "id": "Jd9Unn0j4a",
+            "flavour": "affine:paragraph",
+            "version": 1,
+            "props": {
+              "type": "text",
+              "text": {
+                "$blocksuite:internal:text$": true,
+                "delta": [
+                  {
+                    "insert": "whiteboards and databases."
+                  }
+                ]
+              }
+            },
+            "children": []
+          }
+        ]
+      }
+    ]
+  }
+}

packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/docs/shape.json

@@ -0,0 +1,186 @@
+{
+  "type": "page",
+  "meta": {
+    "id": "H26C3mrHAO",
+    "title": "BlockSuite Playground",
+    "createDate": 1725457623442,
+    "tags": []
+  },
+  "blocks": {
+    "type": "block",
+    "id": "gMFM1yrveo",
+    "flavour": "affine:page",
+    "version": 2,
+    "props": {
+      "title": {
+        "$blocksuite:internal:text$": true,
+        "delta": [
+          {
+            "insert": "BlockSuite Playground"
+          }
+        ]
+      }
+    },
+    "children": [
+      {
+        "type": "block",
+        "id": "ICj50zYaZ-",
+        "flavour": "affine:surface",
+        "version": 5,
+        "props": {
+          "elements": {
+            "e6t9tKz8Sy": {
+              "index": "a5",
+              "seed": 338503204,
+              "color": "--affine-palette-line-black",
+              "fillColor": "--affine-palette-shape-yellow",
+              "filled": true,
+              "fontFamily": "blocksuite:surface:Inter",
+              "fontSize": 12,
+              "maxWidth": false,
+              "padding": [10, 20],
+              "radius": 0,
+              "rotate": 0,
+              "roughness": 1.4,
+              "shadow": null,
+              "shapeStyle": "General",
+              "shapeType": "ellipse",
+              "strokeColor": "--affine-palette-line-yellow",
+              "strokeStyle": "solid",
+              "strokeWidth": 2,
+              "textResizing": 1,
+              "xywh": "[-14.79056021743071,154.8369594850144,100.11936661988601,100.11932857954827]",
+              "type": "shape",
+              "id": "e6t9tKz8Sy"
+            },
+            "F8qB_zDC5Q": {
+              "index": "a6",
+              "seed": 1896265661,
+              "color": "--affine-palette-line-black",
+              "fillColor": "--affine-palette-shape-yellow",
+              "filled": true,
+              "fontFamily": "blocksuite:surface:Inter",
+              "fontSize": 12,
+              "maxWidth": false,
+              "padding": [10, 20],
+              "radius": 0.1,
+              "rotate": 0,
+              "roughness": 1.4,
+              "shadow": null,
+              "shapeStyle": "General",
+              "shapeType": "rect",
+              "strokeColor": "--affine-palette-line-yellow",
+              "strokeStyle": "solid",
+              "strokeWidth": 2,
+              "textResizing": 1,
+              "xywh": "[145.85713815180185,171.45701762455542,131.14345570418993,66.87921230046624]",
+              "type": "shape",
+              "id": "F8qB_zDC5Q"
+            },
+            "mPR44JBpcd": {
+              "index": "a7",
+              "seed": 2073974140,
+              "color": "--affine-palette-line-black",
+              "fillColor": "--affine-palette-shape-yellow",
+              "filled": true,
+              "fontFamily": "blocksuite:surface:Inter",
+              "fontSize": 12,
+              "maxWidth": false,
+              "padding": [10, 20],
+              "radius": 0,
+              "rotate": 0,
+              "roughness": 1.4,
+              "shadow": null,
+              "shapeStyle": "General",
+              "shapeType": "diamond",
+              "strokeColor": "--affine-palette-line-yellow",
+              "strokeStyle": "solid",
+              "strokeWidth": 2,
+              "textResizing": 1,
+              "xywh": "[337.5289256053383,154.8369594850144,105.1083470248982,101.65945505340866]",
+              "type": "shape",
+              "id": "mPR44JBpcd"
+            },
+            "cmtluc3FWR": {
+              "index": "a8",
+              "seed": 1457248130,
+              "color": "--affine-palette-line-black",
+              "fillColor": "--affine-palette-shape-yellow",
+              "filled": true,
+              "fontFamily": "blocksuite:surface:Inter",
+              "fontSize": 12,
+              "maxWidth": false,
+              "padding": [10, 20],
+              "radius": 0,
+              "rotate": 0,
+              "roughness": 1.4,
+              "shadow": null,
+              "shapeStyle": "General",
+              "shapeType": "triangle",
+              "strokeColor": "--affine-palette-line-yellow",
+              "strokeStyle": "solid",
+              "strokeWidth": 2,
+              "textResizing": 1,
+              "xywh": "[503.16560437958293,165.36299989942228,99.95316838431143,80.60737422459296]",
+              "type": "shape",
+              "id": "cmtluc3FWR"
+            },
+            "knt_TKvACR": {
+              "index": "a9",
+              "seed": 1896265661,
+              "color": "--affine-palette-line-black",
+              "fillColor": "--affine-palette-shape-yellow",
+              "filled": true,
+              "fontFamily": "blocksuite:surface:Inter",
+              "fontSize": 12,
+              "maxWidth": false,
+              "padding": [10, 20],
+              "radius": 0,
+              "rotate": 0,
+              "roughness": 1.4,
+              "shadow": null,
+              "shapeStyle": "General",
+              "shapeType": "rect",
+              "strokeColor": "--affine-palette-line-yellow",
+              "strokeStyle": "solid",
+              "strokeWidth": 2,
+              "textResizing": 1,
+              "xywh": "[663.6471045132407,172.22708086148566,131.14345570418993,66.87921230046624]",
+              "type": "shape",
+              "id": "knt_TKvACR"
+            }
+          }
+        },
+        "children": [
+          {
+            "type": "block",
+            "id": "GuSXhkqpUl",
+            "flavour": "affine:frame",
+            "version": 1,
+            "props": {
+              "title": {
+                "$blocksuite:internal:text$": true,
+                "delta": [
+                  {
+                    "insert": "Frame 1"
+                  }
+                ]
+              },
+              "background": "--affine-palette-transparent",
+              "xywh": "[-140.35546875000006,60.96746826171875,1079.28125,307.06640625]",
+              "index": "a0",
+              "childElementIds": {
+                "e6t9tKz8Sy": true,
+                "F8qB_zDC5Q": true,
+                "mPR44JBpcd": true,
+                "cmtluc3FWR": true,
+                "knt_TKvACR": true
+              }
+            },
+            "children": []
+          }
+        ]
+      }
+    ]
+  }
+}

packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/docs/text.json

@@ -0,0 +1,99 @@
+{
+  "type": "page",
+  "meta": {
+    "id": "VKd9Ksg2BG",
+    "title": "BlockSuite Playground",
+    "createDate": 1725454903728,
+    "tags": []
+  },
+  "blocks": {
+    "type": "block",
+    "id": "rhCCfuveZ8",
+    "flavour": "affine:page",
+    "version": 2,
+    "props": {
+      "title": {
+        "$blocksuite:internal:text$": true,
+        "delta": [
+          {
+            "insert": "BlockSuite Playground"
+          }
+        ]
+      }
+    },
+    "children": [
+      {
+        "type": "block",
+        "id": "1Gr7rOSQE0",
+        "flavour": "affine:surface",
+        "version": 5,
+        "props": {
+          "elements": {}
+        },
+        "children": [
+          {
+            "type": "block",
+            "id": "wTA9OwLHan",
+            "flavour": "affine:edgeless-text",
+            "version": 1,
+            "props": {
+              "xywh": "[272.7708206176758,163.16667556762695,245.12498474121088,56]",
+              "index": "a1",
+              "color": "--affine-palette-line-blue",
+              "fontFamily": "blocksuite:surface:Inter",
+              "fontStyle": "normal",
+              "fontWeight": "400",
+              "textAlign": "left",
+              "scale": 1,
+              "rotate": 0,
+              "hasMaxWidth": true
+            },
+            "children": [
+              {
+                "type": "block",
+                "id": "ig8oN3BQrC",
+                "flavour": "affine:paragraph",
+                "version": 1,
+                "props": {
+                  "type": "text",
+                  "text": {
+                    "$blocksuite:internal:text$": true,
+                    "delta": [
+                      {
+                        "insert": "To shape, Not to Adapt."
+                      }
+                    ]
+                  }
+                },
+                "children": []
+              }
+            ]
+          },
+          {
+            "type": "block",
+            "id": "d3qe5CuEDW",
+            "flavour": "affine:frame",
+            "version": 1,
+            "props": {
+              "title": {
+                "$blocksuite:internal:text$": true,
+                "delta": [
+                  {
+                    "insert": "Frame 1"
+                  }
+                ]
+              },
+              "background": "--affine-palette-transparent",
+              "xywh": "[207.38800048828125,138.71615600585938,328.28125,106.92578125]",
+              "index": "a0",
+              "childElementIds": {
+                "wTA9OwLHan": true
+              }
+            },
+            "children": []
+          }
+        ]
+      }
+    ]
+  }
+}

packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/mind-map.tsx

@@ -47,8 +47,8 @@ export const MindMapSettings = () => {
     <>
       <EdgelessSnapshot
         title={t['com.affine.settings.editorSettings.edgeless.mind-map']()}
-        option={['mock-option']}
+        docName="mindmap"
-        type="mock-type"
+        height={320}
       />
       <SettingRow
         name={t['com.affine.settings.editorSettings.edgeless.style']()}

packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/note.tsx

@@ -9,8 +9,10 @@ import { SettingRow } from '@affine/component/setting-components';
 import { EditorSettingService } from '@affine/core/modules/editor-settting';
 import { useI18n } from '@affine/i18n';
 import {
+  createEnumMap,
   NoteBackgroundColor,
   NoteShadow,
+  NoteShadowMap,
   StrokeStyle,
 } from '@blocksuite/blocks';
 import { useFramework, useLiveData } from '@toeverything/infra';
@@ -21,12 +23,22 @@ import { menuTrigger, settingWrapper } from '../style.css';
 import { Point } from './point';
 import { EdgelessSnapshot } from './snapshot';
 
+enum CornerSize {
+  None = 0,
+  Small = 8,
+  Medium = 16,
+  Large = 24,
+  Huge = 32,
+}
+
+const CornerSizeMap = createEnumMap(CornerSize);
+
 const CORNER_SIZE = [
-  { name: 'None', value: 0 },
+  { name: 'None', value: CornerSize.None },
-  { name: 'Small', value: 8 },
+  { name: 'Small', value: CornerSize.Small },
-  { name: 'Medium', value: 16 },
+  { name: 'Medium', value: CornerSize.Medium },
-  { name: 'Large', value: 24 },
+  { name: 'Large', value: CornerSize.Large },
-  { name: 'Huge', value: 32 },
+  { name: 'Huge', value: CornerSize.Huge },
 ] as const;
 
 export const NoteSettings = () => {
@@ -157,8 +169,7 @@ export const NoteSettings = () => {
     <>
       <EdgelessSnapshot
         title={t['com.affine.settings.editorSettings.edgeless.note']()}
-        option={['mock-option']}
+        docName="note"
-        type="mock-type"
       />
       <SettingRow
         name={t[
@@ -188,7 +199,12 @@ export const NoteSettings = () => {
           items={cornerItems}
           trigger={
             <MenuTrigger className={menuTrigger}>
-              {String(settings['affine:note'].edgeless.style.borderRadius)}
+              {
+                CornerSizeMap[
+                  settings['affine:note'].edgeless.style
+                    .borderRadius as CornerSize
+                ]
+              }
             </MenuTrigger>
           }
         />
@@ -201,7 +217,7 @@ export const NoteSettings = () => {
           items={shadowItems}
           trigger={
             <MenuTrigger className={menuTrigger}>
-              {String(settings['affine:note'].edgeless.style.shadowType)}
+              {NoteShadowMap[settings['affine:note'].edgeless.style.shadowType]}
             </MenuTrigger>
           }
         />

packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/pen.tsx

@@ -44,8 +44,7 @@ export const PenSettings = () => {
     <>
       <EdgelessSnapshot
         title={t['com.affine.settings.editorSettings.edgeless.pen']()}
-        option={['mock-option']}
+        docName="pen"
-        type="mock-type"
       />
       <SettingRow
         name={t['com.affine.settings.editorSettings.edgeless.pen.color']()}

packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/shape.tsx

@@ -131,8 +131,7 @@ export const ShapeSettings = () => {
     <>
       <EdgelessSnapshot
         title={t['com.affine.settings.editorSettings.edgeless.shape']()}
-        option={['mock-option']}
+        docName="shape"
-        type="mock-type"
       />
 
       <RadioGroup

packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/snapshot.tsx

@@ -1,24 +1,80 @@
-import { snapshot, snapshotContainer, snapshotTitle } from '../style.css';
+import { BlockStdScope } from '@blocksuite/block-std';
+import type { EdgelessRootService, FrameBlockModel } from '@blocksuite/blocks';
+import { SpecProvider } from '@blocksuite/blocks';
+import { Bound } from '@blocksuite/global/utils';
+import type { Doc } from '@blocksuite/store';
+import { useCallback, useEffect, useRef } from 'react';
 
-export const EdgelessSnapshot = ({
+import { snapshotContainer, snapshotTitle } from '../style.css';
-  title,
+import { type DocName, getDocByName } from './docs';
-  option,
+
-  type,
+interface Props {
-}: {
   title: string;
-  option: string[];
+  docName: DocName;
-  type: string;
+  height?: number;
-}) => {
+}
+
+function getFrameBlock(doc: Doc) {
+  const blocks = doc.getBlocksByFlavour('affine:frame');
+  return blocks.length !== 0 ? (blocks[0].model as FrameBlockModel) : null;
+}
+
+const boundMap = new Map<DocName, Bound>();
+
+export const EdgelessSnapshot = (props: Props) => {
+  const { title, docName, height = 180 } = props;
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+  const renderEditor = useCallback(async () => {
+    if (!wrapperRef.current) return;
+    const doc = await getDocByName(docName);
+    if (!doc) return;
+
+    const editorHost = new BlockStdScope({
+      doc,
+      extensions: SpecProvider.getInstance().getSpec('edgeless:preview').value,
+    }).render();
+
+    const edgelessService = editorHost.std.getService(
+      'affine:page'
+    ) as EdgelessRootService;
+
+    // refresh viewport
+    edgelessService.specSlots.viewConnected.once(({ component }) => {
+      const edgelessBlock = component as any;
+      edgelessBlock.editorViewportSelector = 'ref-viewport';
+      edgelessBlock.service.viewport.sizeUpdated.once(() => {
+        const frame = getFrameBlock(doc);
+        if (frame) {
+          boundMap.set(docName, Bound.deserialize(frame.xywh));
+          doc.deleteBlock(frame);
+        }
+        const bound = boundMap.get(docName);
+        bound && edgelessService.viewport.setViewportByBound(bound);
+      });
+    });
+
+    wrapperRef.current.append(editorHost);
+  }, [docName]);
+
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    renderEditor();
+  }, [renderEditor]);
+
   return (
     <div className={snapshotContainer}>
       <div className={snapshotTitle}>{title}</div>
       <div
-        className={snapshot}
+        ref={wrapperRef}
-        data-editor-option={option}
+        style={{
-        data-editor-type={type}
+          position: 'relative',
-      >
+          pointerEvents: 'none',
-        Mock Preview
+          userSelect: 'none',
-      </div>
+          overflow: 'hidden',
+          height,
+        }}
+      ></div>
     </div>
   );
 };

packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/text.tsx

@@ -12,6 +12,7 @@ import {
   FontFamilyMap,
   FontStyle,
   FontWeight,
+  FontWeightMap,
   LineColor,
   TextAlign,
 } from '@blocksuite/blocks';
@@ -139,8 +140,7 @@ export const TextSettings = () => {
     <>
       <EdgelessSnapshot
         title={t['com.affine.settings.editorSettings.edgeless.text']()}
-        option={['mock-option']}
+        docName="text"
-        type="mock-type"
       />
       <SettingRow
         name={t['com.affine.settings.editorSettings.edgeless.text.color']()}
@@ -200,7 +200,7 @@ export const TextSettings = () => {
           items={fontWeightItems}
           trigger={
             <MenuTrigger className={menuTrigger}>
-              {settings['affine:edgeless-text'].fontWeight}
+              {FontWeightMap[settings['affine:edgeless-text'].fontWeight]}
             </MenuTrigger>
           }
         />