Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Rich Text Editor #513

Open
aditya1906 opened this issue Jun 12, 2019 · 17 comments
Open

Add Rich Text Editor #513

aditya1906 opened this issue Jun 12, 2019 · 17 comments
Labels
new feature New feature or request waiting for 👍 Waiting for upvotes

Comments

@aditya1906
Copy link

aditya1906 commented Jun 12, 2019

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:

Developer requests:

@oliviertassinari
Copy link
Member

oliviertassinari commented Jun 12, 2019

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:

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

@MarkMurphy

This comment has been minimized.

@aditya1906

This comment has been minimized.

@robertvasile

This comment has been minimized.

@ivikash
Copy link

ivikash commented Aug 29, 2019

I have personally liked Slate the most.

@mbrookes

This comment has been minimized.

@niuware
Copy link

niuware commented Oct 9, 2019

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

@zgover
Copy link

zgover commented Nov 23, 2019

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.

@oliviertassinari oliviertassinari changed the title Implement Rich Text Editor Add Rich Text Editor Sep 4, 2020
@oliviertassinari oliviertassinari transferred this issue from mui/material-ui Oct 30, 2020
@ronnyroeller
Copy link

ronnyroeller commented Nov 26, 2020

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

@howlettt
Copy link

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
Copy link
Member

oliviertassinari commented Mar 25, 2023

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

This comment was marked as off-topic.

@sjdemartini
Copy link

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!

@oliviertassinari oliviertassinari added the priority: important This change can make a difference label Sep 20, 2023
@joserodolfofreitas joserodolfofreitas removed the priority: important This change can make a difference label Apr 30, 2024
@TheOneTheOnlyJJ
Copy link

TheOneTheOnlyJJ commented May 22, 2024

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

@b0s-at-works

This comment was marked as off-topic.

@oliviertassinari
Copy link
Member

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

@samueltrevor
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
new feature New feature or request waiting for 👍 Waiting for upvotes
Projects
None yet
Development

No branches or pull requests