Function JSONCanvasShare

app/src/components/ShareDialog.tsx:639–676

()

}

function JSONCanvasShare() {
  const title = useDocDetails("title", "flowchart.fun");

  return (
    <div className="grid gap-2">
      <p className="leading-normal">
        <Trans>
          JSON Canvas is a JSON representation of your diagram used by{" "}
          <a
            href="https://obsidian.md/"
            target="_blank"
            className="text-blue-500 dark:text-blue-300 font-bold"
          >
            Obsidian
          </a>{" "}
          Canvas and other applications.
        </Trans>
      </p>
      <Button2
        color="blue"
        data-session-activity="Download JSON Canvas"
        onClick={() => {
          if (!window.__cy) return;
          const jsonCanvas = toJSONCanvas(window.__cy);
          const blob = new Blob([JSON.stringify(jsonCanvas, null, 2)], {
            type: "text/plain;charset=utf-8",
          });
          saveAs(blob, `${slugify(title)}.canvas`);
        }}
        className="w-full text-left text-neutral-500 dark:text-neutral-400 p-2 rounded border border-neutral-300 dark:border-neutral-700"
        aria-label="Copy JSON Canvas"
        leftIcon={<DownloadSimple size={16} />}
      >
        Download JSON Canvas
      </Button2>
    </div>
  );
}