static HTML for math node views

[piszczu4]

How to generate rendered math for static html? Currently math is nicely rendered in editing mode when it's not rendered when using DOMSerializer to get static HTML

[benrbray]

At the moment, this isn't implemented, I will keep it in mind for the next release. (a PR would be welcome!)

In the meantime, I recommend writing a ProseMirror plugin that calls KaTeX on the math node during (or after) DOM serialization.

[piszczu4]

Hi, I solved it in the following way. Do you have any suggestions? It's written in Tiptap framework btw

export const renderMathHTML = (displayMode: boolean) => (node: Node) => {
    let dom = document.createElement(
        displayMode ? "math-display" : "math-inline"
    );
    dom.className = "math-node";

    let tex = node.textContent;
    let src = document.createElement("span");
    src.className = "math-src";
    src.innerText = tex;

    let render = document.createElement("span");
    render.className = "math-render";

    katex.render(tex, render, {
        displayMode: displayMode,
        globalGroup: true,
    });

    dom.appendChild(src);
    dom.appendChild(render);

    return dom;
};

    parseHTML() {
        return [
            {
                tag: "math-inline",
                contentElement: "span.math-src",
            },
            ...defaultInlineMathParseRules,
        ];
    },