Using Textbox.io -Toolbar grouping

HTML

<script src="https://s3.amazonaws.com/static.ephox.com/jsfiddle/textboxio/textboxio.js"></script>
<div id="proxy" style="display:none"></div>

<div id="editableDiv">


  <table class="design-surface-table" style="width: 449px; height: 169px;">

  <tbody id="tblTBody">
    <tr style="height: 58px;">
      <td style="height: 58px; width: 106px;">0,0</td>
      <td colspan="2" style="height: 58px; width: 343px;">0,1 0,2</td>
    </tr>
    <tr style="height: 23px;">
      <td rowspan="2" style="height: 111px; width: 106px;">1,0
        <br />2,0
        <br />
      </td>
      <td style="height: 23px; width: 193px;">1,1</td>
      <td style="height: 23px; width: 150px;">1,2</td>
    </tr>
    <tr style="height: 88px;">
      <td style="width: 193px; height: 88px;">2,1</td>
      <td style="width: 150px; height: 88px;">2,2</td>
    </tr>
  </tbody>

</table>
</div>

<button id="btnGetCode">Get code...</button>
<br />
<textarea id="txtHTMLFromEditor" style="display:block;width:100%;min-height:200px" ></textarea>
<br />
<textarea id="txtResult" style="display:block;width:100%;min-height:200px" ></textarea>

CSS

#editableDiv {
    margin:10px 0;
    height:250px;
}

JavaScript

$(document)
	.ready(function() { 
	// Create a Textbox.io Editor for the matched element(s)
  var editor = textboxio.replace('#editableDiv',{
      ui: {
          toolbar: {
              // groups can be defined inline as part of the toolbar items
              items: [{
                  label: 'JP Editor',
                  items: ['table']
              }]
          }
      }
  });

editor.events.dirty.addListener(function () {
    // do something
    //console.log('editor content is now dirty', editor.element())
		update( editor.content.get() );
		// Set isDirty to false
		editor.content.setDirty(false);
});

update( getEditorHTML() );

	function getEditorHTML(){
  	return editor.content.get();
  }
  
  $( "#btnGetCode")
    .on( "click" , function() {
      update( getEditorHTML() );
    });
  
  function update( editorHTML ){
  	updateProxy( editorHTML );
      
    $( "#txtHTMLFromEditor")
      .text( editorHTML );

    $( "#txtResult")
      .text( getXAMLFromHTML(  editorHTML ) );
  }
  
  function updateProxy( code ){
  	$( "#proxy" )
	    .empty()
      .html( code );
  }
  
  function getXAMLFromHTML( code ){
    var trs = $( "#proxy" ).find( "table tr" );
    var gridContent = "";
    var gridRowsDefinitions = "";
    var gridColumnsDefinitions = "";
    var tds;
    var maxColumns = 0;
    var maxColumnsRowIndex = 0;
    var maxColumnsTDs;
    
    var maxRows = 0;
    
    $.each(trs, function(i){
    	//console.log( "tr", $(this) );
      //console.log( " tds", $(this).find( "td" ) );
			tds = $(this).find( "td" );
      
      if(maxColumns < tds.length ){
      	maxColumns = tds.length;
        maxColumnsRowIndex = i;
      }
      //console.log( "maxColumns", maxColumns );
			//console.log( "maxColumnsRowIndex", maxColumnsRowIndex );
      
      height = $(this).height() > 0 ? $(this).height() : "*" ;
      //console.log( "tr['height']", $(this).height() );
      gridRowsDefinitions += getRowDefinition( height );
    });
    
    
    
   ...