@wiris/mathtype-ckeditor5 8.11.0 → 8.11.1

package/dist/browser/index.js

@@ -557,6 +557,7 @@ var purify = {exports: {}};
             'accumulate',
             'additive',
             'alignment-baseline',
+            'amplitude',
             'ascent',
             'attributename',
             'attributetype',
@@ -589,6 +590,7 @@ var purify = {exports: {}};
             'edgemode',
             'elevation',
             'end',
+            'exponent',
             'fill',
             'fill-opacity',
             'fill-rule',
@@ -617,6 +619,7 @@ var purify = {exports: {}};
             'image-rendering',
             'in',
             'in2',
+            'intercept',
             'k',
             'k1',
             'k2',
@@ -681,6 +684,7 @@ var purify = {exports: {}};
             'scale',
             'seed',
             'shape-rendering',
+            'slope',
             'specularconstant',
             'specularexponent',
             'spreadmethod',
@@ -701,6 +705,7 @@ var purify = {exports: {}};
             'surfacescale',
             'systemlanguage',
             'tabindex',
+            'tablevalues',
             'targetx',
             'targety',
             'transform',
@@ -887,7 +892,7 @@ var purify = {exports: {}};
             /**
 	     * Version label, exposed for easier checks
 	     * if DOMPurify is up to date or not
-	     */ DOMPurify.version = '3.1.6';
+	     */ DOMPurify.version = '3.1.7';
             /**
 	     * Array of elements that DOMPurify removed during sanitation.
 	     * Empty if nothing was removed.
@@ -1260,7 +1265,6 @@ var purify = {exports: {}};
                 'mtext'
             ]);
             const HTML_INTEGRATION_POINTS = addToSet({}, [
-                'foreignobject',
                 'annotation-xml'
             ]);
             // Certain elements are allowed in both SVG and HTML
@@ -1655,10 +1659,6 @@ var purify = {exports: {}};
                     hookEvent.forceKeepAttr = undefined; // Allows developers to see this is a property they can set
                     _executeHook('uponSanitizeAttribute', currentNode, hookEvent);
                     value = hookEvent.attrValue;
-                    /* Work around a security issue with comments inside attributes */ if (SAFE_FOR_XML && regExpTest(/((--!?|])>)|<\/(style|title)/i, value)) {
-                        _removeAttribute(name, currentNode);
-                        continue;
-                    }
                     /* Did the hooks approve of the attribute? */ if (hookEvent.forceKeepAttr) {
                         continue;
                     }
@@ -1691,6 +1691,10 @@ var purify = {exports: {}};
                         // Prefix the value and later re-create the attribute with the sanitized value
                         value = SANITIZE_NAMED_PROPS_PREFIX + value;
                     }
+                    /* Work around a security issue with comments inside attributes */ if (SAFE_FOR_XML && regExpTest(/((--!?|])>)|<\/(style|title)/i, value)) {
+                        _removeAttribute(name, currentNode);
+                        continue;
+                    }
                     /* Handle attributes that require Trusted Types */ if (trustedTypesPolicy && typeof trustedTypes === 'object' && typeof trustedTypes.getAttributeType === 'function') {
                         if (namespaceURI) ;
                         else {
@@ -2266,6 +2270,19 @@ var purifyExports = purify.exports;
         return mathml.replace(semanticsStartingTagRegex, "").replace(semanticsEndingTagRegex, "");
     }
     /**
+   * Removes semantics tag to element that contains mathml.
+   * When using Hand to create formulas, it adds the mrow tag due to the semantics one, this one is also removed.
+   * @param {string} element - Inner HTML text string.
+   * @returns {string} - 'mathml' without semantics tag.
+   */ static removeSafeXMLSemantics(element) {
+        // If `mrow` is found right before the `semantics` starting tag, it's removed as well
+        const semanticsSafeStartingTagRegex = /«semantics»\s*?(«mrow»)?/gm;
+        // If `mrow` is found right after the `annotation` ending tag, it's removed as well
+        // alongside `semantics` closing tag and the whole `annotation` tag and its contents.
+        const semanticsSafeEndingTagRegex = /(«\/mrow»)?\s*«annotation[\W\w]*?«\/semantics»/gm;
+        return element.replace(semanticsSafeStartingTagRegex, "").replace(semanticsSafeEndingTagRegex, "");
+    }
+    /**
    * Transforms all xml mathml occurrences that contain semantics to the same
    * xml mathml occurrences without semantics.
    * @param {string} text - string that can contain xml mathml occurrences.
@@ -3588,6 +3605,9 @@ var ko = {
 var nl = {
 	latex: "LaTeX",
 	cancel: "Annuleren",
+	accept: "Invoegen",
+	manual: "Handmatig",
+	insert_math: "Een wiskundige vergelijking invoegen - MathType",
 	insert_chem: "Een scheikundige formule invoegen - ChemType",
 	minimize: "Minimaliseer",
 	maximize: "Maximaliseer",
@@ -5517,12 +5537,14 @@ var translations = {
    * @param {string} code - HTML code to be parsed
    * @returns {string} HTML code parsed.
    */ static endParseSaveMode(code) {
-        if (Configuration.get("saveMode")) {
-            if (Configuration.get("saveMode") === "safeXml") {
+        const savemode = Configuration.get("saveMode");
+        const base64savemode = Configuration.get("base64savemode");
+        if (savemode) {
+            if (savemode === "safeXml") {
                 code = Parser.codeImgTransform(code, "img2mathml");
-            } else if (Configuration.get("saveMode") === "xml") {
+            } else if (savemode === "xml") {
                 code = Parser.codeImgTransform(code, "img2mathml");
-            } else if (Configuration.get("saveMode") === "base64" && Configuration.get("base64savemode") === "image") {
+            } else if (savemode === "base64" && base64savemode === "image") {
                 code = Parser.codeImgTransform(code, "img264");
             }
         }
@@ -10769,7 +10791,7 @@ var mathIcon = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<!-- Generator: Adob
 var chemIcon = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->\n<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t viewBox=\"0 0 40.3 49.5\" style=\"enable-background:new 0 0 40.3 49.5;\" xml:space=\"preserve\">\n<style type=\"text/css\">\n\t.st0{fill:#A4CF61;}\n</style>\n<path class=\"st0\" d=\"M39.2,12.1c0-1.9-1.1-3.6-2.7-4.4L24.5,0.9l0,0c-0.7-0.4-1.5-0.6-2.4-0.6c-0.9,0-1.7,0.2-2.4,0.6l0,0L2.3,10.8\n\tl0,0C0.9,11.7,0,13.2,0,14.9h0v19.6h0c0,1.7,0.9,3.3,2.3,4.1l0,0l17.4,9.9l0,0c0.7,0.4,1.5,0.6,2.4,0.6c0.9,0,1.7-0.2,2.4-0.6l0,0\n\tl12.2-6.9h0c1.5-0.8,2.6-2.5,2.6-4.3c0-2.7-2.2-4.9-4.9-4.9c-0.9,0-1.8,0.3-2.5,0.7l0,0l-9.7,5.6l-12.3-7V17.8l12.3-7l9.9,5.7l0,0\n\tc0.7,0.4,1.5,0.6,2.4,0.6C37,17,39.2,14.8,39.2,12.1\"/>\n</svg>\n";
 
 var name = "@wiris/mathtype-ckeditor5";
-var version = "8.11.0";
+var version = "8.11.1";
 var description = "MathType Web for CKEditor5 editor";
 var keywords = [
 	"chem",
@@ -10816,7 +10838,7 @@ var scripts = {
 	prepare: "npm run build:dist"
 };
 var dependencies = {
-	"@wiris/mathtype-html-integration-devkit": "1.17.4"
+	"@wiris/mathtype-html-integration-devkit": "1.17.5"
 };
 var devDependencies = {
 	"@ckeditor/ckeditor5-dev-build-tools": "^42.1.0",
@@ -10985,7 +11007,8 @@ class MathType extends Plugin {
         schema.register("mathml", {
             inheritAllFrom: "$inlineObject",
             allowAttributes: [
-                "formula"
+                "formula",
+                "htmlContent"
             ]
         });
     }
@@ -11069,6 +11092,50 @@ class MathType extends Plugin {
                 data.modelCursor = data.modelRange.end;
             }
         });
+        // Data view -> Model
+        editor.data.upcastDispatcher.on("element:img", (evt, data, conversionApi)=>{
+            const { consumable, writer } = conversionApi;
+            const { viewItem } = data;
+            // Only upcast when is wiris formula
+            if (viewItem.getClassNames().next().value !== "Wirisformula") {
+                return;
+            }
+            const mathAttributes = [
+                ...viewItem.getAttributes()
+            ].map(([key, value])=>` ${key}="${value}"`).join("");
+            let htmlContent = Util.htmlSanitize(`<img${mathAttributes}>`);
+            const modelNode = writer.createElement("mathml", {
+                htmlContent
+            });
+            // Find allowed parent for element that we are going to insert.
+            // If current parent does not allow to insert element but one of the ancestors does
+            // then split nodes to allowed parent.
+            const splitResult = conversionApi.splitToAllowedParent(modelNode, data.modelCursor);
+            // When there is no split result it means that we can't insert element to model tree, so let's skip it.
+            if (!splitResult) {
+                return;
+            }
+            // Insert element on allowed position.
+            conversionApi.writer.insert(modelNode, splitResult.position);
+            // Consume appropriate value from consumable values list.
+            consumable.consume(viewItem, {
+                name: true
+            });
+            const parts = conversionApi.getSplitParts(modelNode);
+            // Set conversion result range.
+            data.modelRange = writer.createRange(conversionApi.writer.createPositionBefore(modelNode), conversionApi.writer.createPositionAfter(parts[parts.length - 1]));
+            // Now we need to check where the `modelCursor` should be.
+            if (splitResult.cursorParent) {
+                // If we split parent to insert our element then we want to continue conversion in the new part of the split parent.
+                //
+                // before: <allowed><notAllowed>foo[]</notAllowed></allowed>
+                // after:  <allowed><notAllowed>foo</notAllowed><converted></converted><notAllowed>[]</notAllowed></allowed>
+                data.modelCursor = conversionApi.writer.createPositionAt(splitResult.cursorParent, 0);
+            } else {
+                // Otherwise just continue after inserted element.
+                data.modelCursor = data.modelRange.end;
+            }
+        });
         /**
      * Whether the given view <math> element has a LaTeX annotation element.
      * @param {*} math
@@ -11097,12 +11164,25 @@ class MathType extends Plugin {
         }
         function createViewImage(modelItem, { writer: viewWriter }) {
             const htmlDataProcessor = new HtmlDataProcessor(viewWriter.document);
-            const mathString = modelItem.getAttribute("formula").replaceAll('ref="<"', 'ref="&lt;"');
-            const imgHtml = Parser.initParse(mathString, integration.getLanguage());
-            const imgElement = htmlDataProcessor.toView(imgHtml).getChild(0);
+            const formula = modelItem.getAttribute("formula");
+            const htmlContent = modelItem.getAttribute("htmlContent");
+            if (!formula && !htmlContent) {
+                return null;
+            }
+            let imgElement = null;
+            if (htmlContent) {
+                imgElement = htmlDataProcessor.toView(htmlContent).getChild(0);
+            } else if (formula) {
+                const mathString = formula.replaceAll('ref="<"', 'ref="&lt;"');
+                const imgHtml = Parser.initParse(mathString, integration.getLanguage());
+                imgElement = htmlDataProcessor.toView(imgHtml).getChild(0);
+                // Add HTML element (<img>) to model
+                viewWriter.setAttribute("htmlContent", imgHtml, modelItem);
+            }
             /* Although we use the HtmlDataProcessor to obtain the attributes,
-            we must create a new EmptyElement which is independent of the
-            DataProcessor being used by this editor instance */ if (imgElement) {
+        *  we must create a new EmptyElement which is independent of the
+        *  DataProcessor being used by this editor instance
+        */ if (imgElement) {
                 return viewWriter.createEmptyElement("img", imgElement.getAttributes(), {
                     renderUnsafeAttributes: [
                         "src"
@@ -11143,7 +11223,8 @@ class MathType extends Plugin {
         }
         function createDataString(modelItem, { writer: viewWriter }) {
             const htmlDataProcessor = new HtmlDataProcessor(viewWriter.document);
-            let mathString = Parser.endParseSaveMode(modelItem.getAttribute("formula"));
+            // Load img element
+            let mathString = modelItem.getAttribute("htmlContent");
             const sourceMathElement = htmlDataProcessor.toView(mathString).getChild(0);
             return clone(viewWriter, sourceMathElement);
         }
@@ -11155,36 +11236,40 @@ class MathType extends Plugin {
      * Hack to transform $$latex$$ into <math> in editor.getData()'s output.
      */ editor.data.on("get", (e)=>{
             let output = e.return;
-            // This line cleans all the semantics stuff, including the handwritten data points and returns the MathML IF there is any.
-            // For text or latex formulas, it returns the original output.
-            e.return = MathML.removeSemantics(output, "application/json");
+            const parsedResult = Parser.endParse(output);
+            // Cleans all the semantics tag for safexml
+            // including the handwritten data points
+            e.return = MathML.removeSafeXMLSemantics(parsedResult);
         }, {
             priority: "low"
         });
         /**
-     * Hack to transform <math> with LaTeX into $$LaTeX$$ in editor.setData().
+     * Hack to transform <math> with LaTeX into $$LaTeX$$ and formula images in editor.setData().
      */ editor.data.on("set", (e, args)=>{
             // Retrieve the data to be set on the CKEditor.
             let modifiedData = args[0];
             // Regex to find all mathml formulas.
-            const regexp = /<math(.*?)<\/math>/gm;
-            // Get all MathML formulas and store them in an array.
-            // Using the conditional operator on data.main because the data parameter has different types depending on:
-            //    editor.data.set can be used directly or by the source editing plugin.
-            //    With the source editor plugin, data is an object with the key `main` which contains the source code string.
-            //    When using the editor.data.set method, the data is a string with the content to be set to the editor.
-            let formulas = Object.values(modifiedData)[0] ? [
-                ...Object.values(modifiedData)[0].matchAll(regexp)
-            ] : [
-                ...modifiedData.matchAll(regexp)
-            ];
-            // Loop to find LaTeX formulas and replace the MathML for the LaTeX notation.
+            const regexp = /(<img\b[^>]*>)|(<math(.*?)<\/math>)/gm;
+            const formulas = [];
+            let formula;
+            // Both data.set from the source plugin and console command are taken into account as the data received is MathML or an image containing the MathML.
+            while((formula = regexp.exec(modifiedData)) !== null){
+                formulas.push(formula[0]);
+            }
+            // Loop to find LaTeX and formula images and replace the MathML for the both.
             formulas.forEach((formula)=>{
-                let mathml = formula[0];
-                if (mathml.includes('encoding="LaTeX"')) {
+                if (formula.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);
+                    let latex = "$$$" + Latex.getLatexFromMathML(formula) + "$$$"; // We add $$$ instead of $$ because the replace function ignores one $.
+                    modifiedData = modifiedData.replace(formula, latex);
+                } else if (formula.includes("<img")) {
+                    // If we found a formula image, we should find MathML data, and then substitute the entire image.
+                    const regexp = /«math\b[^»]*»(.*?)«\/math»/g;
+                    const safexml = formula.match(regexp);
+                    if (safexml !== null) {
+                        let decodeXML = MathML.safeXmlDecode(safexml[0]);
+                        modifiedData = modifiedData.replace(formula, decodeXML);
+                    }
                 }
             });
             args[0] = modifiedData;