[RNMobile] [Embed block] Detect when an embeddable URL is pasted into an empty paragraph

packages/block-editor/src/components/rich-text/embed-handler-picker.native.js

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	forwardRef,
+	useRef,
+	useImperativeHandle,
+	memo,
+	useCallback,
+} from '@wordpress/element';
+import { Picker } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const DEFAULT_PICKER_OPTIONS = [
+	{
+		id: 'createEmbed',
+		label: __( 'Create embed' ),
+		value: 'createEmbed',
+		onSelect: noop,
+	},
+	{
+		id: 'createLink',
+		label: __( 'Create link' ),
+		value: 'createLink',
+		onSelect: noop,
+	},
+];
+
+const EmbedHandlerPicker = forwardRef( ( {}, ref ) => {
+	const pickerRef = useRef();
+	const pickerOptions = useRef( DEFAULT_PICKER_OPTIONS ).current;
+
+	const onPickerSelect = useCallback(
+		( value ) => {
+			const selectedItem = pickerOptions.find(
+				( item ) => item.value === value
+			);
+			selectedItem.onSelect();
+		},
+		[ pickerOptions ]
+	);
+
+	useImperativeHandle( ref, () => ( {
+		presentPicker: ( { createEmbed, createLink } ) => {
+			pickerOptions[ 0 ].onSelect = createEmbed;
+			pickerOptions[ 1 ].onSelect = createLink;
+			pickerRef.current?.presentPicker();
+		},
+	} ) );
+
+	return (
+		<Picker
+			ref={ pickerRef }
+			options={ pickerOptions }
+			onChange={ onPickerSelect }
+			hideCancelButton
+			leftAlign
+		/>
+	);
+} );
+
+export default memo( EmbedHandlerPicker );

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

@@ -55,7 +55,9 @@ import {
 	getMultilineTag,
 	getAllowedFormats,
 	isShortcode,
+	createLinkInParagraph,
 } from './utils';
+import EmbedHandlerPicker from './embed-handler-picker';
 
 const wrapperClasses = 'block-editor-rich-text';
 const classes = 'block-editor-rich-text__editable';
@@ -118,6 +120,7 @@ function RichTextWrapper(
 	const fallbackRef = useRef();
 	const { clientId, isSelected: blockIsSelected } = useBlockEditContext();
 	const nativeProps = useNativeProps();
+	const embedHandlerPickerRef = useRef();
 	const selector = ( select ) => {
 		const {
 			isCaretWithinFormattedText,
@@ -439,21 +442,14 @@ function RichTextWrapper(
 				mode = 'BLOCKS';
 			}
 
-			if (
-				__unstableEmbedURLOnPaste &&
-				isEmpty( value ) &&
-				isURL( plainText.trim() )
-			) {
-				mode = 'BLOCKS';
-			}
-
 			const content = pasteHandler( {
 				HTML: html,
 				plainText,
 				mode,
 				tagName,
 				preserveWhiteSpace,
 			} );
+			const isPastedURL = isURL( plainText.trim() );
 
 			if ( typeof content === 'string' ) {
 				let valueToInsert = create( { html: content } );
@@ -472,7 +468,39 @@ function RichTextWrapper(
 
 				onChange( insert( value, valueToInsert ) );
 			} else if ( content.length > 0 ) {
-				if ( onReplace && isEmpty( value ) ) {
+				if ( isPastedURL ) {
+					onChange( insert( value, create( { text: plainText } ) ) );
+
+					if ( ! isEmpty( value ) ) {
+						return;
+					}
+
+					const derivedBlock = content[ 0 ];
+					const { name } = derivedBlock;
+
+					// When an URL is pasted in an empty paragraph then the EmbedHandlerPicker should showcase options allowing the transformation of that URL
+					// into either an Embed block or a link within the target paragraph. If the paragraph is non-empty, the URL is pasted as text.
+					if ( __unstableEmbedURLOnPaste && name === 'core/embed' ) {
+						mode = 'BLOCKS';
+						// Embed handler
+						embedHandlerPickerRef.current?.presentPicker( {
+							createEmbed: () => {
+								if ( onReplace ) {
+									onReplace(
+										content,
+										content.length - 1,
+										-1
+									);
+								}
+							},
+							createLink: () =>
+								createLinkInParagraph(
+									plainText.trim(),
+									onReplace
+								),
+						} );
+					}
+				} else if ( onReplace && isEmpty( value ) ) {
 					onReplace( content, content.length - 1, -1 );
 				} else {
 					splitValue( value, content );
@@ -650,6 +678,7 @@ function RichTextWrapper(
 							/>
 						) }
 					</Autocomplete>
+					<EmbedHandlerPicker ref={ embedHandlerPickerRef } />
 				</>
 			) }
 		</RichText>

packages/block-editor/src/components/rich-text/utils.js

@@ -3,6 +3,8 @@
  */
 import { regexp } from '@wordpress/shortcode';
 import deprecated from '@wordpress/deprecated';
+import { renderToString } from '@wordpress/element';
+import { createBlock } from '@wordpress/blocks';
 
 export function addActiveFormats( value, activeFormats ) {
 	if ( activeFormats?.length ) {
@@ -60,3 +62,17 @@ export function getAllowedFormats( {
 getAllowedFormats.EMPTY_ARRAY = [];
 
 export const isShortcode = ( text ) => regexp( '.*' ).test( text );
+
+/**
+ * Creates a link from pasted URL.
+ * Creates a paragraph block containing a link to the URL, and calls `onReplace`.
+ *
+ * @param {string}   url       The URL that could not be embedded.
+ * @param {Function} onReplace Function to call with the created fallback block.
+ */
+export function createLinkInParagraph( url, onReplace ) {
+	const link = <a href={ url }>{ url }</a>;
+	onReplace(
+		createBlock( 'core/paragraph', { content: renderToString( link ) } )
+	);
+}

packages/block-library/src/embed/transforms.native.js

@@ -1,9 +1,11 @@
 /**
  * Internal dependencies
  */
+import webTransforms from './transforms.js';
 import transformationCategories from '../transformationCategories';
 
 const transforms = {
+	...webTransforms,
 	supportedMobileTransforms: transformationCategories.media,
 };
 

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

@@ -83,6 +83,7 @@ function ParagraphBlock( {
 				onRemove={ onReplace ? () => onReplace( [] ) : undefined }
 				placeholder={ placeholder || __( 'Start writing…' ) }
 				textAlign={ align }
+				__unstableEmbedURLOnPaste
 			/>
 		</>
 	);

packages/react-native-editor/CHANGELOG.md

@@ -11,6 +11,7 @@ For each user feature we should also add a importance categorization label  to i
 
 ## Unreleased
 -   [*] [Embed block] Fix inline preview cut-off when editing URL [#35321]
+-   [**] [Embed block] Detect when an embeddable URL is pasted into an empty paragraph. [#35204]
 -   [*] [Unsupported Block Editor] Fix text selection bug for Android [#34668]
 
 ## 1.63.0
@@ -22,8 +23,8 @@ For each user feature we should also add a importance categorization label  to i
 -   Same as 1.62.1 but with the changelog.
 
 ## 1.62.1
--   [**] Image block: fix height and border regression. [https://github.com/WordPress/gutenberg/pull/34957]
--   [**] Column block: fix width float attribute cut off. [#35061]
+-   [**] Image block: fix height and border regression. [#34957]
+-   [**] Column block: fix width attribute flout cutoff. [#34604]
 
 ## 1.62.0
 -   [**] [Embed block] Implement WP embed preview component [#34004]