changed editor to OpenSource grapesJS

src/views/admin/settings/template/TemplateEdit.vue

@@ -12,11 +12,11 @@
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
       <form
-        v-else-if="template != null"
+        v-show="loading == 'fetched' && template != null"
         class="flex flex-col gap-4 py-2 w-full h-full mx-auto"
         @submit.prevent="triggerUpdate"
       >
-        <div class="flex flex-col xl:flex-row gap-4">
+        <div v-if="template != null" class="flex flex-col xl:flex-row gap-4">
           <div class="w-full">
             <label for="template">Bezeichnung</label>
             <input type="text" id="template" required v-model="template.template" />
@@ -26,21 +26,11 @@
             <input type="text" id="description" v-model="template.description" />
           </div>
         </div>
-        <div class="flex flex-col w-full grow max-xl:hidden">
-          <EmailEditor
-            ref="emailEditor"
-            minHeight="100%"
-            :options="options"
-            @ready="editorReady"
-            @load="loadDesign()"
-          />
-        </div>
-        <div class="px-7 xl:hidden">
-          <p>
-            Der externe Editor ist nicht auf kleine Auflösungen optimiert. Wechseln Sie auf ein Desktop-Gerät, einen
-            größeren Bildschirm oder ändern Sie die Skalierung dieser Seite.
-          </p>
+        <div v-if="contextLoading == 'loading'" class="flex flex-col gap-2 items-center">
+          <p>Lade Template-Anzeige</p>
+          <Spinner />
         </div>
+        <div ref="grapesEditor" id="grapesEditor"></div>
         <div class="flex flex-row justify-end gap-2">
           <button primary-outline type="reset" class="!w-fit" :disabled="status == 'loading'" @click="resetForm">
             verwerfen
@@ -63,12 +53,14 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { RouterLink } from "vue-router";
-import { EmailEditor } from "vue-email-editor";
-import { configureEditor, exportEditor, loadEditor, options } from "@/helpers/unlayerEditor";
+import { configureEditor } from "@/helpers/grapesEditor";
 import type { TemplateViewModel, UpdateTemplateViewModel } from "../../../../viewmodels/admin/template.models";
 import { useTemplateStore } from "../../../../stores/admin/template";
 import cloneDeep from "lodash.clonedeep";
 import isEqual from "lodash.isequal";
+import grapesjs, { Editor } from "grapesjs";
+import grapesNewsletter from "grapesjs-preset-newsletter";
+import "grapesjs/dist/css/grapes.min.css";
 </script>
 
 <script lang="ts">
@@ -83,6 +75,8 @@ export default defineComponent({
       origin: null as null | TemplateViewModel,
       template: null as null | TemplateViewModel,
       timeout: null as any,
+      editor: null as null | Editor,
+      contextLoading: "loading" as "loading" | "loaded" | "failed",
     };
   },
   computed: {
@@ -97,28 +91,50 @@ export default defineComponent({
     try {
       clearTimeout(this.timeout);
     } catch (error) {}
+    localStorage.removeItem("gjsProject");
   },
   methods: {
     ...mapActions(useTemplateStore, ["fetchTemplateById", "updateActiveTemplate"]),
-    editorReady() {
-      configureEditor(this.$refs.emailEditor as typeof EmailEditor);
-    },
-    loadBlank() {
-      loadEditor(this.$refs.emailEditor as typeof EmailEditor);
+    initEditor() {
+      this.editor = grapesjs.init({
+        container: "#grapesEditor",
+        height: "100%",
+        width: "100%",
+        fromElement: true,
+        deviceManager: {
+          devices: [
+            {
+              id: "tablet",
+              name: "Tablet",
+              width: "768px",
+              widthMedia: "992px",
+            },
+          ],
+        },
+        plugins: [grapesNewsletter],
+      });
+      configureEditor(this.editor);
     },
     loadDesign() {
-      loadEditor(this.$refs.emailEditor as typeof EmailEditor, this.origin?.design);
+      this.contextLoading = "loading";
+      this.editor?.destroy();
+      localStorage.setItem("gjsProject", JSON.stringify(this.origin?.design ?? {}));
+      setTimeout(() => {
+        this.initEditor();
+        this.contextLoading = "loaded";
+      }, 1000);
     },
     resetForm() {
       this.template = cloneDeep(this.origin);
       this.loadDesign();
     },
-    fetchItem() {
+    fetchItem(fromSave: boolean = false) {
       this.fetchTemplateById(parseInt(this.id ?? ""))
         .then((result) => {
           this.template = result.data;
           this.origin = cloneDeep(result.data);
           this.loading = "fetched";
+          if (!fromSave) this.loadDesign();
         })
         .catch((err) => {
           console.log(err);
@@ -127,21 +143,22 @@ export default defineComponent({
     },
     triggerUpdate(e: any) {
       if (this.template == null) return;
-      let { design, headerHTML, bodyHTML, footerHTML } = exportEditor(this.$refs.emailEditor as typeof EmailEditor);
       let formData = e.target.elements;
+      const htmlContent = this.editor?.getHtml();
+      const cssContent = this.editor?.getCss();
+      const html = `<style>${cssContent}</style>${htmlContent}`;
+
       let updateTemplate: UpdateTemplateViewModel = {
         id: this.template.id,
         template: formData.template.value,
         description: formData.description.value,
-        design,
-        headerHTML,
-        bodyHTML,
-        footerHTML,
+        design: this.editor?.getProjectData() ?? {},
+        html,
       };
       this.status = "loading";
       this.updateActiveTemplate(updateTemplate)
         .then(() => {
-          this.fetchItem();
+          this.fetchItem(true);
           this.status = { status: "success" };
         })
         .catch((err) => {