Display block boundaries when cursor moves while typing

editor/actions.js

@@ -75,3 +75,31 @@ export function mergeBlocks( blockA, blockB ) {
 		blocks: [ blockA, blockB ],
 	};
 }
+
+/**
+ * Returns an action object used in signalling that the user has begun to type
+ * within a block's editable field.
+ *
+ * @param  {String} uid Block UID
+ * @return {Object}     Action object
+ */
+export function startTypingInBlock( uid ) {
+	return {
+		type: 'START_TYPING',
+		uid,
+	};
+}
+
+/**
+ * Returns an action object used in signalling that the user has stopped typing
+ * within a block's editable field.
+ *
+ * @param  {String} uid Block UID
+ * @return {Object}     Action object
+ */
+export function stopTypingInBlock( uid ) {
+	return {
+		type: 'STOP_TYPING',
+		uid,
+	};
+}

editor/modes/visual-editor/block.js

@@ -24,6 +24,8 @@ import {
 	mergeBlocks,
 	insertBlock,
 	clearSelectedBlock,
+	startTypingInBlock,
+	stopTypingInBlock,
 } from '../../actions';
 import {
 	getPreviousBlock,
@@ -50,16 +52,18 @@ class VisualEditorBlock extends wp.element.Component {
 		this.setAttributes = this.setAttributes.bind( this );
 		this.maybeHover = this.maybeHover.bind( this );
 		this.maybeStartTyping = this.maybeStartTyping.bind( this );
+		this.stopTyping = this.stopTyping.bind( this );
 		this.removeOrDeselect = this.removeOrDeselect.bind( this );
 		this.mergeBlocks = this.mergeBlocks.bind( this );
 		this.onFocus = this.onFocus.bind( this );
 		this.onPointerDown = this.onPointerDown.bind( this );
 		this.previousOffset = null;
 	}
 
-	bindBlockNode( node ) {
-		this.node = node;
-		this.props.blockRef( node );
+	componentDidMount() {
+		if ( this.props.focus ) {
+			this.node.focus();
+		}
 	}
 
 	componentWillReceiveProps( newProps ) {
@@ -72,6 +76,45 @@ class VisualEditorBlock extends wp.element.Component {
 		}
 	}
 
+	componentDidUpdate( prevProps ) {
+		// Preserve scroll prosition when block rearranged
+		if ( this.previousOffset ) {
+			window.scrollTo(
+				window.scrollX,
+				window.scrollY + this.node.getBoundingClientRect().top - this.previousOffset
+			);
+			this.previousOffset = null;
+		}
+
+		// Focus node when focus state is programmatically transferred.
+		if ( this.props.focus && ! prevProps.focus ) {
+			this.node.focus();
+		}
+
+		// Bind or unbind mousemove from page when user starts or stops typing
+		const { isTyping } = this.props;
+		if ( isTyping !== prevProps.isTyping ) {
+			if ( isTyping ) {
+				document.addEventListener( 'mousemove', this.stopTyping );
+			} else {
+				this.removeStopTypingListener();
+			}
+		}
+	}
+
+	componentWillUnmount() {
+		this.removeStopTypingListener();
+	}
+
+	removeStopTypingListener() {
+		document.removeEventListener( 'mousemove', this.stopTyping );
+	}
+
+	bindBlockNode( node ) {
+		this.node = node;
+		this.props.blockRef( node );
+	}
+
 	setAttributes( attributes ) {
 		const { block, onChange } = this.props;
 		onChange( block.uid, {
@@ -104,6 +147,10 @@ class VisualEditorBlock extends wp.element.Component {
 		}
 	}
 
+	stopTyping() {
+		this.props.onStopTyping();
+	}
+
 	removeOrDeselect( { keyCode, target } ) {
 		const {
 			uid,
@@ -153,27 +200,6 @@ class VisualEditorBlock extends wp.element.Component {
 		}
 	}
 
-	componentDidUpdate( prevProps ) {
-		if ( this.previousOffset ) {
-			window.scrollTo(
-				window.scrollX,
-				window.scrollY + this.node.getBoundingClientRect().top - this.previousOffset
-			);
-			this.previousOffset = null;
-		}
-
-		// Focus node when focus state is programmatically transferred.
-		if ( this.props.focus && ! prevProps.focus ) {
-			this.node.focus();
-		}
-	}
-
-	componentDidMount() {
-		if ( this.props.focus ) {
-			this.node.focus();
-		}
-	}
-
 	onFocus( event ) {
 		if ( event.target === this.node ) {
 			this.props.onSelect();
@@ -318,12 +344,15 @@ export default connect(
 		onDeselect() {
 			dispatch( clearSelectedBlock() );
 		},
+
 		onStartTyping() {
-			dispatch( {
-				type: 'START_TYPING',
-				uid: ownProps.uid,
-			} );
+			dispatch( startTypingInBlock( ownProps.uid ) );
+		},
+
+		onStopTyping() {
+			dispatch( stopTypingInBlock( ownProps.uid ) );
 		},
+
 		onHover() {
 			dispatch( {
 				type: 'TOGGLE_BLOCK_HOVERED',

editor/state.js

@@ -299,6 +299,16 @@ export function selectedBlock( state = {}, action ) {
 				typing: true,
 			};
 
+		case 'STOP_TYPING':
+			if ( action.uid !== state.uid ) {
+				return state;
+			}
+
+			return {
+				...state,
+				typing: false,
+			};
+
 		case 'REPLACE_BLOCKS':
 			if ( ! action.blocks || ! action.blocks.length || action.uids.indexOf( state.uid ) === -1 ) {
 				return state;

editor/test/actions.js

@@ -6,7 +6,12 @@ import { expect } from 'chai';
 /**
  * Internal dependencies
  */
-import { focusBlock, replaceBlocks } from '../actions';
+import {
+	focusBlock,
+	replaceBlocks,
+	startTypingInBlock,
+	stopTypingInBlock,
+} from '../actions';
 
 describe( 'actions', () => {
 	describe( 'focusBlock', () => {
@@ -36,4 +41,22 @@ describe( 'actions', () => {
 			} );
 		} );
 	} );
+
+	describe( 'startTypingInBlock', () => {
+		it( 'should return the START_TYPING action', () => {
+			expect( startTypingInBlock( 'chicken' ) ).to.eql( {
+				type: 'START_TYPING',
+				uid: 'chicken',
+			} );
+		} );
+	} );
+
+	describe( 'stopTypingInBlock', () => {
+		it( 'should return the STOP_TYPING action', () => {
+			expect( stopTypingInBlock( 'chicken' ) ).to.eql( {
+				type: 'STOP_TYPING',
+				uid: 'chicken',
+			} );
+		} );
+	} );
 } );

editor/test/state.js

@@ -798,6 +798,29 @@ describe( 'state', () => {
 			expect( state ).to.eql( { uid: 'chicken', typing: true, focus: {} } );
 		} );
 
+		it( 'should do nothing if typing stopped not within selected block', () => {
+			const original = selectedBlock( undefined, {} );
+			const state = selectedBlock( original, {
+				type: 'STOP_TYPING',
+				uid: 'chicken',
+			} );
+
+			expect( state ).to.equal( original );
+		} );
+
+		it( 'should reset typing flag if typing stopped within selected block', () => {
+			const original = selectedBlock( undefined, {
+				type: 'START_TYPING',
+				uid: 'chicken',
+			} );
+			const state = selectedBlock( original, {
+				type: 'STOP_TYPING',
+				uid: 'chicken',
+			} );
+
+			expect( state ).to.eql( { uid: 'chicken', typing: false, focus: {} } );
+		} );
+
 		it( 'should set the typing flag and merge the existing state', () => {
 			const original = deepFreeze( { uid: 'ribs', typing: false, focus: { editable: 'citation' } } );
 			const state = selectedBlock( original, {