TinyMCE: update wpview and editimage plugins for 4.1.3. Add show/hide of the Edit and Delete buttons on views and images on 'touchend'. See #28595, #29166

Built from https://develop.svn.wordpress.org/trunk@29463


git-svn-id: http://core.svn.wordpress.org/trunk@29241 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/css/media-views-rtl.css

@@ -1787,6 +1787,8 @@
 
 .image-details .embed-media-settings,
 .image-details .embed-media-settings div {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
 
@@ -2319,6 +2321,7 @@
 		margin: 11px 0 0;
 		height: auto;
 		max-width: 65%;
+		max-width: -webkit-calc(100% - 38px);
 		max-width: calc(100% - 38px);
 	}
 
@@ -2359,6 +2362,8 @@
 		z-index: 1900;
 		max-width: 70%;
 		bottom: 120%;
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
 		box-sizing: border-box;
 		padding-bottom: 0;
 	}

wp-includes/css/media-views.css

@@ -1787,6 +1787,8 @@
 
 .image-details .embed-media-settings,
 .image-details .embed-media-settings div {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
 
@@ -2319,6 +2321,7 @@
 		margin: 11px 0 0;
 		height: auto;
 		max-width: 65%;
+		max-width: -webkit-calc(100% - 38px);
 		max-width: calc(100% - 38px);
 	}
 
@@ -2359,6 +2362,8 @@
 		z-index: 1900;
 		max-width: 70%;
 		bottom: 120%;
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
 		box-sizing: border-box;
 		padding-bottom: 0;
 	}

wp-includes/js/tinymce/plugins/wpeditimage/plugin.js

@@ -435,12 +435,14 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 			}
 
 			editor.selection.collapse( true );
-			editor.nodeChanged();
 			editor.dom.remove( wrap );
 		} else {
 			editor.dom.remove( node );
 		}
+
 		removeToolbar();
+		editor.nodeChanged();
+		editor.undoManager.add();
 	}
 
 	function addToolbar( node ) {
@@ -457,12 +459,12 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 		dom.setAttrib( node, 'data-wp-imgselect', 1 );
 		rectangle = dom.getRect( node );
 
-		toolbarHtml = '<i class="dashicons dashicons-edit edit" data-mce-bogus="1"></i>' +
-			'<i class="dashicons dashicons-no-alt remove" data-mce-bogus="1"></i>';
+		toolbarHtml = '<i class="dashicons dashicons-edit edit" data-mce-bogus="all"></i>' +
+			'<i class="dashicons dashicons-no-alt remove" data-mce-bogus="all"></i>';
 
 		toolbar = dom.create( 'p', {
 			'id': 'wp-image-toolbar',
-			'data-mce-bogus': '1',
+			'data-mce-bogus': 'all',
 			'contenteditable': false
 		}, toolbarHtml );
 
@@ -927,7 +929,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 		}
 	});
 
-	editor.on( 'mouseup', function( event ) {
+	editor.on( 'mouseup touchend', function( event ) {
 		var image,
 			node = event.target,
 			dom = editor.dom;
@@ -956,12 +958,23 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 		}
 	});
 
-	// Remove toolbar from undo levels
+	// Remove from undo levels
 	editor.on( 'BeforeAddUndo', function( event ) {
-		event.level.content = event.level.content.replace( /<p [^>]*data-mce-bogus[^>]+>[\s\S]*?<\/p>/g, '' );
+		event.level.content = event.level.content.replace( / data-wp-imgselect="1"/g, '' );
 	});
 
-	editor.on( 'cut', function() {
+	// After undo/redo FF seems to set the image height very slowly when it is set to 'auto' in the CSS.
+	// This causes image.getBoundingClientRect() to return wrong values and the resize handles are shown in wrong places.
+	// Collapse the selection to remove the resize handles.
+	if ( tinymce.Env.gecko ) {
+		editor.on( 'undo redo', function() {
+			if ( editor.selection.getNode().nodeName === 'IMG' ) {
+				editor.selection.collapse();
+			}
+		});
+	}
+
+	editor.on( 'cut wpview-selected', function() {
 		removeToolbar();
 	});
 

wp-includes/js/tinymce/plugins/wpview/plugin.js

@@ -11,6 +11,7 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 		toRemove = false,
 		firstFocus = true,
 		_noop = function() { return false; },
+		isTouchDevice = ( 'ontouchend' in document ),
 		cursorInterval, lastKeyDownNode, setViewCursorTries, focus, execCommandView;
 
 	function getView( node ) {
@@ -140,8 +141,14 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 		dom.bind( selected, 'beforedeactivate focusin focusout', _stop );
 
 		// select the hidden div
-		editor.selection.select( clipboard, true );
+		if ( isTouchDevice ) {
+			editor.selection.select( clipboard );
+		} else {
+			editor.selection.select( clipboard, true );
+		}
+
 		editor.nodeChanged();
+		editor.fire( 'wpview-selected', viewNode );
 	}
 
 	/**
@@ -256,7 +263,8 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 	});
 
 	editor.on( 'init', function() {
-		var selection = editor.selection;
+		var scrolled = false,
+			selection = editor.selection;
 
 		// When a view is selected, ensure content that is being pasted
 		// or inserted is added to a text node (instead of the view).
@@ -285,16 +293,22 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 			selection.collapse( true );
 		});
 
-		editor.dom.bind( editor.getBody().parentNode, 'mousedown mouseup click', function( event ) {
-			var view = getView( event.target );
+		editor.dom.bind( editor.getDoc(), 'touchmove', function() {
+			scrolled = true;
+		});
+
+		editor.on( 'mousedown mouseup click touchend', function( event ) {
+			var view = getView( event.target ),
+				type = isTouchDevice ? 'touchend' : 'mousedown';
 
 			firstFocus = false;
 
 			// Contain clicks inside the view wrapper
 			if ( view ) {
-				event.stopPropagation();
+				event.stopImmediatePropagation();
+				event.preventDefault();
 
-				if ( event.type === 'mousedown' && ! event.metaKey && ! event.ctrlKey ) {
+				if ( event.type === type && ! event.metaKey && ! event.ctrlKey ) {
 					if ( editor.dom.hasClass( event.target, 'edit' ) ) {
 						wp.mce.views.edit( view );
 						editor.focus();
@@ -305,17 +319,25 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 					}
 				}
 
-				select( view );
+				if ( event.type === 'touchend' && scrolled ) {
+					scrolled = false;
+				} else {
+					select( view );
+				}
 
 				// Returning false stops the ugly bars from appearing in IE11 and stops the view being selected as a range in FF.
 				// Unfortunately, it also inhibits the dragging of views to a new location.
 				return false;
 			} else {
-				if ( event.type === 'mousedown' ) {
+				if ( event.type === type ) {
 					deselect();
 				}
 			}
-		});
+
+			if ( event.type === 'touchend' && scrolled ) {
+				scrolled = false;
+			}
+		}, true );
 	});
 
 	editor.on( 'PreProcess', function( event ) {
@@ -564,41 +586,39 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 			}
 		});
 
-		if ( focus ) {
-			if ( view ) {
-				if ( ( className === 'wpview-selection-before' || className === 'wpview-selection-after' ) && editor.selection.isCollapsed() ) {
-					setViewCursorTries = 0;
+		if ( focus && view ) {
+			if ( ( className === 'wpview-selection-before' || className === 'wpview-selection-after' ) &&
+				editor.selection.isCollapsed() ) {
 
-					deselect();
+				setViewCursorTries = 0;
 
-					// Make sure the cursor arrived in the right node.
-					// This is necessary for Firefox.
-					if ( lKDN === view.previousSibling ) {
-						setViewCursor( true, view );
-						return;
-					} else if ( lKDN === view.nextSibling ) {
-						setViewCursor( false, view );
-						return;
-					}
-
-					dom.addClass( view, className );
-
-					cursorInterval = setInterval( function() {
-						if ( dom.hasClass( view, 'wpview-cursor-hide' ) ) {
-							dom.removeClass( view, 'wpview-cursor-hide' );
-						} else {
-							dom.addClass( view, 'wpview-cursor-hide' );
-						}
-					}, 500 );
-				// If the cursor lands anywhere else in the view, set the cursor before it.
-				// Only try this once to prevent a loop. (You never know.)
-				} else if ( ! getParent( event.element, 'wpview-clipboard' ) && ! setViewCursorTries ) {
-					deselect();
-					setViewCursorTries++;
-					setViewCursor( true, view );
-				}
-			} else {
 				deselect();
+
+				// Make sure the cursor arrived in the right node.
+				// This is necessary for Firefox.
+				if ( lKDN === view.previousSibling ) {
+					setViewCursor( true, view );
+					return;
+				} else if ( lKDN === view.nextSibling ) {
+					setViewCursor( false, view );
+					return;
+				}
+
+				dom.addClass( view, className );
+
+				cursorInterval = setInterval( function() {
+					if ( dom.hasClass( view, 'wpview-cursor-hide' ) ) {
+						dom.removeClass( view, 'wpview-cursor-hide' );
+					} else {
+						dom.addClass( view, 'wpview-cursor-hide' );
+					}
+				}, 500 );
+			// If the cursor lands anywhere else in the view, set the cursor before it.
+			// Only try this once to prevent a loop. (You never know.)
+			} else if ( ! getParent( event.element, 'wpview-clipboard' ) && ! setViewCursorTries ) {
+				deselect();
+				setViewCursorTries++;
+				setViewCursor( true, view );
 			}
 		}
 	});