Expose sx and other MUI component props for several mui-tiptap components

[voidlaszlo]

Description

Exposed the props of the root MUI components.

• FieldContainer
• MenuBar
• RichTextContent
• RichTextField

and changed the <div> tag in the FieldContainer to be a MUI Box component for the easy modifications.

Usage

<RichTextField 
  ...
  sx={...}
/>

Related Issues

#302

Checks

• Local tests are green
• pnpm run build runs successfully
• ts-type-check
• lint
• Example works correctly

[sjdemartini]

@voidlaszlo Thanks for opening this! I like the idea of exposing more props of underlying components, but I think it would be more immediately usable and consistent with other MUI components to directly expose sx on each of these components, like was done in this PR for bubble menus #303. So rather than <MenuBar ... CollapseProps={sx:{...}} />, users can just do <MenuBar ... sx={...} />. Would you be able to work on tweaking to support that? That's more what I had in mind with #303.

As for exposing things like CollapseProps, agreed it may be worth moving to MUI's slotProps sort of approach in the future. I think that would probably warrant a larger refactor across mui-tiptap though.

[voidlaszlo]

@sjdemartini I can look into that. I'm not sure how easy it is to implement an sx-like functionality. However, in cases—such as FieldContainer and many other components, where the outermost element is a Box or any other mui component—we could simply expose the sx prop of the underlying Box component through FieldContainer and allow FieldContainer to function stylistically like a MUI Box component. What do you think about that?

Example

Usage

<FieldContainer sx={...} />

Implementation

interface Props {
  ...,
  sx: SxProps
}

function FieldContainer(props: Props) {
  const { sx } = props;
  ...
  return (
    <Box sx={sx} ...>
      ...
    </Box>
  )
}

In the cases, where we have multiple underlying mui components, we could use slotProps like mui does.

[sjdemartini]

@voidlaszlo Yeah, as you say, I'm referring to exposing sx as a prop directly in the Props for the mui-tiptap component, and passing that as the sx prop to the top-level child component of the mui-tiptap component, like your FieldContainer example above and like I did in #303.

Separately, I think it would be worth also exposing other props of the top-level component and ideally "slots" for inner children components, but I think we can save that for a separate PR to keep things simpler here. The slot props approach I think would warrant a more significant refactor across more mui-tiptap components.

WDYT?

[voidlaszlo]

@sjdemartini I'll get to it.

Yeah let's do the slotProps in a different MR then. ☺️

[voidlaszlo]

I pushed the changes and updated the description. (removed unnecessary and unrelated information for clarity)

[voidlaszlo]

Updated the branch with rebase.

[sjdemartini]

Just wanted to mention that I've been quite busy but plan to take a look and get to reviewing this soon (hopefully by next weekend). Thanks again for working on this.

[sjdemartini]

In general this looks good! 😄 Just a few minor comments all in the same vein

[sjdemartini]

In this case, any new props from PopperProps that would now be included as part of ControlledBubbleMenuProps are not actually being spread/passed to the popper child below. Seems like we should do that here (like is done with some other components in this PR), to support any additional props beyond sx, which is already passed explicitly.

Also, we should exclude any props which would be overwritten/ignored, like modifiers (unless you want to add logic to conditionally use the provided prop instead of the default behavior)

[sjdemartini]

This has the slightly confusing consequence of including props which are always ignored/overridden, namely in and unMountOnExit. Those should be explicitly handled, either by excluding them from this type definition (like you did for children), or better yet allowing users to override default behavior if they provide them. For instance, setting unmountOnExit=true when destructuring props, thereby allowing users to override it

[sjdemartini]

Should exclude component in addition to children, since it's always set directly below

[Charismara]

Hey there,

is there any update on this?
I am really looking forward to using the sx settings :)