@wiris/mathtype-ckeditor5 8.6.0 → 8.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wiris/mathtype-ckeditor5",
-  "version": "8.6.0",
+  "version": "8.7.1",
   "description": "MathType Web for CKEditor5 editor",
   "keywords": [
     "chem",
@@ -39,6 +39,6 @@
     "@ckeditor/ckeditor5-engine": ">=23.0.0",
     "@ckeditor/ckeditor5-ui": ">=23.0.0",
     "@ckeditor/ckeditor5-widget": ">=23.0.0",
-    "@wiris/mathtype-html-integration-devkit": "1.14.0"
+    "@wiris/mathtype-html-integration-devkit": "1.14.1"
   }
 }

package/src/integration.js

@@ -146,9 +146,12 @@ export default class CKEditor5Integration extends IntegrationModel {
     // This returns the value returned by the callback function (writer => {...})
     return this.editorObject.model.change((writer) => {
       const core = this.getCore();
+      const selection = this.editorObject.model.document.selection;
 
-      const modelElementNew = writer.createElement('mathml', { formula: mathml });
-      modelElementNew.data = mathml;
+      const modelElementNew = writer.createElement('mathml', {
+        formula: mathml,
+        ...Object.fromEntries(selection.getAttributes()), // To keep the format, such as style and font
+      });
 
       // Obtain the DOM <span><img ... /></span> object corresponding to the formula
       if (core.editionProperties.isNewElement) {

package/src/plugin.js

@@ -257,6 +257,12 @@ export default class MathType extends Plugin {
       // And obtain the complete formula
       formula = Util.htmlSanitize(`<math${mathAttributes}>${formula}</math>`);
 
+      // Replaces the < & > characters to its HTMLEntity to avoid render issues.
+      formula = formula.replaceAll('"<"', '"&lt;"')
+        .replaceAll('">"', '"&gt;"')
+        .replaceAll('><<', '>&lt;<');
+
+
       /* Model node that contains what's going to actually be inserted. This can be either:
             - A <mathml> element with a formula attribute set to the given formula, or
             - If the original <math> had a LaTeX annotation, then the annotation surrounded by "$$...$$" */
@@ -335,7 +341,7 @@ export default class MathType extends Plugin {
     function createViewImage(modelItem, { writer: viewWriter }) {
       const htmlDataProcessor = new HtmlDataProcessor(viewWriter.document);
 
-      const mathString = modelItem.getAttribute('formula').replace('ref="<"', 'ref="&lt;"');
+      const mathString = modelItem.getAttribute('formula').replaceAll('ref="<"', 'ref="&lt;"');
       const imgHtml = Parser.initParse(mathString, editor.config.get('language'));
       const imgElement = htmlDataProcessor.toView(imgHtml).getChild(0);
 
@@ -401,19 +407,51 @@ export default class MathType extends Plugin {
       viewToModelPositionOutsideModelElement(editor.model, (viewElement) => viewElement.hasClass('ck-math-widget')),
     );
 
-    // Keep a reference to the original get function
-    const { get } = editor.data;
+    // Keep a reference to the original get and set function.
+    const { get, set } = editor.data;
 
     /**
      * Hack to transform $$latex$$ into <math> in editor.getData()'s output.
      */
     editor.data.get = (options) => {
       let output = get.bind(editor.data)(options);
+      
+      // CKEditor 5 replaces all the time the &lt; and &gt; for < and >, which our render can't understand.
+      // We replace the values inserted for CKEditro5 to be able to render the formulas with the mentioned characters.
+      output = output.replaceAll('"<"', '"&lt;"')
+        .replaceAll('">"', '"&gt;"')
+        .replaceAll('><<', '>&lt;<');
+
       // Ckeditor retrieves editor data and removes the image information on the formulas
       // We transform all the retrieved data to images and then we Parse the data.
       let imageFormula = Parser.initParse(output);
       return Parser.endParse(imageFormula);
     };
+
+    /**
+    * Hack to transform <math> with LaTeX into $$LaTeX$$ in editor.setData().
+    */
+    editor.data.set = (data) => {
+      // Retrieve the data to be set on the CKEditor.
+      let modifiedData = data;
+      // Regex to find all mathml formulas.
+      const regexp = /<math(.*?)<\/math>/gm;
+
+      // Get all MathML formulas and store them in an array.
+      let formulas = [...data.matchAll(regexp)];
+
+      // Loop to find LaTeX formulas and replace the MathML for the LaTeX notation.
+      formulas.forEach((formula) => {
+        let mathml = formula[0];
+        if (mathml.includes('encoding="LaTeX"')) { // LaTeX found.
+          let latex = '$$$' + Latex.getLatexFromMathML(mathml) + '$$$'; // We add $$$ instead of $$ because the replace function ignores one $.
+          modifiedData = modifiedData.replace(mathml, latex);
+        }
+      });
+      
+      // Run the setData code from CKEditor5 with the modified string.
+      set.bind(editor.data)(modifiedData); 
+    };  
   }
 
   /**