RichText: try alternative list shortcuts

WordPress · Mar 13, 2019 · b983288 · b983288
1 parent 186b672
commit b983288
Showing 1 changed file with 50 additions and 11 deletions.
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
@@ -19,7 +19,7 @@ import memize from 'memize';
 import { Component, Fragment, RawHTML } from '@wordpress/element';
 import { isHorizontalEdge } from '@wordpress/dom';
 import { createBlobURL } from '@wordpress/blob';
-import { BACKSPACE, DELETE, ENTER, LEFT, RIGHT } from '@wordpress/keycodes';
+import { BACKSPACE, DELETE, ENTER, LEFT, RIGHT, SPACE } from '@wordpress/keycodes';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { pasteHandler, children, getBlockTransforms, findTransform } from '@wordpress/blocks';
 import { withInstanceId, withSafeTimeout, compose } from '@wordpress/compose';
@@ -44,6 +44,7 @@ import {
 	isCollapsed,
 	LINE_SEPARATOR,
 	charAt,
+	indentListItems,
 } from '@wordpress/rich-text';
 import { decodeEntities } from '@wordpress/html-entities';
 import { withFilters, IsolatedEventContainer } from '@wordpress/components';
@@ -599,8 +600,23 @@ export class RichText extends Component {
 			this.handleHorizontalNavigation( event );
 		}
 
+		if ( keyCode === SPACE && this.multilineTag === 'li' ) {
+			const value = this.createRecord();
+
+			if ( isCollapsed( value ) ) {
+				const { text, start } = value;
+				const characterBefore = text[ start - 1 ];
+
+				if ( ! characterBefore || characterBefore === LINE_SEPARATOR ) {
+					this.onChange( indentListItems( value, { type: this.props.tagName } ) );
+					event.preventDefault();
+				}
+			}
+		}
+
 		if ( keyCode === DELETE || keyCode === BACKSPACE ) {
 			const value = this.createRecord();
+			const { formats } = value;
 			const start = getSelectionStart( value );
 			const end = getSelectionEnd( value );
 
@@ -615,22 +631,45 @@ export class RichText extends Component {
 				let newValue;
 
 				if ( keyCode === BACKSPACE ) {
-					if ( charAt( value, start - 1 ) === LINE_SEPARATOR ) {
+					const index = start - 1;
+
+					if ( charAt( value, index ) === LINE_SEPARATOR ) {
+						if ( isCollapsed( value ) && formats[ index ] && formats[ index ].length ) {
+							const newFormats = formats.slice();
+
+							newFormats[ index ] = formats[ index ].slice( 0, -1 );
+							newValue = {
+								...value,
+								formats: newFormats,
+							};
+						} else {
+							newValue = remove(
+								value,
+								// Only remove the line if the selection is
+								// collapsed.
+								isCollapsed( value ) ? start - 1 : start,
+								end
+							);
+						}
+					}
+				} else if ( charAt( value, end ) === LINE_SEPARATOR ) {
+					if ( isCollapsed( value ) && formats[ end ] && formats[ end ].length ) {
+						const newFormats = formats.slice();
+
+						newFormats[ end ] = formats[ end ].slice( 0, -1 );
+						newValue = {
+							...value,
+							formats: newFormats,
+						};
+					} else {
 						newValue = remove(
 							value,
+							start,
 							// Only remove the line if the selection is
 							// collapsed.
-							isCollapsed( value ) ? start - 1 : start,
-							end
+							isCollapsed( value ) ? end + 1 : end,
 						);
 					}
-				} else if ( charAt( value, end ) === LINE_SEPARATOR ) {
-					newValue = remove(
-						value,
-						start,
-						// Only remove the line if the selection is collapsed.
-						isCollapsed( value ) ? end + 1 : end,
-					);
 				}
 
 				if ( newValue ) {