Froala Wysiwyg - adding custom and toolbar buttons in a custom dropdown

Question

I'm trying to create a more custom dropdown for adding all the toolbar buttons under it when toolbarXS is activated (all the missing icons in the XS should be under the more dropdown. unfortunately the docs aren't that clear and outputting only text options which does nothing besides showing.

i was wondering if anybody could help in how to do it.

i.e

// define annotation button for imagePopup
$.FroalaEditor.DefineIcon('annotationIcon', { NAME: 'pencil'}); // the icon
$.FroalaEditor.RegisterCommand('annotation', { // the button 
  title: 'Annotation',
  icon: 'annotationIcon',
  undo: true, // Save the button action into undo stack.
  focus: true, // Focus inside the editor before the callback.
  showOnMobile: true, // Show the button on mobile or not.
  refreshAfterCallback: true, // Refresh the buttons state after the callback.
  // Called when the button is hit.
  callback: function () {
    annotateImage(this);
  }
})

// Define `more` dropdown button.
$.FroalaEditor.RegisterCommand('moreDropdown', {
  title: 'More',
  icon: 'More',
  undo: true,
  focus: true,
  type: 'dropdown',
  options: {
    "annotation": 'annotation'
  },
});

Thanks in advance

EDIT: the only way i could figure out now is to use

html: function() {
  return 'HTML_CODE'
}

and just write all the ul by myself which is disgusting and doesn't seem like the proper way of doing it.

Any help will be appreciated.

Answer 1

After talking with froala guys! Custom popup is a solution for implementing a popup with toolbar buttons as a dropdown.

Thanks