implement @esi_package/ckeditor5-mathlive@0.0.14 into the project

package.json

@@ -42,6 +42,7 @@
     "@vitest/browser": "^2.0.5",
     "@vitest/coverage-istanbul": "^2.0.5",
     "ckeditor5": "43.3.1",
+    "css-loader": "^7.1.2",
     "eslint": "^7.32.0",
     "eslint-config-ckeditor5": ">=8.0.0",
     "file-saver": "^2.0.5",
@@ -49,13 +50,16 @@
     "http-server": "^14.1.0",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.6",
+    "style-loader": "^4.0.0",
     "stylelint": "^13.13.1",
     "stylelint-config-ckeditor5": ">=8.0.0",
     "ts-node": "^10.9.1",
     "typescript": "5.0.4",
     "vite-plugin-svgo": "~1.4.0",
     "vitest": "^2.0.5",
-    "webdriverio": "^9.0.7"
+    "webdriverio": "^9.0.7",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1"
   },
   "peerDependencies": {
     "ckeditor5": ">=42.0.0 || ^0.0.0-nightly"
@@ -87,5 +91,8 @@
     "hooks": {
       "pre-commit": "lint-staged"
     }
+  },
+  "dependencies": {
+    "@esi_package/ckeditor5-mathlive": "^0.0.14"
   }
 }

sample/ckeditor.ts

@@ -4,6 +4,8 @@ declare global {
 	}
 }
 
+import '@esi_package/ckeditor5-mathlive/mathlive.bundle.js';
+
 import {
 	ClassicEditor,
 	Autoformat,
@@ -31,8 +33,10 @@ import {
 	FontColor,
 	FontSize,
 	FontBackgroundColor,
-	Alignment
+	Alignment,
+	Underline
 } from 'ckeditor5';
+import { Mathlive, MathlivePanelview } from '@esi_package/ckeditor5-mathlive';
 
 import CKEditorInspector from '@ckeditor/ckeditor5-inspector';
 
@@ -40,6 +44,9 @@ import Export from '../src/export.js';
 
 import 'ckeditor5/ckeditor5.css';
 
+import '@esi_package/ckeditor5-mathlive/mathlive.bundle.css';
+import '@esi_package/ckeditor5-mathlive/index.css';
+
 ClassicEditor
 	.create( document.getElementById( 'editor' )!, {
 		plugins: [
@@ -69,18 +76,22 @@ ClassicEditor
 			FontColor,
 			FontSize,
 			FontBackgroundColor,
-			Alignment
+			Alignment,
+			Underline,
+			Mathlive
 		],
 		toolbar: [
 			'undo',
 			'redo',
 			'|',
 			'exportButton',
+			'mathlive',
 			'|',
 			'heading',
 			'|',
 			'alignment',
 			'|',
+			'underline',
 			'bold',
 			'italic',
 			'link',
@@ -125,7 +136,40 @@ ClassicEditor
 				generatePtSetting( 18 ),
 				generatePtSetting( 20 )
 			]
-		}
+		},
+		fontFamily: {
+			options: [
+				'default',
+				'Arial, sans-serif',
+				'Georgia, serif',
+				'Impact, Charcoal, sans-serif',
+				'Lucida Console, Monaco, monospace',
+				'Lucida Sans Unicode, Lucida Grande, sans-serif',
+				'Tahoma, Geneva, sans-serif',
+				'Times New Roman, Times, serif',
+				'Trebuchet MS, Helvetica, sans-serif',
+				'Verdana, Geneva, sans-serif',
+				'TH Sarabun New, sans-serif',
+				'Angsana New, serif',
+				'Noto Sans Thai, sans-serif',
+			]
+		},
+		mathlive: {
+			renderMathPanel( element ) {
+				let panelView: MathlivePanelview | null = new MathlivePanelview();
+				panelView.setTextForInsertButton( 'สอดแทรกเลย!' );
+				panelView.setTextForPanelHeader( 'เครื่องมือคณิตศาสตร์' );
+				panelView.setSpawnPanelOnLeft( true ); // default is false, set to true to spawn on the left
+				panelView.setSpawnPanelOnTop( true ); // default is false, set to true to spawn on top
+				panelView.mount( element );
+				return () => {
+					panelView?.destroy();
+					panelView = null;
+				}
+			},
+			mathPanelDestroyOnClose: true,
+			openPanelWhenEquationSelected: false,
+		},
 	} )
 	.then( editor => {
 		window.editor = editor;

webpack.config.js

@@ -0,0 +1,27 @@
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.ts', // Entry point of your app
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/, // Process CSS files
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.ts$/, // Process TypeScript files
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.js'], // Resolve these extensions
+  },
+  devtool: 'source-map', // Enable source maps for easier debugging
+  mode: 'development', // Set to 'production' for production builds
+};