Adding download JSON button (#85)

usewaypoint · Apr 15, 2024 · 1aca411 · 1aca411
1 parent de615c7
commit 1aca411
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/packages/editor-sample/src/App/TemplatePanel/DownloadJson/index.tsx b/packages/editor-sample/src/App/TemplatePanel/DownloadJson/index.tsx
@@ -0,0 +1,20 @@
+import React, { useMemo } from 'react';
+
+import { FileDownloadOutlined } from '@mui/icons-material';
+import { IconButton, Tooltip } from '@mui/material';
+
+import { useDocument } from '../../../documents/editor/EditorContext';
+
+export default function DownloadJson() {
+  const doc = useDocument();
+  const href = useMemo(() => {
+    return `data:text/plain,${encodeURIComponent(JSON.stringify(doc, null, '  '))}`;
+  }, [doc]);
+  return (
+    <Tooltip title="Download JSON file">
+      <IconButton href={href} download="emailTemplate.json">
+        <FileDownloadOutlined fontSize="small" />
+      </IconButton>
+    </Tooltip>
+  );
+}
diff --git a/packages/editor-sample/src/App/TemplatePanel/ImportJson/index.tsx b/packages/editor-sample/src/App/TemplatePanel/ImportJson/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { UploadFileOutlined } from '@mui/icons-material';
+import { FileUploadOutlined } from '@mui/icons-material';
 import { IconButton, Tooltip } from '@mui/material';
 
 import ImportJsonDialog from './ImportJsonDialog';
@@ -17,7 +17,7 @@ export default function ImportJson() {
     <>
       <Tooltip title="Import JSON">
         <IconButton onClick={() => setOpen(true)}>
-          <UploadFileOutlined fontSize="small" />
+          <FileUploadOutlined fontSize="small" />
         </IconButton>
       </Tooltip>
       {dialog}

diff --git a/packages/editor-sample/src/App/TemplatePanel/index.tsx b/packages/editor-sample/src/App/TemplatePanel/index.tsx
@@ -14,6 +14,7 @@ import {
 import ToggleInspectorPanelButton from '../InspectorDrawer/ToggleInspectorPanelButton';
 import ToggleSamplesPanelButton from '../SamplesDrawer/ToggleSamplesPanelButton';
 
+import DownloadJson from './DownloadJson';
 import HtmlPanel from './HtmlPanel';
 import ImportJson from './ImportJson';
 import JsonPanel from './JsonPanel';
@@ -94,6 +95,7 @@ export default function TemplatePanel() {
             <MainTabsGroup />
           </Stack>
           <Stack direction="row" spacing={2}>
+            <DownloadJson />
             <ImportJson />
             <ToggleButtonGroup value={selectedScreenSize} exclusive size="small" onChange={handleScreenSizeChange}>
               <ToggleButton value="desktop">