Render Tiptap editor look like a MUI TextField

Question

How can I render a tiptap editor the same as a material-ui text field?

I am referring to the outlined or standard variant of the material-ui text field. To have the same look and feel, especially the border of a material-ui text field. Or is there a way to embed the tiptap editor inside a material-ui text field?

Does someone have a solution or an approach to this?

Answer 1

I released a package mui-tiptap (https://github.com/sjdemartini/mui-tiptap), which styles a Tiptap editor using Material-UI. Its default appearance/variant is set up to resemble the MUI TextField "outlined" variant, which has the border you mention.

It's customizable, so if you already have your own controls menu bar, you can use that, or you can take advantage of the components, extensions, etc. that come with mui-tiptap to get set up more quickly.

You can try it out yourself at this CodeSandbox or install and use in your project per the GitHub README.