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