diff --git a/.github/workflows/deploy-staging.yml b/.github/workflows/deploy-staging.yml index 73bdaa259..959de2b88 100644 --- a/.github/workflows/deploy-staging.yml +++ b/.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 diff --git a/README.md b/README.md index 16a88662c..68ea288cf 100644 --- a/README.md +++ b/README.md @@ -63,7 +63,7 @@ Visit the [MathType integrations release notes](https://docs.wiris.com/mathtype/ | [`@wiris/mathtype-froala`](packages/mathtype-froala) | | MathType Web for Froala editor. | | [`@wiris/mathtype-tinymce5`](packages/mathtype-tinymce5) | | MathType Web for TinyMCE5 editor. | | [`@wiris/mathtype-tinymce6`](packages/mathtype-tinymce6) | | MathType Web for TinyMCE6 editor. | -| [`@wiris/mathtype-tinymce7`](packages/mathtype-tinymce7) | | MathType Web for TinyMCE7 editor. | +| [`@wiris/mathtype-tinymce7`](packages/mathtype-tinymce7) | | MathType Web for TinyMCE7 and TinyMCE8 editor. | ## Documentation and important links diff --git a/demos/html/tinymce8/babel.config.js b/demos/html/tinymce8/babel.config.js new file mode 100644 index 000000000..392abb66d --- /dev/null +++ b/demos/html/tinymce8/babel.config.js @@ -0,0 +1,12 @@ +module.exports = { + presets: [ + [ + "@babel/preset-env", + { + targets: { + node: "current", + }, + }, + ], + ], +}; diff --git a/demos/html/tinymce8/index.html b/demos/html/tinymce8/index.html new file mode 100644 index 000000000..d2273cc12 --- /dev/null +++ b/demos/html/tinymce8/index.html @@ -0,0 +1,12 @@ + + + + Demo TinyMCE 8 on HTML + + + + + + + + diff --git a/demos/html/tinymce8/package.json b/demos/html/tinymce8/package.json new file mode 100644 index 000000000..2cb3fc446 --- /dev/null +++ b/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" + } +} diff --git a/demos/html/tinymce8/project.json b/demos/html/tinymce8/project.json new file mode 100644 index 000000000..5667ad149 --- /dev/null +++ b/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}"] + } + } +} diff --git a/demos/html/tinymce8/src/app.js b/demos/html/tinymce8/src/app.js new file mode 100644 index 000000000..cff4e0edd --- /dev/null +++ b/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 +}); diff --git a/demos/html/tinymce8/src/static/style.css b/demos/html/tinymce8/src/static/style.css new file mode 100644 index 000000000..79916fc2d --- /dev/null +++ b/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; +} diff --git a/demos/html/tinymce8/webpack.config.js b/demos/html/tinymce8/webpack.config.js new file mode 100644 index 000000000..d3dd1263c --- /dev/null +++ b/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, + }, + }; +}; diff --git a/docs/contributing/README.md b/docs/contributing/README.md index 4823712a5..4723c6ad1 100644 --- a/docs/contributing/README.md +++ b/docs/contributing/README.md @@ -127,7 +127,10 @@ For brevity, `` 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: diff --git a/packages/tinymce7/README.md b/packages/tinymce7/README.md index 8ca3a2f2c..b1e2a6ff4 100644 --- a/packages/tinymce7/README.md +++ b/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,7 +21,9 @@ 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: @@ -28,7 +31,7 @@ Easily include quality math equations in your documents and digital content. 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. diff --git a/packages/tinymce7/editor_plugin.src.js b/packages/tinymce7/editor_plugin.src.js index 2c7088429..25871ec37 100644 --- a/packages/tinymce7/editor_plugin.src.js +++ b/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, }); diff --git a/scripts/services/paths.json b/scripts/services/paths.json index 2c8c017ad..19a9ab1ec 100644 --- a/scripts/services/paths.json +++ b/scripts/services/paths.json @@ -78,5 +78,10 @@ "path": "./demos/html/tinymce7/", "demo": true, "port": "8009" + }, + "htmlTinyMCE8": { + "path": "./demos/html/tinymce8/", + "demo": true, + "port": "8010" } } diff --git a/staging/branch/html/index.html b/staging/branch/html/index.html index 08d770337..0614214fc 100644 --- a/staging/branch/html/index.html +++ b/staging/branch/html/index.html @@ -18,6 +18,7 @@

HTML

  • TinyMCE 5
  • TinyMCE 6
  • TinyMCE 7
    • +
  • TinyMCE 8
    • diff --git a/staging/branch/index.html b/staging/branch/index.html index ebea5e1f2..a5e2cfd1d 100644 --- a/staging/branch/index.html +++ b/staging/branch/index.html @@ -18,6 +18,7 @@

    HTML

  • TinyMCE 5
  • TinyMCE 6
  • TinyMCE 7
    • +
  • TinyMCE 8
  • Viewer