TinyMCE per block: Small tweaks (#244)

Author: youknowriad

tinymce-per-block/src/blocks/html-block/form.js

@@ -28,10 +28,7 @@ export default class HtmlBlockForm extends Component {
 	render() {
 		const { api, block, isSelected, first, last, focusConfig } = this.props;
 		const splitValue = ( left, right ) => {
-			api.change( {
-				content: left,
-				externalChange: ( block.externalChange || 0 ) + 1
-			} );
+			api.change( { content: left } );
 			if ( right ) {
 				api.appendBlock( {
 					...block,
@@ -65,7 +62,6 @@ export default class HtmlBlockForm extends Component {
 					<EditableComponent
 						ref={ this.bindEditable }
 						content={ block.content }
-						externalChange={ block.externalChange }
 						moveCursorUp={ api.moveCursorUp }
 						moveCursorDown={ api.moveCursorDown }
 						splitValue={ splitValue }

tinymce-per-block/src/blocks/html-block/index.js

@@ -43,8 +43,7 @@ registerBlock( 'html', {
 			const currentBlock = state.blocks[ index ];
 			const blockToMerge = state.blocks[ index + 1 ];
 			const newBlock = Object.assign( {}, currentBlock, {
-				content: currentBlock.content + blockToMerge.content,
-				externalChange: ( currentBlock.externalChange || 0 ) + 1
+				content: currentBlock.content + blockToMerge.content
 			} );
 			const newBlocks = [
 				...state.blocks.slice( 0, index ),

tinymce-per-block/src/blocks/inline-text-block/form.js

@@ -17,10 +17,7 @@ export default class InlineTextBlockForm extends Component {
 		const { api, block, setToolbarState, focusConfig } = this.props;
 
 		const splitValue = ( left, right ) => {
-			api.change( {
-				content: left,
-				externalChange: ( block.externalChange || 0 ) + 1
-			} );
+			api.change( { content: left } );
 			if ( right ) {
 				api.appendBlock( {
 					...block,
@@ -35,7 +32,6 @@ export default class InlineTextBlockForm extends Component {
 			<EditableComponent
 				ref={ this.bindEditable }
 				content={ block.content }
-				externalChange={ block.externalChange }
 				moveCursorUp={ api.moveCursorUp }
 				moveCursorDown={ api.moveCursorDown }
 				splitValue={ splitValue }

tinymce-per-block/src/blocks/quote-block/form.js

@@ -45,10 +45,7 @@ export default class QuoteBlockForm extends Component {
 	render() {
 		const { api, block, first, last, isSelected, focusConfig } = this.props;
 		const splitValue = ( left, right ) => {
-			api.change( {
-				cite: left,
-				citeExternalChange: ( block.citeExternalChange || 0 ) + 1
-			} );
+			api.change( { cite: left } );
 			api.appendBlock( {
 				blockType: 'text',
 				content: right
@@ -100,7 +97,6 @@ export default class QuoteBlockForm extends Component {
 						<EditableComponent
 							ref={ this.bindContent }
 							content={ block.content }
-							externalChange={ block.externalChange }
 							moveCursorUp={ api.moveCursorUp }
 							moveCursorDown={ this.moveToCite }
 							mergeWithPrevious={ api.mergeWithPrevious }
@@ -122,7 +118,6 @@ export default class QuoteBlockForm extends Component {
 								mergeWithPrevious={ this.moveToContent }
 								remove={ this.moveToContent }
 								content={ block.cite }
-								externalChange={ block.citeExternalChange }
 								splitValue={ splitValue }
 								onChange={ ( value ) => api.change( { cite: value } ) }
 								setToolbarState={ focusInput === 'cite' ? this.setToolbarState : undefined }

tinymce-per-block/src/blocks/text-block/index.js

@@ -45,7 +45,10 @@ registerBlock( 'text', {
 		const content = div.childNodes.length === 1 && div.firstChild.nodeName === 'P'
 			? div.firstChild.innerHTML
 			: block.content;
-		const rawContent = `<p style="text-align: ${ block.align };">${ content }</p>`;
+		const alignStyle = block.align && block.align !== 'no-align'
+			? ` style="text-align: ${ block.align };"`
+			: '';
+		const rawContent = `<p${ alignStyle }>${ content }</p>`;
 
 		return {
 			blockType: 'text',

tinymce-per-block/src/external/wp-blocks/editable/index.js

@@ -50,9 +50,14 @@ export default class EditableComponent extends Component {
 
 	updateContent() {
 		// This could not be called on each content change, it used to change the cursor position
-		const bookmark = this.editor.selection.getBookmark( 2, true );
+		let bookmark;
+		if ( this.props.focusConfig ) {
+			bookmark = this.editor.selection.getBookmark( 2, true );
+		}
 		this.editor.setContent( this.props.content );
-		this.editor.selection.moveToBookmark( bookmark );
+		if ( this.props.focusConfig ) {
+			this.editor.selection.moveToBookmark( bookmark );
+		}
 	}
 
 	executeCommand = ( ...args ) => {
@@ -70,9 +75,7 @@ export default class EditableComponent extends Component {
 			this.focus();
 		}
 
-		// We should be able to compare content instead
-		// But I came up with externalChange due the moving cursor bugs when spitting/merging content
-		if ( this.props.externalChange !== prevProps.externalChange ) {
+		if ( this.props.content !== prevProps.content ) {
 			this.updateContent();
 		}
 	}
@@ -143,6 +146,7 @@ export default class EditableComponent extends Component {
 				const after = getHtml( childNodes.slice( splitIndex ) );
 				const hasAfter = !! childNodes.slice( splitIndex )
 					.reduce( ( memo, node ) => memo + node.textContent, '' );
+				this.editor.setContent( this.props.content );
 				if ( before ) {
 					this.props.splitValue( before, hasAfter ? after : '' );
 				}
@@ -202,7 +206,7 @@ export default class EditableComponent extends Component {
 		this.editor = editor;
 
 		editor.on( 'init', this.onInit );
-		editor.on( 'change focusout undo redo', this.onChange );
+		editor.on( 'focusout undo redo', this.onChange );
 		editor.on( 'keydown', this.onKeyDown );
 		editor.on( 'paste', this.onPaste );
 		editor.on( 'nodechange', this.syncToolbar );

tinymce-per-block/src/renderers/block/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { createElement, Component } from 'wp-elements';
-import { map, debounce } from 'lodash';
+import { map, debounce, isEqual } from 'lodash';
 import { findDOMNode } from 'react-dom';
 import classNames from 'classnames';
 import { getBlock } from 'wp-blocks';

tinymce-per-block/src/renderers/block/updater.js

@@ -22,7 +22,7 @@ const blockLevelUpdater = ( state, command ) => {
 		},
 
 		append: ( { block: commandBlock } ) => {
-			const createdBlock = commandBlock ? commandBlock : { blockType: 'text', content: ' ' };
+			const createdBlock = commandBlock ? commandBlock : { blockType: 'text', content: '' };
 			const appenedBlockId = uniqueId();
 			const newBlocks = [
 				...state.blocks.slice( 0, currentIndex + 1 ),
@@ -92,7 +92,7 @@ const blockLevelUpdater = ( state, command ) => {
 		moveCursorDown: () => {
 			const nextBlock = state.blocks[ currentIndex + 1 ];
 			return mergeStates( {
-				focus: nextBlock ? { uid: nextBlock.uid, config: { end: true } } : state.focus,
+				focus: nextBlock ? { uid: nextBlock.uid, config: { start: true } } : state.focus,
 				selected: null
 			} );
 		},

tinymce-per-block/src/utils/state.js

@@ -20,7 +20,6 @@ export const mergeInlineTextBlocks = ( state, index ) => {
 	const blockToMerge = state.blocks[ index + 1 ];
 	const newBlock = Object.assign( {}, currentBlock, {
 		content: getLeaves( currentBlock.content ) + getLeaves( blockToMerge.content ),
-		externalChange: ( currentBlock.externalChange || 0 ) + 1
 	} );
 	const newBlocks = [
 		...state.blocks.slice( 0, index ),