auto-render.mjs 6.8 KB

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