Skip to content

Commit 74ffeb7

Browse files
carla-at-wiriscarla-at-wiris
authoredJan 21, 2025··
feat: Create TinyMCE 7 plugin (#1072)
* feat: TinyMCE 7 plugin * Fix: TinyMCE 7 typo * feat: Create TinyMCE 7 demo (#1073) * feat: Create TinyMCE 7 demo * fix: Support all MathML tags
·
@wiris/mathtype-viewer@8.13.1@wiris/mathtype-ckeditor4@8.13.1
1 parent c66a565 commit 74ffeb7

24 files changed

+1141
-7
lines changed
 

‎.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ output/**
66
packages/generic/wirisplugin-generic.js
77
packages/tinymce5/plugin.min.js
88
packages/tinymce6/plugin.min.js
9+
packages/tinymce7/plugin.min.js
910
packages/froala/wiris.js
1011
packages/ckeditor4/plugin.js
1112
packages/tinymce/editor_plugin.src.js

‎.github/workflows/deploy-staging.yml

+6-1
Original file line numberDiff line numberDiff line change
@@ -116,13 +116,15 @@ jobs:
116116
fail-fast: false
117117
matrix:
118118
branch: ${{ fromJson(needs.prepare.outputs.branches) }}
119-
editor: ["ckeditor4", "ckeditor5", "froala", "generic", "tinymce5", "tinymce6", "viewer"]
119+
editor: ["ckeditor4", "ckeditor5", "froala", "generic", "tinymce5", "tinymce6", "tinymce7", "viewer"]
120120
framework: ["html", "vue"]
121121
exclude:
122122
- framework: vue
123123
editor: viewer
124124
- framework: vue
125125
editor: tinymce6
126+
- framework: vue
127+
editor: tinymce7
126128
- framework: vue
127129
editor: tinymce5
128130
- framework: vue
@@ -186,6 +188,9 @@ jobs:
186188
if [ "${{ matrix.editor }}" = "tinymce6" ]; then
187189
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
188190
fi
191+
if [ "${{ matrix.editor }}" = "tinymce7" ]; then
192+
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
193+
fi
189194
if [ "${{ matrix.editor }}" = "viewer" ]; then
190195
aws s3 cp demos/html/${{ matrix.editor }}/node_modules/@wiris/mathtype-viewer/dist/WIRISplugins.js s3://wiris-integrations-staging-html/${{ matrix.branch }}/html/${{ matrix.editor }}/node_modules/@wiris/mathtype-viewer/dist/WIRISplugins.js
191196
aws s3 cp demos/html/${{ matrix.editor }}/node_modules/@wiris/mathtype-viewer/package.json s3://wiris-integrations-staging-html/${{ matrix.branch }}/html/${{ matrix.editor }}/node_modules/@wiris/mathtype-viewer/package.json

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -55,14 +55,15 @@ Visit the [MathType integrations release notes](https://docs.wiris.com/mathtype/
5555
### Packages
5656

5757
| Name | Version | Description |
58-
| --------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | --- |
58+
| --------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
5959
| [`@wiris/mathtype-html-integration-devkit`](packages/mathtype-html-integration-devkit/) | <a href="https://www.npmjs.com/package/@wiris/mathtype-html-integration-devkit"><img src="https://img.shields.io/npm/v/@wiris/mathtype-html-integration-devkit"></a> | The JavaScript devkit to use MathType web in your projects. |
6060
| [`@wiris/mathtype-generic`](packages/mathtype-generic) | <a href="https://www.npmjs.com/package/@wiris/mathtype-generic"><img src="https://img.shields.io/npm/v/@wiris/mathtype-generic"></a> | MathType Web for a generic HTML textarea. |
6161
| [`@wiris/mathtype-ckeditor4`](packages/mathtype-ckeditor4) | <a href="https://www.npmjs.com/package/@wiris/mathtype-ckeditor4"><img src="https://img.shields.io/npm/v/@wiris/mathtype-ckeditor4"></a> | MathType Web for CKEditor4 editor. |
6262
| [`@wiris/mathtype-ckeditor5`](packages/mathtype-ckeditor5) | <a href="https://www.npmjs.com/package/@wiris/mathtype-ckeditor5"><img src="https://img.shields.io/npm/v/@wiris/mathtype-ckeditor5"></a> | MathType Web for CKEditor5 editor. |
6363
| [`@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. | |
6464
| [`@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. |
6565
| [`@wiris/mathtype-tinymce6`](packages/mathtype-tinymce6) | <img src="https://img.shields.io/npm/v/@wiris/mathtype-tinymce5"> | MathType Web for TinyMCE6 editor. |
66+
| [`@wiris/mathtype-tinymce7`](packages/mathtype-tinymce7) | <img src="https://img.shields.io/npm/v/@wiris/mathtype-tinymce7"> | MathType Web for TinyMCE7 editor. |
6667

6768
## Documentation and important links
6869

‎demos/html/tinymce7/babel.config.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module.exports = {
2+
presets: [
3+
[
4+
"@babel/preset-env",
5+
{
6+
targets: {
7+
node: "current",
8+
},
9+
},
10+
],
11+
],
12+
};

‎demos/html/tinymce7/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>Demo TinyMCE 7 on HTML</title>
5+
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
6+
<script src="./dist/tinymce7/tinymce.min.js" referrerpolicy="origin"></script>
7+
<script src="node_modules/@wiris/mathtype-tinymce7/plugin.min.js"></script>
8+
</head>
9+
<body>
10+
<script src="./dist/demo.js"></script>
11+
</body>
12+
</html>

‎demos/html/tinymce7/package.json

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "demo-html-tinymce7",
3+
"version": "1.0.0",
4+
"private": true,
5+
"description": "A simple html App integrating WIRIS MathType in a TinyMCE7 rich text editor.",
6+
"main": "app.js",
7+
"scripts": {
8+
"prestart-remote": "yarn && yarn unlink @wiris/mathtype-tinymce7 && yarn unlink @wiris/mathtype-html-integration-devkit && yarn install --force",
9+
"prestart": "yarn && yarn link @wiris/mathtype-tinymce7 && yarn link @wiris/mathtype-html-integration-devkit"
10+
},
11+
"author": "WIRIS Team (https://www.wiris.com)",
12+
"license": "MIT",
13+
"dependencies": {
14+
"@wiris/mathtype-html-integration-devkit": "*",
15+
"@wiris/mathtype-tinymce7": "*",
16+
"tinymce": "^7.0.0"
17+
},
18+
"devDependencies": {
19+
"copy-webpack-plugin": "^12.0.2",
20+
"css-loader": "^7.1.0",
21+
"html-loader": "^5.0.0",
22+
"style-loader": "^4.0.0",
23+
"webpack": "^5.75.0",
24+
"webpack-cli": "^5.0.0",
25+
"webpack-dev-server": "^5.0.4",
26+
"resources": "file:../../../packages/res"
27+
}
28+
}

‎demos/html/tinymce7/project.json

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
{
2+
"name": "html-tinymce7",
3+
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
4+
"sourceRoot": "demos/html/tinymce7/src",
5+
"targets": {
6+
"prestart": {
7+
"executor": "nx:run-script",
8+
"options": {
9+
"script": "prestart"
10+
}
11+
},
12+
"prestart-remote": {
13+
"executor": "nx:run-script",
14+
"options": {
15+
"script": "prestart-remote"
16+
}
17+
},
18+
"build": {
19+
"executor": "@nx/webpack:webpack",
20+
"dependsOn": ["prestart"],
21+
"outputs": ["{options.outputPath}"],
22+
"options": {
23+
"main": "demos/html/tinymce7/src/app.js",
24+
"outputPath": "dist",
25+
"tsConfig": "tsconfig.app.json",
26+
"generateIndexHtml": false,
27+
"index": "demos/html/tinymce7/index.html",
28+
"webpackConfig": "demos/html/tinymce7/webpack.config.js"
29+
}
30+
},
31+
"start": {
32+
"executor": "@nx/webpack:dev-server",
33+
"dependsOn": ["prestart"],
34+
"options": {
35+
"buildTarget": "html-tinymce7:build",
36+
"webpackConfig": "demos/html/tinymce7/webpack.config.js"
37+
}
38+
},
39+
"start-remote": {
40+
"executor": "@nx/webpack:dev-server",
41+
"dependsOn": ["prestart-remote"],
42+
"options": {
43+
"buildTarget": "html-tinymce7:build",
44+
"webpackConfig": "demos/html/tinymce7/webpack.config.js"
45+
}
46+
},
47+
"lint": {
48+
"executor": "@nx/linter:eslint",
49+
"options": {
50+
"eslintConfig": "./.eslintrc.js",
51+
"lintFilePatterns": ["demos/html/tinymce7/**/*.{ts,tsx,js,jsx}"]
52+
},
53+
"outputs": ["{options.outputFile}"]
54+
}
55+
}
56+
}

‎demos/html/tinymce7/src/app.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
// Load styles.
2+
import "./static/style.css";
3+
4+
// Load the file that contains common imports between demos.
5+
import * as Generic from "resources/demos/imports";
6+
7+
// Apply specific demo names to all the objects.
8+
document.getElementById("header_title_name").innerHTML = "MathType for TinyMCE 7 on HTML";
9+
document.getElementById("version_editor").innerHTML = "TinyMCE: ";
10+
11+
// Copy the editor content before initializing it.
12+
// Currently disabled by decision of QA.
13+
// Generic.copyContentFromxToy('editor', 'transform_content');
14+
15+
// Set up the editor.
16+
tinymce.init({
17+
selector: "#editor",
18+
license_key: "gpl",
19+
external_plugins: {
20+
tiny_mce_wiris: `${window.location.href}dist/plugin.min.js`,
21+
},
22+
23+
// This option allows us to introduce mathml formulas
24+
extended_valid_elements: "*[.*]",
25+
valid_elements: "*[*]",
26+
// We recommend to set 'draggable_modal' to true to avoid overlapping issues
27+
// with the different UI modal dialog windows implementations between core and third-party plugins on TinyMCE.
28+
// @see: https://github.com/wiris/html-integrations/issues/134#issuecomment-905448642
29+
draggable_modal: true,
30+
plugins: ["image", "media"],
31+
toolbar:
32+
"undo redo | styleselect | bold italic | image media | tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry",
33+
34+
// language: 'fr_FR',
35+
// You could set a different language for MathType editor:
36+
// mathTypeParameters: {
37+
// editorParameters: { language: 'de' },
38+
// },
39+
40+
// Handle events.
41+
setup(editor) {
42+
// Launch on init event.
43+
editor.on("init", () => {
44+
// Get and set the editor and wiris versions in this order.
45+
Generic.setEditorAndWirisVersion(
46+
`${tinymce.majorVersion}.${tinymce.minorVersion}`,
47+
WirisPlugin.currentInstance.version,
48+
); //eslint-disable-line
49+
50+
// Insert the initial content in the editor.
51+
editor.setContent(Generic.editorContentMathML);
52+
});
53+
},
54+
});
55+
56+
// Add listener on click button to launch updateContent function.
57+
document.getElementById("btn_update").addEventListener("click", (e) => {
58+
e.preventDefault();
59+
Generic.updateContent(tinyMCE.activeEditor.getContent(), "transform_content"); // eslint-disable-line no-undef
60+
});

‎demos/html/tinymce7/src/static/style.css

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
body {
2+
background-color: #e4e6e7;
3+
}
4+
5+
.tox {
6+
background-color: #fff !important;
7+
border-radius: 10px;
8+
margin: 0 auto !important;
9+
max-width: 750px !important;
10+
width: 75% !important;
11+
}
12+
13+
.tox:hover {
14+
box-shadow: 0 0 10px #7af78f;
15+
}
16+
17+
#editor_ifr {
18+
min-height: 200px;
19+
}

‎demos/html/tinymce7/webpack.config.js

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
const path = require("path");
2+
const CopyPlugin = require("copy-webpack-plugin");
3+
4+
module.exports = (config, context) => {
5+
return {
6+
entry: {
7+
app: path.resolve(__dirname, "src/app.js"),
8+
},
9+
output: {
10+
path: path.resolve(__dirname, "dist"),
11+
filename: "demo.js",
12+
},
13+
devServer: {
14+
devMiddleware: {
15+
writeToDisk: true,
16+
},
17+
static: {
18+
directory: path.join(__dirname, "./"),
19+
},
20+
onListening: !config.devServer ? "" : config.devServer.onListening,
21+
open: true,
22+
port: 8009,
23+
hot: true,
24+
host: "0.0.0.0",
25+
},
26+
// Set watch to true for dev purposes.
27+
watch: false,
28+
plugins: [
29+
new CopyPlugin({
30+
patterns: [
31+
{
32+
from: `${path.dirname(require.resolve(`tinymce`))}/**/*.min.*`,
33+
to: path.resolve(__dirname, "dist/tinymce7"),
34+
35+
// Avoid copying the absolute path from the source
36+
context: path.dirname(require.resolve(`tinymce`)),
37+
},
38+
{
39+
from: `${path.dirname(require.resolve(`@wiris/mathtype-tinymce7`))}/plugin.min.js`,
40+
to: path.resolve(__dirname, "dist/plugin.min.js"),
41+
},
42+
],
43+
}),
44+
],
45+
mode: "none",
46+
module: {
47+
rules: [
48+
{
49+
test: /\.css$/,
50+
use: ["style-loader", "css-loader"],
51+
},
52+
{
53+
test: /\.(png|jpg|gif)$/i,
54+
type: "asset/inline",
55+
},
56+
{
57+
// For the modal close, minimize, maximize icons
58+
test: /\.svg$/,
59+
type: "asset/source",
60+
},
61+
{
62+
test: /\.html$/i,
63+
exclude: /node_modules/,
64+
loader: "html-loader",
65+
},
66+
],
67+
},
68+
stats: {
69+
colors: true,
70+
},
71+
};
72+
};

‎docs/contributing/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ For brevity, `<scope>` will take one of these next values depending on the affec
127127
| `generic` | `mathtype-generic` |
128128
| `tinymce5` | `mathtype-tinymce5` |
129129
| `tinymce6` | `mathtype-tinymce6` |
130+
| `tinymce7` | `mathtype-tinymce7` |
130131

131132
There are usually a few exceptions to the above rules:
132133

‎docs/development/compiling/README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ You can also build the packages in development mode:
4343
$ nx build-dev <PACKAGE>
4444
```
4545

46-
> In case you haven't installed `nx`, you'll have to add `yarn` at the beggining of each one of the previous commands.
46+
> In case you haven't installed `nx`, you'll have to add `yarn` at the beginning of each one of the previous commands.
4747
4848
Where PACKAGE can be:
4949

@@ -53,6 +53,7 @@ Where PACKAGE can be:
5353
- generic
5454
- tinymce5
5555
- tinymce6
56+
- tinymce7
5657

5758
## Point to your own back-end
5859

‎packages/tinymce6/editor_plugin.src.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export class TinyMceIntegration extends IntegrationModel {
1414
constructor(integrationModelProperties) {
1515
super(integrationModelProperties);
1616
/**
17-
* Indicates if the content of the TinyMCe editor has
17+
* Indicates if the content of the TinyMCE editor has
1818
* been parsed.
1919
* @type {Boolean}
2020
*/
@@ -258,7 +258,7 @@ export const currentInstance = null;
258258
integrationModelProperties.scriptName = "plugin.min.js";
259259
integrationModelProperties.environment = {};
260260

261-
integrationModelProperties.environment.editor = "TinyMCE 6.x";
261+
integrationModelProperties.environment.editor = `TinyMCE ${tinymce.majorVersion}.x`;
262262
integrationModelProperties.environment.editorVersion = `${tinymce.majorVersion}.${tinymce.minorVersion}`;
263263

264264
integrationModelProperties.callbackMethodArguments = callbackMethodArguments;

‎packages/tinymce7/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
plugin.min.js

‎packages/tinymce7/README.md

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
# MathType for TinyMCE V7
2+
3+
Type and handwrite mathematical notation with MathType.
4+
5+
Easily include quality math equations in your documents and digital content.
6+
7+
## Table of Contents
8+
9+
- [Install instructions](#install-instructions)
10+
- [Known issues](#known-issues)
11+
- [Services](#services)
12+
- [Documentation](#documentation)
13+
- [Displaying on Target Page](#displaying-on-target-page)
14+
- [Privacy policy](#privacy-policy)
15+
16+
## Install instructions
17+
18+
1. Install the npm module:
19+
20+
```bash
21+
npm install @wiris/mathtype-tinymce7
22+
```
23+
24+
> MathType is fully compatible with TinyMCE 7 from version 7.6.0.
25+
26+
2. Add the plugin as an external plugin:
27+
28+
```js
29+
tinymce.init({
30+
external_plugins: {
31+
tiny_mce_wiris: `node_modules/@wiris/mathtype-tinymce7/plugin.min.js`,
32+
},
33+
});
34+
```
35+
36+
3. Add MathType buttons to the TinyMCE7 toolbar and the recommended settings:
37+
38+
```js
39+
tinymce.init({
40+
toolbar: "tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry",
41+
// We recommend to set 'draggable_modal' to true to avoid overlapping issues
42+
// with the different UI modal dialog windows implementations between core and third-party plugins on TinyMCE.
43+
// @see: https://github.com/wiris/html-integrations/issues/134#issuecomment-905448642
44+
draggable_modal: true,
45+
46+
// This option allows you to introduce mathml formulas with wiris plugins.
47+
// Not enabling this, will provide formulas from being created and rendered.
48+
extended_valid_elements: "*[.*]",
49+
valid_elements: "*[*]",
50+
51+
// You could set a different language for MathType editor:
52+
// language: 'fr_FR',
53+
// mathTypeParameters: {
54+
// editorParameters: { language: 'fr' },
55+
// },
56+
});
57+
```
58+
59+
Notice the example assumes this directory structure:
60+
61+
```
62+
└───index.html
63+
└───node_modules
64+
└───@wiris/mathtype-tinymce7
65+
```
66+
67+
## Known issues
68+
69+
- The editor's caret is lost when inserting a new formula on Safari with ChemType [#486](https://github.com/wiris/html-integrations/issues/486)
70+
71+
## Services
72+
73+
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.
74+
75+
The services are available for Java, PHP, .NET and Ruby on Rails. If you use any of these technologies, please download the plugin for your backend technology from [here](https://store.wiris.com/en/products/downloads/mathtype/integrations#froala?utm_source=npmjs&utm_medium=referral).
76+
77+
## Displaying on Target Page
78+
79+
In order to display mathematical formulas on the target page, i.e. the page where content produced by the HTML editor will be visible, the target page needs to include the [MathType script](https://docs.wiris.com/en/mathtype/mathtype_web/integrations/mathml-mode#add_a_script_to_head). For example for the default setting this would be:
80+
81+
```html
82+
<script src="https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image"></script>
83+
```
84+
85+
## Documentation
86+
87+
To find out more information about MathType, please go to the following documentation:
88+
89+
- [Install instructions](https://docs.wiris.com/mathtype/en/mathtype-integrations/mathtype-for-html-editors/mathtype-for-tinymce.html?utm_source=npmjs&utm_medium=referral)
90+
- [MathType documentation](https://docs.wiris.com/en/mathtype/mathtype_web/start?utm_source=npmjs&utm_medium=referral)
91+
- [Introductory tutorials](https://docs.wiris.com/en/mathtype/mathtype_web/intro_tutorials?utm_source=npmjs&utm_medium=referral)
92+
- [Service customization](https://docs.wiris.com/en/mathtype/mathtype_web/integrations/config-table?utm_source=npmjs&utm_medium=referral)
93+
- [Testing](https://docs.wiris.com/en/mathtype/mathtype_web/integrations/html/plugins-test?utm_source=npmjs&utm_medium=referral)
94+
95+
## Privacy policy
96+
97+
The [MathType Privacy Policy](https://www.wiris.com/en/mathtype-privacy-policy/?utm_source=npmjs&utm_medium=referral) covers the data processing operations for the MathType users. It is an addendum of the company’s general Privacy Policy and the [general Privacy Policy](https://www.wiris.com/en/privacy-policy?utm_source=npmjs&utm_medium=referral) still applies to MathType users.

‎packages/tinymce7/editor_plugin.src.js

+548
Large diffs are not rendered by default.

‎packages/tinymce7/global.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import Core from "@wiris/mathtype-html-integration-devkit/src/core.src";
2+
import Parser from "@wiris/mathtype-html-integration-devkit/src/parser";
3+
import Util from "@wiris/mathtype-html-integration-devkit/src/util";
4+
import Image from "@wiris/mathtype-html-integration-devkit/src/image";
5+
import Configuration from "@wiris/mathtype-html-integration-devkit/src/configuration";
6+
import Listeners from "@wiris/mathtype-html-integration-devkit/src/listeners";
7+
import IntegrationModel from "@wiris/mathtype-html-integration-devkit/src/integrationmodel";
8+
import Latex from "@wiris/mathtype-html-integration-devkit/src/latex";
9+
import "@wiris/mathtype-html-integration-devkit/src/backwardslib";
10+
import Test from "@wiris/mathtype-html-integration-devkit/src/test";
11+
import { TinyMceIntegration, currentInstance, instances } from "./editor_plugin.src";
12+
13+
// Expose WirisPlugin variable to the window.
14+
window.WirisPlugin = {
15+
Core,
16+
Parser,
17+
Image,
18+
Util,
19+
Configuration,
20+
Listeners,
21+
IntegrationModel,
22+
currentInstance,
23+
instances,
24+
TinyMceIntegration,
25+
Latex,
26+
Test,
27+
};

‎packages/tinymce7/package.json

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"name": "@wiris/mathtype-tinymce7",
3+
"version": "8.11.1",
4+
"description": "MathType Web for TinyMCE7 editor",
5+
"keywords": [
6+
"chem",
7+
"chemistry",
8+
"chemtype",
9+
"editor",
10+
"equation",
11+
"latex",
12+
"math",
13+
"mathml",
14+
"maths",
15+
"mathtype",
16+
"tinymce",
17+
"tinymce7",
18+
"wiris"
19+
],
20+
"repository": "https://github.com/wiris/html-integrations/tree/master/packages/tinymce7",
21+
"homepage": "www.wiris.com/?utm_source=npmjs&utm_medium=referral",
22+
"bugs": {
23+
"email": "support@wiris.com"
24+
},
25+
"license": "MIT",
26+
"author": "WIRIS Team (www.wiris.com/?utm_source=npmjs&utm_medium=referral)",
27+
"main": "plugin.min.js",
28+
"scripts": {
29+
"build": "webpack --mode production",
30+
"build-dev": "webpack --mode development",
31+
"clean": "shx rm -f plugin.min.js",
32+
"prepack": "yarn && npm run build"
33+
},
34+
"dependencies": {
35+
"@wiris/mathtype-html-integration-devkit": "1.17.5"
36+
},
37+
"devDependencies": {
38+
"@babel/core": "^7.24.4",
39+
"@babel/preset-env": "^7.24.4",
40+
"babel-loader": "^9.1.3",
41+
"css-loader": "^7.1.0",
42+
"shx": "^0.3.4",
43+
"style-loader": "^4.0.0",
44+
"terser-webpack-plugin": "^5.3.10"
45+
}
46+
}

‎packages/tinymce7/plugin.min.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/tinymce7/project.json

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "tinymce7",
3+
"$schema": "../../node_modules/nx/schemas/project-schema.json",
4+
"sourceRoot": "package/tinymce7/src",
5+
"targets": {
6+
"build": {
7+
"executor": "@nx/webpack:webpack",
8+
"dependsOn": [],
9+
"outputs": ["{options.outputPath}"],
10+
"options": {
11+
"main": "demos/packages/tinymce7/global.js",
12+
"outputPath": "dist",
13+
"tsConfig": "tsconfig.app.json",
14+
"generateIndexHtml": false,
15+
"index": " ",
16+
"webpackConfig": "packages/tinymce7/webpack.config.js"
17+
}
18+
},
19+
"start": {
20+
"executor": "@nx/webpack:dev-server",
21+
"options": {
22+
"buildTarget": "tinymce7:build",
23+
"webpackConfig": "packages/tinymce7/webpack.config.js"
24+
}
25+
},
26+
"lint": {
27+
"executor": "@nx/linter:eslint",
28+
"options": {
29+
"eslintConfig": "./.eslintrc.js",
30+
"lintFilePatterns": ["packages/tinymce7/**/*.{ts,tsx,js,jsx}"]
31+
},
32+
"outputs": ["{options.outputFile}"]
33+
}
34+
}
35+
}

‎packages/tinymce7/webpack.config.js

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
const path = require("path");
2+
const webpack = require("webpack");
3+
const TerserPlugin = require("terser-webpack-plugin");
4+
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
5+
6+
module.exports = (config, context) => {
7+
return {
8+
entry: {
9+
app: path.resolve(__dirname, "./global.js"),
10+
},
11+
output: {
12+
path: path.resolve(__dirname, ""),
13+
filename: "./plugin.min.js",
14+
globalObject: "this",
15+
},
16+
devServer: {
17+
devMiddleware: {
18+
writeToDisk: true,
19+
},
20+
static: {
21+
directory: path.join(__dirname, "./"),
22+
},
23+
onListening:
24+
config && config.devServer ? config.devServer.onListening : "",
25+
hot: true,
26+
port: 9008,
27+
host: "0.0.0.0",
28+
},
29+
// Set watch to true for dev purposes.
30+
watch: false,
31+
optimization: {
32+
minimize: true,
33+
minimizer: [
34+
new TerserPlugin({
35+
// These options prevent Terser from generating a LICENSE.txt file
36+
terserOptions: {
37+
format: {
38+
comments: false,
39+
},
40+
},
41+
extractComments: false,
42+
}),
43+
],
44+
},
45+
mode: "none",
46+
module: {
47+
rules: [
48+
{
49+
// Rule to translate ES5 javascript files to ES6.
50+
test: /\.js$/,
51+
exclude:
52+
/node_modules\/(?!(@wiris\/mathtype-html-integration-devkit)\/).*/,
53+
use: {
54+
loader: "babel-loader",
55+
options: {
56+
presets: ["@babel/env"],
57+
},
58+
},
59+
},
60+
{
61+
test: /\.wasm$/,
62+
type: "asset/inline",
63+
},
64+
{
65+
test: /\.css$/,
66+
use: ["style-loader", "css-loader"],
67+
},
68+
{
69+
test: /\.(png|jpg|gif)$/i,
70+
type: "asset/inline",
71+
},
72+
{
73+
// For the modal close, minimize, maximize icons
74+
test: /\.svg$/,
75+
type: "asset/source",
76+
},
77+
],
78+
},
79+
stats: {
80+
colors: true,
81+
},
82+
experiments: {
83+
topLevelAwait: true,
84+
asyncWebAssembly: true,
85+
},
86+
plugins: [
87+
new webpack.EnvironmentPlugin({
88+
SERVICE_PROVIDER_URI: "https://www.wiris.net/demo/plugins/app",
89+
SERVICE_PROVIDER_SERVER: "java",
90+
}),
91+
new CleanWebpackPlugin({
92+
root: process.cwd(),
93+
verbose: true,
94+
dry: false,
95+
cleanOnceBeforeBuildPatterns: ["app.*"],
96+
}),
97+
],
98+
};
99+
};

‎scripts/services/paths.json

+10
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,11 @@
3434
"demo": false,
3535
"port": ""
3636
},
37+
"mathTinyMCE7": {
38+
"path": "./packages/tinymce7/",
39+
"demo": false,
40+
"port": ""
41+
},
3742
"vueCKEditor5": {
3843
"path": "./demos/vue/ckeditor5/",
3944
"demo": true,
@@ -68,5 +73,10 @@
6873
"path": "./demos/html/tinymce6/",
6974
"demo": true,
7075
"port": "8008"
76+
},
77+
"htmlTinyMCE7": {
78+
"path": "./demos/html/tinymce7/",
79+
"demo": true,
80+
"port": "8009"
7181
}
7282
}

‎staging/branch/html/index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
@@ -17,6 +17,7 @@ <h2>HTML</h2>
1717
<li><a href="generic">Generic</a></li>
1818
<li><a href="tinymce5">TinyMCE 5</a></li>
1919
<li><a href="tinymce6">TinyMCE 6</a></li>
20+
<li><a href="tinymce7">TinyMCE 7</a></li>
2021
</ul>
2122
</section>
2223
</nav>

‎staging/branch/index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
@@ -17,6 +17,7 @@ <h2><a href="html">HTML</a></h2>
1717
<li><a href="html/generic">Generic</a></li>
1818
<li><a href="html/tinymce5">TinyMCE 5</a></li>
1919
<li><a href="html/tinymce6">TinyMCE 6</a></li>
20+
<li><a href="html/tinymce7">TinyMCE 7</a></li>
2021
<li><a href="html/viewer">Viewer</a></li>
2122
</ul>
2223
</section>

0 commit comments

Comments
 (0)
Please sign in to comment.