// packages/block-library/src/embed/wp-embed-preview.js
import { useMergeRefs, useFocusableIframe } from "@wordpress/compose";
import { useRef, useEffect, useMemo } from "@wordpress/element";
import { jsx } from "react/jsx-runtime";
var attributeMap = {
  class: "className",
  frameborder: "frameBorder",
  marginheight: "marginHeight",
  marginwidth: "marginWidth"
};
function WpEmbedPreview({ html }) {
  const ref = useRef();
  const props = useMemo(() => {
    const doc = new window.DOMParser().parseFromString(html, "text/html");
    const iframe = doc.querySelector("iframe");
    const iframeProps = {};
    if (!iframe) {
      return iframeProps;
    }
    Array.from(iframe.attributes).forEach(({ name, value }) => {
      if (name === "style") {
        return;
      }
      iframeProps[attributeMap[name] || name] = value;
    });
    return iframeProps;
  }, [html]);
  useEffect(() => {
    const { ownerDocument } = ref.current;
    const { defaultView } = ownerDocument;
    function resizeWPembeds({ data: { secret, message, value } = {} }) {
      if (message !== "height" || secret !== props["data-secret"]) {
        return;
      }
      ref.current.height = value;
    }
    defaultView.addEventListener("message", resizeWPembeds);
    return () => {
      defaultView.removeEventListener("message", resizeWPembeds);
    };
  }, []);
  return /* @__PURE__ */ jsx("div", { className: "wp-block-embed__wrapper", children: /* @__PURE__ */ jsx(
    "iframe",
    {
      ref: useMergeRefs([ref, useFocusableIframe()]),
      title: props.title,
      ...props
    }
  ) });
}
export {
  WpEmbedPreview as default
};
//# sourceMappingURL=wp-embed-preview.js.map
