@wiris/mathtype-ckeditor5 8.11.0 → 8.11.1

package/dist/browser/index.umd.js

@@ -559,6 +559,7 @@
                'accumulate',
                'additive',
                'alignment-baseline',
+               'amplitude',
                'ascent',
                'attributename',
                'attributetype',
@@ -591,6 +592,7 @@
                'edgemode',
                'elevation',
                'end',
+               'exponent',
                'fill',
                'fill-opacity',
                'fill-rule',
@@ -619,6 +621,7 @@
                'image-rendering',
                'in',
                'in2',
+               'intercept',
                'k',
                'k1',
                'k2',
@@ -683,6 +686,7 @@
                'scale',
                'seed',
                'shape-rendering',
+               'slope',
                'specularconstant',
                'specularexponent',
                'spreadmethod',
@@ -703,6 +707,7 @@
                'surfacescale',
                'systemlanguage',
                'tabindex',
+               'tablevalues',
                'targetx',
                'targety',
                'transform',
@@ -889,7 +894,7 @@
                /**
    	     * 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.
@@ -1262,7 +1267,6 @@
                    'mtext'
                ]);
                const HTML_INTEGRATION_POINTS = addToSet({}, [
-                   'foreignobject',
                    'annotation-xml'
                ]);
                // Certain elements are allowed in both SVG and HTML
@@ -1657,10 +1661,6 @@
                        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;
                        }
@@ -1693,6 +1693,10 @@
                            // 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 {
@@ -2268,6 +2272,19 @@
            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.
@@ -3590,6 +3607,9 @@
    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",
@@ -5519,12 +5539,14 @@
       * @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");
                }
            }
@@ -6694,7 +6716,7 @@
    async function __wbg_init(input) {
        if (wasm !== undefined) return wasm;
        if (typeof input === "undefined") {
-           input = new URL("telemeter_wasm_bg.wasm", (typeof document === 'undefined' && typeof location === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : typeof document === 'undefined' ? location.href : (_documentCurrentScript && _documentCurrentScript.src || new URL('index.umd.js', document.baseURI).href)));
+           input = new URL("telemeter_wasm_bg.wasm", (typeof document === 'undefined' && typeof location === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : typeof document === 'undefined' ? location.href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.umd.js', document.baseURI).href)));
        }
        const imports = __wbg_get_imports();
        if (typeof input === "string" || typeof Request === "function" && input instanceof Request || typeof URL === "function" && input instanceof URL) {
@@ -10771,7 +10793,7 @@
    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",
@@ -10818,7 +10840,7 @@
    	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",
@@ -10987,7 +11009,8 @@
            schema.register("mathml", {
                inheritAllFrom: "$inlineObject",
                allowAttributes: [
-                   "formula"
+                   "formula",
+                   "htmlContent"
                ]
            });
        }
@@ -11071,6 +11094,50 @@
                    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
@@ -11099,12 +11166,25 @@
            }
            function createViewImage(modelItem, { writer: viewWriter }) {
                const htmlDataProcessor = new ckeditor5.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"
@@ -11145,7 +11225,8 @@
            }
            function createDataString(modelItem, { writer: viewWriter }) {
                const htmlDataProcessor = new ckeditor5.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);
            }
@@ -11157,36 +11238,40 @@
         * 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;