@wiris/mathtype-ckeditor5 8.14.0 → 8.15.1

package/dist/index-editor.css

@@ -0,0 +1,15 @@
+.ck-widget.ck-math-widget.ck-suggestion-marker{
+  border:none;
+}
+.ck-widget.ck-math-widget.ck-suggestion-marker.ck-suggestion-marker-insertion .Wirisformula{
+      border:3px solid var(--ck-color-suggestion-marker-insertion-border);
+    }
+.ck-widget.ck-math-widget.ck-suggestion-marker.ck-suggestion-marker-insertion.ck-suggestion-marker--active .Wirisformula{
+        border:3px solid var(--ck-color-suggestion-marker-insertion-border-active);
+      }
+.ck-widget.ck-math-widget.ck-suggestion-marker.ck-suggestion-marker-deletion .Wirisformula{
+      border:3px solid var(--ck-color-suggestion-marker-deletion-border);
+    }
+.ck-widget.ck-math-widget.ck-suggestion-marker.ck-suggestion-marker-deletion.ck-suggestion-marker--active .Wirisformula{
+        border:3px solid var(--ck-color-suggestion-marker-deletion-border-active);
+      }

package/dist/index.css

@@ -0,0 +1,18 @@
+/* Replace the default suggestion marker border because it's doesn't span the entire widget. */
+.ck-widget.ck-math-widget.ck-suggestion-marker {
+  border: none;
+}
+.ck-widget.ck-math-widget.ck-suggestion-marker.ck-suggestion-marker-insertion .Wirisformula {
+      border: 3px solid var(--ck-color-suggestion-marker-insertion-border);
+    }
+.ck-widget.ck-math-widget.ck-suggestion-marker.ck-suggestion-marker-insertion.ck-suggestion-marker--active .Wirisformula {
+        border: 3px solid var(--ck-color-suggestion-marker-insertion-border-active);
+      }
+.ck-widget.ck-math-widget.ck-suggestion-marker.ck-suggestion-marker-deletion .Wirisformula {
+      border: 3px solid var(--ck-color-suggestion-marker-deletion-border);
+    }
+.ck-widget.ck-math-widget.ck-suggestion-marker.ck-suggestion-marker-deletion.ck-suggestion-marker--active .Wirisformula {
+        border: 3px solid var(--ck-color-suggestion-marker-deletion-border-active);
+      }
+
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../theme/styles.css"],"names":[],"mappings":"AAAA,8FAA8F;AAC9F;EACE,YAAY;AAyBd;AAtBI;MACE,oEAAoE;IACtE;AAGE;QACE,2EAA2E;MAC7E;AAKF;MACE,mEAAmE;IACrE;AAGE;QACE,0EAA0E;MAC5E","file":"index.css","sourcesContent":["/* Replace the default suggestion marker border because it's doesn't span the entire widget. */\n.ck-widget.ck-math-widget.ck-suggestion-marker {\n  border: none;\n\n  &.ck-suggestion-marker-insertion {\n    & .Wirisformula {\n      border: 3px solid var(--ck-color-suggestion-marker-insertion-border);\n    }\n\n    &.ck-suggestion-marker--active {\n      & .Wirisformula {\n        border: 3px solid var(--ck-color-suggestion-marker-insertion-border-active);\n      }\n    }\n  }\n\n  &.ck-suggestion-marker-deletion {\n    & .Wirisformula {\n      border: 3px solid var(--ck-color-suggestion-marker-deletion-border);\n    }\n\n    &.ck-suggestion-marker--active {\n      & .Wirisformula {\n        border: 3px solid var(--ck-color-suggestion-marker-deletion-border-active);\n      }\n    }\n  }\n}\n"]}

package/dist/index.js

@@ -150,7 +150,9 @@ import Telemeter from '@wiris/mathtype-html-integration-devkit/src/telemeter.js'
                 // Remove selection
                 if (!viewSelection.isCollapsed) {
                     for (const range of viewSelection.getRanges()){
-                        writer.remove(this.editorObject.editing.mapper.toModelRange(range));
+                        const modelRange = this.editorObject.editing.mapper.toModelRange(range);
+                        const modelSelection = this.editorObject.model.createSelection(modelRange);
+                        this.editorObject.model.deleteContent(modelSelection);
                     }
                 }
                 // Set carret after the formula
@@ -166,7 +168,7 @@ import Telemeter from '@wiris/mathtype-html-integration-devkit/src/telemeter.js'
                 if (mathml) {
                     this.editorObject.model.insertObject(modelElementNew, position);
                 }
-                writer.remove(modelElementOld);
+                this.editorObject.model.deleteContent(this.editorObject.model.createSelection(modelElementOld, 'on'));
             }
             // eslint-disable-next-line consistent-return
             return modelElementNew;
@@ -210,6 +212,14 @@ import Telemeter from '@wiris/mathtype-html-integration-devkit/src/telemeter.js'
             returnObject.node = windowTarget.document.createTextNode(`$$${returnObject.latex}$$`);
             this.editorObject.model.change((writer)=>{
                 const { latexRange } = this.core.editionProperties;
+                // Add null check for latexRange.
+                // When the editor is initialized in a textarea element, latexRange may not be set on initial load.
+                // This check ensures formulas can still be inserted by falling back to MathML insertion if latexRange is not available.
+                if (!latexRange) {
+                    // Fallback to regular MathML insertion if latexRange is not available
+                    this.insertMathml(mathml);
+                    return;
+                }
                 const startNode = this.findText(latexRange.startContainer);
                 const endNode = this.findText(latexRange.endContainer);
                 let startPosition = writer.createPositionAt(startNode.parent, startNode.startOffset + latexRange.startOffset);
@@ -237,7 +247,8 @@ import Telemeter from '@wiris/mathtype-html-integration-devkit/src/telemeter.js'
                         range = writer.createRange(startPosition, endPosition);
                     }
                 }
-                writer.remove(range);
+                const modelSelection = this.editorObject.model.createSelection(range);
+                this.editorObject.model.deleteContent(modelSelection);
                 writer.insertText(`$$${returnObject.latex}$$`, startNode.getAttributes(), startPosition);
             });
         } else {
@@ -358,7 +369,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 version = "8.14.0";
+var version = "8.15.1";
 var packageInfo = {
 	version: version};
 
@@ -378,7 +389,9 @@ class MathType extends Plugin {
         const integration = this._addIntegration();
         currentInstance = integration;
         // Add the MathType and ChemType commands to the editor
-        this._addCommands();
+        this._addCommands(integration);
+        // Add the track changes feature integration
+        this._addTrackChangesIntegration(integration);
         // Add the buttons for MathType and ChemType
         this._addViews(integration);
         // Registers the <mathml> element in the schema
@@ -698,7 +711,8 @@ class MathType extends Plugin {
                 imgElement = htmlDataProcessor.toView(htmlContent).getChild(0);
             } else if (formula) {
                 const mathString = formula.replaceAll('ref="<"', 'ref="&lt;"');
-                const imgHtml = Parser.initParse(mathString, integration.getLanguage());
+                const lang = integration?.getLanguage() || "en"; // Safe fallback to 'en' in case integration is undefined.
+                const imgHtml = Parser.initParse(mathString, lang);
                 imgElement = htmlDataProcessor.toView(imgHtml).getChild(0);
                 // Add HTML element (<img>) to model
                 viewWriter.setAttribute("htmlContent", imgHtml, modelItem);
@@ -756,13 +770,63 @@ class MathType extends Plugin {
         editor.editing.mapper.on("viewToModelPosition", viewToModelPositionOutsideModelElement(editor.model, (viewElement)=>viewElement.hasClass("ck-math-widget")));
         // Keep a reference to the original get and set function.
         const { get, set } = editor.data;
+        // Listen to the preview command execution to set a flag in localStorage.
+        // This flag will be used in the getData() to prevent converting formulas while generating the preview.
+        // This is necessary because the preview command uses editor.getData() multiple times internally.
+        const previewCommand = editor.commands.get("previewFinalContent");
+        if (previewCommand) {
+            this.listenTo(previewCommand, "execute", ()=>{
+                localStorage.setItem("isGeneratingPreview", true);
+                setTimeout(()=>{
+                    localStorage.setItem("isGeneratingPreview", false);
+                }, 1000);
+            }, {
+                priority: "high"
+            });
+        }
         /**
-     * Hack to transform $$latex$$ into <math> in editor.getData()'s output.
+     * Listener for getData() that handles Track Changes and semantics cleanup.
+     *
+     * This listener intercepts the getData() call and processes the output differently
+     * depending on whether we're generating a preview or performing a save operation:
+     *
+     * - Preview Mode: Removes deleted formulas (marked with Track Changes deletion attributes)
+     *   while preserving formula images for visual representation.
+     * - Save Mode: Converts formulas to clean MathML by removing semantic annotations
+     *   and handwritten data, ensuring clean storage format.
      */ editor.data.on("get", (e)=>{
             const output = e.return;
+            // Check if we're in preview mode (flag set by previewFinalContent command)
+            const isGeneratingPreview = localStorage.getItem("isGeneratingPreview");
+            if (isGeneratingPreview === "true") {
+                // Wrap a <span> around all img elements to preserve Track Changes visibility for formulas.
+                // Span must contain all the img attributes to avoid render issues.
+                const attributesToPreserve = [
+                    "data-suggestion-",
+                    "data-comment-"
+                ];
+                const previewOutput = output.replace(/<img([^>]*class="Wirisformula"[^>]*)>/g, (match, attributes)=>{
+                    // Extract Track Changes attributes
+                    const trackChangesAttrs = [];
+                    attributesToPreserve.forEach((prefix)=>{
+                        const regex = new RegExp(`(${prefix}[^=]*="[^"]*")`, "g");
+                        let attrMatch;
+                        while((attrMatch = regex.exec(attributes)) !== null){
+                            trackChangesAttrs.push(attrMatch[1]);
+                        }
+                    });
+                    const spanAttrs = trackChangesAttrs.length > 0 ? ` ${trackChangesAttrs.join(" ")}` : "";
+                    return `<span${spanAttrs}>${match}</span>`;
+                });
+                // Cleans all the semantics tag for safexml
+                // including the handwritten data points
+                e.return = MathML.removeSafeXMLSemantics(previewOutput);
+                return;
+            }
+            // In save mode, convert formula images back to clean MathML
             const parsedResult = Parser.endParse(output);
-            // Cleans all the semantics tag for safexml
-            // including the handwritten data points
+            // Remove all semantic annotations (including handwritten data points)
+            // to ensure clean, standard MathML format for storage
             e.return = MathML.removeSafeXMLSemantics(parsedResult);
         }, {
             priority: "low"
@@ -818,6 +882,18 @@ class MathType extends Plugin {
             Latex
         };
     }
+    _addTrackChangesIntegration(integration) {
+        const { editor } = this;
+        if (editor.plugins.has("TrackChangesEditing")) {
+            const trackChangesEditing = editor.plugins.get("TrackChangesEditing");
+            // Makes MathType and ChemType buttons available when editor is in the track changes mode
+            trackChangesEditing.enableCommand("MathType");
+            trackChangesEditing.enableCommand("ChemType");
+            // Adds custom label replacing the default 'mathml'.
+            // Handles both singular and plural forms.
+            trackChangesEditing.descriptionFactory.registerElementLabel("mathml", (quantity)=>(quantity > 1 ? `${quantity} ` : "") + StringManager.get(quantity > 1 ? "formulas" : "formula", integration?.getLanguage() || "en"));
+        }
+    }
 }
 
 export { CKEditor5Integration, ChemTypeCommand, MathTypeCommand, MathType as default };