From 1a23e7ae9d74478f3f7e4f96bb77106f88f58977 Mon Sep 17 00:00:00 2001 From: rkusan00 Date: Thu, 14 Aug 2025 13:24:30 +0200 Subject: [PATCH 1/9] Migrate TipTap to v3 --- package.json | 10 +- packages/display/package.json | 8 +- packages/edit/package.json | 39 +- packages/edit/src/components/Edit.vue | 5 +- .../edit/src/components/EditorToolbar.vue | 4 +- .../components/actions/BackgroundColor.vue | 18 + .../src/components/actions/TextHighlight.vue | 18 - .../src/components/bubble-menus/ImageMenu.vue | 4 +- .../src/components/bubble-menus/TableMenu.vue | 9 +- .../src/components/extensions/font-size.ts | 55 - .../edit/src/components/extensions/index.ts | 25 +- packages/manifest/package.json | 2 +- packages/server/package.json | 2 +- pnpm-lock.yaml | 2323 +++++++++-------- 14 files changed, 1264 insertions(+), 1258 deletions(-) create mode 100644 packages/edit/src/components/actions/BackgroundColor.vue delete mode 100644 packages/edit/src/components/actions/TextHighlight.vue delete mode 100644 packages/edit/src/components/extensions/font-size.ts diff --git a/package.json b/package.json index d590a52..9dbede6 100644 --- a/package.json +++ b/package.json @@ -17,15 +17,15 @@ }, "devDependencies": { "@changesets/cli": "^2.29.5", - "@playwright/test": "1.53.2", + "@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", + "@types/node": "^24.2.1", + "dotenv": "^17.2.1", + "eslint": "^9.33.0", "prettier": "^3.6.2", - "typescript": "^5.8.3" + "typescript": "^5.9.2" }, "packageManager": "pnpm@10.12.3" } diff --git a/packages/display/package.json b/packages/display/package.json index 7b2ccd1..b1f35d7 100644 --- a/packages/display/package.json +++ b/packages/display/package.json @@ -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.1", + "typescript": "^5.9.2", + "vite": "^7.1.2", + "vue-tsc": "^3.0.5" }, "publishConfig": { "access": "public" diff --git a/packages/edit/package.json b/packages/edit/package.json index bb22096..0cca577 100644 --- a/packages/edit/package.json +++ b/packages/edit/package.json @@ -32,31 +32,24 @@ "@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" + "@vitejs/plugin-vue": "^6.0.1", + "typescript": "^5.9.2", + "vite": "^7.1.2", + "vue-tsc": "^3.0.5" }, "dependencies": { - "@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", + "@floating-ui/dom": "^1.7.3", + "@tiptap/extension-image": "^3.1.0", + "@tiptap/extension-paragraph": "^3.1.0", + "@tiptap/extension-subscript": "^3.1.0", + "@tiptap/extension-superscript": "^3.1.0", + "@tiptap/extension-table": "^3.1.0", + "@tiptap/extension-text-align": "^3.1.0", + "@tiptap/extension-text-style": "^3.1.0", + "@tiptap/extensions": "^3.1.0", + "@tiptap/pm": "^3.1.0", + "@tiptap/starter-kit": "^3.1.0", + "@tiptap/vue-3": "^3.1.0", "lodash-es": "^4.17.21", "validator": "^13.15.15" }, diff --git a/packages/edit/src/components/Edit.vue b/packages/edit/src/components/Edit.vue index 5a0dfa2..332a261 100644 --- a/packages/edit/src/components/Edit.vue +++ b/packages/edit/src/components/Edit.vue @@ -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 }); }, ); diff --git a/packages/edit/src/components/EditorToolbar.vue b/packages/edit/src/components/EditorToolbar.vue index 0c7e495..ec46391 100644 --- a/packages/edit/src/components/EditorToolbar.vue +++ b/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', diff --git a/packages/edit/src/components/actions/BackgroundColor.vue b/packages/edit/src/components/actions/BackgroundColor.vue new file mode 100644 index 0000000..5563b10 --- /dev/null +++ b/packages/edit/src/components/actions/BackgroundColor.vue @@ -0,0 +1,18 @@ + + + diff --git a/packages/edit/src/components/actions/TextHighlight.vue b/packages/edit/src/components/actions/TextHighlight.vue deleted file mode 100644 index 43e3a2a..0000000 --- a/packages/edit/src/components/actions/TextHighlight.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - diff --git a/packages/edit/src/components/bubble-menus/ImageMenu.vue b/packages/edit/src/components/bubble-menus/ImageMenu.vue index e829c9f..a2b588a 100644 --- a/packages/edit/src/components/bubble-menus/ImageMenu.vue +++ b/packages/edit/src/components/bubble-menus/ImageMenu.vue @@ -1,5 +1,5 @@