<commit_before>/*
For full html messages, instead of sanitizing html via html-ssr.tsx, we just put the html in a big iframe.

This makes it so, e.g., plotly plots, which are NOT embedded in an iframe, still just work with our
public nbviewer.

Note that some HTML, e.g., anything embedded in markdown cells, still gets rendered via sanitized html.
*/

import { useEffect, useRef } from "react";
import register from "./register";

const IframeHtml = ({ value }) => {
  const iframeRef = useRef<any>(null);
  // After mounting, we measure the content of the iframe and resize to better fit it.
  // TODO: I'm not convinced this works at all; maybe a delay is needed in general, or
  // just fully use https://www.npmjs.com/package/iframe-resizer-react
  // This is important, but not today.
  useEffect(() => {
    if (iframeRef.current == null) return;
    iframeRef.current.height = `${
      iframeRef.current.contentWindow.document.documentElement?.offsetHeight ??
      600
    }px`;
  }, []);

  return (
    <iframe
      ref={iframeRef}
      width="100%"
      height={
        "600px" /* Kind of arbitrary -- but overflow auto below, so scrollable */
      }
      style={{ overflow: "auto", border: 0 }}
      src={value}
      srcDoc={value}
      sandbox="allow-forms allow-scripts allow-same-origin"
    />
  );
};

register("text/html", 5, IframeHtml);<commit_msg>improve share server iframe measuring<commit_after>/*
For full html messages, instead of sanitizing html via html-ssr.tsx, we just put the html in a big iframe.

This makes it so, e.g., plotly plots, which are NOT embedded in an iframe, still just work with our
public nbviewer.

Note that some HTML, e.g., anything embedded in markdown cells, still gets rendered via sanitized html.
*/

import { useEffect, useRef } from "react";
import register from "./register";
import useIsMountedRef from "@cocalc/frontend/app-framework/is-mounted-hook";

const IframeHtml = ({ value }) => {
  const iframeRef = useRef<any>(null);
  const isMountedRef = useIsMountedRef();
  // After mounting, we measure the content of the iframe and resize to better fit it.
  // TODO: Might wnat to switch to https://www.npmjs.com/package/iframe-resizer-react
  // instead of the hack of timeouts below...
  useEffect(() => {
    if (iframeRef.current == null) return;
    const f = () => {
      if (iframeRef.current != null && isMountedRef.current) {
        iframeRef.current.height = `${
          iframeRef.current.contentWindow.document.documentElement
            ?.offsetHeight ?? 600
        }px`;
      }
    };
    f();
    setTimeout(f, 10);
    setTimeout(f, 250);
  }, []);

  return (
    <iframe
      ref={iframeRef}
      width="100%"
      height={
        "600px" /* Kind of arbitrary -- but overflow auto below, so scrollable */
      }
      style={{ overflow: "auto", border: 0 }}
      src={value}
      srcDoc={value}
      sandbox="allow-forms allow-scripts allow-same-origin"
    />
  );
};

register("text/html", 5, IframeHtml);
{'fraction_non_alphanumeric': 0.12458471760797342, 'fraction_numerical': 0.008970099667774087, 'mean_word_length': 2.9670619235836626, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 12, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3022247', 'n_tokens_mistral': 959, 'n_tokens_neox': 893, 'n_words': 310}