Skip to content

Commit

Permalink
Adjust getBlockDOMNode
Browse files Browse the repository at this point in the history
  • Loading branch information
ellatrix committed Oct 2, 2020
1 parent 3986976 commit 479d6a3
Show file tree
Hide file tree
Showing 11 changed files with 73 additions and 26 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,10 @@ function InsertionPointInserter( {
return;
}

const { ownerDocument } = ref.current;
const targetRect = target.getBoundingClientRect();
const isReverse = clientY < targetRect.top + targetRect.height / 2;
const blockNode = getBlockDOMNode( clientId );
const blockNode = getBlockDOMNode( clientId, ownerDocument );
const container = isReverse ? containerRef.current : blockNode;
const closest =
getClosestTabbable( blockNode, true, container ) || blockNode;
Expand Down Expand Up @@ -100,7 +101,8 @@ function InsertionPointPopover( {
containerRef,
showInsertionPoint,
} ) {
const element = getBlockDOMNode( clientId );
const { ownerDocument } = containerRef.current;
const element = getBlockDOMNode( clientId, ownerDocument );

return (
<Popover
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,10 @@ export default function useMultiSelection( ref ) {
const selection = defaultView.getSelection();

if ( selection.rangeCount && ! selection.isCollapsed ) {
const blockNode = getBlockDOMNode( selectedBlockClientId );
const blockNode = getBlockDOMNode(
selectedBlockClientId,
ownerDocument
);
const { startContainer, endContainer } = selection.getRangeAt(
0
);
Expand All @@ -129,8 +132,8 @@ export default function useMultiSelection( ref ) {
const start = multiSelectedBlockClientIds[ 0 ];
const end = multiSelectedBlockClientIds[ length - 1 ];

let startNode = getBlockDOMNode( start );
let endNode = getBlockDOMNode( end );
let startNode = getBlockDOMNode( start, ownerDocument );
let endNode = getBlockDOMNode( end, ownerDocument );

const selection = defaultView.getSelection();
const range = ownerDocument.createRange();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,10 @@ const FocusCapture = forwardRef(

// If there is a selected block, move focus to the first or last
// tabbable element depending on the direction.
const wrapper = getBlockDOMNode( selectedClientId );
const wrapper = getBlockDOMNode(
selectedClientId,
ref.current.ownerDocument
);

if ( isReverse ) {
const tabbables = focus.tabbable.find( wrapper );
Expand Down
27 changes: 21 additions & 6 deletions packages/block-editor/src/components/writing-flow/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -305,12 +305,14 @@ export default function WritingFlow( { children } ) {
function onMouseDown( event ) {
verticalRect.current = null;

const { ownerDocument } = event.target;

// Clicking inside a selected block should exit navigation mode and block moving mode.
if (
isNavigationMode &&
selectedBlockClientId &&
isInsideRootBlock(
getBlockDOMNode( selectedBlockClientId ),
getBlockDOMNode( selectedBlockClientId, ownerDocument ),
event.target
)
) {
Expand Down Expand Up @@ -417,6 +419,8 @@ export default function WritingFlow( { children } ) {
const hasModifier =
isShift || event.ctrlKey || event.altKey || event.metaKey;
const isNavEdge = isVertical ? isVerticalEdge : isHorizontalEdge;
const { ownerDocument } = container.current;
const { defaultView } = ownerDocument;

// In navigation mode, tab and arrows navigate from block to block.
if ( isNavigationMode ) {
Expand Down Expand Up @@ -489,11 +493,22 @@ export default function WritingFlow( { children } ) {
event.preventDefault();
selectBlock( focusedBlockUid );
} else if ( isTab && selectedBlockClientId ) {
const wrapper = getBlockDOMNode( selectedBlockClientId );
const wrapper = getBlockDOMNode(
selectedBlockClientId,
ownerDocument
);
let nextTabbable;

if ( navigateDown ) {
nextTabbable = focus.tabbable.findNext( wrapper );

if ( ! nextTabbable ) {
nextTabbable =
ownerDocument.defaultView.frameElement;
nextTabbable = focus.tabbable.findNext(
nextTabbable
);
}
} else {
nextTabbable = focus.tabbable.findPrevious( wrapper );
}
Expand All @@ -517,7 +532,10 @@ export default function WritingFlow( { children } ) {
// Navigation mode (press Esc), to navigate through blocks.
if ( selectedBlockClientId ) {
if ( isTab ) {
const wrapper = getBlockDOMNode( selectedBlockClientId );
const wrapper = getBlockDOMNode(
selectedBlockClientId,
ownerDocument
);

if ( isShift ) {
if ( target === wrapper ) {
Expand Down Expand Up @@ -559,9 +577,6 @@ export default function WritingFlow( { children } ) {
return;
}

const { ownerDocument } = container.current;
const { defaultView } = ownerDocument;

// When presing any key other than up or down, the initial vertical
// position must ALWAYS be reset. The vertical position is saved so it
// can be restored as well as possible on sebsequent vertical arrow key
Expand Down
14 changes: 8 additions & 6 deletions packages/block-editor/src/utils/dom.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,26 @@
* if exists. As much as possible, this helper should be avoided, and used only
* in cases where isolated behaviors need remote access to a block node.
*
* @param {string} clientId Block client ID.
* @param {string} clientId Block client ID.
* @param {Document} doc Document to search.
*
* @return {Element?} Block DOM node.
*/
export function getBlockDOMNode( clientId ) {
return document.getElementById( 'block-' + clientId );
export function getBlockDOMNode( clientId, doc = document ) {
return doc.getElementById( 'block-' + clientId );
}

/**
* Returns the preview container DOM node for a given block client ID, or
* undefined if the container cannot be determined.
*
* @param {string} clientId Block client ID.
* @param {string} clientId Block client ID.
* @param {Document} doc Document to search.
*
* @return {Node|undefined} Preview container DOM node.
*/
export function getBlockPreviewContainerDOMNode( clientId ) {
const domNode = getBlockDOMNode( clientId );
export function getBlockPreviewContainerDOMNode( clientId, doc ) {
const domNode = getBlockDOMNode( clientId, doc );

if ( ! domNode ) {
return;
Expand Down
12 changes: 11 additions & 1 deletion packages/components/src/autocomplete/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -136,8 +136,18 @@ function filterOptions( search, options = [], maxResults = 10 ) {
return filtered;
}

function getActiveWindow( doc ) {
const { activeElement } = doc;

if ( activeElement.nodeName === 'IFRAME' ) {
return getActiveWindow( activeElement.contentDocument );
}

return doc.defaultView;
}

function getRange() {
const selection = window.getSelection();
const selection = getActiveWindow( document ).getSelection();
return selection.rangeCount ? selection.getRangeAt( 0 ) : null;
}

Expand Down
16 changes: 10 additions & 6 deletions packages/components/src/sandbox/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
* WordPress dependencies
*/
import { Component, renderToString, createRef } from '@wordpress/element';
import { withGlobalEvents } from '@wordpress/compose';

/**
* Internal dependencies
Expand Down Expand Up @@ -38,6 +37,9 @@ class Sandbox extends Component {
this.trySandboxWithoutRerender,
false
);
const { ownerDocument } = this.iframe.current;
const { defaultView } = ownerDocument;
defaultView.addEventListener( 'message', this.checkMessageForResize );
}

componentDidUpdate( prevProps ) {
Expand All @@ -51,6 +53,12 @@ class Sandbox extends Component {
'load',
this.trySandboxWithoutRerender
);
const { ownerDocument } = this.iframe.current;
const { defaultView } = ownerDocument;
defaultView.removeEventListener(
'message',
this.checkMessageForResize
);
}

isFrameAccessible() {
Expand All @@ -73,7 +81,7 @@ class Sandbox extends Component {
}

// Verify that the mounted element is the source of the message
if ( ! iframe || iframe.contentWindow !== event.source ) {
if ( ! iframe || iframe !== event.source.frameElement ) {
return;
}

Expand Down Expand Up @@ -260,8 +268,4 @@ class Sandbox extends Component {
}
}

Sandbox = withGlobalEvents( {
message: 'checkMessageForResize',
} )( Sandbox );

export default Sandbox;
2 changes: 2 additions & 0 deletions packages/format-library/src/link/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ export const link = {
activeAttributes,
value,
onChange,
forwardedRef,
} = this.props;

return (
Expand Down Expand Up @@ -160,6 +161,7 @@ export const link = {
activeAttributes={ activeAttributes }
value={ value }
onChange={ onChange }
forwardedRef={ forwardedRef }
/>
) }
</>
Expand Down
5 changes: 4 additions & 1 deletion packages/format-library/src/link/inline.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ function InlineLinkUI( {
onChange,
speak,
stopAddingLink,
forwardedRef,
} ) {
/**
* A unique key is generated when switching between editing and not editing
Expand Down Expand Up @@ -54,7 +55,9 @@ function InlineLinkUI( {
const [ nextLinkValue, setNextLinkValue ] = useState();

const anchorRef = useMemo( () => {
const selection = window.getSelection();
const { ownerDocument } = forwardedRef.current;
const { defaultView } = ownerDocument;
const selection = defaultView.getSelection();

if ( ! selection.rangeCount ) {
return;
Expand Down
2 changes: 2 additions & 0 deletions packages/rich-text/src/component/format-edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export default function FormatEdit( {
value,
allowedFormats,
withoutInteractiveFormatting,
forwardedRef,
} ) {
return formatTypes.map( ( { name, edit: Edit, tagName } ) => {
if ( ! Edit ) {
Expand Down Expand Up @@ -67,6 +68,7 @@ export default function FormatEdit( {
value={ value }
onChange={ onChange }
onFocus={ onFocus }
forwardedRef={ forwardedRef }
/>
);
} );
Expand Down
1 change: 1 addition & 0 deletions packages/rich-text/src/component/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -1138,6 +1138,7 @@ function RichText(
onChange={ handleChange }
onFocus={ focus }
formatTypes={ formatTypes }
forwardedRef={ ref }
/>
) }
{ children &&
Expand Down

0 comments on commit 479d6a3

Please sign in to comment.