What's the right way to configure Jodit toolbar buttons with custom order and grouping?

I want to configure jodit to use specific buttons in order and groupings of my choice. For example: ( Undo - Redo - Separator ) group ; ( Bold - Italic - Underline - Separator ) group; Etc. While also having the option to mix in custom buttons. How can I accomplish this?

I tried both using the 'buttons' option in the Jodit make configuration, which makes it easy to include default buttons, and include custom buttons as well, but does not allow me to make groupings.

buttons: [
  'undo',
  'redo',
  'italic',
  'bold',
  { name: 'foo', text: 'bar', exec: () => { ...}
]

I also tried using this method:

editor.toolbar.build([
  new UIGroup(
    editor, 
    [editor.toolbar.buttons.find(b => b.name === 'undo')],
    { name: 'undo' }
  ),
  new UIGroup(
    editor, 
    [editor.toolbar.buttons.find(b => b.name === 'redo')],
    { name: 'redo' }
  ),
  new UIGroup(
    editor, 
    [new UISelect(
      editor, 
      {
        name: 'select-dropdown',
        options: [
          { value: 'a', text: 'a' }, 
          { value: 'b', text: 'b' }, 
          { value: 'c', text: 'c' }, 
        ]
      }
    )],
    { name: 'select-dropdown' }
  ),

by using the Jodit provided UI system and this would let me use easily default buttons and include separators/groupings by using the UISeparator, but UIButton does not have the 'exec' property, so I do not know if it is possible to add custom functionality. It is also incredibly unwieldy and also apparently the UISelect is not working as expected: Screenshot

What is the correct way of doing this? Thanks a lot in advance.

I find it a bit unclear if you want a visual separation or an actual grouping with drop-down. For just a visual separation it is possible to use dividers of some kind, example with | between buttons or --- for separation:

  buttons: [
    'undo',
    'redo',
    '|',
    'italic',
    'bold',
    '---',
    { name: 'foo', text: 'bar', exec: () => {} },
  ],

It is also possible to group buttons with a drop down, or if you want to group them together so that they do not separate in smaller windows 'group:' can be used. I will provide an example, you list buttons together but add any custom functionality at controls:

const editor = Jodit.make('#editor', {
      buttons: [
        'fontsize',
        '|',
        {
          name: 'group1',
          text: 'Group 1',
          list: {
            undo: 'undo',
            redo: 'redo',
            customButton1: 'Custom 1',
          },
        },
        {
          name: 'group2',
          text: 'Group 2',
          id: '2',
          class: 'gr-2',
          list: {
            bold: 'bold',
            italic: 'italic',
            underline: 'underline',
            customButton2: 'Custom 2',
          },
        },
        '---',
        {
          group: 'group3',
          buttons: ['bold', 'italic', 'underline', 'customButton1']
        },
      ],
      controls: {
        customButton1: {
          text: 'Custom Button 1',
          exec: () => {
            editor.value = 'Hello';
          },
        },
        customButton2: {
          text: 'Custom Button 2',
          class: 'btn-2',
          exec: () => {
            editor.s.insertHTML('<p>Hello</p>');
          },
        },
      },
    });