From 4de4b4b49d95a3f8023b42746dd9ab204707b329 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Mon, 22 Jan 2024 17:00:49 +0000 Subject: [PATCH 1/3] fix: Add safety check for value to avoid crash With this commit, checks are added to ensure the RichText value exists before making a toString call. The aim is to avoid any crashes taking places when the value is undefined. --- .../components/rich-text/native/index.native.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/native/index.native.js b/packages/block-editor/src/components/rich-text/native/index.native.js index 1f536011b35b6..97e3c2be3fa7d 100644 --- a/packages/block-editor/src/components/rich-text/native/index.native.js +++ b/packages/block-editor/src/components/rich-text/native/index.native.js @@ -264,7 +264,7 @@ export class RichText extends Component { onCreateUndoLevel() { const { __unstableOnCreateUndoLevel: onCreateUndoLevel } = this.props; // If the content is the same, no level needs to be created. - if ( this.lastHistoryValue.toString() === this.value.toString() ) { + if ( this.lastHistoryValue?.toString() === this.value?.toString() ) { return; } @@ -317,7 +317,7 @@ export class RichText extends Component { event.nativeEvent.text ); // On iOS, onChange can be triggered after selection changes, even though there are no content changes. - if ( contentWithoutRootTag === this.value.toString() ) { + if ( contentWithoutRootTag === this.value?.toString() ) { return; } this.lastEventCount = event.nativeEvent.eventCount; @@ -333,7 +333,7 @@ export class RichText extends Component { ); this.debounceCreateUndoLevel(); - const refresh = this.value.toString() !== contentWithoutRootTag; + const refresh = this.value?.toString() !== contentWithoutRootTag; this.value = contentWithoutRootTag; // We don't want to refresh if our goal is just to create a record. @@ -564,7 +564,7 @@ export class RichText extends Component { // Check if value is up to date with latest state of native AztecView. if ( event.nativeEvent.text && - event.nativeEvent.text !== this.props.value.toString() + event.nativeEvent.text !== this.props.value?.toString() ) { this.onTextUpdate( event ); } @@ -589,7 +589,7 @@ export class RichText extends Component { // this approach is not perfectly reliable. const isManual = this.lastAztecEventType !== 'input' && - this.props.value.toString() === this.value.toString(); + this.props.value?.toString() === this.value?.toString(); if ( hasChanged && isManual ) { const value = this.createRecord(); const activeFormats = getActiveFormats( value ); @@ -659,7 +659,7 @@ export class RichText extends Component { event.nativeEvent.text ); if ( - contentWithoutRootTag === this.value.toString() && + contentWithoutRootTag === this.value?.toString() && realStart === this.selectionStart && realEnd === this.selectionEnd ) { @@ -756,7 +756,7 @@ export class RichText extends Component { typeof nextProps.value !== 'undefined' && typeof this.props.value !== 'undefined' && ( ! this.comesFromAztec || ! this.firedAfterTextChanged ) && - nextProps.value.toString() !== this.props.value.toString() + nextProps.value?.toString() !== this.props.value?.toString() ) { // Gutenberg seems to try to mirror the caret state even on events that only change the content so, // let's force caret update if state has selection set. @@ -824,7 +824,7 @@ export class RichText extends Component { const { style, tagName } = this.props; const { currentFontSize } = this.state; - if ( this.props.value.toString() !== this.value.toString() ) { + if ( this.props.value?.toString() !== this.value?.toString() ) { this.value = this.props.value; } const { __unstableIsSelected: prevIsSelected } = prevProps; From 1f69875554afc7a7ffaa0dfc828b7f03406f872c Mon Sep 17 00:00:00 2001 From: Siobhan Date: Mon, 22 Jan 2024 17:04:29 +0000 Subject: [PATCH 2/3] docs: Detail changes in CHANGELOG --- packages/react-native-editor/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index fba0781e594fb..3013f9da005cd 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -11,6 +11,7 @@ For each user feature we should also add a importance categorization label to i ## Unreleased - [**] Video block: Fix logic for displaying empty state based on source presence [#58015] +- [**] Fix crash when RichText values are not defined [#58088] ## 1.111.0 - [**] Image block media uploads display a custom error message when there is no internet connection [#56937] From 554ca4a9497f7ef0ce365ddb662923ff61a12171 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Mon, 22 Jan 2024 18:02:42 +0000 Subject: [PATCH 3/3] refactor: Additional checks for value --- .../src/components/rich-text/native/index.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/native/index.native.js b/packages/block-editor/src/components/rich-text/native/index.native.js index 97e3c2be3fa7d..7a775cad34648 100644 --- a/packages/block-editor/src/components/rich-text/native/index.native.js +++ b/packages/block-editor/src/components/rich-text/native/index.native.js @@ -884,8 +884,8 @@ export class RichText extends Component { // On android if content is empty we need to send no content or else the placeholder will not show. if ( ! this.isIOS && - ( value.toString() === '' || - value.toString() === EMPTY_PARAGRAPH_TAGS ) + ( value?.toString() === '' || + value?.toString() === EMPTY_PARAGRAPH_TAGS ) ) { return ''; }