RNMobile - Insert a new Paragraph block when pressing Enter on end of…

… captions (#22928)

* Insert block after pressing enter on caption.

* Implement breaking captions on videos.

* Add deleteEnter prop to caption

* Add break support on gallery caption.

* Fix lint error.

Co-authored-by: Matt Chowning <matt.chowning@automattic.com>

packages/block-editor/src/components/block-caption/index.native.js

@@ -24,6 +24,7 @@ const BlockCaption = ( {
 	isSelected,
 	shouldDisplay,
 	text,
+	insertBlocksAfter,
 } ) => (
 	<View style={ [ styles.container, shouldDisplay && styles.padding ] }>
 		<Caption
@@ -35,6 +36,7 @@ const BlockCaption = ( {
 			onFocus={ onFocus }
 			shouldDisplay={ shouldDisplay }
 			value={ text }
+			insertBlocksAfter={ insertBlocksAfter }
 		/>
 	</View>
 );

packages/block-editor/src/components/caption/index.native.js

@@ -6,6 +6,7 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
+import { createBlock } from '@wordpress/blocks';
 import { RichText } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
@@ -22,6 +23,7 @@ const Caption = ( {
 	shouldDisplay = true,
 	style,
 	value,
+	insertBlocksAfter = () => {},
 } ) => (
 	<View
 		accessibilityLabel={
@@ -49,6 +51,10 @@ const Caption = ( {
 			underlineColorAndroid="transparent"
 			unstableOnFocus={ onFocus }
 			value={ value }
+			__unstableOnSplitAtEnd={ () =>
+				insertBlocksAfter( createBlock( 'core/paragraph' ) )
+			}
+			deleteEnter={ true }
 		/>
 	</View>
 );

packages/block-library/src/gallery/gallery.native.js

@@ -50,6 +50,7 @@ export const Gallery = ( props ) => {
 		isSelected,
 		isNarrow,
 		onFocus,
+		insertBlocksAfter,
 	} = props;
 
 	const {
@@ -143,6 +144,7 @@ export const Gallery = ( props ) => {
 				}
 				onFocus={ focusGalleryCaption }
 				onBlur={ onBlur } // always assign onBlur as props
+				insertBlocksAfter={ insertBlocksAfter }
 			/>
 		</View>
 	);

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

@@ -619,6 +619,7 @@ export class ImageEdit extends React.Component {
 						}
 						onFocus={ this.onFocusCaption }
 						onBlur={ this.props.onBlur } // always assign onBlur as props
+						insertBlocksAfter={ this.props.insertBlocksAfter }
 					/>
 				</View>
 			</TouchableWithoutFeedback>

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

@@ -354,6 +354,7 @@ class VideoEdit extends React.Component {
 						isSelected={ this.state.isCaptionSelected }
 						onFocus={ this.onFocusCaption }
 						onBlur={ this.props.onBlur } // always assign onBlur as props
+						insertBlocksAfter={ this.props.insertBlocksAfter }
 					/>
 				</View>
 			</TouchableWithoutFeedback>