diff --git a/tinymce-single/blocks.js b/tinymce-single/blocks.js index 4cc58dc0b70a4..49205351e56ab 100644 --- a/tinymce-single/blocks.js +++ b/tinymce-single/blocks.js @@ -55,6 +55,10 @@ var rootNode = editor.getBody(); var blocks = []; + if ( ! startNode || ! editor.getBody().contains( startNode ) ) { + return [ rootNode.firstChild ]; + } + while ( startNode.parentNode !== rootNode ) { startNode = startNode.parentNode; } diff --git a/tinymce-single/tinymce/block.css b/tinymce-single/tinymce/block.css index 8d32598413c22..781c47b92ef5a 100644 --- a/tinymce-single/tinymce/block.css +++ b/tinymce-single/tinymce/block.css @@ -240,6 +240,14 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout { pointer-events: none; } +.mce-drag-container { + opacity: 1 !important; + outline: 2px solid #e0e5e9; + outline-offset: 8px; + background: #fff; + box-shadow: 0 0 0 8px #fff; +} + .block-outline:before { content: ''; position: absolute; @@ -250,6 +258,38 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout { border: 2px solid #e0e5e9; } +.block-outline-handle { + position: absolute; + width: 10px; + top: 0; + bottom: 0; + cursor: move; /* fallback if grab cursor is unsupported */ + cursor: grab; + cursor: -moz-grab; + cursor: -webkit-grab; + pointer-events: all; +} + +.block-outline-handle-left { + left: -10px; +} + +.block-outline-handle-right { + right: -10px; +} + +#editor *[data-wp-block-dragging] { + background: #f0f2f4; + color: #f0f2f4; + border-color: #f0f2f4; + text-shadow: none; + box-shadow: 0 0 0 10px #f0f2f4; +} + +#editor *[data-wp-block-dragging] > * { + opacity: 0; +} + .insert-toolbar svg { background: #fff; border-radius: 12px; diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js index a12ec933ea04f..c1837e4aab4b0 100644 --- a/tinymce-single/tinymce/block.js +++ b/tinymce-single/tinymce/block.js @@ -149,6 +149,7 @@ editor.on( 'preinit', function() { var DOM = tinymce.DOM; + var hidden = true; editor.addButton( 'block', { icon: 'gridicons-posts', @@ -283,10 +284,60 @@ function createBlockOutline() { var outline = document.createElement( 'div' ); + var handleLeft = document.createElement( 'div' ); + var handleRight = document.createElement( 'div' ); outline.className = 'block-outline'; + handleLeft.className = 'block-outline-handle block-outline-handle-right'; + handleRight.className = 'block-outline-handle block-outline-handle-left'; + outline.appendChild( handleLeft ); + outline.appendChild( handleRight ); document.body.appendChild( outline ); + var target; + + DOM.bind( outline, 'mousedown', function( event ) { + var newEvent = Object.assign( {}, event ); + + target = getSelectedBlock(); + + if ( target.getAttribute( 'contenteditable' ) !== 'false' ) { + target.setAttribute( 'contenteditable', 'false' ); + } + + newEvent.target = target; + + editor.fire( 'mousedown', newEvent ); + } ); + + editor.on( 'dragstart', function( event ) { + if ( ! target ) { + event.preventDefault(); + return; + } + + hidden = true; + + hideBlockUI(); + + target.setAttribute( 'data-wp-block-dragging', 'true' ); + + function end( event ) { + DOM.unbind( editor.getDoc(), 'mouseup', end ); + + target = null; + + setTimeout( function() { + editor.$( '*[data-wp-block-dragging]' ) + .attr( 'data-wp-block-dragging', null ) + .attr( 'contenteditable', null ); + editor.nodeChanged(); + } ); + } + + DOM.bind( editor.getDoc(), 'mouseup', end ); + } ); + return outline; } @@ -653,8 +704,6 @@ } ); } - var hidden = true; - editor.on( 'keydown', function( event ) { if ( tinymce.util.VK.metaKeyPressed( event ) ) { return;