Add link or color added

src/content/admin/EditPagesComponent.vue

@@ -8,61 +8,66 @@
       </select>
     </div>
     <div class="toolbar">
-      <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()" width="24" height="24">
+      <button @click="editor.value.chain().focus().toggleHeading({ level: 1 }).run()">H1</button>
+      <button @click="editor.value.chain().focus().toggleHeading({ level: 2 }).run()">H2</button>
+      <button @click="editor.value.chain().focus().toggleHeading({ level: 3 }).run()">H3</button>
+      <button @click="editor.value.chain().focus().toggleBold().run()" width="24" height="24">
         <BoldIcon width="24" height="24" />
       </button>
-      <button @click="editor.chain().focus().toggleItalic().run()">
+      <button @click="editor.value.chain().focus().toggleItalic().run()">
         <ItalicIcon width="24" height="24" />
       </button>
-      <button @click="editor.chain().focus().toggleUnderline().run()">
+      <button @click="editor.value.chain().focus().toggleUnderline().run()">
         <UnderlineIcon width="24" height="24" />
       </button>
-      <button @click="editor.chain().focus().toggleStrike().run()">
+      <button @click="editor.value.chain().focus().toggleStrike().run()">
         <StrikethroughIcon width="24" height="24" />
       </button>
-      <button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
+      <button @click="editor.value.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
         <TableIcon width="24" height="24" />
       </button>
-      <button @click="editor.chain().focus().toggleBulletList().run()">
+      <button @click="editor.value.chain().focus().toggleBulletList().run()">
         <ListIcon width="24" height="24" />
       </button>
-      <button @click="editor.chain().focus().toggleOrderedList().run()">
+      <button @click="editor.value.chain().focus().toggleOrderedList().run()">
         <NumberedListLeftIcon width="24" height="24" />
       </button>
       <button @click="openAddImageDialog">
         <StatsReportIcon width="24" height="24" />
       </button>
+      <button @click="openAddLinkDialog">
+        <OpenInWindowIcon width="24" height="24" />
+      </button>
+      <button @click="openColorPicker">Schriftfarbe</button>
+      <input type="color" ref="colorPicker" @input="setColor" style="display: none;" />
     </div>
     <div class="table-toolbar">
-      <button @click="editor.chain().focus().addColumnBefore().run()">
+      <button @click="editor.value.chain().focus().addColumnBefore().run()">
         <ArrowDownIcon width="10" height="10" class="align-top" />
         <Table2ColumnsIcon width="24" height="24" />
       </button>
-      <button @click="editor.chain().focus().addColumnAfter().run()">
+      <button @click="editor.value.chain().focus().addColumnAfter().run()">
         <Table2ColumnsIcon width="24" height="24" />
         <ArrowDownIcon width="10" height="10" class="align-top" />
       </button>
-      <button @click="editor.chain().focus().addRowBefore().run()">
+      <button @click="editor.value.chain().focus().addRowBefore().run()">
         <ArrowRightIcon width="10" height="10" class="align-top" />
         <TableRowsIcon width="24" height="24" />
       </button>
-      <button @click="editor.chain().focus().addRowAfter().run()">
+      <button @click="editor.value.chain().focus().addRowAfter().run()">
         <ArrowRightIcon width="10" height="10" />
         <TableRowsIcon width="24" height="24" />
       </button>
-      <button @click="editor.chain().focus().deleteColumn().run()">
+      <button @click="editor.value.chain().focus().deleteColumn().run()">
         <Table2ColumnsIcon width="24" height="24" class="delete-icon" />
       </button>
-      <button @click="editor.chain().focus().deleteRow().run()">
+      <button @click="editor.value.chain().focus().deleteRow().run()">
         <TableRowsIcon width="24" height="24" class="delete-icon" />
       </button>
-      <button @click="editor.chain().focus().toggleHeaderColumn().run()">
+      <button @click="editor.value.chain().focus().toggleHeaderColumn().run()">
         <AlignTopBoxIcon width="24" height="24" />
       </button>
-      <button @click="editor.chain().focus().toggleHeaderRow().run()">
+      <button @click="editor.value.chain().focus().toggleHeaderRow().run()">
         <AlignLeftBoxIcon width="24" height="24" />
       </button>
     </div>
@@ -80,6 +85,8 @@
     <WorshipDialog ref="worshipDialog" @confirm="insertWorshipList" />
     <AddImageDialog ref="addImageDialog" @confirm="insertImage" />
     <AddEventDialog ref="addEventDialog" @confirm="insertEvent" />
+    <AddLinkDialog ref="addLinkDialog" @confirm="insertLink" />
+    <input type="color" ref="colorPicker" @input="setColor" style="display: none;" />
   </div>
 </template>
 
@@ -98,10 +105,14 @@ import Strike from '@tiptap/extension-strike';
 import BulletList from '@tiptap/extension-bullet-list';
 import OrderedList from '@tiptap/extension-ordered-list';
 import Heading from '@tiptap/extension-heading';
+import Link from '@tiptap/extension-link';
+import TextStyle from '@tiptap/extension-text-style';
+import Color from '@tiptap/extension-color';
 import { CustomTableCell, CustomTableHeader } from '../../extensions/CustomTableCell';
 import WorshipDialog from '@/components/WorshipDialog.vue';
 import AddImageDialog from '@/components/AddImageDialog.vue';
 import AddEventDialog from '@/components/AddEventDialog.vue';
+import AddLinkDialog from '@/components/AddLinkDialog.vue';
 
 import { BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, ListIcon, NumberedListLeftIcon, TableIcon,
   Table2ColumnsIcon, ArrowDownIcon, ArrowRightIcon, TableRowsIcon, AlignTopBoxIcon, AlignLeftBoxIcon, StatsReportIcon
@@ -128,6 +139,7 @@ export default {
     AlignLeftBoxIcon,
     StatsReportIcon,
     AddEventDialog,
+    AddLinkDialog,
   },
   setup() {
     const store = useStore();
@@ -137,6 +149,8 @@ export default {
     const worshipDialog = ref(null);
     const addImageDialog = ref(null);
     const addEventDialog = ref(null);
+    const addLinkDialog = ref(null);
+    const colorPicker = ref(null);
 
     const editor = useEditor({
       extensions: [
@@ -156,6 +170,11 @@ export default {
         Heading.configure({
           levels: [1, 2, 3],
         }),
+        Link.configure({
+          openOnClick: false,
+        }),
+        TextStyle,
+        Color,
       ],
       content: '',
       onUpdate: ({ editor }) => {
@@ -268,6 +287,27 @@ export default {
       }
     };
 
+    const openAddLinkDialog = () => {
+      addLinkDialog.value.openAddLinkDialog();
+    };
+
+    const insertLink = ({ url, text }) => {
+      if (url && text && editor.value) {
+        editor.value.chain().focus().extendMarkRange('link').setLink({ href: url }).insertContent(text).run();
+      }
+    };
+
+    const openColorPicker = () => {
+      colorPicker.value.click();
+    };
+
+    const setColor = (event) => {
+      const color = event.target.value;
+      if (editor.value) {
+        editor.value.chain().focus().setColor(color).run();
+      }
+    };
+
     return {
       pages,
       sortedPages,
@@ -285,6 +325,12 @@ export default {
       addEventDialog,
       openAddEventsDialog: openAddEventDialog,
       insertEvent,
+      addLinkDialog,
+      openAddLinkDialog,
+      insertLink,
+      colorPicker,
+      openColorPicker,
+      setColor,
     };
   },
 };
@@ -346,9 +392,11 @@ export default {
   width: 24px;
   height: 24px;
 }
+
 .delete-icon {
   fill: #ff0000;
 }
+
 .align-top {
   vertical-align: top;
 }