TinyMCE per block: Extract the "reducer" logic (#233)

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

@@ -14,10 +14,6 @@ import { getEmbedHtmlFromUrl } from '../../utils/embed';
 import FigureAlignmentToolbar from 'controls/figure-alignment-toolbar';
 
 export default class EmbedBlockForm extends Component {
-	merge = () => {
-		this.props.api.remove();
-	};
-
 	setAlignment = ( id ) => {
 		this.props.api.change( { align: id } );
 	};

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

@@ -10,6 +10,7 @@ import { VideoAlt3Icon } from 'dashicons';
 import form from './form';
 import { getEmbedHtmlFromUrl } from 'utils/embed';
 import { getFigureAlignmentStyles } from 'utils/figure-alignment';
+import { removeBlockFromState } from 'utils/state';
 
 registerBlock( 'embed', {
 	title: 'Embed',
@@ -52,5 +53,6 @@ registerBlock( 'embed', {
 			align: 'no-align',
 			caption: ''
 		};
-	}
+	},
+	merge: removeBlockFromState
 } );

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

@@ -13,7 +13,6 @@ import TransformBlockToolbar from 'controls/transform-block-toolbar';
 export default class HeadingBlockForm extends Component {
 	bindForm = ( ref ) => {
 		this.form = ref;
-		this.merge = ( ...args ) => this.form.merge( ...args );
 	};
 
 	bindFormatToolbar = ( ref ) => {

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

@@ -8,6 +8,7 @@ import { EditorHeadingIcon } from 'dashicons';
  * Internal dependencies
  */
 import form from './form';
+import { mergeInlineTextBlocks } from 'utils/state';
 
 const createHeadingBlockWithContent = ( content = '' ) => {
 	return {
@@ -49,10 +50,12 @@ registerBlock( 'heading', {
 		};
 	},
 	create: createHeadingBlockWithContent,
-	transformations: [
-		{
-			blocks: [ 'text', 'quote' ],
-			transform: ( block ) => createHeadingBlockWithContent( block.content )
-		}
-	]
+	transformations: [ {
+		blocks: [ 'text', 'quote' ],
+		transform: ( block ) => createHeadingBlockWithContent( block.content )
+	} ],
+	merge: [ {
+		blocks: [ 'text', 'quote', 'heading' ],
+		merge: mergeInlineTextBlocks
+	} ]
 } );

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

@@ -9,21 +9,6 @@ import EditableFormatToolbar from 'controls/editable-format-toolbar';
 import BlockArrangement from 'controls/block-arrangement';
 
 export default class HtmlBlockForm extends Component {
-	merge = ( block ) => {
-		const acceptedBlockTypes = [ 'html', 'quote', 'text', 'heading' ];
-		if ( acceptedBlockTypes.indexOf( block.blockType ) === -1 ) {
-			return;
-		}
-
-		const { api, block: { content, externalChange = 0 } } = this.props;
-		api.focus( { end: true } );
-		api.remove( block.uid );
-		api.change( {
-			content: content + block.content,
-			externalChange: externalChange + 1
-		} );
-	}
-
 	bindEditable = ( ref ) => {
 		this.editable = ref;
 	}

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

@@ -36,5 +36,25 @@ registerBlock( 'html', {
 			align: 'no-align',
 			caption: ''
 		};
-	}
+	},
+	merge: [ {
+		blocks: [ 'html', 'quote', 'text', 'heading' ],
+		merge: ( state, index ) => {
+			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
+			} );
+			const newBlocks = [
+				...state.blocks.slice( 0, index ),
+				newBlock,
+				...state.blocks.slice( index + 2 )
+			];
+			return Object.assign( {}, state, {
+				blocks: newBlocks,
+				focus: { uid: newBlock.uid, config: { end: true } }
+			} );
+		}
+	} ]
 } );

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

@@ -9,11 +9,6 @@ import BlockArrangement from 'controls/block-arrangement';
 import FigureAlignmentToolbar from 'controls/figure-alignment-toolbar';
 
 export default class ImageBlockForm extends Component {
-
-	merge() {
-		this.props.api.remove();
-	}
-
 	setAlignment = ( id ) => {
 		this.props.api.change( { align: id } );
 	};

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

@@ -9,6 +9,7 @@ import { FormatImageIcon } from 'dashicons';
  */
 import form from './form';
 import { getFigureAlignmentStyles } from 'utils/figure-alignment';
+import { removeBlockFromState } from 'utils/state';
 
 registerBlock( 'image', {
 	title: 'Image',
@@ -69,5 +70,6 @@ registerBlock( 'image', {
 			caption: '',
 			align: 'no-align'
 		};
-	}
+	},
+	merge: removeBlockFromState
 } );

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

@@ -5,30 +5,6 @@ import { createElement, Component } from 'wp-elements';
 import { EditableComponent } from 'wp-blocks';
 
 export default class InlineTextBlockForm extends Component {
-	merge = ( block ) => {
-		const acceptedBlockTypes = [ 'quote', 'text', 'heading' ];
-		if ( acceptedBlockTypes.indexOf( block.blockType ) === -1 ) {
-			return;
-		}
-
-		const getLeaves = html => {
-			const div = document.createElement( 'div' );
-			div.innerHTML = html;
-			if ( div.childNodes.length === 1 && div.firstChild.nodeName === 'P' ) {
-				return getLeaves( div.firstChild.innerHTML );
-			}
-			return html;
-		};
-
-		const { api, block: { content, externalChange = 0 } } = this.props;
-		api.focus( { end: true } );
-		api.remove( block.uid );
-		api.change( {
-			content: getLeaves( content ) + getLeaves( block.content ),
-			externalChange: externalChange + 1
-		} );
-	}
-
 	bindEditable = ( ref ) => {
 		this.editable = ref;
 	}

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

@@ -22,30 +22,6 @@ export default class QuoteBlockForm extends Component {
 		this.cite = ref;
 	};
 
-	merge = ( block ) => {
-		const acceptedBlockTypes = [ 'quote', 'text', 'heading' ];
-		if ( acceptedBlockTypes.indexOf( block.blockType ) === -1 ) {
-			return;
-		}
-
-		const getLeaves = html => {
-			const div = document.createElement( 'div' );
-			div.innerHTML = html;
-			if ( div.childNodes.length === 1 && div.firstChild.nodeName === 'P' ) {
-				return getLeaves( div.firstChild.innerHTML );
-			}
-			return html;
-		};
-
-		const { api, block: { content, externalChange = 0 } } = this.props;
-		api.focus( { input: 'content', end: true } );
-		api.remove( block.uid );
-		api.change( {
-			content: getLeaves( content ) + getLeaves( block.content ),
-			externalChange: externalChange + 1,
-		} );
-	}
-
 	moveToCite = () => {
 		this.props.api.focus( { input: 'cite', start: true } );
 	};
@@ -71,7 +47,7 @@ export default class QuoteBlockForm extends Component {
 		const splitValue = ( left, right ) => {
 			api.change( {
 				cite: left,
-				externalChange: ( block.externalChange || 0 ) + 1
+				citeExternalChange: ( block.citeExternalChange || 0 ) + 1
 			} );
 			api.appendBlock( {
 				blockType: 'text',
@@ -146,7 +122,7 @@ export default class QuoteBlockForm extends Component {
 								mergeWithPrevious={ this.moveToContent }
 								remove={ this.moveToContent }
 								content={ block.cite }
-								externalChange={ block.externalChange }
+								externalChange={ block.citeExternalChange }
 								splitValue={ splitValue }
 								onChange={ ( value ) => api.change( { cite: value } ) }
 								setToolbarState={ focusInput === 'cite' ? this.setToolbarState : undefined }

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

@@ -10,6 +10,7 @@ import {
  * Internal dependencies
  */
 import form from './form';
+import { mergeInlineTextBlocks } from 'utils/state';
 
 const createQuoteBlockWithContent = ( content = '' ) => {
 	return {
@@ -76,5 +77,14 @@ registerBlock( 'quote', {
 			blocks: [ 'text', 'heading' ],
 			transform: ( block ) => createQuoteBlockWithContent( block.content )
 		}
-	]
+	],
+	merge: [ {
+		blocks: [ 'quote', 'text', 'heading' ],
+		merge: ( state, index ) => {
+			const mergedState = mergeInlineTextBlocks( state, index );
+			return Object.assign( {}, mergedState, {
+				focus: { uid: state.blocks[ index ].uid, config: { input: 'content', end: true } }
+			} );
+		}
+	} ]
 } );

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

@@ -13,7 +13,6 @@ import InserterButton from 'inserter/button';
 export default class TextBlockForm extends Component {
 	bindForm = ( ref ) => {
 		this.form = ref;
-		this.merge = ( ...args ) => this.form.merge( ...args );
 	};
 
 	bindFormatToolbar = ( ref ) => {

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

@@ -8,6 +8,7 @@ import { EditorParagraphIcon } from 'dashicons';
  * Internal dependencies
  */
 import form from './form';
+import { mergeInlineTextBlocks } from 'utils/state';
 
 const createTextBlockWithContent = ( content = '' ) => {
 	return {
@@ -58,5 +59,9 @@ registerBlock( 'text', {
 			blocks: [ 'heading', 'quote' ],
 			transform: ( block ) => createTextBlockWithContent( block.content )
 		}
-	]
+	],
+	merge: [ {
+		blocks: [ 'text', 'quote', 'heading' ],
+		merge: mergeInlineTextBlocks
+	} ]
 } );

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

@@ -78,9 +78,13 @@ export default class EditableComponent extends Component {
 	}
 
 	focus() {
-		this.editor.focus();
+		if ( this.props.focusConfig.bookmark ) {
+			return;
+		}
 		const { start = false, end = false, bookmark = false } = this.props.focusConfig;
+		this.editor.focus();
 		if ( start ) {
+			this.editor.focus();
 			this.editor.selection.setCursorLocation( undefined, 0 );
 		} else if ( end ) {
 			this.editor.selection.select( this.editor.getBody(), true );
@@ -140,7 +144,6 @@ export default class EditableComponent extends Component {
 				const hasAfter = !! childNodes.slice( splitIndex )
 					.reduce( ( memo, node ) => memo + node.textContent, '' );
 				if ( before ) {
-					this.editor.setContent( before );
 					this.props.splitValue( before, hasAfter ? after : '' );
 				}
 			} );

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

@@ -11,18 +11,6 @@ import { getBlock } from 'wp-blocks';
 import * as commands from './commands';
 
 export default class BlockListBlock extends Component {
-	setRef = ( blockNode ) => {
-		this.blockNode = blockNode;
-	};
-
-	bindForm = ( form ) => {
-		this.form = form;
-	}
-
-	merge = ( block, index ) => {
-		this.form.merge && this.form.merge( block, index );
-	}
-
 	render() {
 		const { block, isSelected, focusConfig, first, last } = this.props;
 		const blockDefinition = getBlock( block.blockType );
@@ -47,13 +35,11 @@ export default class BlockListBlock extends Component {
 
 		return (
 			<div
-				ref={ this.setRef }
 				tabIndex={ tabIndex }
 				onFocus={ onFocus }
 				className={ classes }
 			>
 				<Form
-					ref={ this.bindForm }
 					block={ block }
 					api={ api }
 					isSelected={ isSelected }

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

@@ -10,7 +10,7 @@ export const appendBlock = ( newBlock ) => ( {
 
 export const remove = ( uid ) => ( {
 	type: 'remove',
-	uid
+	removedUID: uid
 } );
 
 export const mergeWithPrevious = () => ( {