From 72444c7e189aca7bd40b7c94377fbb05f3820dd8 Mon Sep 17 00:00:00 2001
From: iseulde <ella@iseulde.com>
Date: Sat, 11 Mar 2017 15:59:42 +0100
Subject: [PATCH] Try drag and drop on block outline

---
 tinymce-single/blocks.js         |  4 +++
 tinymce-single/tinymce/block.css | 40 ++++++++++++++++++++++++
 tinymce-single/tinymce/block.js  | 53 ++++++++++++++++++++++++++++++--
 3 files changed, 95 insertions(+), 2 deletions(-)

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;