From 94c816ff9713224830dd6702835e8bd75be36889 Mon Sep 17 00:00:00 2001 From: iseulde Date: Thu, 8 Feb 2018 15:00:25 +0100 Subject: [PATCH 1/6] WIP: try editable onChange on input --- blocks/rich-text/index.js | 29 +++++------------------------ 1 file changed, 5 insertions(+), 24 deletions(-) diff --git a/blocks/rich-text/index.js b/blocks/rich-text/index.js index cd3188af5172d..cfc158fbd74b2 100644 --- a/blocks/rich-text/index.js +++ b/blocks/rich-text/index.js @@ -149,6 +149,7 @@ export class RichText extends Component { editor.on( 'BeforeExecCommand', this.maybePropagateUndo ); editor.on( 'PastePreProcess', this.onPastePreProcess, true /* Add before core handlers */ ); editor.on( 'paste', this.onPaste, true /* Add before core handlers */ ); + editor.on( 'input', this.onChange ); patterns.apply( this, [ editor ] ); @@ -366,21 +367,12 @@ export class RichText extends Component { } } - fireChange() { - this.savedContent = this.getContent(); - this.editor.save(); - this.props.onChange( this.state.empty ? [] : this.savedContent ); - } - /** * Handles any case where the content of the tinyMCE instance has changed. */ onChange() { - // Note that due to efficiency, speed and low cost requirements isDirty may - // not reflect reality for a brief period immediately after a change. - if ( this.editor.isDirty() ) { - this.fireChange(); - } + this.savedContent = this.state.empty ? [] : this.getContent(); + this.props.onChange( this.savedContent ); } /** @@ -508,8 +500,6 @@ export class RichText extends Component { return; } - this.fireChange(); - const forward = event.keyCode === DELETE; if ( this.props.onMerge ) { @@ -692,19 +682,10 @@ export class RichText extends Component { this.savedContent = this.props.value; this.setContent( this.savedContent ); this.editor.selection.moveToBookmark( bookmark ); - - // Saving the editor on updates avoid unecessary onChanges calls - // These calls can make the focus jump - this.editor.save(); } - setContent( content ) { - if ( ! content ) { - content = ''; - } - - content = renderToString( content ); - this.editor.setContent( content ); + setContent( content = '' ) { + this.editor.setContent( renderToString( content ) ); } getContent() { From fe6941fbd13e7b7ee6d95002267a08d6cc7d98a2 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 9 Feb 2018 09:58:22 +0100 Subject: [PATCH 2/6] RichText: Throttle changes for performance reasons --- blocks/rich-text/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/blocks/rich-text/index.js b/blocks/rich-text/index.js index cfc158fbd74b2..f74a3331784c8 100644 --- a/blocks/rich-text/index.js +++ b/blocks/rich-text/index.js @@ -13,6 +13,7 @@ import { find, defer, noop, + throttle, } from 'lodash'; import { nodeListToReact } from 'dom-react'; import 'element-closest'; @@ -92,6 +93,7 @@ export class RichText extends Component { this.getSettings = this.getSettings.bind( this ); this.onSetup = this.onSetup.bind( this ); this.onChange = this.onChange.bind( this ); + this.throttledOnChange = throttle( this.onChange.bind( this ), 500 ); this.onNewBlock = this.onNewBlock.bind( this ); this.onNodeChange = this.onNodeChange.bind( this ); this.onKeyDown = this.onKeyDown.bind( this ); @@ -149,7 +151,7 @@ export class RichText extends Component { editor.on( 'BeforeExecCommand', this.maybePropagateUndo ); editor.on( 'PastePreProcess', this.onPastePreProcess, true /* Add before core handlers */ ); editor.on( 'paste', this.onPaste, true /* Add before core handlers */ ); - editor.on( 'input', this.onChange ); + editor.on( 'input', this.throttledOnChange ); patterns.apply( this, [ editor ] ); From 8127ba21a2282b59d5e4f1577d6881d512bb69a5 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 9 Feb 2018 10:32:42 +0100 Subject: [PATCH 3/6] RichText: Optimize performance by using strict equality instead of isEqual --- blocks/rich-text/index.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/blocks/rich-text/index.js b/blocks/rich-text/index.js index f74a3331784c8..e715fe12b0cac 100644 --- a/blocks/rich-text/index.js +++ b/blocks/rich-text/index.js @@ -703,14 +703,11 @@ export class RichText extends Component { if ( this.props.tagName === prevProps.tagName && this.props.value !== prevProps.value && - this.props.value !== this.savedContent && - ! isEqual( this.props.value, prevProps.value ) && - ! isEqual( this.props.value, this.savedContent ) + this.props.value !== this.savedContent ) { this.updateContent(); } } - componentWillReceiveProps( nextProps ) { if ( 'development' === process.env.NODE_ENV ) { if ( ! isEqual( this.props.formatters, nextProps.formatters ) ) { From efff74173f912932143a6fc625f7e8c700ee4b3e Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 9 Feb 2018 11:42:53 +0100 Subject: [PATCH 4/6] Fix issue when editor is not initialized yet --- blocks/rich-text/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/rich-text/index.js b/blocks/rich-text/index.js index e715fe12b0cac..865b501c3d981 100644 --- a/blocks/rich-text/index.js +++ b/blocks/rich-text/index.js @@ -701,6 +701,7 @@ export class RichText extends Component { componentDidUpdate( prevProps ) { // The `savedContent` var allows us to avoid updating the content right after an `onChange` call if ( + !! this.editor && this.props.tagName === prevProps.tagName && this.props.value !== prevProps.value && this.props.value !== this.savedContent From 6f334f0ea35af0bc149b3dfec11e83e82b102590 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 12 Feb 2018 12:36:05 +0100 Subject: [PATCH 5/6] RichText: cancel throttled functions --- blocks/rich-text/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/rich-text/index.js b/blocks/rich-text/index.js index 865b501c3d981..46dc03352fad2 100644 --- a/blocks/rich-text/index.js +++ b/blocks/rich-text/index.js @@ -696,6 +696,7 @@ export class RichText extends Component { componentWillUnmount() { this.onChange(); + this.throttledOnChange.cancel(); } componentDidUpdate( prevProps ) { From 0728800ade2f8bbb777a66465c08b33304ac92ac Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 12 Feb 2018 14:19:24 +0100 Subject: [PATCH 6/6] Check editor dirtyness to avoid unnecessary onChange calls (fixes undo button) --- blocks/rich-text/index.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/blocks/rich-text/index.js b/blocks/rich-text/index.js index 46dc03352fad2..a256fc21aa53f 100644 --- a/blocks/rich-text/index.js +++ b/blocks/rich-text/index.js @@ -373,8 +373,12 @@ export class RichText extends Component { * Handles any case where the content of the tinyMCE instance has changed. */ onChange() { + if ( ! this.editor.isDirty() ) { + return; + } this.savedContent = this.state.empty ? [] : this.getContent(); this.props.onChange( this.savedContent ); + this.editor.save(); } /** @@ -684,6 +688,10 @@ export class RichText extends Component { this.savedContent = this.props.value; this.setContent( this.savedContent ); this.editor.selection.moveToBookmark( bookmark ); + + // Saving the editor on updates avoid unecessary onChanges calls + // These calls can make the focus jump + this.editor.save(); } setContent( content = '' ) { @@ -727,6 +735,7 @@ export class RichText extends Component { this.editor.focus(); this.editor.formatter.remove( format ); } + applyFormat( format, args, node ) { this.editor.focus(); this.editor.formatter.apply( format, args, node );