]*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(); }); diff --git a/src/wp-includes/js/tinymce/plugins/wpview/plugin.js b/src/wp-includes/js/tinymce/plugins/wpview/plugin.js index bb4f22972a..34634a2561 100644 --- a/src/wp-includes/js/tinymce/plugins/wpview/plugin.js +++ b/src/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 ); } } });