Fully customizable editor content style (margins, etc.)?

[olejorgenb]

Hi, thanks for this project. Very easy to get started with and looks like a good API so far :)

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

I personally don't like the "compressed" style chosen for the editor content:

EDIT: I had another style which set the line-height to be smaller which exacerbate the issue. Without this using the default 1.5 line-height things looks a lot better.

I see that many styling elements can be adjusted using the MUI theme mechanism (very nice), but the margin is locked to 0 unless I'm mistaken.

Describe the solution you'd like

I'm not sure what the best solution would be, but a contentClassName prop which disables the default style if set would be simple solution. This would allow a user to provide a fully customized style. Doing slight modifications would require building a whole new set of styles (though I see the getEditorStyles is importable, so maybe possible to use that as a base), but I think that would be fine. Especially since many slight modifications can be done using the MUI theme. (or through RichTextContentProps)

Describe alternatives you've considered

I've passed in a class name to the RichTextContent using RichTextContentProps to override the margins on h1, p, etc.. The problem is that unless the specificity is perfectly balanced, such overrides mess up the table styling[1] - adding unwanted margins inside the cells. Balancing the specificity require controlling the CSS order, which in some cases is not trivial.

[1] The header margin class end up overriding .css-s26in7-RichTextField-content-RichTextContent-root-RichTextContent-editable .ProseMirror table td > * { margin-bottom: 0px; }

[sjdemartini]

@olejorgenb Thanks for trying out mui-tiptap and glad it's mostly working to your liking!

For the main question about style overrides, it sounds like you generally did find the right/intended approach, which is to set up CSS selectors/styles based on particular elements such that you override mui-tiptap's default styles.

Here's a simple example CodeSandbox which just reverts all margins back to browser defaults (though you could instead use your own specific marginBlockStart/marginBlockEnd values, add line-heights, or whatever you like). It also ensures that p elements still look fine inside tables and task lists (following the CSS used in Tiptap's examples for Table and TaskList, which wasn't necessary in mui-tiptap by default since we didn't have margins on p), which I believe is what was giving you trouble. I imagine you could use similar styles to these for the className you're pass in to RichTextContentProps:

// Revert back to browser defaults for margins for some block elements.
// Alternatively you could set specific marginBlockStart/marginBlockEnd values here, 
// or separately target any of these particular elements to set a margin just for that
// (rather than overriding en masse)
"& h1, & h2, & h3, & h4, & h5, & h6, & p, & ul, & ol": {
  marginBlockStart: "revert",
  marginBlockEnd: "revert",
},

// Ensure p has no margin inside tables (like in Tiptap's example CSS https://tiptap.dev/api/nodes/table)
"& table p": {
  margin: 0,
},
// Ensure p has no margin inside task lists (like in Tiptap's example CSS https://tiptap.dev/api/nodes/task-list)
'& ul[data-type="taskList"] p': {
  margin: 0,
},

Please let me know if that helps for your use-case! The mui-tiptap styles are really intended to just be a "starter set" so that most things look "decent' out of the box for all of the various Tiptap extensions, and ideally it's convenient to override or add whatever specific styles you want on top of those. I do plan to make it slightly easier to do this (e.g. perhaps an sx prop on RichTextField).

---

By the way, it doesn't sound like you're necessarily doing this, but as a side note just in case, you should avoid targeting the autogenerated classnames like .css-s26in7-RichTextField-content-RichTextContent-root-RichTextContent-editable, and can hopefully just target classes like .ProseMirror and mui-tiptap static classes like .MuiTiptap-RichTextField-root.

[sjdemartini]

@olejorgenb I'm going to close this out since I believe my above suggestion should solve your problem (as seen in the linked CodeSandbox) and I haven't heard back. If there's anything else you'd like to add on this front, let me know and we could always re-open if need be.

[olejorgenb]

As the style became good-enough-for now with the default line-height, I haven't found time to look more into this, but from your reply it seems like I'll be able to do what I want. Thanks :slightly_smiling_face: (looks like the answer was right under my nose the whole time in the demo app :see_no_evil:)

(I'll add an update here if necessary when I get time to look into it)