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 165316fdbde769..116425a15b53b1 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
@@ -267,7 +267,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 === this.value ) {
+ if ( this.lastHistoryValue.toString() === this.value.toString() ) {
return;
}
@@ -320,7 +320,7 @@ export class RichText extends Component {
unescapeSpaces( event.nativeEvent.text )
);
// On iOS, onChange can be triggered after selection changes, even though there are no content changes.
- if ( contentWithoutRootTag === this.value ) {
+ if ( contentWithoutRootTag === this.value.toString() ) {
return;
}
this.lastEventCount = event.nativeEvent.eventCount;
@@ -336,7 +336,7 @@ export class RichText extends Component {
);
this.debounceCreateUndoLevel();
- const refresh = this.value !== 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.
@@ -567,7 +567,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
+ event.nativeEvent.text !== this.props.value.toString()
) {
this.onTextUpdate( event );
}
@@ -592,7 +592,7 @@ export class RichText extends Component {
// this approach is not perfectly reliable.
const isManual =
this.lastAztecEventType !== 'input' &&
- this.props.value === this.value;
+ this.props.value.toString() === this.value.toString();
if ( hasChanged && isManual ) {
const value = this.createRecord();
const activeFormats = getActiveFormats( value );
@@ -662,7 +662,7 @@ export class RichText extends Component {
unescapeSpaces( event.nativeEvent.text )
);
if (
- contentWithoutRootTag === this.value &&
+ contentWithoutRootTag === this.value.toString() &&
realStart === this.selectionStart &&
realEnd === this.selectionEnd
) {
@@ -759,7 +759,7 @@ export class RichText extends Component {
typeof nextProps.value !== 'undefined' &&
typeof this.props.value !== 'undefined' &&
( ! this.comesFromAztec || ! this.firedAfterTextChanged ) &&
- nextProps.value !== this.props.value
+ 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.
@@ -833,7 +833,7 @@ export class RichText extends Component {
const { style, tagName } = this.props;
const { currentFontSize } = this.state;
- if ( this.props.value !== this.value ) {
+ if ( this.props.value.toString() !== this.value.toString() ) {
this.value = this.props.value;
}
const { __unstableIsSelected: prevIsSelected } = prevProps;
@@ -851,7 +851,7 @@ export class RichText extends Component {
// Since this is happening when merging blocks, the selection should be at the last character position.
// As a fallback the internal selectionEnd value is used.
const lastCharacterPosition =
- this.value?.length ?? this.selectionEnd;
+ this.value?.toString().length ?? this.selectionEnd;
this._editor.focus();
this.props.onSelectionChange(
lastCharacterPosition,
@@ -893,7 +893,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 === '' || value === EMPTY_PARAGRAPH_TAGS )
+ ( value.toString() === '' ||
+ value.toString() === EMPTY_PARAGRAPH_TAGS )
) {
return '';
}
diff --git a/packages/block-editor/src/components/rich-text/native/test/index.native.js b/packages/block-editor/src/components/rich-text/native/test/index.native.js
index 64bfb3b183c6b9..6e7dc31fc74e79 100644
--- a/packages/block-editor/src/components/rich-text/native/test/index.native.js
+++ b/packages/block-editor/src/components/rich-text/native/test/index.native.js
@@ -2,13 +2,18 @@
* External dependencies
*/
import { Dimensions } from 'react-native';
-import { getEditorHtml, render, initializeEditor } from 'test/helpers';
+import {
+ fireEvent,
+ getEditorHtml,
+ render,
+ initializeEditor,
+} from 'test/helpers';
/**
* WordPress dependencies
*/
import { select } from '@wordpress/data';
-import { store as richTextStore } from '@wordpress/rich-text';
+import { store as richTextStore, RichTextData } from '@wordpress/rich-text';
import { coreBlocks } from '@wordpress/block-library';
import {
getBlockTypes,
@@ -78,6 +83,26 @@ describe( '', () => {
} );
} );
+ describe( 'when changes arrive from Aztec', () => {
+ it( 'should avoid updating attributes when values are equal', async () => {
+ const handleChange = jest.fn();
+ const defaultEmptyValue = new RichTextData();
+ const screen = render(
+
+ );
+
+ // Simulate an empty string from Aztec
+ fireEvent( screen.getByLabelText( 'Text input. Empty' ), 'change', {
+ nativeEvent: { text: '' },
+ } );
+
+ expect( handleChange ).not.toHaveBeenCalled();
+ } );
+ } );
+
describe( 'Font Size', () => {
it( 'should display rich text at the DEFAULT font size.', () => {
// Arrange.