[Mobile] Support prefix transforms in mobile (#62576)

* RichText - Event Listeners: Export findSelection to be reused with the native functionality * API - Factory - Add support for prefix type in native * Native RichText - Add suppot for inputRules * Native - Add prefix support tests * Remove useRegistry * Update Changelog * Update Changelog Co-authored-by: geriux <[email protected]> Co-authored-by: twstokes <[email protected]>
WordPress · Jun 20, 2024 · 35db76a · 35db76a · github-actions · Jun 20, 2024
1 parent bb79514
commit 35db76a
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 9 deletions.
diff --git a/packages/block-editor/src/components/rich-text/event-listeners/input-rules.js b/packages/block-editor/src/components/rich-text/event-listeners/input-rules.js
@@ -14,7 +14,7 @@ import {
 	START_OF_SELECTED_AREA,
 } from '../../../utils/selection';
 
-function findSelection( blocks ) {
+export function findSelection( blocks ) {
 	let i = blocks.length;
 
 	while ( i-- ) {

diff --git a/packages/block-editor/src/components/rich-text/index.native.js b/packages/block-editor/src/components/rich-text/index.native.js
@@ -24,7 +24,6 @@ import {
 	create,
 	split,
 	toHTMLString,
-	slice,
 } from '@wordpress/rich-text';
 import { isURL } from '@wordpress/url';
 
@@ -46,6 +45,8 @@ import EmbedHandlerPicker from './embed-handler-picker';
 import { Content } from './content';
 import RichText from './native';
 import { withDeprecations } from './with-deprecations';
+import { findSelection } from './event-listeners/input-rules';
+import { START_OF_SELECTED_AREA } from '../../utils/selection';
 
 const classes = 'block-editor-rich-text__editable';
 
@@ -502,7 +503,7 @@ export function RichTextWrapper(
 	);
 
 	const inputRule = useCallback(
-		( value, valueToFormat ) => {
+		( value ) => {
 			if ( ! onReplace ) {
 				return;
 			}
@@ -518,7 +519,7 @@ export function RichTextWrapper(
 				return;
 			}
 
-			const trimmedTextBefore = text.slice( 0, startPosition ).trim();
+			const trimmedTextBefore = text.slice( 0, start ).trim();
 			const prefixTransforms = getBlockTransforms( 'from' ).filter(
 				( { type } ) => type === 'prefix'
 			);
@@ -533,15 +534,16 @@ export function RichTextWrapper(
 				return;
 			}
 
-			const content = valueToFormat(
-				slice( value, startPosition, text.length )
-			);
+			const content = toHTMLString( {
+				value: insert( value, START_OF_SELECTED_AREA, 0, start ),
+			} );
 			const block = transformation.transform( content );
-
+			const currentSelection = findSelection( [ block ] );
 			onReplace( [ block ] );
+			selectionChange( ...currentSelection );
 			__unstableMarkAutomaticChange();
 		},
-		[ onReplace, __unstableMarkAutomaticChange ]
+		[ onReplace, start, selectionChange, __unstableMarkAutomaticChange ]
 	);
 
 	const mergedRef = useMergeRefs( [ providedRef, fallbackRef ] );

diff --git a/packages/block-editor/src/components/rich-text/native/index.native.js b/packages/block-editor/src/components/rich-text/native/index.native.js
@@ -316,6 +316,23 @@ export class RichText extends Component {
 		const contentWithoutRootTag = this.removeRootTagsProducedByAztec(
 			event.nativeEvent.text
 		);
+
+		const { __unstableInputRule } = this.props;
+		const currentValuePosition = {
+			end: this.isIOS ? this.selectionEnd : this.selectionEnd + 1,
+			start: this.isIOS ? this.selectionStart : this.selectionStart + 1,
+		};
+
+		if (
+			__unstableInputRule &&
+			__unstableInputRule( {
+				...currentValuePosition,
+				...this.formatToValue( contentWithoutRootTag ),
+			} )
+		) {
+			return;
+		}
+
 		// On iOS, onChange can be triggered after selection changes, even though there are no content changes.
 		if ( contentWithoutRootTag === this.value?.toString() ) {
 			return;

diff --git a/packages/block-library/src/paragraph/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/paragraph/test/__snapshots__/edit.native.js.snap
@@ -1,5 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Paragraph block should be able to use a prefix to create a Heading block 1`] = `
+"<!-- wp:heading {"level":1} -->
+<h1 class="wp-block-heading"></h1>
+<!-- /wp:heading -->"
+`;
+
+exports[`Paragraph block should be able to use a prefix to create a List block 1`] = `
+"<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->"
+`;
+
+exports[`Paragraph block should be able to use a prefix to create a Quote block 1`] = `
+"<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->"
+`;
+
+exports[`Paragraph block should be able to use a prefix to create a numbered List block 1`] = `
+"<!-- wp:list {"ordered":true} -->
+<ol class="wp-block-list"><!-- wp:list-item -->
+<li></li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list -->"
+`;
+
 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>

diff --git a/packages/block-library/src/paragraph/test/edit.native.js b/packages/block-library/src/paragraph/test/edit.native.js
@@ -90,6 +90,105 @@ describe( 'Paragraph block', () => {
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
+	it( 'should be able to use a prefix to create a Heading block', async () => {
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+		const text = '# ';
+
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText( paragraphTextInput, text, {
+			finalSelectionStart: 1,
+			finalSelectionEnd: 1,
+		} );
+
+		fireEvent( paragraphTextInput, 'onChange', {
+			nativeEvent: { text },
+			preventDefault() {},
+		} );
+
+		const headingBlock = getBlock( screen, 'Heading' );
+		expect( headingBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should be able to use a prefix to create a Quote block', async () => {
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+		const text = '> ';
+
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText( paragraphTextInput, text, {
+			finalSelectionStart: 1,
+			finalSelectionEnd: 1,
+		} );
+
+		fireEvent( paragraphTextInput, 'onChange', {
+			nativeEvent: { text },
+			preventDefault() {},
+		} );
+		const quoteBlock = getBlock( screen, 'Quote' );
+		await triggerBlockListLayout( quoteBlock );
+
+		expect( quoteBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should be able to use a prefix to create a List block', async () => {
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+		const text = '- ';
+
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText( paragraphTextInput, text, {
+			finalSelectionStart: 1,
+			finalSelectionEnd: 1,
+		} );
+
+		fireEvent( paragraphTextInput, 'onChange', {
+			nativeEvent: { text },
+			preventDefault() {},
+		} );
+		const listBlock = getBlock( screen, 'List' );
+		await triggerBlockListLayout( listBlock );
+
+		expect( listBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should be able to use a prefix to create a numbered List block', async () => {
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+		const text = '1. ';
+
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText( paragraphTextInput, text, {
+			finalSelectionStart: 2,
+			finalSelectionEnd: 2,
+		} );
+
+		fireEvent( paragraphTextInput, 'onChange', {
+			nativeEvent: { text },
+			preventDefault() {},
+		} );
+		const listBlock = getBlock( screen, 'List' );
+		await triggerBlockListLayout( listBlock );
+
+		expect( listBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
 	it( 'should bold text', async () => {
 		// Arrange
 		const screen = await initializeEditor();

diff --git a/packages/blocks/src/api/factory.js b/packages/blocks/src/api/factory.js
@@ -402,6 +402,10 @@ export function getBlockTransforms( direction, blockTypeOrName ) {
 					return true;
 				}
 
+				if ( t.type === 'prefix' ) {
+					return true;
+				}
+
 				if ( ! t.blocks || ! t.blocks.length ) {
 					return false;
 				}

diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
@@ -13,6 +13,7 @@ For each user feature we should also add a importance categorization label  to i
 -   [internal] Fix Inserter items list filtering [#62334]
 -   [*] Prevent hiding the keyboard when creating new list items [#62446]
 -   [*] Fix issue when pasting HTML content [#62588]
+-   [**] Add support prefix transforms [#62576]
 
 ## 1.120.1
 -   [*] RichText - Fix undefined onDelete callback [#62486]