Add Rich Text Editor

[aditya1906]

In many web site there are rich text editors being implemented such as CKEditor, Froala Editor, etc. It will be very useful since if clients want to bold, italic text and then submit the data as HTML. It can be done using a Rich Text Editor.

Expected Behavior 🤔

Rich Text Editor that allows text to be bold, italics, etc

Current Behavior 😯

There is no support for Rich Text editor.

Benchmarks

Public: https://mui-org.notion.site/Rich-Text-Editor-component-2fce8b9131154a96933c11a7fc89c17e Editable: https://www.notion.so/mui-org/Rich-Text-Editor-component-2fce8b9131154a96933c11a7fc89c17e

Context 🔦

Attempts:

• https://github.com/mui/material-ui/pull/34474

Developer requests:

• https://mui.zendesk.com/agent/tickets/5833
• https://mui.zendesk.com/agent/tickets/7682

[oliviertassinari]

In addition to the MIT license, there is likely the need to have a paid version to be able to sustain the most advanced features. See these paid examples:

• https://tiptap.dev/, they seems to have the closest model to what we could do
• https://www.tiny.cloud/
• https://www.froala.com/wysiwyg-editor
• https://ckeditor.com/ckeditor-5/

I don't see any open source solution nowhere near this execution.

[MarkMurphy]

Don't forget: https://draftjs.org/

[aditya1906]

Don't forget: https://draftjs.org/

There are many. I was just giving some examples.

[robertvasile]

little OFFTOPIC: @oliviertassinari do you have knowledge of any editor project saving internal rich text data as MUI components (props & content)? like, for example, content in JSON looking like: content: [ { Typography: [ { props: [{ variant: 'body2' }], content: [ { text: 'some <strong>bla</strong> html', Button: [ { props: [{ size: 'medium', color: 'default', variant: 'text', to: '/bla2' }], content: [{ text: 'BLA2' }], }, ], }, ], }, ], }, ],

[ivikash]

I have personally liked Slate the most.

[mbrookes]

@robertvasile Not quite sure what use case you had in mind, but this component renders a subset markdown using Material-ui components: https://github.com/mui-org/material-ui/blob/master/docs/src/pages/getting-started/templates/blog/Markdown.js

[niuware]

Check mui-rte, the Material-UI Rich Text Editor based on draft-js and material-ui https://www.npmjs.com/package/mui-rte

[zgover]

As mentioned by niuware, a good base would be to start with draft-js, however not mui-rte. Not sure there will be much value there for y'all to make it paid, unless you add a substantially large layer over draft-js.

[ronnyroeller]

We've been successfully using Remirror together with MUI. Remirror uses Prosemirror under the hood.

[howlettt]

I'm playing around with creating a component that supports multiple rich text editors (like tiptap or Slate), take a look and let me know what you think https://github.com/mui/material-ui/pull/34474

[oliviertassinari]

So based on https://mui-org.notion.site/Rich-Text-Editor-component-2fce8b9131154a96933c11a7fc89c17e, there are 3 ways that we could approach this component:

1. UI layer. Building a Material UI & Joy UI integration on top of a lower-level library. For example, this is what Mantine is doing with tiptap.
2. Hybrid. Create a wrapper, on top of another library, like charts on top of d3. For example, this is what tiptap is doing with prosemirror.
3. Fullstack. Building the whole component's logic, e.g. prosemirror.

I think that 1. makes more sense to get started. For example, https://www.tiny.cloud/ is a 100-people company. We aren't at a size where we can support this yet.

[bryanjtc]

Any update on this?

[sjdemartini]

Hi folks, I recently released a package mui-tiptap https://github.com/sjdemartini/mui-tiptap, which aims to offer what's been requested/described above, with "option 1" of Olivier's comment. (It's somewhat similar in nature to mantine's Tiptap offering.) I've been using this code in a production app successfully for months and have incorporated several things that I think add value beyond vanilla Tiptap (additional extensions, built-in styles, easy-to-use components, etc).

The package is still new—I plan to add more functionality and much more thorough documentation about how to take full advantage of what mui-tiptap provides—but I figured it's worth sharing here sooner than later. I welcome feedback and/or contributions!

[TheOneTheOnlyJJ]

I feel like this is a very important feature to have. Does it have at least a preliminary timeline?

[b0s-at-works]

Last few month I'm working on dialog, who receives HTML code. That HTML code have to become innerHTML of textarea or content editable div. We need that HTML to be exactly how it was converted by browser when a user writing text in text area or in content editable div, and then we need that text will be editable later and for that it should be restored as innerHTML to have exact look before which was before saving.

Also, there is no way to set value/defaultValue with HTML and there is no way to set dangerouslySetHTML because inside yours components there at leased one child.

When we are using TextField or TextAreaAutoResize there is no way to have Material UI styling and Material UI js implemented styling on selfimplemented custom textarea and as result we have to spend a lot of time on cloning Material UI styling, which probably also implemented with Material UI JavaScript part. So Material UI looses it's portability. We will have to rewrite out code to mirror look of your implementation of style of Material UI. For example autoresizing will not work, if I will just duplicate your TextArea. Custom TextArea will not grow automatically. So code have to be implemented manually by developer.

Guys, I think you really need to rewrite your textarea to support dangerouslySetHTML or to mirror your TextAreaAutoResize as content-editable div, like you can make TextAreaContentEditableAutoResize or DivContentEditableAutoResize because there are situations when developers need pure HTML received by that field with chance to store also your MaterialUI styling/js styling, or it's just make no sense.

[oliviertassinari]

A new package by @tiavina-mika that I recently discovered https://github.com/tiavina-mika/mui-tiptap-editor