// src/components/LatexRenderer/LatexRenderer.tsx
import "katex/dist/katex.min.css";

// src/components/HtmlMathRenderer/KatexMath.tsx
import katex from "katex";
import { Fragment, jsx } from "react/jsx-runtime";
var KatexMath = ({
  math,
  displayMode = false,
  renderError
}) => {
  let html;
  try {
    html = katex.renderToString(math, {
      displayMode,
      throwOnError: true
    });
  } catch (error_) {
    return /* @__PURE__ */ jsx(Fragment, { children: renderError ? renderError(error_) : null });
  }
  const Tag = displayMode ? "div" : "span";
  return /* @__PURE__ */ jsx(
    Tag,
    {
      "data-testid": "react-katex",
      dangerouslySetInnerHTML: { __html: html }
    }
  );
};

// src/components/LatexRenderer/LatexRenderer.tsx
import DOMPurify from "dompurify";
import parse, {
  Element
} from "html-react-parser";

// src/utils/utils.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// src/components/LatexRenderer/LatexRenderer.tsx
import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
var sanitizeHtml = (value) => {
  return DOMPurify.sanitize(value, {
    ADD_ATTR: ["data-latex", "data-display-mode", "data-math", "data-math-id"]
  });
};
var decodeHtmlEntities = (str) => {
  const textarea = document.createElement("textarea");
  textarea.innerHTML = str;
  return textarea.value;
};
var cleanLatex = (str) => {
  return str.replaceAll(/[\u200B-\u200D\uFEFF]/g, "").trim();
};
var createMathReplacer = (mathParts, errorRenderer) => {
  return (domNode) => {
    if (domNode instanceof Element && domNode.name === "span" && domNode.attribs["data-math-id"]) {
      const mathId = Number.parseInt(domNode.attribs["data-math-id"], 10);
      const mathPart = mathParts[mathId];
      if (!mathPart) return domNode;
      if (mathPart.type === "inline") {
        return /* @__PURE__ */ jsx2(
          KatexMath,
          {
            math: mathPart.latex,
            renderError: () => errorRenderer(mathPart.latex)
          },
          `math-${mathId}`
        );
      } else {
        return /* @__PURE__ */ jsx2("div", { className: "my-2.5 text-center", children: /* @__PURE__ */ jsx2(
          KatexMath,
          {
            math: mathPart.latex,
            displayMode: true,
            renderError: () => errorRenderer(mathPart.latex)
          }
        ) }, `math-${mathId}`);
      }
    }
    return domNode;
  };
};
var LatexRenderer = ({
  content,
  className,
  style,
  onError
}) => {
  const renderContentWithMath = (htmlContent) => {
    if (!htmlContent) return null;
    let processedContent = htmlContent;
    const mathParts = [];
    const mathFormulaPattern = /<span[^>]*class="math-formula"[^>]*data-latex="([^"]*)"[^>]*>[\s\S]*?<\/span>/g;
    processedContent = processedContent.replaceAll(
      mathFormulaPattern,
      (match, latex) => {
        const isDisplayMode = match.includes('data-display-mode="true"');
        const id = mathParts.length;
        mathParts.push({
          id,
          type: isDisplayMode ? "block" : "inline",
          latex: cleanLatex(decodeHtmlEntities(latex))
        });
        return `<span data-math-id="${id}"></span>`;
      }
    );
    const wrappedMathPattern = /<span[^>]*class="math-expression"[^>]*data-math="([^"]*)"[^>]*>.*?<\/span>/g;
    processedContent = processedContent.replaceAll(
      wrappedMathPattern,
      (match, latex) => {
        const id = mathParts.length;
        mathParts.push({
          id,
          type: "inline",
          latex: cleanLatex(decodeHtmlEntities(latex))
        });
        return `<span data-math-id="${id}"></span>`;
      }
    );
    const doubleDollarPattern = /(?<!\\)\$\$([\s\S]+?)\$\$/g;
    processedContent = processedContent.replaceAll(
      doubleDollarPattern,
      (match, latex) => {
        const id = mathParts.length;
        mathParts.push({
          id,
          type: "block",
          latex: cleanLatex(latex)
        });
        return `<span data-math-id="${id}"></span>`;
      }
    );
    const singleDollarPattern = /(?<!\\)\$([\s\S]+?)\$/g;
    processedContent = processedContent.replaceAll(
      singleDollarPattern,
      (match, latex) => {
        const id = mathParts.length;
        mathParts.push({
          id,
          type: "inline",
          latex: cleanLatex(latex)
        });
        return `<span data-math-id="${id}"></span>`;
      }
    );
    const latexTagPattern = /(?:<latex>|&lt;latex&gt;)([\s\S]*?)(?:<\/latex>|&lt;\/latex&gt;)/g;
    processedContent = processedContent.replaceAll(
      latexTagPattern,
      (match, latex) => {
        const id = mathParts.length;
        mathParts.push({
          id,
          type: "inline",
          latex: cleanLatex(latex)
        });
        return `<span data-math-id="${id}"></span>`;
      }
    );
    const latexEnvPattern = /\\begin\{([^}]+)\}([\s\S]*?)\\end\{\1\}/g;
    processedContent = processedContent.replaceAll(latexEnvPattern, (match) => {
      const id = mathParts.length;
      mathParts.push({
        id,
        type: "block",
        latex: cleanLatex(match)
      });
      return `<span data-math-id="${id}"></span>`;
    });
    const sanitizedContent = sanitizeHtml(processedContent);
    const defaultErrorRenderer = (latex) => /* @__PURE__ */ jsxs("span", { className: "text-red-600", children: [
      "Math Error: ",
      latex
    ] });
    const errorRenderer = onError || defaultErrorRenderer;
    const options = {
      replace: createMathReplacer(mathParts, errorRenderer)
    };
    return /* @__PURE__ */ jsx2(Fragment2, { children: parse(sanitizedContent, options) });
  };
  return /* @__PURE__ */ jsx2(
    "div",
    {
      className: cn("whitespace-pre-wrap leading-relaxed", className),
      style,
      children: renderContentWithMath(content)
    }
  );
};
var LatexRenderer_default = LatexRenderer;
export {
  LatexRenderer_default as default
};
//# sourceMappingURL=index.mjs.map