#156 Make it work with v47.x

.nvmrc

@@ -1 +1 @@
-18.12.1
+22.22.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isaul32/ckeditor5-math",
-  "version": "43.2.0",
+  "version": "47.6.0",
   "description": "Math feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,45 +13,46 @@
   ],
   "main": "src/index.ts",
   "dependencies": {
-    "ckeditor5": "43.2.0"
+    "ckeditor5": "47.6.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-autoformat": "43.2.0",
-    "@ckeditor/ckeditor5-basic-styles": "43.2.0",
-    "@ckeditor/ckeditor5-block-quote": "43.2.0",
-    "@ckeditor/ckeditor5-code-block": "43.2.0",
-    "@ckeditor/ckeditor5-core": "43.2.0",
-    "@ckeditor/ckeditor5-editor-classic": "43.2.0",
-    "@ckeditor/ckeditor5-essentials": "43.2.0",
-    "@ckeditor/ckeditor5-heading": "43.2.0",
-    "@ckeditor/ckeditor5-image": "43.2.0",
-    "@ckeditor/ckeditor5-indent": "43.2.0",
+    "@ckeditor/ckeditor5-autoformat": "47.6.0",
+    "@ckeditor/ckeditor5-basic-styles": "47.6.0",
+    "@ckeditor/ckeditor5-block-quote": "47.6.0",
+    "@ckeditor/ckeditor5-code-block": "47.6.0",
+    "@ckeditor/ckeditor5-core": "47.6.0",
+    "@ckeditor/ckeditor5-editor-classic": "47.6.0",
+    "@ckeditor/ckeditor5-essentials": "47.6.0",
+    "@ckeditor/ckeditor5-heading": "47.6.0",
+    "@ckeditor/ckeditor5-icons": "^47.6.0",
+    "@ckeditor/ckeditor5-image": "47.6.0",
+    "@ckeditor/ckeditor5-indent": "47.6.0",
     "@ckeditor/ckeditor5-inspector": "4.1.0",
-    "@ckeditor/ckeditor5-link": "43.2.0",
-    "@ckeditor/ckeditor5-list": "43.2.0",
-    "@ckeditor/ckeditor5-media-embed": "43.2.0",
+    "@ckeditor/ckeditor5-link": "47.6.0",
+    "@ckeditor/ckeditor5-list": "47.6.0",
+    "@ckeditor/ckeditor5-media-embed": "47.6.0",
     "@ckeditor/ckeditor5-package-tools": "^1.1.0",
-    "@ckeditor/ckeditor5-paragraph": "43.2.0",
-    "@ckeditor/ckeditor5-table": "43.2.0",
-    "@ckeditor/ckeditor5-theme-lark": "43.2.0",
-    "@ckeditor/ckeditor5-upload": "43.2.0",
-    "@types/chai": "^4.3.13",
-    "@types/mocha": "^10.0.6",
-    "@types/sinon": "^17.0.3",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
-    "eslint": "^8.57.0",
-    "eslint-config-ckeditor5": "^7.1.0",
+    "@ckeditor/ckeditor5-paragraph": "47.6.0",
+    "@ckeditor/ckeditor5-table": "47.6.0",
+    "@ckeditor/ckeditor5-theme-lark": "47.6.0",
+    "@ckeditor/ckeditor5-upload": "47.6.0",
+    "@types/chai": "^5.2.3",
+    "@types/mocha": "^10.0.10",
+    "@types/sinon": "^21.0.0",
+    "@typescript-eslint/eslint-plugin": "~8.57.1",
+    "@typescript-eslint/parser": "^8.57.1",
+    "eslint": "^9.0.0",
+    "eslint-config-ckeditor5": "^12.0.0",
     "http-server": "^14.1.0",
-    "husky": "^4.2.5",
-    "lint-staged": "^10.2.6",
-    "stylelint": "^13.13.1",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.0.0",
+    "stylelint": "^16.0.0",
     "stylelint-config-ckeditor5": ">=7.1.0",
-    "typescript": "^5.4.2"
+    "typescript": "^5.9.3"
   },
   "engines": {
-    "node": ">=18.0.0",
-    "npm": ">=5.7.1"
+    "node": ">=22.0.0",
+    "npm": ">=10.5.1"
   },
   "author": "Sauli Anto",
   "license": "ISC",
@@ -71,7 +72,7 @@
   ],
   "scripts": {
     "ts:build": "tsc -p ./tsconfig.release.json",
-    "ts:clear": "npx rimraf \"src/**/*.@(js|d.ts)\"",
+    "ts:clear": "npx rimraf --glob \"src/**/*.@(js|d.ts)\"",
     "dll:build": "ckeditor5-package-tools dll:build",
     "dll:serve": "http-server ./ -o sample/dll.html",
     "lint": "eslint --quiet --ext .ts src/",

sample/ckeditor.js

@@ -1,27 +1,20 @@
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
 import CKEditorInspector from '@ckeditor/ckeditor5-inspector';
 
-import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
-import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
-import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
-import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
-import Heading from '@ckeditor/ckeditor5-heading/src/heading';
-import Image from '@ckeditor/ckeditor5-image/src/image';
-import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
-import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
-import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
-import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
-import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';
-import Indent from '@ckeditor/ckeditor5-indent/src/indent';
-import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
-import Link from '@ckeditor/ckeditor5-link/src/link';
-import List from '@ckeditor/ckeditor5-list/src/list';
-import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
-import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import Table from '@ckeditor/ckeditor5-table/src/table';
-import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
-import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
-import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
+import { Essentials } from '@ckeditor/ckeditor5-essentials';
+import { Autoformat } from '@ckeditor/ckeditor5-autoformatt';
+import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
+import { Bold, Code, Italic } from '@ckeditor/ckeditor5-basic-styles';
+import { Heading } from '@ckeditor/ckeditor5-heading';
+import { Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload  } from '@ckeditor/ckeditor5-image';
+import { Base64UploadAdapter } from '@ckeditor/ckeditor5-upload';
+import { Indent } from '@ckeditor/ckeditor5-indent';
+import { Link } from '@ckeditor/ckeditor5-link';
+import { List } from '@ckeditor/ckeditor5-list';
+import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
+import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
+import { Table, TableToolbar } from '@ckeditor/ckeditor5-table';
+import { CodeBlock } from '@ckeditor/ckeditor5-code-block';
 
 import { Math, AutoformatMath } from '../src/index';
 

src/autoformatmath.ts

@@ -1,7 +1,7 @@
 import { Plugin } from 'ckeditor5/src/core';
 import { global, logWarning } from 'ckeditor5/src/utils';
 // eslint-disable-next-line ckeditor5-rules/allow-imports-only-from-main-package-entry-point
-import blockAutoformatEditing from '@ckeditor/ckeditor5-autoformat/src/blockautoformatediting';
+import { blockAutoformatEditing } from '@ckeditor/ckeditor5-autoformat/src/blockautoformatediting';
 import Math from './math';
 import MathCommand from './mathcommand';
 import MathUI from './mathui';

src/automath.ts

@@ -1,6 +1,6 @@
 import { Clipboard } from 'ckeditor5/src/clipboard';
 import { Plugin, type Editor } from 'ckeditor5/src/core';
-import { LivePosition, LiveRange } from 'ckeditor5/src/engine';
+import { ModelLivePosition, ModelLiveRange } from 'ckeditor5/src/engine';
 import { Undo } from 'ckeditor5/src/undo';
 import { global } from 'ckeditor5/src/utils';
 import { extractDelimiters, hasDelimiters, delimitersCounts } from './utils';
@@ -15,7 +15,7 @@ export default class AutoMath extends Plugin {
 	}
 
 	private _timeoutId: null | number;
-	private _positionToInsert: null | LivePosition;
+	private _positionToInsert: null | ModelLivePosition;
 
 	constructor( editor: Editor ) {
 		super( editor );
@@ -35,10 +35,10 @@ export default class AutoMath extends Plugin {
 				return;
 			}
 
-			const leftLivePosition = LivePosition.fromPosition( firstRange.start );
+			const leftLivePosition = ModelLivePosition.fromPosition( firstRange.start );
 			leftLivePosition.stickiness = 'toPrevious';
 
-			const rightLivePosition = LivePosition.fromPosition( firstRange.end );
+			const rightLivePosition = ModelLivePosition.fromPosition( firstRange.end );
 			rightLivePosition.stickiness = 'toNext';
 
 			modelDocument.once( 'change:data', () => {
@@ -67,15 +67,15 @@ export default class AutoMath extends Plugin {
 	}
 
 	private _mathBetweenPositions(
-		leftPosition: LivePosition,
-		rightPosition: LivePosition
+		leftPosition: ModelLivePosition,
+		rightPosition: ModelLivePosition
 	) {
 		const editor = this.editor;
 
 		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 		const mathConfig = this.editor.config.get( 'math' )!;
 
-		const equationRange = new LiveRange( leftPosition, rightPosition );
+		const equationRange = new ModelLiveRange( leftPosition, rightPosition );
 		const walker = equationRange.getWalker( { ignoreElementEnd: true } );
 
 		let text = '';
@@ -101,7 +101,7 @@ export default class AutoMath extends Plugin {
 			return;
 		}
 
-		this._positionToInsert = LivePosition.fromPosition( leftPosition );
+		this._positionToInsert = ModelLivePosition.fromPosition( leftPosition );
 
 		// With timeout user can undo conversation if want use plain text
 		this._timeoutId = global.window.setTimeout( () => {
@@ -110,7 +110,7 @@ export default class AutoMath extends Plugin {
 
 				writer.remove( equationRange );
 
-				let insertPosition: LivePosition | null;
+				let insertPosition: ModelLivePosition | null;
 
 				// Check if position where the math element should be inserted is still valid.
 				if ( this._positionToInsert?.root.rootName !== '$graveyard' ) {

src/mathediting.ts

@@ -6,7 +6,7 @@ import {
 	viewToModelPositionOutsideModelElement
 } from 'ckeditor5/src/widget';
 import { renderEquation, extractDelimiters } from './utils';
-import type { DowncastWriter, Element } from 'ckeditor5/src/engine';
+import type { ViewDowncastWriter, ModelElement } from 'ckeditor5/src/engine';
 import { CKEditorError, uid } from 'ckeditor5/src/utils';
 
 export default class MathEditing extends Plugin {
@@ -209,8 +209,8 @@ export default class MathEditing extends Plugin {
 
 		// Create view for editor
 		function createMathtexEditingView(
-			modelItem: Element,
-			writer: DowncastWriter
+			modelItem: ModelElement,
+			writer: ViewDowncastWriter
 		) {
 			const equation = String( modelItem.getAttribute( 'equation' ) );
 			const display = !!modelItem.getAttribute( 'display' );
@@ -259,8 +259,8 @@ export default class MathEditing extends Plugin {
 
 		// Create view for data
 		function createMathtexView(
-			modelItem: Element,
-			{ writer }: { writer: DowncastWriter }
+			modelItem: ModelElement,
+			{ writer }: { writer: ViewDowncastWriter }
 		) {
 			const equation = modelItem.getAttribute( 'equation' );
 			if ( typeof equation != 'string' ) {

src/ui/mainformview.ts

@@ -1,4 +1,4 @@
-import { icons } from 'ckeditor5/src/core';
+import { IconCheck, IconCancel } from 'ckeditor5/src/icons';
 import {
 	ButtonView,
 	createLabeledInputText,
@@ -18,8 +18,6 @@ import MathView from './mathview';
 import '../../theme/mathform.css';
 import type { KatexOptions } from '../typings-external';
 
-const { check: checkIcon, cancel: cancelIcon } = icons;
-
 class MathInputView extends LabeledFieldView<InputTextView> {
 	public value: null | string = null;
 	public isReadOnly = false;
@@ -62,7 +60,7 @@ export default class MainFormView extends View {
 		const t = locale.t;
 
 		// Submit button
-		this.saveButtonView = this._createButton( t( 'Save' ), checkIcon, 'ck-button-save', null );
+		this.saveButtonView = this._createButton( t( 'Save' ), IconCheck, 'ck-button-save', null );
 		this.saveButtonView.type = 'submit';
 
 		// Equation input
@@ -72,7 +70,7 @@ export default class MainFormView extends View {
 		this.displayButtonView = this._createDisplayButton();
 
 		// Cancel button
-		this.cancelButtonView = this._createButton( t( 'Cancel' ), cancelIcon, 'ck-button-cancel', 'cancel' );
+		this.cancelButtonView = this._createButton( t( 'Cancel' ), IconCancel, 'ck-button-cancel', 'cancel' );
 
 		this.previewEnabled = previewEnabled;
 

src/utils.ts

@@ -1,15 +1,15 @@
 import type { Editor } from 'ckeditor5/src/core';
 import type {
-	Element as CKElement,
-	DocumentSelection
+	ModelElement,
+	ModelDocumentSelection
 } from 'ckeditor5/src/engine';
 import { BalloonPanelView } from 'ckeditor5/src/ui';
-import { CKEditorError, type PositioningFunction } from 'ckeditor5/src/utils';
+import { CKEditorError, type PositioningFunction, global } from 'ckeditor5/src/utils';
 import type { KatexOptions, MathJax2, MathJax3 } from './typings-external';
 
 export function getSelectedMathModelWidget(
-	selection: DocumentSelection
-): null | CKElement {
+	selection: ModelDocumentSelection
+): null | ModelElement {
 	const selectedElement = selection.getSelectedElement();
 
 	if (
@@ -89,7 +89,7 @@ export async function renderEquation(
 	previewClassName: Array<string> = [],
 	katexRenderOptions: KatexOptions = {}
 ): Promise<void> {
-	if ( engine == 'mathjax' ) {
+	if ( engine == 'mathjax' && global.window.MathJax !== undefined ) {
 		if ( isMathJaxVersion3( MathJax ) ) {
 			selectRenderMode(
 				element,

tests/automath.ts

@@ -1,12 +1,12 @@
 import Mathematics from '../src/math';
 import AutoMath from '../src/automath';
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
-import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import Undo from '@ckeditor/ckeditor5-undo/src/undo';
-import Typing from '@ckeditor/ckeditor5-typing/src/typing';
-import global from '@ckeditor/ckeditor5-utils/src/dom/global';
-import { getData, setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
+import { Clipboard } from '@ckeditor/ckeditor5-clipboard';
+import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
+import { Undo } from '@ckeditor/ckeditor5-undo';
+import { Typing } from '@ckeditor/ckeditor5-typing';
+import { global } from '@ckeditor/ckeditor5-utils';
+import { _getModelData as getData, _setModelData as setData } from '@ckeditor/ckeditor5-engine';
 import { expect } from 'chai';
 import type { SinonFakeTimers } from 'sinon';
 

tests/math.ts

@@ -1,10 +1,10 @@
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 import Mathematics from '../src/math';
 import MathEditing from '../src/mathediting';
 import MathUI from '../src/mathui';
 import AutoMath from '../src/automath';
-import Widget from '@ckeditor/ckeditor5-widget/src/widget';
-import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
+import { Widget } from '@ckeditor/ckeditor5-widget';
+import { global } from '@ckeditor/ckeditor5-utils';
 import { expect } from 'chai';
 
 describe( 'Math', () => {

tests/mathui.ts

@@ -1,18 +1,13 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* globals document, Event  */
 
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor.js';
-import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard.js';
-import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model.js';
-
 import MathUI from '../src/mathui';
 import MainFormView from '../src/ui/mainformview';
-import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon.js';
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview.js';
-import View from '@ckeditor/ckeditor5-ui/src/view.js';
-import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js';
-
-import ClickObserver from '@ckeditor/ckeditor5-engine/src/view/observer/clickobserver.js';
+import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
+import { ClickObserver,  _setModelData as setModelData } from '@ckeditor/ckeditor5-engine';
+import { View, ButtonView, ContextualBalloon } from '@ckeditor/ckeditor5-ui';
+import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
+import { keyCodes } from '@ckeditor/ckeditor5-utils';
 import { expect } from 'chai';
 import type { SinonSpy } from 'sinon';
 

tsconfig.json

@@ -1,6 +1,16 @@
 {
   "compilerOptions": {
+    /**
+     * TypeScript automagically loads typings from all "@types/*" packages if the "compilerOptions.types" array is not defined in
+     * this file. However, if some dependencies have "@types/*" packages as their dependencies, they'll also be loaded as well.
+     * As a result, TypeScript loaded "@types/node" which we don't want to use, because it allows using Node.js specific APIs that
+     * are not available in the browsers.
+     *
+     * To avoid such issues, we defined this empty "types" to disable automatic inclusion of the "@types/*" packages.
+     */
+    "types": [],
     "lib": [
+      "ES2020",
       "DOM"
     ],
     "noImplicitAny": true,
@@ -19,7 +29,6 @@
   "include": [
     "./sample",
     "./src",
-    "./tests",
     "./typings"
   ]
 }