feat(math): add a new package for latex rendering

[nperez0111]

This was mostly just a test to see what it would be like to build something sort of non-trivial in the new custom blocks API. I'd say that it was a success!

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
blocknote	Error		Sep 18, 2025 11:18am
blocknote-website	Error		Sep 18, 2025 11:18am

[ArihantBapna]

Screen.Recording.2025-09-18.at.12.14.46.PM.mov

We added in support for inline-math using https://mathlive.io/mathfield/ this guy to our blocknote editor and it works a lot nicer than the traditional katex one

[nperez0111]

@ArihantBapna this is very compelling!
I've never seen this project before, but it seems like it is exactly the sort of experience I'd want within blocknote.

Do you happen to have some of that integration code?

[ArihantBapna]

@nperez0111 yep! one sec. Sorry about delay, didn't see the notif:

import { createReactInlineContentSpec } from "@blocknote/react";
import type { MathfieldElement } from "mathlive";
import { useLayoutEffect, useRef } from "react";

declare global {
	namespace JSX {
		interface IntrinsicElements {
			"math-field": React.DetailedHTMLProps<
				React.HTMLAttributes<MathfieldElement>,
				MathfieldElement
			>;
		}
	}
}

export const InlineMath = createReactInlineContentSpec(
	{
		type: "inlineMath",
		propSchema: {
			latex: { default: "$1/2$" },
		},
		content: "none",
	},
	{
		render: ({ inlineContent, updateInlineContent, editor, contentRef }) => {
			const latex = inlineContent.props.latex ?? "";
			const ref = useRef<MathfieldElement>(null);

			useLayoutEffect(() => {
				ref.current?.addEventListener("move-out", (e) => {
					const pos = editor._tiptapEditor.view?.posAtDOM(ref.current as Node, 0);
					if (!pos) {
						console.log("No pos found");
						return;
					}
					if (e.detail.direction === "forward") {
						ref.current?.blur();
						editor._tiptapEditor.commands.focus((pos || 0) + 1);
					} else if (e.detail.direction === "backward") {
						ref.current?.blur();
						editor._tiptapEditor.commands.focus(pos || 0);
					}
				});
			}, []);

			return (
				<span ref={contentRef} className={"inline"}>
					<math-field
						ref={ref}
						onInput={(evt: React.ChangeEvent<HTMLElement>) => {
							const value = "value" in evt.target && (evt.target.value as string);
							updateInlineContent({
								type: "inlineMath",
								props: {
									latex: value || "",
								},
							});
						}}
					>
						{latex}
					</math-field>
				</span>
			);
		},
	},
);

this is using the old api (v0.37.0) we haven't upgraded to 0.39 yet but it gets the point across.

This works for the most part, there's a bug where up/down arrow on a line with an inline-math node kinda breaks. but maybe you can take a look at that!