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

21–30 of 45 posts

Re: React Draft Wysiwyg

#21

Post by jyotipuri »

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.

Thanks your your insightful feedback.

Re: React Draft Wysiwyg

#22

Post by jyotipuri »

Ronsenshi wrote: post #6

Looks very nice, thanks for the work. I've been tinkering with Draft off and on for quite some time and I love how powerful it is, however documentation was rather lacking in some areas and this project would definitely help me understand some of the things about Draft. Too bad there's still only a workaround for block styles (as in setting "style" prop on a whole block instead of using setBlockData method).

I hope I would find more time, I wanna do more on DraftJS and its approach for content editing. Its very powerful approach.

Re: React Draft Wysiwyg

#23

Post by jyotipuri »

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

Hi,

It can be made collaborative. Depends on how you integrate it in your application.

Re: React Draft Wysiwyg

#24

Post by pugio »

Does anyone else notice a tiny typing lag? I can't point to it, but whenever I type with a delayed response it feels as though I'm slogging through muddy ground, an almost subliminal sensation.

Re: React Draft Wysiwyg

#25

Post by amelius »

jyotipuri wrote: post #23
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).

Hi, It can be made collaborative. Depends on how you integrate it in your application.

Ok, it was missing in the list of features.

Re: React Draft Wysiwyg

#26

Post by Rezo »

I don't think the toolbar actions work as one would usually expect. That is, hit Bold, type, text should be bold but isn't. The tools only seem to apply if there's already a selection, but that's not how vanilla Draft or any editor I can think of works.

Re: React Draft Wysiwyg

#27

Post by Ronsenshi »

pugio wrote: post #24

Does anyone else notice a tiny typing lag? I can't point to it, but whenever I type with a delayed response it feels as though I'm slogging through muddy ground, an almost subliminal sensation.

Can't say I notice it.

Re: React Draft Wysiwyg

#28

Post by jackreichert »

I love these initiatives. It does, though, need thorough testing in an office environment. Things that users, not developers, will come out. For example, I tried cutting and pasting from Word. Forget about formatting, none of the line breaks carried over. That's not to discount this. It'll be great in certain settings, but it has far to mature if it's goal is to compete with tinyMCE.

Re: React Draft Wysiwyg

#29

Post by grayrest »

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.

It handles the more complex (e.g. CJK) input methods. The alternative is a hidden text field and you have to put more effort into emulating the cursor (e.g. up arrow/down arrow). Regularly re-generating the underlying markup removes a large class of edge cases and cross-browser incompatibilities in exchange for not being able to use the browser's native undo. It's still a lot harder than you'd expect but it seems to be working for draft and prosemirror better than my attempt to normalize the cross browser differences and rely on the browser.

P.S. I also came into this thread to endorse Prosemirror.

Re: React Draft Wysiwyg

#30

Post by Touche »

pugio wrote: post #24

Does anyone else notice a tiny typing lag? I can't point to it, but whenever I type with a delayed response it feels as though I'm slogging through muddy ground, an almost subliminal sensation.

Yeah, I do, slightly.

A more noticeable thing is that if you select some text and then Bold / Italics / Underscore, etc. there is a flash where the text appears to be no selected and then becomes selected again.

Given this is React, my guess of what is going on is that the rich text is redrawn when these buttons are pressed (and perhaps even on each keystroke) and the selection has to be re-applied in code.

Perhaps they can improve this, but this is why I think it's important to stay away from high level frameworks for doing low-level things like text editing. Use your high level framework for application architecture and all that good stuff, but when something has to be fast, drop down to the lowest level you have.

Post reply on HN