fix(viewer): decode safe mathml

demos/html/viewer/index.html

@@ -46,22 +46,22 @@
       MathType Viewer version: <output id="version"></output>
       <form>
         <label for="wiriseditormathmlattribute">wiriseditormathmlattribute:</label>
-        <input name="wiriseditormathmlattribute" id="wiriseditormathmlattribute" oninput="resetContent(); window.viewer.Properties.wiriseditormathmlattribute = event.target.value;"
+        <input name="wiriseditormathmlattribute" id="wiriseditormathmlattribute" oninput="resetContent(); window.viewer.properties.config.wiriseditormathmlattribute = event.target.value;"
           type="text" value="data-mathml"/>
         <br/>
 
         <label for="wirispluginperformance">wirispluginperformance:</label>
-        <input name="wirispluginperformance" id="wirispluginperformance" oninput="resetContent(); window.viewer.Properties.wirispluginperformance = event.target.value;"
+        <input name="wirispluginperformance" id="wirispluginperformance" oninput="resetContent(); window.viewer.properties.config.wirispluginperformance = event.target.value;"
           type="checkbox" checked/>
         <br/>
 
         <label for="editorServicesRoot">editorServicesRoot:</label>
-        <input name="editorServicesRoot" id="editorServicesRoot" oninput="resetContent(); window.viewer.Properties.editorServicesRoot = event.target.value;"
+        <input name="editorServicesRoot" id="editorServicesRoot" oninput="resetContent(); window.viewer.properties.config.editorServicesRoot = event.target.value;"
           type="text" value="https://www.wiris.net/demo/plugins/app/"/>
         <br/>
 
         <label for="viewer">Viewer:</label>
-        <select name="viewer" id="viewer" onchange="resetContent(); window.viewer.Properties.viewer = event.target.value;">
+        <select name="viewer" id="viewer" onchange="resetContent(); window.viewer.properties.config.viewer = event.target.value;">
           <option value="none">none</option>
           <option value="image" selected>image</option>
           <option value="mathml">mathml</option>
@@ -70,23 +70,23 @@
         <br/>
 
         <label for="element">Element:</label>
-        <input name="element" id="element" oninput="resetContent(); window.viewer.Properties.element = event.target.value;"
+        <input name="element" id="element" oninput="resetContent(); window.viewer.properties.config.element = event.target.value;"
           type="text" value="main"/>
         <br/>
 
         <label for="lang">Language:</label>
-        <input name="lang" id="lang" oninput="resetContent(); window.viewer.Properties.lang = event.target.value;"
+        <input name="lang" id="lang" oninput="resetContent(); window.viewer.properties.config.lang = event.target.value;"
           type="text" value="en"/>
         <br/>
 
         <label for="dpi">DPI:</label>
-        <input name="dpi" id="dpi" onchange="resetContent(); window.viewer.Properties.dpi = +event.target.value;" oninput="document.getElementById('dpiOutput').innerText = event.target.value"
+        <input name="dpi" id="dpi" onchange="resetContent(); window.viewer.properties.config.dpi = +event.target.value;" oninput="document.getElementById('dpiOutput').innerText = event.target.value"
           type="range" min="0" max="100" value="96"/>
         <output id="dpiOutput">96</output>
         <br/>
 
         <label for="zoom">Zoom:</label>
-        <input name="zoom" id="zoom" onchange="resetContent(); window.viewer.Properties.zoom = +event.target.value;" oninput="document.getElementById('zoomOutput').innerText = event.target.value"
+        <input name="zoom" id="zoom" onchange="resetContent(); window.viewer.properties.config.zoom = +event.target.value;" oninput="document.getElementById('zoomOutput').innerText = event.target.value"
           type="range" min="0" max="10" step="0.01" value="1"/>
         <output id="zoomOutput">1</output>
         <br/>

packages/viewer/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);