forgeplus-react/src/components/render-html.jsx

import React, { useEffect, useRef } from "react";
import "katex/dist/katex.min.css";

import marked, { getTocContent, cleanToc } from "../common/marked";

let preRegex = /<pre[^>]*>/g;

export default ({ value = "", is_md = true, className, style = {} }) => {
  let str = String(value);
  let html = is_md ? marked(str) : value;
  if (str.match(/\[TOC\]/)) {
    html = html.replace("<p>[TOC]</p>", getTocContent());
    cleanToc();
  }

  html = html.replace(/▁/g, "▁▁▁");
  // html = html.replace(/\n/g,"<br />");
  const el = useRef();

  function onAncherHandler(e) {
    let target = e.target;
    if (target.tagName.toUpperCase() === "A") {
      let ancher = target.getAttribute("href");
      if (ancher.startsWith("#")) {
        e.preventDefault();
        let viewEl = document.getElementById(ancher.replace("#", ""));
        if (viewEl) {
          viewEl.parentNode.scrollTop = viewEl.offsetTop;
        }
      }
    }
  }

  useEffect(() => {
    if (el.current && html) {
      if (html.match(preRegex)) {
        window.PR.prettyPrint();
      }
    }
    if (el.current) {
      el.current.addEventListener("click", onAncherHandler);
      return () => {
        el.current.removeEventListener("click", onAncherHandler);
      };
    }
  }, [html, el.current, onAncherHandler]);

  return (
    <div
      ref={el}
      style={style}
      className={`${className ? className : ""} markdown-body`}
      dangerouslySetInnerHTML={{ __html: html }}
    ></div>
  );
};