Adding import dialog

packages/editor-sample/src/App/TemplatePanel/ImportJson/ImportJsonDialog.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+
+import { Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField, Typography } from '@mui/material';
+
+import { resetDocument } from '../../../documents/editor/EditorContext';
+
+import validateJsonStringValue from './validateJsonStringValue';
+
+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);
+    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();
+          const { error, data } = validateJsonStringValue(value);
+          setError(error ?? null);
+          if (!data) {
+            return;
+          }
+          resetDocument(data);
+          onClose();
+        }}
+      >
+        <DialogContent>
+          <Typography color="text.secondary" paragraph>
+            Copy and paste an EmailBuilder.js JSON.
+          </Typography>
+          {errorAlert}
+          <TextField
+            error={error !== null}
+            value={value}
+            onChange={handleChange}
+            type="text"
+            helperText="This will override your current template."
+            variant="outlined"
+            fullWidth
+            rows={10}
+            multiline
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button type="button" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button variant="contained" type="submit" disabled={error !== null}>
+            Import
+          </Button>
+        </DialogActions>
+      </form>
+    </Dialog>
+  );
+}

packages/editor-sample/src/App/TemplatePanel/ImportJson/index.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+
+import { UploadFileOutlined } from '@mui/icons-material';
+import { IconButton, Tooltip } from '@mui/material';
+
+import ImportJsonDialog from './ImportJsonDialog';
+
+export default function ImportJson() {
+  const [open, setOpen] = useState(false);
+
+  let dialog = null;
+  if (open) {
+    dialog = <ImportJsonDialog onClose={() => setOpen(false)} />;
+  }
+
+  return (
+    <>
+      <Tooltip title="Import JSON">
+        <IconButton onClick={() => setOpen(true)}>
+          <UploadFileOutlined fontSize="small" />
+        </IconButton>
+      </Tooltip>
+      {dialog}
+    </>
+  );
+}

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 };
+}

packages/editor-sample/src/App/TemplatePanel/index.tsx

@@ -15,6 +15,7 @@ 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';
@@ -89,8 +90,11 @@ 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 />
+          </Stack>
+          <Stack direction="row" spacing={2}>
+            <ImportJson />
             <ToggleButtonGroup value={selectedScreenSize} exclusive size="small" onChange={handleScreenSizeChange}>
               <ToggleButton value="desktop">
                 <Tooltip title="Desktop view">