Skip to content

Commit 74ffeb7

Browse files
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
1 parent c66a565 commit 74ffeb7

File tree

24 files changed

+1141
-7
lines changed

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+
});
+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

0 commit comments

Comments
 (0)