@wiris/mathtype-viewer 8.9.1 → 8.10.0

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,
-  backendConfig?: {
-    wirispluginperformance?: Wirispluginperformance,
-    wiriseditormathmlattribute?: string,
-    wiriscustomheaders?: object,
-  },
-  dpi?: number,
-  element?: string,
-  lang?: string,
-  viewer?: Viewer,
-  zoom?: number,
-};
+export interface Config {
+  editorServicesRoot: string;
+  editorServicesExtension: string;
+  backendConfig: {
+    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 () => {};
@@ -54,15 +53,15 @@ export class Properties {
   config: Config = defaultValues;
 
   /**
-   * Do not use this method. Instead, use {@link Properties.generate}.
-   * Constructors cannot be async so we make it private and force instantiation through an alternative static method.
+   * Private constructor to avoid multiple instances of the class.
+   * To instantiate the class, use the static method  {@link Properties.getInstance}.
    */
-  private new() {}
+  private constructor() {}
 
-  static getInstance(): Properties {
+  static async getInstance(): Promise<Properties> {
     if (!Properties.instance) {
       Properties.instance = new Properties();
-      Properties.instance.initialize();
+      await Properties.instance.initialize();
     }
     return Properties.instance;
   }
@@ -71,45 +70,35 @@ export class Properties {
    * Creates and sets up a new instance of class Properties
    */
   private async initialize(): Promise<void> {
+    if (!Properties.instance) {
+      console.error("Properties.instance is not set");
+      return;
+    }
     // Get URL parameters from <script>
-    const pluginName = 'WIRISplugins.js';
-    const script: HTMLScriptElement = document.querySelector(`script[src*="${pluginName}"]`);
-
-    if (!!script) {
-      const pluginNamePosition: number = script.src.lastIndexOf(pluginName);
-      const params: string = script.src.substring(pluginNamePosition + pluginName.length);
-      const urlParams = new URLSearchParams(params);
+    const pluginName = "WIRISplugins.js";
+    const script: HTMLScriptElement | null = document.querySelector(`script[src*="${pluginName}"]`);
 
-      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('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('zoom') !== null && urlParams.get('zoom') !== undefined) {
-        Properties.instance.config.zoom = +urlParams.get('zoom');
-      }
+    // If the absence of the script is an error maybe this should throw
+    if (script) {
+      this.setProperties(script, pluginName, Properties.instance);
     }
 
-    Properties.instance.checkServices();
+    await Properties.instance.checkServices();
 
     // 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,
+        false,
       );
 
-      // 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);
@@ -119,27 +108,73 @@ export class Properties {
     }
   }
 
+  /**
+   * Initialize properties from <script>
+   * @param script
+   * @param pluginName
+   * @param instance
+   */
+  private setProperties(script: HTMLScriptElement, pluginName: string, instance: Properties) {
+    const pluginNamePosition: number = script.src.lastIndexOf(pluginName);
+    const params: string = script.src.substring(pluginNamePosition + pluginName.length);
+    const urlParams = new URLSearchParams(params);
+
+    const dpi = urlParams.get("dpi");
+    if (dpi !== null && dpi !== undefined) {
+      instance.config.dpi = +dpi;
+    }
+
+    const element = urlParams.get("element");
+    if (element !== null && element !== undefined) {
+      instance.config.element = element;
+    }
+
+    const lang = urlParams.get("lang");
+    if (lang !== null && lang !== undefined) {
+      instance.config.lang = lang;
+    }
+
+    const viewer = urlParams.get("viewer");
+    if (viewer !== null && viewer !== undefined) {
+      instance.config.viewer = viewer as Viewer;
+    }
+
+    const zoom = urlParams.get("zoom");
+    if (zoom !== null && zoom !== undefined) {
+      instance.config.zoom = +zoom;
+    }
+  }
+
   /**
    * Check if is inside Integrations Services
    * @deprecated This will be removed once the viewer uncouple from the integration services.
    */
-  private checkServices(): void {
-    const path = ((document.currentScript as HTMLScriptElement).src);
+  private async checkServices() {
+    const path = (document.currentScript as HTMLScriptElement).src;
 
-    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')) {
+    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";
+    } else {
+      try {
+        // We want to know if we are using the integrations java services.
+        // So we call the configurationjson service assuming that the path is the one for the Java services.
+        // If we get an answer, we know we are using the Java services,
+        // otherwise, and since PHP has already been discarded, we'll set the services to wiris.net
+        await configurationJson(["wirispluginperformance"], path, "", true);
+
+        this.config.editorServicesRoot = path;
+        this.config.editorServicesExtension = "";
+      } catch (e) {
+        // We do noting.
+        // Getting here means that we are not using php nor Java services so we'll stick to the wiris.net default.
+      }
     }
   }
 
   get editorServicesRoot(): string {
-    return this.config.editorServicesRoot ||
-      defaultValues.editorServicesRoot;
+    return this.config.editorServicesRoot || defaultValues.editorServicesRoot;
   }
 
   set editorServicesRoot(editorServicesRoot: string) {
@@ -148,8 +183,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 +201,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 +217,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 +232,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 +247,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 +262,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 +277,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 +292,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,24 +11,29 @@ 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;
   }
 }
 
+interface MathMLPosition {
+  nextElement: Node;
+  safeMML: string;
+}
+
 /**
  * This class is a compatibility layer with the old Viewer.
  * See haxe/src-haxe/com/wiris/js/JsPluginViewer.hx in in the repo wiris/plugins previous to commit df1248a.
@@ -58,12 +63,12 @@ class JsPluginViewer {
    * Please consider using {@link renderLatex} or {@link renderMathML}.
    */
   parseSafeMathMLElement(element: HTMLElement, asynchronously?: boolean, callbackFunc?: () => void): void {
-    var mathmlPositions = [];
+    var mathmlPositions: MathMLPosition[] = [];
     JsPluginViewer.getMathMLPositionsAtElementAndChildren(element, mathmlPositions);
     for (let i = 0; i < mathmlPositions.length; i++) {
       var mathmlPosition = mathmlPositions[i];
       var newNode = document.createElement("math");
-      mathmlPosition.nextElement.parentNode.insertBefore(newNode, mathmlPosition.nextElement);
+      mathmlPosition.nextElement.parentNode?.insertBefore(newNode, mathmlPosition.nextElement);
       newNode.outerHTML = JsPluginViewer.decodeSafeMathML(mathmlPosition.safeMML);
     }
   }
@@ -122,7 +127,6 @@ class JsPluginViewer {
     var doubleQuoteEntity = safeXMLCharactersEntities.doubleQuote;
     var realDoubleQuoteEntity = safeXMLCharactersEntities.realDoubleQuote;
 
-
     // Important to not change function parameter.
     var inputCopy = input.slice();
 
@@ -148,25 +152,26 @@ class JsPluginViewer {
 
     // We are replacing $ by & when its part of an entity for retrocompatibility.
     // Now, the standard is replace § by &.
-    var returnValue = '';
-    var currentEntity = null;
+    var returnValue = "";
+    var currentEntity: string | null = 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.
       }
@@ -176,7 +181,7 @@ class JsPluginViewer {
     return returnValue;
   }
 
-  private static getMathMLPositionsAtElementAndChildren(element: Node, mathmlPositions) {
+  private static getMathMLPositionsAtElementAndChildren(element: Node, mathmlPositions: MathMLPosition[]) {
     JsPluginViewer.getMathMLPositionsAtNode(element, mathmlPositions);
     // Copy current children because DOM will be changed and element.childNodes won't be
     // consistent on call getMathMLPositionsAtElementAndChildren().
@@ -191,66 +196,66 @@ 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 start = node.textContent?.indexOf(startMathmlTag) ?? -1;
       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) ?? -1;
 
-        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) ?? -1;
 
-        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);
+        start = node.textContent?.indexOf(startMathmlTag) ?? -1;
 
         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: "¨",
     };
   }
 }