Show separate color indicator bar in text & highlight buttons

[sjdemartini]

Changes:

• Add generic support for showing a color indicator in the base MenuButtonColorPicker component, and utilize that in MenuButtonTextColor and MenuButtonHighlightColor. Now, the current color will be shown with the "bar" that was present in the original icons. The bar will be omitted (effectively transparent) if no color/highlight value is active.
• The MenuButton component now allows for passing children to override the default <IconComponent /> rendering
• There are a few new associated icon components, the latter four of which work well as the IconComponent prop for MenuButtonColorPicker:
  • FormatColorBar (an icon with just the bottom horizontal bar, used as the color indicator in MenuButtonColorPicker)
  • BorderColorNoBar
  • FormatColorFillNoBar
  • FormatColorTextNoBar
  • FormatInkHighlighterNoBar

cc @ericdwang since you mentioned you were interested in this.

[ericdwang]

Looks great! :tada:

I just noticed one tiny inconsistency when selecting both colored and non-colored text/highlights: the text color button shows the color but the highlight color button doesn't. Like in this example "no" has no colors and "colors" has a text and background color:

[sjdemartini]

@ericdwang Hm, yeah, so the way the Highlight button behaves is to check whether your selection is "active" for the highlight mark (see isActive, consistent with how Tiptap recommends showing button states in all of their examples, so the same as how we handle Bold, Italic, etc.). That means if you select something that has no highlighting on some portion of it, it shows as "not active" and does not show a current color.

By contrast, I don't have MenuButtonTextColor checking "is active", since it seemed moderately useful to show the "first" color of the selected text, but that's probably the wrong choice for the sake of consistency. I'll change it to show no color if there are multiple colors selected, the same as how Google Docs behaves (and other controls in mui-tiptap behave, like FontSize, etc.)

[ericdwang]

Ah I see, makes sense!