From 140765ad20f658f8a26bc79c1d2d375e30c5d085 Mon Sep 17 00:00:00 2001 From: Dominik Pschenitschni Date: Fri, 1 Nov 2024 19:36:06 +0100 Subject: [PATCH] feat: use TipTap starter-kit --- frontend/package.json | 17 +--- frontend/pnpm-lock.yaml | 87 +++++++++---------- .../src/components/input/editor/TipTap.vue | 68 +++++---------- 3 files changed, 61 insertions(+), 111 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 5b7beff7b..978ad788e 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -60,37 +60,22 @@ "@sentry/tracing": "7.120.3", "@sentry/vue": "8.48.0", "@tiptap/core": "2.11.2", - "@tiptap/extension-blockquote": "2.11.2", - "@tiptap/extension-bold": "2.11.2", - "@tiptap/extension-bullet-list": "2.11.2", - "@tiptap/extension-code": "2.11.2", "@tiptap/extension-code-block": "2.11.2", "@tiptap/extension-code-block-lowlight": "2.11.2", - "@tiptap/extension-document": "2.11.2", - "@tiptap/extension-dropcursor": "2.11.2", - "@tiptap/extension-gapcursor": "2.11.2", "@tiptap/extension-hard-break": "2.11.2", - "@tiptap/extension-heading": "2.11.2", - "@tiptap/extension-history": "2.11.2", - "@tiptap/extension-horizontal-rule": "2.11.2", "@tiptap/extension-image": "2.11.2", - "@tiptap/extension-italic": "2.11.2", "@tiptap/extension-link": "2.11.2", - "@tiptap/extension-list-item": "2.11.2", - "@tiptap/extension-ordered-list": "2.11.2", - "@tiptap/extension-paragraph": "2.11.2", "@tiptap/extension-placeholder": "2.11.2", - "@tiptap/extension-strike": "2.11.2", "@tiptap/extension-table": "2.11.2", "@tiptap/extension-table-cell": "2.11.2", "@tiptap/extension-table-header": "2.11.2", "@tiptap/extension-table-row": "2.11.2", "@tiptap/extension-task-item": "2.11.2", "@tiptap/extension-task-list": "2.11.2", - "@tiptap/extension-text": "2.11.2", "@tiptap/extension-typography": "2.11.2", "@tiptap/extension-underline": "2.11.2", "@tiptap/pm": "2.11.2", + "@tiptap/starter-kit": "^2.11.2", "@tiptap/suggestion": "2.11.2", "@tiptap/vue-3": "2.11.2", "@vueuse/core": "12.4.0", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 17ef846f0..9a16ae444 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -49,69 +49,24 @@ importers: '@tiptap/core': specifier: 2.11.2 version: 2.11.2(@tiptap/pm@2.11.2) - '@tiptap/extension-blockquote': - specifier: 2.11.2 - version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) - '@tiptap/extension-bold': - specifier: 2.11.2 - version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) - '@tiptap/extension-bullet-list': - specifier: 2.11.2 - version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) - '@tiptap/extension-code': - specifier: 2.11.2 - version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) '@tiptap/extension-code-block': specifier: 2.11.2 version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2) '@tiptap/extension-code-block-lowlight': specifier: 2.11.2 version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/extension-code-block@2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2)(highlight.js@11.8.0)(lowlight@2.9.0) - '@tiptap/extension-document': - specifier: 2.11.2 - version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) - '@tiptap/extension-dropcursor': - specifier: 2.11.2 - version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2) - '@tiptap/extension-gapcursor': - specifier: 2.11.2 - version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2) '@tiptap/extension-hard-break': specifier: 2.11.2 version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) - '@tiptap/extension-heading': - specifier: 2.11.2 - version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) - '@tiptap/extension-history': - specifier: 2.11.2 - version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2) - '@tiptap/extension-horizontal-rule': - specifier: 2.11.2 - version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2) '@tiptap/extension-image': specifier: 2.11.2 version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) - '@tiptap/extension-italic': - specifier: 2.11.2 - version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) '@tiptap/extension-link': specifier: 2.11.2 version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2) - '@tiptap/extension-list-item': - specifier: 2.11.2 - version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) - '@tiptap/extension-ordered-list': - specifier: 2.11.2 - version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) - '@tiptap/extension-paragraph': - specifier: 2.11.2 - version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) '@tiptap/extension-placeholder': specifier: 2.11.2 version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2) - '@tiptap/extension-strike': - specifier: 2.11.2 - version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) '@tiptap/extension-table': specifier: 2.11.2 version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2) @@ -130,9 +85,6 @@ importers: '@tiptap/extension-task-list': specifier: 2.11.2 version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) - '@tiptap/extension-text': - specifier: 2.11.2 - version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) '@tiptap/extension-typography': specifier: 2.11.2 version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) @@ -142,6 +94,9 @@ importers: '@tiptap/pm': specifier: 2.11.2 version: 2.11.2 + '@tiptap/starter-kit': + specifier: ^2.11.2 + version: 2.11.2 '@tiptap/suggestion': specifier: 2.11.2 version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2) @@ -2339,6 +2294,11 @@ packages: peerDependencies: '@tiptap/core': ^2.7.0 + '@tiptap/extension-text-style@2.11.2': + resolution: {integrity: sha512-RAa7BTwEOJRZN3EB2lg03KXyu7JC/Ce96cerh3D0Fo78yrtKOArPaiVHoTki6ZEIG43ccHEit1PPjMYxivPPeg==} + peerDependencies: + '@tiptap/core': ^2.7.0 + '@tiptap/extension-text@2.11.2': resolution: {integrity: sha512-fJZeKYM5jeJ7NpS3FWLnC/NAvg+mZNbcTaRgXMo5ljBCgiMcYHhYg9p/RHk4SeICZBBpR9WSSZXHMACd9CbJiA==} peerDependencies: @@ -2357,6 +2317,9 @@ packages: '@tiptap/pm@2.11.2': resolution: {integrity: sha512-lNOMFRcD0mGy7Hf8tFMHW/fnglvq3dA0grs0QrSY4cHyYbH9BHtQjLMDceczXdXbXZq7nEqC40UBWNnqtaclpw==} + '@tiptap/starter-kit@2.11.2': + resolution: {integrity: sha512-FUIblP9BSmBzskf/aX7AIcUK5XP5Gi/VqUqm5evCkzlR1FrggLoy+vY+CX0me4oE/WYk4KAgIRXkE9tcbwotQA==} + '@tiptap/suggestion@2.11.2': resolution: {integrity: sha512-jA06veq7Ko7+yeyy4pymTGdqHfWNydDIioPCR0yddbon+3+aLP2hE31J+/1/8FmhSoE0qJsEki3/RU7pKTLgrg==} peerDependencies: @@ -8751,6 +8714,10 @@ snapshots: dependencies: '@tiptap/core': 2.11.2(@tiptap/pm@2.11.2) + '@tiptap/extension-text-style@2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))': + dependencies: + '@tiptap/core': 2.11.2(@tiptap/pm@2.11.2) + '@tiptap/extension-text@2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))': dependencies: '@tiptap/core': 2.11.2(@tiptap/pm@2.11.2) @@ -8784,6 +8751,30 @@ snapshots: prosemirror-transform: 1.10.2 prosemirror-view: 1.37.0 + '@tiptap/starter-kit@2.11.2': + dependencies: + '@tiptap/core': 2.11.2(@tiptap/pm@2.11.2) + '@tiptap/extension-blockquote': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) + '@tiptap/extension-bold': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) + '@tiptap/extension-bullet-list': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) + '@tiptap/extension-code': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) + '@tiptap/extension-code-block': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2) + '@tiptap/extension-document': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) + '@tiptap/extension-dropcursor': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2) + '@tiptap/extension-gapcursor': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2) + '@tiptap/extension-hard-break': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) + '@tiptap/extension-heading': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) + '@tiptap/extension-history': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2) + '@tiptap/extension-horizontal-rule': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2) + '@tiptap/extension-italic': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) + '@tiptap/extension-list-item': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) + '@tiptap/extension-ordered-list': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) + '@tiptap/extension-paragraph': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) + '@tiptap/extension-strike': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) + '@tiptap/extension-text': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) + '@tiptap/extension-text-style': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2)) + '@tiptap/pm': 2.11.2 + '@tiptap/suggestion@2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2)': dependencies: '@tiptap/core': 2.11.2(@tiptap/pm@2.11.2) diff --git a/frontend/src/components/input/editor/TipTap.vue b/frontend/src/components/input/editor/TipTap.vue index b5fc98896..daef1c20c 100644 --- a/frontend/src/components/input/editor/TipTap.vue +++ b/frontend/src/components/input/editor/TipTap.vue @@ -17,7 +17,7 @@ v-tooltip="$t('input.editor.bold')" class="editor-bubble__button" :class="{ 'is-active': editor.isActive('bold') }" - @click="editor.chain().focus().toggleBold().run()" + @click="() => editor?.chain().focus().toggleBold().run()" > @@ -25,7 +25,7 @@ v-tooltip="$t('input.editor.italic')" class="editor-bubble__button" :class="{ 'is-active': editor.isActive('italic') }" - @click="editor.chain().focus().toggleItalic().run()" + @click="() => editor?.chain().focus().toggleItalic().run()" > @@ -33,7 +33,7 @@ v-tooltip="$t('input.editor.underline')" class="editor-bubble__button" :class="{ 'is-active': editor.isActive('underline') }" - @click="editor.chain().focus().toggleUnderline().run()" + @click="() => editor?.chain().focus().toggleUnderline().run()" > @@ -41,7 +41,7 @@ v-tooltip="$t('input.editor.strikethrough')" class="editor-bubble__button" :class="{ 'is-active': editor.isActive('strike') }" - @click="editor.chain().focus().toggleStrike().run()" + @click="() => editor?.chain().focus().toggleStrike().run()" > @@ -49,7 +49,7 @@ v-tooltip="$t('input.editor.code')" class="editor-bubble__button" :class="{ 'is-active': editor.isActive('code') }" - @click="editor.chain().focus().toggleCode().run()" + @click="() => editor?.chain().focus().toggleCode().run()" > @@ -87,7 +87,7 @@
  • {{ $t('input.editor.edit') }} @@ -108,7 +108,7 @@
  • {{ $t('input.editor.edit') }} @@ -138,11 +138,16 @@