@wiris/mathtype-ckeditor5 8.15.0 → 8.15.2

package/dist/browser/index.umd.js

@@ -4032,6 +4032,27 @@
                   if (mathML == null) {
                       mathML = imgObject.getAttribute("alt");
                   }
+                  // WARNING: This code is needed for CKEditor 5 Track Changes compatibility.
+                  // Preserve Track Changes attributes when converting image back to MathML.
+                  // This ensures change tracking information is maintained during the roundtrip conversion
+                  // (MathML → Image → MathML) in collaborative editing scenarios.
+                  const TRACK_CHANGES_ATTRIBUTE_PREFIXES = [
+                      "data-suggestion-",
+                      "data-comment-"
+                  ];
+                  const preservedAttributes = {};
+                  // Extract Track Changes attributes from the image element
+                  for (const { name: attributeName, value: attributeValue } of imgObject.attributes){
+                      const isTrackChangesAttribute = TRACK_CHANGES_ATTRIBUTE_PREFIXES.some((prefix)=>attributeName.startsWith(prefix));
+                      if (isTrackChangesAttribute) {
+                          preservedAttributes[attributeName] = attributeValue;
+                      }
+                  }
+                  // If Track Changes attributes were found, inject them into the MathML opening tag
+                  if (Object.keys(preservedAttributes).length > 0) {
+                      const attributesString = Object.keys(preservedAttributes).map((name)=>` ${name}="${Util.htmlEntities(preservedAttributes[name])}"`).join("");
+                      mathML = mathML.replace(/(<math)/i, `$1${attributesString}`);
+                  }
                   if (convertToSafeXml) {
                       const safeMathML = MathML.safeXmlEncode(mathML);
                       return safeMathML;
@@ -4778,6 +4799,29 @@
               mathmlSubstring = mathmlSubstring.substring(4, mathmlSubstring.length);
               imgObject.setAttribute(Configuration.get("imageCustomEditorName"), mathmlSubstring);
           }
+          // WARNING: This code is needed for CKEditor 5 Track Changes compatibility.
+          // Preserve Track Changes attributes (suggestions and comments) when converting MathML to image.
+          // These attributes are needed to maintain change tracking information in collaborative editing scenarios.
+          // They are extracted from the input MathML and transferred to the output image element.
+          const TRACK_CHANGES_ATTRIBUTE_PREFIXES = [
+              "data-suggestion-",
+              "data-comment-"
+          ];
+          const attributePattern = /([\w-]+)="([^"]*)"/g;
+          let attributeMatch;
+          // Parse only the opening <math> tag to extract attributes
+          const mathOpeningTagEnd = mathml.indexOf(">");
+          if (mathOpeningTagEnd !== -1) {
+              const mathOpeningTag = mathml.substring(0, mathOpeningTagEnd);
+              while((attributeMatch = attributePattern.exec(mathOpeningTag)) !== null){
+                  const [, attributeName, attributeValue] = attributeMatch;
+                  // Transfer Track Changes attributes from MathML to image
+                  const isTrackChangesAttribute = TRACK_CHANGES_ATTRIBUTE_PREFIXES.some((prefix)=>attributeName.startsWith(prefix));
+                  if (isTrackChangesAttribute) {
+                      imgObject.setAttribute(attributeName, Util.htmlEntitiesDecode(attributeValue));
+                  }
+              }
+          }
           // Performance enabled.
           if (Configuration.get("wirisPluginPerformance") && (Configuration.get("saveMode") === "xml" || Configuration.get("saveMode") === "safeXml")) {
               let result = JSON.parse(Parser.createShowImageSrc(data, language));
@@ -11253,49 +11297,68 @@
      * @param {String} mathml MathML to update old one or insert
      * @returns {module:engine/model/element~Element} The model element corresponding to the inserted image
      */ insertMathml(mathml) {
-          // This returns the value returned by the callback function (writer => {...})
           return this.editorObject.model.change((writer)=>{
-              const core = this.getCore();
+              const { isNewElement, temporalImage } = this.getCore().editionProperties;
               const selection = this.editorObject.model.document.selection;
+              const attributes = Object.fromEntries(selection.getAttributes());
               const modelElementNew = writer.createElement("mathml", {
                   formula: mathml,
-                  ...Object.fromEntries(selection.getAttributes())
+                  ...attributes
               });
-              // Obtain the DOM <span><img ... /></span> object corresponding to the formula
-              if (core.editionProperties.isNewElement) {
-                  // Don't bother inserting anything at all if the MathML is empty.
-                  if (!mathml) return;
-                  const viewSelection = this.core.editionProperties.selection || this.editorObject.editing.view.document.selection;
-                  const modelPosition = this.editorObject.editing.mapper.toModelPosition(viewSelection.getLastPosition());
-                  this.editorObject.model.insertObject(modelElementNew, modelPosition);
-                  // Remove selection
-                  if (!viewSelection.isCollapsed) {
-                      for (const range of viewSelection.getRanges()){
-                          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
-                  const position = this.editorObject.model.createPositionAfter(modelElementNew);
-                  writer.setSelection(position);
-              } else {
-                  const img = core.editionProperties.temporalImage;
-                  const viewElement = this.editorObject.editing.view.domConverter.domToView(img).parent;
-                  const modelElementOld = this.editorObject.editing.mapper.toModelElement(viewElement);
-                  // Insert the new <mathml> and remove the old one
-                  const position = this.editorObject.model.createPositionBefore(modelElementOld);
-                  // If the given MathML is empty, don't insert a new formula.
-                  if (mathml) {
-                      this.editorObject.model.insertObject(modelElementNew, position);
-                  }
-                  this.editorObject.model.deleteContent(this.editorObject.model.createSelection(modelElementOld, 'on'));
+              if (isNewElement) {
+                  return this.insertNewFormula(writer, mathml, modelElementNew);
               }
-              // eslint-disable-next-line consistent-return
-              return modelElementNew;
+              return this.replaceExistingFormula(mathml, modelElementNew, temporalImage);
           });
       }
       /**
+     * Inserts a new formula at the current selection position.
+     */ insertNewFormula(writer, mathml, modelElement) {
+          if (!mathml) {
+              return;
+          }
+          const viewSelection = this.core.editionProperties.selection || this.editorObject.editing.view.document.selection;
+          const modelPosition = this.editorObject.editing.mapper.toModelPosition(viewSelection.getLastPosition());
+          this.editorObject.model.insertObject(modelElement, modelPosition);
+          this.deleteViewSelection(viewSelection);
+          // Set carret after the formula.
+          const position = this.editorObject.model.createPositionAfter(modelElement);
+          writer.setSelection(position);
+          return modelElement;
+      }
+      deleteViewSelection(viewSelection) {
+          if (viewSelection.isCollapsed) {
+              return;
+          }
+          for (const range of viewSelection.getRanges()){
+              const modelRange = this.editorObject.editing.mapper.toModelRange(range);
+              const modelSelection = this.editorObject.model.createSelection(modelRange);
+              this.editorObject.model.deleteContent(modelSelection);
+          }
+      }
+      /**
+     * Replaces an existing formula with updated MathML.
+     */ replaceExistingFormula(mathml, modelElement, temporalImage) {
+          const viewNode = this.editorObject.editing.view.domConverter.domToView(temporalImage);
+          // Check if image exists in view to do standard formula editing
+          if (viewNode?.parent) {
+              const modelElementOld = this.editorObject.editing.mapper.toModelElement(viewNode.parent);
+              // Insert the new <mathml> and remove the old one
+              const position = this.editorObject.model.createPositionBefore(modelElementOld);
+              if (mathml) {
+                  this.editorObject.model.insertObject(modelElement, position);
+              }
+              this.editorObject.model.deleteContent(this.editorObject.model.createSelection(modelElementOld, "on"));
+              return modelElement;
+          }
+          // Otherwise it's LaTeX editing, so we insert at current selection
+          if (!mathml) {
+              return;
+          }
+          this.editorObject.model.insertContent(modelElement);
+          return modelElement;
+      }
+      /**
      * Finds the text node corresponding to given DOM text element.
      * @param {element} viewElement Element to find corresponding text node of.
      * @returns {module:engine/model/text~Text|undefined} Text node corresponding to the given element or undefined if it doesn't exist.
@@ -11322,73 +11385,26 @@
               }
           }
       }
-      /** @inheritdoc */ insertFormula(focusElement, windowTarget, mathml, wirisProperties) {
+      /** @inheritdoc */ insertFormula(_focusElement, windowTarget, mathml, _wirisProperties) {
           // eslint-disable-line no-unused-vars
           const returnObject = {};
           let mathmlOrigin;
           if (!mathml) {
               this.insertMathml("");
           } else if (this.core.editMode === "latex") {
-              returnObject.latex = Latex.getLatexFromMathML(mathml);
-              returnObject.node = windowTarget.document.createTextNode(`$$${returnObject.latex}$$`);
-              this.editorObject.model.change((writer)=>{
-                  const { latexRange } = this.core.editionProperties;
-                  const startNode = this.findText(latexRange.startContainer);
-                  const endNode = this.findText(latexRange.endContainer);
-                  let startPosition = writer.createPositionAt(startNode.parent, startNode.startOffset + latexRange.startOffset);
-                  let endPosition = writer.createPositionAt(endNode.parent, endNode.startOffset + latexRange.endOffset);
-                  let range = writer.createRange(startPosition, endPosition);
-                  // When Latex is next to image/formula.
-                  if (latexRange.startContainer.nodeType === 3 && latexRange.startContainer.previousSibling?.nodeType === 1) {
-                      // Get the position of the latex to be replaced.
-                      const latexEdited = `$$${Latex.getLatexFromMathML(MathML.safeXmlDecode(this.core.editionProperties.temporalImage.dataset.mathml))}$$`;
-                      let data = latexRange.startContainer.data;
-                      // Remove invisible characters.
-                      data = data.replaceAll(String.fromCharCode(8288), "");
-                      // Get to the start of the latex we are editing.
-                      const offset = data.indexOf(latexEdited);
-                      const dataOffset = data.substring(offset);
-                      const second$ = dataOffset.substring(2).indexOf("$$") + 4;
-                      const substring = dataOffset.substr(0, second$);
-                      data = data.replace(substring, "");
-                      if (!data) {
-                          startPosition = writer.createPositionBefore(startNode);
-                          range = startNode;
-                      } else {
-                          startPosition = startPosition = writer.createPositionAt(startNode.parent, startNode.startOffset + offset);
-                          endPosition = writer.createPositionAt(endNode.parent, endNode.startOffset + second$ + offset);
-                          range = writer.createRange(startPosition, endPosition);
-                      }
-                  }
-                  const modelSelection = this.editorObject.model.createSelection(range);
-                  this.editorObject.model.deleteContent(modelSelection);
-                  writer.insertText(`$$${returnObject.latex}$$`, startNode.getAttributes(), startPosition);
-              });
+              this.handleLatexInsertion(returnObject, windowTarget, mathml);
           } else {
-              mathmlOrigin = this.core.editionProperties.temporalImage?.dataset.mathml;
-              try {
-                  returnObject.node = this.editorObject.editing.view.domConverter.viewToDom(this.editorObject.editing.mapper.toViewElement(this.insertMathml(mathml)), windowTarget.document);
-              } catch (e) {
-                  const x = e.toString();
-                  if (x.includes("CKEditorError: Cannot read property 'parent' of undefined")) {
-                      this.core.modalDialog.cancelAction();
-                  }
-              }
+              mathmlOrigin = this.handleMathmlInsertion(returnObject, windowTarget, mathml);
           }
-          // Build the telemeter payload separated to delete null/undefined entries.
           const payload = {
-              mathml_origin: mathmlOrigin ? MathML.safeXmlDecode(mathmlOrigin) : mathmlOrigin,
-              mathml: mathml ? MathML.safeXmlDecode(mathml) : mathml,
+              mathml: mathml ? MathML.safeXmlDecode(mathml) : undefined,
               elapsed_time: Date.now() - this.core.editionProperties.editionStartTime,
-              editor_origin: null,
               toolbar: this.core.modalDialog.contentManager.toolbar,
               size: mathml?.length
           };
-          // Remove desired null keys.
-          Object.keys(payload).forEach((key)=>{
-              if (key === "mathml_origin" || key === "editor_origin") !payload[key] ? delete payload[key] : {};
-          });
-          // Call Telemetry service to track the event.
+          if (mathmlOrigin) {
+              payload.mathml_origin = MathML.safeXmlDecode(mathmlOrigin);
+          }
           try {
               Telemeter.telemeter.track("INSERTED_FORMULA", {
                   ...payload
@@ -11396,15 +11412,312 @@
           } catch (error) {
               console.error("Error tracking INSERTED_FORMULA", error);
           }
-          /* Due to PLUGINS-1329, we add the onChange event to the CK4 insertFormula.
-          We probably should add it here as well, but we should look further into how */ // this.editorObject.fire('change');
-          // Remove temporal image of inserted formula
           this.core.editionProperties.temporalImage = null;
           return returnObject;
       }
+      handleLatexInsertion(returnObject, windowTarget, mathml) {
+          returnObject.latex = Latex.getLatexFromMathML(mathml);
+          returnObject.node = windowTarget.document.createTextNode(`$$${returnObject.latex}$$`);
+          const { latexRange } = this.core.editionProperties;
+          // When latexRange exists (meaning the whole LaTeX was selected or the editor was opened),
+          // find the node contaning the LaTeX and replace it fully.
+          if (latexRange) {
+              const startNode = this.findText(latexRange.startContainer);
+              const endNode = this.findText(latexRange.endContainer);
+              // If nodes found, use standard replacement.
+              if (startNode && endNode) {
+                  this.replaceLatexWithNodes(startNode, endNode, latexRange, returnObject.latex);
+                  return;
+              }
+          }
+          this.replaceLatexUsingModelSearch(returnObject.latex);
+      }
+      handleMathmlInsertion(returnObject, windowTarget, mathml) {
+          const mathmlOrigin = this.core.editionProperties.temporalImage?.dataset.mathml;
+          try {
+              const modelElement = this.insertMathml(mathml);
+              const viewElement = this.editorObject.editing.mapper.toViewElement(modelElement);
+              returnObject.node = this.editorObject.editing.view.domConverter.viewToDom(viewElement, windowTarget.document);
+          } catch (error) {
+              if (error.toString().includes("Cannot read property 'parent' of undefined")) {
+                  this.core.modalDialog.cancelAction();
+              }
+          }
+          return mathmlOrigin;
+      }
       /**
-     * Function called when the content submits an action.
-     */ notifyWindowClosed() {
+     * Gets selection attributes excluding track changes tags.
+     */ getCleanSelectionAttributes() {
+          const attributes = {};
+          for (const [key, value] of this.editorObject.model.document.selection.getAttributes()){
+              if (!key.startsWith("suggestion:") && !key.startsWith("comment:")) {
+                  attributes[key] = value;
+              }
+          }
+          return attributes;
+      }
+      /**
+     * Searches for the original LaTeX in the model and replaces it.
+     * Fallback when findText() cannot locate DOM nodes (like when there are track changes modifications).
+     */ replaceLatexUsingModelSearch(newLatex) {
+          const foundRange = this.findLatexBlockNearSelection();
+          if (foundRange) {
+              this.editorObject.model.change((writer)=>writer.setSelection(foundRange));
+              this.replaceRangeWithLatex(newLatex);
+          } else {
+              // Insert at current position as a last resort.
+              this.editorObject.model.change((writer)=>{
+                  const newLatexText = writer.createText(`$$${newLatex}$$`, this.getCleanSelectionAttributes());
+                  this.editorObject.model.insertContent(newLatexText);
+              });
+          }
+          this.core.editionProperties.extractedLatex = null;
+      }
+      /**
+     * Checks if a text proxy has a track changes deletion marker.
+     */ isDeletedText(text) {
+          for (const [key, value] of text.getAttributes()){
+              if (key.startsWith("suggestion:") && value === "deletion") {
+                  return true;
+              }
+          }
+          return false;
+      }
+      /**
+     * Finds a LaTeX block ($$...$$) near the current selection.
+     * Handles track changes by considering the "accepted" version of text.
+     */ findLatexBlockNearSelection() {
+          const position = this.editorObject.model.document.selection.getFirstPosition();
+          if (!position?.parent) {
+              return;
+          }
+          // Build LaTeX with track changes accepted suggestions, if any.
+          const { textParts, acceptedText } = this.collectTextParts(position.parent);
+          if (!acceptedText.includes("$$")) {
+              return;
+          }
+          // To handle multiple LaTeX on same line.
+          const targetLatex = this.core.editionProperties.extractedLatex;
+          const fullLatex = `$$${targetLatex}$$`;
+          const startIndex = acceptedText.indexOf(fullLatex);
+          if (startIndex === -1) {
+              return;
+          }
+          const latexBoundaries = {
+              start: startIndex,
+              end: startIndex + fullLatex.length
+          };
+          return this.convertAcceptedOffsetsToModelRange(textParts, latexBoundaries);
+      }
+      /**
+     * Collects all text fragments from a paragraph, tracking both model and accepted text positions.
+     * This is necessary to handle track changes where some LaTeX may have suggestions.
+     */ collectTextParts(paragraph) {
+          const textParts = [];
+          let acceptedTextOffset = 0;
+          let acceptedText = "";
+          for (const item of this.editorObject.model.createRangeIn(paragraph).getItems()){
+              if (item.is("$textProxy")) {
+                  const isDeleted = this.isDeletedText(item);
+                  textParts.push({
+                      text: item.data,
+                      startOffset: item.startOffset,
+                      endOffset: item.startOffset + item.data.length,
+                      parent: item.textNode.parent,
+                      acceptedStart: isDeleted ? null : acceptedTextOffset,
+                      acceptedEnd: isDeleted ? null : acceptedTextOffset + item.data.length,
+                      isDeleted
+                  });
+                  if (!isDeleted) {
+                      acceptedText += item.data;
+                      acceptedTextOffset += item.data.length;
+                  }
+              }
+          }
+          return {
+              textParts,
+              acceptedText
+          };
+      }
+      /**
+     * Converts LaTeX with track changes accepted suggestions to a CKEditor model Range.
+     */ convertAcceptedOffsetsToModelRange(textParts, latexBoundaries) {
+          let startPartIndex = -1, endPartIndex = -1;
+          let startOffsetInPart = 0, endOffsetInPart = 0;
+          // Find which text parts contain the LaTeX block boundaries
+          for(let i = 0; i < textParts.length; i++){
+              const part = textParts[i];
+              if (part.isDeleted) continue;
+              if (startPartIndex === -1 && latexBoundaries.start >= part.acceptedStart && latexBoundaries.start <= part.acceptedEnd) {
+                  startPartIndex = i;
+                  startOffsetInPart = latexBoundaries.start - part.acceptedStart;
+              }
+              if (latexBoundaries.end >= part.acceptedStart && latexBoundaries.end <= part.acceptedEnd) {
+                  endPartIndex = i;
+                  endOffsetInPart = latexBoundaries.end - part.acceptedStart;
+              }
+          }
+          if (startPartIndex === -1 || endPartIndex === -1) {
+              return;
+          }
+          // Extend range to include any consecutive deleted parts after the block.
+          let finalEndIndex = endPartIndex;
+          let finalEndOffset = endOffsetInPart;
+          for(let i = endPartIndex + 1; i < textParts.length && textParts[i].isDeleted; i++){
+              finalEndIndex = i;
+              finalEndOffset = textParts[i].text.length;
+          }
+          const startPart = textParts[startPartIndex];
+          const endPart = textParts[finalEndIndex];
+          return this.editorObject.model.createRange(this.editorObject.model.createPositionAt(startPart.parent, startPart.startOffset + startOffsetInPart), this.editorObject.model.createPositionAt(endPart.parent, endPart.startOffset + finalEndOffset));
+      }
+      replaceRangeWithLatex(newLatex) {
+          this.editorObject.model.change((writer)=>{
+              this.editorObject.model.deleteContent(this.editorObject.model.document.selection);
+              const newLatexText = writer.createText(`$$${newLatex}$$`, this.getCleanSelectionAttributes());
+              this.editorObject.model.insertContent(newLatexText);
+          });
+      }
+      /**
+     * Replaces the whole LaTeX in the CKEditor5 model.
+     */ replaceLatexWithNodes(startNode, endNode, latexRange, newLatex) {
+          this.editorObject.model.change((writer)=>{
+              const startOffset = startNode.startOffset + latexRange.startOffset;
+              const endOffset = endNode.startOffset + latexRange.endOffset;
+              let startPosition = writer.createPositionAt(startNode.parent, startOffset);
+              let endPosition = writer.createPositionAt(endNode.parent, endOffset);
+              // Adjust positions when LaTeX is adjacent to a formula.
+              const startContainer = latexRange.startContainer;
+              if (startContainer.nodeType === Node.TEXT_NODE && startContainer.previousSibling?.nodeType === Node.ELEMENT_NODE) {
+                  const originalLatex = `$$${Latex.getLatexFromMathML(MathML.safeXmlDecode(this.core.editionProperties.temporalImage.dataset.mathml))}$$`;
+                  const textData = startContainer.data.replaceAll(String.fromCodePoint(8288), "");
+                  const latexOffset = textData.indexOf(originalLatex);
+                  if (latexOffset !== -1) {
+                      const closingDelimiterOffset = textData.substring(latexOffset + 2).indexOf("$$") + 4;
+                      startPosition = writer.createPositionAt(startNode.parent, startNode.startOffset + latexOffset);
+                      endPosition = writer.createPositionAt(endNode.parent, endNode.startOffset + closingDelimiterOffset + latexOffset);
+                  }
+              }
+              writer.setSelection(writer.createRange(startPosition, endPosition));
+          });
+          this.replaceRangeWithLatex(newLatex);
+      }
+      /**
+     * Inherited method from IntegrationModel.
+     * Gets the MathML from a text node containing LaTeX.
+     * Handles track changes by simulating "accept all changes" before conversion.
+     */ getMathmlFromTextNode(textNode, caretPosition) {
+          const standardResult = Latex.getLatexFromTextNode(textNode, caretPosition);
+          const acceptedLatex = this.extractAcceptedLatexFromDOM(textNode, caretPosition);
+          // Prioritize accepted LaTeX if it differs from standard extraction (for track changes compatibility).
+          // Important node: use explicit undefined check to allow empty LaTeX strings, otherwise it would not detect $$$$ as valid LaTeX.
+          const latex = acceptedLatex !== undefined && acceptedLatex !== standardResult?.latex ? acceptedLatex : standardResult?.latex;
+          // Do not continue if no LaTeX found by either method.
+          // This is necessary since both parameters can be independently undefined in some edge cases.
+          if (latex === undefined && acceptedLatex === undefined) {
+              return;
+          }
+          // Verify caret is inside LaTeX block for track changes edge cases.
+          if (!standardResult && acceptedLatex !== undefined && !this.isCaretInsideLatexBlock(textNode, caretPosition)) {
+              return;
+          }
+          const finalLatex = latex === undefined ? acceptedLatex : latex;
+          this.storeLatexRangeWithFallback(textNode, caretPosition, finalLatex);
+          return Latex.getMathMLFromLatex(finalLatex);
+      }
+      isCaretInsideLatexBlock(textNode, caretPosition = 0) {
+          // If LaTeX is found, the caret is inside one.
+          return this.extractAcceptedLatexFromDOM(textNode, caretPosition) !== undefined;
+      }
+      /**
+     * Stores the LaTeX range for its replacement later.
+     */ storeLatexRangeWithFallback(textNode, caretPosition, latex) {
+          const parentTag = textNode.parentElement?.tagName?.toLowerCase();
+          if (!textNode.parentElement || parentTag === "textarea") {
+              return;
+          }
+          const latexResult = Latex.getLatexFromTextNode(textNode, caretPosition);
+          if (latexResult) {
+              const range = document.createRange();
+              range.setStart(latexResult.startNode, latexResult.startPosition);
+              range.setEnd(latexResult.endNode, latexResult.endPosition);
+              this.core.editionProperties.latexRange = range;
+          } else {
+              this.core.editionProperties.latexRange = null;
+          }
+          this.core.editionProperties.extractedLatex = latex;
+      }
+      /**
+     * Finds a container element containing a complete LaTeX block.
+     * Necessary for track changes handling, to find the full LaTeX even with the suggestions.
+     */ findLatexContainerElement(textNode) {
+          const MAX_DEPTH = 10; // Prevent excessive loops.
+          let element = textNode.parentElement;
+          for(let i = 0; i < MAX_DEPTH && element; i++){
+              const text = element.textContent || "";
+              const openDelim = text.indexOf("$$");
+              if (openDelim !== -1 && text.includes("$$", openDelim + 2)) {
+                  return element;
+              }
+              element = element.parentElement;
+          }
+          return null;
+      }
+      /**
+     * Extracts LaTeX from DOM, skipping track changes deletion markers.
+     */ extractAcceptedLatexFromDOM(textNode, caretPositionInNode = 0) {
+          const container = this.findLatexContainerElement(textNode);
+          if (!container) {
+              return;
+          }
+          const acceptedText = this.getAcceptedTextContent(container);
+          // Calculate caret offset that will be used later to find the correct LaTeX block.
+          // This includes all accepted text before textNode, plus the caret position within textNode.
+          const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
+          let node = walker.nextNode();
+          let caretOffset = 0;
+          while(node && node !== textNode){
+              if (!node.parentElement?.classList?.contains("ck-suggestion-marker-deletion")) {
+                  caretOffset += node.textContent?.length || 0;
+              }
+              node = walker.nextNode();
+          }
+          // Add the caret position within the text node, only if textNode is not deleted by Track Changes.
+          if (node === textNode && !textNode.parentElement?.classList?.contains("ck-suggestion-marker-deletion")) {
+              caretOffset += caretPositionInNode;
+          }
+          // Find the LaTeX block that contains the caret.
+          let nextSearchIndex = 0;
+          while(nextSearchIndex < acceptedText.length){
+              const openDelim = acceptedText.indexOf("$$", nextSearchIndex);
+              if (openDelim === -1) {
+                  break;
+              }
+              const closeDelim = acceptedText.indexOf("$$", openDelim + 2);
+              if (closeDelim === -1) {
+                  break;
+              }
+              if (caretOffset >= openDelim && caretOffset <= closeDelim + 2) {
+                  return acceptedText.substring(openDelim + 2, closeDelim);
+              }
+              nextSearchIndex = closeDelim + 2;
+          }
+      }
+      /**
+     * Recursively extracts text content, skipping track changes tags.
+     */ getAcceptedTextContent(node) {
+          if (node.nodeType === Node.TEXT_NODE) {
+              return node.textContent || "";
+          }
+          if (node.nodeType === Node.ELEMENT_NODE) {
+              if (node.classList?.contains("ck-suggestion-marker-deletion")) {
+                  return "";
+              }
+              return Array.from(node.childNodes).map((child)=>this.getAcceptedTextContent(child)).join("");
+          }
+          return "";
+      }
+      /** Called when the modal window is closed. */ notifyWindowClosed() {
           this.editorObject.editing.view.focus();
       }
   }
@@ -11482,7 +11795,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 version = "8.15.0";
+  var version = "8.15.2";
   var packageInfo = {
   	version: version};
 
@@ -11824,7 +12137,8 @@
                   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);
@@ -11882,13 +12196,65 @@
           editor.editing.mapper.on("viewToModelPosition", ckeditor5.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;
-              const parsedResult = Parser.endParse(output);
-              // Cleans all the semantics tag for safexml
-              // including the handwritten data points
+              // 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;
+              }
+              // Clean track changes markers only from LaTeX content before converting to MathML.
+              const latexParsedOutput = this._endParseEditModeWithTrackChangesSupport(output);
+              // Convert formula images to MathML. It's important to use the save mode to prevent issues.
+              const parsedResult = Parser.endParseSaveMode(latexParsedOutput);
+              // Remove all semantic annotations (including handwritten data points)
+              // to ensure clean, standard MathML format for storage
               e.return = MathML.removeSafeXMLSemantics(parsedResult);
           }, {
               priority: "low"
@@ -11928,6 +12294,38 @@
           });
       }
       /**
+     * When track changes markers are present inside a LaTeX block:
+     * - The LaTeX is preserved as text (not converted to MathML) to maintain suggestions.
+     * - It also prevents the issue where the suggestions were placed as MathML tags.
+     *
+     * When no track changes markers are inside a LaTeX block:
+     * - The LaTeX is converted to MathML normally. (previous default behavior)
+     *
+     * This is to ensure that:
+     * 1. LaTeX without suggestions gets converted to MathML for final output.
+     * 2. LaTeX with pending suggestions is preserved so setData(getData()) works correctly.
+     */ _endParseEditModeWithTrackChangesSupport(code) {
+          if (!Configuration.get("parseModes").includes("latex")) {
+              return code;
+          }
+          const latexBlockRegex = /\$\$([\s\S]*?)\$\$/g;
+          const trackChangesRegex = /<(suggestion|comment)-(start|end)/i;
+          //TODO: Validate if replace all is needed instead of just replace when it is all implemented.
+          return code.replace(latexBlockRegex, (fullMatch, latexContent)=>{
+              // Check if this LaTeX contains track changes markers to prevent conversion.
+              if (trackChangesRegex.test(latexContent)) {
+                  return fullMatch;
+              }
+              // When LaTeX has no suggestion, it can be converted to MathML.
+              const decodedLatex = Util.htmlEntitiesDecode(latexContent);
+              let mathml = Util.htmlSanitize(Latex.getMathMLFromLatex(decodedLatex, true));
+              if (!Configuration.get("saveHandTraces")) {
+                  mathml = MathML.removeAnnotation(mathml, "application/json");
+              }
+              return mathml;
+          });
+      }
+      /**
      * Expose the WirisPlugin variable to the window
      */ // eslint-disable-next-line class-methods-use-this
       _exposeWiris() {
@@ -11953,9 +12351,22 @@
               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() || "en"));
+              this._registerLatexTrackChangesAdapter(integration);
           }
       }
+      /**
+     * Register a custom adapter for handling LaTeX text changes.
+     * This ensures that LaTeX formulas ($$...$$) are treated as atomic units
+     * when used by the track changes feature and avoid partial edits.
+     */ _registerLatexTrackChangesAdapter(integration) {
+          const { editor } = this;
+          editor.model.document.on("change:data", ()=>{
+              if (integration) {
+                  integration._trackChangesEnabled = editor.commands.get("trackChanges")?.value ?? false;
+              }
+          });
+      }
   }
 
   exports.CKEditor5Integration = CKEditor5Integration;