Move getInsertPosition from RichText to InlineBlocks

WordPress · May 15, 2018 · b8a225a · b8a225a
1 parent 7d6e6a1
commit b8a225a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 19 deletions.
diff --git a/editor/components/rich-text/index.js b/editor/components/rich-text/index.js
@@ -123,7 +123,6 @@ export class RichText extends Component {
 		this.onPaste = this.onPaste.bind( this );
 		this.onCreateUndoLevel = this.onCreateUndoLevel.bind( this );
 		this.setFocusedElement = this.setFocusedElement.bind( this );
-		this.getInsertPosition = this.getInsertPosition.bind( this );
 
 		this.state = {
 			formats: {},
@@ -441,18 +440,6 @@ export class RichText extends Component {
 		};
 	}
 
-	getInsertPosition() {
-		// The container is relatively positioned.
-		const containerPosition = this.containerRef.current.getBoundingClientRect();
-		const rect = getRectangleFromRange( this.editor.selection.getRng() );
-
-		return {
-			top: rect.top - containerPosition.top,
-			left: rect.right - containerPosition.left,
-			height: rect.height,
-		};
-	}
-
 	/**
 	 * Handles a keydown event from tinyMCE.
 	 *
@@ -888,7 +875,7 @@ export class RichText extends Component {
 				{ isSelected &&
 					<InlineBlocks
 						editor={ this.editor }
-						getInsertPosition={ this.getInsertPosition }
+						containerRef={ this.containerRef }
 					/>
 				}
 				<Autocomplete onReplace={ this.props.onReplace } completers={ autocompleters }>

diff --git a/editor/components/rich-text/inline-blocks.js b/editor/components/rich-text/inline-blocks.js
@@ -4,6 +4,7 @@
 import { Component, Fragment, compose } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { withSafeTimeout } from '@wordpress/components';
+import { getRectangleFromRange } from '@wordpress/utils';
 
 /**
  * Internal dependencies
@@ -16,6 +17,7 @@ class InlineBlocks extends Component {
 		super( ...arguments );
 
 		this.insert = this.insert.bind( this );
+		this.getInsertPosition = this.getInsertPosition.bind( this );
 		this.onSelectMedia = this.onSelectMedia.bind( this );
 		this.openMediaLibrary = this.openMediaLibrary.bind( this );
 		this.closeMediaLibrary = this.closeMediaLibrary.bind( this );
@@ -44,6 +46,20 @@ class InlineBlocks extends Component {
 		this.props.setInsertUnavailable();
 	}
 
+	getInsertPosition() {
+		const { containerRef, editor } = this.props;
+
+		// The container is relatively positioned.
+		const containerPosition = containerRef.current.getBoundingClientRect();
+		const rect = getRectangleFromRange( editor.selection.getRng() );
+
+		return {
+			top: rect.top - containerPosition.top,
+			left: rect.right - containerPosition.left,
+			height: rect.height,
+		};
+	}
+
 	insert() {
 		const {
 			inlineBlockForInsert,
@@ -81,17 +97,14 @@ class InlineBlocks extends Component {
 	}
 
 	render() {
-		const {
-			isInlineInsertionPointVisible,
-			getInsertPosition,
-		} = this.props;
+		const { isInlineInsertionPointVisible } = this.props;
 		const { mediaLibraryOpen } = this.state;
 
 		return (
 			<Fragment>
 				{ isInlineInsertionPointVisible &&
 					<InlineInsertionPoint
-						style={ getInsertPosition() }
+						style={ this.getInsertPosition() }
 					/>
 				}
 				{ mediaLibraryOpen &&