Demo CKEditor 5 with MathType SDK

From cc5ccc2a0306a56579829291ad9c94f3baeb9611 Mon Sep 17 00:00:00 2001 From: Nicolas Cornaglia Date: Wed, 15 Apr 2026 11:59:00 +0200 Subject: [PATCH] feat: add CKEditor 5 integration with MathType SDK and demo setup (#1146) * feat: add CKEditor 5 integration with MathType SDK and demo setup * fix: rename folder to ckeditor5-sdk and add file .npmrc * fix: lint * fix: update npm auth token variable in .npmrc * fix: build issue * chore: minor changes * chore: add token reading to workflow --------- Co-authored-by: Xinyu Jiang <125269853+xjiang-at-wiris@users.noreply.github.com> --- .github/workflows/deploy-staging.yml | 1 + .npmrc | 1 + demos/html/ckeditor5-sdk/README.md | 7 ++ demos/html/ckeditor5-sdk/babel.config.js | 12 +++ demos/html/ckeditor5-sdk/index.html | 14 ++++ demos/html/ckeditor5-sdk/package.json | 31 ++++++++ demos/html/ckeditor5-sdk/project.json | 56 +++++++++++++ demos/html/ckeditor5-sdk/src/app.js | 15 ++++ demos/html/ckeditor5-sdk/src/static/style.css | 28 +++++++ demos/html/ckeditor5-sdk/webpack.config.js | 79 +++++++++++++++++++ packages/ckeditor5-sdk/package.json | 33 ++++++++ packages/ckeditor5-sdk/src/index.js | 3 + packages/ckeditor5-sdk/src/plugin.js | 36 +++++++++ .../theme/icons/ckeditor5-formula.svg | 28 +++++++ 14 files changed, 344 insertions(+) create mode 100644 .npmrc create mode 100644 demos/html/ckeditor5-sdk/README.md create mode 100644 demos/html/ckeditor5-sdk/babel.config.js create mode 100644 demos/html/ckeditor5-sdk/index.html create mode 100644 demos/html/ckeditor5-sdk/package.json create mode 100644 demos/html/ckeditor5-sdk/project.json create mode 100644 demos/html/ckeditor5-sdk/src/app.js create mode 100644 demos/html/ckeditor5-sdk/src/static/style.css create mode 100644 demos/html/ckeditor5-sdk/webpack.config.js create mode 100644 packages/ckeditor5-sdk/package.json create mode 100644 packages/ckeditor5-sdk/src/index.js create mode 100644 packages/ckeditor5-sdk/src/plugin.js create mode 100644 packages/ckeditor5-sdk/theme/icons/ckeditor5-formula.svg diff --git a/.github/workflows/deploy-staging.yml b/.github/workflows/deploy-staging.yml index 2d1a0e592..7bb2c40c3 100644 --- a/.github/workflows/deploy-staging.yml +++ b/.github/workflows/deploy-staging.yml @@ -159,6 +159,7 @@ jobs: CK5_LICENSE_KEY: ${{ secrets.CK5_LICENSE_KEY }} FROALA_API_KEY: ${{ secrets.FROALA_API_KEY }} NODE_OPTIONS: "--openssl-legacy-provider" + NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} # We build tinymce7 package for tinymce8 editor as they use the same package run: | unset NODE_OPTIONS diff --git a/.npmrc b/.npmrc new file mode 100644 index 000000000..fb7f23531 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +//registry.npmjs.org/:_authToken=${NPM_AUTH_TOKEN} diff --git a/demos/html/ckeditor5-sdk/README.md b/demos/html/ckeditor5-sdk/README.md new file mode 100644 index 000000000..8b29caa78 --- /dev/null +++ b/demos/html/ckeditor5-sdk/README.md @@ -0,0 +1,7 @@ +# Firts, install dependencies + +yarn install + +# To start the demo, execute + +nx start html-ckeditor5-sdk diff --git a/demos/html/ckeditor5-sdk/babel.config.js b/demos/html/ckeditor5-sdk/babel.config.js new file mode 100644 index 000000000..392abb66d --- /dev/null +++ b/demos/html/ckeditor5-sdk/babel.config.js @@ -0,0 +1,12 @@ +module.exports = { + presets: [ + [ + "@babel/preset-env", + { + targets: { + node: "current", + }, + }, + ], + ], +}; diff --git a/demos/html/ckeditor5-sdk/index.html b/demos/html/ckeditor5-sdk/index.html new file mode 100644 index 000000000..184df60f7 --- /dev/null +++ b/demos/html/ckeditor5-sdk/index.html @@ -0,0 +1,14 @@ + + + + Demo CKEditor 5 with MathType SDK + + + +

MathType SDK — CKEditor 5 Demo

Click the MathType button in the toolbar to open the editor.

+ + + diff --git a/demos/html/ckeditor5-sdk/package.json b/demos/html/ckeditor5-sdk/package.json new file mode 100644 index 000000000..61acae803 --- /dev/null +++ b/demos/html/ckeditor5-sdk/package.json @@ -0,0 +1,31 @@ +{ + "name": "demo-html-ckeditor5-sdk", + "version": "1.0.0", + "private": true, + "description": "A simple html App integrating WIRIS MathType SDK in a CKEditor5 rich text editor.", + "main": "app.js", + "scripts": { + "prestart-remote": "yarn --ignore-engines && yarn unlink @wiris/mathtype-ckeditor5-sdk && yarn install --force --ignore-engines", + "prestart": "yarn --ignore-engines && yarn link @wiris/mathtype-ckeditor5-sdk" + }, + "author": "WIRIS Team (http://www.wiris.com)", + "license": "MIT", + "dependencies": { + "ckeditor5": ">=46.0.0", + "@wiris/mathtype-ckeditor5-sdk": "*", + "@wiris/mathtype.integrations.sdk": "1.2.0-rc2" + }, + "devDependencies": { + "@babel/core": "^7.24.4", + "@babel/preset-env": "^7.24.4", + "@babel/preset-typescript": "^7.24.1", + "babel-loader": "^9.1.3", + "css-loader": "^7.1.0", + "html-loader": "^5.0.0", + "resources": "file:../../../packages/res", + "style-loader": "^4.0.0", + "webpack": "^5.75.0", + "webpack-cli": "^5.0.0", + "webpack-dev-server": "^5.0.4" + } +} diff --git a/demos/html/ckeditor5-sdk/project.json b/demos/html/ckeditor5-sdk/project.json new file mode 100644 index 000000000..28e3df8fd --- /dev/null +++ b/demos/html/ckeditor5-sdk/project.json @@ -0,0 +1,56 @@ +{ + "name": "html-ckeditor5-sdk", + "$schema": "../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "demos/html/ckeditor5-sdk/src", + "targets": { + "prestart": { + "executor": "nx:run-script", + "options": { + "script": "prestart" + } + }, + "prestart-remote": { + "executor": "nx:run-script", + "options": { + "script": "prestart-remote" + } + }, + "build": { + "executor": "@nx/webpack:webpack", + "dependsOn": ["prestart"], + "outputs": ["{options.outputPath}"], + "options": { + "main": "demos/html/ckeditor5-sdk/src/app.js", + "outputPath": "dist", + "tsConfig": "tsconfig.app.json", + "generateIndexHtml": false, + "index": "demos/html/ckeditor5-sdk/index.html", + "webpackConfig": "demos/html/ckeditor5-sdk/webpack.config.js" + } + }, + "start": { + "executor": "@nx/webpack:dev-server", + "dependsOn": ["prestart"], + "options": { + "buildTarget": "html-ckeditor5-sdk:build", + "webpackConfig": "demos/html/ckeditor5-sdk/webpack.config.js" + } + }, + "start-remote": { + "executor": "@nx/webpack:dev-server", + "dependsOn": ["prestart-remote"], + "options": { + "buildTarget": "html-ckeditor5-sdk:build", + "webpackConfig": "demos/html/ckeditor5-sdk/webpack.config.js" + } + }, + "lint": { + "executor": "@nx/linter:eslint", + "options": { + "eslintConfig": "./.eslintrc.js", + "lintFilePatterns": ["demos/html/ckeditor5-sdk/**/*.{ts,tsx,js,jsx}"] + }, + "outputs": ["{options.outputFile}"] + } + } +} diff --git a/demos/html/ckeditor5-sdk/src/app.js b/demos/html/ckeditor5-sdk/src/app.js new file mode 100644 index 000000000..efa95fdaa --- /dev/null +++ b/demos/html/ckeditor5-sdk/src/app.js @@ -0,0 +1,15 @@ +import { ClassicEditor, Essentials, Paragraph, Bold, Italic } from "ckeditor5"; +import MathType from "@wiris/mathtype-ckeditor5-sdk"; +import "ckeditor5/ckeditor5.css"; + +ClassicEditor.create(document.querySelector("#editor"), { + licenseKey: "GPL", + plugins: [Essentials, Paragraph, Bold, Italic, MathType], + toolbar: ["bold", "italic", "MathType"], +}) + .then((editor) => { + window.editor = editor; + }) + .catch((error) => { + console.error(error.stack); + }); diff --git a/demos/html/ckeditor5-sdk/src/static/style.css b/demos/html/ckeditor5-sdk/src/static/style.css new file mode 100644 index 000000000..23d8a7bbe --- /dev/null +++ b/demos/html/ckeditor5-sdk/src/static/style.css @@ -0,0 +1,28 @@ +body { + background-color: #e4e6e7; +} + +.ck-editor { + background-color: #fff !important; + border-radius: 10px !important; + margin: 0 auto !important; + max-width: 760px !important; + width: 75% !important; +} + +.ck-editor:hover { + box-shadow: 0 0 10px #7af78f; +} + +.ck-content { + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + min-height: 250px; +} + +.ck-rounded-corners, +.ck.ck-editor__editable:not(.ck-editor__nested-editable), +.ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-rounded-corners { + border-bottom-left-radius: 10px !important; + border-bottom-right-radius: 10px !important; +} diff --git a/demos/html/ckeditor5-sdk/webpack.config.js b/demos/html/ckeditor5-sdk/webpack.config.js new file mode 100644 index 000000000..66f0ed2f1 --- /dev/null +++ b/demos/html/ckeditor5-sdk/webpack.config.js @@ -0,0 +1,79 @@ +const path = require("path"); +const webpack = require("webpack"); + +module.exports = (config) => { + const demoPort = Number(process.env.CK5_DEMO_PORT) || 8013; + + return { + mode: "development", + entry: { + app: path.resolve(__dirname, "src/app.js"), + }, + output: { + path: path.resolve(__dirname, "dist"), + filename: "demo.js", + }, + devServer: { + devMiddleware: { + writeToDisk: true, + }, + static: { + directory: path.join(__dirname, "./"), + }, + onListening: !config.devServer ? "" : config.devServer.onListening, + open: true, + port: demoPort, + hot: true, + host: "0.0.0.0", + }, + watch: false, + mode: "none", + plugins: [ + new webpack.DefinePlugin({ + "process.env": JSON.stringify(process.env), + }), + ], + module: { + rules: [ + { + test: /\.svg$/, + type: "asset/source", + }, + { + test: /\.(js|ts)$/, + exclude: (modulePath) => + /node_modules/.test(modulePath) && + !/@wiris[\/\\]mathtype\.integrations\.sdk/.test(modulePath), + use: { + loader: "babel-loader", + options: { + presets: ["@babel/preset-env", "@babel/preset-typescript"], + }, + }, + }, + { + test: /\.css$/, + use: [ + { + loader: "style-loader", + options: { + injectType: "singletonStyleTag", + attributes: { + "data-cke": true, + }, + }, + }, + "css-loader", + ], + }, + { + test: /\.html$/i, + exclude: /node_modules/, + loader: "html-loader", + }, + ], + }, + devtool: "source-map", + performance: { hints: false }, + }; +}; diff --git a/packages/ckeditor5-sdk/package.json b/packages/ckeditor5-sdk/package.json new file mode 100644 index 000000000..bd51b9928 --- /dev/null +++ b/packages/ckeditor5-sdk/package.json @@ -0,0 +1,33 @@ +{ + "name": "@wiris/mathtype-ckeditor5-sdk", + "version": "9.0.0-beta", + "description": "MathType SDK integration for CKEditor5", + "keywords": [ + "ckeditor", + "ckeditor5", + "math", + "mathtype", + "wiris" + ], + "repository": "https://github.com/wiris/html-integrations/tree/master/packages/ckeditor5-sdk", + "homepage": "https://www.wiris.com/", + "bugs": { + "email": "support@wiris.com" + }, + "license": "MIT", + "author": "WIRIS Team (http://www.wiris.com)", + "main": "src/plugin.js", + "type": "module", + "exports": { + ".": "./src/plugin.js", + "./src/*": "./src/*", + "./theme/*": "./theme/*", + "./package.json": "./package.json" + }, + "dependencies": { + "@wiris/mathtype.integrations.sdk": "1.2.0-rc2" + }, + "peerDependencies": { + "ckeditor5": ">=46.0.0" + } +} diff --git a/packages/ckeditor5-sdk/src/index.js b/packages/ckeditor5-sdk/src/index.js new file mode 100644 index 000000000..2f97b97ea --- /dev/null +++ b/packages/ckeditor5-sdk/src/index.js @@ -0,0 +1,3 @@ +import MathType from "./plugin.js"; + +export default MathType; diff --git a/packages/ckeditor5-sdk/src/plugin.js b/packages/ckeditor5-sdk/src/plugin.js new file mode 100644 index 000000000..dda76254b --- /dev/null +++ b/packages/ckeditor5-sdk/src/plugin.js @@ -0,0 +1,36 @@ +import { Plugin, ButtonView } from "ckeditor5"; +import SDK from "@wiris/mathtype.integrations.sdk"; +import mathIcon from "../theme/icons/ckeditor5-formula.svg"; + +export default class MathType extends Plugin { + static get pluginName() { + return "MathType"; + } + + init() { + this.sdk = new SDK(); + this.editorModal = this.sdk.createEditorModal(); + this.editorModal.init(); + + this.editor.ui.componentFactory.add("MathType", (locale) => { + const view = new ButtonView(locale); + + view.set({ + label: "Insert a math equation - MathType", + icon: mathIcon, + tooltip: true, + }); + + view.on("execute", () => { + this.editorModal.show(); + }); + + return view; + }); + } + + destroy() { + this.editorModal?.destroy(); + super.destroy(); + } +} diff --git a/packages/ckeditor5-sdk/theme/icons/ckeditor5-formula.svg b/packages/ckeditor5-sdk/theme/icons/ckeditor5-formula.svg new file mode 100644 index 000000000..d546af94a --- /dev/null +++ b/packages/ckeditor5-sdk/theme/icons/ckeditor5-formula.svg @@ -0,0 +1,28 @@ + + +