changed editor to OpenSource grapesJS

src/helpers/grapesEditor.ts

@@ -0,0 +1,49 @@
+import type { Editor } from "grapesjs";
+
+export function configureEditor(editor: Editor): void {
+  editor.Panels.getPanel("devices-c")?.set("visible", false);
+  editor.Panels.removeButton("devices-c", "set-device-mobile");
+  editor.Panels.removeButton("devices-c", "set-device-desktop");
+  editor.Panels.removeButton("views", "open-tm");
+  editor.Panels.removeButton("options", "export-template");
+  editor.Panels.removeButton("options", "preview");
+  // editor.Panels.removeButton("options", "fullscreen");
+  editor.Panels.removeButton("options", "gjs-open-import-template");
+  editor.Panels.removeButton("options", "gjs-toggle-images");
+  editor.BlockManager.remove("button");
+  editor.BlockManager.remove("image");
+  editor.BlockManager.remove("link-block");
+  editor.BlockManager.remove("list-items");
+  editor.BlockManager.remove("grid-items");
+  editor.BlockManager.remove("sect37");
+  editor.BlockManager.remove("text-sect");
+
+  editor.DomComponents.addType("heading", {
+    model: {
+      defaults: {
+        tagName: "h1",
+        content: "Heading",
+      },
+    },
+    isComponent(el) {
+      return el.tagName === "H1";
+    },
+  });
+  editor.BlockManager.add("heading-block", {
+    label: "Heading",
+    content: { type: "heading" },
+    category: "Text",
+    media: `
+      <svg viewBox="0 0 24 24">
+        <path fill="currentColor" d="M18.5,4L19.66,8.35L18.7,8.61C18.25,7.74 17.79,6.87 17.26,6.43C16.73,6 16.11,6 15.5,6H13V16.5C13,17 13,17.5 13.33,17.75C13.67,18 14.33,18 15,18V19H9V18C9.67,18 10.33,18 10.67,17.75C11,17.5 11,17 11,16.5V6H8.5C7.89,6 7.27,6 6.74,6.43C6.21,6.87 5.75,7.74 5.3,8.61L4.34,8.35L5.5,4H18.5Z"></path>
+      </svg>
+    `,
+  });
+  editor.BlockManager.get("text").set("category", "Text");
+  editor.BlockManager.get("quote").set("category", "Text");
+  editor.BlockManager.get("link").set("category", "Text");
+  editor.BlockManager.get("sect100").set("category", "Struktur");
+  editor.BlockManager.get("sect50").set("category", "Struktur");
+  editor.BlockManager.get("sect30").set("category", "Struktur");
+  editor.BlockManager.get("divider").set("category", "Struktur");
+}

src/helpers/unlayerEditor.ts

@@ -1,100 +0,0 @@
-import type { EmailEditor } from "vue-email-editor";
-import type { EmailEditorProps } from "vue-email-editor/dist/components/types";
-
-export const options: EmailEditorProps["options"] = {
-  tools: {
-    image: {
-      enabled: false,
-    },
-    menu: {
-      enabled: false,
-    },
-    button: {
-      enabled: false,
-    },
-  },
-  displayMode: "document",
-  appearance: {
-    theme: "light",
-    panels: {
-      tools: {
-        dock: "left",
-      },
-    },
-  },
-  features: {
-    preview: false,
-  },
-  customJS: [window.location.origin + "/unlayerTool.js"],
-};
-
-export function configureEditor(editor: typeof EmailEditor): void {
-  editor.editor.setBodyValues({
-    contentWidth: "100%",
-    backgroundColor: "#ffffff",
-    linkStyle: {
-      linkColor: "#990b00",
-      linkHoverColor: "#bb1e10",
-      linkUnderline: false,
-      linkHoverUnderline: false,
-    },
-  });
-}
-
-export function loadEditor(editor: typeof EmailEditor, design: object | undefined = undefined): void {
-  if (design === undefined) {
-    editor.editor.loadBlank();
-  } else {
-    editor.editor.loadDesign(design);
-  }
-}
-
-export function exportEditor(editor: typeof EmailEditor): {
-  design: object;
-  headerHTML: string;
-  bodyHTML: string;
-  footerHTML: string;
-} {
-  let savedDesign: any = undefined;
-  let savedHeader: string = "";
-  let savedBody: string = "";
-  let savedFooter: string = "";
-
-  editor.editor.saveDesign((design: any) => {
-    savedDesign = design;
-  });
-
-  editor.editor.exportHtml(
-    (data: any) => {
-      savedHeader = data;
-    },
-    {
-      minify: true,
-      onlyHeader: true,
-    }
-  );
-  editor.editor.exportHtml(
-    (data: any) => {
-      savedBody = data;
-    },
-    {
-      minify: true,
-    }
-  );
-  editor.editor.exportHtml(
-    (data: any) => {
-      savedFooter = data;
-    },
-    {
-      minify: true,
-      onlyFooter: true,
-    }
-  );
-
-  return {
-    design: savedDesign,
-    headerHTML: savedHeader,
-    bodyHTML: savedBody,
-    footerHTML: savedFooter,
-  };
-}

src/stores/admin/template.ts

@@ -39,9 +39,7 @@ export const useTemplateStore = defineStore("template", {
         template: template.template,
         description: template.description,
         design: template.design,
-        headerHTML: template.headerHTML,
-        bodyHTML: template.bodyHTML,
-        footerHTML: template.footerHTML,
+        html: template.html,
       });
       this.fetchTemplates();
       return result;

src/viewmodels/admin/template.models.ts

@@ -3,9 +3,7 @@ export interface TemplateViewModel {
   template: string;
   description: string | null;
   design: object;
-  headerHTML: string;
-  bodyHTML: string;
-  footerHTML: string;
+  html: string;
 }
 
 export interface CreateTemplateViewModel {
@@ -18,7 +16,5 @@ export interface UpdateTemplateViewModel {
   template: string;
   description: string | null;
   design: object;
-  headerHTML: string;
-  bodyHTML: string;
-  footerHTML: string;
+  html: string;
 }

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) => {