| import katex from '../katex.mjs'; |
| |
| /* eslint no-constant-condition:0 */ |
| const findEndOfMath = function findEndOfMath(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 splitAtDelimiters = function splitAtDelimiters(startData, leftDelim, rightDelim, display) { |
| const finalData = []; |
| |
| for (let i = 0; i < startData.length; i++) { |
| if (startData[i].type === "text") { |
| const text = startData[i].data; |
| let lookingForLeft = true; |
| let currIndex = 0; |
| let nextIndex; |
| nextIndex = text.indexOf(leftDelim); |
| |
| if (nextIndex !== -1) { |
| currIndex = nextIndex; |
| finalData.push({ |
| type: "text", |
| data: text.slice(0, currIndex) |
| }); |
| lookingForLeft = false; |
| } |
| |
| while (true) { |
| if (lookingForLeft) { |
| nextIndex = text.indexOf(leftDelim, currIndex); |
| |
| if (nextIndex === -1) { |
| break; |
| } |
| |
| finalData.push({ |
| type: "text", |
| data: text.slice(currIndex, nextIndex) |
| }); |
| currIndex = nextIndex; |
| } else { |
| nextIndex = findEndOfMath(rightDelim, text, currIndex + leftDelim.length); |
| |
| if (nextIndex === -1) { |
| break; |
| } |
| |
| finalData.push({ |
| type: "math", |
| data: text.slice(currIndex + leftDelim.length, nextIndex), |
| rawData: text.slice(currIndex, nextIndex + rightDelim.length), |
| display: display |
| }); |
| currIndex = nextIndex + rightDelim.length; |
| } |
| |
| lookingForLeft = !lookingForLeft; |
| } |
| |
| finalData.push({ |
| type: "text", |
| data: text.slice(currIndex) |
| }); |
| } else { |
| finalData.push(startData[i]); |
| } |
| } |
| |
| return finalData; |
| }; |
| |
| /* eslint no-console:0 */ |
| |
| const splitWithDelimiters = function splitWithDelimiters(text, delimiters) { |
| let data = [{ |
| type: "text", |
| data: text |
| }]; |
| |
| for (let i = 0; i < delimiters.length; i++) { |
| const delimiter = delimiters[i]; |
| data = splitAtDelimiters(data, delimiter.left, delimiter.right, delimiter.display || false); |
| } |
| |
| return data; |
| }; |
| /* Note: optionsCopy is mutated by this method. If it is ever exposed in the |
| * API, we should copy it before mutating. |
| */ |
| |
| |
| const renderMathInText = function renderMathInText(text, optionsCopy) { |
| const data = splitWithDelimiters(text, optionsCopy.delimiters); |
| 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); |
| } |
| |
| katex.render(math, span, optionsCopy); |
| } catch (e) { |
| if (!(e instanceof katex.ParseError)) { |
| throw e; |
| } |
| |
| optionsCopy.errorCallback("KaTeX 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 renderElem(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); |
| 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 renderMathInElement(elem, options) { |
| if (!elem) { |
| throw new Error("No element provided to render"); |
| } |
| |
| const optionsCopy = {}; // Object.assign(optionsCopy, option) |
| |
| for (const option in options) { |
| if (options.hasOwnProperty(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 last in this array. Otherwise, renderMathInElement |
| // will search for \[ before it searches for $$ or \( |
| // That makes it susceptible to finding a \\[0.3em] row delimiter and |
| // treating it as if it were the start of a KaTeX math zone. |
| { |
| left: "\\[", |
| right: "\\]", |
| display: true |
| }]; |
| optionsCopy.ignoredTags = optionsCopy.ignoredTags || ["script", "noscript", "style", "textarea", "pre", "code"]; |
| 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); |
| }; |
| |
| export default renderMathInElement; |