Fix/preview track changes improvements

packages/ckeditor5/dist/browser/index-editor.css

@@ -544,4 +544,19 @@
   color:#000;
   text-decoration:none;
   cursor:pointer;
-}
+}
+.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);
+      }

packages/ckeditor5/dist/browser/index.js

@@ -11331,6 +11331,14 @@ delete Array.prototype.__class__; // @codingStandardsIgnoreEnd
             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);
@@ -11486,6 +11494,49 @@ var packageInfo = {
 
 // CKEditor imports
 let currentInstance = null; // eslint-disable-line import/no-mutable-exports
+/**
+ * Extracts track changes attributes from Wirisformula images.
+ * @param {string} html - The HTML content
+ * @returns {Map} Map of MathML content to track changes attributes
+ */ function extractTrackChangesFromImages(html) {
+    const trackChanges = new Map();
+    const images = html.match(/<img[^>]*class="Wirisformula"[^>]*data-suggestion[^>]*>/g) || [];
+    for (const img of images){
+        const start = img.match(/data-(suggestion|comment)-start-before="([^"]*)"/);
+        const end = img.match(/data-(suggestion|comment)-end-after="([^"]*)"/);
+        const mathml = img.match(/data-mathml="([^"]*)"/);
+        if (start && end && mathml) {
+            trackChanges.set(MathML.safeXmlDecode(mathml[1]), {
+                group: start[1],
+                startName: start[2],
+                endName: end[2]
+            });
+        }
+    }
+    return trackChanges;
+}
+/**
+ * Wraps MathML formulas with suggestion/comment tags if they have track changes.
+ * @param {string} html - The HTML with MathML
+ * @param {Map} trackChanges - Map of MathML to track changes data
+ * @returns {string} HTML with wrapped MathML
+ */ function wrapMathMLWithSuggestionTags(html, trackChanges) {
+    let result = html;
+    if (trackChanges.size > 0) {
+        result = html.replaceAll(/<math[^>]*>[\s\S]*?<\/math>/g, (mathTag)=>{
+            let wrappedTag = mathTag;
+            for (const [mathml, attrs] of trackChanges){
+                if (mathTag.includes(mathml.slice(6, 50)) || mathml.includes(mathTag.slice(6, 50))) {
+                    trackChanges.delete(mathml);
+                    wrappedTag = `<${attrs.group}-start name="${attrs.startName}"></${attrs.group}-start>${mathTag}<${attrs.group}-end name="${attrs.endName}"></${attrs.group}-end>`;
+                    break;
+                }
+            }
+            return wrappedTag;
+        });
+    }
+    return result;
+}
 class MathType extends Plugin {
     static get requires() {
         return [
@@ -11822,7 +11873,7 @@ class MathType extends Plugin {
                 imgElement = htmlDataProcessor.toView(htmlContent).getChild(0);
             } else if (formula) {
                 const mathString = formula.replaceAll('ref="<"', 'ref="&lt;"');
-                const lang = integration.getLanguage() || 'en'; // Safe fallback to 'en' in case integration is undefined.
+                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
@@ -11884,30 +11935,39 @@ class MathType extends Plugin {
         // 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');
+        const previewCommand = editor.commands.get("previewFinalContent");
         if (previewCommand) {
-            this.listenTo(previewCommand, 'execute', ()=>{
+            this.listenTo(previewCommand, "execute", ()=>{
                 localStorage.setItem("isGeneratingPreview", true);
                 setTimeout(()=>{
                     localStorage.setItem("isGeneratingPreview", false);
                 }, 1000);
             }, {
-                priority: 'high'
+                priority: "high"
             });
         }
         /**
      * Hack to transform $$latex$$ into <math> in editor.getData()'s output.
+     * Also preserves track changes markers by wrapping MathML in suggestion tags.
      */ editor.data.on("get", (e)=>{
             // Skip conversion if we are generating the preview, we need the formula images.
             const isGeneratingPreview = localStorage.getItem("isGeneratingPreview");
             if (isGeneratingPreview === "true") {
                 return;
             }
             const output = e.return;
-            const parsedResult = Parser.endParse(output);
+            const isPreview = localStorage.getItem("isGeneratingPreview") === "true";
             // Cleans all the semantics tag for safexml
             // including the handwritten data points
-            e.return = MathML.removeSafeXMLSemantics(parsedResult);
+            // Preview mode: just filter out deletion images
+            if (isPreview) {
+                e.return = output.replace(/<img[^>]*data-suggestion-start-before="deletion:[^"]*"[^>]*>/g, "");
+                return;
+            }
+            // Normal mode: convert to MathML preserving track changes
+            const trackChangesData = extractTrackChangesFromImages(output);
+            const mathmlOutput = MathML.removeSafeXMLSemantics(Parser.endParse(output));
+            e.return = wrapMathMLWithSuggestionTags(mathmlOutput, trackChangesData);
         }, {
             priority: "low"
         });
@@ -11971,7 +12031,7 @@ class MathType extends Plugin {
             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()));
+            trackChangesEditing.descriptionFactory.registerElementLabel("mathml", (quantity)=>(quantity > 1 ? quantity + " " : "") + StringManager.get(quantity > 1 ? "formulas" : "formula", integration.getLanguage()));
         }
     }
 }

packages/ckeditor5/dist/browser/index.umd.js

@@ -11333,6 +11333,14 @@
               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);
@@ -11488,6 +11496,49 @@
 
   // CKEditor imports
   let currentInstance = null; // eslint-disable-line import/no-mutable-exports
+  /**
+   * Extracts track changes attributes from Wirisformula images.
+   * @param {string} html - The HTML content
+   * @returns {Map} Map of MathML content to track changes attributes
+   */ function extractTrackChangesFromImages(html) {
+      const trackChanges = new Map();
+      const images = html.match(/<img[^>]*class="Wirisformula"[^>]*data-suggestion[^>]*>/g) || [];
+      for (const img of images){
+          const start = img.match(/data-(suggestion|comment)-start-before="([^"]*)"/);
+          const end = img.match(/data-(suggestion|comment)-end-after="([^"]*)"/);
+          const mathml = img.match(/data-mathml="([^"]*)"/);
+          if (start && end && mathml) {
+              trackChanges.set(MathML.safeXmlDecode(mathml[1]), {
+                  group: start[1],
+                  startName: start[2],
+                  endName: end[2]
+              });
+          }
+      }
+      return trackChanges;
+  }
+  /**
+   * Wraps MathML formulas with suggestion/comment tags if they have track changes.
+   * @param {string} html - The HTML with MathML
+   * @param {Map} trackChanges - Map of MathML to track changes data
+   * @returns {string} HTML with wrapped MathML
+   */ function wrapMathMLWithSuggestionTags(html, trackChanges) {
+      let result = html;
+      if (trackChanges.size > 0) {
+          result = html.replaceAll(/<math[^>]*>[\s\S]*?<\/math>/g, (mathTag)=>{
+              let wrappedTag = mathTag;
+              for (const [mathml, attrs] of trackChanges){
+                  if (mathTag.includes(mathml.slice(6, 50)) || mathml.includes(mathTag.slice(6, 50))) {
+                      trackChanges.delete(mathml);
+                      wrappedTag = `<${attrs.group}-start name="${attrs.startName}"></${attrs.group}-start>${mathTag}<${attrs.group}-end name="${attrs.endName}"></${attrs.group}-end>`;
+                      break;
+                  }
+              }
+              return wrappedTag;
+          });
+      }
+      return result;
+  }
   class MathType extends ckeditor5.Plugin {
       static get requires() {
           return [
@@ -11824,7 +11875,7 @@
                   imgElement = htmlDataProcessor.toView(htmlContent).getChild(0);
               } else if (formula) {
                   const mathString = formula.replaceAll('ref="<"', 'ref="&lt;"');
-                  const lang = integration.getLanguage() || 'en'; // Safe fallback to 'en' in case integration is undefined.
+                  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
@@ -11886,30 +11937,39 @@
           // 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');
+          const previewCommand = editor.commands.get("previewFinalContent");
           if (previewCommand) {
-              this.listenTo(previewCommand, 'execute', ()=>{
+              this.listenTo(previewCommand, "execute", ()=>{
                   localStorage.setItem("isGeneratingPreview", true);
                   setTimeout(()=>{
                       localStorage.setItem("isGeneratingPreview", false);
                   }, 1000);
               }, {
-                  priority: 'high'
+                  priority: "high"
               });
           }
           /**
        * Hack to transform $$latex$$ into <math> in editor.getData()'s output.
+       * Also preserves track changes markers by wrapping MathML in suggestion tags.
        */ editor.data.on("get", (e)=>{
               // Skip conversion if we are generating the preview, we need the formula images.
               const isGeneratingPreview = localStorage.getItem("isGeneratingPreview");
               if (isGeneratingPreview === "true") {
                   return;
               }
               const output = e.return;
-              const parsedResult = Parser.endParse(output);
+              const isPreview = localStorage.getItem("isGeneratingPreview") === "true";
               // Cleans all the semantics tag for safexml
               // including the handwritten data points
-              e.return = MathML.removeSafeXMLSemantics(parsedResult);
+              // Preview mode: just filter out deletion images
+              if (isPreview) {
+                  e.return = output.replace(/<img[^>]*data-suggestion-start-before="deletion:[^"]*"[^>]*>/g, "");
+                  return;
+              }
+              // Normal mode: convert to MathML preserving track changes
+              const trackChangesData = extractTrackChangesFromImages(output);
+              const mathmlOutput = MathML.removeSafeXMLSemantics(Parser.endParse(output));
+              e.return = wrapMathMLWithSuggestionTags(mathmlOutput, trackChangesData);
           }, {
               priority: "low"
           });
@@ -11973,7 +12033,7 @@
               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()));
+              trackChangesEditing.descriptionFactory.registerElementLabel("mathml", (quantity)=>(quantity > 1 ? quantity + " " : "") + StringManager.get(quantity > 1 ? "formulas" : "formula", integration.getLanguage()));
           }
       }
   }

packages/ckeditor5/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);
+      }