diff --git a/packages/compose/src/hooks/use-keyboard-shortcut/index.js b/packages/compose/src/hooks/use-keyboard-shortcut/index.js index 95dd997eac11c9..294823c144009f 100644 --- a/packages/compose/src/hooks/use-keyboard-shortcut/index.js +++ b/packages/compose/src/hooks/use-keyboard-shortcut/index.js @@ -8,12 +8,7 @@ import { includes, castArray } from 'lodash'; /** * WordPress dependencies */ -import { - useEffect, - useRef, - createContext, - useContext, -} from '@wordpress/element'; +import { useEffect, useRef } from '@wordpress/element'; /** * A block selection object. @@ -26,8 +21,6 @@ import { * @property {Object} [target] React reference to the DOM element used to catch the keyboard event. */ -const WindowContext = createContext(); - /** * Return true if platform is MacOS. * @@ -59,27 +52,18 @@ function useKeyboardShortcut( eventName = 'keydown', isDisabled = false, // This is important for performance considerations. target, - altWindow, } = {} ) { const currentCallback = useRef( callback ); useEffect( () => { currentCallback.current = callback; }, [ callback ] ); - const win = useContext( WindowContext ); useEffect( () => { if ( isDisabled ) { return; } - - let node = ( altWindow || win || window ).document; - - if ( target && target.current ) { - node = target.current; - } - - const mousetrap = new Mousetrap( node ); + const mousetrap = new Mousetrap( target ? target.current : document ); castArray( shortcuts ).forEach( ( shortcut ) => { const keys = shortcut.split( '+' ); // Determines whether a key is a modifier by the length of the string. @@ -116,6 +100,4 @@ function useKeyboardShortcut( }, [ shortcuts, bindGlobal, eventName, target, isDisabled ] ); } -useKeyboardShortcut.WindowContext = WindowContext; - export default useKeyboardShortcut; diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js index 07847a82b3bcf5..2876611128b319 100644 --- a/packages/edit-site/src/components/block-editor/index.js +++ b/packages/edit-site/src/components/block-editor/index.js @@ -20,7 +20,6 @@ import { BlockSelectionClearer, __experimentalUseResizeCanvas as useResizeCanvas, } from '@wordpress/block-editor'; -import { useKeyboardShortcut } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; /** @@ -37,13 +36,12 @@ export const IFrame = ( { ...props } ) => { const [ contentRef, setContentRef ] = useState(); - const win = contentRef && contentRef.contentWindow; const doc = contentRef && contentRef.contentWindow.document; useEffect( () => { if ( doc ) { doc.body.className = bodyClassName; - doc.body.style.margin = '0px'; + doc.body.style.margin = '0'; doc.head.innerHTML = head; doc.dir = document.dir; @@ -53,14 +51,14 @@ export const IFrame = ( { doc.head.appendChild( styleEl ); } ); - [ ...document.styleSheets ].reduce( ( acc, styleSheet ) => { + // Search the document for stylesheets targetting the editor canvas. + Array.from( document.styleSheets ).reduce( ( acc, styleSheet ) => { + // May fail for external styles. try { const isMatch = [ ...styleSheet.cssRules ].find( ( { selectorText } ) => { - return ( - selectorText.indexOf( - '.editor-styles-wrapper' - ) !== -1 + return selectorText.includes( + '.editor-styles-wrapper' ); } ); @@ -87,9 +85,7 @@ export const IFrame = ( { name="editor-canvas" data-loaded={ !! contentRef } > - - { doc && createPortal( children, doc.body ) } - + { doc && createPortal( children, doc.body ) } ); };