@wiris/mathtype-viewer 1.2.1 → 1.4.0

package/dist/WIRISplugins.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! @license DOMPurify 2.4.7 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/2.4.7/LICENSE */

package/dist/mathml.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"mathml.d.ts","sourceRoot":"","sources":["../src/mathml.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAyD1C,wBAAsB,YAAY,CAAC,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,CAgC3F"}

package/dist/utils.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAoBA,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAsB9D;AAID,eAAO,MAAM,aAAa,UAAqG,CAAC"}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@wiris/mathtype-viewer",
-  "version": "1.2.1",
+  "version": "1.4.0",
   "description": "",
   "main": "app.js",
   "scripts": {
-    "build": "webpack",
+    "build": "webpack --mode production",
+    "build-dev": "webpack --mode development",
     "serve": "webpack serve",
     "prepack": "yarn && npm run build"
   },
@@ -15,7 +16,7 @@
   "author": "Integrations",
   "license": "ISC",
   "dependencies": {
-    "@wiris/mathtype-html-integration-devkit": "1.14.1"
+    "@wiris/mathtype-html-integration-devkit": "1.16.0"
   },
   "devDependencies": {
     "babel-loader": "^9.1.2",

package/project.json

@@ -13,6 +13,16 @@
         "{options.outputPath}"
       ]
     },
+    "build-dev": {
+      "executor": "nx:run-script",
+      "options": {
+        "script": "build-dev",
+        "outputPath": "packages/viewer/dist"
+      },
+      "outputs": [
+        "{options.outputPath}"
+      ]
+    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "options": {

package/src/mathml.ts

@@ -1,6 +1,7 @@
 import { Properties } from "./properties";
 import { showImage, createImage, mathml2accessible, processJsonResponse } from './services';
 import { htmlEntitiesToXmlEntities, corruptMathML } from './utils';
+import MathML from '@wiris/mathtype-html-integration-devkit/src/mathml';
 
 /**
  * Data obtained when rendering image. Data needed to set the formula image parameters.
@@ -12,6 +13,43 @@ interface FormulaData {
   width: string,
 }
 
+/**
+ * Look for safe MathML «math» formulas.
+ * @param {HTMLElement} root - Any DOM element that can contain MathML.
+ */
+function findSafeMathMLTextNodes(root: HTMLElement): Node[] {
+  const nodeIterator: NodeIterator = document.createNodeIterator(
+    root,
+    NodeFilter.SHOW_TEXT,
+    node => /«math(.*?)«\/math»/g.test(node.nodeValue || '') ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
+  );
+  const safeNodes : Node[] = [];
+
+  let currentNode: Node | null;
+  while (currentNode = nodeIterator.nextNode()) {
+    safeNodes.push(currentNode);
+  }
+
+  return safeNodes;
+}
+
+/**
+ * Parse the DOM looking for «math» formulas and replace them with the corresponding rendered images within the given element.
+ * @param {HTMLElement} root - Any DOM element that can contain MathML.
+ */
+function decodeSafeMathML(root: HTMLElement) {
+  const safeNodes = findSafeMathMLTextNodes(root);
+
+  for (const safeNode of safeNodes) {
+    const mathml = MathML.safeXmlDecode(safeNode.textContent);
+    // Insert mathml node.
+    const fragment = document.createRange().createContextualFragment(mathml);
+
+    safeNode.parentNode?.insertBefore(fragment, safeNode);
+    safeNode.parentNode?.removeChild(safeNode);
+  }
+}
+
 /**
  * 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.
@@ -23,6 +61,8 @@ export async function renderMathML(properties: Properties, root: HTMLElement): P
     return;
   }
 
+  decodeSafeMathML(root);
+
   for(const mathElement of [...root.getElementsByTagName('math')]) {
     const mml = htmlEntitiesToXmlEntities(mathElement.outerHTML);
 

package/src/services.ts

@@ -113,7 +113,7 @@ export async function showImage(mml: string, lang: string, url: string, extensio
   }
 
   // Try to obtain the image via GET
-  const getParams = Parser.createShowImageSrcData({ mml }, lang);
+  const getParams = Parser.createShowImageSrcData(params);
   const getResponse = callService(getParams, 'showimage', MethodType.Get, url, extension);
   try {
     return await processJsonResponse(getResponse);

package/src/utils.ts

@@ -21,12 +21,14 @@ function decodeEntities(text: string): string {
 export function htmlEntitiesToXmlEntities(text: string): string {
   text = decodeEntities(text);
 
-  // Replaces the < & > characters to its HTMLEntity to avoid render issues.
+  // Replaces the '<', '&', '>', and '"' characters to its HTMLEntity to avoid render issues.
   text = text.split('"<"').join('"&lt;"')
     .split('">"')
     .join('"&gt;"')
     .split('><<')
-    .join('>&lt;<');
+    .join('>&lt;<')
+    .split('&')
+    .join('&amp;');
 
   let result = '';
   for (let i = 0; i < text.length; i++) {

package/webpack.config.js

@@ -3,8 +3,7 @@ const path = require('path');
 module.exports = (config, context) => {
   return {
     entry: './src/app.ts',
-    mode: 'development',
-    devtool: 'inline-source-map',
+    mode: 'none',
     module: {
       rules: [
         {
@@ -35,5 +34,8 @@ module.exports = (config, context) => {
       port: 8001,
       open: true,
     },
+    optimization: {
+      minimize: true, // enabling this reduces file size and readability
+    },
   }
 };