@wiris/mathtype-ckeditor5 8.15.0 → 8.15.2

package/src/plugin.js

@@ -23,6 +23,7 @@ import CKEditor5Integration from "./integration.js";
 
 import mathIcon from "../theme/icons/ckeditor5-formula.svg";
 import chemIcon from "../theme/icons/ckeditor5-chem.svg";
+import "../theme/styles.css";
 
 import packageInfo from "../package.json";
 
@@ -431,7 +432,9 @@ export default class MathType extends Plugin {
       } 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
@@ -507,17 +510,82 @@ export default class MathType extends Plugin {
     // 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" },
@@ -564,6 +632,45 @@ export default class MathType extends Plugin {
     );
   }
 
+  /**
+   * 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
    */
@@ -597,9 +704,28 @@ export default class MathType extends Plugin {
       // Handles both singular and plural forms.
       trackChangesEditing.descriptionFactory.registerElementLabel(
         "mathml",
-        quantity => (quantity > 1 ? quantity + ' ' : '') +
-          StringManager.get(quantity > 1 ? "formulas" : "formula", integration.getLanguage()),
+        (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;
+      }
+    });
+  }
 }

package/theme/styles.css

@@ -0,0 +1,28 @@
+/* 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-suggestion-marker-insertion {
+    & .Wirisformula {
+      border: 3px solid var(--ck-color-suggestion-marker-insertion-border);
+    }
+
+    &.ck-suggestion-marker--active {
+      & .Wirisformula {
+        border: 3px solid var(--ck-color-suggestion-marker-insertion-border-active);
+      }
+    }
+  }
+
+  &.ck-suggestion-marker-deletion {
+    & .Wirisformula {
+      border: 3px solid var(--ck-color-suggestion-marker-deletion-border);
+    }
+
+    &.ck-suggestion-marker--active {
+      & .Wirisformula {
+        border: 3px solid var(--ck-color-suggestion-marker-deletion-border-active);
+      }
+    }
+  }
+}