adds export to vscode extension (#608)

apps/vscode/editor/src/app.tsx

@@ -4,6 +4,7 @@ import { Tldraw, TldrawApp, TDFile, TDDocument } from '@tldraw/tldraw'
 import { vscode } from './utils/vscode'
 import { defaultDocument } from './utils/defaultDocument'
 import type { MessageFromExtension, MessageFromWebview } from './types'
+import { exportToImage } from 'utils/export'
 
 // Will be placed in global scope by extension
 declare let currentFile: TDFile
@@ -60,6 +61,7 @@ export default function App(): JSX.Element {
         document={rInitialDocument.current}
         onMount={handleMount}
         onPersist={handlePersist}
+        onExport={exportToImage}
         autofocus
       />
     </div>

apps/vscode/editor/src/utils/export.ts

@@ -0,0 +1,29 @@
+import { TDExport } from '@tldraw/tldraw'
+
+export const EXPORT_ENDPOINT =
+  process.env.NODE_ENV === 'development'
+    ? 'http://localhost:3000/api/export'
+    : 'https://www.tldraw.com/api/export'
+
+export async function exportToImage(info: TDExport) {
+  if (info.serialized) {
+    const link = document.createElement('a')
+    link.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(info.serialized)
+    link.download = info.name + '.' + info.type
+    link.click()
+
+    return
+  }
+
+  const response = await fetch(EXPORT_ENDPOINT, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(info),
+  })
+  const blob = await response.blob()
+  const blobUrl = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = blobUrl
+  link.download = info.name + '.' + info.type
+  link.click()
+}