[Mobile]Update caret position on insert link (#14317)

* Update selection on text change if needed * Update caret position when editing the link * Revert putting the caret at end when we transform the selected text into link
WordPress · Mar 13, 2019 · e14703d · e14703d
1 parent 18470fa
commit e14703d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/packages/block-editor/src/components/rich-text/index.native.js b/packages/block-editor/src/components/rich-text/index.native.js
@@ -197,6 +197,12 @@ export class RichText extends Component {
 		} );
 		if ( newContent && newContent !== this.props.value ) {
 			this.props.onChange( newContent );
+			if ( record.needsSelectionUpdate && record.start && record.end ) {
+				this.setState( { start: record.start, end: record.end } );
+			}
+			this.setState( {
+				needsSelectionUpdate: record.needsSelectionUpdate,
+			} );
 		} else {
 			// make sure the component rerenders without refreshing the text on gutenberg
 			// (this can trigger other events that might update the active formats on aztec)
@@ -524,6 +530,8 @@ export class RichText extends Component {
 			minHeight = style.minHeight;
 		}
 
+		const selection = this.state.needsSelectionUpdate ? { start: this.state.start, end: this.state.end } : null;
+
 		return (
 			<View>
 				{ isSelected && (
@@ -543,7 +551,7 @@ export class RichText extends Component {
 						...style,
 						minHeight: Math.max( minHeight, this.state.height ),
 					} }
-					text={ { text: html, eventCount: this.lastEventCount } }
+					text={ { text: html, eventCount: this.lastEventCount, selection } }
 					placeholder={ this.props.placeholder }
 					placeholderTextColor={ this.props.placeholderTextColor || styles[ 'editor-rich-text' ].textDecorationColor }
 					onChange={ this.onChange }

diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js
@@ -86,12 +86,15 @@ class ModalLinkUI extends Component {
 
 		if ( isCollapsed( value ) && ! isActive ) { // insert link
 			const toInsert = applyFormat( create( { text: linkText } ), [ ...placeholderFormats, format ], 0, linkText.length );
-			onChange( insert( value, toInsert ) );
+			const newAttributes = insert( value, toInsert );
+			onChange( { ...newAttributes, needsSelectionUpdate: true } );
 		} else if ( text !== getTextContent( slice( value ) ) ) { // edit text in selected link
 			const toInsert = applyFormat( create( { text } ), [ ...placeholderFormats, format ], 0, text.length );
-			onChange( insert( value, toInsert, value.start, value.end ) );
+			const newAttributes = insert( value, toInsert, value.start, value.end );
+			onChange( { ...newAttributes, needsSelectionUpdate: true } );
 		} else { // transform selected text into link
-			onChange( applyFormat( value, [ ...placeholderFormats, format ] ) );
+			const newAttributes = applyFormat( value, [ ...placeholderFormats, format ] );
+			onChange( { ...newAttributes, needsSelectionUpdate: true } );
 		}
 
 		if ( ! isValidHref( url ) ) {