@wiris/mathtype-ckeditor5 8.14.0 → 8.15.1

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";
 
@@ -43,7 +44,10 @@ export default class MathType extends Plugin {
     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);
@@ -428,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
@@ -504,17 +510,79 @@ 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;
+
+        // 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" },
@@ -579,4 +647,25 @@ export default 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"),
+      );
+    }
+  }
 }

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