Pass out the editor on setup and use it for execCommand

blocks/editable/index.js

@@ -88,6 +88,10 @@ export default class Editable extends wp.element.Component {
 		editor.on( 'focusin', this.onFocus );
 		editor.on( 'nodechange', this.onNodeChange );
 		editor.on( 'keydown', this.onKeyDown );
+
+		if ( this.props.onSetup ) {
+			this.props.onSetup( editor );
+		}
 	}
 
 	onInit() {

blocks/editable/tinymce.js

@@ -31,6 +31,7 @@ export default class TinyMCE extends wp.element.Component {
 			browser_spellcheck: true,
 			entity_encoding: 'raw',
 			convert_urls: false,
+			plugins: [ 'table' ],
 			setup: ( editor ) => {
 				this.editor = editor;
 				this.props.onSetup( editor );

blocks/library/table/index.js

@@ -2,17 +2,17 @@
  * Internal dependencies
  */
 import './style.scss';
-import { registerBlock, query as hpq } from 'api';
-import Editable from 'components/editable';
+import { registerBlock, query as hpq } from '../../api';
+import Editable from '../../editable';
 
 const { children, prop } = hpq;
 
-let editable = null;
-
-function execCommand( commandId ) {
-	const editorNode = editable !== null ? editable.editorNode : null;
-	const editor = tinymce.editors.find( ( e ) => e.targetElm === editorNode );
-	editor.execCommand( commandId, false, editor );
+function execCommand( command ) {
+	return ( { editor } ) => {
+		if ( editor ) {
+			editor.execCommand( command );
+		}
+	};
 }
 
 registerBlock( 'core/table', {
@@ -27,30 +27,52 @@ registerBlock( 'core/table', {
 
 	controls: [
 		{
-			icon: 'editor-table',
+			icon: 'table-row-before',
 			title: wp.i18n.__( 'Insert Row Before' ),
-			isActive: () => false, //TODO
-			onClick() {
-				execCommand( 'mceTableInsertRowBefore', false );
-			}
+			isActive: () => false,
+			onClick: execCommand( 'mceTableInsertRowBefore' )
 		},
 		{
-			icon: 'editor-table',
+			icon: 'table-row-after',
 			title: wp.i18n.__( 'Insert Row After' ),
-			isActive: () => false, //TODO
-			onClick() {
-				execCommand( 'mceTableInsertRowAfter', false );
-			}
+			isActive: () => false,
+			onClick: execCommand( 'mceTableInsertRowAfter' )
+		},
+		{
+			icon: 'table-row-delete',
+			title: wp.i18n.__( 'Delete Row' ),
+			isActive: () => false,
+			onClick: execCommand( 'mceTableDeleteRow' )
+		},
+		{
+			icon: 'table-col-before',
+			title: wp.i18n.__( 'Insert Column Before' ),
+			isActive: () => false,
+			onClick: execCommand( 'mceTableInsertColBefore' )
+		},
+		{
+			icon: 'table-col-after',
+			title: wp.i18n.__( 'Insert Column After' ),
+			isActive: () => false,
+			onClick: execCommand( 'mceTableInsertColAfter' )
+		},
+		{
+			icon: 'table-col-delete',
+			title: wp.i18n.__( 'Delete Column' ),
+			isActive: () => false,
+			onClick: execCommand( 'mceTableDeleteCol' )
 		},
 	],
 
 	edit( { attributes, setAttributes, focus, setFocus } ) {
 		const { nodeName = 'TABLE', rows = [ <tr key="1"><td><br /></td><td><br /></td></tr>, <tr key="2"><td><br /></td><td><br /></td></tr> ] } = attributes;
 		return (
 			<Editable
-				ref={ ( e ) => editable = e }
 				tagName={ nodeName.toLowerCase() }
 				style={ { width: '100%' } }
+				onSetup={ ( nextEditor ) => {
+					setAttributes( { editor: nextEditor } );
+				} }
 				onChange={ ( nextRows ) => {
 					setAttributes( { rows: nextRows } );
 				} }