From b18c9115005d24a7e85a5b670ba8ad1dad034493 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Tue, 7 Oct 2025 17:37:16 +0200
Subject: [PATCH] =?UTF-8?q?Verbessere=20die=20Benutzeroberfl=C3=A4che=20de?=
 =?UTF-8?q?s=20EditPagesComponent:=20F=C3=BCge=20aktive=20Klassen=20zu=20S?=
 =?UTF-8?q?chaltfl=C3=A4chen=20hinzu,=20um=20den=20aktuellen=20Status=20de?=
 =?UTF-8?q?r=20Textformatierungen=20anzuzeigen.=20Aktualisiere=20die=20Sti?=
 =?UTF-8?q?le=20f=C3=BCr=20aktive=20Schaltfl=C3=A4chen=20zur=20besseren=20?=
 =?UTF-8?q?Sichtbarkeit.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/content/admin/EditPagesComponent.vue | 32 ++++++++++++++++--------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/content/admin/EditPagesComponent.vue b/src/content/admin/EditPagesComponent.vue
index cc83ecb..b5ee249 100644
--- a/src/content/admin/EditPagesComponent.vue
+++ b/src/content/admin/EditPagesComponent.vue
@@ -8,29 +8,29 @@
       </select>
     </div>
     <div class="toolbar">
-      <button @click="toggleHeading(3)">H3</button>
-      <button @click="toggleHeading(4)">H4</button>
-      <button @click="toggleHeading(5)">H5</button>
-      <button @click="toggleHeading(6)">H6</button>
-      <button @click="toggleBold()" width="24" height="24">
+      <button @click="toggleHeading(3)" :class="{ 'is-active': editor && editor.isActive('heading', { level: 3 }) }">H3</button>
+      <button @click="toggleHeading(4)" :class="{ 'is-active': editor && editor.isActive('heading', { level: 4 }) }">H4</button>
+      <button @click="toggleHeading(5)" :class="{ 'is-active': editor && editor.isActive('heading', { level: 5 }) }">H5</button>
+      <button @click="toggleHeading(6)" :class="{ 'is-active': editor && editor.isActive('heading', { level: 6 }) }">H6</button>
+      <button @click="toggleBold()" :class="{ 'is-active': editor && editor.isActive('bold') }" width="24" height="24">
         <BoldIcon width="24" height="24" />
       </button>
-      <button @click="toggleItalic()">
+      <button @click="toggleItalic()" :class="{ 'is-active': editor && editor.isActive('italic') }">
         <ItalicIcon width="24" height="24" />
       </button>
-      <button @click="toggleUnderline()">
+      <button @click="toggleUnderline()" :class="{ 'is-active': editor && editor.isActive('underline') }">
         <UnderlineIcon width="24" height="24" />
       </button>
-      <button @click="toggleStrike()">
+      <button @click="toggleStrike()" :class="{ 'is-active': editor && editor.isActive('strike') }">
         <StrikethroughIcon width="24" height="24" />
       </button>
       <button @click="insertTable()">
         <TableIcon width="24" height="24" />
       </button>
-      <button @click="toggleBulletList()">
+      <button @click="toggleBulletList()" :class="{ 'is-active': editor && editor.isActive('bulletList') }">
         <ListIcon width="24" height="24" />
       </button>
-      <button @click="toggleOrderedList()">
+      <button @click="toggleOrderedList()" :class="{ 'is-active': editor && editor.isActive('orderedList') }">
         <NumberedListLeftIcon width="24" height="24" />
       </button>
       <button @click="openAddImageDialog">
@@ -511,4 +511,16 @@ export default {
 .align-top {
   vertical-align: top;
 }
+
+.toolbar button.is-active,
+.table-toolbar button.is-active {
+  background-color: #4CAF50;
+  color: white;
+  border: 2px solid #2E7D32;
+}
+
+.toolbar button.is-active svg,
+.table-toolbar button.is-active svg {
+  fill: white;
+}
 </style>