Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

React Draft Wysiwyg

jpuri.github.io

Post reply on HN
Print view View original

11–20 of 45 posts

Re: React Draft Wysiwyg

#11

Post by benbriggs »

ingenter wrote: post #9
anilgulecha wrote: post #2

[EDIT: Just for reference, the title originally was 'the right way to content manage..'] I'd maybe call this "an" approach, rather than the 'right' approach :) Already, prosemirror has provided a solid alternative, with things like custom-schemas, which ensure we're no longer in contenteditable-copy/paste hell. There's substance.io and quilljs as well. Any of these could be the right approach for a particular CMS pro…

I just came here to write that I think this is THE right approach for wysiwyg editor. Having a full model of the document tree rather and working from that rather than sanitizing `contenteditable`. I expect this approach to automatically solve many problems that other wysiwyg editors have.

I like and use Draft, but the separation of a document model from contenteditable is a feature of the editor frameworks mentioned above (as well as others like slate) and is not unique to Draft, or this implementation of an editor around Draft.

Re: React Draft Wysiwyg

#12

Post by ingenter »

amelius wrote: post #10
ingenter wrote: post #9

Earlier quoted context omitted.

I just came here to write that I think this is THE right approach for wysiwyg editor. Having a full model of the document tree rather and working from that rather than sanitizing `contenteditable`. I expect this approach to automatically solve many problems that other wysiwyg editors have.

Prosemirror still uses contenteditable under the hood though. I actually wonder why that is the case.

To be fair "React Draft Wysiwyg" is using contenteditable too, but it also builds a full model of the document.

Re: React Draft Wysiwyg

#13

Post by amelius »

One important thing seems to be missing though: collaborative editing.

(A requirement on the modern web, since you don't want to edit a file only to find out that your version was overwritten by another person who happened to be editing at the same time).

Re: React Draft Wysiwyg

#14

Post by xmattx »

Just a few random observations: I can't seem to toggle off bold/italic/...? Neither can it be toggled on before typing it seems. Also, setting text alignment removes bullets.

Nice idea, but functionally not quite there yet.

Re: React Draft Wysiwyg

#15

Post by somecallitblues »

amelius wrote: post #13

One important thing seems to be missing though: collaborative editing. (A requirement on the modern web, since you don't want to edit a file only to find out that your version was overwritten by another person who happened to be editing at the same time).

And an inbuilt chat :)

Re: React Draft Wysiwyg

#16

Post by theweatherman »

I've done a some investigation into this, and I can tell you while this looks cool. It'd be difficult to use on other devices (tablets, phones). The best I've seen is https://www.froala.com/wysiwyg-editor Killer feature is the fact that I can use it on the iPad, Android tablet, IE, and Chrome. Also, its supports tables, which was one of the requirements for our clients. Licensing is pretty affordable, and it's easy to integrate because there are plugins available for different frameworks (angular, django, ...)

Re: React Draft Wysiwyg

#18

Post by kilburn »

I tried it in firefox mobile. After inputting the first letter the cursor jumped behind it.

I tried to reposition the cursor to no avail (the whole edit area loses and regains focus on each tap).

Also, I can't delete stuff (backspace does nothing).

Edit: at this point I just quit trying.

Re: React Draft Wysiwyg

#19

Post by tyingq »

Looks nice.

Not sure if this is a bug, but if I set a specific font size, it doesn't attach any kind of unit. For example, if I select 18, it doesn't convert that to 18px or 18em...just "18":

This is some text.

I believe that's not valid css.

Re: React Draft Wysiwyg

#20

Post by jyotipuri »

anilgulecha wrote: post #2

[EDIT: Just for reference, the title originally was 'the right way to content manage..'] I'd maybe call this "an" approach, rather than the 'right' approach :) Already, prosemirror has provided a solid alternative, with things like custom-schemas, which ensure we're no longer in contenteditable-copy/paste hell. There's substance.io and quilljs as well. Any of these could be the right approach for a particular CMS pro…

Hi Anil,

I did not said only right approach :)

Post reply on HN