extended editor

src/content/admin/EditPagesComponent.vue

@@ -8,28 +8,28 @@
       </select>
     </div>
     <div class="toolbar">
-      <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">
+      <button @click="toggleHeading(1)">H1</button>
+      <button @click="toggleHeading(2)">H2</button>
+      <button @click="toggleHeading(3)">H3</button>
+      <button @click="toggleBold()" width="24" height="24">
         <BoldIcon width="24" height="24" />
       </button>
-      <button @click="editor.value.chain().focus().toggleItalic().run()">
+      <button @click="toggleItalic()">
         <ItalicIcon width="24" height="24" />
       </button>
-      <button @click="editor.value.chain().focus().toggleUnderline().run()">
+      <button @click="toggleUnderline()">
         <UnderlineIcon width="24" height="24" />
       </button>
-      <button @click="editor.value.chain().focus().toggleStrike().run()">
+      <button @click="toggleStrike()">
         <StrikethroughIcon width="24" height="24" />
       </button>
-      <button @click="editor.value.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
+      <button @click="insertTable()">
         <TableIcon width="24" height="24" />
       </button>
-      <button @click="editor.value.chain().focus().toggleBulletList().run()">
+      <button @click="toggleBulletList()">
         <ListIcon width="24" height="24" />
       </button>
-      <button @click="editor.value.chain().focus().toggleOrderedList().run()">
+      <button @click="toggleOrderedList()">
         <NumberedListLeftIcon width="24" height="24" />
       </button>
       <button @click="openAddImageDialog">
@@ -38,36 +38,39 @@
       <button @click="openAddLinkDialog">
         <OpenInWindowIcon width="24" height="24" />
       </button>
+      <button @click="openAddDownloadDialog">
+        <DownloadIcon 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.value.chain().focus().addColumnBefore().run()">
+      <button @click="addColumnBefore()">
         <ArrowDownIcon width="10" height="10" class="align-top" />
         <Table2ColumnsIcon width="24" height="24" />
       </button>
-      <button @click="editor.value.chain().focus().addColumnAfter().run()">
+      <button @click="addColumnAfter()">
         <Table2ColumnsIcon width="24" height="24" />
         <ArrowDownIcon width="10" height="10" class="align-top" />
       </button>
-      <button @click="editor.value.chain().focus().addRowBefore().run()">
+      <button @click="addRowBefore()">
         <ArrowRightIcon width="10" height="10" class="align-top" />
         <TableRowsIcon width="24" height="24" />
       </button>
-      <button @click="editor.value.chain().focus().addRowAfter().run()">
+      <button @click="addRowAfter()">
         <ArrowRightIcon width="10" height="10" />
         <TableRowsIcon width="24" height="24" />
       </button>
-      <button @click="editor.value.chain().focus().deleteColumn().run()">
+      <button @click="deleteColumn()">
         <Table2ColumnsIcon width="24" height="24" class="delete-icon" />
       </button>
-      <button @click="editor.value.chain().focus().deleteRow().run()">
+      <button @click="deleteRow()">
         <TableRowsIcon width="24" height="24" class="delete-icon" />
       </button>
-      <button @click="editor.value.chain().focus().toggleHeaderColumn().run()">
+      <button @click="toggleHeaderColumn()">
         <AlignTopBoxIcon width="24" height="24" />
       </button>
-      <button @click="editor.value.chain().focus().toggleHeaderRow().run()">
+      <button @click="toggleHeaderRow()">
         <AlignLeftBoxIcon width="24" height="24" />
       </button>
     </div>
@@ -86,6 +89,7 @@
     <AddImageDialog ref="addImageDialog" @confirm="insertImage" />
     <AddEventDialog ref="addEventDialog" @confirm="insertEvent" />
     <AddLinkDialog ref="addLinkDialog" @confirm="insertLink" />
+    <AddDownloadDialog ref="addDownloadDialog" @confirm="insertDownload" />
     <input type="color" ref="colorPicker" @input="setColor" style="display: none;" />
   </div>
 </template>
@@ -113,9 +117,11 @@ 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 AddDownloadDialog from '@/components/AddDownloadDialog.vue';
 
 import { BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, ListIcon, NumberedListLeftIcon, TableIcon,
-  Table2ColumnsIcon, ArrowDownIcon, ArrowRightIcon, TableRowsIcon, AlignTopBoxIcon, AlignLeftBoxIcon, StatsReportIcon
+  Table2ColumnsIcon, ArrowDownIcon, ArrowRightIcon, TableRowsIcon, AlignTopBoxIcon, AlignLeftBoxIcon, StatsReportIcon,
+  OpenInWindowIcon, DownloadIcon
  } from '@/icons';
 
 export default {
@@ -140,6 +146,9 @@ export default {
     StatsReportIcon,
     AddEventDialog,
     AddLinkDialog,
+    AddDownloadDialog,
+    OpenInWindowIcon,
+    DownloadIcon,
   },
   setup() {
     const store = useStore();
@@ -150,6 +159,7 @@ export default {
     const addImageDialog = ref(null);
     const addEventDialog = ref(null);
     const addLinkDialog = ref(null);
+    const addDownloadDialog = ref(null);
     const colorPicker = ref(null);
 
     const editor = useEditor({
@@ -297,6 +307,17 @@ export default {
       }
     };
 
+    const openAddDownloadDialog = () => {
+      addDownloadDialog.value.openAddDownloadDialog();
+    };
+
+    const insertDownload = ({ title, hash, extension }) => {
+      if (title && hash && extension && editor.value) {
+        const url = `/files/download/${hash}`;
+        editor.value.chain().focus().extendMarkRange('link').setLink({ href: url }).insertContent(title).run();
+      }
+    };
+
     const openColorPicker = () => {
       colorPicker.value.click();
     };
@@ -308,6 +329,38 @@ export default {
       }
     };
 
+    const toggleHeading = (level) => {
+      editor.value.chain().focus().toggleHeading({level: level}).run();
+    };
+
+    const toggleItalic = () => {
+      editor.value.chain().focus().toggleItalic().run();
+    };
+
+    const toggleBold = () => {
+      editor.value.chain().focus().toggleBold().run();
+    };
+
+    const toggleUnderline = () => {
+      editor.value.chain().focus().toggleUnderline().run();
+    };
+
+    const toggleStrike = () => {
+      editor.value.chain().focus().toggleStrike().run();
+    };
+
+    const insertTable = () => {
+      editor.value.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+    };
+
+    const toggleBulletList = () => {
+      editor.value.chain().focus().toggleBulletList().run();
+    };
+
+    const toggleOrderedList = () => {
+      editor.value.chain().focus().toggleOrderedList().run();
+    };
+
     return {
       pages,
       sortedPages,
@@ -328,9 +381,20 @@ export default {
       addLinkDialog,
       openAddLinkDialog,
       insertLink,
+      addDownloadDialog,
+      openAddDownloadDialog,
+      insertDownload,
       colorPicker,
       openColorPicker,
       setColor,
+      toggleHeading,
+      toggleBold,
+      toggleItalic,
+      toggleUnderline,
+      toggleStrike,
+      insertTable,
+      toggleBulletList,
+      toggleOrderedList,
     };
   },
 };