Feat/add tiny8 support

.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

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/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/tinymce7/README.md

@@ -1,4 +1,5 @@
-# MathType for TinyMCE V7
+# MathType for TinyMCE V7 and V8
+> **Warning:** This package works for TinyMCE v7 and v8.
 
 Type and handwrite mathematical notation with MathType.
 
@@ -20,15 +21,17 @@ Easily include quality math equations in your documents and digital content.
    npm install @wiris/mathtype-tinymce7
    ```
 
-   > MathType is fully compatible with TinyMCE 7 from version 7.8.0.
+   > This module is fully compatible with:
+   >  - TinyMCE 7 from version 7.8.0
+   >  - TinyMCE 8
 
 2. Add the plugin as an external plugin:
 
    ```js
    tinymce.init({ external_plugins: { tiny_mce_wiris: `node_modules/@wiris/mathtype-tinymce7/plugin.min.js` } });
    ```
 
-3. Add MathType buttons to the TinyMCE7 toolbar and the recommended settings:
+3. Add MathType buttons to the TinyMCE toolbar and the recommended settings:
 
    ```js
    tinymce.init({
@@ -68,8 +71,6 @@ Easily include quality math equations in your documents and digital content.
    });
   ```
 
-- The editor's caret is lost when inserting a new formula on Safari with ChemType [#486](https://github.com/wiris/html-integrations/issues/486)
-
 ## Services
 
 This npm module uses remotely hosted services to render MathML data. However, we recommend you install these services on your backend. This will allow you, among other things, to configure the service and to locally store the images generated by MathType.

packages/tinymce7/editor_plugin.src.js

@@ -109,8 +109,8 @@ export class TinyMceIntegration extends IntegrationModel {
     // When a formula is updated TinyMCE 'Change' event must be fired.
     // See https://www.tiny.cloud/docs/advanced/events/#change for further information.
     const listener = Listeners.newListener("onAfterFormulaInsertion", () => {
-      if (typeof this.editorObject.fire !== "undefined") {
-        this.editorObject.fire("Change");
+      if (typeof this.editorObject.dispatch !== "undefined") {
+        this.editorObject.dispatch("Change");
       }
     });
     this.getCore().addListener(listener);
@@ -135,8 +135,8 @@ export class TinyMceIntegration extends IntegrationModel {
    * @param {string} mathml - MathML to generate the formula and can be caught with the event.
    */
   updateFormula(mathml) {
-    if (typeof this.editorObject.fire !== "undefined") {
-      this.editorObject.fire("ExecCommand", {
+    if (typeof this.editorObject.dispatch !== "undefined") {
+      this.editorObject.dispatch("ExecCommand", {
         command: "updateFormula",
         value: mathml,
       });