BOD-35 Refactored email screen to use TinyMCE + added templates schema + base level email generation

client/src/components/email-overlay/email-overlay.component.jsx

@@ -1,12 +1,10 @@
-import React from "react";
+import { Editor } from "@tinymce/tinymce-react";
 import { Input } from "antd";
-import CKEditor from "@ckeditor/ckeditor5-react";
-import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
-
+import React from "react";
 export default function EmailOverlayComponent({
   messageOptions,
   handleConfigChange,
-  handleHtmlChange
+  handleHtmlChange,
 }) {
   return (
     <div>
@@ -27,17 +25,24 @@ export default function EmailOverlayComponent({
         onChange={handleConfigChange}
         name="subject"
       />
-      <CKEditor
-        editor={ClassicEditor}
-        data={messageOptions.html}
-        onChange={(event, editor) => {
-          // handleHtmlChange(editor.getData());
-          //TODO Ensure that removing onchange never introduces a race condition 
-        }}
-        onBlur={(event, editor) => {
-          console.log("Blur.");
-          handleHtmlChange(editor.getData());
+      <Editor
+        value={messageOptions.html}
+        apiKey="f3s2mjsd77ya5qvqkee9vgh612cm6h41e85efqakn2d0kknk"
+        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={handleHtmlChange}
       />
     </div>
   );