prosemirror-math
prosemirror-math copied to clipboard
static HTML for math node views
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
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.
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,
];
},