import { jsx as a } from "react/jsx-runtime";
import { useRef as o, useMemo as i, useEffect as m } from "react";
import { p as s, k as l } from "./viewer-deps-BDYoL2Ts.js";
function c(t) {
  if (t.querySelector(".katex")) return;
  const e = t.getAttribute("data-latex") || t.getAttribute("latex");
  if (!e) return;
  const r = t.classList.contains("mtx-math-block");
  try {
    l.render(e, t, {
      throwOnError: !1,
      displayMode: r,
      output: "htmlAndMathml"
    });
  } catch {
    t.textContent = r ? `$$${e}$$` : `$${e}$`;
  }
}
function x({ content: t, className: e }) {
  const r = o(null), n = i(
    () => s.sanitize(t, {
      ADD_TAGS: ["math-field", "span", "div"],
      ADD_ATTR: ["data-latex", "latex", "data-type", "data-mathml"],
      FORBID_TAGS: ["script", "style", "iframe", "object", "embed"],
      FORBID_ATTR: ["onerror", "onload", "onclick", "onmouseover", "onmouseout", "onfocus", "onblur"]
    }),
    [t]
  );
  return m(() => {
    if (!r.current) return;
    r.current.querySelectorAll(
      '.mtx-math-inline, .mtx-math-block, [data-type="math-inline"], [data-type="math-block"]'
    ).forEach(c);
  }, [n]), /* @__PURE__ */ a(
    "div",
    {
      ref: r,
      className: `mtx-content-viewer${e ? ` ${e}` : ""}`,
      dangerouslySetInnerHTML: { __html: n }
    }
  );
}
export {
  x as C
};
