Add optional pre-process callback to the auto-renderer. (#1784)

* Add optional pre-process callback to the auto-renderer.

* Rewrite `preProcess` callback signature.

* Add test.

* Make test future-proof.

* Add root folder to the node module paths.

contrib/auto-render/auto-render.js

@@ -26,11 +26,14 @@ const renderMathInText = function(text, optionsCopy) {
             fragment.appendChild(document.createTextNode(data[i].data));
         } else {
             const span = document.createElement("span");
-            const math = data[i].data;
+            let math = data[i].data;
             // Override any display mode defined in the settings with that
             // defined by the text itself
             optionsCopy.displayMode = data[i].display;
             try {
+                if (optionsCopy.preProcess) {
+                    math = optionsCopy.preProcess(math);
+                }
                 katex.render(math, span, optionsCopy);
             } catch (e) {
                 if (!(e instanceof katex.ParseError)) {

contrib/auto-render/test/auto-render-spec.js

@@ -4,6 +4,7 @@
 /* global describe: false */
 
 import splitAtDelimiters from "../splitAtDelimiters";
+import renderMathInElement from "../auto-render";
 
 beforeEach(function() {
     expect.extend({
@@ -234,3 +235,19 @@ describe("A delimiter splitter", function() {
             ]);
     });
 });
+
+describe("Pre-process callback", function() {
+    it("replace `-squared` with `^2 `", function() {
+        const el1 = document.createElement('div');
+        el1.textContent = 'Circle equation: $x-squared + y-squared = r-squared$.';
+        const el2 = document.createElement('div');
+        el2.textContent = 'Circle equation: $x^2 + y^2 = r^2$.';
+        const delimiters = [{left: "$", right: "$", display: false}];
+        renderMathInElement(el1, {
+            delimiters,
+            preProcess: math => math.replace(/-squared/g, '^2'),
+        });
+        renderMathInElement(el2, {delimiters});
+        expect(el1.innerHTML).toEqual(el2.innerHTML);
+    });
+});

docs/autorender.md

@@ -99,6 +99,9 @@ in addition to two auto-render-specific keys:
 - `errorCallback`: A callback method returning a message and an error stack
   in case of an critical error during rendering. The default uses `console.error`.
 
+- `preProcess`: A callback function, `(math: string) => string`, used to process
+  math expressions before rendering.
+
 The `displayMode` property of the options object is ignored, and is
 instead taken from the `display` key of the corresponding entry in the
 `delimiters` key.

package.json

@@ -80,7 +80,7 @@
     "test:lint:js": "eslint *.js src static test contrib dockers website",
     "test:lint:css": "stylelint src/katex.less static/main.css contrib/**/*.css website/static/**/*.css",
     "test:flow": "flow",
-    "test:jest": "jest",
+    "test:jest": "NODE_PATH=./:$NODE_PATH jest",
     "test:jest:watch": "jest --watch",
     "test:jest:update": "jest --updateSnapshot",
     "test:jest:coverage": "jest --coverage",