[Mobile] - Prevent deleting content when backspacing in the first Paragraph block (#62069)

* Mobile - Prevent deleting content when backspacing in the first Paragraph block at start

* Update Changelog

Co-authored-by: geriux <geriux@git.wordpress.org>
Co-authored-by: twstokes <twstokes@git.wordpress.org>

Author: 3 people

packages/block-editor/src/components/block-list/block.native.js

@@ -669,8 +669,16 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 					}
 
 					moveFirstItemUp( rootClientId );
-				} else {
-					removeBlock( clientId );
+				} else if (
+					getBlockName( clientId ) !== getDefaultBlockName()
+				) {
+					const replacement = switchToBlockType(
+						getBlock( clientId ),
+						getDefaultBlockName()
+					);
+					if ( replacement && replacement.length ) {
+						replaceBlocks( clientId, replacement );
+					}
 				}
 			}
 		},

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

@@ -402,7 +402,8 @@ export class RichText extends Component {
 		this.comesFromAztec = true;
 		this.firedAfterTextChanged = event.nativeEvent.firedAfterTextChanged;
 		const value = this.createRecord();
-		const { start, end, text } = value;
+		const { start, end, text, activeFormats } = value;
+		const hasActiveFormats = activeFormats && !! activeFormats.length;
 		let newValue;
 
 		// Always handle full content deletion ourselves.
@@ -415,8 +416,8 @@ export class RichText extends Component {
 
 		// Only process delete if the key press occurs at an uncollapsed edge.
 		if (
-			! onDelete ||
 			! isCollapsed( value ) ||
+			hasActiveFormats ||
 			( isReverse && start !== 0 ) ||
 			( ! isReverse && end !== text.length )
 		) {

packages/block-library/src/heading/test/__snapshots__/index.native.js.snap

@@ -12,6 +12,12 @@ exports[`Heading block inserts block 1`] = `
 <!-- /wp:heading -->"
 `;
 
+exports[`Heading block should keep the heading when there is an empty paragraph block before and backspace is pressed at the start 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">A quick brown fox jumps over the lazy dog.</h2>
+<!-- /wp:heading -->"
+`;
+
 exports[`Heading block should merge with an empty Paragraph block and keep being the Heading block 1`] = `
 "<!-- wp:heading -->
 <h2 class="wp-block-heading">A quick brown fox jumps over the lazy dog.</h2>
@@ -29,3 +35,9 @@ exports[`Heading block should set a text color 1`] = `
 <h2 class="wp-block-heading has-pale-pink-color has-text-color">A quick brown fox jumps over the lazy dog.</h2>
 <!-- /wp:heading -->"
 `;
+
+exports[`Heading block should transform to a paragraph block when pressing backspace at the beginning of the first heading block 1`] = `
+"<!-- wp:paragraph -->
+<p>A quick brown fox jumps over the lazy dog.</p>
+<!-- /wp:paragraph -->"
+`;

packages/block-library/src/heading/test/index.native.js

@@ -189,4 +189,69 @@ describe( 'Heading block', () => {
 		// Assert
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
+
+	it( 'should transform to a paragraph block when pressing backspace at the beginning of the first heading block', async () => {
+		// Arrange
+		await initializeEditor();
+
+		// Act
+		await addBlock( screen, 'Heading' );
+		const headingBlock = getBlock( screen, 'Heading' );
+		fireEvent.press( headingBlock );
+
+		const headingTextInput =
+			within( headingBlock ).getByPlaceholderText( 'Heading' );
+		typeInRichText(
+			headingTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ finalSelectionStart: 0, finalSelectionEnd: 0 }
+		);
+
+		fireEvent( headingTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should keep the heading when there is an empty paragraph block before and backspace is pressed at the start', async () => {
+		// Arrange
+		await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		fireEvent( paragraphTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+
+		await addBlock( screen, 'Heading' );
+		const headingBlock = getBlock( screen, 'Heading', { rowIndex: 2 } );
+		fireEvent.press( headingBlock );
+
+		const headingTextInput =
+			within( headingBlock ).getByPlaceholderText( 'Heading' );
+		typeInRichText(
+			headingTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ finalSelectionStart: 0, finalSelectionEnd: 0 }
+		);
+
+		fireEvent( headingTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
 } );

packages/block-library/src/paragraph/test/__snapshots__/edit.native.js.snap

@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Paragraph block should prevent deleting the first Paragraph block when pressing backspace at the start 1`] = `
+"<!-- wp:paragraph -->
+<p>A quick brown fox jumps over the lazy dog.</p>
+<!-- /wp:paragraph -->"
+`;
+
 exports[`Paragraph block should render without crashing and match snapshot 1`] = `
 <View
   style={

packages/block-library/src/paragraph/test/edit.native.js

@@ -64,6 +64,32 @@ describe( 'Paragraph block', () => {
 		expect( screen.toJSON() ).toMatchSnapshot();
 	} );
 
+	it( 'should prevent deleting the first Paragraph block when pressing backspace at the start', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ finalSelectionStart: 0, finalSelectionEnd: 0 }
+		);
+
+		fireEvent( paragraphTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
 	it( 'should bold text', async () => {
 		// Arrange
 		const screen = await initializeEditor();

packages/react-native-editor/CHANGELOG.md

@@ -10,6 +10,7 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
+-   [*] Prevent deleting content when backspacing in the first Paragraph block [#62069]
 
 ## 1.119.0
 -   [internal] Remove circular dependencies within the components package [#61102]