Skip to content

Commit ce24fc5

Browse files
xjiang-at-wiriscarla-at-wiris
xjiang-at-wiris
and
carla-at-wiris
authored
Feat/add tiny8 support (#1119)
* feat: add tinymce8 configuration * feat: tinymce8 first version * chore: change deprecated function * feat: merge tiny7 and tiny8 * ci: fix tiny8 build * doc: update comment * doc: upload documentation * fix: fix some error Co-authored-by: Carla Lara <[email protected]> * chore: delete not necessary lintignore --------- Co-authored-by: Carla Lara <[email protected]>
1 parent 07828f3 commit ce24fc5

File tree

15 files changed

+289
-15
lines changed

15 files changed

+289
-15
lines changed

‎.github/workflows/deploy-staging.yml‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -121,17 +121,19 @@ jobs:
121121
fail-fast: false
122122
matrix:
123123
branch: ${{ fromJson(needs.prepare.outputs.branches) }}
124-
editor: ["ckeditor4", "ckeditor5", "froala", "generic", "tinymce5", "tinymce6", "tinymce7", "viewer"]
124+
editor: ["ckeditor4", "ckeditor5", "froala", "generic", "tinymce5", "tinymce6", "tinymce7", "tinymce8", "viewer"]
125125
framework: ["html", "vue"]
126126
exclude:
127127
- framework: vue
128128
editor: viewer
129+
- framework: vue
130+
editor: tinymce5
129131
- framework: vue
130132
editor: tinymce6
131133
- framework: vue
132134
editor: tinymce7
133135
- framework: vue
134-
editor: tinymce5
136+
editor: tinymce8
135137
- framework: vue
136138
editor: generic
137139
- framework: vue
@@ -156,11 +158,18 @@ jobs:
156158
CKEDITOR4_API_KEY: ${{ secrets.CKEDITOR4_API_KEY }}
157159
FROALA_API_KEY: ${{ secrets.FROALA_API_KEY }}
158160
NODE_OPTIONS: "--openssl-legacy-provider"
161+
# We build tinymce7 package for tinymce8 editor as they use the same package
159162
run: |
160163
unset NODE_OPTIONS
161164
npm set "//registry.npmjs.org/:_authToken" ${{ secrets.NPM_TOKEN }}
162165
yarn
163-
yarn nx build ${{ matrix.editor }}
166+
if [ "${{ matrix.editor }}" == "tinymce8" ]; then
167+
echo "Building editor: ${{ matrix.editor }}"
168+
yarn nx build tinymce7
169+
else
170+
echo "Building editor: ${{ matrix.editor }}"
171+
yarn nx build ${{ matrix.editor }}
172+
fi
164173
yarn nx build ${{ matrix.framework }}-${{ matrix.editor }}
165174
166175
- name: Deploy the demos to S3 bucket
@@ -193,7 +202,7 @@ jobs:
193202
if [ "${{ matrix.editor }}" = "tinymce6" ]; then
194203
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
195204
fi
196-
if [ "${{ matrix.editor }}" = "tinymce7" ]; then
205+
if [ "${{ matrix.editor }}" = "tinymce7" ] || [ "${{ matrix.editor }}" = "tinymce8" ]; then
197206
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
198207
fi
199208
if [ "${{ matrix.editor }}" = "viewer" ]; then

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ Visit the [MathType integrations release notes](https://docs.wiris.com/mathtype/
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. |
66+
| [`@wiris/mathtype-tinymce7`](packages/mathtype-tinymce7) | <img src="https://img.shields.io/npm/v/@wiris/mathtype-tinymce7"> | MathType Web for TinyMCE7 and TinyMCE8 editor. |
6767

6868
## Documentation and important links
6969

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

Lines changed: 12 additions & 0 deletions
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/tinymce8/index.html‎

Lines changed: 12 additions & 0 deletions
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 8 on HTML</title>
5+
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
6+
<script src="./dist/tinymce8/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/tinymce8/package.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "demo-html-tinymce8",
3+
"version": "1.0.0",
4+
"private": true,
5+
"description": "A simple html App integrating WIRIS MathType in a TinyMCE8 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": "^8.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/tinymce8/project.json‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
{
2+
"name": "html-tinymce8",
3+
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
4+
"sourceRoot": "demos/html/tinymce8/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/tinymce8/src/app.js",
24+
"outputPath": "dist",
25+
"tsConfig": "tsconfig.app.json",
26+
"generateIndexHtml": false,
27+
"index": "demos/html/tinymce8/index.html",
28+
"webpackConfig": "demos/html/tinymce8/webpack.config.js"
29+
}
30+
},
31+
"start": {
32+
"executor": "@nx/webpack:dev-server",
33+
"dependsOn": ["prestart"],
34+
"options": {
35+
"buildTarget": "html-tinymce8:build",
36+
"webpackConfig": "demos/html/tinymce8/webpack.config.js"
37+
}
38+
},
39+
"start-remote": {
40+
"executor": "@nx/webpack:dev-server",
41+
"dependsOn": ["prestart-remote"],
42+
"options": {
43+
"buildTarget": "html-tinymce8:build",
44+
"webpackConfig": "demos/html/tinymce8/webpack.config.js"
45+
}
46+
},
47+
"lint": {
48+
"executor": "@nx/linter:eslint",
49+
"options": {
50+
"eslintConfig": "./.eslintrc.js",
51+
"lintFilePatterns": ["demos/html/tinymce8/**/*.{ts,tsx,js,jsx}"]
52+
},
53+
"outputs": ["{options.outputFile}"]
54+
}
55+
}
56+
}

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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 8 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: { tiny_mce_wiris: `${window.location.href}dist/plugin.min.js` },
20+
21+
// We recommend to set 'draggable_modal' to true to avoid overlapping issues
22+
// with the different UI modal dialog windows implementations between core and third-party plugins on TinyMCE.
23+
// @see: https://github.com/wiris/html-integrations/issues/134#issuecomment-905448642
24+
draggable_modal: true,
25+
plugins: ["image", "media"],
26+
toolbar:
27+
"undo redo | styleselect | bold italic | image media | tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry",
28+
29+
// language: 'fr_FR',
30+
// You could set a different language for MathType editor:
31+
// mathTypeParameters: {
32+
// editorParameters: { language: 'de' },
33+
// },
34+
35+
// Handle events.
36+
setup(editor) {
37+
// Launch on init event.
38+
editor.on("init", () => {
39+
// Get and set the editor and wiris versions in this order.
40+
Generic.setEditorAndWirisVersion(
41+
`${tinymce.majorVersion}.${tinymce.minorVersion}`,
42+
WirisPlugin.currentInstance.version,
43+
); //eslint-disable-line
44+
45+
// Insert the initial content in the editor.
46+
editor.insertContent(Generic.editorContentMathML);
47+
});
48+
},
49+
});
50+
51+
// Add listener on click button to launch updateContent function.
52+
document.getElementById("btn_update").addEventListener("click", (e) => {
53+
e.preventDefault();
54+
Generic.updateContent(tinyMCE.activeEditor.getContent(), "transform_content"); // eslint-disable-line no-undef
55+
});

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

Lines changed: 19 additions & 0 deletions
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/tinymce8/webpack.config.js‎

Lines changed: 72 additions & 0 deletions
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: 8010,
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/tinymce8"),
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‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,10 @@ 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` |
130+
| `tinymce7` | `mathtype-tinymce7`* |
131+
| `tinymce8` | `mathtype-tinymce7`* |
132+
133+
*`mathtype-tinymce7` package is also compatible with TinyMCE8 editor.
131134

132135
There are usually a few exceptions to the above rules:
133136

0 commit comments

Comments
 (0)