Remove multiline prop from base rich text

WordPress · Sep 8, 2023 · 67c320c · 67c320c
1 parent a6ad1fa
commit 67c320c
Show file tree

Hide file tree

Showing 31 changed files with 108 additions and 1,073 deletions.
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
@@ -44,7 +44,7 @@ import { useInputEvents } from './use-input-events';
 import { useInsertReplacementText } from './use-insert-replacement-text';
 import { useFirefoxCompat } from './use-firefox-compat';
 import FormatEdit from './format-edit';
-import { getMultilineTag, getAllowedFormats } from './utils';
+import { getAllowedFormats } from './utils';
 import { Content } from './content';
 import RichTextMultiline from './multiline';
 
@@ -146,7 +146,6 @@ export function RichTextWrapper(
 	const { getSelectionStart, getSelectionEnd, getBlockRootClientId } =
 		useSelect( blockEditorStore );
 	const { selectionChange } = useDispatch( blockEditorStore );
-	const multilineTag = getMultilineTag( multiline );
 	const adjustedAllowedFormats = getAllowedFormats( {
 		allowedFormats,
 		disableFormats,
@@ -261,7 +260,6 @@ export function RichTextWrapper(
 		onSelectionChange,
 		placeholder,
 		__unstableIsSelected: isSelected,
-		__unstableMultilineTag: multilineTag,
 		__unstableDisableFormats: disableFormats,
 		preserveWhiteSpace,
 		__unstableDependencies: [ ...dependencies, tagName ],
@@ -349,7 +347,6 @@ export function RichTextWrapper(
 						onReplace,
 						onSplit,
 						__unstableEmbedURLOnPaste,
-						multilineTag,
 						preserveWhiteSpace,
 						pastePlainText,
 					} ),
@@ -363,7 +360,6 @@ export function RichTextWrapper(
 						value,
 						onReplace,
 						onSplit,
-						multilineTag,
 						onChange,
 						disableLineBreaks,
 						onSplitAtEnd,

diff --git a/packages/block-editor/src/components/rich-text/index.native.js b/packages/block-editor/src/components/rich-text/index.native.js
@@ -20,13 +20,9 @@ import {
 	__experimentalRichText as RichText,
 	__unstableCreateElement,
 	isEmpty,
-	__unstableIsEmptyLine as isEmptyLine,
 	insert,
-	__unstableInsertLineSeparator as insertLineSeparator,
 	create,
-	replace,
 	split,
-	__UNSTABLE_LINE_SEPARATOR as LINE_SEPARATOR,
 	toHTMLString,
 	slice,
 } from '@wordpress/rich-text';
@@ -338,32 +334,20 @@ function RichTextWrapper(
 				onCustomEnter();
 			}
 
-			if ( multiline ) {
-				if ( shiftKey ) {
-					if ( ! disableLineBreaks ) {
-						onChange( insert( value, '\n' ) );
-					}
-				} else if ( canSplit && isEmptyLine( value ) ) {
-					splitValue( value );
-				} else {
-					onChange( insertLineSeparator( value ) );
-				}
-			} else {
-				const { text, start: splitStart, end: splitEnd } = value;
-				const canSplitAtEnd =
-					onSplitAtEnd &&
-					splitStart === splitEnd &&
-					splitEnd === text.length;
-
-				if ( shiftKey || ( ! canSplit && ! canSplitAtEnd ) ) {
-					if ( ! disableLineBreaks ) {
-						onChange( insert( value, '\n' ) );
-					}
-				} else if ( ! canSplit && canSplitAtEnd ) {
-					onSplitAtEnd();
-				} else if ( canSplit ) {
-					splitValue( value );
+			const { text, start: splitStart, end: splitEnd } = value;
+			const canSplitAtEnd =
+				onSplitAtEnd &&
+				splitStart === splitEnd &&
+				splitEnd === text.length;
+
+			if ( shiftKey || ( ! canSplit && ! canSplitAtEnd ) ) {
+				if ( ! disableLineBreaks ) {
+					onChange( insert( value, '\n' ) );
 				}
+			} else if ( ! canSplit && canSplitAtEnd ) {
+				onSplitAtEnd();
+			} else if ( canSplit ) {
+				splitValue( value );
 			}
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -471,20 +455,8 @@ function RichTextWrapper(
 			} );
 
 			if ( typeof content === 'string' ) {
-				let valueToInsert = create( { html: content } );
-
+				const valueToInsert = create( { html: content } );
 				addActiveFormats( valueToInsert, activeFormats );
-
-				// If the content should be multiline, we should process text
-				// separated by a line break as separate lines.
-				if ( multilineTag ) {
-					valueToInsert = replace(
-						valueToInsert,
-						/\n+/g,
-						LINE_SEPARATOR
-					);
-				}
-
 				onChange( insert( value, valueToInsert ) );
 			} else if ( content.length > 0 ) {
 				// When an URL is pasted in an empty paragraph then the EmbedHandlerPicker should showcase options allowing the transformation of that URL

diff --git a/packages/block-editor/src/components/rich-text/multiline.js b/packages/block-editor/src/components/rich-text/multiline.js
@@ -11,6 +11,7 @@ import { useDispatch } from '@wordpress/data';
 import { RichTextWrapper } from './';
 import { store as blockEditorStore } from '../../store';
 import { useBlockEditContext } from '../block-edit';
+import { getMultilineTag } from './utils';
 
 function RichTextMultiline(
 	{
@@ -34,7 +35,7 @@ function RichTextMultiline(
 	const { clientId } = useBlockEditContext();
 	const { selectionChange } = useDispatch( blockEditorStore );
 
-	const multilineTagName = multiline.toLowerCase();
+	const multilineTagName = getMultilineTag( multiline );
 	value = value || `<${ multilineTagName }></${ multilineTagName }>`;
 	const padded = `</${ multilineTagName }>${ value }<${ multilineTagName }>`;
 	const values = padded.split(

diff --git a/packages/block-editor/src/components/rich-text/split-value.js b/packages/block-editor/src/components/rich-text/split-value.js
@@ -8,13 +8,7 @@ import { isEmpty, split, toHTMLString } from '@wordpress/rich-text';
  * as a result of splitting the block by pressing enter, or with blocks as a
  * result of splitting the block by pasting block content in the instance.
  */
-export function splitValue( {
-	value,
-	pastedBlocks = [],
-	onReplace,
-	onSplit,
-	multilineTag,
-} ) {
+export function splitValue( { value, pastedBlocks = [], onReplace, onSplit } ) {
 	if ( ! onReplace || ! onSplit ) {
 		return;
 	}
@@ -38,13 +32,7 @@ export function splitValue( {
 	// the enter key.
 	if ( ! hasPastedBlocks || ! isEmpty( before ) ) {
 		blocks.push(
-			onSplit(
-				toHTMLString( {
-					value: before,
-					multilineTag,
-				} ),
-				! isAfterOriginal
-			)
+			onSplit( toHTMLString( { value: before } ), ! isAfterOriginal )
 		);
 		lastPastedBlockIndex += 1;
 	}
@@ -60,13 +48,7 @@ export function splitValue( {
 	// the enter key.
 	if ( ! hasPastedBlocks || ! isEmpty( after ) ) {
 		blocks.push(
-			onSplit(
-				toHTMLString( {
-					value: after,
-					multilineTag,
-				} ),
-				isAfterOriginal
-			)
+			onSplit( toHTMLString( { value: after } ), isAfterOriginal )
 		);
 	}
 

diff --git a/packages/block-editor/src/components/rich-text/use-enter.js b/packages/block-editor/src/components/rich-text/use-enter.js
@@ -4,11 +4,7 @@
 import { useRef } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
 import { ENTER } from '@wordpress/keycodes';
-import {
-	insert,
-	__unstableIsEmptyLine as isEmptyLine,
-	__unstableInsertLineSeparator as insertLineSeparator,
-} from '@wordpress/rich-text';
+import { insert } from '@wordpress/rich-text';
 import { getBlockTransforms, findTransform } from '@wordpress/blocks';
 import { useDispatch } from '@wordpress/data';
 
@@ -37,7 +33,6 @@ export function useEnter( props ) {
 				value,
 				onReplace,
 				onSplit,
-				multilineTag,
 				onChange,
 				disableLineBreaks,
 				onSplitAtEnd,
@@ -67,40 +62,22 @@ export function useEnter( props ) {
 				}
 			}
 
-			if ( multilineTag ) {
-				if ( event.shiftKey ) {
-					if ( ! disableLineBreaks ) {
-						onChange( insert( _value, '\n' ) );
-					}
-				} else if ( canSplit && isEmptyLine( _value ) ) {
-					splitValue( {
-						value: _value,
-						onReplace,
-						onSplit,
-						multilineTag,
-					} );
-				} else {
-					onChange( insertLineSeparator( _value ) );
-				}
-			} else {
-				const { text, start, end } = _value;
-				const canSplitAtEnd =
-					onSplitAtEnd && start === end && end === text.length;
+			const { text, start, end } = _value;
+			const canSplitAtEnd =
+				onSplitAtEnd && start === end && end === text.length;
 
-				if ( event.shiftKey || ( ! canSplit && ! canSplitAtEnd ) ) {
-					if ( ! disableLineBreaks ) {
-						onChange( insert( _value, '\n' ) );
-					}
-				} else if ( ! canSplit && canSplitAtEnd ) {
-					onSplitAtEnd();
-				} else if ( canSplit ) {
-					splitValue( {
-						value: _value,
-						onReplace,
-						onSplit,
-						multilineTag,
-					} );
+			if ( event.shiftKey || ( ! canSplit && ! canSplitAtEnd ) ) {
+				if ( ! disableLineBreaks ) {
+					onChange( insert( _value, '\n' ) );
 				}
+			} else if ( ! canSplit && canSplitAtEnd ) {
+				onSplitAtEnd();
+			} else if ( canSplit ) {
+				splitValue( {
+					value: _value,
+					onReplace,
+					onSplit,
+				} );
 			}
 		}
 

diff --git a/packages/block-editor/src/components/rich-text/use-paste-handler.js b/packages/block-editor/src/components/rich-text/use-paste-handler.js
@@ -9,13 +9,7 @@ import {
 	findTransform,
 	getBlockTransforms,
 } from '@wordpress/blocks';
-import {
-	isEmpty,
-	insert,
-	create,
-	replace,
-	__UNSTABLE_LINE_SEPARATOR as LINE_SEPARATOR,
-} from '@wordpress/rich-text';
+import { isEmpty, insert, create } from '@wordpress/rich-text';
 import { isURL } from '@wordpress/url';
 
 /**
@@ -27,23 +21,6 @@ import { shouldDismissPastedFiles } from '../../utils/pasting';
 
 /** @typedef {import('@wordpress/rich-text').RichTextValue} RichTextValue */
 
-/**
- * Replaces line separators with line breaks if not multiline.
- * Replaces line breaks with line separators if multiline.
- *
- * @param {RichTextValue} value       Value to adjust.
- * @param {boolean}       isMultiline Whether to adjust to multiline or not.
- *
- * @return {RichTextValue} Adjusted value.
- */
-function adjustLines( value, isMultiline ) {
-	if ( isMultiline ) {
-		return replace( value, /\n+/g, LINE_SEPARATOR );
-	}
-
-	return replace( value, new RegExp( LINE_SEPARATOR, 'g' ), '\n' );
-}
-
 export function usePasteHandler( props ) {
 	const propsRef = useRef( props );
 	propsRef.current = props;
@@ -59,7 +36,6 @@ export function usePasteHandler( props ) {
 				onReplace,
 				onSplit,
 				__unstableEmbedURLOnPaste,
-				multilineTag,
 				preserveWhiteSpace,
 				pastePlainText,
 			} = propsRef.current;
@@ -178,7 +154,6 @@ export function usePasteHandler( props ) {
 						pastedBlocks: blocks,
 						onReplace,
 						onSplit,
-						multilineTag,
 					} );
 				}
 
@@ -220,12 +195,7 @@ export function usePasteHandler( props ) {
 			} );
 
 			if ( typeof content === 'string' ) {
-				let valueToInsert = create( { html: content } );
-
-				// If the content should be multiline, we should process text
-				// separated by a line break as separate lines.
-				valueToInsert = adjustLines( valueToInsert, !! multilineTag );
-
+				const valueToInsert = create( { html: content } );
 				addActiveFormats( valueToInsert, value.activeFormats );
 				onChange( insert( value, valueToInsert ) );
 			} else if ( content.length > 0 ) {
@@ -237,7 +207,6 @@ export function usePasteHandler( props ) {
 						pastedBlocks: content,
 						onReplace,
 						onSplit,
-						multilineTag,
 					} );
 				}
 			}

diff --git a/packages/block-editor/src/store/utils.js b/packages/block-editor/src/store/utils.js
@@ -6,14 +6,7 @@
  * @return {Object} The mapped object.
  */
 export function mapRichTextSettings( attributeDefinition ) {
-	const {
-		multiline: multilineTag,
-		__unstableMultilineWrapperTags: multilineWrapperTags,
-		__unstablePreserveWhiteSpace: preserveWhiteSpace,
-	} = attributeDefinition;
-	return {
-		multilineTag,
-		multilineWrapperTags,
-		preserveWhiteSpace,
-	};
+	const { __unstablePreserveWhiteSpace: preserveWhiteSpace } =
+		attributeDefinition;
+	return { preserveWhiteSpace };
 }
diff --git a/packages/block-library/src/pullquote/deprecated.js b/packages/block-library/src/pullquote/deprecated.js
@@ -14,12 +14,6 @@ import {
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { select } from '@wordpress/data';
-import {
-	create,
-	replace,
-	toHTMLString,
-	__UNSTABLE_LINE_SEPARATOR,
-} from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -64,13 +58,14 @@ function parseBorderColor( styleString ) {
 }
 
 function multilineToInline( value ) {
-	return toHTMLString( {
-		value: replace(
-			create( { html: value, multilineTag: 'p' } ),
-			new RegExp( __UNSTABLE_LINE_SEPARATOR, 'g' ),
-			'\n'
-		),
-	} );
+	value = value || `<p></p>`;
+	const padded = `</p>${ value }<p>`;
+	const values = padded.split( `</p><p>` );
+
+	values.shift();
+	values.pop();
+
+	return values.join( '\n' );
 }
 
 const v5 = {