Add new menu buttons

[bryanjtc]

Is your feature request related to a problem? Please describe.

To make this package a true replacement for react-mui-draft-wysiwyg there are a few menu buttons that you can add.

Describe the solution you'd like

Implement the following suggestions:

• Undo menu button with @tiptap/extension-history (Add Undo and Redo menu buttons #65)
• Redo menu button with @tiptap/extension-history (Add Undo and Redo menu buttons #65)
• Highlight color menu button with @tiptap/extension-highlight (Add menu controls components for Tiptap Color and Highlight extensions #135)
• Text color menu button with @tiptap/extension-text-style @tiptap/extension-color (Add menu controls components for Tiptap Color and Highlight extensions #135)
• Add h4, h5, h6 to MenuHeadingSelect
• Font size menu button with @tiptap/extension-text-style (new FontSize extension and MenuSelectFontSize in Add FontSize extension and associated MenuSelectFontSize control component #94 and Make the MenuSelectFontSize and MenuSelectHeading components more configurable #95)
• Font family menu button with @tiptap/extension-text-style @tiptap/extension-font-family (Add font family select component for Tiptap FontFamily extension #110)
• Align left menu button with @tiptap/extension-text-align (Add TextAlign menu buttons, and make HeadingWithAnchor support TextAlign #69, Add new MenuSelectTextAlign component for TextAlign, using new MenuSelect component for improved styles #70)
• Alight right menu button with @tiptap/extension-text-align (Add TextAlign menu buttons, and make HeadingWithAnchor support TextAlign #69, Add new MenuSelectTextAlign component for TextAlign, using new MenuSelect component for improved styles #70)
• Align center menu button with @tiptap/extension-text-align (Add TextAlign menu buttons, and make HeadingWithAnchor support TextAlign #69, Add new MenuSelectTextAlign component for TextAlign, using new MenuSelect component for improved styles #70)
• Justify menu button with @tiptap/extension-text-align (Add TextAlign menu buttons, and make HeadingWithAnchor support TextAlign #69, Add new MenuSelectTextAlign component for TextAlign, using new MenuSelect component for improved styles #70)
• Insert image menu button with @tiptap/extension-image
  • Using URL (see Add more built-in features for "Insert image" menu button, for @tiptap/extension-image #136)
  • Uploading image (see Add more built-in features for "Insert image" menu button, for @tiptap/extension-image #136)
• Horizontal rule with @tiptap/extension-horizontal-rule (Add button and specific styles for Horizontal Rule #66)
• Underline with @tiptap/extension-underline (Add Underline menu button #68)

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Additional context

Add any other context or screenshots about the feature request here.

[sjdemartini]

I am intending to add more explicit support and built-in buttons for all of these, so thank you for filing and detailing this in such an organized way @bryanjtc!

A couple of those are in fact already supported:

• MenuHeadingSelect handles all heading levels (h1-h6)—see here. The default demo for local development in mui-tiptap happens to only configure the heading extension for levels h1-h3 (see here) but I can change the demo as well so it's more clear. As long as you configure your heading extension for all levels, MenuHeadingSelect will do the trick. When I add documentation to the repo and more polish to the app, this will be clearer. (Side note: that useRecommendedExtensions hook will be going away soon anyway as a part of cleaning up peer deps, since I don't think it's the right approach and everyone should simply choose their own extensions.)
• There's a general-purpose "insert image" button via MenuButtonAddImage. You provide your own onClick (where you could use your own interface to type in a URL, or you could trigger a file upload). It's not part of the demo within the app, but I can add that. And perhaps I can provide a more explicit variant for an "insert image using URL" version. I think file-upload itself is best left to the application using mui-tiptap, since needs will inevitably vary, so I hope the simple onClick will do the trick. I use MenuButtonAddImage in an external app, and I find it works cleanly to have all file-upload logic handled external to mui-tiptap via the click.

[bryanjtc]

Removing useRecommendedExtensions is a good idea. The demo should use the setup of the useRecommendedExtensions hook and all the other possible extensions and controls.
Can I add my own custom control using the MenuButton component?
Edit: Answering my own question, yes I can.

[bryanjtc]

The tooltip label should be a prop in all menu buttons to customize the label content.

[sjdemartini]

@bryanjtc Yes, that's the intention for MenuButton—to be a reusable base component so anyone can add their own menu buttons fairly easily. And agreed, I intend to have all props be overridable for all MenuButtons!

[sjdemartini]

FYI you can now override tooltipLabels (and any other props) for all of the MenuButton* components, in v1.0.0-beta.3

[sjdemartini]

The latest release v1.0.0-beta.5 includes several more controls components (undo, redo, horizontal rule, underline, and multiple options for text-align)

[sjdemartini]

The latest release v1.0.0-beta.10 features a new FontSize extension and MenuSelectFontSize controls component (see #94 and #95 for some screenshots and examples).

[bryanjtc]

Ideas to improve the menu image button

Original react-mui-draft-wysiwyg image button:

Upload:

Url:

Original mui-rte image button:

Allow modifying height and width:

Allow choosing between image or video

[bryanjtc]

Font color/highlight customization ideas

Original react-mui-draft-wysiwyg image button:

Tiptap example

[sjdemartini]

MenuSelectFontFamily has been added as of the v1.2.0 version just published:

[devth]

This project is amazing! Love the high velocity and quality ya'll are shipping. Thanks so much for building it. 🙏🏻

[cgil]

Second on the impressive speed! And also the text and highlight color input components

[sjdemartini]

Just commenting to say I haven't forgotten about this and aim to tackle the text and highlight color menu components soon. I have a WIP version but have a bit more work to do to polish it.

[sjdemartini]

I've released mui-tiptap v1.5.0 which includes the first version of the text-color and highlight-color menu controls (along with some building-block components you can use to build a more custom version). Implemented in #135. Thanks for all the comments and suggestions in this thread!

I'm going to close out this issue, since those were the last outstanding extensions here which were missing support in mui-tiptap. I've added a separate issue #136 to track future improvement ideas for the "Insert image" menu button, based on the above discussion.

Let me know if you have any feedback, and as usual feel free to file an issue if you come across bugs or have feature-request ideas!