@wiris/mathtype-viewer 1.0.0

package/README.md

@@ -0,0 +1,62 @@
+# MathType Viewer
+
+The MathType viewer renders all MathML and LaTeX-like formulas in a webpage using the MathType rendering engine.
+
+## Usage
+
+To use the MathType viewer in your page, just include the script `dist/WIRISplugins.js`:
+
+```html
+<script src="dist/WIRISplugins.js?viewer=image" defer></script>
+```
+
+When loading the page now, all MathML and LaTeX formulas should be displayed as images.
+
+
+## Properties
+
+The MathType viewer admits various properties.
+
+They can be set like this:
+
+```html
+<script src="dist/WIRISplugins.js&viewer=image" defer></script>
+<script>
+  window.document.addEventListener('viewerLoaded', () => {
+    window.viewer.Properties.key1 = value1;
+    window.viewer.Properties.key2 = value2;
+    // ...
+  });
+</script>
+```
+
+
+## Compilation
+
+In case you want to compile the source code, you must install the NPM dependencies and then run Webpack.
+
+First, run
+
+```sh
+yarn
+```
+
+to install the dependencies.
+Then run
+
+```sh
+yarn build
+```
+
+to compile the package.
+The output will be found in `dist/`.
+
+
+## Documentation
+
+For the whole specification, see [here](docs/spec.md).
+
+
+## Privacy policy
+
+The [MathType Privacy Policy](https://www.wiris.com/en/mathtype-privacy-policy/?utm_source=npmjs&utm_medium=referral) covers the data processing operations for the MathType users. It is an addendum of the company's general Privacy Policy and the [general Privacy Policy](https://www.wiris.com/en/privacy-policy?utm_source=npmjs&utm_medium=referral) still applies to MathType users.

package/babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+  ],
+};

package/docs/spec.md

@@ -0,0 +1,118 @@
+# Specification
+
+## Object
+
+*What is the object being specified?*
+
+The viewer consists of a single minified JavaScript file ready to be included in a website.
+The file has been historically called WIRISplugins.js.
+
+
+## Distribution
+
+*How can this object be obtained and used by our customers?*
+
+The customers can include the JavaScript file using a `<script>` tag.
+They have multiple options as to where this file resides.
+
+- Directly from wiris.net. We serve the last two versions of the viewer as a static asset in wiris.net.
+  The historical URLs of this asset are https://www.wiris.net/demo/plugins/app/WIRISplugins.js (for the latest version) and https://www.wiris.net/client/plugins/app/WIRISplugins.js (for the second to last version).
+  These come, in fact, from the Java integration services that come with the WIRISplugins.js file included in them (see next bullet point).
+- Distributed together with the integration services.
+  The backend component of our plugins comes together with the WIRISplugins.js file so that the customer can include it from their own backend directly.
+- As an npm package. The file is distributed, together with its source code, as an npm package.
+  The publishing system can be the same as the one used for the rest of our npm packages that live in the html-integrations monorepo.
+
+
+## Behavior
+
+*What should this object do and how should it do it?*
+
+When included in a web page and configured properly, the script will transform certain mathematical formulas into rendered images.
+Only the formulas inside the HTML element specified by the `element` property should be transformed.
+Whether it transforms them into PNG or SVG images is determined by the property `wirisimageformat`.
+Depending on the value of the property `viewer`, just MathML formulas (`<math>` elements), or just LaTeX formulas (LaTeX-like formulas surrounded by `$$`), or both will be transformed.
+
+
+### Architecture
+
+The rendering process involves three pieces:
+
+- The frontend script ("the viewer").
+- The integration services.
+  A series of endpoints in the backend of the customer.
+  The customer can also choose not to host this part and use the integration services hosted in wiris.net instead as well, but then they won't be able to set the backend properties in the configuration.ini file.
+- The editor services.
+  A series of endpoints in wiris.net.
+  These are the services that actually do the rendering and return the image content.
+
+The viewer only ever calls the endpoints of the integration services, which in turn call the editor services.
+Thus, throughout this document, all backend endpoints mentioned are part of the integration services.
+
+
+### Rendering algorithm
+
+The algorithm for obtaining the rendered images depends on the `wirispluginperformance` property.
+
+If set to `false`, every request to render an image will make a call directly to the createimage endpoint, which returns the data for the image directly.
+
+Otherwise, the algorithm goes throught two cache steps.
+
+1. First, an MD5 hash of the formula is created.
+  Then, the MD5 is used to call the showimage service from the integration services.
+  The request formula's hash is included as URL parameters, so that the browser can use its cache to spare one call to the integration services.
+
+2. If the browser cache misses, then the browser does actually perform the call to showimage.
+  This might either return the image, if it is in the backend cache; or return a warning message, in which case the viewer will then call showimage again passing the whole formula via POST.
+  Finally, the response should contain the image.
+
+Once the viewer has obtained the image data, it creates the HTML `<img>` element, adding the following properties:
+
+- `src`: as obtained from showimage.
+- `role`: with constant value `math`.
+- `class`: with constant value `Wirisformula`.
+- `alt`: with the alternative text for the formula, provided by the mathml2accessible service.
+- An attribute whose name is the value of the parameter `wiriseditormathmlattribute` and whose value is the original MathML of the formula.
+
+Finally, the viewer replaces the original formula with this new image object.
+
+
+### Properties
+
+This section contains a reference of all the properties that affect the viewer's behavior.
+There are a few different places where these properties can be set.
+The place depends on each specific property.
+
+- Backend.
+  Set in the configuration.ini file of the customer.
+- Frontend.
+  There are two ways to set these properties.
+  - Either by modifying the `Properties` object via JavaScript:
+
+    ```html
+    <script src="dist/WIRISplugins.js" defer></script>
+    <script>
+      window.document.addEventListener('viewerLoaded', () => {
+        window.viewer.Properties.key1 = value1;
+        window.viewer.Properties.key2 = value2;
+        // ...
+      });
+    </script>
+    ```
+
+  - Or via URL in the included script (by appending `?key1=value1&key2=value2…`).
+    This method is discouraged and deprecated, and only kept for retrocompatibility purposes.
+
+The following table contains a specification of each of the properties.
+
+| Name                       | Description                                                                                                                                                                                                                                                                                                                               | Place    | Possible values                                  | Default value                           |
+|----------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|--------------------------------------------------|-----------------------------------------|
+| wiriseditormathmlattribute | The name of the HTML element attribute that will be used in the rendered img elements in order to store the original MathML. According to the HTML spec, it must begin with “data-” [ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-* ].                                                                       | Backend  | data-*                                           | data-mathml                             |
+| wirispluginperformance     | Whether to use the browser cache to render formulas.                                                                                                                                                                                                                                                                                      | Backend  | true, false                                      | true                                    |
+| wirisimageformat           | Whether to return PNG or SVG formulas.                                                                                                                                                                                                                                                                                                    | Backend  | svg, png                                         | svg                                     |
+| editorServicesRoot         | The URL base for the  showimage and createimage integration services. If distributed together with the backend services, this URL is determined by the backend technology. If distributed with npm, it takes as a default value the integration services from wiris.net. In any case, this parameter can be set manually in the frontend. | Frontend | URL                                              | https://www.wiris.net/demo/plugins/app/ |
+| viewer                     | What should the viewer render exactly. none: do nothing image: render both MathML and LaTeX formulas mathml: render only MathML latex: render only LaTeX                                                                                                                                                                                  | Frontend | none, image, mathml, latex (mod capitalization)  | none                                    |
+| element                    | A querySelector string that identifies the element in which the viewer should act.                                                                                                                                                                                                                                                        | Frontend |                                                  | document                                |
+| 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                                       |

package/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title> Testing Viewer MathML </title>
+  <meta charset="utf-8">
+  <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
+  <script src="dist/WIRISplugins.js?viewer=image" defer></script>
+  <script>
+    window.document.addEventListener('viewerLoaded', () => {
+      // window.viewer.Properties can be modified here
+      // Changes are reflected live
+    });
+  </script>
+</head>
+<body>
+  <p>
+    <math>
+      <mn>2</mn>
+      <mo>+</mo>
+      <mn>2</mn>
+      <mo>=</mo>
+      <mn>4</mn>
+    </math>
+  </p>
+  <p>
+    $$4 - 2 = 2$$
+  </p>
+</body>
+</html>

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@wiris/mathtype-viewer",
+  "version": "1.0.0",
+  "description": "",
+  "main": "app.js",
+  "scripts": {
+    "build": "webpack",
+    "serve": "webpack serve",
+    "prepack": "npm install && npm run build"
+  },
+  "keywords": [
+    "typescript",
+    "course"
+  ],
+  "author": "Integrations",
+  "license": "ISC",
+  "dependencies": {
+    "@wiris/mathtype-html-integration-devkit": "1.12.2"
+  },
+  "devDependencies": {
+    "babel-loader": "^9.1.2",
+    "lite-server": "^2.5.4",
+    "ts-loader": "^9.4.2",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^4.0.0",
+    "webpack-dev-server": "^4.12.0"
+  }
+}

package/src/app.ts

@@ -0,0 +1,73 @@
+import { Properties } from './properties';
+import { renderLatex } from './latex';
+import { renderMathML } from './mathml';
+
+// This should be the only code executed outside of a function
+// and the only code containing browser globals (e.g. window)
+// TODO try to set up the linter to check these two constraints
+main(window);
+
+/**
+ * Initial function called when loading the script.
+ * @param {Window} w - The window instance of the browser.
+ */
+async function main(w: Window): Promise<void> {
+  // Expose the globals to the browser
+  (w as any).viewer = {
+    Properties,
+  };
+
+  const document = w.document;
+
+  /**
+   * Parse the DOM looking for LaTeX and <math> elements.
+   * Replaces them with the corresponding rendered images within the given element.
+   * @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);
+    if (element) {
+      await renderLatex(element);
+      await renderMathML(element);
+    }
+  };
+
+  // Initial function to call once document is loaded
+  // Renders formulas and sets observer
+  const start = async () => {
+    // First 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
+    });
+  };
+
+  // https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event#checking_whether_loading_is_already_complete
+  if (document.readyState === "loading") {
+    // Loading hasn't finished yet
+    document.addEventListener("DOMContentLoaded", start);
+  } else {
+    // `DOMContentLoaded` has already fired
+    start();
+  }
+
+  // Dispatch an event notifying that the viewer has been loaded
+  document.dispatchEvent(new Event('viewerLoaded'));
+
+}

package/src/latex.ts

@@ -0,0 +1,101 @@
+import { latexToMathml } from './services';
+import { Properties } from './properties';
+
+interface LatexPosition {
+  start: number,
+  end: number,
+}
+
+/**
+ * Parse the DOM looking for LaTeX nodes and replaces them with the corresponding rendered images.
+ * @param {HTMLElement} root - Any DOM element that can contain MathML.
+ */
+export async function renderLatex(root: HTMLElement) {
+
+  if (Properties.viewer !== 'image') {
+    return;
+  }
+
+  const latexNodes = findLatexTextNodes(root);
+
+  for (const latexNode of latexNodes) {
+    await replaceLatexInTextNode(latexNode);
+  }
+}
+
+/**
+ * Replace LaTeX instances with MathML inside a given node.
+ * @param {Node} node - Text node in which to search and replace LaTeX instances.
+ */
+async function replaceLatexInTextNode(node: Node) {
+  const textContent: string = node.textContent || '';
+  let pos: number = 0;
+
+  while (pos < textContent.length) {
+    const nextLatexPosition: LatexPosition = getNextLatexPos(pos, textContent);
+    if (nextLatexPosition) {
+      // Get left non LaTeX text.
+      const leftText: string = textContent.substring(pos, nextLatexPosition.start);
+      const leftTextNode = document.createTextNode(leftText);
+      // Create a node with left text.
+      node.parentNode?.insertBefore(leftTextNode, node);
+      node.nodeValue = node.nodeValue.substring(pos, nextLatexPosition.start);
+
+      // 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);
+      // Insert mathml node.
+      const fragment = document.createRange().createContextualFragment(response.text);
+
+      node.parentNode?.insertBefore(fragment, node);
+      node.nodeValue = node.nodeValue.substring(nextLatexPosition.start, nextLatexPosition.end);
+
+      pos = nextLatexPosition.end + '$$'.length;
+    } else {
+      // No more LaTeX node found.
+      const text = textContent.substring(pos);
+      const textNode = document.createTextNode(text);
+      node.parentNode?.insertBefore(textNode, node);
+      node.nodeValue = '';
+      pos = textContent.length;
+    }
+  }
+
+  // Delete original text node.
+  node.parentNode?.removeChild(node);
+}
+
+
+/**
+ * Returns an array with all HTML LaTeX nodes.
+ * @param {HTMLElement} root - Any DOM element that can contain LaTeX.
+ * @returns {Node[]} Array with all HTML LaTeX nodes inside root.
+ */
+function findLatexTextNodes(root: any): Node[] {
+  const nodeIterator: NodeIterator = document.createNodeIterator(
+    root,
+    NodeFilter.SHOW_TEXT,
+    node => /(\$\$)(.*)(\$\$)/.test(node.nodeValue || '') ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
+  );
+  const latexNodes : Node[] = [];
+
+  let currentNode: Node | null;
+  while (currentNode = nodeIterator.nextNode()) {
+    latexNodes.push(currentNode);
+  }
+
+  return latexNodes;
+}
+
+/**
+ * Returns an object {start, end} with the start and end latex position.
+ * @param {number} pos - Current position inside the text.
+ * @param {string} text - Text where the next latex it will be searched.
+ * @
+ */
+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;
+}

package/src/mathml.ts

@@ -0,0 +1,83 @@
+import { Properties } from "./properties";
+import { showImage, createImage, mathml2accessible, processJsonResponse } from './services';
+
+/**
+ * Data obtained when rendering image. Data needed to set the formula image parameters.
+ */
+interface FormulaData {
+  content: string,
+  baseline: string,
+  height: string,
+  width: string,
+}
+
+/**
+ * Parse the DOM looking for <math> elements and replace them with the corresponding rendered images within the given element.
+ * @param {HTMLElement} root - Any DOM element that can contain MathML.
+ */
+export async function renderMathML(root: HTMLElement): Promise<void> {
+
+  if (Properties.viewer !== 'image') {
+    return;
+  }
+
+  for(const mathElement of [...root.getElementsByTagName('math')]) {
+    const mml = mathElement.outerHTML;
+
+    let result;
+
+    if (Properties.wirispluginperformance === 'true') {
+      // Transform mml to img.
+      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);
+      // This line is necessary due to a bug in how the services interoperate.
+      // TODO fix the causing bug
+      url = url.replace('pluginsapp', 'plugins/app');
+      result = await processJsonResponse(fetch(url));
+    }
+
+    // Set img properties.
+    const img = await setImageProperties(result, mml, Properties.wiriseditormathmlattribute);
+    // const fragment = document.createRange().createContextualFragment(data.result.content);
+
+    // Replace the MathML for the generated formula image.
+    mathElement.parentNode?.replaceChild(img, mathElement);
+  }
+};
+
+/**
+ * Returns an image formula containing all MathType properties.
+ * @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> {
+
+  // Create imag element.
+  let img = document.createElement('img');
+
+  // Set image src. Encode the result svg.
+  img.src = `data:image/svg+xml;charset=utf8,${encodeURIComponent(data.content)}`;
+
+  // Set other image properties.
+  img.setAttribute(wiriseditormathmlattribute, mml);
+  img.setAttribute('class', 'Wirisformula');
+  img.setAttribute('role', 'math');
+
+  // If the render returns dimensions properties, set them to the image.
+  if (+data.height > 0) {
+    img.style.verticalAlign = "-" + (+data.height - +data.baseline) + "px";
+    img.height = +data.height;
+    img.width = +data.width;
+  }
+
+  // Set the alt text.
+  const { text } = await mathml2accessible(mml, Properties.lang, Properties.editorServicesRoot, Properties.editorServicesExtension);
+  img.alt = text;
+
+  return img;
+
+}

package/src/properties.ts

@@ -0,0 +1,256 @@
+import { configurationJson, StatusError } from './services';
+
+// Helper types for Config below
+type Viewer = 'image' | 'none';
+type Wirispluginperformance = 'true' | 'false';
+
+/**
+ * Type representing all the configuration for the viewer.
+ */
+export type Config = {
+  editorServicesRoot?: string,
+  editorServicesExtension?: string,
+  backendConfig?: {
+    wirispluginperformance?: Wirispluginperformance,
+    wiriseditormathmlattribute?: string,
+  },
+  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: '',
+  backendConfig: {
+    wirispluginperformance: 'true',
+    wiriseditormathmlattribute: 'data-mathml'
+  },
+  dpi: 96,
+  element: 'body',
+  lang: 'en',
+  viewer: 'none',
+  zoom: 1,
+}
+
+/**
+ * This class will handle the parameters defined by the user.
+ */
+export abstract class Properties {
+
+  static render: () => Promise<void> = async () => {};
+
+  // Flag for the static parameters that access the backend.
+  private static backendObtained: boolean = false;
+
+  private static waitForBackend() {
+    while (!this.backendObtained);
+  }
+
+  // Get URL properties (retrocompatibility).
+  static config: Config = defaultValues;
+  static {
+
+    // 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);
+
+      if (urlParams.get('dpi') !== null && urlParams.get('dpi') !== undefined) {
+        this.config.dpi = +urlParams.get('dpi');
+      }
+      if (urlParams.get('element') !== null && urlParams.get('element') !== undefined) {
+        this.config.element = urlParams.get('element');
+      }
+      if (urlParams.get('lang') !== null && urlParams.get('lang') !== undefined) {
+        this.config.lang = urlParams.get('lang');
+      }
+      if (urlParams.get('viewer') !== null && urlParams.get('viewer') !== undefined) {
+        this.config.viewer = (urlParams.get('viewer') as Viewer);
+      }
+      if (urlParams.get('zoom') !== null && urlParams.get('zoom') !== undefined) {
+        this.config.zoom = +urlParams.get('zoom');
+      }
+
+    }
+
+    // Get backend parameters calling the configurationjson service
+    (async () => {
+      try {
+        this.config.backendConfig = await configurationJson(
+          ['wirispluginperformance', 'wiriseditormathmlattribute'],
+          Properties.editorServicesRoot,
+          Properties.editorServicesExtension,
+        );
+      } catch(e) {
+        if (e instanceof StatusError) {
+          // Do nothing; leave default values.
+          console.error(e);
+        } else {
+          throw e;
+        }
+      } finally {
+        // Stop looking for the backend (even if the request fails)
+        this.backendObtained = true;
+      }
+    })();
+
+  }
+
+  /**
+   * Set the config values manually.
+   */
+  static init(config: Config) {
+    Properties.config = {...defaultValues, ...config};
+  }
+
+  static get editorServicesRoot(): string {
+    return this.config.editorServicesRoot ||
+      defaultValues.editorServicesRoot;
+  }
+
+  static set editorServicesRoot(editorServicesRoot: string) {
+    this.config.editorServicesRoot = editorServicesRoot;
+    this.render();
+  }
+
+  static get editorServicesExtension(): string {
+    return this.config.editorServicesExtension ||
+      defaultValues.editorServicesExtension;
+  }
+
+  static set editorServicesExtension(editorServicesExtension: string) {
+    this.config.editorServicesExtension = editorServicesExtension;
+    this.render();
+  }
+
+  /**
+   * Return the language.
+   * In order of priority, the first of the following that is set is returned:
+   * - The lang parameter set in the <script> (WIRISplugin.js?lang=...)
+   * - The HTML document language (<html lang=...>).
+   * - The language of the browser.
+   * - English, by default.
+   * @returns {string} Encoded language string.
+   */
+  static get lang(): string {
+    const configLang = (this.config.lang === 'inherit') ? null : this.config.lang;
+    return configLang ||
+      document.getElementsByTagName('html')[0].lang ||
+      navigator.language ||
+      defaultValues.lang;
+  }
+
+  static set lang(lang: string) {
+    this.config.lang = lang;
+    this.render();
+  }
+
+  /**
+   * Return the viewer mode for the MathML.
+   * In order of priority, the first of the following that is set is returned:
+   * - The viewer parameter set in the <script> (WIRISplugin.js?viewer=...)
+   * - none, by default.
+   */
+  static get viewer(): Viewer {
+    return this.config.viewer ||
+      defaultValues.viewer;
+  }
+
+  static set viewer(viewer: Viewer) {
+    this.config.viewer = viewer;
+    this.render();
+  }
+
+  /**
+   * Return the dpi of the images.
+   * In order of priority, the first of the following that is set is returned:
+   * - The dpi parameter set in the <script> (WIRISplugin.js?dpi=...)
+   * - 96, by default.
+   */
+  static get dpi(): number {
+    return this.config.dpi ||
+      defaultValues.dpi;
+  }
+
+  static set dpi(dpi: number) {
+    this.config.dpi = dpi;
+    this.render();
+  }
+
+  /**
+   * Return the zoom of the images.
+   * In order of priority, the first of the following that is set is returned:
+   * - The zoom parameter set in the <script> (WIRISplugin.js?zoom=...)
+   * - 1, by default.
+   */
+  static get zoom(): number {
+    return this.config.zoom ||
+      defaultValues.zoom;
+  }
+
+  static set zoom(zoom: number) {
+    this.config.zoom = zoom;
+    this.render();
+  }
+
+  /**
+   * Return the element in which to render formulas.
+   * In order of priority, the first of the following that is set is returned:
+   * - The zoom parameter set in the <script> (WIRISplugin.js?element=...)
+   * - 'body', by default.
+   */
+  static get element(): string {
+    return this.config.element ||
+      defaultValues.element;
+  }
+
+  static set element(element: string) {
+    this.config.element = element;
+    this.render();
+  }
+
+  /**
+   * Return the Wiris plugin performance.
+   * In order of priority, the first of the following that is set is returned:
+   * - The backend configuration of the parameter.
+   * - true, by default.
+   */
+  static get wirispluginperformance(): Wirispluginperformance {
+    this.waitForBackend();
+    return this.config.backendConfig.wirispluginperformance ||
+      defaultValues.backendConfig.wirispluginperformance;
+  }
+
+  static set wirispluginperformance(wirispluginperformance: Wirispluginperformance) {
+    this.config.backendConfig.wirispluginperformance = wirispluginperformance;
+    this.render();
+  }
+
+  /**
+   * Return the Wiris MathML attribute.
+   * In order of priority, the first of the following that is set is returned:
+   * - The backend configuration of the parameter.
+   * - data-mathml, by default.
+   */
+  static get wiriseditormathmlattribute(): string {
+    this.waitForBackend();
+    return this.config.backendConfig.wiriseditormathmlattribute ||
+      defaultValues.backendConfig.wiriseditormathmlattribute;
+  }
+
+  static set wiriseditormathmlattribute(wiriseditormathmlattribute: string) {
+    this.config.backendConfig.wiriseditormathmlattribute = wiriseditormathmlattribute;
+    this.render();
+  }
+}

package/src/services.ts

@@ -0,0 +1,184 @@
+import Parser from '@wiris/mathtype-html-integration-devkit/src/parser';
+
+enum MethodType {
+  Post = "POST",
+  Get = "GET",
+}
+
+/**
+ * Thrown when a service returns a JSON with a non-ok status value in its JSON body
+ */
+export class StatusError extends Error {
+  constructor(message) {
+    super(message);
+    Object.setPrototypeOf(this, StatusError.prototype);
+  }
+}
+
+/**
+ * Helper function to process responses from the editor services.
+ * These usually come wrapped in a JSON with a status field that can be either "ok" or "warning".
+ * If status is "ok", return the result value along it. Otherwise, throw a StatusError.
+ * @param {Promise<Response>} response - The response given by the service.
+ * @returns {Promise<any>} The unwrapped result of the response, if valid.
+ * @throws {StatusError} Service responded with a non-ok status.
+ */
+export async function processJsonResponse(response: Promise<Response>): Promise<any> {
+  try {
+    const { status, result } = await (await response).json();
+
+    if (status !== 'ok') {
+      throw new StatusError('Service responded with a non-ok status');
+    }
+
+    return result;
+  } catch(e) {
+    // TODO manage network and status non-ok errors
+    throw e;
+  }
+}
+
+/**
+ * Calls the endpoint servicename and returns its response.
+ * @param {object} query - Object of parameters to pass as the body request or search parameters.
+ * @param {string} serviceName - Name of the service to be called.
+ * @param {string} serverURL - Url of the server where we want to call the service.
+ * @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> {
+  try {
+    const url = new URL(serviceName + extension, serverURL);
+    const init: RequestInit = {
+      method,
+      headers: {
+        'Content-type': 'application/x-www-form-urlencoded; charset=utf-8',
+      },
+    };
+
+    if (method === MethodType.Get) {
+      // Add the query as search params
+      for (const [key, value] of Object.entries(query)) {
+        url.searchParams.set(key, value);
+      }
+    } else {
+      // Add the query as the body of the request
+      init.body = new URLSearchParams({...query});
+    }
+
+    return fetch(url.toString(), init);
+  } catch(e) {
+    // TODO manage network and status non-ok errors
+    throw e;
+  }
+}
+
+/**
+ * Returns the alt text of the MathML passed as parameter.
+ * @param {string} mml - MathML to be transformed into alt text.
+ * @param {string} lang - Language of the accessible text.
+ * @param {string} url - URL of the server where we want to call the service.
+ * @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> {
+  // 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);
+  return processJsonResponse(response);
+}
+
+/**
+ * Calls the showImage service with the given MathML and returns the received Response object.
+ * @param {string} mml - MathML to render.
+ * @param {string} lang - Language.
+ * @param {string} url - URL of the server where we want to call the service.
+ * @param {string} extension - Extension to add to the end of the serviceName (including the dot if necessary).
+ * @returns {Promise<Response>} the Response object to the petition made to showImage
+ */
+export async function showImage(mml: string, lang: string, url: string, extension: string): Promise<any> {
+  const params = {
+    'mml': mml,
+    'metrics': 'true',
+    'centerbaseline': 'false',
+    'lang':lang,
+  }
+
+  // Try to obtain the image via GET
+  const getParams = Parser.createShowImageSrcData({ mml }, lang);
+  const getResponse = callService(getParams, 'showimage', MethodType.Get, url, extension);
+  try {
+    return await processJsonResponse(getResponse);
+  } catch(e) {
+    if (e instanceof StatusError) {
+      // Formula was not in cache; proceed with calling showimage via POST
+    } else {
+      throw e;
+    }
+  }
+
+  // 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);
+  return processJsonResponse(response);
+
+};
+
+/**
+ * Calls the createImage service with the given MathML and returns the received Response object.
+ * @param {string} mml - MathML to render
+ * @param {string} lang - Language.
+ * @param {string} url - URL of the server where we want to call the service.
+ * @param {string} extension - Extension to add to the end of the serviceName (including the dot if necessary).
+ * @returns {Promise<Response>} the Response object to the petition made to showImage
+ */
+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();
+};
+
+/**
+ * Calls the latex2mathml service with the given LaTeX and returns the received Response object.
+ * @param {string} latex - LaTeX to render
+ * @param {string} url - Url of the server where we want to call the service.
+ * @param {string} extension - Extension to add to the end of the serviceName (including the dot if necessary).
+ * @returns {Promise<Response>} the Response object to the petition made to service
+ */
+export async function latexToMathml(latex: string, url: string, extension: string): Promise<any> {
+  const params = {
+    'service': 'latex2mathml',
+    'latex': latex,
+  }
+
+  const response = callService(params, 'service', MethodType.Post, url, extension);
+  return processJsonResponse(response);
+}
+
+/**
+ * Returns the configuration from the backend.
+ * @param {string[]} variablekeys - List of the key names of the variables to fetch.
+ * @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> {
+  const params = {
+    'variablekeys': variablekeys.join(','),
+  }
+
+  const response = callService(params, 'configurationjson', MethodType.Get, url, extension);
+  return processJsonResponse(response);
+}

package/tsconfig.json

@@ -0,0 +1,77 @@
+{
+  "compilerOptions": {
+    /* Basic Options */
+    "target": "ES5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "lib": [
+      "dom",
+      "es6",
+      "dom.iterable",
+      "scripthost",
+      "es2017",
+      "es5",
+      "es2015",
+    ],                             /* Specify library files to be included in the compilation. */
+    // "allowJs": true,                       /* Allow javascript files to be compiled. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    "outDir": "./dist",                        /* Redirect output structure to the directory. */
+    "rootDir": "./src",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */es
+    "removeComments": true,                /* Do not emit comments to output. */
+    // "noEmit": true,                        /* Do not emit outputs. */
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+    "noEmitOnError": true,
+
+    /* Strict Type-Checking Options */
+    // "strict": true,                           /* Enable all strict type-checking options. */
+    "noImplicitAny": false,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    "noUnusedLocals": false,                /* Report errors on unused locals. */
+    "noUnusedParameters": false,            /* Report errors on unused parameters. */
+    "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+
+    /* Module Resolution Options */
+    "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    "typeRoots": [
+      "./typings",
+      "../node_modules/@types",
+      "./dist"
+    ],                       /* List of folders to include type definitions from. */
+    // "types": [],                           /* Type declaration files to be included in compilation. */
+    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+
+    /* Source Map Options */
+    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+  },
+  "exclude": [
+    "node_modules", // would be the default
+    "./dist"
+  ]
+}

package/webpack.config.js

@@ -0,0 +1,39 @@
+const path = require('path');
+
+module.exports = (config, context) => {
+  return {
+    entry: './src/app.ts',
+    mode: 'development',
+    devtool: 'inline-source-map',
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: 'ts-loader',
+          exclude: /node_modules/,
+        },
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          use: ['babel-loader']
+        },
+      ],
+    },
+    resolve: {
+      extensions: ['.tsx', '.ts', '.js'],
+    },
+    output: {
+      filename: 'WIRISplugins.js',
+      path: path.resolve(__dirname, 'dist'),
+    },
+    devServer: {
+      devMiddleware: {
+        writeToDisk: true,
+      },
+      static:  './',
+      hot: true,
+      port: 8001,
+      open: true,
+    },
+  }
+};