From dcfd4784646e9fe0684352bd523cad1dac550873 Mon Sep 17 00:00:00 2001 From: Torsten Schulz Date: Thu, 20 Jun 2024 23:50:22 +0200 Subject: [PATCH] Add link or color added --- package-lock.json | 49 +++++++++++++ package.json | 3 + src/components/AddLinkDialog.vue | 90 ++++++++++++++++++++++++ src/content/HomeContent.vue | 52 ++++---------- src/content/admin/EditPagesComponent.vue | 84 +++++++++++++++++----- src/icons.js | 5 +- 6 files changed, 226 insertions(+), 57 deletions(-) create mode 100644 src/components/AddLinkDialog.vue diff --git a/package-lock.json b/package-lock.json index 3d9f89a..445d541 100644 --- 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", diff --git a/package.json b/package.json index ad95d02..1407370 100644 --- 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", diff --git a/src/components/AddLinkDialog.vue b/src/components/AddLinkDialog.vue new file mode 100644 index 0000000..4592c31 --- /dev/null +++ b/src/components/AddLinkDialog.vue @@ -0,0 +1,90 @@ + + + + + \ No newline at end of file diff --git a/src/content/HomeContent.vue b/src/content/HomeContent.vue index 8c465d1..6294358 100644 --- a/src/content/HomeContent.vue +++ b/src/content/HomeContent.vue @@ -1,46 +1,24 @@ + diff --git a/src/content/admin/EditPagesComponent.vue b/src/content/admin/EditPagesComponent.vue index 27beef4..1f73938 100644 --- a/src/content/admin/EditPagesComponent.vue +++ b/src/content/admin/EditPagesComponent.vue @@ -8,61 +8,66 @@
- - - - + + + - - - - - - + + +
- - - - - - - -
@@ -80,6 +85,8 @@ + + @@ -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; } diff --git a/src/icons.js b/src/icons.js index f792bd0..90413cb 100644 --- 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, };