Skip to content

Commit

Permalink
Use a flag to signal Aztec-originated changes
Browse files Browse the repository at this point in the history
And assume that when that flag is false, component changes need to get
sent/reflected down to Aztec.
  • Loading branch information
hypest committed Apr 24, 2019
1 parent c7aa381 commit 52386fa
Showing 1 changed file with 32 additions and 16 deletions.
48 changes: 32 additions & 16 deletions packages/block-editor/src/components/rich-text/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -274,6 +274,7 @@ export class RichText extends Component {
this.lastEventCount = event.nativeEvent.eventCount;
const contentWithoutRootTag = this.removeRootTagsProduceByAztec( unescapeSpaces( event.nativeEvent.text ) );
this.lastContent = contentWithoutRootTag;
this.comesFromAztec = true;
this.props.onChange( this.lastContent );
}

Expand All @@ -289,6 +290,7 @@ export class RichText extends Component {
// eslint-disable-next-line no-unused-vars
onEnter( event ) {
this.lastEventCount = event.nativeEvent.eventCount;
this.comesFromAztec = true;

const currentRecord = this.createRecord( {
...event.nativeEvent,
Expand Down Expand Up @@ -395,7 +397,6 @@ export class RichText extends Component {
},
} );
this.lastContent = this.valueToFormat( linkedRecord );
this.lastEventCount = undefined;
this.props.onChange( this.lastContent );

// Allows us to ask for this information when we get a report.
Expand Down Expand Up @@ -427,7 +428,6 @@ export class RichText extends Component {
const recordToInsert = create( { html: pastedContent } );
const insertedContent = insert( currentRecord, recordToInsert );
const newContent = this.valueToFormat( insertedContent );
this.lastEventCount = undefined;
this.lastContent = newContent;

// explicitly set selection after inline paste
Expand Down Expand Up @@ -483,10 +483,15 @@ export class RichText extends Component {
formatPlaceholder,
} );
this.lastEventCount = event.nativeEvent.eventCount;
// we don't want to refresh aztec as no content can have changed from this event
// let's update lastContent to prevent that in shouldComponentUpdate
this.lastContent = this.removeRootTagsProduceByAztec( unescapeSpaces( text ) );
this.props.onChange( this.lastContent );
// Make sure there are changes made to the content before upgrading it upward
const newContent = this.removeRootTagsProduceByAztec( unescapeSpaces( text ) );
if ( this.lastContent !== newContent ) {
// we don't want to refresh aztec native as no content can have changed from this event
// let's update lastContent to prevent that in shouldComponentUpdate
this.lastContent = newContent;
this.comesFromAztec = true;
this.props.onChange( this.lastContent );
}
}

isEmpty() {
Expand Down Expand Up @@ -570,7 +575,7 @@ export class RichText extends Component {

// This logic will handle the selection when two blocks are merged or when block is split
// into two blocks
if ( nextTextContent.startsWith( this.savedContent ) ) {
if ( nextTextContent.startsWith( this.savedContent ) && this.savedContent && this.savedContent.length > 0) {
let length = this.savedContent.length;
if ( length === 0 && nextTextContent !== this.props.value ) {
length = this.props.value.length;
Expand All @@ -595,19 +600,26 @@ export class RichText extends Component {
return true;
}

if ( nextProps.isSelected !== this.props.isSelected ) {
return true;
}

// TODO: Please re-introduce the check to avoid updating the content right after an `onChange` call.
// It was removed in https://github.com/WordPress/gutenberg/pull/12417 to fix undo/redo problem.

// If the component is changed React side (undo/redo/merging/splitting/custom text actions)
// we need to make sure the native is updated as well
if ( ( typeof nextProps.value !== 'undefined' ) &&
( typeof this.lastContent !== 'undefined' ) &&
nextProps.value !== this.lastContent ) {
// this.lastEventCount = undefined; // force a refresh on the native side
// we need to make sure the native is updated as well.

if ( this.comesFromAztec === false ) {
// Also, don't trust the "this.lastContent" as on Android, incomplete text events arrive
// with only some of the text, while the virtual keyboard's suggestion system does its magic.
// ** compare with this.lastContent for optimizing performance by not forcing Aztec with text it already has
// , but compare with props.value to not lose "half word" text because of Android virtual keyb autosuggestion behavior
if ( ( typeof nextProps.value !== 'undefined' ) &&
( typeof this.props.value !== 'undefined' ) &&
nextProps.value !== this.props.value ) {
this.lastEventCount = undefined; // force a refresh on the native side
}

if ( this.needsSelectionUpdate ) {
this.lastEventCount = undefined; // force a refresh on the native side
}
}

return true;
Expand Down Expand Up @@ -684,6 +696,10 @@ export class RichText extends Component {
}
}

if ( this.comesFromAztec ) {
this.comesFromAztec = false;
}

return (
<View>
{ isSelected && this.multilineTag === 'li' && (
Expand Down

0 comments on commit 52386fa

Please sign in to comment.