From 228b44101b8b83204bbf08fe11dacc935bf1a182 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Sun, 13 Jul 2025 10:17:02 +0200
Subject: [PATCH 1/6] 1.7.1

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 54f23a8..0fd547b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ff-admin",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ff-admin",
-      "version": "1.7.0",
+      "version": "1.7.1",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@fullcalendar/core": "^6.1.18",
diff --git a/package.json b/package.json
index 7d23ae8..3d75356 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ff-admin",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "Feuerwehr/Verein Mitgliederverwaltung UI",
   "type": "module",
   "scripts": {

From a2101db747502d8747c6a6e5a8e5a7d38748a254 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Thu, 17 Jul 2025 12:56:33 +0200
Subject: [PATCH 2/6] add QuillEditor Component

---
 package-lock.json              | 105 ++++++++++++++++++++++---------
 package.json                   |   1 +
 src/components/QuillEditor.vue | 110 +++++++++++++++++++++++++++++++++
 3 files changed, 187 insertions(+), 29 deletions(-)
 create mode 100644 src/components/QuillEditor.vue

diff --git a/package-lock.json b/package-lock.json
index 54f23a8..3c53095 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,7 @@
         "pwacompat": "^2.0.17",
         "qrcode": "^1.5.4",
         "qs": "^6.14.0",
+        "quill": "^2.0.3",
         "socket.io-client": "^4.8.1",
         "unplugin-vue-markdown": "^29.1.0",
         "uuid": "^11.1.0",
@@ -4652,6 +4653,52 @@
         "vue": "^3.2.41"
       }
     },
+    "node_modules/@vueup/vue-quill/node_modules/eventemitter3": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==",
+      "license": "MIT"
+    },
+    "node_modules/@vueup/vue-quill/node_modules/fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@vueup/vue-quill/node_modules/parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@vueup/vue-quill/node_modules/quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
+      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      }
+    },
+    "node_modules/@vueup/vue-quill/node_modules/quill/node_modules/quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "license": "MIT",
+      "dependencies": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -6219,9 +6266,9 @@
       "license": "MIT"
     },
     "node_modules/eventemitter3": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
-      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
       "license": "MIT"
     },
     "node_modules/execa": {
@@ -6280,7 +6327,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
       "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
-      "dev": true,
       "license": "Apache-2.0"
     },
     "node_modules/fast-glob": {
@@ -8129,6 +8175,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "license": "MIT"
+    },
     "node_modules/lodash.clonedeep": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
@@ -8710,9 +8762,9 @@
       }
     },
     "node_modules/parchment": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
-      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-3.0.0.tgz",
+      "integrity": "sha512-HUrJFQ/StvgmXRcQ1ftY6VEZUq3jA2t9ncFN4F84J/vN0/FPpQF+8FKXb3l6fLces6q0uOHj6NJn+2xvZnxO6A==",
       "license": "BSD-3-Clause"
     },
     "node_modules/parent-module": {
@@ -9111,17 +9163,18 @@
       "license": "MIT"
     },
     "node_modules/quill": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
-      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-2.0.3.tgz",
+      "integrity": "sha512-xEYQBqfYx/sfb33VJiKnSJp8ehloavImQ2A6564GAbqG55PGw1dAWUn1MUbQB62t0azawUS2CZZhWCjO8gRvTw==",
       "license": "BSD-3-Clause",
       "dependencies": {
-        "clone": "^2.1.1",
-        "deep-equal": "^1.0.1",
-        "eventemitter3": "^2.0.3",
-        "extend": "^3.0.2",
-        "parchment": "^1.1.4",
-        "quill-delta": "^3.6.2"
+        "eventemitter3": "^5.0.1",
+        "lodash-es": "^4.17.21",
+        "parchment": "^3.0.0",
+        "quill-delta": "^5.1.0"
+      },
+      "engines": {
+        "npm": ">=8.2.3"
       }
     },
     "node_modules/quill-delta": {
@@ -9141,24 +9194,18 @@
       "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
       "license": "Apache-2.0"
     },
-    "node_modules/quill/node_modules/fast-diff": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
-      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==",
-      "license": "Apache-2.0"
-    },
     "node_modules/quill/node_modules/quill-delta": {
-      "version": "3.6.3",
-      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
-      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz",
+      "integrity": "sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==",
       "license": "MIT",
       "dependencies": {
-        "deep-equal": "^1.0.1",
-        "extend": "^3.0.2",
-        "fast-diff": "1.1.2"
+        "fast-diff": "^1.3.0",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.isequal": "^4.5.0"
       },
       "engines": {
-        "node": ">=0.10"
+        "node": ">= 12.0.0"
       }
     },
     "node_modules/randombytes": {
diff --git a/package.json b/package.json
index 7d23ae8..4aea9cc 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "pwacompat": "^2.0.17",
     "qrcode": "^1.5.4",
     "qs": "^6.14.0",
+    "quill": "^2.0.3",
     "socket.io-client": "^4.8.1",
     "unplugin-vue-markdown": "^29.1.0",
     "uuid": "^11.1.0",
diff --git a/src/components/QuillEditor.vue b/src/components/QuillEditor.vue
new file mode 100644
index 0000000..55c39b2
--- /dev/null
+++ b/src/components/QuillEditor.vue
@@ -0,0 +1,110 @@
+<template>
+  <div ref="quill"></div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import Quill, { Delta } from "quill";
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+
+type RangeStatic = { index: number; length: number };
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    toolbar: {
+      type: [String, Array, Object],
+      default: "",
+    },
+    modules: {
+      type: Object as PropType<Record<string, unknown>>,
+      default: {},
+    },
+    content: {
+      type: [String, Object] as PropType<string | Delta>,
+      default: "",
+    },
+    contentType: {
+      type: String as PropType<"delta" | "html" | "text">,
+      default: "text",
+    },
+    readonly: { type: Boolean, default: false },
+    placeholder: String,
+  },
+  emits: {
+    "update:content": (content: Delta | string) => true,
+    textChange: (tc: { delta: Delta; oldDelta: Delta; source: string }) => true,
+    selectionChange: (sc: { range: RangeStatic; oldRange: RangeStatic; source: string }) => true,
+    focus: () => true,
+    blur: () => true,
+    ready: (quill: Quill) => true,
+  },
+  watch: {
+    conent(val, oldVal) {
+      this.setContent(val);
+    },
+  },
+  data() {
+    return {
+      instance: undefined as undefined | Quill,
+    };
+  },
+  mounted() {
+    this.instance = new Quill(this.$refs.quill as HTMLElement, {
+      theme: "snow",
+      modules: {
+        toolbar: this.toolbar,
+      },
+      placeholder: this.placeholder,
+      readOnly: this.readonly,
+    });
+
+    this.instance.on("selection-change", (range, oldRange, source) => {
+      if (!range) {
+        this.$emit("blur");
+      } else {
+        this.$emit("focus");
+      }
+      this.$emit("selectionChange", { range, oldRange, source });
+    });
+    this.instance.on("text-change", (delta, oldDelta, source) => {
+      this.$emit("update:content", this.getContent());
+      this.$emit("textChange", { delta, oldDelta, source });
+    });
+
+    this.$emit("ready", this.instance as Quill);
+    this.setContent(this.content);
+  },
+  beforeUnmount() {
+    this.instance = undefined;
+  },
+  methods: {
+    getContent(): string | Delta {
+      if (this.contentType === "delta") {
+        return (this.instance?.getContents() ?? {}) as Delta;
+      } else if (this.contentType === "html") {
+        return this.instance?.getSemanticHTML() ?? "";
+      } else {
+        return this.instance?.getText() ?? "";
+      }
+    },
+    setContent(content: Delta | string) {
+      if (this.contentType === "delta") {
+        if (typeof content !== "string") {
+          this.instance?.setContents(content);
+        }
+      } else if (this.contentType === "html") {
+        if (typeof content === "string" && this.instance) {
+          this.instance.root.innerHTML = content;
+        }
+      } else {
+        if (typeof content === "string") {
+          this.instance?.setText(content);
+        }
+      }
+    },
+  },
+});
+</script>

From 08c3698dd8490508586302f878fb5ad0405dc18d Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Thu, 17 Jul 2025 13:57:50 +0200
Subject: [PATCH 3/6] update Editor usage

---
 src/components/QuillEditor.vue                | 34 ++++++++++++++-----
 .../admin/club/newsletter/NewsletterData.vue  |  3 +-
 .../admin/club/newsletter/NewsletterDates.vue |  3 +-
 .../club/newsletter/NewsletterOverview.vue    |  6 ++--
 .../admin/club/protocol/ProtocolAgenda.vue    |  3 +-
 .../admin/club/protocol/ProtocolDecisions.vue |  3 +-
 .../admin/club/protocol/ProtocolOverview.vue  |  3 +-
 .../admin/club/protocol/ProtocolVoting.vue    |  3 +-
 8 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/components/QuillEditor.vue b/src/components/QuillEditor.vue
index 55c39b2..8264879 100644
--- a/src/components/QuillEditor.vue
+++ b/src/components/QuillEditor.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import { defineComponent, type PropType } from "vue";
-import Quill, { Delta } from "quill";
+import Quill, { Delta, type QuillOptions } from "quill";
 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 
@@ -14,21 +14,24 @@ type RangeStatic = { index: number; length: number };
 <script lang="ts">
 export default defineComponent({
   props: {
+    options: {
+      type: Object as PropType<QuillOptions>,
+      default: {},
+    },
     toolbar: {
       type: [String, Array, Object],
       default: "",
     },
-    modules: {
-      type: Object as PropType<Record<string, unknown>>,
-      default: {},
-    },
     content: {
-      type: [String, Object] as PropType<string | Delta>,
+      type: [String, Object] as PropType<string | Delta | null>,
       default: "",
     },
     contentType: {
       type: String as PropType<"delta" | "html" | "text">,
       default: "text",
+      validator: (value: string) => {
+        return ["delta", "html", "text"].includes(value);
+      },
     },
     readonly: { type: Boolean, default: false },
     placeholder: String,
@@ -51,6 +54,16 @@ export default defineComponent({
       instance: undefined as undefined | Quill,
     };
   },
+  computed: {
+    value: {
+      get(): string | Delta {
+        return this.content ?? "";
+      },
+      set(val: string | Delta) {
+        this.$emit("update:content", val);
+      },
+    },
+  },
   mounted() {
     this.instance = new Quill(this.$refs.quill as HTMLElement, {
       theme: "snow",
@@ -59,6 +72,7 @@ export default defineComponent({
       },
       placeholder: this.placeholder,
       readOnly: this.readonly,
+      ...this.options,
     });
 
     this.instance.on("selection-change", (range, oldRange, source) => {
@@ -70,12 +84,12 @@ export default defineComponent({
       this.$emit("selectionChange", { range, oldRange, source });
     });
     this.instance.on("text-change", (delta, oldDelta, source) => {
-      this.$emit("update:content", this.getContent());
+      this.value = this.getContent();
       this.$emit("textChange", { delta, oldDelta, source });
     });
 
     this.$emit("ready", this.instance as Quill);
-    this.setContent(this.content);
+    this.setContent(this.value);
   },
   beforeUnmount() {
     this.instance = undefined;
@@ -91,6 +105,7 @@ export default defineComponent({
       }
     },
     setContent(content: Delta | string) {
+      if (content == "") return;
       if (this.contentType === "delta") {
         if (typeof content !== "string") {
           this.instance?.setContents(content);
@@ -98,6 +113,9 @@ export default defineComponent({
       } else if (this.contentType === "html") {
         if (typeof content === "string" && this.instance) {
           this.instance.root.innerHTML = content;
+          // this.instance.clipboard.dangerouslyPasteHTML(content);
+          // let delta = this.instance.clipboard.convert({ html: content });
+          // this.instance?.setContents(delta);
         }
       } else {
         if (typeof content === "string") {
diff --git a/src/views/admin/club/newsletter/NewsletterData.vue b/src/views/admin/club/newsletter/NewsletterData.vue
index f9195b6..15a5eea 100644
--- a/src/views/admin/club/newsletter/NewsletterData.vue
+++ b/src/views/admin/club/newsletter/NewsletterData.vue
@@ -52,8 +52,7 @@ import { defineComponent } from "vue";
 import { mapActions, mapState, mapWritableState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
 import { useNewsletterStore } from "@/stores/admin/club/newsletter/newsletter";
-import { QuillEditor } from "@vueup/vue-quill";
-import "@vueup/vue-quill/dist/vue-quill.snow.css";
+import QuillEditor from "@/components/QuillEditor.vue";
 import { toolbarOptions } from "@/helpers/quillConfig";
 import { useAbilityStore } from "@/stores/ability";
 </script>
diff --git a/src/views/admin/club/newsletter/NewsletterDates.vue b/src/views/admin/club/newsletter/NewsletterDates.vue
index 66a9baf..b47c903 100644
--- a/src/views/admin/club/newsletter/NewsletterDates.vue
+++ b/src/views/admin/club/newsletter/NewsletterDates.vue
@@ -107,8 +107,7 @@
 import { defineComponent } from "vue";
 import { mapActions, mapState, mapWritableState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
-import { QuillEditor } from "@vueup/vue-quill";
-import "@vueup/vue-quill/dist/vue-quill.snow.css";
+import QuillEditor from "@/components/QuillEditor.vue";
 import { toolbarOptions } from "@/helpers/quillConfig";
 import { useNewsletterDatesStore } from "@/stores/admin/club/newsletter/newsletterDates";
 import { useAbilityStore } from "@/stores/ability";
diff --git a/src/views/admin/club/newsletter/NewsletterOverview.vue b/src/views/admin/club/newsletter/NewsletterOverview.vue
index 5283ac0..1f4e1f9 100644
--- a/src/views/admin/club/newsletter/NewsletterOverview.vue
+++ b/src/views/admin/club/newsletter/NewsletterOverview.vue
@@ -18,13 +18,12 @@
         <label for="summary">Zusammenfassung</label>
         <QuillEditor
           id="summary"
-          theme="snow"
           placeholder="Zusammenfassung zum Newsletter..."
           style="height: 250px; max-height: 250px; min-height: 250px"
           contentType="html"
           :toolbar="toolbarOptions"
           v-model:content="activeNewsletterObj.description"
-          :enable="can('create', 'club', 'newsletter')"
+          :readonly="!can('create', 'club', 'newsletter')"
           :style="!can('create', 'club', 'newsletter') ? 'opacity: 75%; background: rgb(243 244 246)' : ''"
         />
       </div>
@@ -42,8 +41,7 @@ import { defineComponent } from "vue";
 import { mapActions, mapState, mapWritableState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
 import { useNewsletterStore } from "@/stores/admin/club/newsletter/newsletter";
-import { QuillEditor } from "@vueup/vue-quill";
-import "@vueup/vue-quill/dist/vue-quill.snow.css";
+import QuillEditor from "@/components/QuillEditor.vue";
 import { toolbarOptions } from "@/helpers/quillConfig";
 import { useAbilityStore } from "@/stores/ability";
 </script>
diff --git a/src/views/admin/club/protocol/ProtocolAgenda.vue b/src/views/admin/club/protocol/ProtocolAgenda.vue
index 8e17344..300facc 100644
--- a/src/views/admin/club/protocol/ProtocolAgenda.vue
+++ b/src/views/admin/club/protocol/ProtocolAgenda.vue
@@ -78,8 +78,7 @@
 import { defineComponent } from "vue";
 import { mapActions, mapState, mapWritableState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
-import { QuillEditor } from "@vueup/vue-quill";
-import "@vueup/vue-quill/dist/vue-quill.snow.css";
+import QuillEditor from "@/components/QuillEditor.vue";
 import { toolbarOptions } from "@/helpers/quillConfig";
 import { useProtocolAgendaStore } from "@/stores/admin/club/protocol/protocolAgenda";
 import { useAbilityStore } from "@/stores/ability";
diff --git a/src/views/admin/club/protocol/ProtocolDecisions.vue b/src/views/admin/club/protocol/ProtocolDecisions.vue
index e63570e..2d3dd3a 100644
--- a/src/views/admin/club/protocol/ProtocolDecisions.vue
+++ b/src/views/admin/club/protocol/ProtocolDecisions.vue
@@ -78,8 +78,7 @@
 import { defineComponent } from "vue";
 import { mapActions, mapState, mapWritableState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
-import { QuillEditor } from "@vueup/vue-quill";
-import "@vueup/vue-quill/dist/vue-quill.snow.css";
+import QuillEditor from "@/components/QuillEditor.vue";
 import { toolbarOptions } from "@/helpers/quillConfig";
 import { useProtocolDecisionStore } from "@/stores/admin/club/protocol/protocolDecision";
 import { useAbilityStore } from "@/stores/ability";
diff --git a/src/views/admin/club/protocol/ProtocolOverview.vue b/src/views/admin/club/protocol/ProtocolOverview.vue
index d5f984a..7c696f7 100644
--- a/src/views/admin/club/protocol/ProtocolOverview.vue
+++ b/src/views/admin/club/protocol/ProtocolOverview.vue
@@ -64,8 +64,7 @@ import { defineComponent } from "vue";
 import { mapActions, mapState, mapWritableState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
 import { useProtocolStore } from "@/stores/admin/club/protocol/protocol";
-import { QuillEditor } from "@vueup/vue-quill";
-import "@vueup/vue-quill/dist/vue-quill.snow.css";
+import QuillEditor from "@/components/QuillEditor.vue";
 import { toolbarOptions } from "@/helpers/quillConfig";
 import { useAbilityStore } from "@/stores/ability";
 </script>
diff --git a/src/views/admin/club/protocol/ProtocolVoting.vue b/src/views/admin/club/protocol/ProtocolVoting.vue
index 6d26871..0692486 100644
--- a/src/views/admin/club/protocol/ProtocolVoting.vue
+++ b/src/views/admin/club/protocol/ProtocolVoting.vue
@@ -95,8 +95,7 @@
 import { defineComponent } from "vue";
 import { mapActions, mapState, mapWritableState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
-import { QuillEditor } from "@vueup/vue-quill";
-import "@vueup/vue-quill/dist/vue-quill.snow.css";
+import QuillEditor from "@/components/QuillEditor.vue";
 import { toolbarOptions } from "@/helpers/quillConfig";
 import { useProtocolVotingStore } from "@/stores/admin/club/protocol/protocolVoting";
 import { useAbilityStore } from "@/stores/ability";

From e6dfde058d2e239ca05666ac93a68e27bd63ff41 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Fri, 18 Jul 2025 15:18:09 +0200
Subject: [PATCH 4/6] rewirte in composition api to prevent this ref errors

---
 src/components/QuillEditor.vue | 217 ++++++++++++++++-----------------
 1 file changed, 108 insertions(+), 109 deletions(-)

diff --git a/src/components/QuillEditor.vue b/src/components/QuillEditor.vue
index 8264879..6787edf 100644
--- a/src/components/QuillEditor.vue
+++ b/src/components/QuillEditor.vue
@@ -3,126 +3,125 @@
 </template>
 
 <script setup lang="ts">
-import { defineComponent, type PropType } from "vue";
+import { markRaw, onMounted, onUnmounted, ref, useTemplateRef, watch, type PropType } from "vue";
 import Quill, { Delta, type QuillOptions } from "quill";
 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
+import isEqual from "lodash.isequal";
+import cloneDeep from "lodash.clonedeep";
 
 type RangeStatic = { index: number; length: number };
-</script>
 
-<script lang="ts">
-export default defineComponent({
-  props: {
-    options: {
-      type: Object as PropType<QuillOptions>,
-      default: {},
-    },
-    toolbar: {
-      type: [String, Array, Object],
-      default: "",
-    },
-    content: {
-      type: [String, Object] as PropType<string | Delta | null>,
-      default: "",
-    },
-    contentType: {
-      type: String as PropType<"delta" | "html" | "text">,
-      default: "text",
-      validator: (value: string) => {
-        return ["delta", "html", "text"].includes(value);
-      },
-    },
-    readonly: { type: Boolean, default: false },
-    placeholder: String,
-  },
-  emits: {
-    "update:content": (content: Delta | string) => true,
-    textChange: (tc: { delta: Delta; oldDelta: Delta; source: string }) => true,
-    selectionChange: (sc: { range: RangeStatic; oldRange: RangeStatic; source: string }) => true,
-    focus: () => true,
-    blur: () => true,
-    ready: (quill: Quill) => true,
-  },
-  watch: {
-    conent(val, oldVal) {
-      this.setContent(val);
-    },
-  },
-  data() {
-    return {
-      instance: undefined as undefined | Quill,
-    };
-  },
-  computed: {
-    value: {
-      get(): string | Delta {
-        return this.content ?? "";
-      },
-      set(val: string | Delta) {
-        this.$emit("update:content", val);
-      },
-    },
-  },
-  mounted() {
-    this.instance = new Quill(this.$refs.quill as HTMLElement, {
-      theme: "snow",
-      modules: {
-        toolbar: this.toolbar,
-      },
-      placeholder: this.placeholder,
-      readOnly: this.readonly,
-      ...this.options,
-    });
+const quillElement = useTemplateRef("quill");
 
-    this.instance.on("selection-change", (range, oldRange, source) => {
-      if (!range) {
-        this.$emit("blur");
-      } else {
-        this.$emit("focus");
-      }
-      this.$emit("selectionChange", { range, oldRange, source });
-    });
-    this.instance.on("text-change", (delta, oldDelta, source) => {
-      this.value = this.getContent();
-      this.$emit("textChange", { delta, oldDelta, source });
-    });
+const instance = ref<undefined | Quill>();
+const model = ref<string | Delta>("");
 
-    this.$emit("ready", this.instance as Quill);
-    this.setContent(this.value);
+const props = defineProps({
+  options: {
+    type: Object as PropType<QuillOptions>,
+    default: {},
   },
-  beforeUnmount() {
-    this.instance = undefined;
+  toolbar: {
+    type: [String, Array, Object],
+    default: "",
   },
-  methods: {
-    getContent(): string | Delta {
-      if (this.contentType === "delta") {
-        return (this.instance?.getContents() ?? {}) as Delta;
-      } else if (this.contentType === "html") {
-        return this.instance?.getSemanticHTML() ?? "";
-      } else {
-        return this.instance?.getText() ?? "";
-      }
-    },
-    setContent(content: Delta | string) {
-      if (content == "") return;
-      if (this.contentType === "delta") {
-        if (typeof content !== "string") {
-          this.instance?.setContents(content);
-        }
-      } else if (this.contentType === "html") {
-        if (typeof content === "string" && this.instance) {
-          this.instance.root.innerHTML = content;
-          // this.instance.clipboard.dangerouslyPasteHTML(content);
-          // let delta = this.instance.clipboard.convert({ html: content });
-          // this.instance?.setContents(delta);
-        }
-      } else {
-        if (typeof content === "string") {
-          this.instance?.setText(content);
-        }
-      }
+  content: {
+    type: [String, Object] as PropType<string | Delta | null>,
+    default: "",
+  },
+  contentType: {
+    type: String as PropType<"delta" | "html" | "text">,
+    default: "text",
+    validator: (value: string) => {
+      return ["delta", "html", "text"].includes(value);
     },
   },
+  readonly: { type: Boolean, default: false },
+  placeholder: String,
 });
+
+const emit = defineEmits({
+  "update:content": (content: Delta | string) => true,
+  textChange: (tc: { delta: Delta; oldDelta: Delta; source: string }) => true,
+  selectionChange: (sc: { range: RangeStatic; oldRange: RangeStatic; source: string }) => true,
+  focus: () => true,
+  blur: () => true,
+  ready: (quill: Quill) => true,
+});
+
+watch(
+  () => props.content,
+  (val, oldVal) => {
+    if (!instance.value || !val || isEqual(val, model.value)) return;
+    console.log("hi");
+    setContent(cloneDeep(val));
+  },
+  { deep: true }
+);
+watch(model, (val, oldVal) => {
+  emit("update:content", cloneDeep(val));
+});
+
+onMounted(() => {
+  if (!quillElement.value) return;
+  const quill = new Quill(quillElement.value, {
+    theme: "snow",
+    modules: {
+      toolbar: props.toolbar,
+    },
+    placeholder: props.placeholder,
+    readOnly: props.readonly,
+    ...props.options,
+  });
+
+  quill.on(Quill.events.SELECTION_CHANGE, (range, oldRange, source) => {
+    if (!range) {
+      emit("blur");
+    } else {
+      emit("focus");
+    }
+    console.log(range);
+    emit("selectionChange", { range, oldRange, source });
+  });
+  quill.on(Quill.events.TEXT_CHANGE, (delta, oldDelta, source) => {
+    model.value = getContent();
+    emit("textChange", { delta, oldDelta, source });
+  });
+
+  emit("ready", quill);
+  instance.value = markRaw(quill);
+  setContent(cloneDeep(props.content ?? ""));
+});
+onUnmounted(() => {
+  instance.value = undefined;
+});
+
+function getContent(): string | Delta {
+  if (props.contentType === "delta") {
+    return (instance.value?.getContents() ?? {}) as Delta;
+  } else if (props.contentType === "html") {
+    return instance.value?.getSemanticHTML() ?? "";
+  } else {
+    return instance.value?.getText() ?? "";
+  }
+}
+function setContent(content: Delta | string) {
+  if (content == "") return;
+  if (props.contentType === "delta") {
+    if (typeof content !== "string") {
+      instance.value?.setContents(content);
+    }
+  } else if (props.contentType === "html") {
+    if (typeof content === "string" && instance.value) {
+      instance.value.clipboard.dangerouslyPasteHTML(content);
+      let delta = instance.value.clipboard.convert({ html: content });
+      instance.value?.setContents(delta);
+    }
+  } else {
+    if (typeof content === "string") {
+      instance.value?.setText(content);
+    }
+  }
+}
 </script>

From 4265ed679197a64c3f89379549d35f5d2bc49e5d Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Fri, 18 Jul 2025 15:52:54 +0200
Subject: [PATCH 5/6] enhance unmount and format

---
 src/components/QuillEditor.vue | 32 ++++++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/components/QuillEditor.vue b/src/components/QuillEditor.vue
index 6787edf..ae00810 100644
--- a/src/components/QuillEditor.vue
+++ b/src/components/QuillEditor.vue
@@ -1,5 +1,7 @@
 <template>
-  <div ref="quill"></div>
+  <div :id="id" :style="style" class="flex flex-col">
+    <div ref="quill"></div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -18,6 +20,8 @@ const instance = ref<undefined | Quill>();
 const model = ref<string | Delta>("");
 
 const props = defineProps({
+  id: String,
+  style: [String, Object],
   options: {
     type: Object as PropType<QuillOptions>,
     default: {},
@@ -54,11 +58,16 @@ watch(
   () => props.content,
   (val, oldVal) => {
     if (!instance.value || !val || isEqual(val, model.value)) return;
-    console.log("hi");
     setContent(cloneDeep(val));
   },
   { deep: true }
 );
+watch(
+  () => props.readonly,
+  (val, oldVal) => {
+    instance.value?.enable(val);
+  }
+);
 watch(model, (val, oldVal) => {
   emit("update:content", cloneDeep(val));
 });
@@ -81,7 +90,6 @@ onMounted(() => {
     } else {
       emit("focus");
     }
-    console.log(range);
     emit("selectionChange", { range, oldRange, source });
   });
   quill.on(Quill.events.TEXT_CHANGE, (delta, oldDelta, source) => {
@@ -94,7 +102,11 @@ onMounted(() => {
   setContent(cloneDeep(props.content ?? ""));
 });
 onUnmounted(() => {
-  instance.value = undefined;
+  if (instance.value) {
+    instance.value.off(Quill.events.SELECTION_CHANGE);
+    instance.value.off(Quill.events.TEXT_CHANGE);
+    instance.value = undefined;
+  }
 });
 
 function getContent(): string | Delta {
@@ -125,3 +137,15 @@ function setContent(content: Delta | string) {
   }
 }
 </script>
+
+<style>
+.ql-container {
+  border-bottom-left-radius: 0.5em;
+  border-bottom-right-radius: 0.5em;
+}
+.ql-toolbar {
+  background: var(--color-gray-100);
+  border-top-left-radius: 0.5em;
+  border-top-right-radius: 0.5em;
+}
+</style>

From 53fd89dd9ebca766f2467f76951b58a6ffc3ec8b Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Fri, 18 Jul 2025 16:16:07 +0200
Subject: [PATCH 6/6] fix: return text with normal whitespace

---
 src/components/QuillEditor.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/QuillEditor.vue b/src/components/QuillEditor.vue
index ae00810..1cd192d 100644
--- a/src/components/QuillEditor.vue
+++ b/src/components/QuillEditor.vue
@@ -113,9 +113,9 @@ function getContent(): string | Delta {
   if (props.contentType === "delta") {
     return (instance.value?.getContents() ?? {}) as Delta;
   } else if (props.contentType === "html") {
-    return instance.value?.getSemanticHTML() ?? "";
+    return instance.value?.getSemanticHTML().replace(/&nbsp;/g, " ") ?? "";
   } else {
-    return instance.value?.getText() ?? "";
+    return instance.value?.getText().replace(/&nbsp;/g, " ") ?? "";
   }
 }
 function setContent(content: Delta | string) {