Feature to allow grouping of actions into a dropdown in toolbar

[dkyeremeh]

Summary

It would be great if this plugin allows toolbar actions to be grouped into a dropdown. This will allow devs to create compact toolbars when a lot of actions need to be defined.

Motivation

As it stands now having more than a few actions in the toolbar easily causes clutter. This limits the number of actions that can be used.

In the screenshot below, the icons for the headers and paragraph are almost occupying the entire toolbar. By implementing grouping, this can be reduced to a single dropdown item.

Implementation

I can get this feature developed if it seems good to you. I would also need your input concerning the prop structure to use.

For now I think we can use a 2 dimension array for the value of the action prop of RichToolbar. The icon for the first item of the array can be used.

Example

<RichToolbar
  editor={ref}
  actions={[
    actions.undo,
    actions.redo,
    [
      actions.heading1,
      actions.heading2,
      actions.heading3,
      actions.heading4,
      actions.heading5,
      actions.heading6,
      actions.setParagraph,
    ],
    actions.setBold,
    actions.setItalic,
    actions.setUnderline,
    actions.setStrikethrough,
    [actions.insertBulletsList, actions.insertOrderedList],
    [actions.insertVideo, actions.insertImage, actions.insertHTML],
    actions.insertLink,
    actions.keyboard,
  ]}
  ...
/>;