@wordpress/block-library
Version:
Block library for the WordPress editor.
8 lines (7 loc) • 3.59 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/embed/wp-embed-preview.js"],
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMergeRefs, useFocusableIframe } from '@wordpress/compose';\nimport { useRef, useEffect, useMemo } from '@wordpress/element';\n\n/** @typedef {import('react').SyntheticEvent} SyntheticEvent */\n\nconst attributeMap = {\n\tclass: 'className',\n\tframeborder: 'frameBorder',\n\tmarginheight: 'marginHeight',\n\tmarginwidth: 'marginWidth',\n};\n\nexport default function WpEmbedPreview( { html } ) {\n\tconst ref = useRef();\n\tconst props = useMemo( () => {\n\t\tconst doc = new window.DOMParser().parseFromString( html, 'text/html' );\n\t\tconst iframe = doc.querySelector( 'iframe' );\n\t\tconst iframeProps = {};\n\n\t\tif ( ! iframe ) {\n\t\t\treturn iframeProps;\n\t\t}\n\n\t\tArray.from( iframe.attributes ).forEach( ( { name, value } ) => {\n\t\t\tif ( name === 'style' ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tiframeProps[ attributeMap[ name ] || name ] = value;\n\t\t} );\n\n\t\treturn iframeProps;\n\t}, [ html ] );\n\n\tuseEffect( () => {\n\t\tconst { ownerDocument } = ref.current;\n\t\tconst { defaultView } = ownerDocument;\n\n\t\t/**\n\t\t * Checks for WordPress embed events signaling the height change when\n\t\t * iframe content loads or iframe's window is resized. The event is\n\t\t * sent from WordPress core via the window.postMessage API.\n\t\t *\n\t\t * References:\n\t\t * window.postMessage:\n\t\t * https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage\n\t\t * WordPress core embed-template on load:\n\t\t * https://github.com/WordPress/WordPress/blob/HEAD/wp-includes/js/wp-embed-template.js#L143\n\t\t * WordPress core embed-template on resize:\n\t\t * https://github.com/WordPress/WordPress/blob/HEAD/wp-includes/js/wp-embed-template.js#L187\n\t\t *\n\t\t * @param {MessageEvent} event Message event.\n\t\t */\n\t\tfunction resizeWPembeds( { data: { secret, message, value } = {} } ) {\n\t\t\tif ( message !== 'height' || secret !== props[ 'data-secret' ] ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tref.current.height = value;\n\t\t}\n\n\t\tdefaultView.addEventListener( 'message', resizeWPembeds );\n\t\treturn () => {\n\t\t\tdefaultView.removeEventListener( 'message', resizeWPembeds );\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<div className=\"wp-block-embed__wrapper\">\n\t\t\t<iframe\n\t\t\t\tref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }\n\t\t\t\ttitle={ props.title }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],
"mappings": ";AAGA,SAAS,cAAc,0BAA0B;AACjD,SAAS,QAAQ,WAAW,eAAe;AAmExC;AA/DH,IAAM,eAAe;AAAA,EACpB,OAAO;AAAA,EACP,aAAa;AAAA,EACb,cAAc;AAAA,EACd,aAAa;AACd;AAEe,SAAR,eAAiC,EAAE,KAAK,GAAI;AAClD,QAAM,MAAM,OAAO;AACnB,QAAM,QAAQ,QAAS,MAAM;AAC5B,UAAM,MAAM,IAAI,OAAO,UAAU,EAAE,gBAAiB,MAAM,WAAY;AACtE,UAAM,SAAS,IAAI,cAAe,QAAS;AAC3C,UAAM,cAAc,CAAC;AAErB,QAAK,CAAE,QAAS;AACf,aAAO;AAAA,IACR;AAEA,UAAM,KAAM,OAAO,UAAW,EAAE,QAAS,CAAE,EAAE,MAAM,MAAM,MAAO;AAC/D,UAAK,SAAS,SAAU;AACvB;AAAA,MACD;AACA,kBAAa,aAAc,IAAK,KAAK,IAAK,IAAI;AAAA,IAC/C,CAAE;AAEF,WAAO;AAAA,EACR,GAAG,CAAE,IAAK,CAAE;AAEZ,YAAW,MAAM;AAChB,UAAM,EAAE,cAAc,IAAI,IAAI;AAC9B,UAAM,EAAE,YAAY,IAAI;AAiBxB,aAAS,eAAgB,EAAE,MAAM,EAAE,QAAQ,SAAS,MAAM,IAAI,CAAC,EAAE,GAAI;AACpE,UAAK,YAAY,YAAY,WAAW,MAAO,aAAc,GAAI;AAChE;AAAA,MACD;AAEA,UAAI,QAAQ,SAAS;AAAA,IACtB;AAEA,gBAAY,iBAAkB,WAAW,cAAe;AACxD,WAAO,MAAM;AACZ,kBAAY,oBAAqB,WAAW,cAAe;AAAA,IAC5D;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,SACC,oBAAC,SAAI,WAAU,2BACd;AAAA,IAAC;AAAA;AAAA,MACA,KAAM,aAAc,CAAE,KAAK,mBAAmB,CAAE,CAAE;AAAA,MAClD,OAAQ,MAAM;AAAA,MACZ,GAAG;AAAA;AAAA,EACN,GACD;AAEF;",
"names": []
}