@wiris/mathtype-viewer 1.0.1 → 1.2.0

package/dist/app.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=app.d.ts.map

package/dist/app.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../src/app.ts"],"names":[],"mappings":""}

package/dist/latex.d.ts

@@ -0,0 +1,3 @@
+import { Properties } from './properties';
+export declare function renderLatex(properties: Properties, root: HTMLElement): Promise<void>;
+//# sourceMappingURL=latex.d.ts.map

package/dist/latex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"latex.d.ts","sourceRoot":"","sources":["../src/latex.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAY1C,wBAAsB,WAAW,CAAC,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,iBAW1E"}

package/dist/mathml.d.ts

@@ -0,0 +1,3 @@
+import { Properties } from "./properties";
+export declare function renderMathML(properties: Properties, root: HTMLElement): Promise<void>;
+//# sourceMappingURL=mathml.d.ts.map

package/dist/mathml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mathml.d.ts","sourceRoot":"","sources":["../src/mathml.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAmB1C,wBAAsB,YAAY,CAAC,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,CA8B3F"}

package/dist/properties.d.ts

@@ -0,0 +1,41 @@
+declare type Viewer = 'none' | 'image' | 'mathml' | 'latex';
+declare type Wirispluginperformance = 'true' | 'false';
+export declare type Config = {
+    editorServicesRoot?: string;
+    editorServicesExtension?: string;
+    backendConfig?: {
+        wirispluginperformance?: Wirispluginperformance;
+        wiriseditormathmlattribute?: string;
+    };
+    dpi?: number;
+    element?: string;
+    lang?: string;
+    viewer?: Viewer;
+    zoom?: number;
+};
+export declare class Properties {
+    render: () => Promise<void>;
+    config: Config;
+    private new;
+    static generate(): Promise<Properties>;
+    get editorServicesRoot(): string;
+    set editorServicesRoot(editorServicesRoot: string);
+    get editorServicesExtension(): string;
+    set editorServicesExtension(editorServicesExtension: string);
+    get lang(): string;
+    set lang(lang: string);
+    get viewer(): Viewer;
+    set viewer(viewer: Viewer);
+    get dpi(): number;
+    set dpi(dpi: number);
+    get zoom(): number;
+    set zoom(zoom: number);
+    get element(): string;
+    set element(element: string);
+    get wirispluginperformance(): Wirispluginperformance;
+    set wirispluginperformance(wirispluginperformance: Wirispluginperformance);
+    get wiriseditormathmlattribute(): string;
+    set wiriseditormathmlattribute(wiriseditormathmlattribute: string);
+}
+export {};
+//# sourceMappingURL=properties.d.ts.map

package/dist/properties.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"properties.d.ts","sourceRoot":"","sources":["../src/properties.ts"],"names":[],"mappings":"AAGA,aAAK,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACpD,aAAK,sBAAsB,GAAG,MAAM,GAAG,OAAO,CAAC;AAK/C,oBAAY,MAAM,GAAG;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,aAAa,CAAC,EAAE;QACd,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;QAChD,0BAA0B,CAAC,EAAE,MAAM,CAAC;KACrC,CAAC;IACF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAsBF,qBAAa,UAAU;IAErB,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAkB;IAG7C,MAAM,EAAE,MAAM,CAAiB;IAM/B,OAAO,CAAC,GAAG;WAKE,QAAQ,IAAI,OAAO,CAAC,UAAU,CAAC;IAmD5C,IAAI,kBAAkB,IAAI,MAAM,CAG/B;IAED,IAAI,kBAAkB,CAAC,kBAAkB,EAAE,MAAM,EAGhD;IAED,IAAI,uBAAuB,IAAI,MAAM,CAGpC;IAED,IAAI,uBAAuB,CAAC,uBAAuB,EAAE,MAAM,EAG1D;IAWD,IAAI,IAAI,IAAI,MAAM,CAMjB;IAED,IAAI,IAAI,CAAC,IAAI,EAAE,MAAM,EAGpB;IAQD,IAAI,MAAM,IAAI,MAAM,CAGnB;IAED,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,EAGxB;IAQD,IAAI,GAAG,IAAI,MAAM,CAGhB;IAED,IAAI,GAAG,CAAC,GAAG,EAAE,MAAM,EAGlB;IAQD,IAAI,IAAI,IAAI,MAAM,CAGjB;IAED,IAAI,IAAI,CAAC,IAAI,EAAE,MAAM,EAGpB;IAQD,IAAI,OAAO,IAAI,MAAM,CAGpB;IAED,IAAI,OAAO,CAAC,OAAO,EAAE,MAAM,EAG1B;IAQD,IAAI,sBAAsB,IAAI,sBAAsB,CAGnD;IAED,IAAI,sBAAsB,CAAC,sBAAsB,EAAE,sBAAsB,EAGxE;IAQD,IAAI,0BAA0B,IAAI,MAAM,CAGvC;IAED,IAAI,0BAA0B,CAAC,0BAA0B,EAAE,MAAM,EAGhE;CACF"}

package/dist/retro.d.ts

@@ -0,0 +1,3 @@
+import { Properties } from "./properties";
+export declare function bypassEncapsulation(properties: Properties, w: Window): void;
+//# sourceMappingURL=retro.d.ts.map

package/dist/retro.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"retro.d.ts","sourceRoot":"","sources":["../src/retro.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAQ1C,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,UAAU,EAAE,CAAC,EAAE,MAAM,QAmBpE"}

package/dist/services.d.ts

@@ -0,0 +1,16 @@
+declare enum MethodType {
+    Post = "POST",
+    Get = "GET"
+}
+export declare class StatusError extends Error {
+    constructor(message: any);
+}
+export declare function processJsonResponse(response: Promise<Response>): Promise<any>;
+export declare function callService(query: object, serviceName: string, method: MethodType, serverURL: string, extension: string): Promise<any>;
+export declare function mathml2accessible(mml: string, lang: string, url: string, extension: string): Promise<any>;
+export declare function showImage(mml: string, lang: string, url: string, extension: string): Promise<any>;
+export declare function createImage(mml: string, lang: string, url: string, extension: string): Promise<any>;
+export declare function latexToMathml(latex: string, url: string, extension: string): Promise<any>;
+export declare function configurationJson(variablekeys: string[], url: string, extension: string): Promise<any>;
+export {};
+//# sourceMappingURL=services.d.ts.map

package/dist/services.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"services.d.ts","sourceRoot":"","sources":["../src/services.ts"],"names":[],"mappings":"AAEA,aAAK,UAAU;IACb,IAAI,SAAS;IACb,GAAG,QAAQ;CACZ;AAKD,qBAAa,WAAY,SAAQ,KAAK;gBACxB,OAAO,KAAA;CAIpB;AAUD,wBAAsB,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,CAanF;AAUD,wBAAsB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAI,OAAO,CAAC,GAAG,CAAC,CAyB7I;AAUD,wBAAsB,iBAAiB,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAI,OAAO,CAAC,GAAG,CAAC,CAahH;AAUD,wBAAsB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAyBvG;AAUD,wBAAsB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAUzG;AASD,wBAAsB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAQ/F;AAQD,wBAAsB,iBAAiB,CAAC,YAAY,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAI,OAAO,CAAC,GAAG,CAAC,CAO7G"}

package/dist/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function htmlEntitiesToXmlEntities(text: string): string;
+export declare const corruptMathML: string[];
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAoBA,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAoB9D;AAID,eAAO,MAAM,aAAa,UAAqG,CAAC"}

package/docs/spec.md

@@ -116,3 +116,76 @@ The following table contains a specification of each of the properties.
 | lang                       | The language for the alt text.                                                                                                                                                                                                                                                                                                            | Frontend |                                                  | en                                      |
 | dpi                        | Resolution in dots per inch of the generated image. This feature scales the formula with a factor of dpi/96.                                                                                                                                                                                                                              | Frontend | Positive integer                                 | 96                                      |
 | zoom                       | The scale of the generated image.                                                                                                                                                                                                                                                                                                         | Frontend | Positive floating point number                   | 1                                       |
+
+
+## API
+
+The viewer exposes an API to the global window object with utilities related to rendering formulas.
+This API is obsolete and will eventually be removed or replaced by a newer API.
+
+All of the following methods are exposed inside of `window.com.wiris.js.JsPluginViewer` whenever the script is included in the page.
+
+- `parseSafeMathMLElement`.
+  Render all the formulas written in SafeMathML inside the given element.
+
+  This method is deprecated.
+  There is currently no replacement for rendering SafeMathML formulas.
+  Please consider using {@link renderLatex} or {@link renderMathML}.
+
+  Parameters:
+  - {`HTMLElement`} `element` - Element wherein to render SafeMathML formulas.
+  - `asynchronously` - Currently ignored, only included for retrocompatibility purposes.
+  - `callbackFunc` - Currently ignored, only included for retrocompatibility purposes.
+
+  Return: `void`.
+
+- `parseDocument`.
+  Render all the formulas in the document.
+
+  This method is deprecated.
+  Please consider using `renderMathML`.
+
+  Parameters:
+  - `asynchronously` - Currently ignored, only included for retrocompatibility purposes.
+  - `callbackFunc` - Currently ignored, only included for retrocompatibility purposes.
+  - `safeXml` - Currently ignored, only included for retrocompatibility purposes.
+
+  Return: `Promise<void>`.
+
+- `parseElement`.
+  Render all the formulas inside the given element.
+
+  This method is deprecated.
+  Please consider using `renderMathML`.
+
+  Parameters:
+  - {`HTMLElement`} `element` - Element wherein to render formulas.
+  - `asynchronously` - Currently ignored, only included for retrocompatibility purposes.
+  - `callbackFunc` - Currently ignored, only included for retrocompatibility purposes.
+
+  Return: `Promise<void>`.
+
+- `parseLatexDocument`.
+  Convert all the LaTeX formulas in the document to MathML.t
+
+  This method is deprecated.
+  Please consider using `renderLatex`.
+
+  Parameters:
+  - `asynchronously` - Currently ignored, only included for retrocompatibility purposes.
+  - `callbackFunc` - Currently ignored, only included for retrocompatibility purposes.
+
+  Return: `Promise<void>`.
+
+- `parseLatexElement`.
+  Convert all the LaTeX formulas inside the given element to MathML.
+
+  This method is deprecated.
+  Please consider using `renderLatex`.
+
+  Parameters:
+  - {`HTMLElement`} `element` - Element wherein to convert formulas.
+  - `asynchronously` - Currently ignored, only included for retrocompatibility purposes.
+  - `callbackFunc` - Currently ignored, only included for retrocompatibility purposes.
+
+  Return: `Promise<void>`.

package/index.html

@@ -7,7 +7,7 @@
   <script src="dist/WIRISplugins.js?viewer=image" defer></script>
   <script>
     window.document.addEventListener('viewerLoaded', () => {
-      // window.viewer.Properties can be modified here
+      // window.viewer.properties can be modified here
       // Changes are reflected live
     });
   </script>

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@wiris/mathtype-viewer",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "",
   "main": "app.js",
   "scripts": {
     "build": "webpack",
     "serve": "webpack serve",
-    "prepack": "npm install && npm run build"
+    "prepack": "yarn && npm run build"
   },
   "keywords": [
     "typescript",
@@ -15,7 +15,7 @@
   "author": "Integrations",
   "license": "ISC",
   "dependencies": {
-    "@wiris/mathtype-html-integration-devkit": "1.12.2"
+    "@wiris/mathtype-html-integration-devkit": "1.14.0"
   },
   "devDependencies": {
     "babel-loader": "^9.1.2",

package/project.json

@@ -0,0 +1,29 @@
+{
+  "name": "viewer",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/viewer/src",
+  "targets": {
+    "build": {
+      "executor": "nx:run-script",
+      "options": {
+        "script": "build",
+        "outputPath": "packages/viewer/dist"
+      },
+      "outputs": [
+        "{options.outputPath}"
+      ]
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "options": {
+        "eslintConfig": "./.eslintrc.js",
+        "lintFilePatterns": [
+          "demos/html/viewer/**/*.{ts,tsx,js,jsx}"
+        ]
+      },
+      "outputs": [
+        "{options.outputFile}"
+      ]
+    }
+  }
+}

package/src/app.ts

@@ -1,6 +1,7 @@
 import { Properties } from './properties';
 import { renderLatex } from './latex';
 import { renderMathML } from './mathml';
+import { bypassEncapsulation } from './retro';
 
 // This should be the only code executed outside of a function
 // and the only code containing browser globals (e.g. window)
@@ -12,9 +13,12 @@ main(window);
  * @param {Window} w - The window instance of the browser.
  */
 async function main(w: Window): Promise<void> {
+
+  const properties: Properties = await Properties.generate();
+
   // Expose the globals to the browser
   (w as any).viewer = {
-    Properties,
+    properties,
   };
 
   const document = w.document;
@@ -25,11 +29,11 @@ async function main(w: Window): Promise<void> {
    * @param {Document} document - The DOM document in which to search for the rendering root.
    * @param {MutationObserver} observer - Mutation observer to activate or reactivate every time the rendering root changes.
    */
-  Properties.render = async () => {
-    const element: HTMLElement = document.querySelector(Properties.element);
+  properties.render = async () => {
+    const element: HTMLElement = document.querySelector(properties.element);
     if (element) {
-      await renderLatex(element);
-      await renderMathML(element);
+      await renderLatex(properties, element);
+      await renderMathML(properties, element);
     }
   };
 
@@ -37,25 +41,26 @@ async function main(w: Window): Promise<void> {
   // Renders formulas and sets observer
   const start = async () => {
     // First render
-    Properties.render();
+    properties.render();
 
     // Callback called every time there is a mutation in the watched DOM element
-    new MutationObserver(async (mutationList, observer) => {
-      for (const mutation of mutationList) {
-        for (const node of mutation.addedNodes) {
-          if (node instanceof HTMLElement) {
-            await Properties.render();
-          }
-        }
-      }
-    })
-    // We need to watch over the whole document, in case the Properties.element is inserted
-    // e.g. we set Properties.element = '#renderArea' and then we append <div id="renderArea">$$2+2=4$$</div> to the document
-    .observe(document, {
-      attributes: true, // In case an attribute is changed in a <math> node, for instance
-      childList: true, // In case a new <math> or $$latex$$ node is added, for instance
-      subtree: true, // In case a <math> node is added as a descendant of the observed element, for instance
-    });
+    // Feature temporarily disabled due to KB-37834
+    // new MutationObserver(async (mutationList, observer) => {
+    //   for (const mutation of mutationList) {
+    //     for (const node of mutation.addedNodes) {
+    //       if (node instanceof HTMLElement) {
+    //         await properties.render();
+    //       }
+    //     }
+    //   }
+    // })
+    // // We need to watch over the whole document, in case the Properties.element is inserted
+    // // e.g. we set Properties.element = '#renderArea' and then we append <div id="renderArea">$$2+2=4$$</div> to the document
+    // .observe(document, {
+    //   attributes: true, // In case an attribute is changed in a <math> node, for instance
+    //   childList: true, // In case a new <math> or $$latex$$ node is added, for instance
+    //   subtree: true, // In case a <math> node is added as a descendant of the observed element, for instance
+    // });
   };
 
   // https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event#checking_whether_loading_is_already_complete
@@ -67,7 +72,9 @@ async function main(w: Window): Promise<void> {
     start();
   }
 
+  // Expose the old Viewer API as a global
+  bypassEncapsulation(properties, w);
+
   // Dispatch an event notifying that the viewer has been loaded
   document.dispatchEvent(new Event('viewerLoaded'));
-
 }

package/src/latex.ts

@@ -8,26 +8,28 @@ interface LatexPosition {
 
 /**
  * Parse the DOM looking for LaTeX nodes and replaces them with the corresponding rendered images.
+ * @param {Properties} properties - Properties of the viewer.
  * @param {HTMLElement} root - Any DOM element that can contain MathML.
  */
-export async function renderLatex(root: HTMLElement) {
+export async function renderLatex(properties: Properties, root: HTMLElement) {
 
-  if (Properties.viewer !== 'image') {
+  if (properties.viewer !== 'image' && properties.viewer !== 'latex') {
     return;
   }
 
   const latexNodes = findLatexTextNodes(root);
 
   for (const latexNode of latexNodes) {
-    await replaceLatexInTextNode(latexNode);
+    await replaceLatexInTextNode(properties, latexNode);
   }
 }
 
 /**
  * Replace LaTeX instances with MathML inside a given node.
+ * @param {Properties} properties - Properties of the viewer.
  * @param {Node} node - Text node in which to search and replace LaTeX instances.
  */
-async function replaceLatexInTextNode(node: Node) {
+async function replaceLatexInTextNode(properties: Properties, node: Node) {
   const textContent: string = node.textContent || '';
   let pos: number = 0;
 
@@ -44,7 +46,7 @@ async function replaceLatexInTextNode(node: Node) {
       // Get LaTeX text.
       const latex = textContent.substring(nextLatexPosition.start + '$$'.length, nextLatexPosition.end);
       // Convert LaTeX to mathml.
-      const response = await latexToMathml(latex, Properties.editorServicesRoot, Properties.editorServicesExtension);
+      const response = await latexToMathml(latex, properties.editorServicesRoot, properties.editorServicesExtension);
       // Insert mathml node.
       const fragment = document.createRange().createContextualFragment(response.text);
 
@@ -95,7 +97,7 @@ function findLatexTextNodes(root: any): Node[] {
  * @
  */
 function getNextLatexPos(pos: number, text: string): LatexPosition {
-	const firstLatexTags = text.indexOf('$$', pos);
-	const secondLatexTags = firstLatexTags == -1 ? -1 : text.indexOf('$$', firstLatexTags + '$$'.length);
-	return firstLatexTags != -1 && secondLatexTags != -1 ? {'start': firstLatexTags, 'end': secondLatexTags} : null;
+  const firstLatexTags = text.indexOf('$$', pos);
+  const secondLatexTags = firstLatexTags == -1 ? -1 : text.indexOf('$$', firstLatexTags + '$$'.length);
+  return firstLatexTags != -1 && secondLatexTags != -1 ? {'start': firstLatexTags, 'end': secondLatexTags} : null;
 }

package/src/mathml.ts

@@ -1,5 +1,6 @@
 import { Properties } from "./properties";
 import { showImage, createImage, mathml2accessible, processJsonResponse } from './services';
+import { htmlEntitiesToXmlEntities, corruptMathML } from './utils';
 
 /**
  * Data obtained when rendering image. Data needed to set the formula image parameters.
@@ -13,25 +14,26 @@ interface FormulaData {
 
 /**
  * Parse the DOM looking for <math> elements and replace them with the corresponding rendered images within the given element.
+ * @param {Properties} properties - Properties of the viewer.
  * @param {HTMLElement} root - Any DOM element that can contain MathML.
  */
-export async function renderMathML(root: HTMLElement): Promise<void> {
+export async function renderMathML(properties: Properties, root: HTMLElement): Promise<void> {
 
-  if (Properties.viewer !== 'image') {
+  if (properties.viewer !== 'image' && properties.viewer !== 'mathml') {
     return;
   }
 
   for(const mathElement of [...root.getElementsByTagName('math')]) {
-    const mml = mathElement.outerHTML;
+    const mml = htmlEntitiesToXmlEntities(mathElement.outerHTML);
 
     let result;
 
-    if (Properties.wirispluginperformance === 'true') {
+    if (properties.wirispluginperformance === 'true') {
       // Transform mml to img.
-      result = await showImage(mml, Properties.lang, Properties.editorServicesRoot, Properties.editorServicesExtension);
+      result = await showImage(mml, properties.lang, properties.editorServicesRoot, properties.editorServicesExtension);
     } else {
       // createimage returns the URL to showimage of the corresponding image
-      let url = await createImage(mml, Properties.lang, Properties.editorServicesRoot, Properties.editorServicesExtension);
+      let url = await createImage(mml, properties.lang, properties.editorServicesRoot, properties.editorServicesExtension);
       // This line is necessary due to a bug in how the services interoperate.
       // TODO fix the causing bug
       url = url.replace('pluginsapp', 'plugins/app');
@@ -39,7 +41,7 @@ export async function renderMathML(root: HTMLElement): Promise<void> {
     }
 
     // Set img properties.
-    const img = await setImageProperties(result, mml, Properties.wiriseditormathmlattribute);
+    const img = await setImageProperties(properties, result, mml);
     // const fragment = document.createRange().createContextualFragment(data.result.content);
 
     // Replace the MathML for the generated formula image.
@@ -49,12 +51,12 @@ export async function renderMathML(root: HTMLElement): Promise<void> {
 
 /**
  * Returns an image formula containing all MathType properties.
+ * @param {Properties} properties - Properties of the viewer.
  * @param {FormulaData} data - Object containing image values.
  * @param {string} mml - The MathML of the formula image beeing created.
- * @param {string} wiriseditormathmlattribute - The name of the HTML attribute to store the MathML in.
  * @returns {Promise<HTMLImageElement>} - Formula image.
  */
-async function setImageProperties(data: FormulaData, mml: string, wiriseditormathmlattribute: string): Promise<HTMLImageElement> {
+async function setImageProperties(properties: Properties, data: FormulaData, mml: string): Promise<HTMLImageElement> {
 
   // Create imag element.
   let img = document.createElement('img');
@@ -63,7 +65,7 @@ async function setImageProperties(data: FormulaData, mml: string, wiriseditormat
   img.src = `data:image/svg+xml;charset=utf8,${encodeURIComponent(data.content)}`;
 
   // Set other image properties.
-  img.setAttribute(wiriseditormathmlattribute, mml);
+  img.setAttribute(properties.wiriseditormathmlattribute, mml);
   img.setAttribute('class', 'Wirisformula');
   img.setAttribute('role', 'math');
 
@@ -74,9 +76,11 @@ async function setImageProperties(data: FormulaData, mml: string, wiriseditormat
     img.width = +data.width;
   }
 
-  // Set the alt text.
-  const { text } = await mathml2accessible(mml, Properties.lang, Properties.editorServicesRoot, Properties.editorServicesExtension);
-  img.alt = text;
+  // Set the alt text whenever there's a translation for the characters and MathML on the mml.
+  if (!corruptMathML.some(corruptMathML => mml.includes(corruptMathML))) {
+    const { text } = await mathml2accessible(mml, properties.lang, properties.editorServicesRoot, properties.editorServicesExtension);
+    img.alt = text;
+  }
 
   return img;