sjdemartini / mui-tiptap

A Material UI (MUI) styled WYSIWYG rich text editor, using Tiptap
MIT License
320 stars 44 forks source link

Make the MenuSelectFontSize and MenuSelectHeading components more configurable #95

Closed sjdemartini closed 1 year ago

sjdemartini commented 1 year ago

There are three new MenuSelectFontSize props to control (1) unsetOptionContent what text we display for the "unset" option, and (2) hideUnsetOption whether to hide that dropdown option entirely, and (3) emptyValue what to render for the Select itself when no font-size is set for the current text (to override showing the FormatSize icon).

Also, we now allow essentially all MenuSelect (and thus Select) props to be provided for both MenuSelectFontSize and MenuSelectHeading. This includes tooltipTitle, sx, className, etc to do styling.

For instance:

<MenuSelectFontSize
  emptyValue="16"  // Display "16" if unset since that's effectively our default font size
  unsetOptionContent={<span>Reset</span>}
  tooltipTitle="Change font size"
  sx={{ "& .MuiSelect-select": { width: 80 } }}
/>

Screenshot 2023-07-14 at 12 58 58 PM