| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164 |
- /* eslint no-console:0 */
- import katex from "katex";
- import splitAtDelimiters from "./splitAtDelimiters";
- import type {DelimiterSpec} from "./splitAtDelimiters";
- interface RenderMathInElementOptions {
- delimiters?: DelimiterSpec[];
- preProcess?: (math: string) => string;
- ignoredTags?: string[];
- ignoredClasses?: string[];
- errorCallback?: (msg: string, err: Error) => void;
- displayMode?: boolean;
- macros?: Record<string, string>;
- }
- interface RenderMathInElementOptionsCopy {
- delimiters: DelimiterSpec[];
- preProcess?: (math: string) => string;
- ignoredTags: Set<string>;
- ignoredClasses: string[];
- errorCallback: (msg: string, err: Error) => void;
- displayMode?: boolean;
- macros?: Record<string, string>;
- }
- /* 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: string,
- optionsCopy: RenderMathInElementOptionsCopy
- ) {
- 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);
- }
- 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(
- elem: HTMLElement,
- optionsCopy: RenderMathInElementOptionsCopy
- ) {
- for (let i = 0; i < elem.childNodes.length; i++) {
- const childNode = elem.childNodes[i];
- if (childNode.nodeType === 3) {
- // Text node
- // Concatenate all sibling text nodes.
- // Webkit browsers split very large text nodes into smaller ones,
- // so the delimiters may be split across different nodes.
- let textContentConcat = childNode.textContent ?? "";
- let sibling = childNode.nextSibling;
- let nSiblings = 0;
- while (sibling && (sibling.nodeType === Node.TEXT_NODE)) {
- textContentConcat += sibling.textContent ?? "";
- sibling = sibling.nextSibling;
- nSiblings++;
- }
- const frag = renderMathInText(textContentConcat, optionsCopy);
- if (frag) {
- // Remove extra text nodes
- for (let j = 0; j < nSiblings; j++) {
- childNode.nextSibling!.remove();
- }
- i += frag.childNodes.length - 1;
- elem.replaceChild(frag, childNode);
- } else {
- // If the concatenated text does not contain math
- // the siblings will not either
- i += nSiblings;
- }
- } else if (childNode.nodeType === 1) {
- // Element node
- const className = ' ' + (childNode as HTMLElement).className + ' ';
- const shouldRender = !optionsCopy.ignoredTags.has(
- childNode.nodeName.toLowerCase()) &&
- optionsCopy.ignoredClasses.every(
- (x: string) => !className.includes(' ' + x + ' '));
- if (shouldRender) {
- renderElem(childNode as HTMLElement, optionsCopy);
- }
- }
- // Otherwise, it's something else, and ignore it.
- }
- };
- const renderMathInElement = function(elem: HTMLElement, options?: RenderMathInElementOptions) {
- if (!elem) {
- throw new Error("No element provided to render");
- }
- const optionsCopy: Partial<RenderMathInElementOptionsCopy> = {};
- Object.assign(optionsCopy, options);
- // 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 = new Set<string>(options?.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 as RenderMathInElementOptionsCopy);
- };
- export default renderMathInElement;
|