Release v8.14.0

.github/workflows/deploy-staging.yml

@@ -121,17 +121,19 @@ jobs:
       fail-fast: false
       matrix:
         branch: ${{ fromJson(needs.prepare.outputs.branches) }}
-        editor: ["ckeditor4", "ckeditor5", "froala", "generic", "tinymce5", "tinymce6", "tinymce7", "viewer"]
+        editor: ["ckeditor4", "ckeditor5", "froala", "generic", "tinymce5", "tinymce6", "tinymce7", "tinymce8", "viewer"]
         framework: ["html", "vue"]
         exclude:
           - framework: vue
             editor: viewer
+          - framework: vue
+            editor: tinymce5
           - framework: vue
             editor: tinymce6
           - framework: vue
             editor: tinymce7
           - framework: vue
-            editor: tinymce5
+            editor: tinymce8
           - framework: vue
             editor: generic
           - framework: vue
@@ -156,11 +158,18 @@ jobs:
           CKEDITOR4_API_KEY: ${{ secrets.CKEDITOR4_API_KEY }}
           FROALA_API_KEY: ${{ secrets.FROALA_API_KEY }}
           NODE_OPTIONS: "--openssl-legacy-provider"
+        # We build tinymce7 package for tinymce8 editor as they use the same package
         run: |
           unset NODE_OPTIONS
           npm set "//registry.npmjs.org/:_authToken" ${{ secrets.NPM_TOKEN }}
           yarn
-          yarn nx build ${{ matrix.editor }}
+          if [ "${{ matrix.editor }}" == "tinymce8" ]; then
+            echo "Building editor: ${{ matrix.editor }}"
+            yarn nx build tinymce7
+          else
+            echo "Building editor: ${{ matrix.editor }}"
+            yarn nx build ${{ matrix.editor }}
+          fi
           yarn nx build ${{ matrix.framework }}-${{ matrix.editor }}
 
       - name: Deploy the demos to S3 bucket
@@ -193,7 +202,7 @@ jobs:
               if [ "${{ matrix.editor }}" = "tinymce6" ]; then
                 aws s3 cp demos/html/${{ matrix.editor }}/node_modules/@wiris/mathtype-tinymce6/plugin.min.js  s3://wiris-integrations-staging-html/${{ matrix.branch }}/html/${{ matrix.editor }}/node_modules/@wiris/mathtype-tinymce6/plugin.min.js
               fi
-              if [ "${{ matrix.editor }}" = "tinymce7" ]; then
+              if [ "${{ matrix.editor }}" = "tinymce7" ] || [ "${{ matrix.editor }}" = "tinymce8" ]; then
                 aws s3 cp demos/html/${{ matrix.editor }}/node_modules/@wiris/mathtype-tinymce7/plugin.min.js  s3://wiris-integrations-staging-html/${{ matrix.branch }}/html/${{ matrix.editor }}/node_modules/@wiris/mathtype-tinymce7/plugin.min.js
               fi
               if [ "${{ matrix.editor }}" = "viewer" ]; then

CHANGES.md

@@ -7,9 +7,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+### 8.14.0 2025-10-22
+
+- feat: Add TinyMCE8 compatibility. #KB-60372
+- fix: CK5 language config property check null. #KB-59658
+- fix: Viewer regex with spacial character. #KB-59690
+- fix: Improve error handling. #KB-48497
+- fix: Double click blocks other plugins. #KB-46220
+- fix: Make modal more CSP friendly. #KB-59711
+- fix: CKEditor 5 support to multiple instance on same page. #KB-59680
+- fix: CKeditor 5 compatibility with TextPartLanguage plugin. #KB-45315
+
 ### 8.13.4 2025-08-26
 
-- fix: Copy & Paste adds 2 formulas when image plugin enabled on CK5. (#KB-54677)
+- fix: Copy & Paste adds 2 formulas when image plugin enabled on CK5. #KB-54677
 
 ### 8.13.3 2025-07-17
 

README.md

@@ -63,7 +63,7 @@ Visit the [MathType integrations release notes](https://docs.wiris.com/mathtype/
 | [`@wiris/mathtype-froala`](packages/mathtype-froala)                                    | <a href="https://www.npmjs.com/package/@wiris/mathtype-froala"><img src="https://img.shields.io/npm/v/@wiris/mathtype-froala"></a>                                   | MathType Web for Froala editor.                             |
 | [`@wiris/mathtype-tinymce5`](packages/mathtype-tinymce5)                                | <a href="https://www.npmjs.com/package/@wiris/mathtype-tinymce5"><img src="https://img.shields.io/npm/v/@wiris/mathtype-tinymce5"></a>                               | MathType Web for TinyMCE5 editor.                           |
 | [`@wiris/mathtype-tinymce6`](packages/mathtype-tinymce6)                                | <img src="https://img.shields.io/npm/v/@wiris/mathtype-tinymce5">                                                                                                    | MathType Web for TinyMCE6 editor.                           |
-| [`@wiris/mathtype-tinymce7`](packages/mathtype-tinymce7)                                | <img src="https://img.shields.io/npm/v/@wiris/mathtype-tinymce7">                                                                                                    | MathType Web for TinyMCE7 editor.                           |
+| [`@wiris/mathtype-tinymce7`](packages/mathtype-tinymce7)                                | <img src="https://img.shields.io/npm/v/@wiris/mathtype-tinymce7">                                                                                                    | MathType Web for TinyMCE7 and TinyMCE8 editor.                           |
 
 ## Documentation and important links
 

demos/html/ckeditor4/src/app.js

@@ -32,7 +32,7 @@ CKEDITOR.replace("editor", {
       name: "wirisplugins",
       items: ["ckeditor_wiris_formulaEditor", "ckeditor_wiris_formulaEditorChemistry"],
     },
-    { name: "others" },
+    { name: "others", items: ["Image"] },
   ],
 
   licenseKey: process.env.CKEDITOR4_API_KEY || "",

demos/html/ckeditor5/src/app.js

@@ -2,6 +2,8 @@
 import { ClassicEditor, Essentials, Paragraph, Bold, Italic, Alignment, SourceEditing } from "ckeditor5";
 import MathType from "@wiris/mathtype-ckeditor5/dist/index.js";
 
+// import coreTranslations from 'ckeditor5/translations/de.js';
+
 // Load styles.
 import "./static/style.css";
 import "ckeditor5/ckeditor5.css";
@@ -38,7 +40,13 @@ ClassicEditor.create(document.querySelector("#editor"), {
     "alignment:right",
     "sourceEditing",
   ],
-  // language: 'de',
+  // translations: [
+  //   coreTranslations,
+  // ],
+  // language: {
+  //   ui: 'de',
+  //   content: 'de'
+  // },
   // mathTypeParameters: {
   //   editorParameters: { language: 'es' }, // MathType config, including language
   // },

demos/html/tinymce8/babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        targets: {
+          node: "current",
+        },
+      },
+    ],
+  ],
+};

demos/html/tinymce8/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Demo TinyMCE 8 on HTML</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    <script src="./dist/tinymce8/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="node_modules/@wiris/mathtype-tinymce7/plugin.min.js"></script>
+  </head>
+  <body>
+    <script src="./dist/demo.js"></script>
+  </body>
+</html>

demos/html/tinymce8/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "demo-html-tinymce8",
+  "version": "1.0.0",
+  "private": true,
+  "description": "A simple html App integrating WIRIS MathType in a TinyMCE8 rich text editor.",
+  "main": "app.js",
+  "scripts": {
+    "prestart-remote": "yarn && yarn unlink @wiris/mathtype-tinymce7 && yarn unlink @wiris/mathtype-html-integration-devkit && yarn install --force",
+    "prestart": "yarn && yarn link @wiris/mathtype-tinymce7 && yarn link @wiris/mathtype-html-integration-devkit"
+  },
+  "author": "WIRIS Team (https://www.wiris.com)",
+  "license": "MIT",
+  "dependencies": {
+    "@wiris/mathtype-html-integration-devkit": "*",
+    "@wiris/mathtype-tinymce7": "*",
+    "tinymce": "^8.0.0"
+  },
+  "devDependencies": {
+    "copy-webpack-plugin": "^12.0.2",
+    "css-loader": "^7.1.0",
+    "html-loader": "^5.0.0",
+    "style-loader": "^4.0.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-server": "^5.0.4",
+    "resources": "file:../../../packages/res"
+  }
+}

demos/html/tinymce8/project.json

@@ -0,0 +1,56 @@
+{
+  "name": "html-tinymce8",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "demos/html/tinymce8/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/tinymce8/src/app.js",
+        "outputPath": "dist",
+        "tsConfig": "tsconfig.app.json",
+        "generateIndexHtml": false,
+        "index": "demos/html/tinymce8/index.html",
+        "webpackConfig": "demos/html/tinymce8/webpack.config.js"
+      }
+    },
+    "start": {
+      "executor": "@nx/webpack:dev-server",
+      "dependsOn": ["prestart"],
+      "options": {
+        "buildTarget": "html-tinymce8:build",
+        "webpackConfig": "demos/html/tinymce8/webpack.config.js"
+      }
+    },
+    "start-remote": {
+      "executor": "@nx/webpack:dev-server",
+      "dependsOn": ["prestart-remote"],
+      "options": {
+        "buildTarget": "html-tinymce8:build",
+        "webpackConfig": "demos/html/tinymce8/webpack.config.js"
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "options": {
+        "eslintConfig": "./.eslintrc.js",
+        "lintFilePatterns": ["demos/html/tinymce8/**/*.{ts,tsx,js,jsx}"]
+      },
+      "outputs": ["{options.outputFile}"]
+    }
+  }
+}

demos/html/tinymce8/src/app.js

@@ -0,0 +1,55 @@
+// Load styles.
+import "./static/style.css";
+
+// Load the file that contains common imports between demos.
+import * as Generic from "resources/demos/imports";
+
+// Apply specific demo names to all the objects.
+document.getElementById("header_title_name").innerHTML = "MathType for TinyMCE 8 on HTML";
+document.getElementById("version_editor").innerHTML = "TinyMCE: ";
+
+// Copy the editor content before initializing it.
+// Currently disabled by decision of QA.
+// Generic.copyContentFromxToy('editor', 'transform_content');
+
+// Set up the editor.
+tinymce.init({
+  selector: "#editor",
+  license_key: "gpl",
+  external_plugins: { tiny_mce_wiris: `${window.location.href}dist/plugin.min.js` },
+
+  // We recommend to set 'draggable_modal' to true to avoid overlapping issues
+  // with the different UI modal dialog windows implementations between core and third-party plugins on TinyMCE.
+  // @see: https://github.com/wiris/html-integrations/issues/134#issuecomment-905448642
+  draggable_modal: true,
+  plugins: ["image", "media"],
+  toolbar:
+    "undo redo | styleselect | bold italic | image media | tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry",
+
+  // language: 'fr_FR',
+  // You could set a different language for MathType editor:
+  // mathTypeParameters: {
+  //   editorParameters: { language: 'de' },
+  // },
+
+  // Handle events.
+  setup(editor) {
+    // Launch on init event.
+    editor.on("init", () => {
+      // Get and set the editor and wiris versions in this order.
+      Generic.setEditorAndWirisVersion(
+        `${tinymce.majorVersion}.${tinymce.minorVersion}`,
+        WirisPlugin.currentInstance.version,
+      ); //eslint-disable-line
+
+      // Insert the initial content in the editor.
+      editor.insertContent(Generic.editorContentMathML);
+    });
+  },
+});
+
+// Add listener on click button to launch updateContent function.
+document.getElementById("btn_update").addEventListener("click", (e) => {
+  e.preventDefault();
+  Generic.updateContent(tinyMCE.activeEditor.getContent(), "transform_content"); // eslint-disable-line no-undef
+});

demos/html/tinymce8/src/static/style.css

@@ -0,0 +1,19 @@
+body {
+  background-color: #e4e6e7;
+}
+
+.tox {
+  background-color: #fff !important;
+  border-radius: 10px;
+  margin: 0 auto !important;
+  max-width: 750px !important;
+  width: 75% !important;
+}
+
+.tox:hover {
+  box-shadow: 0 0 10px #7af78f;
+}
+
+#editor_ifr {
+  min-height: 200px;
+}

demos/html/tinymce8/webpack.config.js

@@ -0,0 +1,72 @@
+const path = require("path");
+const CopyPlugin = require("copy-webpack-plugin");
+
+module.exports = (config, context) => {
+  return {
+    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: 8010,
+      hot: true,
+      host: "0.0.0.0",
+    },
+    // Set watch to true for dev purposes.
+    watch: false,
+    plugins: [
+      new CopyPlugin({
+        patterns: [
+          {
+            from: `${path.dirname(require.resolve(`tinymce`))}/**/*.min.*`,
+            to: path.resolve(__dirname, "dist/tinymce8"),
+
+            // Avoid copying the absolute path from the source
+            context: path.dirname(require.resolve(`tinymce`)),
+          },
+          {
+            from: `${path.dirname(require.resolve(`@wiris/mathtype-tinymce7`))}/plugin.min.js`,
+            to: path.resolve(__dirname, "dist/plugin.min.js"),
+          },
+        ],
+      }),
+    ],
+    mode: "none",
+    module: {
+      rules: [
+        {
+          test: /\.css$/,
+          use: ["style-loader", "css-loader"],
+        },
+        {
+          test: /\.(png|jpg|gif)$/i,
+          type: "asset/inline",
+        },
+        {
+          // For the modal close, minimize, maximize icons
+          test: /\.svg$/,
+          type: "asset/source",
+        },
+        {
+          test: /\.html$/i,
+          exclude: /node_modules/,
+          loader: "html-loader",
+        },
+      ],
+    },
+    stats: {
+      colors: true,
+    },
+  };
+};

docs/contributing/README.md

@@ -127,7 +127,10 @@ For brevity, `<scope>` will take one of these next values depending on the affec
 | `generic`   | `mathtype-generic`                 |
 | `tinymce5`  | `mathtype-tinymce5`                |
 | `tinymce6`  | `mathtype-tinymce6`                |
-| `tinymce7`  | `mathtype-tinymce7`                |
+| `tinymce7`  | `mathtype-tinymce7`*                |
+| `tinymce8`  | `mathtype-tinymce7`*                |
+
+*`mathtype-tinymce7` package is also compatible with TinyMCE8 editor.
 
 There are usually a few exceptions to the above rules:
 

packages/ckeditor4/package.json

@@ -32,7 +32,7 @@
     "prepack": "yarn && npm run build"
   },
   "dependencies": {
-    "@wiris/mathtype-html-integration-devkit": "1.17.11"
+    "@wiris/mathtype-html-integration-devkit": "1.17.12"
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",