Native Multi Block Selection

WordPress · Sep 17, 2019 · 02af322 · 02af322
1 parent f594632
commit 02af322
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 30 deletions.
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
@@ -68,6 +68,37 @@ class BlockList extends Component {
 		window.removeEventListener( 'mousemove', this.setLastClientY );
 	}
 
+	componentDidUpdate() {
+		const {
+			hasMultiSelection,
+			selectionStart,
+			selectionEnd,
+			blockClientIds,
+		} = this.props;
+
+		if ( ! hasMultiSelection ) {
+			return;
+		}
+
+		const startIndex = blockClientIds.indexOf( selectionStart );
+
+		// The selected block is not in this block list.
+		if ( startIndex === -1 ) {
+			return;
+		}
+
+		const startNode = document.querySelector( `[data-block="${ selectionStart }"]` );
+		const endNode = document.querySelector( `[data-block="${ selectionEnd }"]` );
+		const selection = window.getSelection();
+		const range = document.createRange();
+
+		range.setStartBefore( startNode );
+		range.setEndAfter( endNode );
+
+		selection.removeAllRanges();
+		selection.addRange( range );
+	}
+
 	setLastClientY( { clientY } ) {
 		this.lastClientY = clientY;
 	}

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -247,36 +247,6 @@
  * Cross-block selection
  */
 
-.block-editor-block-list__layout .block-editor-block-list__block {
-	::-moz-selection {
-		background-color: $blue-medium-highlight;
-	}
-
-	::selection {
-		background-color: $blue-medium-highlight;
-	}
-
-	// Selection style for multiple blocks.
-	&.is-multi-selected *::selection {
-		background-color: transparent;
-	}
-
-	&.is-multi-selected .block-editor-block-list__block-edit::before {
-		background: $blue-medium-highlight;
-
-		// Use opacity to work in various editor styles.
-		mix-blend-mode: multiply;
-
-		// Collapse extra vertical padding on selection.
-		top: -$block-padding;
-		bottom: -$block-padding;
-
-		.is-dark-theme & {
-			mix-blend-mode: soft-light;
-		}
-	}
-}
-
 
 /**
  * Block styles and alignments

diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
@@ -337,6 +337,7 @@ class RichTextWrapper extends Component {
 			undo,
 			placeholder,
 			keepPlaceholderOnFocus,
+			hasMultiSelection,
 			// eslint-disable-next-line no-unused-vars
 			allowedFormats,
 			withoutInteractiveFormatting,
@@ -404,6 +405,7 @@ class RichTextWrapper extends Component {
 				__unstableMarkAutomaticChange={ this.markAutomaticChange }
 				__unstableDidAutomaticChange={ didAutomaticChange }
 				__unstableUndo={ undo }
+				__unstableContentEditable={ ! hasMultiSelection }
 			>
 				{ ( { isSelected, value, onChange, Editable } ) =>
 					<>
@@ -465,6 +467,7 @@ const RichTextContainer = compose( [
 			getSelectionEnd,
 			getSettings,
 			didAutomaticChange,
+			hasMultiSelection,
 		} = select( 'core/block-editor' );
 
 		const selectionStart = getSelectionStart();
@@ -486,6 +489,7 @@ const RichTextContainer = compose( [
 			selectionEnd: isSelected ? selectionEnd.offset : undefined,
 			isSelected,
 			didAutomaticChange: didAutomaticChange(),
+			hasMultiSelection: hasMultiSelection(),
 		};
 	} ),
 	withDispatch( ( dispatch, {

diff --git a/packages/rich-text/src/component/editable.js b/packages/rich-text/src/component/editable.js
@@ -49,6 +49,10 @@ export default class Editable extends Component {
 			this.editorNode.reversed = nextProps.reversed;
 		}
 
+		if ( this.props.contentEditable !== nextProps.contentEditable ) {
+			this.editorNode.contentEditable = nextProps.contentEditable;
+		}
+
 		const { removedKeys, updatedKeys } = diffAriaProps( this.props, nextProps );
 		removedKeys.forEach( ( key ) =>
 			this.editorNode.removeAttribute( key ) );

diff --git a/packages/rich-text/src/component/index.js b/packages/rich-text/src/component/index.js
@@ -941,6 +941,7 @@ class RichText extends Component {
 			style,
 			className,
 			placeholder,
+			__unstableContentEditable,
 		} = this.props;
 		// Generating a key that includes `tagName` ensures that if the tag
 		// changes, we replace the relevant element. This is needed because we
@@ -974,6 +975,7 @@ class RichText extends Component {
 				onKeyUp={ this.onSelectionChange }
 				onMouseUp={ this.onSelectionChange }
 				onTouchEnd={ this.onSelectionChange }
+				contentEditable={ __unstableContentEditable }
 			/>
 		);
 	}