Added multiple features

src/content/admin/EditPagesComponent.vue

@@ -11,11 +11,18 @@
       <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()">H1</button>
       <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()">H2</button>
       <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()">H3</button>
-      <button @click="editor.chain().focus().toggleBold().run()">Fett</button>
-      <button @click="editor.chain().focus().toggleItalic().run()">Kursiv</button>
-      <button @click="editor.chain().focus().toggleUnderline().run()">Unterstrichen</button>
+      <button @click="editor.chain().focus().toggleBold().run()" width="24" height="24">
+        <BoldIcon width="24" height="24" />
+      </button>
+      <button @click="editor.chain().focus().toggleItalic().run()">
+        <ItalicIcon width="24" height="24" />
+      </button>
+      <button @click="editor.chain().focus().toggleUnderline().run()">
+        <UnderlineIcon width="24" height="24" />
+      </button>
       <button @click="editor.chain().focus().toggleStrike().run()">Durchgestrichen</button>
-      <button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">Tabelle</button>
+      <button
+        @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">Tabelle</button>
       <button @click="editor.chain().focus().toggleBulletList().run()">Liste</button>
       <button @click="editor.chain().focus().toggleOrderedList().run()">Nummerierte Liste</button>
     </div>
@@ -62,12 +69,16 @@ import OrderedList from '@tiptap/extension-ordered-list';
 import Heading from '@tiptap/extension-heading';
 import { CustomTableCell, CustomTableHeader } from '../../extensions/CustomTableCell';
 import WorshipDialog from '@/components/WorshipDialog.vue';
+import { BoldIcon, ItalicIcon, UnderlineIcon } from '@/icons';
 
 export default {
   name: 'EditPagesComponent',
   components: {
     EditorContent,
     WorshipDialog,
+    BoldIcon,
+    ItalicIcon,
+    UnderlineIcon
   },
   setup() {
     const store = useStore();
@@ -110,7 +121,7 @@ export default {
         }
       });
     };
-    
+
     const fetchPages = async () => {
       try {
         const response = await axios.get('/menu-data');
@@ -179,9 +190,10 @@ export default {
       worshipDialog.value.openWorshipDialog();
     };
 
-    const insertWorshipList = (configuration) => {
+    const insertWorshipList = (selectedLocations) => {
       if (editor.value) {
-        editor.value.chain().focus().insertContent(`{{ worshipslist:location=${configuration},order:"date asc" }}`).run();
+        const configuration = `location=${selectedLocations},order:"date asc"`;
+        editor.value.chain().focus().insertContent(`{{ worshipslist:${configuration} }}`).run();
       }
     };
 
@@ -215,7 +227,7 @@ export default {
   margin-bottom: 10px;
 }
 
-.toolbar button { 
+.toolbar button {
   margin-right: 5px;
 }
 
@@ -242,4 +254,19 @@ export default {
 .ql-editor {
   background-color: #fff !important;
 }
+
+.edit-pages div>button {
+  border: none;
+  padding: 0.25em;
+  margin: 2px;
+}
+
+.button-icon {
+  background-image: url(@/assets/icons/Bold_Italic_Underline.png);
+  background-position: left top;
+  background-size: 10px 24px;
+  background-repeat: no-repeat;
+  width: 24px;
+  height: 24px;
+}
 </style>