Migrate to CEK v2

.devcontainer/devcontainer.json

@@ -1,6 +1,6 @@
 {
   "name": "Tailor - Jodit HTML Content Element",
-  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:4-24-trixie",
   "features": {
     "ghcr.io/devcontainers-extra/features/pnpm:2": {},
     "ghcr.io/devcontainers/features/github-cli:1": {}

Dockerfile

@@ -1,7 +1,7 @@
 ARG PNPM_HOME="/root/.local/share/pnpm"
-ARG PNPM_VERSION="9.15.0"
+ARG PNPM_VERSION="10.12.3"
 
-FROM node:22.12.0-alpine3.20
+FROM node:24-alpine
 ARG PNPM_HOME
 ARG PNPM_VERSION
 # github and ssh

README.md

@@ -1,24 +1,31 @@
-# ce-jodit-html
+# Jodit HTML
 
-Tailor Jodit HTML editor component.
+Rich text content element powered by the Jodit editor.
 
-## Usage
+**Type:** `JODIT_HTML`
 
-Run
+## Data
 
-```sh
-pnpm dev
-```
+| Field | Type | Description |
+|-------|------|-------------|
+| `content` | `string` | HTML content authored via Jodit |
 
-Lint
+## Edit
 
-```sh
-pnpm lint
-```
+- Inline Jodit WYSIWYG editor activated on focus
+- Debounced autosave and save-on-blur
+- Toolbar rendered into a dedicated top toolbar slot
+
+## Display
 
-Test
+- Renders sanitized HTML content with element-scoped typography styles
+
+## Development
 
 ```sh
+pnpm dev     # Preview :8080 | Edit :8010 | Display :8020 | Server :8030
+pnpm build
+pnpm lint
 pnpm test
 ```
 

package.json

@@ -16,16 +16,19 @@
     "test": "pnpm playwright test --config ./test/playwright.config.ts"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.29.5",
-    "@playwright/test": "1.53.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.11",
-    "dotenv": "^17.1.0",
-    "eslint": "^9.30.1",
-    "prettier": "^3.6.2",
-    "typescript": "^5.8.3"
+    "@changesets/cli": "^2.31.0",
+    "@playwright/test": "^1.59.1",
+    "@tailor-cms/cek-e2e": "2.0.0-beta.14",
+    "@tailor-cms/eslint-config": "2.0.0-beta.14",
+    "@tailor-cms/tce-boot": "2.0.0-beta.14",
+    "@types/node": "^24.12.2",
+    "dotenv": "^17.4.2",
+    "eslint": "^9.39.4",
+    "prettier": "^3.8.3",
+    "typescript": "^6.0.3"
   },
-  "packageManager": "pnpm@10.12.3"
+  "packageManager": "pnpm@10.12.3",
+  "engines": {
+    "node": ">=24"
+  }
 }

packages/display/package.json

@@ -25,17 +25,22 @@
     "prepublish": "pnpm build"
   },
   "peerDependencies": {
-    "vue": "^3.5.13"
+    "vue": "^3.5.29"
   },
   "devDependencies": {
     "@tailor-cms/ce-jodit-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"
+    "@tailor-cms/eslint-config": "2.0.0-beta.14",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.9",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vue-tsc": "^3.2.7",
+    "vuetify": "^4.0.6"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "engines": {
+    "node": ">=24"
   }
 }

packages/display/tsconfig.json

@@ -19,6 +19,7 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "types": ["vite/client"],
+    "rootDir": "./src",
     "outDir": "dist"
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],

packages/display/tsconfig.node.json

@@ -3,8 +3,7 @@
     "composite": true,
     "skipLibCheck": true,
     "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "bundler"
   },
   "include": ["vite.config.ts"]
 }

packages/display/vite.config.ts

@@ -1,11 +1,12 @@
 import { defineConfig } from 'vite';
+import { libInjectCss } from 'vite-plugin-lib-inject-css';
 import vue from '@vitejs/plugin-vue';
 
 import { resolve } from 'node:path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), libInjectCss()],
   build: {
     // In order to avoid display runtime issues
     // due to package missing (if dist is deleted for short time)
@@ -18,20 +19,12 @@ export default defineConfig({
       fileName: 'index',
       formats: ['es', 'cjs'],
     },
-    commonjsOptions: {
-      strictRequires: 'auto',
-    },
-    rollupOptions: {
+    rolldownOptions: {
       // make sure to externalize deps that shouldn't be bundled
       // into your library
       external: ['vue'],
       output: {
-        intro: 'import "./index.css";',
-        // Provide global variables to use in the UMD build
-        // for externalized deps
-        globals: {
-          vue: 'Vue',
-        },
+        exports: 'named',
       },
     },
   },

packages/edit/package.json

@@ -25,22 +25,28 @@
     "prepublish": "pnpm build"
   },
   "peerDependencies": {
-    "vue": "^3.5.13"
+    "vue": "^3.5.29"
   },
   "devDependencies": {
     "@tailor-cms/ce-jodit-html-manifest": "workspace:*",
-    "@tailor-cms/eslint-config": "1.1.2",
+    "@tailor-cms/eslint-config": "2.0.0-beta.14",
     "@types/lodash-es": "^4.17.12",
-    "@vitejs/plugin-vue": "^6.0.0",
-    "typescript": "^5.8.3",
-    "vite": "^7.0.3",
-    "vue-tsc": "^3.0.1"
+    "@vitejs/plugin-vue": "^6.0.6",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.9",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vue-tsc": "^3.2.7",
+    "vuetify": "^4.0.6"
   },
   "dependencies": {
-    "jodit": "^4.6.2",
-    "lodash-es": "^4.17.21"
+    "@tailor-cms/cek-common": "2.0.0-beta.14",
+    "jodit": "^4.12.2",
+    "lodash-es": "^4.18.1"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "engines": {
+    "node": ">=24"
   }
 }

packages/edit/src/components/Edit.vue

@@ -12,9 +12,9 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineProps, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
+import type { Element, ElementData } from '@tailor-cms/ce-jodit-html-manifest';
 import { debounce } from 'lodash-es';
-import type { Element } from '@tailor-cms/ce-jodit-html-manifest';
 
 import JoditEditor from './JoditEditor.vue';
 
@@ -30,7 +30,7 @@ const props = withDefaults(defineProps<Props>(), {
   isFocused: false,
   isReadonly: false,
 });
-const emit = defineEmits(['save']);
+const emit = defineEmits<{ save: [data: ElementData] }>();
 
 const content = ref(props.element?.data?.content ?? '');
 const isEmpty = computed(() => !content.value.replace(/<[^>]*>/g, ''));
@@ -135,7 +135,7 @@ $min-height: 5rem;
 
 :deep(.jodit-container):not(.jodit-inline) {
   min-height: $min-height !important;
-  background: transparent !important;
+  background: transparent;
   font-size: 1rem;
   border: none;
 }

packages/edit/tsconfig.json

@@ -19,6 +19,7 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "types": ["vite/client"],
+    "rootDir": "./src",
     "outDir": "dist"
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],

packages/edit/tsconfig.node.json

@@ -3,8 +3,7 @@
     "composite": true,
     "skipLibCheck": true,
     "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
+    "moduleResolution": "bundler"
   },
   "include": ["vite.config.ts"]
 }

packages/edit/vite.config.ts

@@ -1,11 +1,12 @@
 import { defineConfig } from 'vite';
+import { libInjectCss } from 'vite-plugin-lib-inject-css';
 import vue from '@vitejs/plugin-vue';
 
 import { resolve } from 'node:path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), libInjectCss()],
   build: {
     // In order to avoid edit runtime issues
     // due to package missing (if dist is deleted for short time)
@@ -18,20 +19,12 @@ export default defineConfig({
       fileName: 'index',
       formats: ['es', 'cjs'],
     },
-    commonjsOptions: {
-      strictRequires: 'auto',
-    },
-    rollupOptions: {
+    rolldownOptions: {
       // make sure to externalize deps that shouldn't be bundled
       // into your library
       external: ['vue'],
       output: {
-        intro: 'import "./index.css";',
-        // Provide global variables to use in the UMD build
-        // for externalized deps
-        globals: {
-          vue: 'Vue',
-        },
+        exports: 'named',
       },
     },
   },

packages/manifest/package.json

@@ -6,48 +6,43 @@
   "version": "0.1.0",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
+      "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     }
   },
   "main": "./dist/index.cjs",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/index.d.mts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "dev": "tsup --watch",
-    "build": "pnpm nuke:dist && tsup",
+    "dev": "tsdown --watch",
+    "build": "pnpm nuke:dist && tsdown",
     "lint": "eslint .",
     "lint:fix": "pnpm lint --fix",
     "nuke": "pnpm dlx del-cli dist node_modules",
     "nuke:dist": "pnpm dlx del-cli dist",
     "prepublish": "pnpm build"
   },
+  "dependencies": {
+    "@tailor-cms/cek-common": "2.0.0-beta.14"
+  },
   "devDependencies": {
-    "@tailor-cms/cek-common": "^1.3.2",
-    "@tailor-cms/eslint-config": "1.1.2",
-    "tsup": "^8.5.0",
-    "typescript": "^5.8.3"
+    "@tailor-cms/eslint-config": "2.0.0-beta.14",
+    "tsdown": "^0.21.9",
+    "typescript": "^6.0.3"
   },
-  "tsup": {
-    "entry": [
-      "src/index.ts"
-    ],
-    "target": [
-      "node14",
-      "es2022"
-    ],
+  "tsdown": {
+    "target": "node24",
     "format": [
       "cjs",
       "esm"
-    ],
-    "bundle": true,
-    "minify": false,
-    "clean": false,
-    "dts": true
+    ]
   },
   "publishConfig": {
     "access": "public"
+  },
+  "engines": {
+    "node": ">=24"
   }
 }