TinyMCE per block: Adding the possibility to trigger the inserter menu on empty blocks

tinymce-per-block/src/blocks/text-block/_style.scss

@@ -1,4 +1,5 @@
 .text-block__form {
+	position: relative;
 	width: 100%;
 	border: none;
 	font: inherit;
@@ -10,4 +11,10 @@
 		padding: 0;
 		margin: 0;
 	}
+
+	.inserter__button {
+		position: absolute;
+		left: -50px;
+		margin: 0;
+	}
 }

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

@@ -6,7 +6,8 @@ import { createElement, Component } from 'wp-elements';
 import EditableFormatToolbar from 'controls/editable-format-toolbar';
 import AlignmentToolbar from 'controls/alignment-toolbar';
 import BlockArrangement from 'controls/block-arrangement';
-import InlineTextBlockForm from '../inline-text-block/form';
+import InlineTextBlockForm from 'blocks/inline-text-block/form';
+import InserterButton from 'inserter/button';
 
 export default class TextBlockForm extends Component {
 	bindForm = ( ref ) => {
@@ -27,7 +28,7 @@ export default class TextBlockForm extends Component {
 	};
 
 	render() {
-		const { block, isSelected, moveBlockUp, moveBlockDown } = this.props;
+		const { block, isSelected, focusConfig, moveBlockUp, moveBlockDown, replace } = this.props;
 		const selectedTextAlign = block.align || 'left';
 		const style = {
 			textAlign: selectedTextAlign
@@ -50,6 +51,9 @@ export default class TextBlockForm extends Component {
 				}
 
 				<div className="text-block__form" style={ style }>
+					{ ! block.content.trim() && ! isSelected && focusConfig &&
+						<InserterButton onAdd={ ( id ) => replace( id ) } />
+					}
 					<InlineTextBlockForm
 						ref={ this.bindForm }
 						{ ...this.props }

tinymce-per-block/src/inserter/button.js

@@ -21,6 +21,7 @@ export default class InserterButtonComponent extends Component {
 
 	toggleInserter = ( event ) => {
 		event.preventDefault();
+		event.stopPropagation();
 		this.setState( {
 			opened: ! this.state.opened
 		} );

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

@@ -10,23 +10,37 @@ export default class InserterComponent extends Component {
 		onAdd: () => {}
 	};
 
+	state = {
+		filterValue: ''
+	};
+
+	filter = ( event ) => {
+		this.setState( {
+			filterValue: event.target.value
+		} );
+	};
+
 	render() {
 		const addBlock = ( id ) => () => this.props.onAdd( id );
+		const stopPropagation = ( event ) => event.stopPropagation();
+		const blocks = getBlocks().filter(
+			( block ) => block.title.toLowerCase().indexOf( this.state.filterValue.toLowerCase() ) !== -1
+		);
 
 		return (
-			<div className="inserter">
+			<div className="inserter" onClick={ stopPropagation }>
 				<div className="inserter__arrow" />
 				<div className="inserter__content">
 					<div className="inserter__category-blocks">
-						{ getBlocks().map( ( { id, title, icon: Icon } ) => (
+						{ blocks.map( ( { id, title, icon: Icon } ) => (
 							<div key={ title } className="inserter__block" onClick={ addBlock( id ) }>
 								<Icon />
 								{ title }
 							</div>
 						) ) }
 					</div>
 				</div>
-				<input className="inserter__search" type="search" placeholder="Search..." />
+				<input className="inserter__search" type="search" placeholder="Search..." onChange={ this.filter } />
 			</div>
 		);
 	}

tinymce-per-block/src/inserter/style.scss

@@ -1,4 +1,5 @@
 .inserter__button {
+	display: inline-block;
 	position: relative;
 	background: none;
 	border: none;
@@ -22,6 +23,7 @@
 }
 
 .inserter {
+	font: 13px/1.8 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
 	width: 280px;
 	box-shadow: 0px 3px 20px rgba( 18, 24, 30, .1 ), 0px 1px 3px rgba( 18, 24, 30, .1 );
 	border: 1px solid #e0e5e9;

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

@@ -89,6 +89,12 @@ export default class BlockListBlock extends Component {
 				executeCommand( {
 					type: 'moveBlockDown'
 				} );
+			},
+			replace( id ) {
+				executeCommand( {
+					type: 'replace',
+					id
+				} );
 			}
 		};
 

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

@@ -189,6 +189,20 @@ class BlockList extends Component {
 					);
 				} );
 			},
+			replace: ( { id } ) => {
+				const newBlockUid = uniqueId();
+				const blockDefinition = getBlock( id );
+				const newBlock = Object.assign( { uid: newBlockUid }, blockDefinition.create() );
+				const newBlocks = [
+					...this.content.slice( 0, index ),
+					newBlock,
+					...this.content.slice( index + 1 )
+				];
+				this.onChange( newBlocks );
+				setTimeout( () => {
+					this.focus( newBlockUid );
+				} );
+			}
 		};
 
 		commandHandlers[ command.type ] && commandHandlers[ command.type ]( command );