1import { useMemo } from "react";
2import katex from "katex";
3import "katex/dist/katex.min.css";
4import type { Equation } from "@plate-lab/core";
6/** Renders a method's equations with their captions. */
7export function EquationsView({ equations }: { equations: Equation[] }) {
8 const html = useMemo(
9 () => equations.map((e) => katex.renderToString(e.tex, { displayMode: true, throwOnError: false })),
10 [equations],
11 );
12 return (
13 <div className="pl-equations">
14 {equations.map((e, i) => (
15 <div className="pl-equation" key={i}>
16 <div dangerouslySetInnerHTML={{ __html: html[i] }} />
17 <div className="pl-equation-caption">{e.caption}</div>
18 </div>
19 ))}
20 </div>
21 );
22}