diff --git a/packages/editor/src/components/rich-text/index.native.js b/packages/editor/src/components/rich-text/index.native.js index 92c6e9135b7ea8..6cf30cb1dc3a93 100644 --- a/packages/editor/src/components/rich-text/index.native.js +++ b/packages/editor/src/components/rich-text/index.native.js @@ -198,6 +198,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) @@ -525,6 +531,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 && ( @@ -544,7 +552,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 ) ) {