add figma embedding

Author: softmarshmallow

editor/components/canvas/figma-embed-canvas.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+export function FigmaEmbedCanvas(props: { url?: string }) {
+  if (props.url) {
+    /**
+     * build embedding url. - https://www.figma.com/developers/embed
+     */
+    const _embed_url = `https://www.figma.com/embed?embed_host=astra&url=${props.url}`;
+    return <iframe width={300} height={600} src={_embed_url} />;
+  }
+  return <>NO FIGMA URL PROVIDED</>;
+}

editor/components/canvas/index.ts

@@ -1 +1,2 @@
 export * from "./default-canvas";
+export * from "./figma-embed-canvas";

editor/components/figma/screen-importer.tsx

@@ -42,7 +42,10 @@ async function fetchDemo() {
   return demoEntryNode.document;
 }
 
-export function FigmaScreenImporter(props: { onImported: OnImportedCallback }) {
+export function FigmaScreenImporter(props: {
+  onImported: OnImportedCallback;
+  onUrlEnter?: (url: string) => void;
+}) {
   const [reflect, setReflect] = useState<nodes.ReflectSceneNode>();
 
   const handleLocalDataLoad = (d: remote.types.Node) => {
@@ -71,7 +74,10 @@ export function FigmaScreenImporter(props: { onImported: OnImportedCallback }) {
       ) : (
         <>
           <_DefaultImporterSegment onLoaded={handleLocalDataLoad} />
-          <_UrlImporterSegment onLoaded={handleLocalDataLoad} />
+          <_UrlImporterSegment
+            onLoaded={handleLocalDataLoad}
+            onUrlEnter={props.onUrlEnter}
+          />
         </>
       )}
     </>
@@ -99,12 +105,16 @@ function _DefaultImporterSegment(props: { onLoaded: _OnRemoteLoadedCallback }) {
 
 const _FIGMA_FILE_URL_IMPORT_INPUT_CACHE_KEY =
   "_FIGMA_FILE_URL_IMPORT_INPUT_CACHE_KEY";
-function _UrlImporterSegment(props: { onLoaded: _OnRemoteLoadedCallback }) {
+function _UrlImporterSegment(props: {
+  onLoaded: _OnRemoteLoadedCallback;
+  onUrlEnter?: (url: string) => void;
+}) {
   let urlInput: string = UserInputCache.load(
     _FIGMA_FILE_URL_IMPORT_INPUT_CACHE_KEY
   );
 
   const handleEnter = () => {
+    props.onUrlEnter?.(urlInput);
     UserInputCache.set(_FIGMA_FILE_URL_IMPORT_INPUT_CACHE_KEY, urlInput);
     const q = utils.figmaApi.parseFileAndNodeIdFromUrl_Figma(urlInput);
     fetchTarget(q.file, q.node).then((d) => {

editor/pages/_development/figma/to-reflect.tsx

@@ -1,20 +1,28 @@
 import React, { useState } from "react";
-import { figmacomp, canvas, runner } from "../../../components";
+import { figmacomp, canvas } from "../../../components";
 import { ReflectSceneNode } from "@design-sdk/core/nodes";
 import JSONTree from "react-json-tree";
 
 export default function FigmaToReflectNodePage() {
   const [reflect, setReflect] = useState<ReflectSceneNode>();
+  const [figmaNodeUrl, setFigmaNodeUrl] = useState<string>();
 
   const handleOnDesignImported = (reflect: ReflectSceneNode) => {
     setReflect(reflect);
   };
 
+  const handleFigmaUrlEnter = (url: string) => {
+    setFigmaNodeUrl(url);
+  };
+
   return (
     <>
-      <canvas.DefaultCanvas />
-      <figmacomp.FigmaScreenImporter onImported={handleOnDesignImported} />
-      <JSONTree data={reflect} />
+      <canvas.FigmaEmbedCanvas url={figmaNodeUrl} />
+      <figmacomp.FigmaScreenImporter
+        onImported={handleOnDesignImported}
+        onUrlEnter={handleFigmaUrlEnter}
+      />
+      <JSONTree hideRoot data={reflect} />
     </>
   );
 }