From 6d4f092c6eeda7e5b0ceb39645538558bd5f35d4 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 13 Jun 2017 14:52:26 -0400 Subject: [PATCH] Trigger typing stopped when mouse moves anywhere on page --- editor/modes/visual-editor/block.js | 82 ++++++++++++++++++----------- 1 file changed, 51 insertions(+), 31 deletions(-) diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js index dea9966d7fbff..1d817b2a7caf5 100644 --- a/editor/modes/visual-editor/block.js +++ b/editor/modes/visual-editor/block.js @@ -52,6 +52,7 @@ 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 ); @@ -59,9 +60,10 @@ class VisualEditorBlock extends wp.element.Component { 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();