temml 0.9.1

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

@@ -0,0 +1,234 @@
+/* global beforeEach: false */
+/* global expect: false */
+/* global it: false */
+/* global describe: false */
+
+import splitAtDelimiters from "../splitAtDelimiters";
+import renderMathInElement from "../auto-render";
+
+beforeEach(function() {
+  expect.extend({
+    toSplitInto: function(actual, left, right, result) {
+      const message = {
+        pass: true,
+        message: "'" + actual + "' split correctly"
+      };
+
+      const startData = [{ type: "text", data: actual }];
+
+      const split = splitAtDelimiters(startData, left, right, false);
+
+      if (split.length !== result.length) {
+        message.pass = false;
+        message.message =
+          "Different number of splits: " +
+          split.length +
+          " vs. " +
+          result.length +
+          " (" +
+          JSON.stringify(split) +
+          " vs. " +
+          JSON.stringify(result) +
+          ")";
+        return message;
+      }
+
+      for (let i = 0; i < split.length; i++) {
+        const real = split[i];
+        const correct = result[i];
+
+        let good = true;
+        let diff;
+
+        if (real.type !== correct.type) {
+          good = false;
+          diff = "type";
+        } else if (real.data !== correct.data) {
+          good = false;
+          diff = "data";
+        } else if (real.display !== correct.display) {
+          good = false;
+          diff = "display";
+        }
+
+        if (!good) {
+          message.pass = false;
+          message.message =
+            "Difference at split " +
+            (i + 1) +
+            ": " +
+            JSON.stringify(real) +
+            " vs. " +
+            JSON.stringify(correct) +
+            " (" +
+            diff +
+            " differs)";
+          break;
+        }
+      }
+
+      return message;
+    }
+  });
+});
+
+describe("A delimiter splitter", function() {
+  it("doesn't split when there are no delimiters", function() {
+    expect("hello").toSplitInto("(", ")", [{ type: "text", data: "hello" }]);
+  });
+
+  it("doesn't create a math node with only one left delimiter", function() {
+    expect("hello ( world").toSplitInto("(", ")", [
+      { type: "text", data: "hello " },
+      { type: "text", data: "( world" }
+    ]);
+  });
+
+  it("doesn't split when there's only a right delimiter", function() {
+    expect("hello ) world").toSplitInto("(", ")", [{ type: "text", data: "hello ) world" }]);
+  });
+
+  it("splits when there are both delimiters", function() {
+    expect("hello ( world ) boo").toSplitInto("(", ")", [
+      { type: "text", data: "hello " },
+      { type: "math", data: " world ", rawData: "( world )", display: false },
+      { type: "text", data: " boo" }
+    ]);
+  });
+
+  it("splits on multi-character delimiters", function() {
+    expect("hello [[ world ]] boo").toSplitInto("[[", "]]", [
+      { type: "text", data: "hello " },
+      { type: "math", data: " world ", rawData: "[[ world ]]", display: false },
+      { type: "text", data: " boo" }
+    ]);
+  });
+
+  it("splits mutliple times", function() {
+    expect("hello ( world ) boo ( more ) stuff").toSplitInto("(", ")", [
+      { type: "text", data: "hello " },
+      { type: "math", data: " world ", rawData: "( world )", display: false },
+      { type: "text", data: " boo " },
+      { type: "math", data: " more ", rawData: "( more )", display: false },
+      { type: "text", data: " stuff" }
+    ]);
+  });
+
+  it("leaves the ending when there's only a left delimiter", function() {
+    expect("hello ( world ) boo ( left").toSplitInto("(", ")", [
+      { type: "text", data: "hello " },
+      { type: "math", data: " world ", rawData: "( world )", display: false },
+      { type: "text", data: " boo " },
+      { type: "text", data: "( left" }
+    ]);
+  });
+
+  it("doesn't split when close delimiters are in {}s", function() {
+    expect("hello ( world { ) } ) boo").toSplitInto("(", ")", [
+      { type: "text", data: "hello " },
+      { type: "math", data: " world { ) } ", rawData: "( world { ) } )", display: false },
+      { type: "text", data: " boo" }
+    ]);
+
+    expect("hello ( world { { } ) } ) boo").toSplitInto("(", ")", [
+      { type: "text", data: "hello " },
+      { type: "math", data: " world { { } ) } ", rawData: "( world { { } ) } )", display: false },
+      { type: "text", data: " boo" }
+    ]);
+  });
+
+  it("doesn't split at escaped delimiters", function() {
+    expect("hello ( world \\) ) boo").toSplitInto("(", ")", [
+      { type: "text", data: "hello " },
+      { type: "math", data: " world \\) ", rawData: "( world \\) )", display: false },
+      { type: "text", data: " boo" }
+    ]);
+
+    /* TODO(emily): make this work maybe?
+        expect("hello \\( ( world ) boo").toSplitInto(
+            "(", ")",
+            [
+                {type: "text", data: "hello \\( "},
+                {type: "math", data: " world ",
+                    rawData: "( world )", display: false},
+                {type: "text", data: " boo"},
+            ]);
+        */
+  });
+
+  it("splits when the right and left delimiters are the same", function() {
+    expect("hello $ world $ boo").toSplitInto("$", "$", [
+      { type: "text", data: "hello " },
+      { type: "math", data: " world ", rawData: "$ world $", display: false },
+      { type: "text", data: " boo" }
+    ]);
+  });
+
+  it("remembers which delimiters are display-mode", function() {
+    const startData = [{ type: "text", data: "hello ( world ) boo" }];
+
+    expect(splitAtDelimiters(startData, "(", ")", true)).toEqual([
+      { type: "text", data: "hello " },
+      { type: "math", data: " world ", rawData: "( world )", display: true },
+      { type: "text", data: " boo" }
+    ]);
+  });
+
+  it("works with more than one start datum", function() {
+    const startData = [
+      { type: "text", data: "hello ( world ) boo" },
+      { type: "math", data: "math", rawData: "(math)", display: true },
+      { type: "text", data: "hello ( world ) boo" }
+    ];
+
+    expect(splitAtDelimiters(startData, "(", ")", false)).toEqual([
+      { type: "text", data: "hello " },
+      { type: "math", data: " world ", rawData: "( world )", display: false },
+      { type: "text", data: " boo" },
+      { type: "math", data: "math", rawData: "(math)", display: true },
+      { type: "text", data: "hello " },
+      { type: "math", data: " world ", rawData: "( world )", display: false },
+      { type: "text", data: " boo" }
+    ]);
+  });
+
+  it("doesn't do splitting inside of math nodes", function() {
+    const startData = [
+      { type: "text", data: "hello ( world ) boo" },
+      {
+        type: "math",
+        data: "hello ( world ) boo",
+        rawData: "(hello ( world ) boo)",
+        display: true
+      }
+    ];
+
+    expect(splitAtDelimiters(startData, "(", ")", false)).toEqual([
+      { type: "text", data: "hello " },
+      { type: "math", data: " world ", rawData: "( world )", display: false },
+      { type: "text", data: " boo" },
+      {
+        type: "math",
+        data: "hello ( world ) boo",
+        rawData: "(hello ( world ) boo)",
+        display: true
+      }
+    ]);
+  });
+});
+
+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);
+  });
+});

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

@@ -0,0 +1,217 @@
+var renderMathInElement = (function (temml) {
+  'use strict';
+
+  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+  var temml__default = /*#__PURE__*/_interopDefaultLegacy(temml);
+
+  /* eslint no-constant-condition:0 */
+  const findEndOfMath = function(delimiter, text, startIndex) {
+    // Adapted from
+    // https://github.com/Khan/perseus/blob/master/src/perseus-markdown.jsx
+    let index = startIndex;
+    let braceLevel = 0;
+
+    const delimLength = delimiter.length;
+
+    while (index < text.length) {
+      const character = text[index];
+
+      if (braceLevel <= 0 && text.slice(index, index + delimLength) === delimiter) {
+        return index;
+      } else if (character === "\\") {
+        index++;
+      } else if (character === "{") {
+        braceLevel++;
+      } else if (character === "}") {
+        braceLevel--;
+      }
+
+      index++;
+    }
+
+    return -1;
+  };
+
+  const escapeRegex = function(string) {
+    return string.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
+  };
+
+  const amsRegex = /^\\begin{/;
+
+  const splitAtDelimiters = function(text, delimiters) {
+    let index;
+    const data = [];
+
+    const regexLeft = new RegExp(
+      "(" + delimiters.map((x) => escapeRegex(x.left)).join("|") + ")"
+    );
+
+    while (true) {
+      index = text.search(regexLeft);
+      if (index === -1) {
+        break;
+      }
+      if (index > 0) {
+        data.push({
+          type: "text",
+          data: text.slice(0, index)
+        });
+        text = text.slice(index); // now text starts with delimiter
+      }
+      // ... so this always succeeds:
+      const i = delimiters.findIndex((delim) => text.startsWith(delim.left));
+      index = findEndOfMath(delimiters[i].right, text, delimiters[i].left.length);
+      if (index === -1) {
+        break;
+      }
+      const rawData = text.slice(0, index + delimiters[i].right.length);
+      const math = amsRegex.test(rawData)
+        ? rawData
+        : text.slice(delimiters[i].left.length, index);
+      data.push({
+        type: "math",
+        data: math,
+        rawData,
+        display: delimiters[i].display
+      });
+      text = text.slice(index + delimiters[i].right.length);
+    }
+
+    if (text !== "") {
+      data.push({
+        type: "text",
+        data: text
+      });
+    }
+
+    return data;
+  };
+
+  /* eslint no-console:0 */
+
+  /* Note: optionsCopy is mutated by this method. If it is ever exposed in the
+   * API, we should copy it before mutating.
+   */
+  const renderMathInText = function(text, optionsCopy) {
+    const data = splitAtDelimiters(text, optionsCopy.delimiters);
+    if (data.length === 1 && data[0].type === "text") {
+      // There is no formula in the text.
+      // Let's return null which means there is no need to replace
+      // the current text node with a new one.
+      return null;
+    }
+
+    const fragment = document.createDocumentFragment();
+
+    for (let i = 0; i < data.length; i++) {
+      if (data[i].type === "text") {
+        fragment.appendChild(document.createTextNode(data[i].data));
+      } else {
+        const span = document.createElement("span");
+        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);
+          }
+          temml__default["default"].render(math, span, optionsCopy);
+        } catch (e) {
+          if (!(e instanceof temml__default["default"].ParseError)) {
+            throw e;
+          }
+          optionsCopy.errorCallback(
+            "Temml auto-render: Failed to parse `" + data[i].data + "` with ",
+            e
+          );
+          fragment.appendChild(document.createTextNode(data[i].rawData));
+          continue;
+        }
+        fragment.appendChild(span);
+      }
+    }
+
+    return fragment;
+  };
+
+  const renderElem = function(elem, optionsCopy) {
+    for (let i = 0; i < elem.childNodes.length; i++) {
+      const childNode = elem.childNodes[i];
+      if (childNode.nodeType === 3) {
+        // Text node
+        const frag = renderMathInText(childNode.textContent, optionsCopy);
+        if (frag) {
+          i += frag.childNodes.length - 1;
+          elem.replaceChild(frag, childNode);
+        }
+      } else if (childNode.nodeType === 1) {
+        // Element node
+        const className = " " + childNode.className + " ";
+        const shouldRender =
+          optionsCopy.ignoredTags.indexOf(childNode.nodeName.toLowerCase()) === -1 &&
+          optionsCopy.ignoredClasses.every((x) => className.indexOf(" " + x + " ") === -1);
+
+        if (shouldRender) {
+          renderElem(childNode, optionsCopy);
+        }
+      }
+      // Otherwise, it's something else, and ignore it.
+    }
+  };
+
+  const renderMathInElement = function(elem, options) {
+    if (!elem) {
+      throw new Error("No element provided to render");
+    }
+
+    const optionsCopy = {};
+
+    // Object.assign(optionsCopy, option)
+    for (const option in options) {
+      if (Object.prototype.hasOwnProperty.call(options, option)) {
+        optionsCopy[option] = options[option];
+      }
+    }
+
+    // default options
+    optionsCopy.delimiters = optionsCopy.delimiters || [
+      { left: "$$", right: "$$", display: true },
+      { left: "\\(", right: "\\)", display: false },
+      // LaTeX uses $…$, but it ruins the display of normal `$` in text:
+      // {left: "$", right: "$", display: false},
+      // $ must come after $$
+
+      // Render AMS environments even if outside $$…$$ delimiters.
+      { left: "\\begin{equation}", right: "\\end{equation}", display: true },
+      { left: "\\begin{align}", right: "\\end{align}", display: true },
+      { left: "\\begin{alignat}", right: "\\end{alignat}", display: true },
+      { left: "\\begin{gather}", right: "\\end{gather}", display: true },
+      { left: "\\begin{CD}", right: "\\end{CD}", display: true },
+
+      { left: "\\[", right: "\\]", display: true }
+    ];
+    optionsCopy.ignoredTags = optionsCopy.ignoredTags || [
+      "script",
+      "noscript",
+      "style",
+      "textarea",
+      "pre",
+      "code",
+      "option"
+    ];
+    optionsCopy.ignoredClasses = optionsCopy.ignoredClasses || [];
+    optionsCopy.errorCallback = optionsCopy.errorCallback || console.error;
+
+    // Enable sharing of global macros defined via `\gdef` between different
+    // math elements within a single call to `renderMathInElement`.
+    optionsCopy.macros = optionsCopy.macros || {};
+
+    renderElem(elem, optionsCopy);
+    temml__default["default"].postProcess(elem);
+  };
+
+  return renderMathInElement;
+
+})(temml);

package/contrib/auto-render/test/test_page.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<!--To run this example from a clone of the repository, run `yarn start`
+    in the root Temml directory and then visit with your web browser:
+    http://localhost:7936/contrib/auto-render/index.html
+  -->
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Auto-render test</title>
+    <link rel="stylesheet" href="../../../site/temml/temml.css">
+    <script src="../../../site/temml/temml.min.js" type="text/javascript"></script>
+    <script src="./auto-render.js" type="text/javascript"></script>
+    <style type="text/css">
+      body {
+          margin: 0px;
+          padding: 0px;
+          font-size: 36px;
+      }
+
+      #test > .blue {
+          color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="test">
+      This is some text $math \frac12$ other text
+      <span class="blue">
+        Other node \[ displaymath \frac{1}{2} \] blah $$ \int_2^3 $$
+      </span>
+      and some <!-- comment --> more text \(and math\) blah. And $math with a
+      \$ sign$.
+      <pre>
+        Stuff in a $pre tag$
+      </pre>
+      <p>An AMS environment without <code>$$…$$</code> delimiters.<p>
+      <p>\begin{equation}\begin{split} a &=b+c\\ &=e+f \end{split} \end{equation}</p>
+      <p>$\unsupported$</p>
+    </div>
+    <script>
+      renderMathInElement(
+          document.getElementById("test"),
+          {
+              delimiters: [
+              { left: "$$", right: "$$", display: true },
+              { left: "\\(", right: "\\)", display: false },
+              { left: "\\begin{equation}", right: "\\end{equation}", display: true },
+              { left: "\\begin{align}",    right: "\\end{align}", display: true },
+              { left: "\\begin{alignat}",  right: "\\end{alignat}", display: true },
+              { left: "\\begin{gather}",   right: "\\end{gather}", display: true },
+              { left: "\\begin{CD}",       right: "\\end{CD}", display: true },
+              { left: "\\begin{multline}", right: "\\end{multline}", display: true },
+              { left: "\\[", right: "\\]", display: true }
+            ]
+          }
+      );
+    </script>
+  </body>
+</html>

package/contrib/mhchem/README.md

@@ -0,0 +1,26 @@
+# mhchem extension
+
+This extension adds to Temml the `\ce` and `\pu` functions from the [mhchem](https://mhchem.github.io/MathJax-mhchem/) package.
+
+You can download the `mhchem.min.js` file from this repository.
+
+### Usage
+
+This extension isn't part of core Temml, so the script should be separately included. Write the following line into the HTML page's `<head>`. Place it _after_ the line that calls `temml.js`.
+
+```html
+<script src="./temml.min.js"></script>
+<script src="./mhchem.min.js"></script>
+```
+
+If you are working sever-side, just use `temml.cjs`. It already includes all the functions in `mhchem.js`.
+
+### Syntax
+
+See the [mhchem Manual](https://mhchem.github.io/MathJax-mhchem/) for a full explanation of the input syntax, with working examples. The manual also includes a demonstration box.
+
+Note that old versions of `mhchem.sty` used `\cf` for chemical formula and `\ce` for chemical equations, but `\cf` has been deprecated in place of `\ce`. This extension supports only `\ce`. You can define a macro mapping `\cf` to `\ce` if needed.
+
+### Browser Support
+
+This extension has been tested on Chrome, Firefox, Opera, and Edge.