How to change minHeight of RichTextEditor?

[laipatel]

I have a simple question. I just want to give the RichTextEditor some minimum height. I tried wrapping a box component and changing the size that way but it, predictably, just acted as a margin underneath the RichTextEditor component. The way I do this with native MUI is this:

<TextField multiline={true} rows={10} name="Description" label="Description" placeholder="Description" autoComplete="off" variant="outlined" value={description} onChange={e => setDescription(e.target.value)} />

but I'm not sure how to implement this in the RichTextEditor component

[sjdemartini]

@laipatel I think you'll want to target the ProseMirror class. For instance, here's a related use-case where someone wanted to and was able to set a fixed height: https://github.com/sjdemartini/mui-tiptap/issues/198#issuecomment-2008929466

Let me know if that doesn't work for you.

[vitality82]

Sharing is caring they say, here's how I've done it. Just pass in your minHeight:

[laipatel]

Awesome. Seems like both of these approaches work. Thank you!

[vitality82]

Awesome. Seems like both of these approaches work. Thank you!

FWIW better to use the contenteditable as a target, so the .ProseMirror class because that way focus will work anywhere you click inside the editor.