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:

• [RichTextField] New lab component material-ui#34474

Developer requests:

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

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

[ivikash]

I have personally liked Slate the most.

[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
mui/material-ui#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.

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

[oliviertassinari]

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

[samueltrevor]

My personal favourite is slate.js due to it being fully customisable, while it does have a high learning curve adding simple tools is easy especially with plate.js which is a plugin system for slate.js

See here an example of MUI + slate.js