auto-render.mjs 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. import katex from '../katex.mjs';
  2. /* eslint no-constant-condition:0 */
  3. var findEndOfMath = function findEndOfMath(delimiter, text, startIndex) {
  4. // Adapted from
  5. // https://github.com/Khan/perseus/blob/master/src/perseus-markdown.jsx
  6. var index = startIndex;
  7. var braceLevel = 0;
  8. var delimLength = delimiter.length;
  9. while (index < text.length) {
  10. var character = text[index];
  11. if (braceLevel <= 0 && text.slice(index, index + delimLength) === delimiter) {
  12. return index;
  13. } else if (character === "\\") {
  14. index++;
  15. } else if (character === "{") {
  16. braceLevel++;
  17. } else if (character === "}") {
  18. braceLevel--;
  19. }
  20. index++;
  21. }
  22. return -1;
  23. };
  24. var escapeRegex = function escapeRegex(string) {
  25. return string.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
  26. };
  27. var amsRegex = /^\\begin{/;
  28. var splitAtDelimiters = function splitAtDelimiters(text, delimiters) {
  29. var index;
  30. var data = [];
  31. var regexLeft = new RegExp("(" + delimiters.map(x => escapeRegex(x.left)).join("|") + ")");
  32. while (true) {
  33. index = text.search(regexLeft);
  34. if (index === -1) {
  35. break;
  36. }
  37. if (index > 0) {
  38. data.push({
  39. type: "text",
  40. data: text.slice(0, index)
  41. });
  42. text = text.slice(index); // now text starts with delimiter
  43. } // ... so this always succeeds:
  44. var i = delimiters.findIndex(delim => text.startsWith(delim.left));
  45. index = findEndOfMath(delimiters[i].right, text, delimiters[i].left.length);
  46. if (index === -1) {
  47. break;
  48. }
  49. var rawData = text.slice(0, index + delimiters[i].right.length);
  50. var math = amsRegex.test(rawData) ? rawData : text.slice(delimiters[i].left.length, index);
  51. data.push({
  52. type: "math",
  53. data: math,
  54. rawData,
  55. display: delimiters[i].display
  56. });
  57. text = text.slice(index + delimiters[i].right.length);
  58. }
  59. if (text !== "") {
  60. data.push({
  61. type: "text",
  62. data: text
  63. });
  64. }
  65. return data;
  66. };
  67. /* eslint no-console:0 */
  68. /* Note: optionsCopy is mutated by this method. If it is ever exposed in the
  69. * API, we should copy it before mutating.
  70. */
  71. var renderMathInText = function renderMathInText(text, optionsCopy) {
  72. var data = splitAtDelimiters(text, optionsCopy.delimiters);
  73. if (data.length === 1 && data[0].type === 'text') {
  74. // There is no formula in the text.
  75. // Let's return null which means there is no need to replace
  76. // the current text node with a new one.
  77. return null;
  78. }
  79. var fragment = document.createDocumentFragment();
  80. for (var i = 0; i < data.length; i++) {
  81. if (data[i].type === "text") {
  82. fragment.appendChild(document.createTextNode(data[i].data));
  83. } else {
  84. var span = document.createElement("span");
  85. var math = data[i].data; // Override any display mode defined in the settings with that
  86. // defined by the text itself
  87. optionsCopy.displayMode = data[i].display;
  88. try {
  89. if (optionsCopy.preProcess) {
  90. math = optionsCopy.preProcess(math);
  91. }
  92. katex.render(math, span, optionsCopy);
  93. } catch (e) {
  94. if (!(e instanceof katex.ParseError)) {
  95. throw e;
  96. }
  97. optionsCopy.errorCallback("KaTeX auto-render: Failed to parse `" + data[i].data + "` with ", e);
  98. fragment.appendChild(document.createTextNode(data[i].rawData));
  99. continue;
  100. }
  101. fragment.appendChild(span);
  102. }
  103. }
  104. return fragment;
  105. };
  106. var renderElem = function renderElem(elem, optionsCopy) {
  107. for (var i = 0; i < elem.childNodes.length; i++) {
  108. var childNode = elem.childNodes[i];
  109. if (childNode.nodeType === 3) {
  110. // Text node
  111. // Concatenate all sibling text nodes.
  112. // Webkit browsers split very large text nodes into smaller ones,
  113. // so the delimiters may be split across different nodes.
  114. var textContentConcat = childNode.textContent;
  115. var sibling = childNode.nextSibling;
  116. var nSiblings = 0;
  117. while (sibling && sibling.nodeType === Node.TEXT_NODE) {
  118. textContentConcat += sibling.textContent;
  119. sibling = sibling.nextSibling;
  120. nSiblings++;
  121. }
  122. var frag = renderMathInText(textContentConcat, optionsCopy);
  123. if (frag) {
  124. // Remove extra text nodes
  125. for (var j = 0; j < nSiblings; j++) {
  126. childNode.nextSibling.remove();
  127. }
  128. i += frag.childNodes.length - 1;
  129. elem.replaceChild(frag, childNode);
  130. } else {
  131. // If the concatenated text does not contain math
  132. // the siblings will not either
  133. i += nSiblings;
  134. }
  135. } else if (childNode.nodeType === 1) {
  136. (function () {
  137. // Element node
  138. var className = ' ' + childNode.className + ' ';
  139. var shouldRender = optionsCopy.ignoredTags.indexOf(childNode.nodeName.toLowerCase()) === -1 && optionsCopy.ignoredClasses.every(x => className.indexOf(' ' + x + ' ') === -1);
  140. if (shouldRender) {
  141. renderElem(childNode, optionsCopy);
  142. }
  143. })();
  144. } // Otherwise, it's something else, and ignore it.
  145. }
  146. };
  147. var renderMathInElement = function renderMathInElement(elem, options) {
  148. if (!elem) {
  149. throw new Error("No element provided to render");
  150. }
  151. var optionsCopy = {}; // Object.assign(optionsCopy, option)
  152. for (var option in options) {
  153. if (options.hasOwnProperty(option)) {
  154. optionsCopy[option] = options[option];
  155. }
  156. } // default options
  157. optionsCopy.delimiters = optionsCopy.delimiters || [{
  158. left: "$$",
  159. right: "$$",
  160. display: true
  161. }, {
  162. left: "\\(",
  163. right: "\\)",
  164. display: false
  165. }, // LaTeX uses $…$, but it ruins the display of normal `$` in text:
  166. // {left: "$", right: "$", display: false},
  167. // $ must come after $$
  168. // Render AMS environments even if outside $$…$$ delimiters.
  169. {
  170. left: "\\begin{equation}",
  171. right: "\\end{equation}",
  172. display: true
  173. }, {
  174. left: "\\begin{align}",
  175. right: "\\end{align}",
  176. display: true
  177. }, {
  178. left: "\\begin{alignat}",
  179. right: "\\end{alignat}",
  180. display: true
  181. }, {
  182. left: "\\begin{gather}",
  183. right: "\\end{gather}",
  184. display: true
  185. }, {
  186. left: "\\begin{CD}",
  187. right: "\\end{CD}",
  188. display: true
  189. }, {
  190. left: "\\[",
  191. right: "\\]",
  192. display: true
  193. }];
  194. optionsCopy.ignoredTags = optionsCopy.ignoredTags || ["script", "noscript", "style", "textarea", "pre", "code", "option"];
  195. optionsCopy.ignoredClasses = optionsCopy.ignoredClasses || [];
  196. optionsCopy.errorCallback = optionsCopy.errorCallback || console.error; // Enable sharing of global macros defined via `\gdef` between different
  197. // math elements within a single call to `renderMathInElement`.
  198. optionsCopy.macros = optionsCopy.macros || {};
  199. renderElem(elem, optionsCopy);
  200. };
  201. export { renderMathInElement as default };