Retrieving RichText HTML

EXPERIMENTAL.

Approach 1

import React, { useEffect, useRef, Fragment } from "react";
// Option A — log the rendered HTML (what ends up in the DOM)
interface MyComponentProps {
  content?: React.ReactNode;
}

export const MyComponent = ({ content }: MyComponentProps) => {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (ref.current) console.log(ref.current.innerHTML);
  }, [content]);

  return (
    <div ref={ref} className="content-wrapper">
      {content}
    </div>
  );
};

Approach 2

// Option B — log an HTML string without touching the DOM
import React, { Fragment } from "react";
import { renderToStaticMarkup } from "react-dom/server";

interface MyComponentProps {
  content?: React.ReactNode;
}

export const MyComponent = ({ content }: MyComponentProps) => {
  // safe to call anywhere (e.g., inside an effect or event handler)
  const html = typeof content === "string"
    ? content
    : renderToStaticMarkup(<Fragment>{content}</Fragment>);
  console.log(html);

  return <div className="content-wrapper">{content}</div>;
};