How to group buttons on Google Closure editor?

Question

I'm using the Google Closure WYSIWYG editor and struggling to group text-justify buttons in a select.

Here's my code:

// Create an editable field.
var editor = new goog.editor.SeamlessField('editorEditableContainer')

// Create and register all of the editing plugins you want to use.
editor.registerPlugin(new goog.editor.plugins.BasicTextFormatter())
editor.registerPlugin(new goog.editor.plugins.RemoveFormatting())
editor.registerPlugin(new goog.editor.plugins.ListTabHandler())
editor.registerPlugin(new goog.editor.plugins.SpacesTabHandler())
editor.registerPlugin(new goog.editor.plugins.EnterHandler())
editor.registerPlugin(new goog.editor.plugins.HeaderFormatter())
editor.registerPlugin(new goog.editor.plugins.LinkDialogPlugin())
editor.registerPlugin(new goog.editor.plugins.LinkBubble())

// Specify the buttons to add to the toolbar
var buttons = [
    goog.editor.Command.BOLD,
    goog.editor.Command.ITALIC,
    goog.editor.Command.UNDERLINE,
    goog.editor.Command.REMOVE_FORMAT,
    goog.editor.Command.FONT_COLOR,
    goog.editor.Command.LINK,
    goog.editor.Command.JUSTIFY_LEFT,
    goog.editor.Command.JUSTIFY_CENTER,
    goog.editor.Command.JUSTIFY_RIGHT,
    goog.editor.Command.UNORDERED_LIST,
    goog.editor.Command.ORDERED_LIST,
    goog.editor.Command.OUTDENT,
    goog.editor.Command.INDENT
]

var myToolbar = goog.ui.editor.DefaultToolbar.makeToolbar(buttons, goog.dom.getElement('editorToolbar'))
var myToolbarController = new goog.ui.editor.ToolbarController(editor, myToolbar)
editor.makeEditable()

which renders into:

I'd like to group the text-justify buttons to have something like this:

But it's very hard to find how to do it (js-only).

Answer 1

I might have a solution, you could remove the items and add them to a dropdown with javascript by modifying the DOM.

The demo below is really a proof of concept of how it could work. You need to replace the Select with some sort of dropdown where buttons can be active so you can just copy and paste the existing buttons in there without losing functionality, like this.

HTML

<ul id="myList">
  <li>File</li>
  <li>Left align</li>
  <li>Middle align</li>
  <li>Right align</li>
  <li>Ordered List</li>
</ul>


<button onclick="myFunction()">Try it</button>

Javascript:

function myFunction() {
  var list = document.getElementById("myList");
  var selectList = document.createElement("SELECT");
  var array = [list.childNodes[3], list.childNodes[4], list.childNodes[5]];

  selectList.id = "justifySelect";
  list.removeChild(list.childNodes[3]);  
  list.removeChild(list.childNodes[4]);
  list.removeChild(list.childNodes[5]);
  list.insertBefore(selectList, list.childNodes[2]);

  //Create and append the options.
  for (var i = 0; i < array.length; i++) {
      var option = document.createElement("option");
      option.value = array[i];
      option.text = array[i];
      selectList.appendChild(option);
  }
}

Demo

Don't know how Google Closure builds up it's toolbar, but it looks like li elements. So replacing the (in this demo case's) 3rd, 4th and 5th element with a dropdown with those 3 elements in them is how I would solve it if it isn't possible natively.

I hope I have at least given you a new perspective at this problem and hope you will solve it soon.