Merge pull request #172 from WordPress/tinymce-single/mimic-ui-prototype

Allow selecting multiple block by text selection
WordPress · Mar 3, 2017 · 529ee55 · 529ee55
2 parents 8f3e669 + 8ecb1e7
commit 529ee55
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 65 deletions.
diff --git a/tinymce-single/tinymce/block.css b/tinymce-single/tinymce/block.css
@@ -1,69 +1,12 @@
-#editor img[data-mce-selected] {
+#editor img[data-mce-selected],
+#editor hr[data-mce-selected] {
 	outline: none;
 }
 
 #editor img::selection {
 	background-color: transparent;
 }
 
-#editor hr[data-mce-selected] {
-	outline: none;
-}
-
-#editor.has-block-ui *[data-mce-selected="block"],
-#editor.has-block-ui hr[data-mce-selected] {
-	outline: 2px solid #e0e5e9;
-	outline-offset: 11px;
-	/*background-color: rgba( 135, 166, 188, 0.3 );
-	box-shadow: 0px 0px 0px 11px rgba( 135, 166, 188, 0.3 );
-	position: relative;*/
-}
-
-/*#editor *[data-mce-selected="block"]:before {
-  content: '';
-  border-top: 2px solid #87a6bc;
-  border-left: 2px solid #87a6bc;
-  border-right: 2px solid #87a6bc;
-  display: block;
-  position: absolute;
-  top: -14px;
-  left: -12px;
-  right: -12px;
-  bottom: -14px;
-}
-
-#editor *[data-mce-selected="block"] ~ [data-mce-selected="block"]:before {
-	border-top: none;
-	border-bottom: 2px solid #87a6bc;
-}*/
-
-#editor *[data-mce-selected="move"] {
-	color: #87a6bc;
-	outline: 1px dashed #87a6bc;
-	outline-offset: 11px;
-}
-
-#editor.is-moving-block > *:before {
-	content: '\21E2';
-	display: block;
-	position: absolute;
-	font-size: 24px;
-	/*background-color: #0087be;
-	padding: 0 3px;
-	border-radius: 3px;
-	color: #fff;*/
-	color: #87a6bc;
-	font-weight: normal;
-	margin-top: -24px;
-	left: 40px;
-}
-
-#editor.is-moving-block > .alignright:before,
-#editor.is-moving-block > [data-mce-selected="move"]:before,
-#editor.is-moving-block > [data-mce-selected="move"] + *:before {
-	content: '';
-}
-
 .mce-container,
 .mce-container *,
 .mce-container button,
@@ -287,3 +230,9 @@ div.mce-inline-toolbar-grp.block-toolbar {
 div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout {
     padding: 0;
 }
+
+.block-outline {
+	pointer-events: none;
+	outline: 2px solid #e0e5e9;
+	outline-offset: 11px;
+}
diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js
@@ -139,7 +139,7 @@
 			} );
 
 			function moveBlockUp() {
-				$blocks = editor.$( '*[data-mce-selected="block"]' ).add( element );
+				$blocks = getBlockSelection();
 				rect = element.getBoundingClientRect();
 				$prev = $blocks.first().prev();
 
@@ -154,7 +154,7 @@
 			}
 
 			function moveBlockDown() {
-				$blocks = editor.$( '*[data-mce-selected="block"]' ).add( element );
+				$blocks = getBlockSelection();
 				rect = element.getBoundingClientRect();
 				$next = $blocks.last().next();
 
@@ -199,6 +199,11 @@
 			editor.buttons.strikethrough.icon = 'gridicons-strikethrough';
 			editor.buttons.link.icon = 'gridicons-link';
 
+			var blockOutline = document.createElement( 'div' );
+
+			blockOutline.className = 'block-outline';
+			document.body.appendChild( blockOutline );
+
 			var toolbarInline = editor.wp._createToolbar( [ 'bold', 'italic', 'strikethrough', 'link' ] );
 			var toolbarCaret = editor.wp._createToolbar( [ 'add' ] );
 			blockToolbar = editor.wp._createToolbar( [ 'up', 'down' ] );
@@ -500,6 +505,28 @@
 				insert = false;
 			} );
 
+			function getBlockSelection( selection ) {
+				selection = selection || window.getSelection();
+
+				if ( selection.anchorNode.compareDocumentPosition( selection.focusNode ) & Node.DOCUMENT_POSITION_FOLLOWING ) {
+					var startNode = selection.anchorNode;
+					var endNode = selection.focusNode;
+				} else {
+					var startNode = selection.focusNode;
+					var endNode = selection.anchorNode;
+				}
+
+				var $start = editor.$( editor.dom.getParent( startNode, function( element ) {
+					return element.parentNode === editor.getBody();
+				} ) );
+
+				var $end = editor.$( editor.dom.getParent( endNode, function( element ) {
+					return element.parentNode === editor.getBody();
+				} ) );
+
+				return $start.add( $start.nextUntil( $end ) ).add( $end );
+			}
+
 			editor.on( 'selectionChange nodeChange', function( event ) {
 				var selection = window.getSelection();
 				var isCollapsed = selection.isCollapsed;
@@ -531,7 +558,25 @@
 					toolbarCaret.hide();
 
 					if ( isBlockUIVisible ) {
-						showBlockUI();
+						var selectedBlocks = getBlockSelection();
+
+						if ( selectedBlocks.length === 1 ) {
+							showBlockUI();
+						} else {
+							hideBlockUI();
+							blockToolbar.reposition();
+						}
+
+						var startRect = selectedBlocks.first()[0].getBoundingClientRect();
+						var endRect = selectedBlocks.last()[0].getBoundingClientRect();
+
+						DOM.setStyles( blockOutline, {
+							position: 'absolute',
+							left: Math.min( startRect.left, endRect.left ) + 'px',
+							top: startRect.top + window.pageYOffset + 'px',
+							height: endRect.bottom - startRect.top + 'px',
+							width: Math.max( startRect.width, endRect.width ) + 'px'
+						} );
 					} else {
 						hideBlockUI();
 					}
@@ -545,9 +590,6 @@
 			} );
 
 			editor.on( 'nodeChange', function( event ) {
-				editor.$( '*[data-mce-selected="block"]' ).attr( 'data-mce-selected', null );
-				editor.$( element ).attr( 'data-mce-selected', 'block' );
-
 				insert = false;
 			} );