Basic model working out minus arrows. Now to fix and get up

src/embed.ts

@@ -1,29 +1,29 @@
-import { s } from "hastscript";
-import { Element } from "hast";
+import type { Element } from "hast"
+import { s } from "hastscript"
 
-import { fromMarkdown } from "mdast-util-from-markdown";
-import { toHast } from "mdast-util-to-hast";
+import { fromMarkdown } from "mdast-util-from-markdown"
+import { toHast } from "mdast-util-to-hast"
 
-import { GenericNode } from "@trbn/jsoncanvas";
+import type { GenericNode } from "@trbn/jsoncanvas"
 // import { applyDefaults, Options } from "./options";
-import { getCanvasFromEmbed } from "./plugin";
+import { getCanvasFromEmbed } from "./plugin"
 
-const imagesLoaded = [] as Array<any>;
+const imagesLoaded = [] as Array<any>
 
 export function checkImagesLoaded(callback: Function) {
-  let allLoaded = imagesLoaded.every((el) => el.complete);
-  console.group("Images loading", imagesLoaded, allLoaded);
-  if (imagesLoaded.length < 1) return callback();
+  const allLoaded = imagesLoaded.every((el) => el.complete)
+  console.group("Images loading", imagesLoaded, allLoaded)
+  if (imagesLoaded.length < 1) return callback()
   //   return callback();
-  if (allLoaded) callback();
-  else checkImagesLoaded(callback);
+  if (allLoaded) callback()
+  else checkImagesLoaded(callback)
 }
 
 // This renders out the images
 export async function drawEmbedded(
   svg: Element,
   grp: Element,
-  node: GenericNode | any
+  node: GenericNode | any,
 ) {
   if (node.type === "file" && svg) {
     if (node.file.match(/\.(jpg|jpeg|png|gif)$/i)) {
@@ -33,9 +33,9 @@ export async function drawEmbedded(
         width: node.width - 10,
         height: node.height - 10,
         "xlink:href": node.file,
-      });
+      })
 
-      grp.children.push(image);
+      grp.children.push(image)
     }
   }
 }
@@ -44,25 +44,25 @@ export async function drawEmbedded(
 export async function drawMarkdownEmbed(
   svg: Element,
   grp: Element,
-  node: GenericNode | any
+  node: GenericNode | any,
 ) {
   if (node.type === "file" && svg) {
     if (node.file.match(/\.(md|mdx)$/i)) {
-      const mdFile = await getCanvasFromEmbed(node.file);
+      const mdFile = await getCanvasFromEmbed(node.file)
 
-      const mdast = fromMarkdown(mdFile);
-      const hast = toHast(mdast);
+      const mdast = fromMarkdown(mdFile)
+      const hast = toHast(mdast)
 
       // Ref: https://stackoverflow.com/questions/45518545/svg-foreignobject-not-showing-on-any-browser-why
       const embed = s("foreignObject", {
         x: 5 + node.x + <number>svg.properties!.renWidth / 2,
         y: 5 + node.y + <number>svg.properties!.renHeight / 2,
         width: node.width - 10,
         height: node.height - 10,
-      });
-      embed.children.push(hast as Element); // If this breaks, this is probably the spot it breaks
+      })
+      embed.children.push(hast as Element) // If this breaks, this is probably the spot it breaks
 
-      grp.children.push(embed);
+      grp.children.push(embed)
     }
   }
 }

src/index.ts

@@ -1,9 +1,9 @@
-import { rehypeJsonCanvas } from "./plugin";
+import { rehypeJsonCanvas } from "./plugin"
 
-export type { Options } from "./options";
+export type { Options } from "./options"
 
-export { rehypeJsonCanvas };
-export default rehypeJsonCanvas;
+export { rehypeJsonCanvas }
+export default rehypeJsonCanvas
 
 // CommonJS default export hack
 /* eslint-env commonjs */