@wordpress/block-library
Version:
Block library for the WordPress editor.
55 lines (54 loc) • 1.68 kB
JavaScript
// 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