@wordpress/block-editor
Version:
243 lines (209 loc) • 8.53 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement, Fragment } from "@wordpress/element";
/**
* External dependencies
*/
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { useState, createPortal, forwardRef, useMemo, useReducer, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { useResizeObserver, useMergeRefs, useRefEffect, useDisabled } from '@wordpress/compose';
import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
/**
* Internal dependencies
*/
import { useBlockSelectionClearer } from '../block-selection-clearer';
import { useWritingFlow } from '../writing-flow';
import { useCompatibilityStyles } from './use-compatibility-styles';
import { store as blockEditorStore } from '../../store';
/**
* Bubbles some event types (keydown, keypress, and dragover) to parent document
* document to ensure that the keyboard shortcuts and drag and drop work.
*
* Ideally, we should remove event bubbling in the future. Keyboard shortcuts
* should be context dependent, e.g. actions on blocks like Cmd+A should not
* work globally outside the block editor.
*
* @param {Document} doc Document to attach listeners to.
*/
function bubbleEvents(doc) {
const {
defaultView
} = doc;
const {
frameElement
} = defaultView;
function bubbleEvent(event) {
const prototype = Object.getPrototypeOf(event);
const constructorName = prototype.constructor.name;
const Constructor = window[constructorName];
const init = {};
for (const key in event) {
init[key] = event[key];
}
if (event instanceof defaultView.MouseEvent) {
const rect = frameElement.getBoundingClientRect();
init.clientX += rect.left;
init.clientY += rect.top;
}
const newEvent = new Constructor(event.type, init);
const cancelled = !frameElement.dispatchEvent(newEvent);
if (cancelled) {
event.preventDefault();
}
}
const eventTypes = ['dragover', 'mousemove'];
for (const name of eventTypes) {
doc.addEventListener(name, bubbleEvent);
}
}
function useParsedAssets(html) {
return useMemo(() => {
const doc = document.implementation.createHTMLDocument('');
doc.body.innerHTML = html;
return Array.from(doc.body.children);
}, [html]);
}
async function loadScript(head, {
id,
src
}) {
return new Promise((resolve, reject) => {
const script = head.ownerDocument.createElement('script');
script.id = id;
if (src) {
script.src = src;
script.onload = () => resolve();
script.onerror = () => reject();
} else {
resolve();
}
head.appendChild(script);
});
}
function Iframe({
contentRef,
children,
tabIndex = 0,
scale = 1,
frameSize = 0,
expand = false,
readonly,
forwardedRef: ref,
...props
}) {
var _assets$styles;
const assets = useSelect(select => select(blockEditorStore).getSettings().__unstableResolvedAssets, []);
const [, forceRender] = useReducer(() => ({}));
const [iframeDocument, setIframeDocument] = useState();
const [bodyClasses, setBodyClasses] = useState([]);
const compatStyles = useCompatibilityStyles();
const scripts = useParsedAssets(assets?.scripts);
const clearerRef = useBlockSelectionClearer();
const [before, writingFlowRef, after] = useWritingFlow();
const [contentResizeListener, {
height: contentHeight
}] = useResizeObserver();
const setRef = useRefEffect(node => {
let iFrameDocument; // Prevent the default browser action for files dropped outside of dropzones.
function preventFileDropDefault(event) {
event.preventDefault();
}
function onLoad() {
const {
contentDocument,
ownerDocument
} = node;
const {
documentElement
} = contentDocument;
iFrameDocument = contentDocument;
bubbleEvents(contentDocument);
setIframeDocument(contentDocument);
clearerRef(documentElement); // Ideally ALL classes that are added through get_body_class should
// be added in the editor too, which we'll somehow have to get from
// the server in the future (which will run the PHP filters).
setBodyClasses(Array.from(ownerDocument.body.classList).filter(name => name.startsWith('admin-color-') || name.startsWith('post-type-') || name === 'wp-embed-responsive'));
contentDocument.dir = ownerDocument.dir;
documentElement.removeChild(contentDocument.body);
for (const compatStyle of compatStyles) {
if (contentDocument.getElementById(compatStyle.id)) {
continue;
}
contentDocument.head.appendChild(compatStyle.cloneNode(true)); // eslint-disable-next-line no-console
console.warn(`${compatStyle.id} was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe.`, compatStyle);
}
iFrameDocument.addEventListener('dragover', preventFileDropDefault, false);
iFrameDocument.addEventListener('drop', preventFileDropDefault, false);
}
node.addEventListener('load', onLoad);
return () => {
node.removeEventListener('load', onLoad);
iFrameDocument?.removeEventListener('dragover', preventFileDropDefault);
iFrameDocument?.removeEventListener('drop', preventFileDropDefault);
};
}, []);
const headRef = useRefEffect(element => {
scripts.reduce((promise, script) => promise.then(() => loadScript(element, script)), Promise.resolve()).finally(() => {
// When script are loaded, re-render blocks to allow them
// to initialise.
forceRender();
});
}, []);
const disabledRef = useDisabled({
isDisabled: !readonly
});
const bodyRef = useMergeRefs([contentRef, clearerRef, writingFlowRef, disabledRef, headRef]); // Correct doctype is required to enable rendering in standards
// mode. Also preload the styles to avoid a flash of unstyled
// content.
const html = '<!doctype html>' + '<style>html{height:auto!important;}body{margin:0}</style>' + ((_assets$styles = assets?.styles) !== null && _assets$styles !== void 0 ? _assets$styles : '');
const [src, cleanup] = useMemo(() => {
const _src = URL.createObjectURL(new window.Blob([html], {
type: 'text/html'
}));
return [_src, () => URL.revokeObjectURL(_src)];
}, [html]);
useEffect(() => cleanup, [cleanup]); // We need to counter the margin created by scaling the iframe. If the scale
// is e.g. 0.45, then the top + bottom margin is 0.55 (1 - scale). Just the
// top or bottom margin is 0.55 / 2 ((1 - scale) / 2).
const marginFromScaling = contentHeight * (1 - scale) / 2;
return createElement(Fragment, null, tabIndex >= 0 && before, createElement("iframe", _extends({}, props, {
style: { ...props.style,
height: expand ? contentHeight : props.style?.height,
marginTop: scale !== 1 ? -marginFromScaling + frameSize : props.style?.marginTop,
marginBottom: scale !== 1 ? -marginFromScaling + frameSize : props.style?.marginBottom,
transform: scale !== 1 ? `scale( ${scale} )` : props.style?.transform,
transition: 'all .3s'
},
ref: useMergeRefs([ref, setRef]),
tabIndex: tabIndex // Correct doctype is required to enable rendering in standards
// mode. Also preload the styles to avoid a flash of unstyled
// content.
,
src: src,
title: __('Editor canvas')
}), iframeDocument && createPortal(createElement("body", {
ref: bodyRef,
className: classnames('block-editor-iframe__body', 'editor-styles-wrapper', ...bodyClasses)
}, contentResizeListener, createElement(StyleProvider, {
document: iframeDocument
}, children)), iframeDocument.documentElement)), tabIndex >= 0 && after);
}
function IframeIfReady(props, ref) {
const isInitialised = useSelect(select => select(blockEditorStore).getSettings().__internalIsInitialized, []); // We shouldn't render the iframe until the editor settings are initialised.
// The initial settings are needed to get the styles for the srcDoc, which
// cannot be changed after the iframe is mounted. srcDoc is used to to set
// the initial iframe HTML, which is required to avoid a flash of unstyled
// content.
if (!isInitialised) {
return null;
}
return createElement(Iframe, _extends({}, props, {
forwardedRef: ref
}));
}
export default forwardRef(IframeIfReady);
//# sourceMappingURL=index.js.map