From 5344f2babd607c9c87f60d58ca4f2636d84f54b6 Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Wed, 28 Nov 2018 20:58:36 +0200 Subject: [PATCH 1/2] Keep the cursor position on blur - On blur store the cursor position and the "raw" content of the Classic Block. - Use the "raw" content when refreshing the editor content on `componentDidUpdate()`. - Restore the cursor position on focus and before inserting content. --- packages/block-library/src/classic/edit.js | 26 ++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/classic/edit.js b/packages/block-library/src/classic/edit.js index db1467b6301399..31f7afd1894952 100644 --- a/packages/block-library/src/classic/edit.js +++ b/packages/block-library/src/classic/edit.js @@ -50,12 +50,20 @@ export default class ClassicEdit extends Component { } componentDidUpdate( prevProps ) { - const { clientId, attributes: { content } } = this.props; - + const { clientId, attributes } = this.props; const editor = window.tinymce.get( `editor-${ clientId }` ); + let { contentRaw } = attributes; + + // Strip white space before comparing to avoid resetting the editor content when not necessary; + contentRaw = contentRaw || ''; + const newContent = contentRaw.replace( /\s+/g, '' ); - if ( prevProps.attributes.content !== content ) { - editor.setContent( content || '' ); + let oldContent = prevProps.attributes.contentRaw || ''; + oldContent = oldContent.replace( /\s+/g, '' ); + + if ( oldContent !== newContent ) { + // Use the "raw" editor content as it contains the caret position bookmark. + editor.setContent( contentRaw, { format: 'raw' } ); } } @@ -84,12 +92,22 @@ export default class ClassicEdit extends Component { } editor.on( 'blur', () => { + editor.wpClassicBlockBookmark = editor.selection.getBookmark(); + + // Keep the "raw" content as it contains the caret position bookmark. setAttributes( { + contentRaw: editor.getContent( { format: 'raw' } ), content: editor.getContent(), } ); return false; } ); + editor.on( 'beforeSetContent focus', () => { + if ( editor.wpClassicBlockBookmark ) { + editor.selection.moveToBookmark( editor.wpClassicBlockBookmark ); + } + } ); + editor.on( 'keydown', ( event ) => { if ( ( event.keyCode === BACKSPACE || event.keyCode === DELETE ) && isTmceEmpty( editor ) ) { // delete the block From 36073f5b107b78159f1a645a1f7dacaa2750f1f7 Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Wed, 28 Nov 2018 22:37:38 +0200 Subject: [PATCH 2/2] Store the initial "raw" content on editor init Needed when the first thing the user does after adding a Classic Block is to open a modal that inserts something, like the media modal. --- packages/block-library/src/classic/edit.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/block-library/src/classic/edit.js b/packages/block-library/src/classic/edit.js index 31f7afd1894952..5da83e0d109113 100644 --- a/packages/block-library/src/classic/edit.js +++ b/packages/block-library/src/classic/edit.js @@ -102,6 +102,13 @@ export default class ClassicEdit extends Component { return false; } ); + editor.on( 'init', () => { + // Store the initial "raw" content. + setAttributes( { + contentRaw: editor.getContent( { format: 'raw' } ), + } ); + } ); + editor.on( 'beforeSetContent focus', () => { if ( editor.wpClassicBlockBookmark ) { editor.selection.moveToBookmark( editor.wpClassicBlockBookmark );