cdk proposal: framework for rich text editors ("draftjs" for angular)

[fxck]

tl;dr https://draftjs.org/ for angular

I've been searching the internets and there is nothing that comes even close to draftjs, which is built on top and requires react. What does it do? It solves most of the contenteditable issues and provides api for people to build their own rich text editors on top of it.

Rich text editor doesn't necessarily mean WYSIWYG textarea, it can help with anything from mentions, hashtags to replacing text emoticons with images etc.

Some of the most popular draftjs plugins can be found here and here, it should give you an idea what can be done with it.

worth reading:

• https://code.facebook.com/posts/1684092755205505/facebook-open-sources-rich-text-editor-framework-draft-js/
• https://medium.com/@rajaraodv/why-draft-js-and-why-you-should-contribute-460c4a69e6c8
• https://medium.com/@rajaraodv/how-draft-js-represents-rich-text-data-eeabb5f25cf2

I think this could be a great fit for CDK, given that you are eventually planning on creating WYSIWYG anyway.. what do you think?

@jelbourn @mmalerba @kara @andrewseguin @devversion @crisbeto

[devversion]

Thanks for the links. Why aren't we moving that conversation to the issue #2949?

[fxck]

Because that guy's looking for WYSIWYG, this is something you'd build WYSIWYG on top of, two very different things I think.

It's basically the difference between Overlay and dialog.

[devversion]

Yeah but I think this both relates together and it would be helpful to have a general discussion about it first.

[fxck]

Nope, it's like a separate issue for Overlay and dialog/menu/select.

[devversion]

In the past my opinion was that this should be rather part of another repository or just a 3rd party library. Now though, I can see how the components monorepo could benefit from providing such a framework. Fair enough that these are separate issues. I didn't realize before.

[fxck]

I understand why you'd think so, but look into what draftjs actually does (or watch this video https://www.youtube.com/watch?v=feUYwoLhE_4), it basically doesn't care about visual representation at all, which is what that guy in #2949 is ultimately looking for - a component with buttons that do stuff..

The reason I'm really asking here is because google/angular team has enough brain power and experience to actually do something like this (it's in a way similar to angular compiler). If you search the internet you won't find anything remotely close to draftjs, everyone's creating mentions inputs, emoticon replacers, WYSIWYG textareas, only facebook took a step back and asked what's in the core of such features. I really find it similar to what other CDK services do. It could greatly empower other component creators, it's a really powerful high level service.

[mlc-mlapis]

I did not go to the details but it looks that https://quilljs.com (used in PrimeNG UI components for Angular https://www.primefaces.org/primeng/#/editor) is very similar from the concept point of view?

[fxck]

Quill looks like WYSIWYG to me. If there's anything similar, it's slate, again, just for react. Read the comparisons.

Also https://youtu.be/gxNuHZXZMgs?t=1791 this guy saying that he talked to angular people who decided to add react/draft as a dependency simply because they couldn't find anything similar in angular world.

[mlc-mlapis]

From the first point of view sure but I meant mainly the background of it. Its internal structure, API, ...

[fxck]

I don't know, I think their own comparison to draft speaks for itself https://quilljs.com/guides/comparison-with-other-rich-text-editors/#draft they are out of the box usable wysiwyg, draft is just a high level service that allows you to build rich text editors (not necessarily wysiwyg editors).

Simple test is to see if quill, or any other lib, can also be used to smaller, "simple" things like facebook-like mentions. You won't really find a quill plugin for that (it was never made with that in mind, to quote their own site "Quill’s only use case is rich text content"), and if you do, you'll find that it relies on DOM data-* attributes to carry data, unlike draft which stores them in a JSON structure, which I think is a better approach in angular world.

Also worth watching to understand how draftjs works internally https://www.youtube.com/watch?v=vOZAO3jFSHI

[mlc-mlapis]

Yeah, it is certainly true. I did not go so deep, I just looked at some basic operations as

quill.setContents([
  { insert: 'Hello ' },
  { insert: 'World!', attributes: { bold: true } },
  { insert: '\n' }
]);

and corresponding Deltas representing the changes which use JSON format.

[jelbourn]

We have chatted about this in the past (and one Angular team member actually has a decent amount of experience with this kind of thing). It's something we'd like to do, but is pretty far down on the priority list.

[mlc-mlapis]

Oh, really? Sounds positive. 👍 Is it possible to share some more details?