UNPKG

@wordpress/block-library

Version:
55 lines (54 loc) 1.68 kB
// 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