Migrate to Typescript

.eslintrc.cjs

@@ -0,0 +1,60 @@
+module.exports = {
+	extends: [
+		"ckeditor5",
+		"plugin:@typescript-eslint/strict",
+		"plugin:@typescript-eslint/stylistic-type-checked",
+	],
+	root: true,
+	plugins: ["@typescript-eslint"],
+	parser: "@typescript-eslint/parser",
+	parserOptions: {
+		project: true,
+		__tsconfigRootDir: __dirname,
+		ecmaVersion: "latest",
+		sourceType: "module",
+	},
+	globals: {
+		MathJax: true,
+		katex: true,
+		console: true,
+	},
+	ignorePatterns: [
+		// Ignore the entire `build/` (the DLL build).
+		"build/**",
+		// Ignore compiled JavaScript files, as they are generated automatically.
+		'src/**/*.js',
+		// Also, do not check typing declarations, too.
+		'src/**/*.d.ts'
+	],
+	rules: {
+		// This rule disallows importing core DLL packages directly. Imports should be done using the `ckeditor5` package.
+		// Also, importing non-DLL packages is not allowed. If the package requires other features to work, they should be
+		// specified as soft-requirements.
+		// Read more: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/migration/migration-to-26.html#soft-requirements.
+		"ckeditor5-rules/ckeditor-imports": "error",
+
+		// This rule could not be found ???
+		"ckeditor5-rules/use-require-for-debug-mode-imports": "off",
+
+		"no-void": ["error", { allowAsStatement: true }],
+	},
+	overrides: [
+		{
+			files: [ 'tests/**/*.[jt]s', 'sample/**/*.[jt]s' ],
+			rules: {
+				// To write complex tests, you may need to import files that are not exported in DLL files by default.
+				// Hence, imports CKEditor 5 packages in test files are not checked.
+				"ckeditor5-rules/ckeditor-imports": "off",
+			},
+		},
+		{
+			env: {
+				node: true,
+			},
+			files: [".eslintrc.{js,cjs}"],
+			parserOptions: {
+				sourceType: "script",
+			},
+		},
+	],
+};

.gitignore

@@ -4,3 +4,7 @@ tmp/
 sample/ckeditor.dist.js
 package-lock.json
 yarn-error.log
+
+# Ignore compiled TypeScript files.
+src/**/*.js
+src/**/*.d.ts

.prettierrc

@@ -1,3 +1,11 @@
 {
-  "embeddedLanguageFormatting": "off"
+	"embeddedLanguageFormatting": "off",
+	"overrides": [
+		{
+			"files": "*.json",
+			"options": {
+				"tabWidth": 2
+			}
+		}
+	]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isaul32/ckeditor5-math",
-  "version": "41.2.0",
+  "version": "41.2.1-alpha.3",
   "description": "Math feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -9,9 +9,9 @@
     "ckeditor5-feature",
     "ckeditor5-plugin",
     "ckeditor5-math",
-	"katex"
+    "katex"
   ],
-  "main": "src/index.js",
+  "main": "src/index.ts",
   "dependencies": {
     "ckeditor5": "41.2.0"
   },
@@ -35,13 +35,16 @@
     "@ckeditor/ckeditor5-table": "41.2.0",
     "@ckeditor/ckeditor5-theme-lark": "41.2.0",
     "@ckeditor/ckeditor5-upload": "41.2.0",
-    "eslint": "^7.32.0",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "eslint": "^8.57.0",
     "eslint-config-ckeditor5": "^5.3.0",
     "http-server": "^14.1.0",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.6",
     "stylelint": "^13.13.1",
-    "stylelint-config-ckeditor5": ">=5.3.0"
+    "stylelint-config-ckeditor5": ">=5.3.0",
+    "typescript": "^5.4.2"
   },
   "engines": {
     "node": ">=18.0.0",
@@ -56,24 +59,29 @@
   },
   "files": [
     "lang",
-    "src",
+    "src/**/*.js",
+    "src/**/*.d.ts",
     "build",
     "theme",
     "ckeditor5-metadata.json",
     "CHANGELOG.md"
   ],
   "scripts": {
+    "ts:build": "tsc -p ./tsconfig.release.json",
+    "ts:clear": "npx rimraf \"src/**/*.@(js|d.ts)\"",
     "dll:build": "ckeditor5-package-tools dll:build",
     "dll:serve": "http-server ./ -o sample/dll.html",
-    "lint": "eslint --quiet src/**/*.js",
-    "lint:fix": "eslint --quiet src/**/*.js --fix",
+    "lint": "eslint --quiet --ext .ts src/",
+    "lint:fix": "eslint --quiet --fix --ext .ts src/",
     "stylelint": "stylelint --quiet --allow-empty-input 'theme/**/*.css'",
     "test": "ckeditor5-package-tools test",
     "prepare": "yarn run dll:build",
+    "prepublishOnly": "yarn run ts:build && ckeditor5-package-tools export-package-as-javascript",
+    "postpublish": "yarn run ts:clear && ckeditor5-package-tools export-package-as-typescript",
     "start": "ckeditor5-package-tools start"
   },
   "lint-staged": {
-    "**/*.js": [
+    "**/*.ts": [
       "eslint --quiet"
     ],
     "**/*.css": [

src/augmentation.ts

@@ -0,0 +1,22 @@
+import type { KatexOptions } from './typings-external';
+
+declare module '@ckeditor/ckeditor5-core' {
+	interface EditorConfig {
+		math?: {
+			engine?:
+				| 'mathjax'
+				| 'katex'
+				| ( ( equation: string, element: HTMLElement, display: boolean ) => void )
+				| undefined;
+			lazyLoad?: undefined | ( () => Promise<void> );
+			outputType?: 'script' | 'span' | undefined;
+			className?: string | undefined;
+			forceOutputType?: boolean | undefined;
+			enablePreview?: boolean | undefined;
+			previewClassName?: Array<string> | undefined;
+			popupClassName?: Array<string> | undefined;
+			katexRenderOptions?: Partial<KatexOptions> | undefined;
+		};
+	}
+}
+

src/autoformatmath.js → src/autoformatmath.ts

@@ -1,29 +1,32 @@
 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 Math from './math';
+import MathCommand from './mathcommand';
+import MathUI from './mathui';
 
 export default class AutoformatMath extends Plugin {
-	static get requires() {
-		return [ Math, 'Autoformat' ];
+	public static get requires() {
+		return [ Math, 'Autoformat' ] as const;
 	}
 
 	/**
 	 * @inheritDoc
 	 */
-	init() {
+	public init(): void {
 		const editor = this.editor;
 
 		if ( !editor.plugins.has( 'Math' ) ) {
 			logWarning( 'autoformat-math-feature-missing', editor );
 		}
 	}
 
-	afterInit() {
+	public afterInit(): void {
 		const editor = this.editor;
 		const command = editor.commands.get( 'math' );
 
-		if ( command ) {
+		if ( command instanceof MathCommand ) {
 			const callback = () => {
 				if ( !command.isEnabled ) {
 					return false;
@@ -33,17 +36,24 @@ export default class AutoformatMath extends Plugin {
 
 				// Wait until selection is removed.
 				global.window.setTimeout(
-					() => editor.plugins.get( 'MathUI' )._showUI(),
+					() => {
+						const mathUIInstance = editor.plugins.get( 'MathUI' );
+						if ( mathUIInstance instanceof MathUI ) {
+							mathUIInstance._showUI();
+						}
+					},
 					50
 				);
 			};
 
+			// @ts-expect-error: blockAutoformatEditing expects an Autoformat instance even though it works with any Plugin instance
 			blockAutoformatEditing( editor, this, /^\$\$$/, callback );
+			// @ts-expect-error: blockAutoformatEditing expects an Autoformat instance even though it works with any Plugin instance
 			blockAutoformatEditing( editor, this, /^\\\[$/, callback );
 		}
 	}
 
-	static get pluginName() {
-		return 'AutoformatMath';
+	public static get pluginName() {
+		return 'AutoformatMath' as const;
 	}
 }