From a345804b52fab064107266cf13ee714bc00e57e2 Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Wed, 17 Apr 2019 17:18:03 +0300 Subject: [PATCH 1/6] Avoid setting caret if Aztec android will trim spaces --- .../src/components/rich-text/index.native.js | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) 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 c22a3534d6e2fc..cd2f54e62d7a6d 100644 --- a/packages/block-editor/src/components/rich-text/index.native.js +++ b/packages/block-editor/src/components/rich-text/index.native.js @@ -107,6 +107,7 @@ export class RichText extends Component { // This prevents a bug in Aztec which triggers onSelectionChange twice on format change this.onSelectionChange = this.onSelectionChange.bind( this ); this.valueToFormat = this.valueToFormat.bind( this ); + this.willTrimSpaces = this.willTrimSpaces.bind( this ); this.state = { start: 0, end: 0, @@ -624,6 +625,17 @@ export class RichText extends Component { } } + willTrimSpaces( html ) { + // regex for detecting spaces around html tags + const trailingSpaces = /(\s+)<.+?>|<.+?>(\s+)/g; + const matches = html.match(trailingSpaces); + if (matches && matches.length > 0) { + return true; + } + + return false; + } + render() { const { tagName, @@ -651,7 +663,17 @@ export class RichText extends Component { let selection = null; if ( this.needsSelectionUpdate ) { this.needsSelectionUpdate = false; - selection = { start: this.state.start, end: this.state.end }; + + // Aztec performs some html text cleanup while parsing it so, its internal representation gets out-of-sync with the + // representation of the format-lib on the RN side. We need to avoid trying to set the caret position because it may + // be outside the text bounds and crash Aztec, at least on Android. + if (! this.isIOS && this.willTrimSpaces( html )) { + // the html will get trimmed by the cleaning up functions in Aztec and caret position will get out-of-sync. + // So, skip forcing it, let Aztec just do its best and just log the fact. + console.warn("RichText value will be trimmed for spaces! Avoiding setting the caret position manually." + html); + } else { + selection = { start: this.state.start, end: this.state.end }; + } } return ( From a455dea8c7b29da479fd13ba20898679680fd8c6 Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Wed, 17 Apr 2019 18:15:34 +0300 Subject: [PATCH 2/6] Add missing spaces as per linter --- packages/block-editor/src/components/rich-text/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 cd2f54e62d7a6d..36a0a071b5eb0d 100644 --- a/packages/block-editor/src/components/rich-text/index.native.js +++ b/packages/block-editor/src/components/rich-text/index.native.js @@ -670,7 +670,7 @@ export class RichText extends Component { if (! this.isIOS && this.willTrimSpaces( html )) { // the html will get trimmed by the cleaning up functions in Aztec and caret position will get out-of-sync. // So, skip forcing it, let Aztec just do its best and just log the fact. - console.warn("RichText value will be trimmed for spaces! Avoiding setting the caret position manually." + html); + console.warn( "RichText value will be trimmed for spaces! Avoiding setting the caret position manually." + html ); } else { selection = { start: this.state.start, end: this.state.end }; } From 0d5abab89465c0dd5119ff3202085ce75c735175 Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Wed, 17 Apr 2019 18:16:18 +0300 Subject: [PATCH 3/6] Allow logging warnings to console --- packages/block-editor/src/components/rich-text/index.native.js | 2 ++ 1 file changed, 2 insertions(+) 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 36a0a071b5eb0d..cc2fd01e7d7d42 100644 --- a/packages/block-editor/src/components/rich-text/index.native.js +++ b/packages/block-editor/src/components/rich-text/index.native.js @@ -1,3 +1,5 @@ +/*eslint no-console: ["error", { allow: ["warn"] }] */ + /** * External dependencies */ From 4621975f7acc5f92b02c4d7d3d521302ccde9ecd Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Wed, 17 Apr 2019 18:17:30 +0300 Subject: [PATCH 4/6] Don't log the html, use single-quotes --- packages/block-editor/src/components/rich-text/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 cc2fd01e7d7d42..f9f552ab69839b 100644 --- a/packages/block-editor/src/components/rich-text/index.native.js +++ b/packages/block-editor/src/components/rich-text/index.native.js @@ -672,7 +672,7 @@ export class RichText extends Component { if (! this.isIOS && this.willTrimSpaces( html )) { // the html will get trimmed by the cleaning up functions in Aztec and caret position will get out-of-sync. // So, skip forcing it, let Aztec just do its best and just log the fact. - console.warn( "RichText value will be trimmed for spaces! Avoiding setting the caret position manually." + html ); + console.warn( 'RichText value will be trimmed for spaces! Avoiding setting the caret position manually.' ); } else { selection = { start: this.state.start, end: this.state.end }; } From 4d8e82531d44a921df63ce9dc5f85f5c4c888e1a Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Wed, 17 Apr 2019 18:36:27 +0300 Subject: [PATCH 5/6] Add more missing spaces as per linter --- .../block-editor/src/components/rich-text/index.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 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 index f9f552ab69839b..e02f4229173db4 100644 --- a/packages/block-editor/src/components/rich-text/index.native.js +++ b/packages/block-editor/src/components/rich-text/index.native.js @@ -631,7 +631,7 @@ export class RichText extends Component { // regex for detecting spaces around html tags const trailingSpaces = /(\s+)<.+?>|<.+?>(\s+)/g; const matches = html.match(trailingSpaces); - if (matches && matches.length > 0) { + if ( matches && matches.length > 0 ) { return true; } @@ -669,7 +669,7 @@ export class RichText extends Component { // Aztec performs some html text cleanup while parsing it so, its internal representation gets out-of-sync with the // representation of the format-lib on the RN side. We need to avoid trying to set the caret position because it may // be outside the text bounds and crash Aztec, at least on Android. - if (! this.isIOS && this.willTrimSpaces( html )) { + if ( ! this.isIOS && this.willTrimSpaces( html ) ) { // the html will get trimmed by the cleaning up functions in Aztec and caret position will get out-of-sync. // So, skip forcing it, let Aztec just do its best and just log the fact. console.warn( 'RichText value will be trimmed for spaces! Avoiding setting the caret position manually.' ); From c56f552648bb38280f5762a7bd05ef361bd4fb0c Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Wed, 17 Apr 2019 18:36:58 +0300 Subject: [PATCH 6/6] Add more missing spaces as per linter --- packages/block-editor/src/components/rich-text/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 e02f4229173db4..95a2d91d2f2ff8 100644 --- a/packages/block-editor/src/components/rich-text/index.native.js +++ b/packages/block-editor/src/components/rich-text/index.native.js @@ -630,7 +630,7 @@ export class RichText extends Component { willTrimSpaces( html ) { // regex for detecting spaces around html tags const trailingSpaces = /(\s+)<.+?>|<.+?>(\s+)/g; - const matches = html.match(trailingSpaces); + const matches = html.match( trailingSpaces ); if ( matches && matches.length > 0 ) { return true; }