From c2a7dff895999f06e5d648b75139ce31715b4349 Mon Sep 17 00:00:00 2001
From: cohitre <carlosrr@gmail.com>
Date: Sat, 13 Apr 2024 06:55:11 -0700
Subject: [PATCH] Adding import dialog

---
 .../App/TemplatePanel/ImportJson/index.tsx    | 41 +++++++++++++++++++
 .../src/App/TemplatePanel/index.tsx           |  8 +++-
 2 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 packages/editor-sample/src/App/TemplatePanel/ImportJson/index.tsx

diff --git a/packages/editor-sample/src/App/TemplatePanel/ImportJson/index.tsx b/packages/editor-sample/src/App/TemplatePanel/ImportJson/index.tsx
new file mode 100644
index 0000000..e3a8be1
--- /dev/null
+++ b/packages/editor-sample/src/App/TemplatePanel/ImportJson/index.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Input } from '@mui/material';
+
+import { resetDocument } from '../../../documents/editor/EditorContext';
+
+export default function ImportJson() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Import JSON</Button>
+      <Dialog open={open} onClose={() => setOpen(false)}>
+        <DialogTitle>Import JSON</DialogTitle>
+        <form
+          onSubmit={(ev) => {
+            ev.preventDefault();
+            const data = new FormData(ev.currentTarget);
+            const json = data.get('json');
+            if (typeof json !== 'string') {
+              return;
+            }
+            try {
+              const doc = JSON.parse(json);
+              resetDocument(doc);
+              setOpen(false);
+            } catch {}
+          }}
+        >
+          <DialogContent>
+            <Input name="json" type="text" fullWidth rows={10} multiline />
+          </DialogContent>
+          <DialogActions>
+            <Button type="button">Cancel</Button>
+            <Button type="submit">Save</Button>
+          </DialogActions>
+        </form>
+      </Dialog>
+    </>
+  );
+}
diff --git a/packages/editor-sample/src/App/TemplatePanel/index.tsx b/packages/editor-sample/src/App/TemplatePanel/index.tsx
index ad6713c..b3e6f67 100644
--- a/packages/editor-sample/src/App/TemplatePanel/index.tsx
+++ b/packages/editor-sample/src/App/TemplatePanel/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { MonitorOutlined, PhoneIphoneOutlined } from '@mui/icons-material';
-import { Box, Stack, SxProps, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
+import { Box, Button, Stack, SxProps, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
 import { Reader } from '@usewaypoint/email-builder';
 
 import EditorBlock from '../../documents/editor/EditorBlock';
@@ -18,6 +18,7 @@ import HtmlPanel from './HtmlPanel';
 import JsonPanel from './JsonPanel';
 import MainTabsGroup from './MainTabsGroup';
 import ShareButton from './ShareButton';
+import ImportJson from './ImportJson';
 
 export default function TemplatePanel() {
   const document = useDocument();
@@ -89,7 +90,10 @@ export default function TemplatePanel() {
       >
         <ToggleSamplesPanelButton />
         <Stack px={2} direction="row" gap={2} width="100%" justifyContent="space-between" alignItems="center">
-          <MainTabsGroup />
+          <Stack direction="row" spacing={2}>
+            <MainTabsGroup />
+            <ImportJson />
+          </Stack>
           <Stack direction="row" spacing={2}>
             <ToggleButtonGroup value={selectedScreenSize} exclusive size="small" onChange={handleScreenSizeChange}>
               <ToggleButton value="desktop">