Migrate TipTap to v3

package.json

@@ -16,16 +16,16 @@
     "test": "pnpm playwright test --config ./test/playwright.config.ts"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.29.5",
-    "@playwright/test": "1.53.2",
+    "@changesets/cli": "^2.29.8",
+    "@playwright/test": "1.54.2",
     "@tailor-cms/cek-e2e": "^1.3.2",
     "@tailor-cms/eslint-config": "1.1.2",
     "@tailor-cms/tce-boot": "1.3.2",
-    "@types/node": "^24.0.12",
-    "dotenv": "^17.1.0",
-    "eslint": "^9.30.1",
-    "prettier": "^3.6.2",
-    "typescript": "^5.8.3"
+    "@types/node": "^24.10.2",
+    "dotenv": "^17.2.3",
+    "eslint": "^9.39.1",
+    "prettier": "^3.7.4",
+    "typescript": "^5.9.3"
   },
   "packageManager": "pnpm@10.12.3"
 }

packages/display/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tailor-cms/ce-html-display
 
+## 0.2.1
+
+### Patch Changes
+
+- Fix migration issues with new TipTap version and cleanup code.
+
+## 0.2.0
+
+### Minor Changes
+
+- Bump Tiptap to v4 and migrate and cleanup text editor.
+
 ## 0.1.6
 
 ### Patch Changes

packages/display/package.json

@@ -3,7 +3,7 @@
   "description": "Tailor CMS HTML editor end-user component",
   "author": "Studion <info@gostudion.com> (https://github.com/tailor-cms)",
   "type": "module",
-  "version": "0.1.6",
+  "version": "0.2.1",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -30,10 +30,10 @@
   "devDependencies": {
     "@tailor-cms/ce-html-manifest": "workspace:*",
     "@tailor-cms/eslint-config": "1.1.2",
-    "@vitejs/plugin-vue": "^6.0.0",
-    "typescript": "^5.8.3",
-    "vite": "^7.0.3",
-    "vue-tsc": "^3.0.1"
+    "@vitejs/plugin-vue": "^6.0.2",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.7",
+    "vue-tsc": "^3.1.8"
   },
   "publishConfig": {
     "access": "public"

packages/edit/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tailor-cms/ce-html-edit
 
+## 0.2.1
+
+### Patch Changes
+
+- Fix migration issues with new TipTap version and cleanup code.
+
+## 0.2.0
+
+### Minor Changes
+
+- Bump Tiptap to v4 and migrate and cleanup text editor.
+
 ## 0.1.6
 
 ### Patch Changes

packages/edit/package.json

@@ -3,7 +3,7 @@
   "description": "Tailor CMS HTML editor authoring component",
   "author": "Studion <info@gostudion.com> (https://github.com/tailor-cms)",
   "type": "module",
-  "version": "0.1.6",
+  "version": "0.2.1",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -31,35 +31,28 @@
     "@tailor-cms/ce-html-manifest": "workspace:*",
     "@tailor-cms/eslint-config": "1.1.2",
     "@types/lodash-es": "^4.17.12",
-    "@types/validator": "^13.15.2",
-    "@vitejs/plugin-vue": "^6.0.0",
-    "typescript": "^5.8.3",
-    "vite": "^7.0.3",
-    "vue-tsc": "^3.0.1"
+    "@types/validator": "^13.15.10",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.7",
+    "vue-tsc": "^3.1.8"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.7.4",
     "@intevation/tiptap-extension-office-paste": "^0.1.2",
-    "@tiptap/extension-color": "^2.25.0",
-    "@tiptap/extension-font-family": "^2.25.0",
-    "@tiptap/extension-highlight": "^2.25.0",
-    "@tiptap/extension-image": "^2.25.0",
-    "@tiptap/extension-link": "^2.25.0",
-    "@tiptap/extension-paragraph": "^2.25.0",
-    "@tiptap/extension-placeholder": "^2.25.0",
-    "@tiptap/extension-subscript": "^2.25.0",
-    "@tiptap/extension-superscript": "^2.25.0",
-    "@tiptap/extension-table": "^2.25.0",
-    "@tiptap/extension-table-cell": "^2.25.0",
-    "@tiptap/extension-table-header": "^2.25.0",
-    "@tiptap/extension-table-row": "^2.25.0",
-    "@tiptap/extension-text-align": "^2.25.0",
-    "@tiptap/extension-text-style": "^2.25.0",
-    "@tiptap/extension-underline": "^2.25.0",
-    "@tiptap/pm": "^2.25.0",
-    "@tiptap/starter-kit": "^2.25.0",
-    "@tiptap/vue-3": "^2.25.0",
+    "@tiptap/extension-image": "^3.13.0",
+    "@tiptap/extension-link": "^3.13.0",
+    "@tiptap/extension-subscript": "^3.13.0",
+    "@tiptap/extension-superscript": "^3.13.0",
+    "@tiptap/extension-table": "^3.13.0",
+    "@tiptap/extension-text-align": "^3.13.0",
+    "@tiptap/extension-text-style": "^3.13.0",
+    "@tiptap/extensions": "^3.13.0",
+    "@tiptap/pm": "^3.13.0",
+    "@tiptap/starter-kit": "^3.13.0",
+    "@tiptap/vue-3": "^3.13.0",
     "lodash-es": "^4.17.21",
-    "validator": "^13.15.15"
+    "validator": "^13.15.23"
   },
   "publishConfig": {
     "access": "public"

packages/edit/src/components/Edit.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tce-container">
-    <ImageMenu v-if="editor" :editor="editor" />
-    <TableMenu v-if="editor" :editor="editor" />
+    <ImageMenu v-if="editor && !isReadonly" :editor="editor" />
+    <TableMenu v-if="editor && !isReadonly" :editor="editor" />
     <EditorContent v-if="editor" :editor="editor" />
   </div>
 </template>
@@ -56,9 +56,8 @@ watch(
 watch(
   () => props.element.data.content,
   (value) => {
-    if (!editor.value) return;
-    const isSame = editor.value.getHTML() === value;
-    return !isSame && editor.value?.commands.setContent(value, false);
+    if (!editor.value || editor.value.getHTML() === value) return;
+    return editor.value?.commands.setContent(value, { emitUpdate: false });
   },
 );
 </script>

packages/edit/src/components/EditorToolbar.vue

@@ -31,13 +31,13 @@ import AddImage from './actions/AddImage.vue';
 import AddLink from './actions/AddLink.vue';
 import AddTable from './actions/AddTable.vue';
 import AddTooltip from './actions/AddTooltip.vue';
+import BackgroundColor from './actions/BackgroundColor.vue';
 import FontFamily from './actions/FontFamily.vue';
 import FontSize from './actions/FontSize.vue';
 import IconButton from './IconButton.vue';
 import TextAlign from './actions/TextAlign.vue';
 import TextColor from './actions/TextColor.vue';
 import TextHeading from './actions/TextHeading.vue';
-import TextHighlight from './actions/TextHighlight.vue';
 
 defineProps<{ editor: any }>();
 
@@ -99,7 +99,7 @@ const toolbarItems: (Action | Component)[][] = [
       icon: 'minus',
     },
   ],
-  [{ component: TextColor }, { component: TextHighlight }],
+  [{ component: TextColor }, { component: BackgroundColor }],
   [
     {
       label: 'Numbered list',

packages/edit/src/components/IconButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <VTooltip location="bottom">
+  <VTooltip v-model="isOpen" location="bottom">
     <template #activator="{ props: tooltip }">
       <VBtn
         :active="active"
@@ -10,15 +10,17 @@
         :size="size ?? 32"
         rounded="lg"
         variant="text"
-        v-bind="{ ...tooltip, ...$attrs }"
-        @click="$emit('click')"
+        v-bind="{ ...$attrs, ...tooltip }"
+        @click="onClick"
       />
     </template>
     {{ label }}
   </VTooltip>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
+
 defineProps<{
   active?: boolean;
   disabled?: boolean;
@@ -28,7 +30,14 @@ defineProps<{
   icon: string;
 }>();
 
-defineEmits(['click']);
+const emit = defineEmits(['click']);
+
+const isOpen = ref(false);
+
+const onClick = () => {
+  isOpen.value = false;
+  emit('click');
+};
 </script>
 
 <style lang="scss" scoped>

packages/edit/src/components/actions/AddImage.vue

@@ -45,16 +45,8 @@
 
 <script setup lang="ts">
 import { mergeProps, ref, watch } from 'vue';
-import isURL from 'validator/lib/isURL';
 
-const rules = {
-  required: (val: string) => !!val || 'The field is required',
-  url: (val: string) => {
-    const url = val.trim();
-    if (!url) return true;
-    return isURL(url) || 'Please enter valid URL';
-  },
-};
+import { rules } from './rules';
 
 const props = defineProps<{ editor: any }>();
 

packages/edit/src/components/actions/AddLink.vue

@@ -56,16 +56,8 @@
 
 <script setup lang="ts">
 import { mergeProps, ref, watch } from 'vue';
-import isURL from 'validator/lib/isURL';
 
-const rules = {
-  required: (val: string) => !!val || 'The field is required',
-  url: (val: string) => {
-    const url = val.trim();
-    if (!url) return true;
-    return isURL(url) || 'Please enter valid URL';
-  },
-};
+import { rules } from './rules';
 
 const props = defineProps<{ editor: any }>();
 

packages/edit/src/components/actions/AddTooltip.vue

@@ -54,9 +54,7 @@
 <script setup lang="ts">
 import { mergeProps, ref, watch } from 'vue';
 
-const rules = {
-  required: (val: string) => !!val || 'The field is required',
-};
+import { rules } from './rules';
 
 const props = defineProps<{ editor: any }>();
 
@@ -83,7 +81,6 @@ async function setTooltip() {
   if (!valid) return;
   if (tooltip.value) {
     const attributes = { tooltip: tooltip.value, text: text.value };
-    console.log('Setting tooltip with attributes:', attributes);
     props.editor.chain().focus().setTooltip(attributes).run();
   } else props.editor.chain().focus().unsetTooltip().run();
   show.value = false;

packages/edit/src/components/actions/BackgroundColor.vue

@@ -0,0 +1,18 @@
+<template>
+  <ColorPicker
+    :disabled="!editor.can().chain().focus().setBackgroundColor().run()"
+    :value="editor.getAttributes('textStyle').backgroundColor"
+    icon="mdi-format-color-highlight"
+    label="Text highlight"
+    @set="editor.chain().focus().setBackgroundColor($event).run()"
+    @unset="editor.chain().focus().unsetBackgroundColor().run()"
+  />
+</template>
+
+<script setup lang="ts">
+import ColorPicker from './ColorPicker.vue';
+
+defineProps<{
+  editor: any;
+}>();
+</script>

packages/edit/src/components/actions/ColorPicker.vue

@@ -56,6 +56,8 @@
 <script setup lang="ts">
 import { computed, mergeProps } from 'vue';
 
+import { COLORS } from './constants';
+
 const props = defineProps<{
   disabled: boolean;
   value: string;
@@ -64,53 +66,6 @@ const props = defineProps<{
 }>();
 const emit = defineEmits(['set', 'unset']);
 
-const COLORS = [
-  [
-    '#000000',
-    '#333333',
-    '#4D4D4D',
-    '#666666',
-    '#808080',
-    '#999999',
-    '#B3B3B3',
-    '#CCCCCC',
-    '#FFFFFF',
-  ],
-  [
-    '#F44E3B',
-    '#FE9200',
-    '#FCDC00',
-    '#DBDF00',
-    '#A4DD00',
-    '#68CCCA',
-    '#73D8FF',
-    '#AEA1FF',
-    '#FDA1FF',
-  ],
-  [
-    '#D33115',
-    '#E27300',
-    '#FCC400',
-    '#B0BC00',
-    '#68BC00',
-    '#16A5A5',
-    '#009CE0',
-    '#7B64FF',
-    '#FA28FF',
-  ],
-  [
-    '#9F0500',
-    '#C45100',
-    '#FB9E00',
-    '#808900',
-    '#194D33',
-    '#0C797D',
-    '#0062B1',
-    '#653294',
-    '#AB149E',
-  ],
-];
-
 const currentColor = computed({
   get() {
     return props.value;