Select objects when clicked

packages/editor/src/components/rich-text/editable.js

@@ -168,6 +168,8 @@ export default class Editable extends Component {
 			onCompositionEnd,
 			onFocus,
 			onBlur,
+			onMouseDown,
+			onTouchStart,
 		} = this.props;
 
 		ariaProps.role = 'textbox';
@@ -188,6 +190,8 @@ export default class Editable extends Component {
 			onBlur,
 			onKeyDown,
 			onCompositionEnd,
+			onMouseDown,
+			onTouchStart,
 		} );
 	}
 }

packages/editor/src/components/rich-text/index.js

@@ -111,6 +111,7 @@ export class RichText extends Component {
 		this.setRef = this.setRef.bind( this );
 		this.valueToEditableHTML = this.valueToEditableHTML.bind( this );
 		this.handleHorizontalNavigation = this.handleHorizontalNavigation.bind( this );
+		this.onPointerDown = this.onPointerDown.bind( this );
 
 		this.formatToValue = memize( this.formatToValue.bind( this ), { size: 1 } );
 
@@ -742,6 +743,32 @@ export class RichText extends Component {
 		this.onSplit( before, after, ...blocks );
 	}
 
+	/**
+	 * Select object when they are clicked. The browser will not set any
+	 * selection when clicking e.g. an image.
+	 *
+	 * @param  {SyntheticEvent} event Synthetic mousedown or touchstart event.
+	 */
+	onPointerDown( event ) {
+		const { target } = event;
+
+		// If the child element has no text content, it must be an object.
+		if ( target === this.editableRef || target.textContent ) {
+			return;
+		}
+
+		const { parentNode } = target;
+		const index = Array.from( parentNode.childNodes ).indexOf( target );
+		const range = target.ownerDocument.createRange();
+		const selection = getSelection();
+
+		range.setStart( target.parentNode, index );
+		range.setEnd( target.parentNode, index + 1 );
+
+		selection.removeAllRanges();
+		selection.addRange( range );
+	}
+
 	componentDidUpdate( prevProps ) {
 		const { tagName, value, isSelected } = this.props;
 
@@ -978,6 +1005,8 @@ export class RichText extends Component {
 								onKeyDown={ this.onKeyDown }
 								onFocus={ this.onFocus }
 								onBlur={ this.onBlur }
+								onMouseDown={ this.onPointerDown }
+								onTouchStart={ this.onPointerDown }
 								multilineTag={ this.multilineTag }
 								multilineWrapperTags={ this.multilineWrapperTags }
 								setRef={ this.setRef }