fix(editor): add childElementIds to ai generated frame (#9537)

Close [BS-1354](https://linear.app/affine-design/issue/BS-1354/更新-ai-slide-template-到新的-frame)

This PR add `childElementIds` to frame block in ai presentation templates

blocksuite/blocks/src/root-block/edgeless/services/template-middlewares.ts

@@ -110,6 +110,16 @@ export const replaceIdMiddleware = (job: TemplateJob) => {
 
       blockJson.props.elements = elements;
     }
+
+    // remap childElementIds of frame
+    if (blockJson.flavour === 'affine:frame') {
+      assertType<Record<string, boolean>>(blockJson.props.childElementIds);
+      const newChildElementIds: Record<string, boolean> = {};
+      Object.entries(blockJson.props.childElementIds).forEach(([key, val]) => {
+        newChildElementIds[regeneratedIdMap.get(key) ?? key] = val;
+      });
+      blockJson.props.childElementIds = newChildElementIds;
+    }
   };
 };
 

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

@@ -23,7 +23,11 @@ import type * as Y from 'yjs';
  * Those block contains other block's id
  * should defer the loading
  */
-const DEFERED_BLOCK = ['affine:surface', 'affine:surface-ref'] as const;
+const DEFERED_BLOCK = [
+  'affine:surface',
+  'affine:surface-ref',
+  'affine:frame',
+] as const;
 
 /**
  * Those block should not be inserted directly

packages/frontend/core/src/blocksuite/presets/ai/slides/templates/cover.json

@@ -85,7 +85,11 @@
                 },
                 "background": "--affine-palette-transparent",
                 "xywh": "[-340.7451171875,-395.744140625,2000,1160]",
-                "index": "a0"
+                "index": "Zz",
+                "childElementIds": {
+                  "DcoFASHQKI": true,
+                  "Rb6xTvGyzU": true
+                }
               },
               "children": []
             }

packages/frontend/core/src/blocksuite/presets/ai/slides/templates/four.json

@@ -185,7 +185,23 @@
                 },
                 "background": "--affine-palette-transparent",
                 "xywh": "[-2101.800074986049,1.1999424525670292,1933.7142508370534,1095.9999738420759]",
-                "index": "a0"
+                "index": "Zz",
+                "childElementIds": {
+                  "dvNokXHFjJ": true,
+                  "pjLp5iRHj1": true,
+                  "vrH9SvPlB6": true,
+                  "UF3qaMw35x": true,
+                  "TJhFxmm-4S": true,
+                  "lLFwOmRC7W": true,
+                  "FL__cfBte4": true,
+                  "SplfMbP19A": true,
+                  "hkkjrzh5U2": true,
+                  "CZkdeTlqzf": true,
+                  "dCmC6nD4oM": true,
+                  "GbdYivh7V_": true,
+                  "heDlgO5-AP": true,
+                  "aTPSWy7isi": true
+                }
               },
               "children": []
             }
@@ -655,8 +671,24 @@
                   ]
                 },
                 "background": "--affine-palette-transparent",
-                "index": "a2",
+                "index": "Zz",
-                "xywh": "[-1509.6661094585195,-2898.612292265666,1960.6362584319918,1087.2819474283258]"
+                "xywh": "[-1509.6661094585195,-2898.612292265666,1960.6362584319918,1087.2819474283258]",
+                "childElementIds": {
+                  "TJhFxmm-4S": true,
+                  "2Y9Hkx2NH_": true,
+                  "wfAA7nMj9S": true,
+                  "v0kbq9Ge2L": true,
+                  "U0VKdP1QXx": true,
+                  "vep0c6lfir": true,
+                  "sm_bXJ4OIr": true,
+                  "-e1FBf1VVV": true,
+                  "SWuXaO4zVD": true,
+                  "dUtL3CwWVp": true,
+                  "LUjOSttIUe": true,
+                  "SgzW7o7hMY": true,
+                  "3yZ-tCMJ5n": true,
+                  "KK8h_OiRqv": true
+                }
               },
               "children": []
             },

packages/frontend/core/src/blocksuite/presets/ai/slides/templates/one.json

@@ -69,7 +69,14 @@
                 },
                 "background": "--affine-palette-transparent",
                 "xywh": "[-1514.2376426616445,-2905.469439482463,1879.6362584319918,1087.2819474283258]",
-                "index": "a2"
+                "index": "Zz",
+                "childElementIds": {
+                  "TJhFxmm-4S": true,
+                  "Kl_nXMFhVd": true,
+                  "vep0c6lfir": true,
+                  "sm_bXJ4OIr": true,
+                  "CXWd92w-Qi": true
+                }
               },
               "children": []
             },
@@ -293,7 +300,14 @@
                 },
                 "background": "--affine-palette-transparent",
                 "xywh": "[-1514.2376426616445,-2905.469439482463,1879.6362584319918,1087.2819474283258]",
-                "index": "a2"
+                "index": "Zz",
+                "childElementIds": {
+                  "TJhFxmm-4S": true,
+                  "Kl_nXMFhVb": true,
+                  "vep0c6lfir": true,
+                  "sm_bXJ4OIr": true,
+                  "CXWd92w-Qi": true
+                }
               },
               "children": []
             },
@@ -517,7 +531,14 @@
                 },
                 "background": "--affine-palette-transparent",
                 "xywh": "[-1514.2376426616445,-2905.469439482463,1879.6362584319918,1087.2819474283258]",
-                "index": "a2"
+                "index": "Zz",
+                "childElementIds": {
+                  "TJhFxmm-4S": true,
+                  "Kl_nXMFhVc": true,
+                  "vep0c6lfir": true,
+                  "sm_bXJ4OIr": true,
+                  "CXWd92w-Qi": true
+                }
               },
               "children": []
             },
@@ -740,8 +761,15 @@
                   ]
                 },
                 "background": "--affine-palette-transparent",
-                "index": "a2",
+                "index": "Zz",
-                "xywh": "[-1514.2376426616445,-2905.469439482463,1879.6362584319918,1087.2819474283258]"
+                "xywh": "[-1514.2376426616445,-2905.469439482463,1879.6362584319918,1087.2819474283258]",
+                "childElementIds": {
+                  "TJhFxmm-4S": true,
+                  "Kl_nXMFhVa": true,
+                  "vep0c6lfir": true,
+                  "sm_bXJ4OIr": true,
+                  "-e1FBf1VVV": true
+                }
               },
               "children": []
             },
@@ -965,7 +993,15 @@
                 },
                 "background": "--affine-palette-transparent",
                 "xywh": "[-2101.800074986049,1.1999424525670292,1933.7142508370534,1095.9999738420759]",
-                "index": "a0"
+                "index": "Zz",
+                "childElementIds": {
+                  "TJhFxmm-4S": true,
+                  "SphbFXlgh0": true,
+                  "_Tf8693XKA": true,
+                  "UNpbRMah1C": true,
+                  "aWw5W79SOg": true,
+                  "5zMsJG3EQa": true
+                }
               },
               "children": []
             },
@@ -1179,7 +1215,15 @@
                 },
                 "background": "--affine-palette-transparent",
                 "xywh": "[-2101.800074986049,1.1999424525670292,1933.7142508370534,1095.9999738420759]",
-                "index": "a0"
+                "index": "Zz",
+                "childElementIds": {
+                  "TJhFxmm-4S": true,
+                  "NLvbZwU4PA": true,
+                  "HZB7i-Ju4k": true,
+                  "UNpbRMah1C": true,
+                  "aWw5W79SOg": true,
+                  "5zMsJG3EQa": true
+                }
               },
               "children": []
             },
@@ -1393,7 +1437,15 @@
                 },
                 "background": "--affine-palette-transparent",
                 "xywh": "[-2101.800074986049,1.1999424525670292,1933.7142508370534,1095.9999738420759]",
-                "index": "a0"
+                "index": "Zz",
+                "childElementIds": {
+                  "TJhFxmm-4S": true,
+                  "FJGkatSaly": true,
+                  "8PC-diRv-2": true,
+                  "6MPeRodrBk": true,
+                  "lLFwOmRC7W": true,
+                  "CZkdeTlqzf": true
+                }
               },
               "children": []
             },

packages/frontend/core/src/blocksuite/presets/ai/slides/templates/three.json

@@ -155,7 +155,21 @@
                 },
                 "background": "--affine-palette-transparent",
                 "index": "a2",
-                "xywh": "[-1514.2376426616445,-2905.469439482463,1879.6362584319918,1087.2819474283258]"
+                "xywh": "[-1514.2376426616445,-2905.469439482463,1879.6362584319918,1087.2819474283258]",
+                "childElementIds": {
+                  "DjqtK4cIvA": true,
+                  "lKm7_gD7iU": true,
+                  "AV7GyFSjSC": true,
+                  "TJhFxmm-4S": true,
+                  "25om7PUFbo": true,
+                  "vep0c6lfir": true,
+                  "sm_bXJ4OIr": true,
+                  "-e1FBf1VVV": true,
+                  "UR7y5DUg6J": true,
+                  "jBhX1Rxtg_": true,
+                  "YVjRYKRUu5": true,
+                  "aLe21NECWh": true
+                }
               },
               "children": []
             },
@@ -644,8 +658,22 @@
                   ]
                 },
                 "background": "--affine-palette-transparent",
-                "index": "a2",
+                "index": "Zz",
-                "xywh": "[-1514.2376426616445,-2905.469439482463,1879.6362584319918,1087.2819474283258]"
+                "xywh": "[-1514.2376426616445,-2905.469439482463,1879.6362584319918,1087.2819474283258]",
+                "childElementIds": {
+                  "DjqtK4cIvA": true,
+                  "lKm7_gD7iU": true,
+                  "AV7GyFSjSC": true,
+                  "TJhFxmm-4S": true,
+                  "25om7PUFbo": true,
+                  "vep0c6lfir": true,
+                  "sm_bXJ4OIr": true,
+                  "-e1FBf1VVV": true,
+                  "UR7y5DUg6J": true,
+                  "jBhX1Rxtg_": true,
+                  "YVjRYKRUu5": true,
+                  "aLe21NECWh": true
+                }
               },
               "children": []
             },
@@ -1044,8 +1072,21 @@
                   ]
                 },
                 "background": "--affine-palette-transparent",
-                "index": "a2",
+                "index": "Zz",
-                "xywh": "[-1514.2376426616445,-2905.469439482463,1879.6362584319918,1087.2819474283258]"
+                "xywh": "[-1514.2376426616445,-2905.469439482463,1879.6362584319918,1087.2819474283258]",
+                "childElementIds": {
+                  "TJhFxmm-4S": true,
+                  "jHwkvWX2SP": true,
+                  "lys4Z03uxm": true,
+                  "9cUOfpMZKC": true,
+                  "vep0c6lfir": true,
+                  "sm_bXJ4OIr": true,
+                  "-e1FBf1VVV": true,
+                  "UR7y5DUg6J": true,
+                  "jBhX1Rxtg_": true,
+                  "cEIG52fU4j": true,
+                  "oq8oMI8d-n": true
+                }
               },
               "children": []
             },
@@ -1568,8 +1609,21 @@
                   ]
                 },
                 "background": "--affine-palette-transparent",
-                "index": "a2",
+                "index": "Zz",
-                "xywh": "[-1514.2376426616445,-2905.469439482463,1879.6362584319918,1087.2819474283258]"
+                "xywh": "[-1514.2376426616445,-2905.469439482463,1879.6362584319918,1087.2819474283258]",
+                "childElementIds": {
+                  "-Z2wOyOCUl": true,
+                  "LdVe2K2EQN": true,
+                  "Vssc32X8gW": true,
+                  "TJhFxmm-4S": true,
+                  "vep0c6lfir": true,
+                  "sm_bXJ4OIr": true,
+                  "-e1FBf1VVV": true,
+                  "UR7y5DUg6J": true,
+                  "jBhX1Rxtg_": true,
+                  "cEIG52fU4j": true,
+                  "oq8oMI8d-n": true
+                }
               },
               "children": []
             }
@@ -2041,8 +2095,22 @@
                   ]
                 },
                 "background": "--affine-palette-transparent",
-                "index": "a2",
+                "index": "Zz",
-                "xywh": "[-1514.2376426616445,-2905.469439482463,1879.6362584319918,1087.2819474283258]"
+                "xywh": "[-1514.2376426616445,-2905.469439482463,1879.6362584319918,1087.2819474283258]",
+                "childElementIds": {
+                  "-Z2wOyOCUl": true,
+                  "Fmo2Tcj8Fl": true,
+                  "bDXVat8dj4": true,
+                  "TJhFxmm-4S": true,
+                  "u4QIphd0DC": true,
+                  "vep0c6lfir": true,
+                  "sm_bXJ4OIr": true,
+                  "-e1FBf1VVV": true,
+                  "zYl5jpauG1": true,
+                  "w6VD-syBgm": true,
+                  "jN9kkO5zW0": true,
+                  "8ezRSvK27E": true
+                }
               },
               "children": []
             },
@@ -2531,8 +2599,22 @@
                   ]
                 },
                 "background": "--affine-palette-transparent",
-                "index": "a2",
+                "index": "Zz",
-                "xywh": "[-1509.6661094585195,-2898.612292265666,1879.6362584319918,1087.2819474283258]"
+                "xywh": "[-1509.6661094585195,-2898.612292265666,1879.6362584319918,1087.2819474283258]",
+                "childElementIds": {
+                  "-Z2wOyOCUl": true,
+                  "akLeN9eL3Z": true,
+                  "oNyyPV1iJg": true,
+                  "TJhFxmm-4S": true,
+                  "u4QIphd0DC": true,
+                  "vep0c6lfir": true,
+                  "sm_bXJ4OIr": true,
+                  "-e1FBf1VVV": true,
+                  "wkyVSsZhvb": true,
+                  "o27HkMC_--": true,
+                  "VJ0XDj4Fpr": true,
+                  "SnAzf_Dy6D": true
+                }
               },
               "children": []
             },
@@ -3044,7 +3126,20 @@
                 },
                 "background": "--affine-palette-transparent",
                 "xywh": "[-2101.800074986049,1.1999424525670292,1933.7142508370534,1095.9999738420759]",
-                "index": "a0"
+                "index": "Zz",
+                "childElementIds": {
+                  "UVupGyyZN1": true,
+                  "NJxtDRr8Wz": true,
+                  "Og7Aa0FT4P": true,
+                  "xurVVzewkV": true,
+                  "TJhFxmm-4S": true,
+                  "aWw5W79SOg": true,
+                  "5zMsJG3EQa": true,
+                  "acZgwhfCWY": true,
+                  "YeHO9NCElw": true,
+                  "BHC3GyNAdu": true,
+                  "I82USJCVZw": true
+                }
               },
               "children": []
             }
@@ -3473,7 +3568,22 @@
                 },
                 "background": "--affine-palette-transparent",
                 "xywh": "[-2101.800074986049,1.1999424525670292,1933.7142508370534,1095.9999738420759]",
-                "index": "a0"
+                "index": "Zz",
+                "childElementIds": {
+                  "NJxtDRr8Wz": true,
+                  "Lu4iLMmzDn": true,
+                  "TOtG2mlRAJ": true,
+                  "TJhFxmm-4S": true,
+                  "UBMo_osmTh": true,
+                  "NLvbZwU4PA": true,
+                  "-PNfQ_u1PE": true,
+                  "aWw5W79SOg": true,
+                  "5zMsJG3EQa": true,
+                  "S53e3TYzsE": true,
+                  "A-DYYZeyH3": true,
+                  "u2tLVHn1OH": true,
+                  "h65JXM7SYI": true
+                }
               },
               "children": []
             },

packages/frontend/core/src/blocksuite/presets/ai/slides/templates/two.json

@@ -65,7 +65,15 @@
                 },
                 "background": "--affine-palette-transparent",
                 "xywh": "[-509.7051213118268,-469.55707155770506,1924.0508676236536,1089.1141431154101]",
-                "index": "a0"
+                "index": "a0",
+                "childElementIds": {
+                  "TJhFxmm-4S": true,
+                  "9t3Ah0wozZ": true,
+                  "LzI7P4hb4X": true,
+                  "aHToM_8I3t": true,
+                  "mZBqMOupoM": true,
+                  "DPQCANC2uz": true
+                }
               },
               "children": []
             }