From 2a68b1083eb138d438ff31ffbcd3092ea19f34d1 Mon Sep 17 00:00:00 2001
From: iseulde <ella@iseulde.com>
Date: Wed, 1 Mar 2017 18:42:34 +0100
Subject: [PATCH] Start work on inserter

---
 shared/tinymce/toolbar.js                     |  4 +-
 .../blocks/elements/blockquote/register.js    |  5 +-
 .../elements/horizontal-rule/register.js      |  5 +-
 tinymce-single/blocks/index.js                |  5 +-
 tinymce-single/tinymce/block.js               | 64 ++++++++++++++++++-
 5 files changed, 77 insertions(+), 6 deletions(-)

diff --git a/shared/tinymce/toolbar.js b/shared/tinymce/toolbar.js
index d32b669bdbb78d..53a9b0f6837b92 100644
--- a/shared/tinymce/toolbar.js
+++ b/shared/tinymce/toolbar.js
@@ -74,7 +74,9 @@
 
 					function onClick( callback ) {
 						return function() {
-							callback( editor, window.element );
+							editor.undoManager.transact( function() {
+								callback( editor, window.element );
+							} );
 						}
 					}
 
diff --git a/tinymce-single/blocks/elements/blockquote/register.js b/tinymce-single/blocks/elements/blockquote/register.js
index 01eef9b1b0543d..cb0946d3abd072 100644
--- a/tinymce-single/blocks/elements/blockquote/register.js
+++ b/tinymce-single/blocks/elements/blockquote/register.js
@@ -9,6 +9,9 @@ window.wp.blocks.register( {
 				editor.formatter.remove( 'blockquote' );
 			}
 		}
-	]
+	],
+	insert: function( editor, element ) {
+		editor.formatter.apply( 'blockquote', element );
+	}
 } );
 
diff --git a/tinymce-single/blocks/elements/horizontal-rule/register.js b/tinymce-single/blocks/elements/horizontal-rule/register.js
index e4939537779d35..9ff1cb5a4e81a5 100644
--- a/tinymce-single/blocks/elements/horizontal-rule/register.js
+++ b/tinymce-single/blocks/elements/horizontal-rule/register.js
@@ -4,5 +4,8 @@ window.wp.blocks.register( {
 	icon: 'gridicons-minus',
 	buttons: [
 
-	]
+	],
+	insert: function( editor, element ) {
+		element.parentNode.replaceChild( document.createElement( 'hr' ), element );
+	}
 } );
diff --git a/tinymce-single/blocks/index.js b/tinymce-single/blocks/index.js
index f61f73d5f70c57..3babaea67f3343 100644
--- a/tinymce-single/blocks/index.js
+++ b/tinymce-single/blocks/index.js
@@ -19,11 +19,14 @@
 		getSettings: function( id ) {
 			return _settings[ id ];
 		},
-		getSettingsByElement( element ) {
+		getSettingsByElement: function( element ) {
 			var blockType = element.getAttribute( 'data-wp-block-type' );
 			var nodeName = element.nodeName.toLowerCase();
 
 			return this.getSettings( blockType || 'element:' + nodeName );
+		},
+		getAllSettings: function() {
+			return _settings;
 		}
 	};
 } )( window.wp = window.wp || {} );
diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js
index 0961dcd4c858ff..201a752d841677 100644
--- a/tinymce-single/tinymce/block.js
+++ b/tinymce-single/tinymce/block.js
@@ -198,9 +198,15 @@
 				classes: 'widget btn move-down'
 			} );
 
+			var insert = false;
+
 			editor.addButton( 'add', {
 				icon: 'gridicons-add-outline',
-				tooltip: 'Add Block'
+				tooltip: 'Add Block',
+				onClick: function() {
+					insert = true;
+					editor.nodeChanged();
+				}
 			} );
 
 			// Adjust icon of TinyMCE core buttons.
@@ -216,10 +222,53 @@
 			toolbarCaret.$el.addClass( 'block-toolbar' );
 			blockToolbar.$el.addClass( 'block-toolbar' );
 
+			function getInsertButtons() {
+				var allSettings = wp.blocks.getAllSettings();
+				var buttons = [];
+				var key;
+
+				for ( key in allSettings ) {
+					if ( allSettings[ key ].insert ) {
+						buttons.push( {
+							icon: allSettings[ key ].icon,
+							onClick: allSettings[ key ].insert
+						} );
+					}
+				}
+
+				buttons.push( {
+					text: 'Work in progress',
+					onClick: function() {}
+				} );
+
+				return buttons;
+			}
+
+			var toolbarInsert = editor.wp._createToolbar( getInsertButtons() );
+
 			var anchorNode;
 			var range;
 			var blockToolbarWidth = 0;
 
+			toolbarInsert.reposition = function () {
+				if ( ! element ) {
+					return;
+				}
+
+				var toolbar = this.getEl();
+				var toolbarRect = toolbar.getBoundingClientRect();
+				var elementRect = element.getBoundingClientRect();
+				var contentRect = editor.getBody().getBoundingClientRect();
+
+				DOM.setStyles( toolbar, {
+					position: 'absolute',
+					left: contentRect.left + 100 + 'px',
+					top: elementRect.top + window.pageYOffset + 'px'
+				} );
+
+				this.show();
+			}
+
 			toolbarInline.reposition = function () {
 				if ( ! element ) {
 					return;
@@ -279,7 +328,7 @@
 				// Element node.
 				if ( node.nodeType === 1 ) {
 					// Element is no direct child.
-					if ( isAtRoot && node.parentNode !== editor.getBody() ) {
+					if ( isAtRoot && node.parentNode !== editor.getBody() && node.nodeName !== 'P' ) {
 						return false;
 					}
 
@@ -431,6 +480,8 @@
 				} else {
 					hidden = true;
 				}
+
+				insert = false;
 			} );
 
 			editor.on( 'keyup', function( event ) {
@@ -459,6 +510,7 @@
 
 			editor.on( 'mousedown touchstart', function() {
 				hidden = false;
+				insert = false;
 			} );
 
 			editor.on( 'selectionChange nodeChange', function( event ) {
@@ -497,11 +549,19 @@
 						hideBlockUI();
 					}
 				}
+
+				if ( insert ) {
+					toolbarInsert.reposition();
+				} else {
+					toolbarInsert.hide();
+				}
 			} );
 
 			editor.on( 'nodeChange', function( event ) {
 				editor.$( '*[data-mce-selected="block"]' ).attr( 'data-mce-selected', null );
 				editor.$( element ).attr( 'data-mce-selected', 'block' );
+
+				insert = false;
 			} );
 
 			// editor.on( 'keydown', function( event ) {