Upgrade ckeditor5-math to CKEditor v47

.github/workflows/release-package.yml

@@ -17,7 +17,7 @@ jobs:
             - uses: actions/checkout@v4
             - uses: actions/setup-node@v4
               with:
-                  node-version: "20.x"
+                  node-version: "24.x"
             - name: project - install
               run: yarn --frozen-lockfile
             - run: yarn eslint
@@ -35,7 +35,7 @@ jobs:
             - uses: actions/checkout@v4
             - uses: actions/setup-node@v4
               with:
-                  node-version: "20.x"
+                  node-version: "24.x"
                   registry-url: https://npm.pkg.github.com/
             - name: project - install
               run: yarn --frozen-lockfile

.github/workflows/tests.yml

@@ -8,7 +8,7 @@ jobs:
 
         strategy:
             matrix:
-                node-version: [20.x]
+                node-version: [24.x]
 
         steps:
             - uses: actions/checkout@v4

.nvmrc

@@ -1 +1 @@
-18.12.1
+24.14.1

.tool-versions

@@ -1,3 +1,2 @@
-nodejs 20.15.1
+nodejs 24.14.1
 yarn 1.22.22
-

CHANGELOG.md

@@ -4,6 +4,14 @@
 
 -   Add latest changes here
 
+## [v47.6.1-next.0](https://github.com/Multiverse-io/ckeditor5-math/compare/v43.2.0-next.2...v47.6.1-next.0) (2026-03-27)
+
+-   Update dependencies and compatibility for CKEditor 47.6.1.
+-   Fix drag-and-drop reconversion and widget persistence after moving math widgets.
+-   Restore KaTeX sample rendering and balloon form styling for CKEditor 47.
+-   Raise the minimum Node.js version to 24.11+ for the CKEditor 47 toolchain.
+-   Add an `outputType` sample toggle with span/script tests.
+
 ## [v43.2.0-next.2](https://github.com/Multiverse-io/ckeditor5-math/compare/v43.2.0-next.1...v43.2.0-next.2) (2024-10-22)
 
 -   Update toolbar icon svg

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiverse-io/ckeditor5-math",
-  "version": "43.2.0-next.2",
+  "version": "47.6.1-next.0",
   "description": "Math feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -30,35 +30,35 @@
   },
   "license": "UNLICENSED",
   "engines": {
-    "node": ">=18.0.0",
+    "node": ">=24.11.0",
     "npm": ">=5.7.1"
   },
   "files": [
     "dist",
     "ckeditor5-metadata.json"
   ],
   "devDependencies": {
-    "@ckeditor/ckeditor5-dev-build-tools": "43.0.0",
-    "@ckeditor/ckeditor5-inspector": ">=4.1.0",
-    "@ckeditor/ckeditor5-package-tools": "^2.1.0",
+    "@ckeditor/ckeditor5-dev-build-tools": "55.2.0",
+    "@ckeditor/ckeditor5-inspector": ">=5.0.0",
+    "@ckeditor/ckeditor5-package-tools": "^5.1.0",
     "@types/chai": "^4.3.1",
     "@types/mocha": "^9.1.1",
     "@types/sinon": "^17.0.3",
     "@typescript-eslint/eslint-plugin": "~5.43.0",
     "@typescript-eslint/parser": "^5.18.0",
-    "ckeditor5": "latest",
+    "ckeditor5": "^47.6.1",
     "eslint": "^7.32.0",
-    "eslint-config-ckeditor5": ">=7.1.0",
+    "eslint-config-ckeditor5": "9.1.0",
     "http-server": "^14.1.0",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.6",
     "stylelint": "^13.13.1",
-    "stylelint-config-ckeditor5": ">=7.1.0",
+    "stylelint-config-ckeditor5": "10.0.0",
     "ts-node": "^10.9.1",
-    "typescript": "5.0.4"
+    "typescript": "~5.5"
   },
   "peerDependencies": {
-    "ckeditor5": ">=43.2.0 || ^0.0.0-nightly"
+    "ckeditor5": ">=47.0.0"
   },
   "resolutions": {
     "tar": "^7.5.3",
@@ -73,9 +73,9 @@
     "webpack-dev-server": "^5.2.1",
     "http-proxy-middleware": "^3.0.5",
     "cross-spawn": "^7.0.5",
-    "@babel/helpers": "^7.26.10",
     "rollup": "^4.59.0",
     "flatted": "^3.4.2",
+    "@babel/helpers": "^7.26.10",
     "**/mocha/debug": ">=3.2.7 <4",
     "**/mocha/diff": ">=3.5.1 <4",
     "**/mocha/minimatch": ">=3.0.5 <4"

sample/ckeditor.ts

@@ -2,6 +2,7 @@
 declare global {
 	interface Window {
 		editor: ClassicEditor;
+		createMathEditor: ( outputType: 'span' | 'script' ) => Promise<void>;
 	}
 }
 
@@ -36,65 +37,92 @@ import { Math, AutoformatMath } from '../src/index.js';
 
 import 'ckeditor5/ckeditor5.css';
 
-ClassicEditor
-	.create( document.getElementById( 'editor' )!, {
+// eslint-disable-next-line max-len
+const LICENSE_KEY = 'eyJhbGciOiJFUzI1NiJ9.eyJleHAiOjE3NzMyNzM1OTksImp0aSI6IjE4OWY5M2Q4LThjNGEtNDY1ZS1iM2NjLTExNjA4NmU5MmIxNSIsImRpc3RyaWJ1dGlvbkNoYW5uZWwiOlsic2giLCJkcnVwYWwiXSwid2hpdGVMYWJlbCI6dHJ1ZSwibGljZW5zZVR5cGUiOiJkZXZlbG9wbWVudCIsImZlYXR1cmVzIjpbIkRSVVAiLCJETyIsIkZQIiwiU0MiLCJUT0MiLCJUUEwiLCJQT0UiLCJDQyIsIk1GIiwiU0VFIiwiRUNIIiwiRUlTIiwiTEgiLCJGT08iLCJFMlAiLCJJVyIsIkUyVyJdLCJ2YyI6IjgwZTZiNGY3In0.fxiIg-S7r8GBeN52vnoAsC_OGpFm8LuvMC_MTHGFUJzNants9MKJ1gPiqGX3ZALW10PTJ4KADhrsLPkcsdM_-w';
+
+const SHARED_PLUGINS = [
+	Math,
+	AutoformatMath,
+	Essentials,
+	Autoformat,
+	BlockQuote,
+	Bold,
+	Heading,
+	Image,
+	ImageCaption,
+	ImageStyle,
+	ImageToolbar,
+	ImageUpload,
+	Indent,
+	Italic,
+	Link,
+	List,
+	MediaEmbed,
+	Paragraph,
+	Table,
+	TableToolbar,
+	CodeBlock,
+	Code,
+	Base64UploadAdapter
+];
+
+const SHARED_TOOLBAR = [
+	'undo',
+	'redo',
+	'|',
+	'math',
+	'|',
+	'heading',
+	'|',
+	'bold',
+	'italic',
+	'link',
+	'code',
+	'bulletedList',
+	'numberedList',
+	'|',
+	'outdent',
+	'indent',
+	'|',
+	'uploadImage',
+	'blockQuote',
+	'insertTable',
+	'mediaEmbed',
+	'codeBlock'
+];
+
+function loadTemplate( outputType: 'span' | 'script' ): string {
+	const tpl = document.getElementById( `tpl-${ outputType }` ) as HTMLTemplateElement | null;
+	if ( !tpl ) {
+		throw new Error( `Template #tpl-${ outputType } not found` );
+	}
+	const div = document.createElement( 'div' );
+	div.appendChild( tpl.content.cloneNode( true ) );
+	return div.innerHTML;
+}
+
+async function createMathEditor( outputType: 'span' | 'script' ): Promise<void> {
+	if ( window.editor && typeof window.editor.destroy === 'function' ) {
+		await window.editor.destroy();
+	}
+
+	const editorEl = document.getElementById( 'editor' )!;
+	editorEl.innerHTML = loadTemplate( outputType );
+
+	const editor = await ClassicEditor.create( editorEl, {
+		licenseKey: LICENSE_KEY,
 		math: {
 			engine: 'katex',
+			outputType,
+			forceOutputType: outputType === 'span',
 			katexRenderOptions: {
 				macros: {
 					'\\test': '\\mathrel{\\char`≠}'
 				}
 			}
 		},
-		plugins: [
-			Math,
-			AutoformatMath,
-			Essentials,
-			Autoformat,
-			BlockQuote,
-			Bold,
-			Heading,
-			Image,
-			ImageCaption,
-			ImageStyle,
-			ImageToolbar,
-			ImageUpload,
-			Indent,
-			Italic,
-			Link,
-			List,
-			MediaEmbed,
-			Paragraph,
-			Table,
-			TableToolbar,
-			CodeBlock,
-			Code,
-			Base64UploadAdapter
-		],
-		toolbar: [
-			'undo',
-			'redo',
-			'|',
-			'math',
-			'|',
-			'heading',
-			'|',
-			'bold',
-			'italic',
-			'link',
-			'code',
-			'bulletedList',
-			'numberedList',
-			'|',
-			'outdent',
-			'indent',
-			'|',
-			'uploadImage',
-			'blockQuote',
-			'insertTable',
-			'mediaEmbed',
-			'codeBlock'
-		],
+		plugins: SHARED_PLUGINS,
+		toolbar: SHARED_TOOLBAR,
 		image: {
 			toolbar: [
 				'imageStyle:inline',
@@ -111,12 +139,29 @@ ClassicEditor
 				'mergeTableCells'
 			]
 		}
-	} )
-	.then( editor => {
-		window.editor = editor;
-		CKEditorInspector.attach( editor );
-		window.console.log( 'CKEditor 5 is ready.', editor );
-	} )
-	.catch( err => {
-		window.console.error( err.stack );
 	} );
+
+	window.editor = editor;
+	CKEditorInspector.attach( editor );
+	window.console.log( `CKEditor 5 is ready (outputType: ${ outputType }).`, editor );
+}
+
+window.createMathEditor = createMathEditor;
+
+// Read initial selection from radio buttons
+const checkedRadio = document.querySelector<HTMLInputElement>(
+	'input[name="outputType"]:checked'
+);
+const initialType = ( checkedRadio?.value === 'script' ? 'script' : 'span' ) as 'span' | 'script';
+
+// Wire up radio change handler
+document.querySelectorAll<HTMLInputElement>( 'input[name="outputType"]' ).forEach( radio => {
+	radio.addEventListener( 'change', () => {
+		createMathEditor( radio.value as 'span' | 'script' );
+	} );
+} );
+
+// Create initial editor
+createMathEditor( initialType ).catch( err => {
+	window.console.error( err.stack );
+} );