Address feedback

lib/client-assets.php

@@ -428,6 +428,7 @@ function gutenberg_register_scripts_and_styles() {
 			'lodash',
 			'wp-polyfill',
 			'wp-data',
+			'wp-deprecated',
 			'wp-escape-html',
 		),
 		filemtime( gutenberg_dir_path() . 'build/rich-text/index.js' ),

packages/editor/src/components/rich-text/index.js

@@ -37,10 +37,14 @@ import {
 	getTextContent,
 	insert,
 	insertLineSeparator,
-	removeNextLineSeparator,
-	removePreviousLineSeparator,
 	isEmptyLine,
 	unstableToDom,
+	getSelectionStart,
+	getSelectionEnd,
+	charAt,
+	LINE_SEPARATOR,
+	remove,
+	isCollapsed,
 } from '@wordpress/rich-text';
 import { decodeEntities } from '@wordpress/html-entities';
 
@@ -515,10 +519,8 @@ export class RichText extends Component {
 		const { keyCode } = event;
 		const isReverse = keyCode === BACKSPACE;
 
-		const { isCollapsed } = getSelection();
-
 		// Only process delete if the key press occurs at uncollapsed edge.
-		if ( ! isCollapsed ) {
+		if ( ! getSelection().isCollapsed ) {
 			return;
 		}
 
@@ -613,13 +615,29 @@ export class RichText extends Component {
 
 		if ( keyCode === DELETE || keyCode === BACKSPACE ) {
 			if ( this.multilineTag ) {
-				const record = this.createRecord();
+				const value = this.createRecord();
+				const start = getSelectionStart( value );
+				const end = getSelectionEnd( value );
+
 				let newValue;
 
 				if ( keyCode === BACKSPACE ) {
-					newValue = removePreviousLineSeparator( record );
-				} else {
-					newValue = removeNextLineSeparator( record );
+					if ( charAt( value, start - 1 ) === LINE_SEPARATOR ) {
+						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 ) {
+					newValue = remove(
+						value,
+						start,
+						// Only remove the line if the selection is collapsed.
+						isCollapsed( value ) ? end + 1 : end,
+					);
 				}
 
 				if ( newValue ) {

packages/rich-text/README.md

@@ -17,23 +17,44 @@ _This package assumes that your code will run in an **ES2015+** environment. If
 ### create
 
 ```js
-create( ?input: Element | string, ?range: Range, ?multilineTag: string, ?settings: Object ): Object
-```
-
-Create a RichText value from an `Element` tree (DOM), an HTML string or a plain text string, with optionally a `Range` object to set the selection. If called without a given `input`, an empty value will be created. If `multilineTag` is provided, any content of direct children whose type matches `multilineTag` will be separated by two newlines. The `settings` object can be used to filter out content.
+create( {
+	?element: Element,
+	?text: string,
+	?html: string,
+	?range: Range,
+	?multilineTag: string,
+	?multilineWrapperTags: Array,
+	?removeNode: Function,
+	?unwrapNode: Function,
+	?filterString: Function,
+	?removeAttribute: Function,
+} ): Object
+```
+
+Create a RichText value from an `Element` tree (DOM), an HTML string or a plain text string, with optionally a `Range` object to set the selection. If called without any arguments, an empty value will be created. If `multilineTag` is provided, any content of direct children whose type matches `multilineTag` will be separated by a line separator. The remaining parameters can be used to filter out content.
 
 ### toHTMLString
 
 ```js
-toHTMLString( value: Object, ?multilineTag: string ): string
+toHTMLString( {
+	value: Object,
+	?multilineTag: string,
+	?multilineWrapperTags: Array,
+} ): string
 ```
 
-Create an HTML string from a Rich Text value. If a `multilineTag` is provided, text separated by two new lines will be wrapped in it.
+Create an HTML string from a Rich Text value. If a `multilineTag` is provided, text separated by a line separator will be wrapped in it.
 
 ### apply
 
 ```js
-apply( value: Object, current: Element, ?multilineTag ): void
+apply( {
+	value: Object,
+	current: Element,
+	?multilineTag: string
+	?multilineWrapperTags: Array,
+	?createLinePadding: Function,
+} ): void
 ```
 
 Create an `Element` tree from a Rich Text value and applies the difference to the `Element` tree contained by `current`. If a `multilineTag` is provided, text separated by two new lines will be wrapped in an `Element` of that type.

packages/rich-text/package.json

@@ -22,6 +22,7 @@
 	"dependencies": {
 		"@babel/runtime": "^7.0.0",
 		"@wordpress/data": "file:../data",
+		"@wordpress/deprecated": "file:../deprecated",
 		"@wordpress/escape-html": "file:../escape-html",
 		"lodash": "^4.17.10",
 		"rememo": "^3.0.0"

packages/rich-text/src/char-at.js

@@ -0,0 +1,12 @@
+/**
+ * Gets the character at the specified index, or returns `undefined` if no
+ * character was found.
+ *
+ * @param {Object} value Value to get the character from.
+ * @param {string} index Index to use.
+ *
+ * @return {?string} A one character long string, or undefined.
+ */
+export function charAt( { text }, index ) {
+	return text[ index ];
+}

packages/rich-text/src/get-selection-end.js

@@ -0,0 +1,12 @@
+/**
+ * Gets the end index of the current selection, or returns `undefined` if no
+ * selection exists. The selection ends right before the character at this
+ * index.
+ *
+ * @param {Object} value Value to get the selection from.
+ *
+ * @return {?number} Index where the selection ends.
+ */
+export function getSelectionEnd( { end } ) {
+	return end;
+}

packages/rich-text/src/get-selection-start.js

@@ -0,0 +1,12 @@
+/**
+ * Gets the start index of the current selection, or returns `undefined` if no
+ * selection exists. The selection starts right before the character at this
+ * index.
+ *
+ * @param {Object} value Value to get the selection from.
+ *
+ * @return {?number} Index where the selection starts.
+ */
+export function getSelectionStart( { start } ) {
+	return start;
+}

packages/rich-text/src/index.js

@@ -1,20 +1,21 @@
 import './store';
 
 export { applyFormat } from './apply-format';
+export { charAt } from './char-at';
 export { concat } from './concat';
 export { create } from './create';
 export { getActiveFormat } from './get-active-format';
 export { getFormatType } from './get-format-type';
 export { getFormatTypes } from './get-format-types';
+export { getSelectionEnd } from './get-selection-end';
+export { getSelectionStart } from './get-selection-start';
 export { getTextContent } from './get-text-content';
 export { isCollapsed } from './is-collapsed';
 export { isEmpty, isEmptyLine } from './is-empty';
 export { join } from './join';
 export { registerFormatType } from './register-format-type';
 export { removeFormat } from './remove-format';
 export { remove } from './remove';
-export { removeNextLineSeparator } from './remove-next-line-separator.js';
-export { removePreviousLineSeparator } from './remove-previous-line-separator.js';
 export { replace } from './replace';
 export { insert } from './insert';
 export { insertLineSeparator } from './insert-line-separator';