Trigger typing stopped when mouse moves anywhere on page

WordPress · Jun 13, 2017 · 6d4f092 · 6d4f092
1 parent 0d28bfc
commit 6d4f092
Showing 1 changed file with 51 additions and 31 deletions.
diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js
@@ -52,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 ) {
@@ -74,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, {
@@ -85,17 +126,13 @@ class VisualEditorBlock extends wp.element.Component {
 	}
 
 	maybeHover() {
-		const { isHovered, isSelected, isTyping, isMultiSelected, onStopTyping, onHover } = this.props;
+		const { isHovered, isSelected, isMultiSelected, onHover } = this.props;
 
-		if ( isMultiSelected ) {
+		if ( isHovered || isSelected || isMultiSelected ) {
 			return;
 		}
 
-		if ( isSelected && isTyping ) {
-			onStopTyping();
-		} else if ( ! isSelected && ! isHovered ) {
-			onHover();
-		}
+		onHover();
 	}
 
 	maybeStartTyping() {
@@ -110,6 +147,10 @@ class VisualEditorBlock extends wp.element.Component {
 		}
 	}
 
+	stopTyping() {
+		this.props.onStopTyping();
+	}
+
 	removeOrDeselect( { keyCode, target } ) {
 		const {
 			uid,
@@ -159,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();