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 1/5] 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">

From b0ca94169e886518a0a1308d700a6ceb9bdf0298 Mon Sep 17 00:00:00 2001
From: cohitre <carlosrr@gmail.com>
Date: Sat, 13 Apr 2024 07:10:28 -0700
Subject: [PATCH 2/5] Adding separate dialog so that we can handle state with
 useState

---
 .../ImportJson/ImportJsonDialog.tsx           | 60 +++++++++++++++++++
 .../App/TemplatePanel/ImportJson/index.tsx    | 36 +++--------
 2 files changed, 68 insertions(+), 28 deletions(-)
 create mode 100644 packages/editor-sample/src/App/TemplatePanel/ImportJson/ImportJsonDialog.tsx

diff --git a/packages/editor-sample/src/App/TemplatePanel/ImportJson/ImportJsonDialog.tsx b/packages/editor-sample/src/App/TemplatePanel/ImportJson/ImportJsonDialog.tsx
new file mode 100644
index 0000000..0b7c3c4
--- /dev/null
+++ b/packages/editor-sample/src/App/TemplatePanel/ImportJson/ImportJsonDialog.tsx
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Input } from '@mui/material';
+
+import { resetDocument } from '../../../documents/editor/EditorContext';
+
+type ImportJsonDialogProps = {
+  onClose: () => void;
+};
+export default function ImportJsonDialog({ onClose }: ImportJsonDialogProps) {
+  const [value, setValue] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  const handleChange: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> = (ev) => {
+    const v = ev.currentTarget.value;
+    setValue(v);
+    try {
+      JSON.parse(v);
+      setError(null);
+    } catch {
+      setError('There was a parsing error');
+    }
+  };
+
+  return (
+    <Dialog open onClose={onClose}>
+      <DialogTitle>Import JSON</DialogTitle>
+      <form
+        onSubmit={(ev) => {
+          ev.preventDefault();
+          try {
+            const doc = JSON.parse(value);
+            resetDocument(doc);
+            onClose();
+          } catch {}
+        }}
+      >
+        <DialogContent>
+          <Input
+            error={error !== null}
+            value={value}
+            onChange={handleChange}
+            type="text"
+            fullWidth
+            rows={10}
+            multiline
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button type="button" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button type="submit" disabled={error !== null}>
+            Save
+          </Button>
+        </DialogActions>
+      </form>
+    </Dialog>
+  );
+}
diff --git a/packages/editor-sample/src/App/TemplatePanel/ImportJson/index.tsx b/packages/editor-sample/src/App/TemplatePanel/ImportJson/index.tsx
index e3a8be1..88ca13b 100644
--- a/packages/editor-sample/src/App/TemplatePanel/ImportJson/index.tsx
+++ b/packages/editor-sample/src/App/TemplatePanel/ImportJson/index.tsx
@@ -1,41 +1,21 @@
 import React, { useState } from 'react';
 
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Input } from '@mui/material';
+import { Button } from '@mui/material';
 
-import { resetDocument } from '../../../documents/editor/EditorContext';
+import ImportJsonDialog from './ImportJsonDialog';
 
 export default function ImportJson() {
   const [open, setOpen] = useState(false);
 
+  let dialog = null;
+  if (open) {
+    dialog = <ImportJsonDialog onClose={() => setOpen(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>
+      {dialog}
     </>
   );
 }

From cc6d79e4fa5d956f9e23b954bd698eaa6b06b488 Mon Sep 17 00:00:00 2001
From: cohitre <carlosrr@gmail.com>
Date: Sun, 14 Apr 2024 07:32:51 -0700
Subject: [PATCH 3/5] Displaying errors when parsing json import

---
 .../ImportJson/ImportJsonDialog.tsx           | 30 +++++++++++--------
 .../ImportJson/validateJsonStringValue.ts     | 23 ++++++++++++++
 2 files changed, 41 insertions(+), 12 deletions(-)
 create mode 100644 packages/editor-sample/src/App/TemplatePanel/ImportJson/validateJsonStringValue.ts

diff --git a/packages/editor-sample/src/App/TemplatePanel/ImportJson/ImportJsonDialog.tsx b/packages/editor-sample/src/App/TemplatePanel/ImportJson/ImportJsonDialog.tsx
index 0b7c3c4..f663d2d 100644
--- a/packages/editor-sample/src/App/TemplatePanel/ImportJson/ImportJsonDialog.tsx
+++ b/packages/editor-sample/src/App/TemplatePanel/ImportJson/ImportJsonDialog.tsx
@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Input } from '@mui/material';
+import { Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle, Input } from '@mui/material';
 
 import { resetDocument } from '../../../documents/editor/EditorContext';
 
+import validateJsonStringValue from './validateJsonStringValue';
+
 type ImportJsonDialogProps = {
   onClose: () => void;
 };
@@ -14,28 +16,32 @@ export default function ImportJsonDialog({ onClose }: ImportJsonDialogProps) {
   const handleChange: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> = (ev) => {
     const v = ev.currentTarget.value;
     setValue(v);
-    try {
-      JSON.parse(v);
-      setError(null);
-    } catch {
-      setError('There was a parsing error');
-    }
+    const { error } = validateJsonStringValue(v);
+    setError(error ?? null);
   };
 
+  let errorAlert = null;
+  if (error) {
+    errorAlert = <Alert color="error">{error}</Alert>;
+  }
+
   return (
     <Dialog open onClose={onClose}>
       <DialogTitle>Import JSON</DialogTitle>
       <form
         onSubmit={(ev) => {
           ev.preventDefault();
-          try {
-            const doc = JSON.parse(value);
-            resetDocument(doc);
-            onClose();
-          } catch {}
+          const { error, data } = validateJsonStringValue(value);
+          setError(error ?? null);
+          if (!data) {
+            return;
+          }
+          resetDocument(data);
+          onClose();
         }}
       >
         <DialogContent>
+          {errorAlert}
           <Input
             error={error !== null}
             value={value}
diff --git a/packages/editor-sample/src/App/TemplatePanel/ImportJson/validateJsonStringValue.ts b/packages/editor-sample/src/App/TemplatePanel/ImportJson/validateJsonStringValue.ts
new file mode 100644
index 0000000..a81cf74
--- /dev/null
+++ b/packages/editor-sample/src/App/TemplatePanel/ImportJson/validateJsonStringValue.ts
@@ -0,0 +1,23 @@
+import { EditorConfigurationSchema, TEditorConfiguration } from '../../../documents/editor/core';
+
+type TResult = { error: string; data?: undefined } | { data: TEditorConfiguration; error?: undefined };
+
+export default function validateTextAreaValue(value: string): TResult {
+  let jsonObject = undefined;
+  try {
+    jsonObject = JSON.parse(value);
+  } catch {
+    return { error: 'Invalid json' };
+  }
+
+  const parseResult = EditorConfigurationSchema.safeParse(jsonObject);
+  if (!parseResult.success) {
+    return { error: 'Invalid JSON schema' };
+  }
+
+  if (!parseResult.data.root) {
+    return { error: 'Missing "root" node' };
+  }
+
+  return { data: parseResult.data };
+}

From 50693fad090bbf6847094717066ccf243303734c Mon Sep 17 00:00:00 2001
From: cohitre <carlosrr@gmail.com>
Date: Mon, 15 Apr 2024 06:48:34 -0700
Subject: [PATCH 4/5] ESLint

---
 packages/editor-sample/src/App/TemplatePanel/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor-sample/src/App/TemplatePanel/index.tsx b/packages/editor-sample/src/App/TemplatePanel/index.tsx
index b3e6f67..cea68b8 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, Button, Stack, SxProps, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
+import { Box, Stack, SxProps, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
 import { Reader } from '@usewaypoint/email-builder';
 
 import EditorBlock from '../../documents/editor/EditorBlock';
@@ -15,10 +15,10 @@ import ToggleInspectorPanelButton from '../InspectorDrawer/ToggleInspectorPanelB
 import ToggleSamplesPanelButton from '../SamplesDrawer/ToggleSamplesPanelButton';
 
 import HtmlPanel from './HtmlPanel';
+import ImportJson from './ImportJson';
 import JsonPanel from './JsonPanel';
 import MainTabsGroup from './MainTabsGroup';
 import ShareButton from './ShareButton';
-import ImportJson from './ImportJson';
 
 export default function TemplatePanel() {
   const document = useDocument();

From 185ef95b3b82927e68ea9d4698d86e9e47cf1a5b Mon Sep 17 00:00:00 2001
From: Jordan Isip <me@jordanisip.com>
Date: Mon, 15 Apr 2024 10:09:53 -0400
Subject: [PATCH 5/5] Polishing import json button and dialog

---
 .../TemplatePanel/ImportJson/ImportJsonDialog.tsx   | 13 +++++++++----
 .../src/App/TemplatePanel/ImportJson/index.tsx      |  9 +++++++--
 .../editor-sample/src/App/TemplatePanel/index.tsx   |  2 +-
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/editor-sample/src/App/TemplatePanel/ImportJson/ImportJsonDialog.tsx b/packages/editor-sample/src/App/TemplatePanel/ImportJson/ImportJsonDialog.tsx
index f663d2d..d9e4c63 100644
--- a/packages/editor-sample/src/App/TemplatePanel/ImportJson/ImportJsonDialog.tsx
+++ b/packages/editor-sample/src/App/TemplatePanel/ImportJson/ImportJsonDialog.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle, Input } from '@mui/material';
+import { Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField, Typography } from '@mui/material';
 
 import { resetDocument } from '../../../documents/editor/EditorContext';
 
@@ -41,12 +41,17 @@ export default function ImportJsonDialog({ onClose }: ImportJsonDialogProps) {
         }}
       >
         <DialogContent>
+          <Typography color="text.secondary" paragraph>
+            Copy and paste an EmailBuilder.js JSON.
+          </Typography>
           {errorAlert}
-          <Input
+          <TextField
             error={error !== null}
             value={value}
             onChange={handleChange}
             type="text"
+            helperText="This will override your current template."
+            variant="outlined"
             fullWidth
             rows={10}
             multiline
@@ -56,8 +61,8 @@ export default function ImportJsonDialog({ onClose }: ImportJsonDialogProps) {
           <Button type="button" onClick={onClose}>
             Cancel
           </Button>
-          <Button type="submit" disabled={error !== null}>
-            Save
+          <Button variant="contained" type="submit" disabled={error !== null}>
+            Import
           </Button>
         </DialogActions>
       </form>
diff --git a/packages/editor-sample/src/App/TemplatePanel/ImportJson/index.tsx b/packages/editor-sample/src/App/TemplatePanel/ImportJson/index.tsx
index 88ca13b..25f21c8 100644
--- a/packages/editor-sample/src/App/TemplatePanel/ImportJson/index.tsx
+++ b/packages/editor-sample/src/App/TemplatePanel/ImportJson/index.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 
-import { Button } from '@mui/material';
+import { UploadFileOutlined } from '@mui/icons-material';
+import { IconButton, Tooltip } from '@mui/material';
 
 import ImportJsonDialog from './ImportJsonDialog';
 
@@ -14,7 +15,11 @@ export default function ImportJson() {
 
   return (
     <>
-      <Button onClick={() => setOpen(true)}>Import JSON</Button>
+      <Tooltip title="Import JSON">
+        <IconButton onClick={() => setOpen(true)}>
+          <UploadFileOutlined 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
index cea68b8..c0cfb1b 100644
--- a/packages/editor-sample/src/App/TemplatePanel/index.tsx
+++ b/packages/editor-sample/src/App/TemplatePanel/index.tsx
@@ -92,9 +92,9 @@ export default function TemplatePanel() {
         <Stack px={2} direction="row" gap={2} width="100%" justifyContent="space-between" alignItems="center">
           <Stack direction="row" spacing={2}>
             <MainTabsGroup />
-            <ImportJson />
           </Stack>
           <Stack direction="row" spacing={2}>
+            <ImportJson />
             <ToggleButtonGroup value={selectedScreenSize} exclusive size="small" onChange={handleScreenSizeChange}>
               <ToggleButton value="desktop">
                 <Tooltip title="Desktop view">