TinyMCE per block: Delete unnecessary abstraction (#253)

WordPress · Mar 13, 2017 · ca52254 · ca52254
1 parent 98b7161
commit ca52254
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 57 deletions.
diff --git 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
diff --git 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>