🧠 pre-process each mathml element on the response html text into a ckeditor5-mathlive native

This commit is contained in:
Sahatsawat Kanpai 2025-01-19 21:23:13 +07:00
parent b6c510de54
commit b52225bcf1
3 changed files with 35 additions and 3 deletions

19
package-lock.json generated
View File

@ -10,6 +10,7 @@
"license": "MIT",
"dependencies": {
"@esi_package/ckeditor5-mathlive": "^0.0.16",
"mathml-to-latex": "^1.4.3",
"temml": "^0.10.32"
},
"devDependencies": {
@ -6368,6 +6369,15 @@
}
}
},
"node_modules/@xmldom/xmldom": {
"version": "0.8.10",
"resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
"integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
"license": "MIT",
"engines": {
"node": ">=10.0.0"
}
},
"node_modules/@xtuc/ieee754": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@ -13434,6 +13444,15 @@
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/mathml-to-latex": {
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/mathml-to-latex/-/mathml-to-latex-1.4.3.tgz",
"integrity": "sha512-RfMRrpIBEk/BweXKZx0Mb3u5nA6/vKASYeVnclAed6pEhnfaCi1jfDqXYBEbzRsS+ORd1jB88Easa1Ov7majKQ==",
"license": "MIT",
"dependencies": {
"@xmldom/xmldom": "^0.8.10"
}
},
"node_modules/mdast-util-from-markdown": {
"version": "0.8.5",
"resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz",

View File

@ -94,6 +94,7 @@
},
"dependencies": {
"@esi_package/ckeditor5-mathlive": "^0.0.16",
"mathml-to-latex": "^1.4.3",
"temml": "^0.10.32"
}
}

View File

@ -2,10 +2,11 @@ import { Plugin, ButtonView } from 'ckeditor5';
import ckeditor5Icon from '../theme/icons/ckeditor.svg';
import { asBlob } from 'html-docx-js-typescript';
import { saveAs } from 'file-saver';
// import { asBlob } from 'html-docx-js-typescript';
// import { saveAs } from 'file-saver';
import Temml from 'temml';
// import Temml from 'temml';
import { MathMLToLaTeX } from 'mathml-to-latex';
export default class Import extends Plugin {
public static get pluginName() {
@ -64,6 +65,17 @@ export default class Import extends Plugin {
// console.log("Converted HTML:", htmlText);
const htmlDoc = new DOMParser().parseFromString(htmlText, "text/html");
const body = htmlDoc.body;
// pre-process mathml to latex
// get all mathml elements
// replace all mathml element in the body with script type math/tex with inside content latex
const mathmlElements = body.querySelectorAll("math");
mathmlElements.forEach(mathmlElement => {
const latex = MathMLToLaTeX.convert(mathmlElement.outerHTML);
const scriptElement = document.createElement("script");
scriptElement.type = "math/tex";
scriptElement.textContent = latex;
mathmlElement.replaceWith(scriptElement);
});
this.editor.setData(body.innerHTML);
} catch (error) {
console.error("Error uploading file:", error);