From ad2b02e8388ae55feb9e12eca105b2c3fef358ae Mon Sep 17 00:00:00 2001 From: Pinar Olguc Date: Thu, 7 Mar 2019 17:37:16 +0300 Subject: [PATCH 1/3] Update selection on text change if needed --- .../editor/src/components/rich-text/index.native.js | 10 +++++++++- packages/format-library/src/link/modal.native.js | 6 ++++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/editor/src/components/rich-text/index.native.js b/packages/editor/src/components/rich-text/index.native.js index b291d211e4652..4b333be916c0e 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) @@ -512,6 +518,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 && ( @@ -531,7 +539,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 e9395085d07dd..6b16b310b00ad 100644 --- a/packages/format-library/src/link/modal.native.js +++ b/packages/format-library/src/link/modal.native.js @@ -86,12 +86,14 @@ 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 ) ); } else { // transform selected text into link - onChange( applyFormat( value, [ ...placeholderFormats, format ] ) ); + const newAttributes = applyFormat( value, [ ...placeholderFormats, format ] ); + onChange( { ...newAttributes, start: newAttributes.end, needsSelectionUpdate: true } ); //put caret at the end of the link } if ( ! isValidHref( url ) ) { From a72a3b351201e80bb14c1dbb3c6b61c8ddec6035 Mon Sep 17 00:00:00 2001 From: Pinar Olguc Date: Thu, 7 Mar 2019 18:38:35 +0300 Subject: [PATCH 2/3] Update caret position when editing the link --- packages/format-library/src/link/modal.native.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js index 6b16b310b00ad..efa006f10ab22 100644 --- a/packages/format-library/src/link/modal.native.js +++ b/packages/format-library/src/link/modal.native.js @@ -90,7 +90,8 @@ class ModalLinkUI extends Component { 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 const newAttributes = applyFormat( value, [ ...placeholderFormats, format ] ); onChange( { ...newAttributes, start: newAttributes.end, needsSelectionUpdate: true } ); //put caret at the end of the link From a1e2ab11a85dc1f00638d1278ae86a8cd03bf2b5 Mon Sep 17 00:00:00 2001 From: Pinar Olguc Date: Tue, 12 Mar 2019 19:28:54 +0300 Subject: [PATCH 3/3] Revert putting the caret at end when we transform the selected text into link --- packages/format-library/src/link/modal.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js index efa006f10ab22..f828c9adc58d3 100644 --- a/packages/format-library/src/link/modal.native.js +++ b/packages/format-library/src/link/modal.native.js @@ -94,7 +94,7 @@ class ModalLinkUI extends Component { onChange( { ...newAttributes, needsSelectionUpdate: true } ); } else { // transform selected text into link const newAttributes = applyFormat( value, [ ...placeholderFormats, format ] ); - onChange( { ...newAttributes, start: newAttributes.end, needsSelectionUpdate: true } ); //put caret at the end of the link + onChange( { ...newAttributes, needsSelectionUpdate: true } ); } if ( ! isValidHref( url ) ) {