feat: support appState.exportEmbedScene to embed scene data in exportToSvg util (#3777)

* feat: add embedScene attribute to exportToSvg util

* fix

* return promise

* add docs and remove

* fix

* fix tests

* use

* fix

* fix

* remove metadata and use exportEmbedScene

* fix

* fix

* fix

* fix

* IIFE

src/components/LibraryUnit.tsx

@@ -36,21 +36,27 @@ export const LibraryUnit = ({
     if (!elementsToRender) {
       return;
     }
-    const svg = exportToSvg(elementsToRender, {
-      exportBackground: false,
-      viewBackgroundColor: oc.white,
-    });
-    for (const child of ref.current!.children) {
-      if (child.tagName !== "svg") {
-        continue;
-      }
-      ref.current!.removeChild(child);
-    }
-    ref.current!.appendChild(svg);
-
+    let svg: SVGSVGElement;
     const current = ref.current!;
+
+    (async () => {
+      svg = await exportToSvg(elementsToRender, {
+        exportBackground: false,
+        viewBackgroundColor: oc.white,
+      });
+      for (const child of ref.current!.children) {
+        if (child.tagName !== "svg") {
+          continue;
+        }
+        current!.removeChild(child);
+      }
+      current!.appendChild(svg);
+    })();
+
     return () => {
-      current.removeChild(svg);
+      if (svg) {
+        current.removeChild(svg);
+      }
     };
   }, [elements, pendingElements]);
 

src/components/PasteChartDialog.tsx

@@ -34,19 +34,21 @@ const ChartPreviewBtn = (props: {
       0,
     );
     setChartElements(elements);
-
-    const svg = exportToSvg(elements, {
-      exportBackground: false,
-      viewBackgroundColor: oc.white,
-    });
-
+    let svg: SVGSVGElement;
     const previewNode = previewRef.current!;
 
-    previewNode.appendChild(svg);
+    (async () => {
+      svg = await exportToSvg(elements, {
+        exportBackground: false,
+        viewBackgroundColor: oc.white,
+      });
 
-    if (props.selected) {
-      (previewNode.parentNode as HTMLDivElement).focus();
-    }
+      previewNode.appendChild(svg);
+
+      if (props.selected) {
+        (previewNode.parentNode as HTMLDivElement).focus();
+      }
+    })();
 
     return () => {
       previewNode.removeChild(svg);