MenuButtonHighlightColor: choose highlight color for current selection (for @tiptap/extension-highlight, useful when configuring as Highlight.configure({ multicolor: true }))
MenuButtonHighlightToggle: toggle highlight off/on for the current selection (for @tiptap/extension-highlight, useful for the default Highlight extension configuration with multicolor: false)
and also exposes a few new components/utils that are used under the hood:
MenuButtonColorPicker: generic version of MenuButtonTextColor/MenuButtonHighlightColor, which utilize this under the hood, to create a custom version of a color-picking menu button.
ColorPicker: A color-picker that includes hue/saturation/alpha gradient selectors (via react-colorful), plus a text input to enter a color directly, and optional swatchColors for color presets. Used by MenuButtonColorPicker/MenuButtonTextColor/MenuButtonHighlightColor under the hood.
ColorSwatchButton: Renders a button that shows and allows selecting a color preset. Utilized by ColorPicker for its swatchColors.
See the README for more details on each of the above components, and src/demo/EditorMenuControls.tsx for example usage.
Decisions
Don't build a custom hue/saturation/alpha color picker from scratch within mui-tiptap. Instead use the popular/robust/lightweight react-colorful package.
It seems essential to include interactive gradient-based hue/saturation/alpha pickers for usability, and not just rely on swatch presets or text-based color selection, so this feels a worthwhile cost in terms of a new mui-tiptap dependency.
Don't incorporate any other third-party libraries for color-parsing to avoid additional dependencies; just rely on MUI's rgbToHex function.
To utilize react-colorful, we need to pass it colors in a predictable format. Here, we always convert to hex for simplicity. (That goes both for colors set in the Tiptap editor external to the new menu buttons, and for colors typed in by the user in the text input in the mui-tiptap color picker.)
Since @mui/material is already a peer dependency and its rgbToHex function handles some standard formats (hex, rgb, rgba, hsl, hsla, and color()), using this should work for many purposes out of the box. It does not support CSS color name keywords (like "blue") or some special formats like CMYK, but this seems a worthwhile tradeoff for the built-in default implementation, in order to keep mui-tiptap's dependencies as lean as possible.
The ColorPicker (and thus MenuButton*Color* components via ColorPickerProps) contains a colorToHex prop. Users can provide this prop to override the default MUI-based implementation for converting a given CSS color string to a string in hex format (e.g. "#ff0000"). See the ColorPickerProps definition for more details, such as examples using more full-featured libraries like colord or tinycolor2.
As requested in https://github.com/sjdemartini/mui-tiptap/issues/52.
This adds a few primary new controls components:
MenuButtonTextColor: choose text color for current selection (for@tiptap/extension-color)MenuButtonHighlightColor: choose highlight color for current selection (for@tiptap/extension-highlight, useful when configuring asHighlight.configure({ multicolor: true }))MenuButtonHighlightToggle: toggle highlight off/on for the current selection (for@tiptap/extension-highlight, useful for the defaultHighlightextension configuration withmulticolor: false)and also exposes a few new components/utils that are used under the hood:
MenuButtonColorPicker: generic version ofMenuButtonTextColor/MenuButtonHighlightColor, which utilize this under the hood, to create a custom version of a color-picking menu button.ColorPicker: A color-picker that includes hue/saturation/alpha gradient selectors (via react-colorful), plus a text input to enter a color directly, and optionalswatchColorsfor color presets. Used byMenuButtonColorPicker/MenuButtonTextColor/MenuButtonHighlightColorunder the hood.ColorSwatchButton: Renders a button that shows and allows selecting a color preset. Utilized byColorPickerfor itsswatchColors.See the README for more details on each of the above components, and
src/demo/EditorMenuControls.tsxfor example usage.Decisions
rgbToHexfunction.react-colorful, we need to pass it colors in a predictable format. Here, we always convert to hex for simplicity. (That goes both for colors set in the Tiptap editor external to the new menu buttons, and for colors typed in by the user in the text input in the mui-tiptap color picker.)@mui/materialis already a peer dependency and itsrgbToHexfunction handles some standard formats (hex, rgb, rgba, hsl, hsla, andcolor()), using this should work for many purposes out of the box. It does not support CSS color name keywords (like"blue") or some special formats like CMYK, but this seems a worthwhile tradeoff for the built-in default implementation, in order to keep mui-tiptap's dependencies as lean as possible.ColorPicker(and thusMenuButton*Color*components viaColorPickerProps) contains acolorToHexprop. Users can provide this prop to override the default MUI-based implementation for converting a given CSS color string to a string in hex format (e.g."#ff0000"). See theColorPickerPropsdefinition for more details, such as examples using more full-featured libraries like colord or tinycolor2.Screenshots