From ca69ae430e384b1e7d10c935e7bb5daac81b75f8 Mon Sep 17 00:00:00 2001
From: iseulde <ella@iseulde.com>
Date: Sun, 12 Mar 2017 12:00:42 +0100
Subject: [PATCH] Add table block

---
 shared/index.css                             | 18 +++++
 tinymce-single/blocks/core/table/register.js | 84 ++++++++++++++++++++
 tinymce-single/index.html                    |  1 +
 tinymce-single/tinymce/block.css             |  4 +
 tinymce-single/tinymce/block.js              | 13 +--
 tinymce-single/tinymce/config.js             |  1 +
 6 files changed, 116 insertions(+), 5 deletions(-)
 create mode 100644 tinymce-single/blocks/core/table/register.js

diff --git a/shared/index.css b/shared/index.css
index 2d93b543545d5c..ec3992d37e81d8 100644
--- a/shared/index.css
+++ b/shared/index.css
@@ -148,6 +148,8 @@ body {
 
 #editor figcaption {
 	margin-top: 0.5em;
+	font-size: 0.9em;
+	font-style: italic;
 }
 
 #editor figure img,
@@ -180,6 +182,22 @@ body {
 	content: '— '
 }
 
+#editor table {
+	border-collapse: collapse;
+	table-layout: fixed;
+	width: 100%;
+}
+
+#editor table {
+	width: 100%;
+}
+
+#editor td,
+#editor th {
+	padding: 0.5em;
+	border: 1px solid currentColor;
+}
+
 #editor:after {
    content: ".";
    visibility: hidden;
diff --git a/tinymce-single/blocks/core/table/register.js b/tinymce-single/blocks/core/table/register.js
new file mode 100644
index 00000000000000..f5ea0a65fe3876
--- /dev/null
+++ b/tinymce-single/blocks/core/table/register.js
@@ -0,0 +1,84 @@
+( function( wp ) {
+
+	function insertEmpty() {
+		return (
+			'<figure>' +
+				'<table>' +
+					'<tr>' +
+						'<td><br></td>' +
+						'<td><br></td>' +
+					'</tr>' +
+					'<tr>' +
+						'<td><br></td>' +
+						'<td><br></td>' +
+					'</tr>' +
+				'</table>' +
+			'</figure>'
+		);
+	}
+
+	wp.blocks.registerBlock( {
+		name: 'table',
+		nameSpace: 'core',
+		displayName: 'Table',
+		type: 'text',
+		icon: 'gridicons-grid',
+		editable: [ 'table', 'figcaption' ],
+		insert: insertEmpty,
+		controls: [
+			'block-align-left',
+			'block-align-center',
+			'block-align-right',
+			'block-align-full',
+			{
+				classes: 'gridicons-rotate',
+				icon: 'gridicons-indent-right',
+				onClick: function( block, editor ) {
+					editor.execCommand( 'mceTableInsertRowBefore' );
+				}
+			},
+			{
+				classes: 'gridicons-rotate',
+				icon: 'gridicons-indent-left',
+				onClick: function( block, editor ) {
+					editor.execCommand( 'mceTableInsertRowAfter' );
+				}
+			},
+			{
+				icon: 'gridicons-indent-right',
+				onClick: function( block, editor ) {
+					editor.execCommand( 'mceTableInsertColBefore' );
+				}
+			},
+			{
+				icon: 'gridicons-indent-left',
+				onClick: function( block, editor ) {
+					editor.execCommand( 'mceTableInsertColAfter' );
+				}
+			},
+			{
+				icon: 'gridicons-caption',
+				onClick: function( block ) {
+					var figcaption = block.querySelector( 'figcaption' );
+
+					if ( figcaption ) {
+						block.removeChild( figcaption );
+					} else {
+						block.insertAdjacentHTML( 'beforeend',
+							'<figcaption><br></figcaption>' );
+					}
+
+					window.wp.blocks.selectBlock( block );
+				},
+				isActive: function( block ) {
+					return !! block.querySelector( 'figcaption' );
+				}
+			},
+			{
+				icon: 'gridicons-cog',
+				onClick: function() {}
+			}
+		]
+	} );
+
+} )( window.wp );
diff --git a/tinymce-single/index.html b/tinymce-single/index.html
index 40e39d9cfc1e7c..b239435e9fda0b 100644
--- a/tinymce-single/index.html
+++ b/tinymce-single/index.html
@@ -72,6 +72,7 @@ <h2>NASA discovers system of seven Earth-sized planets</h2>
 		<script src="blocks.js"></script>
 		<script src="blocks/core/image/register.js"></script>
 		<script src="blocks/core/gallery/register.js"></script>
+		<script src="blocks/core/table/register.js"></script>
 		<script src="blocks/elements/blockquote/register.js"></script>
 		<script src="blocks/elements/headings/register.js"></script>
 		<script src="blocks/elements/horizontal-rule/register.js"></script>
diff --git a/tinymce-single/tinymce/block.css b/tinymce-single/tinymce/block.css
index 23e3d61ca09a6d..40a5cfae77eaab 100644
--- a/tinymce-single/tinymce/block.css
+++ b/tinymce-single/tinymce/block.css
@@ -146,6 +146,10 @@ svg.gridicon {
 	transform-origin: top left;
 }
 
+.mce-gridicons-rotate svg {
+	transform: rotate( 90deg );
+}
+
 div.mce-inline-toolbar-grp {
 	background-color: #fff;
 	border: 1px solid #e1e6ea;
diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js
index c1837e4aab4b0e..b5a89f2b345df7 100644
--- a/tinymce-single/tinymce/block.js
+++ b/tinymce-single/tinymce/block.js
@@ -126,19 +126,22 @@
 
 		editor.on( 'keydown', function( event ) {
 			if ( event.keyCode === tinymce.util.VK.ENTER ) {
-				var selectedBlock = wp.blocks.getSelectedBlock();
-				var blockSettings = wp.blocks.getBlockSettingsByElement( selectedBlock );
+				var block = wp.blocks.getSelectedBlock();
+				var settings = wp.blocks.getBlockSettingsByElement( block );
 
-				if ( editor.$( selectedBlock ).attr( 'contenteditable' ) === 'false' ) {
+				if ( editor.$( block ).attr( 'contenteditable' ) === 'false' ) {
 					event.preventDefault();
 				}
 
-				if ( blockSettings && blockSettings.restrictToInline ) {
-					blockSettings.restrictToInline.forEach( function( selector ) {
+				if ( settings ) {
+					var restrict = ( settings.restrictToInline || [] ).concat( settings.editable || [] );
+
+					restrict.forEach( function( selector ) {
 						var node = editor.selection.getNode();
 
 						if ( editor.$( node ).is( selector ) || editor.$( node ).parents( selector ).length ) {
 							event.preventDefault();
+							editor.execCommand( 'InsertLineBreak' );
 						}
 					} );
 				}
diff --git a/tinymce-single/tinymce/config.js b/tinymce-single/tinymce/config.js
index e265bda75342c4..3f12f58bfc8c1e 100644
--- a/tinymce-single/tinymce/config.js
+++ b/tinymce-single/tinymce/config.js
@@ -10,6 +10,7 @@ window.tinymce.init( {
 		'clean-paste',
 		'lists',
 		'paste',
+		'table',
 		'toolbar',
 		'wplink',
 		'wptextpattern'