diff --git a/packages/block-editor/src/components/rich-text/index.native.js b/packages/block-editor/src/components/rich-text/index.native.js index fb975a5ceac031..8ab8b55ee3c16e 100644 --- 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 ( { 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 index e9395085d07dd1..f828c9adc58d3a 100644 --- 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 ) ) {