feature/expose-mui-component-props

[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.