From ca52254ce03c4b763a2a3468ff3e8b77f7a8060f Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 13 Mar 2017 11:55:51 +0100
Subject: [PATCH] TinyMCE per block: Delete unnecessary abstraction (#253)

---
 .../src/blocks/heading-block/form.js          | 32 ++++++++++--
 .../src/blocks/inline-text-block/form.js      | 50 -------------------
 .../src/blocks/text-block/form.js             | 30 +++++++++--
 3 files changed, 55 insertions(+), 57 deletions(-)
 delete mode 100644 tinymce-per-block/src/blocks/inline-text-block/form.js

diff --git a/tinymce-per-block/src/blocks/heading-block/form.js b/tinymce-per-block/src/blocks/heading-block/form.js
index 0ac0319aedf773..6730291ace0fa0 100644
--- a/tinymce-per-block/src/blocks/heading-block/form.js
+++ b/tinymce-per-block/src/blocks/heading-block/form.js
@@ -5,7 +5,10 @@ import { createElement, Component } from 'wp-elements';
 import classNames from 'classnames';
 import { EditorHeadingIcon } from 'dashicons';
 
-import InlineTextBlockForm from '../inline-text-block/form';
+/**
+ * Internal dependencies
+ */
+import { EditableComponent } from 'wp-blocks';
 import EditableFormatToolbar from 'controls/editable-format-toolbar';
 import BlockArrangement from 'controls/block-arrangement';
 import TransformBlockToolbar from 'controls/transform-block-toolbar';
@@ -28,8 +31,19 @@ export default class HeadingBlockForm extends Component {
 	};
 
 	render() {
-		const { api, block, isSelected, isHovered, first, last } = this.props;
+		const { api, block, isSelected, isHovered, first, last, focusConfig } = this.props;
 		const sizes = [ 'h1', 'h2', 'h3' ];
+		const splitValue = ( left, right ) => {
+			api.change( { content: left } );
+			if ( right ) {
+				api.appendBlock( {
+					...block,
+					content: right
+				} );
+			} else {
+				api.appendBlock();
+			}
+		};
 
 		return (
 			<div onMouseEnter={ api.hover } onMouseLeave={ api.unhover }>
@@ -64,11 +78,21 @@ export default class HeadingBlockForm extends Component {
 					</div>
 				) }
 				<div className={ `heading-block__form ${ block.size }` } onClick={ api.select }>
-					<InlineTextBlockForm
+					<EditableComponent
 						ref={ this.bindForm }
-						{ ...this.props }
+						content={ block.content }
+						moveCursorUp={ api.moveCursorUp }
+						moveCursorDown={ api.moveCursorDown }
+						splitValue={ splitValue }
+						mergeWithPrevious={ api.mergeWithPrevious }
+						remove={ api.remove }
+						onChange={ ( value ) => api.change( { content: value } ) }
 						setToolbarState={ this.setToolbarState }
+						focusConfig={ focusConfig }
+						onFocusChange={ api.focus }
+						onType={ api.unselect }
 						single
+						inline
 					/>
 				</div>
 			</div>
diff --git a/tinymce-per-block/src/blocks/inline-text-block/form.js b/tinymce-per-block/src/blocks/inline-text-block/form.js
deleted file mode 100644
index 72674a144e8065..00000000000000
--- a/tinymce-per-block/src/blocks/inline-text-block/form.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement, Component } from 'wp-elements';
-import { EditableComponent } from 'wp-blocks';
-
-export default class InlineTextBlockForm extends Component {
-	bindEditable = ( ref ) => {
-		this.editable = ref;
-	}
-
-	executeCommand = ( ...args ) => {
-		this.editable.executeCommand( ...args );
-	};
-
-	render() {
-		const { api, block, setToolbarState, focusConfig, single = false } = this.props;
-
-		const splitValue = ( left, right ) => {
-			api.change( { content: left } );
-			if ( right ) {
-				api.appendBlock( {
-					...block,
-					content: right
-				} );
-			} else {
-				api.appendBlock();
-			}
-		};
-
-		return (
-			<EditableComponent
-				ref={ this.bindEditable }
-				content={ block.content }
-				moveCursorUp={ api.moveCursorUp }
-				moveCursorDown={ api.moveCursorDown }
-				splitValue={ splitValue }
-				mergeWithPrevious={ api.mergeWithPrevious }
-				remove={ api.remove }
-				onChange={ ( value ) => api.change( { content: value } ) }
-				setToolbarState={ setToolbarState }
-				focusConfig={ focusConfig }
-				onFocusChange={ api.focus }
-				onType={ api.unselect }
-				single={ single }
-				inline
-			/>
-		);
-	}
-}
diff --git a/tinymce-per-block/src/blocks/text-block/form.js b/tinymce-per-block/src/blocks/text-block/form.js
index 506e81d692b4cc..dc7c867e8de6be 100644
--- a/tinymce-per-block/src/blocks/text-block/form.js
+++ b/tinymce-per-block/src/blocks/text-block/form.js
@@ -3,11 +3,14 @@
  */
 import { createElement, Component } from 'wp-elements';
 
+/**
+ * Internal dependencies
+ */
 import EditableFormatToolbar from 'controls/editable-format-toolbar';
 import AlignmentToolbar from 'controls/alignment-toolbar';
 import BlockArrangement from 'controls/block-arrangement';
 import TransformBlockToolbar from 'controls/transform-block-toolbar';
-import InlineTextBlockForm from 'blocks/inline-text-block/form';
+import { EditableComponent } from 'wp-blocks';
 import InserterButton from 'inserter/button';
 
 export default class TextBlockForm extends Component {
@@ -33,6 +36,17 @@ export default class TextBlockForm extends Component {
 		const style = {
 			textAlign: selectedTextAlign
 		};
+		const splitValue = ( left, right ) => {
+			api.change( { content: left } );
+			if ( right ) {
+				api.appendBlock( {
+					...block,
+					content: right
+				} );
+			} else {
+				api.appendBlock();
+			}
+		};
 
 		return (
 			<div className="text-block__form" onMouseEnter={ api.hover } onMouseLeave={ api.unhover }>
@@ -59,10 +73,20 @@ export default class TextBlockForm extends Component {
 				}
 
 				<div style={ style } onClick={ api.select }>
-					<InlineTextBlockForm
+					<EditableComponent
 						ref={ this.bindForm }
-						{ ...this.props }
+						content={ block.content }
+						moveCursorUp={ api.moveCursorUp }
+						moveCursorDown={ api.moveCursorDown }
+						splitValue={ splitValue }
+						mergeWithPrevious={ api.mergeWithPrevious }
+						remove={ api.remove }
+						onChange={ ( value ) => api.change( { content: value } ) }
 						setToolbarState={ this.setToolbarState }
+						focusConfig={ focusConfig }
+						onFocusChange={ api.focus }
+						onType={ api.unselect }
+						inline
 					/>
 				</div>
 			</div>