Upgrade Tiptap from v2 to v3

- Upgrade @tiptap/core, starter-kit, vue-3, pm, extension-text-align to v3
- Remove @tiptap/extension-link (now bundled in StarterKit v3)
- Move Link config into StarterKit.configure()
This commit is contained in:
Darko Gjorgjijoski
2026-04-02 16:25:53 +02:00
parent 0be747a483
commit 42f1481f72
2 changed files with 8 additions and 11 deletions

View File

@@ -27,12 +27,11 @@
"@heroicons/vue": "^2.2.0", "@heroicons/vue": "^2.2.0",
"@popperjs/core": "^2.11.8", "@popperjs/core": "^2.11.8",
"@stripe/stripe-js": "^2.4.0", "@stripe/stripe-js": "^2.4.0",
"@tiptap/core": "^2.11.2", "@tiptap/core": "^3.0.0",
"@tiptap/extension-link": "^2.11.2", "@tiptap/extension-text-align": "^3.0.0",
"@tiptap/extension-text-align": "^2.11.2", "@tiptap/pm": "^3.0.0",
"@tiptap/pm": "^2.11.2", "@tiptap/starter-kit": "^3.0.0",
"@tiptap/starter-kit": "^2.11.2", "@tiptap/vue-3": "^3.0.0",
"@tiptap/vue-3": "^2.11.2",
"@types/node": "^20.11.9", "@types/node": "^20.11.9",
"@vuelidate/components": "^1.2.6", "@vuelidate/components": "^1.2.6",
"@vuelidate/core": "^2.0.3", "@vuelidate/core": "^2.0.3",

View File

@@ -73,7 +73,6 @@ import { ref, onUnmounted, watch, markRaw } from 'vue'
import { useEditor, EditorContent } from '@tiptap/vue-3' import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import TextAlign from '@tiptap/extension-text-align' import TextAlign from '@tiptap/extension-text-align'
import Link from '@tiptap/extension-link'
import { EllipsisVerticalIcon } from '@heroicons/vue/24/outline' import { EllipsisVerticalIcon } from '@heroicons/vue/24/outline'
import { import {
BoldIcon, BoldIcon,
@@ -114,14 +113,13 @@ export default {
const editor = useEditor({ const editor = useEditor({
content: props.modelValue, content: props.modelValue,
extensions: [ extensions: [
StarterKit, StarterKit.configure({
link: { openOnClick: false },
}),
TextAlign.configure({ TextAlign.configure({
types: ['heading', 'paragraph'], types: ['heading', 'paragraph'],
alignments: ['left', 'right', 'center', 'justify'], alignments: ['left', 'right', 'center', 'justify'],
}), }),
Link.configure({
openOnClick: false,
}),
], ],
onUpdate: ({ editor }) => { onUpdate: ({ editor }) => {
emit('update:modelValue', editor.getHTML()) emit('update:modelValue', editor.getHTML())