Add link or color added

2024-06-20 23:50:22 +02:00
parent 240409d52a
commit dcfd478464
6 changed files with 226 additions and 57 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,14 +11,17 @@
        "@iconoir/vue": "^7.7.0",
        "@tiptap/extension-bold": "^2.4.0",
        "@tiptap/extension-bullet-list": "^2.4.0",
+        "@tiptap/extension-color": "^2.4.0",
        "@tiptap/extension-heading": "^2.4.0",
        "@tiptap/extension-italic": "^2.4.0",
+        "@tiptap/extension-link": "^2.4.0",
        "@tiptap/extension-ordered-list": "^2.4.0",
        "@tiptap/extension-strike": "^2.4.0",
        "@tiptap/extension-table": "^2.4.0",
        "@tiptap/extension-table-cell": "^2.4.0",
        "@tiptap/extension-table-header": "^2.4.0",
        "@tiptap/extension-table-row": "^2.4.0",
+        "@tiptap/extension-text-style": "^2.4.0",
        "@tiptap/extension-underline": "^2.4.0",
        "@tiptap/starter-kit": "^2.4.0",
        "@tiptap/vue-3": "^2.4.0",
@@ -2451,6 +2454,19 @@
        "@tiptap/pm": "^2.0.0"
      }
    },
+    "node_modules/@tiptap/extension-color": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-color/-/extension-color-2.4.0.tgz",
+      "integrity": "sha512-aVuqGtzTIZO93niADdu+Hx8g03X0pS7wjrJcCcYkkDEbC/siC03zlxKZIYBW1Jiabe99Z7/s2KdtLoK6DW2A2g==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/extension-text-style": "^2.0.0"
+      }
+    },
    "node_modules/@tiptap/extension-document": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-2.4.0.tgz",
@@ -2567,6 +2583,22 @@
        "@tiptap/core": "^2.0.0"
      }
    },
+    "node_modules/@tiptap/extension-link": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-link/-/extension-link-2.4.0.tgz",
+      "integrity": "sha512-r3PjT0bjSKAorHAEBPA0icSMOlqALbxVlWU9vAc+Q3ndzt7ht0CTPNewzFF9kjzARABVt1cblXP/2+c0qGzcsg==",
+      "dependencies": {
+        "linkifyjs": "^4.1.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
    "node_modules/@tiptap/extension-list-item": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-2.4.0.tgz",
@@ -2676,6 +2708,18 @@
        "@tiptap/core": "^2.0.0"
      }
    },
+    "node_modules/@tiptap/extension-text-style": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text-style/-/extension-text-style-2.4.0.tgz",
+      "integrity": "sha512-H0uPWeZ4sXz3o836TDWnpd38qClqzEM2d6QJ9TK+cQ1vE5Gp8wQ5W4fwUV1KAHzpJKE/15+BXBjLyVYQdmXDaQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
    "node_modules/@tiptap/extension-underline": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-2.4.0.tgz",
@@ -8856,6 +8900,11 @@
        "uc.micro": "^2.0.0"
      }
    },
+    "node_modules/linkifyjs": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.1.3.tgz",
+      "integrity": "sha512-auMesunaJ8yfkHvK4gfg1K0SaKX/6Wn9g2Aac/NwX+l5VdmFZzo/hdPGxEOETj+ryRa4/fiOPjeeKURSAJx1sg=="
+    },
    "node_modules/loader-runner": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
--- a/package.json
+++ b/package.json
@@ -11,14 +11,17 @@
    "@iconoir/vue": "^7.7.0",
    "@tiptap/extension-bold": "^2.4.0",
    "@tiptap/extension-bullet-list": "^2.4.0",
+    "@tiptap/extension-color": "^2.4.0",
    "@tiptap/extension-heading": "^2.4.0",
    "@tiptap/extension-italic": "^2.4.0",
+    "@tiptap/extension-link": "^2.4.0",
    "@tiptap/extension-ordered-list": "^2.4.0",
    "@tiptap/extension-strike": "^2.4.0",
    "@tiptap/extension-table": "^2.4.0",
    "@tiptap/extension-table-cell": "^2.4.0",
    "@tiptap/extension-table-header": "^2.4.0",
    "@tiptap/extension-table-row": "^2.4.0",
+    "@tiptap/extension-text-style": "^2.4.0",
    "@tiptap/extension-underline": "^2.4.0",
    "@tiptap/starter-kit": "^2.4.0",
    "@tiptap/vue-3": "^2.4.0",
--- a/src/components/AddLinkDialog.vue
+++ b/src/components/AddLinkDialog.vue
@@ -0,0 +1,90 @@
+<template>
+    <div v-if="showDialog" class="modal">
+        <div class="modal-content">
+            <span class="close" @click="closeDialog">&times;</span>
+            <h2>Link hinzufügen</h2>
+            <table>
+                <tr>
+                    <td>
+                        <label for="link-url">URL:</label>
+                    </td>
+                    <td>
+                        <input id="link-url" v-model="url" type="text" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="link-text">Linktext:</label>
+                    </td>
+                    <td>
+                        <input id="link-text" v-model="text" type="text" />
+                    </td>
+                </tr>
+            </table>
+            <button @click="confirm">Hinzufügen</button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'AddLinkDialog',
+    data() {
+        return {
+            showDialog: false,
+            url: '',
+            text: '',
+        };
+    },
+    methods: {
+        openAddLinkDialog() {
+            this.showDialog = true;
+        },
+        closeDialog() {
+            this.showDialog = false;
+            this.url = '';
+            this.text = '';
+        },
+        confirm() {
+            this.$emit('confirm', this.url, this.text);
+            this.closeDialog();
+        },
+    },
+};
+</script>
+
+<style scoped>
+.modal {
+    display: flex;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0, 0, 0);
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-content {
+    background-color: #fefefe;
+    margin: auto;
+    padding: 20px;
+    border: 1px solid #888;
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+</style>
--- a/src/content/HomeContent.vue
+++ b/src/content/HomeContent.vue
@@ -1,46 +1,24 @@
 <template>
-  <div class="left-column">
-    <h2>Aktuelles</h2>
-    <p><a href="https://miriamgemeinde.de/wp-content/uploads/2024/04/GB.INT_.pdf"><strong>Hier finden Sie den aktuellen Gemeindebrief</strong></a></p>
-    <h3>Sommerfest</h3>
-    <p>Am Sonntag, den 09.06.2024 findet das ökumenische Sommerfest in Bonames statt.</p>
-    <h4>10:30 Uhr Musikalischer Gottestdienst</h4>
-    <p>mit der Kantorei St. Bonifatius, der Miriamkantorei und dem Gospelchor „Chariots“ in der Katholischen Pfarrkirche St. Bonifatius, Oberer Kalbacher Weg 9</p>
-    <h4>Ab 12:00 Uhr Gemeinsames Fest</h4>
-    <p>am Evangelischen Gemeindezentrum Bonames, Kirchhofsweg 11<br>Begegnungen, Gespräche und Angebote für Kinder<br>Gegrilltes und Getränke, Kaffee und Kuchen<br>Bis 16:00 Uhr</p>
-    <h3>Ökumenisches Friedensgebet</h3>
-    <p>Jeden letzten Freitag im Monat um 18:00 Uhr<br>Evangelische Friedenskirche in Harheim</p>
-    <hr>
-    <h3>Miriamgemeinde auf <a href="https://www.youtube.com/channel/UCFWJZuXPKuTef9-NIo-vdPg">Youtube</a></h3>
-    <p>Gottesdienst-Aufzeichnungen von unseren Gottesdienstorten.</p>
-    <p>Bei Präsenzgottesdiensten finden Sie die Aufzeichnung erst am Sonntagnachmittag!</p>
-    <hr>
-    <h3>Youtube-Kanäle unserer Kindertagesstätten</h3>
-    <p><a href="https://www.youtube.com/channel/UCwDe0xnydn9xV-4MHjGhjWQ">KiTa Krambambuli</a></p>
-    <p><a href="https://www.youtube.com/channel/UC_Sj_yC__i91czlJUW4ylcg">KiTa Sternenzelt</a></p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
+  <div class="some-page">
+    <ContentComponent :link="currentLink" />
  </div>
 </template>

 <script>
+import ContentComponent from '@/components/ContentComponent.vue';
+
 export default {
-  name: 'HomeContent'
+  name: 'SomePage',
+  components: {
+    ContentComponent,
+  },
+  computed: {
+    currentLink() {
+      return this.$route.path;
+    },
+  },
 };
 </script>

+<style scoped>
+</style>
--- a/src/content/admin/EditPagesComponent.vue
+++ b/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;
 }
--- a/src/icons.js
+++ b/src/icons.js
@@ -1,6 +1,6 @@
 // src/icons.js
 import { Bold, Italic, Underline, Strikethrough, List, NumberedListLeft, Table, Table2Columns, ArrowRight, ArrowDown, TableRows,
-    AlignTopBox, AlignLeftBox, StatsReport
+    AlignTopBox, AlignLeftBox, StatsReport, OpenInWindow
 } from '@iconoir/vue';

 export {
@@ -17,5 +17,6 @@ export {
    TableRows as TableRowsIcon,
    AlignTopBox as AlignTopBoxIcon,
    AlignLeftBox as AlignLeftBoxIcon,
-    StatsReport as StatsReportIcon
+    StatsReport as StatsReportIcon,
+    OpenInWindow as OpenInWindowIcon,
 };