fix: Preview track changes

Author: carla-at-wiris

packages/ckeditor5/dist/browser/index.js

@@ -11822,7 +11822,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);
@@ -11880,11 +11881,30 @@ 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.
      */ editor.data.on("get", (e)=>{
             const output = e.return;
             const parsedResult = Parser.endParse(output);
+            // Skip conversion if we are generating the preview, we need the formula images.
+            const retrievedObject = localStorage.getItem("isGeneratingPreview");
+            if (retrievedObject === "true") {
+                return;
+            }
             // Cleans all the semantics tag for safexml
             // including the handwritten data points
             e.return = MathML.removeSafeXMLSemantics(parsedResult);

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

@@ -11824,7 +11824,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,11 +11883,30 @@
           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.
        */ editor.data.on("get", (e)=>{
               const output = e.return;
               const parsedResult = Parser.endParse(output);
+              // Skip conversion if we are generating the preview, we need the formula images.
+              const retrievedObject = localStorage.getItem("isGeneratingPreview");
+              if (retrievedObject === "true") {
+                  return;
+              }
               // Cleans all the semantics tag for safexml
               // including the handwritten data points
               e.return = MathML.removeSafeXMLSemantics(parsedResult);

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

@@ -430,8 +430,9 @@ export default 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 imgHtml = Parser.initParse(mathString, lang);
 
-        const imgHtml = Parser.initParse(mathString, integration.getLanguage());
         imgElement = htmlDataProcessor.toView(imgHtml).getChild(0);
 
         // Add HTML element (<img>) to model
@@ -507,6 +508,22 @@ 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.
      */
@@ -516,6 +533,13 @@ export default class MathType extends Plugin {
         const output = e.return;
         const parsedResult = Parser.endParse(output);
 
+        // Skip conversion if we are generating the preview, we need the formula images.
+        const retrievedObject = localStorage.getItem("isGeneratingPreview");
+
+        if (retrievedObject === "true") {
+          return;
+      }
+
         // Cleans all the semantics tag for safexml
         // including the handwritten data points
         e.return = MathML.removeSafeXMLSemantics(parsedResult);