From 600bb4726064a0658e0e62c56c7d016582c97757 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Mon, 23 Dec 2024 10:20:44 +0100
Subject: [PATCH] editor configuration

---
 src/helpers/grapesEditor.ts                   | 141 +++++++++++++++---
 .../admin/settings/template/TemplateEdit.vue  |   2 +
 2 files changed, 120 insertions(+), 23 deletions(-)

diff --git a/src/helpers/grapesEditor.ts b/src/helpers/grapesEditor.ts
index f843d4f..66916bd 100644
--- a/src/helpers/grapesEditor.ts
+++ b/src/helpers/grapesEditor.ts
@@ -1,10 +1,11 @@
-import type { Editor } from "grapesjs";
+import type { AddComponentTypeOptions, BlockProperties, Editor } from "grapesjs";
 
 export function configureEditor(editor: Editor): void {
-  editor.Panels.getPanel("devices-c")?.set("visible", false);
+  //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("views", "open-layers");
   editor.Panels.removeButton("options", "export-template");
   editor.Panels.removeButton("options", "preview");
   // editor.Panels.removeButton("options", "fullscreen");
@@ -18,27 +19,6 @@ export function configureEditor(editor: Editor): void {
   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");
@@ -46,4 +26,119 @@ export function configureEditor(editor: Editor): void {
   editor.BlockManager.get("sect50").set("category", "Struktur");
   editor.BlockManager.get("sect30").set("category", "Struktur");
   editor.BlockManager.get("divider").set("category", "Struktur");
+  editor.BlockManager.add("heading1-block", heading1_block);
+  editor.BlockManager.add("heading2-block", heading2_block);
+  editor.BlockManager.add("heading3-block", heading3_block);
+  editor.BlockManager.add("list_start", list_start_block);
+  editor.DomComponents.addType("list_end", list_end_block.type);
+  editor.BlockManager.add("list_end", list_end_block.block);
+  editor.BlockManager.add("list-block", list_block);
+  editor.BlockManager.add("list-inner-block", list_inner_block);
 }
+
+const heading1_block: BlockProperties = {
+  label: "Heading1",
+  category: "Text",
+  media: `
+    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M2.243 4.493v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501m4.501-8.627 2.25-1.5v10.126m0 0h-2.25m2.25 0h2.25" />
+    </svg>
+  `,
+  content: `
+    <h1 class="heading">Heading 1</h1>
+  `,
+};
+
+const heading2_block: BlockProperties = {
+  label: "Heading2",
+  category: "Text",
+  media: `
+    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
+      <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 19.5H16.5v-1.609a2.25 2.25 0 0 1 1.244-2.012l2.89-1.445c.651-.326 1.116-.955 1.116-1.683 0-.498-.04-.987-.118-1.463-.135-.825-.835-1.422-1.668-1.489a15.202 15.202 0 0 0-3.464.12M2.243 4.492v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501" />
+    </svg>
+  `,
+  content: `
+    <h2 class="heading">Heading 2</h2>
+  `,
+};
+
+const heading3_block: BlockProperties = {
+  label: "Heading3",
+  category: "Text",
+  media: `
+    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M20.905 14.626a4.52 4.52 0 0 1 .738 3.603c-.154.695-.794 1.143-1.504 1.208a15.194 15.194 0 0 1-3.639-.104m4.405-4.707a4.52 4.52 0 0 0 .738-3.603c-.154-.696-.794-1.144-1.504-1.209a15.19 15.19 0 0 0-3.639.104m4.405 4.708H18M2.243 4.493v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501" />
+    </svg>
+  `,
+  content: `
+    <h3 class="heading">Heading 3</h3>
+  `,
+};
+
+const list_start_block: BlockProperties = {
+  label: "Anfang WDH",
+  category: "Struktur",
+  media: `
+    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" />
+    </svg>
+  `,
+  content: `
+    <liststart style="font-style: italic; display: block;">
+      WDH Start: LISTENNAME 
+    </liststart>
+  `,
+};
+
+const list_end_block: { type: AddComponentTypeOptions; block: BlockProperties } = {
+  type: {
+    model: {
+      defaults: {
+        tagName: "listend",
+        content: "WDH ENDE",
+        editable: false,
+      },
+    },
+    isComponent(el) {
+      return el.tagName === "listend";
+    },
+  },
+  block: {
+    label: "Ende WDH",
+    content: { type: "list_end" },
+    category: "Struktur",
+    media: `
+      <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15" />
+      </svg>
+    `,
+  },
+};
+
+const list_block: BlockProperties = {
+  label: "Liste",
+  category: "Struktur",
+  media: `
+    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
+    </svg>
+  `,
+  content: `
+    <ul>
+      <li>Element</li>
+    </ul>
+  `,
+};
+
+const list_inner_block: BlockProperties = {
+  label: "Listenelement",
+  category: "Text",
+  media: `
+    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
+    </svg>
+  `,
+  content: `
+    <li>Element</li>
+  `,
+};
diff --git a/src/views/admin/settings/template/TemplateEdit.vue b/src/views/admin/settings/template/TemplateEdit.vue
index 108648f..573fa12 100644
--- a/src/views/admin/settings/template/TemplateEdit.vue
+++ b/src/views/admin/settings/template/TemplateEdit.vue
@@ -101,6 +101,8 @@ export default defineComponent({
         height: "100%",
         width: "100%",
         fromElement: true,
+        telemetry: false,
+        showDevices: false,
         deviceManager: {
           devices: [
             {