Components: remove __unstablePositionedAtSelection (#15035)

* Components: remove __unstablePositionedAtSelection * Address feedback * Address feedback
WordPress · May 1, 2019 · a9a3907 · a9a3907
1 parent 6552706
commit a9a3907
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 89 deletions.
diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js
@@ -284,7 +284,7 @@ class WritingFlow extends Component {
 		if ( ! isVertical ) {
 			this.verticalRect = null;
 		} else if ( ! this.verticalRect ) {
-			this.verticalRect = computeCaretRect( target );
+			this.verticalRect = computeCaretRect();
 		}
 
 		if ( isShift ) {

diff --git a/packages/components/src/index.js b/packages/components/src/index.js
@@ -43,7 +43,6 @@ export { default as PanelHeader } from './panel/header';
 export { default as PanelRow } from './panel/row';
 export { default as Placeholder } from './placeholder';
 export { default as Popover } from './popover';
-export { default as __unstablePositionedAtSelection } from './positioned-at-selection';
 export { default as QueryControls } from './query-controls';
 export { default as RadioControl } from './radio-control';
 export { default as RangeControl } from './range-control';

diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
@@ -282,6 +282,7 @@ class Popover extends Component {
 			getAnchorRect,
 			expandOnMobile,
 			animate = true,
+			anchorRect,
 			/* eslint-enable no-unused-vars */
 			...contentProps
 		} = this.props;

diff --git a/packages/components/src/positioned-at-selection/index.js b/packages/components/src/positioned-at-selection/index.js
diff --git a/packages/dom/README.md b/packages/dom/README.md
@@ -18,10 +18,6 @@ npm install @wordpress/dom --save
 
 Get the rectangle for the selection in a container.
 
-_Parameters_
-
--   _container_ `Element`: Editable container.
-
 _Returns_
 
 -   `?DOMRect`: The rectangle.

diff --git a/packages/dom/src/dom.js b/packages/dom/src/dom.js
@@ -235,15 +235,9 @@ export function getRectangleFromRange( range ) {
 /**
  * Get the rectangle for the selection in a container.
  *
- * @param {Element} container Editable container.
- *
  * @return {?DOMRect} The rectangle.
  */
-export function computeCaretRect( container ) {
-	if ( ! container.isContentEditable ) {
-		return;
-	}
-
+export function computeCaretRect() {
 	const selection = window.getSelection();
 	const range = selection.rangeCount ? selection.getRangeAt( 0 ) : null;
 

diff --git a/packages/format-library/src/image/index.js b/packages/format-library/src/image/index.js
@@ -1,19 +1,31 @@
 /**
  * WordPress dependencies
  */
-import { Path, SVG, TextControl, Popover, IconButton, __unstablePositionedAtSelection } from '@wordpress/components';
+import { Path, SVG, TextControl, Popover, IconButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { Component, useMemo } from '@wordpress/element';
 import { insertObject } from '@wordpress/rich-text';
 import { MediaUpload, RichTextToolbarButton, MediaUploadCheck } from '@wordpress/block-editor';
 import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
+import { computeCaretRect } from '@wordpress/dom';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 const name = 'core/image';
 
 const stopKeyPropagation = ( event ) => event.stopPropagation();
 
+const PopoverAtImage = ( { dependencies, ...props } ) => {
+	return (
+		<Popover
+			position="bottom center"
+			focusOnMount={ false }
+			anchorRect={ useMemo( () => computeCaretRect(), dependencies ) }
+			{ ...props }
+		/>
+	);
+};
+
 export const image = {
 	name,
 	title: __( 'Image' ),
@@ -81,9 +93,6 @@ export const image = {
 		render() {
 			const { value, onChange, isObjectActive, activeObjectAttributes } = this.props;
 			const { style } = activeObjectAttributes;
-			// Rerender PositionedAtSelection when the selection changes or when
-			// the width changes.
-			const key = value.start + style;
 
 			return (
 				<MediaUploadCheck>
@@ -113,10 +122,11 @@ export const image = {
 							return null;
 						} }
 					/> }
-					{ isObjectActive && <__unstablePositionedAtSelection key={ key }>
-						<Popover
-							position="bottom center"
-							focusOnMount={ false }
+					{ isObjectActive &&
+						<PopoverAtImage
+							// Reposition Popover when the selection changes or
+							// when the width changes.
+							dependencies={ [ style, value.start ] }
 						>
 							{ // Disable reason: KeyPress must be suppressed so the block doesn't hide the toolbar
 							/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ }
@@ -154,8 +164,8 @@ export const image = {
 								<IconButton icon="editor-break" label={ __( 'Apply' ) } type="submit" />
 							</form>
 							{ /* eslint-enable jsx-a11y/no-noninteractive-element-interactions */ }
-						</Popover>
-					</__unstablePositionedAtSelection> }
+						</PopoverAtImage>
+					}
 				</MediaUploadCheck>
 			);
 		}