Added new HTML editor with some breaking changes.

client/src/components/shop-template-editor/shop-template-editor.component.jsx

@@ -1,20 +1,22 @@
-import { Editor } from "@tinymce/tinymce-react";
-import React, { useEffect } from "react";
-import ShopTemplateEditorSaveButton from "../shop-template-editor-save-button/shop-template-editor-save-button.component";
 import { Input } from "antd";
+import React, { useEffect, useRef } from "react";
+import EmailEditor from "react-email-editor";
+import ShopTemplateEditorSaveButton from "../shop-template-editor-save-button/shop-template-editor-save-button.component";
+
 export default function ShopTemplateEditorComponent({
   templateId,
   html,
   gql,
+  json,
   editorState,
 }) {
   const [editorContent, seteditorContent] = editorState;
+  const emailEditorRef = useRef(null);
 
   useEffect(() => {
-    seteditorContent((prevstate) => {
-      return { ...prevstate, html: html };
-    });
-  }, [html, seteditorContent]);
+    if (json && Object.keys(json).length > 0)
+      emailEditorRef.current.loadDesign(json);
+  }, [json, emailEditorRef]);
 
   useEffect(() => {
     seteditorContent((prevstate) => {
@@ -22,34 +24,29 @@ export default function ShopTemplateEditorComponent({
     });
   }, [gql, seteditorContent]);
 
+  const exportJson = (props) => {
+    emailEditorRef.current.saveDesign((js) => {
+      seteditorContent({ ...editorContent, JSON: js });
+      console.log(js);
+    });
+  };
+
+  const exportHtml = (props) => {
+    emailEditorRef.current.exportHtml((js) => {
+      console.log(js);
+    });
+  };
+
   return (
     <div>
       <ShopTemplateEditorSaveButton
         templateId={templateId}
-        html={editorContent.html}
         gql={editorContent.gql}
+        emailEditorRef={emailEditorRef}
       />
-      <Editor
-        value={editorContent.html}
-        apiKey='f3s2mjsd77ya5qvqkee9vgh612cm6h41e85efqakn2d0kknk' //TODO Pull this into app var
-        init={{
-          height: 500,
-          //menubar: false,
-          encoding: "raw",
-          extended_valid_elements: "span",
-          //entity_encoding: "raw",
-          plugins: [
-            "advlist autolink lists link image charmap print preview anchor",
-            "searchreplace visualblocks code fullscreen",
-            "insertdatetime media table paste code help wordcount",
-          ],
-          toolbar:
-            "undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
-        }}
-        onEditorChange={(text) =>
-          seteditorContent({ ...editorContent, html: text })
-        }
-      />
+      <button onClick={exportJson}>json</button>
+      <button onClick={exportHtml}>html</button>
+      <EmailEditor ref={emailEditorRef} />
       QUERY
       <Input.TextArea
         value={editorContent.gql}