@wiris/mathtype-viewer 1.5.0 → 8.9.2

package/src/properties.ts

@@ -1,51 +1,50 @@
-import { configurationJson, StatusError } from './services';
-import Util from '@wiris/mathtype-html-integration-devkit/src/util';
+import { configurationJson, StatusError } from "./services";
+import Util from "@wiris/mathtype-html-integration-devkit/src/util";
 
 // Helper types for Config below
-type Viewer = 'none' | 'image' | 'mathml' | 'latex';
-type Wirispluginperformance = 'true' | 'false';
+type Viewer = "none" | "image" | "mathml" | "latex";
+type Wirispluginperformance = "true" | "false";
 
 /**
  * Type representing all the configuration for the viewer.
  */
 export type Config = {
-  editorServicesRoot?: string,
-  editorServicesExtension?: string,
+  editorServicesRoot?: string;
+  editorServicesExtension?: string;
   backendConfig?: {
-    wirispluginperformance?: Wirispluginperformance,
-    wiriseditormathmlattribute?: string,
-    wiriscustomheaders?: object,
-  },
-  dpi?: number,
-  element?: string,
-  lang?: string,
-  viewer?: Viewer,
-  zoom?: number,
+    wirispluginperformance?: Wirispluginperformance;
+    wiriseditormathmlattribute?: string;
+    wiriscustomheaders?: object;
+  };
+  dpi?: number;
+  element?: string;
+  lang?: string;
+  viewer?: Viewer;
+  zoom?: number;
 };
 
 /**
  * Fallback values for the configurations that are not set.
  */
 const defaultValues: Config = {
-  editorServicesRoot: 'https://www.wiris.net/demo/plugins/app/',
-  editorServicesExtension: '',
+  editorServicesRoot: "https://www.wiris.net/demo/plugins/app/",
+  editorServicesExtension: "",
   backendConfig: {
-    wirispluginperformance: 'true',
-    wiriseditormathmlattribute: 'data-mathml',
+    wirispluginperformance: "true",
+    wiriseditormathmlattribute: "data-mathml",
     wiriscustomheaders: {},
   },
   dpi: 96,
-  element: 'body',
-  lang: 'en',
-  viewer: 'none',
+  element: "body",
+  lang: "en",
+  viewer: "none",
   zoom: 1,
-}
+};
 
 /**
  * This class will handle the parameters defined by the user.
  */
 export class Properties {
-
   private static instance: Properties | null = null;
 
   render: () => Promise<void> = async () => {};
@@ -72,7 +71,7 @@ export class Properties {
    */
   private async initialize(): Promise<void> {
     // Get URL parameters from <script>
-    const pluginName = 'WIRISplugins.js';
+    const pluginName = "WIRISplugins.js";
     const script: HTMLScriptElement = document.querySelector(`script[src*="${pluginName}"]`);
 
     if (!!script) {
@@ -80,20 +79,20 @@ export class Properties {
       const params: string = script.src.substring(pluginNamePosition + pluginName.length);
       const urlParams = new URLSearchParams(params);
 
-      if (urlParams.get('dpi') !== null && urlParams.get('dpi') !== undefined) {
-        Properties.instance.config.dpi = +urlParams.get('dpi');
+      if (urlParams.get("dpi") !== null && urlParams.get("dpi") !== undefined) {
+        Properties.instance.config.dpi = +urlParams.get("dpi");
       }
-      if (urlParams.get('element') !== null && urlParams.get('element') !== undefined) {
-        Properties.instance.config.element = urlParams.get('element');
+      if (urlParams.get("element") !== null && urlParams.get("element") !== undefined) {
+        Properties.instance.config.element = urlParams.get("element");
       }
-      if (urlParams.get('lang') !== null && urlParams.get('lang') !== undefined) {
-        Properties.instance.config.lang = urlParams.get('lang');
+      if (urlParams.get("lang") !== null && urlParams.get("lang") !== undefined) {
+        Properties.instance.config.lang = urlParams.get("lang");
       }
-      if (urlParams.get('viewer') !== null && urlParams.get('viewer') !== undefined) {
-        Properties.instance.config.viewer = (urlParams.get('viewer') as Viewer);
+      if (urlParams.get("viewer") !== null && urlParams.get("viewer") !== undefined) {
+        Properties.instance.config.viewer = urlParams.get("viewer") as Viewer;
       }
-      if (urlParams.get('zoom') !== null && urlParams.get('zoom') !== undefined) {
-        Properties.instance.config.zoom = +urlParams.get('zoom');
+      if (urlParams.get("zoom") !== null && urlParams.get("zoom") !== undefined) {
+        Properties.instance.config.zoom = +urlParams.get("zoom");
       }
     }
 
@@ -102,14 +101,16 @@ export class Properties {
     // Get backend parameters calling the configurationjson service
     try {
       Properties.instance.config.backendConfig = await configurationJson(
-        ['wirispluginperformance', 'wiriseditormathmlattribute', 'wiriscustomheaders'],
+        ["wirispluginperformance", "wiriseditormathmlattribute", "wiriscustomheaders"],
         Properties.instance.editorServicesRoot,
-        Properties.instance.editorServicesExtension
+        Properties.instance.editorServicesExtension,
       );
 
-      // We'll always get a string from the wiriscustomheaders backend parameter. It needs to be converted to an object. 
-      Properties.instance.config.backendConfig.wiriscustomheaders = Util.convertStringToObject(Properties.instance.config.backendConfig.wiriscustomheaders);
-    } catch(e) {
+      // We'll always get a string from the wiriscustomheaders backend parameter. It needs to be converted to an object.
+      Properties.instance.config.backendConfig.wiriscustomheaders = Util.convertStringToObject(
+        Properties.instance.config.backendConfig.wiriscustomheaders,
+      );
+    } catch (e) {
       if (e instanceof StatusError) {
         // Do nothing; leave default values.
         console.error(e);
@@ -124,22 +125,21 @@ export class Properties {
    * @deprecated This will be removed once the viewer uncouple from the integration services.
    */
   private checkServices(): void {
-    const path = ((document.currentScript as HTMLScriptElement).src);
+    const path = (document.currentScript as HTMLScriptElement).src;
 
-    if (path.includes('pluginwiris_engine')) {
+    if (path.includes("pluginwiris_engine")) {
       // If the path includes pluginwiris_engine use Java Integrations Services
       this.config.editorServicesRoot = path;
-      this.config.editorServicesExtension = '';
-    } else if (path.includes('integration/WIRISplugins')) {
+      this.config.editorServicesExtension = "";
+    } else if (path.includes("integration/WIRISplugins")) {
       // If the path includes 'integration/WIRISplugins' use PHP Integrations Services
       this.config.editorServicesRoot = path;
-      this.config.editorServicesExtension = '.php';
+      this.config.editorServicesExtension = ".php";
     }
   }
 
   get editorServicesRoot(): string {
-    return this.config.editorServicesRoot ||
-      defaultValues.editorServicesRoot;
+    return this.config.editorServicesRoot || defaultValues.editorServicesRoot;
   }
 
   set editorServicesRoot(editorServicesRoot: string) {
@@ -148,8 +148,7 @@ export class Properties {
   }
 
   get editorServicesExtension(): string {
-    return this.config.editorServicesExtension ||
-      defaultValues.editorServicesExtension;
+    return this.config.editorServicesExtension || defaultValues.editorServicesExtension;
   }
 
   set editorServicesExtension(editorServicesExtension: string) {
@@ -167,11 +166,8 @@ export class Properties {
    * @returns {string} Encoded language string.
    */
   get lang(): string {
-    const configLang = (this.config.lang === 'inherit') ? null : this.config.lang;
-    return configLang ||
-      document.getElementsByTagName('html')[0].lang ||
-      navigator.language ||
-      defaultValues.lang;
+    const configLang = this.config.lang === "inherit" ? null : this.config.lang;
+    return configLang || document.getElementsByTagName("html")[0].lang || navigator.language || defaultValues.lang;
   }
 
   set lang(lang: string) {
@@ -186,8 +182,7 @@ export class Properties {
    * - none, by default.
    */
   get viewer(): Viewer {
-    return this.config.viewer ||
-      defaultValues.viewer;
+    return this.config.viewer || defaultValues.viewer;
   }
 
   set viewer(viewer: Viewer) {
@@ -202,8 +197,7 @@ export class Properties {
    * - 96, by default.
    */
   get dpi(): number {
-    return this.config.dpi ||
-      defaultValues.dpi;
+    return this.config.dpi || defaultValues.dpi;
   }
 
   set dpi(dpi: number) {
@@ -218,8 +212,7 @@ export class Properties {
    * - 1, by default.
    */
   get zoom(): number {
-    return this.config.zoom ||
-      defaultValues.zoom;
+    return this.config.zoom || defaultValues.zoom;
   }
 
   set zoom(zoom: number) {
@@ -234,8 +227,7 @@ export class Properties {
    * - 'body', by default.
    */
   get element(): string {
-    return this.config.element ||
-      defaultValues.element;
+    return this.config.element || defaultValues.element;
   }
 
   set element(element: string) {
@@ -250,8 +242,7 @@ export class Properties {
    * - true, by default.
    */
   get wirispluginperformance(): Wirispluginperformance {
-    return this.config.backendConfig.wirispluginperformance ||
-      defaultValues.backendConfig.wirispluginperformance;
+    return this.config.backendConfig.wirispluginperformance || defaultValues.backendConfig.wirispluginperformance;
   }
 
   set wirispluginperformance(wirispluginperformance: Wirispluginperformance) {
@@ -266,8 +257,9 @@ export class Properties {
    * - data-mathml, by default.
    */
   get wiriseditormathmlattribute(): string {
-    return this.config.backendConfig.wiriseditormathmlattribute ||
-      defaultValues.backendConfig.wiriseditormathmlattribute;
+    return (
+      this.config.backendConfig.wiriseditormathmlattribute || defaultValues.backendConfig.wiriseditormathmlattribute
+    );
   }
 
   set wiriseditormathmlattribute(wiriseditormathmlattribute: string) {

package/src/retro.ts

@@ -11,19 +11,19 @@ import { Properties } from "./properties";
 export function bypassEncapsulation(properties: Properties, w: Window) {
   const wany = w as any;
 
-  if (typeof wany.com === 'undefined') {
+  if (typeof wany.com === "undefined") {
     wany.com = {};
   }
 
-  if (typeof wany.com.wiris === 'undefined') {
+  if (typeof wany.com.wiris === "undefined") {
     wany.com.wiris = {};
   }
 
-  if (typeof wany.com.wiris.js === 'undefined') {
+  if (typeof wany.com.wiris.js === "undefined") {
     wany.com.wiris.js = {};
   }
 
-  if (typeof wany.com.wiris.js.JsPluginViewer === 'undefined') {
+  if (typeof wany.com.wiris.js.JsPluginViewer === "undefined") {
     wany.com.wiris.js.JsPluginViewer = JsPluginViewer.getInstance();
     JsPluginViewer.properties = properties;
   }
@@ -122,7 +122,6 @@ class JsPluginViewer {
     var doubleQuoteEntity = safeXMLCharactersEntities.doubleQuote;
     var realDoubleQuoteEntity = safeXMLCharactersEntities.realDoubleQuote;
 
-
     // Important to not change function parameter.
     var inputCopy = input.slice();
 
@@ -148,25 +147,26 @@ class JsPluginViewer {
 
     // We are replacing $ by & when its part of an entity for retrocompatibility.
     // Now, the standard is replace § by &.
-    var returnValue = '';
+    var returnValue = "";
     var currentEntity = null;
 
     var i = 0;
     while (i < inputCopy.length) {
       var character = inputCopy.charAt(i);
       if (currentEntity == null) {
-        if (character == '$') {
-          currentEntity = '';
+        if (character == "$") {
+          currentEntity = "";
         } else {
           returnValue += character;
         }
-      } else if (character == ';') {
-        returnValue += '&' + currentEntity;
+      } else if (character == ";") {
+        returnValue += "&" + currentEntity;
         currentEntity = null;
-      } else if (character.match(/([a-zA-Z0-9#._-] | '-')/)) { // Character is part of an entity.
+      } else if (character.match(/([a-zA-Z0-9#._-] | '-')/)) {
+        // Character is part of an entity.
         currentEntity += character;
       } else {
-        returnValue += '$' + 'currentEntity'; // Is not an entity.
+        returnValue += "$" + "currentEntity"; // Is not an entity.
         currentEntity = null;
         i -= 1; // Parse again the current character.
       }
@@ -191,66 +191,65 @@ class JsPluginViewer {
 
   private static getMathMLPositionsAtNode(node: Node, mathmlPositions) {
     var safeXMLCharacters = JsCharacters.getSafeXMLCharacters();
-    if(node.nodeType == 3) {
+    if (node.nodeType == 3) {
       var startMathmlTag = safeXMLCharacters.tagOpener + "math";
       var endMathmlTag = safeXMLCharacters.tagOpener + "/math" + safeXMLCharacters.tagCloser;
       var start = node.textContent.indexOf(startMathmlTag);
       var end = 0;
-      while(start != -1) {
-        end = node.textContent.indexOf(endMathmlTag,start + startMathmlTag.length);
+      while (start != -1) {
+        end = node.textContent.indexOf(endMathmlTag, start + startMathmlTag.length);
 
-        if(end == -1) break;
+        if (end == -1) break;
 
-        var nextMathML = node.textContent.indexOf(startMathmlTag,end + endMathmlTag.length);
+        var nextMathML = node.textContent.indexOf(startMathmlTag, end + endMathmlTag.length);
 
-        if(nextMathML >= 0 && end > nextMathML) break;
+        if (nextMathML >= 0 && end > nextMathML) break;
 
-        var safeMathml = node.textContent.substring(start,end + endMathmlTag.length);
+        var safeMathml = node.textContent.substring(start, end + endMathmlTag.length);
 
-        node.textContent = node.textContent.substring(0,start) + node.textContent.substring(end + endMathmlTag.length);
+        node.textContent = node.textContent.substring(0, start) + node.textContent.substring(end + endMathmlTag.length);
         node = (node as Text).splitText(start);
         start = node.textContent.indexOf(startMathmlTag);
 
         mathmlPositions.push({
           safeMML: safeMathml,
-          nextElement: node
+          nextElement: node,
         });
       }
     }
   }
-
 }
 
 class JsCharacters {
   static getSafeXMLCharactersEntities(): any {
     return {
-      tagOpener: '&laquo;',
-      tagCloser: '&raquo;',
-      doubleQuote: '&uml;',
-      realDoubleQuote: '&quot;',
+      tagOpener: "&laquo;",
+      tagCloser: "&raquo;",
+      doubleQuote: "&uml;",
+      realDoubleQuote: "&quot;",
     };
   }
 
   static getXMLCharacters(): any {
     return {
-      id: 'xmlCharacters',
-      tagOpener: '<', // Hex: \x3C.
-      tagCloser: '>', // Hex: \x3E.
+      id: "xmlCharacters",
+      tagOpener: "<", // Hex: \x3C.
+      tagCloser: ">", // Hex: \x3E.
       doubleQuote: '"', // Hex: \x22.
-      ampersand: '&', // Hex: \x26.
-      quote: '\'', // Hex: \x27.
+      ampersand: "&", // Hex: \x26.
+      quote: "'", // Hex: \x27.
     };
   }
 
   static getSafeXMLCharacters(): any {
     return {
-      id: 'safeXmlCharacters',
-      tagOpener: '«', // Hex: \xAB.
-      tagCloser: '»', // Hex: \xBB.
-      doubleQuote: '¨', // Hex: \xA8.
-      ampersand: '§', // Hex: \xA7.
-      quote: '`', // Hex: \x60.
-      realDoubleQuote: '¨',
+      id: "safeXmlCharacters",
+      tagOpener: "«", // Hex: \xAB.
+      tagCloser: "»", // Hex: \xBB.
+      doubleQuote: "¨", // Hex: \xA8.
+      ampersand: "§", // Hex: \xA7.
+      quote: "`", // Hex: \x60.
+      realDoubleQuote: "¨",
     };
   }
 }

package/src/services.ts

@@ -1,5 +1,5 @@
-import Parser from '@wiris/mathtype-html-integration-devkit/src/parser';
-import { Properties } from './properties';
+import Parser from "@wiris/mathtype-html-integration-devkit/src/parser";
+import { Properties } from "./properties";
 
 enum MethodType {
   Post = "POST",
@@ -28,12 +28,12 @@ export async function processJsonResponse(response: Promise<Response>): Promise<
   try {
     const { status, result } = await (await response).json();
 
-    if (status !== 'ok') {
-      throw new StatusError('Service responded with a non-ok status');
+    if (status !== "ok") {
+      throw new StatusError("Service responded with a non-ok status");
     }
 
     return result;
-  } catch(e) {
+  } catch (e) {
     // TODO manage network and status non-ok errors
     throw e;
   }
@@ -47,19 +47,25 @@ export async function processJsonResponse(response: Promise<Response>): Promise<
  * @param {string} extension - Extension to add to the end of the serviceName (including the dot if necessary).
  * @returns {Promise<Response>} The request response.
  */
-export async function callService(query: object, serviceName: string, method: MethodType, serverURL: string, extension: string) : Promise<any> {
+export async function callService(
+  query: object,
+  serviceName: string,
+  method: MethodType,
+  serverURL: string,
+  extension: string,
+): Promise<any> {
   try {
     const url = new URL(serviceName + extension, serverURL);
 
     const properties = Properties.getInstance();
     const headers = {
-      'Content-type': 'application/x-www-form-urlencoded; charset=utf-8',
-      ...properties.config.backendConfig.wiriscustomheaders
-    }
+      "Content-type": "application/x-www-form-urlencoded; charset=utf-8",
+      ...properties.config.backendConfig.wiriscustomheaders,
+    };
 
     const init: RequestInit = {
       method,
-      headers
+      headers,
     };
 
     if (method === MethodType.Get) {
@@ -69,11 +75,11 @@ export async function callService(query: object, serviceName: string, method: Me
       }
     } else {
       // Add the query as the body of the request
-      init.body = new URLSearchParams({...query});
+      init.body = new URLSearchParams({ ...query });
     }
 
     return fetch(url.toString(), init);
-  } catch(e) {
+  } catch (e) {
     // TODO manage network and status non-ok errors
     throw e;
   }
@@ -87,18 +93,18 @@ export async function callService(query: object, serviceName: string, method: Me
  * @param {string} extension - Extension to add to the end of the serviceName (including the dot if necessary).
  * @returns {Promise<Response>} The mathml2accessible service response.
  */
-export async function mathml2accessible(mml: string, lang: string, url: string, extension: string) : Promise<any> {
+export async function mathml2accessible(mml: string, lang: string, url: string, extension: string): Promise<any> {
   // Set the needed params to retrieve the alt text.
   const params = {
-    'service': 'mathml2accessible',
-    'mml': mml,
-    'metrics': 'true',
-    'centerbaseline': 'false',
-    'lang': lang,
-    'ignoreStyles': 'true',
-  }
-
-  const response = callService(params, 'service', MethodType.Post, url, extension);
+    service: "mathml2accessible",
+    mml: mml,
+    metrics: "true",
+    centerbaseline: "false",
+    lang: lang,
+    ignoreStyles: "true",
+  };
+
+  const response = callService(params, "service", MethodType.Post, url, extension);
   return processJsonResponse(response);
 }
 
@@ -112,18 +118,18 @@ export async function mathml2accessible(mml: string, lang: string, url: string,
  */
 export async function showImage(mml: string, lang: string, url: string, extension: string): Promise<any> {
   const params = {
-    'mml': mml,
-    'metrics': 'true',
-    'centerbaseline': 'false',
-    'lang':lang,
-  }
+    mml: mml,
+    metrics: "true",
+    centerbaseline: "false",
+    lang: lang,
+  };
 
   // Try to obtain the image via GET
   const getParams = Parser.createShowImageSrcData(params, params.lang);
-  const getResponse = callService(getParams, 'showimage', MethodType.Get, url, extension);
+  const getResponse = callService(getParams, "showimage", MethodType.Get, url, extension);
   try {
     return await processJsonResponse(getResponse);
-  } catch(e) {
+  } catch (e) {
     if (e instanceof StatusError) {
       // Formula was not in cache; proceed with calling showimage via POST
     } else {
@@ -132,10 +138,9 @@ export async function showImage(mml: string, lang: string, url: string, extensio
   }
 
   // If GET request fails, it means that the formula was not in cache. Proceed with POST:
-  const response = callService(params, 'showimage', MethodType.Post, url, extension);
+  const response = callService(params, "showimage", MethodType.Post, url, extension);
   return processJsonResponse(response);
-
-};
+}
 
 /**
  * Calls the createImage service with the given MathML and returns the received Response object.
@@ -147,15 +152,16 @@ export async function showImage(mml: string, lang: string, url: string, extensio
  */
 export async function createImage(mml: string, lang: string, url: string, extension: string): Promise<any> {
   const params = {
-    'mml': mml,
-    'metrics': 'true',
-    'centerbaseline': 'false',
-    'lang': lang,
-  }
-
-  const response = callService(params, 'createimage', MethodType.Get, url, extension);
-  return (await response).text();
-};
+    mml: mml,
+    metrics: "true",
+    centerbaseline: "false",
+    lang: lang,
+  };
+
+  // POST request to retrieve the corresponding image.
+  const response = callService(params, "showimage", MethodType.Post, url, extension);
+  return processJsonResponse(response);
+}
 
 /**
  * Calls the latex2mathml service with the given LaTeX and returns the received Response object.
@@ -166,11 +172,11 @@ export async function createImage(mml: string, lang: string, url: string, extens
  */
 export async function latexToMathml(latex: string, url: string, extension: string): Promise<any> {
   const params = {
-    'service': 'latex2mathml',
-    'latex': latex,
-  }
+    service: "latex2mathml",
+    latex: latex,
+  };
 
-  const response = callService(params, 'service', MethodType.Post, url, extension);
+  const response = callService(params, "service", MethodType.Post, url, extension);
   return processJsonResponse(response);
 }
 
@@ -180,11 +186,11 @@ export async function latexToMathml(latex: string, url: string, extension: strin
  * @param {string} extension - Extension to add to the end of the serviceName (including the dot if necessary).
  * @returns {Promise<Response>} The configurationjson service response.
  */
-export async function configurationJson(variablekeys: string[], url: string, extension: string) : Promise<any> {
+export async function configurationJson(variablekeys: string[], url: string, extension: string): Promise<any> {
   const params = {
-    'variablekeys': variablekeys.join(','),
-  }
+    variablekeys: variablekeys.join(","),
+  };
 
-  const response = callService(params, 'configurationjson', MethodType.Get, url, extension);
+  const response = callService(params, "configurationjson", MethodType.Get, url, extension);
   return processJsonResponse(response);
 }