ESI-HTML-DOCX/ckeditor5-export
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📖 examples and the console.log for it, about handling mathlive script math/tex to MathML

Browse Source
This commit is contained in:
Sahatsawat Kanpai 2025-01-14 09:57:49 +07:00
parent 6b3523649c
commit 0825fd1ea6
3 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
package-lock.json generated
View File

@ -9,7 +9,8 @@
"version": "0.0.1", "version": "0.0.1",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@esi_package/ckeditor5-mathlive": "^0.0.14" "@esi_package/ckeditor5-mathlive": "^0.0.15",
"temml": "^0.10.32"
}, },
"devDependencies": { "devDependencies": {
"@ckeditor/ckeditor5-dev-build-tools": "43.0.1", "@ckeditor/ckeditor5-dev-build-tools": "43.0.1",
@ -3553,15 +3554,13 @@
} }
}, },
"node_modules/@esi_package/ckeditor5-mathlive": { "node_modules/@esi_package/ckeditor5-mathlive": {
"version": "0.0.14", "version": "0.0.15",
"resolved": "http://158.108.215.151:8081/api/packages/esirepository/npm/%40esi_package%2Fckeditor5-mathlive/-/0.0.14/ckeditor5-mathlive-0.0.14.tgz", "resolved": "http://158.108.215.151:8081/api/packages/esirepository/npm/%40esi_package%2Fckeditor5-mathlive/-/0.0.15/ckeditor5-mathlive-0.0.15.tgz",
"integrity": "sha512-WOc2Hlc/OOurxDy4ZDh7qGHQ1HvLl+jUEFd/9odHg1a8MTJW9Epplpd71GjZBDssHJxsMD7vG4iK0SAnupf/1Q==", "integrity": "sha512-I/5yZfZeOU7jnlodXHolIerh1N3s83q50M1dGlVavD85hKPvby/vic4+WuzdhvjxqiGhO1eoCbRonPQ+Mvu0zA==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@ckeditor/ckeditor5-dev-webpack-plugin": "^31.1.13", "@ckeditor/ckeditor5-dev-webpack-plugin": "^31.1.13",
"mathjax": "^3.2.2", "mathlive": "^0.101.2"
"mathlive": "^0.101.2",
"temml": "^0.10.32"
}, },
"peerDependencies": { "peerDependencies": {
"ckeditor5": ">=42.0.0 || ^0.0.0-nightly" "ckeditor5": ">=42.0.0 || ^0.0.0-nightly"
@ -13407,12 +13406,6 @@
"node": ">= 0.4" "node": ">= 0.4"
} }
}, },
"node_modules/mathjax": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/mathjax/-/mathjax-3.2.2.tgz",
"integrity": "sha512-Bt+SSVU8eBG27zChVewOicYs7Xsdt40qm4+UpHyX7k0/O9NliPc+x77k1/FEsPsjKPZGJvtRZM1vO+geW0OhGw==",
"license": "Apache-2.0"
},
"node_modules/mathlive": { "node_modules/mathlive": {
"version": "0.101.2", "version": "0.101.2",
"resolved": "https://registry.npmjs.org/mathlive/-/mathlive-0.101.2.tgz", "resolved": "https://registry.npmjs.org/mathlive/-/mathlive-0.101.2.tgz",

3
package.json
View File

@ -93,6 +93,7 @@
} }
}, },
"dependencies": { "dependencies": {
"@esi_package/ckeditor5-mathlive": "^0.0.14" "@esi_package/ckeditor5-mathlive": "^0.0.15",
"temml": "^0.10.32"
} }
} }

15
src/export.ts
View File

@ -2,9 +2,11 @@ import { Plugin, ButtonView } from 'ckeditor5';
import ckeditor5Icon from '../theme/icons/ckeditor.svg'; import ckeditor5Icon from '../theme/icons/ckeditor.svg';
import { asBlob } from 'html-docx-js-typescript' import { asBlob } from 'html-docx-js-typescript';
import { saveAs } from 'file-saver'; import { saveAs } from 'file-saver';
import Temml from 'temml';
export default class Export extends Plugin { export default class Export extends Plugin {
public static get pluginName() { public static get pluginName() {
return 'Export' as const; return 'Export' as const;
@ -47,6 +49,17 @@ export default class Export extends Plugin {
// POST fetch docx and download // POST fetch docx and download
this.listenTo( view, 'execute', async () => { this.listenTo( view, 'execute', async () => {
const parser = new DOMParser();
const doc = parser.parseFromString(this.editor.getData(), "text/html");
for (const mathliveElement of doc.querySelectorAll('script[type="math/tex"]')) {
const temmlWrapperElement = document.createElement('span');
const temmlMathMLString = Temml.render(mathliveElement.textContent ?? "", temmlWrapperElement);
mathliveElement.replaceWith(temmlWrapperElement);
}
console.log(doc.body.innerHTML);
fetch('http://localhost:3000/docx', { fetch('http://localhost:3000/docx', {
method: 'POST', method: 'POST',
body: JSON.stringify({ htmlData: this.editor.getData() }), body: JSON.stringify({ htmlData: this.editor.getData() }),