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

31–40 of 45 posts

Re: React Draft Wysiwyg

#31

Post by rkuykendall-com »

theweatherman wrote: post #16

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 t…

Froala seems to be leading the pack, but was still very disappointing. It plays _okay_ with webpack, but requires jQuery, and doesn't seem to support es6 imports.

Plus, the development speed is good, but sloppy. Their official React documentation starts with something they forgot to change when they copy-pasted it from react-highcharts:

https://www.froala.com/wysiwyg-editor/docs/framework-plugins...

Re: React Draft Wysiwyg

#32

Post by ianstormtaylor »

This is great! I agree that I think this kind of editor composing is the way forward for most content editing on the web.

I was deep into Draft a while back, and there are some downsides to it though. It's document model is flat, which makes it hard to model nested structures like tables, captions, etc. It also treats a lot of the built-in logic in privileged ways which makes it hard to override and add custom logic. And generally the API and docs are fairly convoluted to use and understand.

If anyone is interested in composing complex editors in React/Immutable, you might be interested in a library I've been working on called Slate:

https://github.com/ianstormtaylor/slate

Unlike most of the other editors, its goal is to not have opinions out of the box. If you're going for just basic WYSIWYG then it's probably not for you, but if you're trying for more advanced editing experiences I think that flexibility is critical.

Anyways, awesome work! I just wanted to add another perspective.

Re: React Draft Wysiwyg

#33

Post by wahnfrieden »

Please note that Draft.js lacks "inline blocks": there's no way to, for example, have an image rendered inline rather than as its own block. I lost hours to this non-obvious omission so maybe this will save someone else time :)

I've been using https://github.com/ianstormtaylor/slate instead, which uses a similar architecture but has inline blocks. It's not quite as fully-baked as Draft.js yet though.

Re: React Draft Wysiwyg

#34

Post by rkuykendall-com »

Anyone know a modern editor that can handle editing HTML implemented using an iframe so there's no CSS leak?

I want to be able to render email templates and let clients tweak them before they gets sent. Currently trying to get Froala to work with webpack.

Re: React Draft Wysiwyg

#35

Post by galacticpony »

No offense, but it feels junky, just like most web stuff that's trying to do "real" application UI.

Here's some of the problems:

- You can accidentally "select" the text of the buttons

- changing the style of the text causes selection to flicker

- clicking outside a paragraph area causes the selection to flicker (instead of moving the cursor)

- many of the menus don't collapse automatically and they overlap each other

- the site layout just breaks when the page width is too narrow (may be more of a website problem)

All of these are very common problems with web technology, working around them makes the difference between "good" and "acceptable".

Re: React Draft Wysiwyg

#36

Post by ianstormtaylor »

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

Just in case you're interested, I ran into the same issues with Draft when using it myself—having to do lots of strange workarounds for what felt like normal levels of customization. I've been working on an alternative that aims to be much less opinionated and with a much cleaner API, called Slate:

https://github.com/ianstormtaylor/slate

Re: React Draft Wysiwyg

#37

Post by jmfurlott »

ianstormtaylor wrote: post #32

This is great! I agree that I think this kind of editor composing is the way forward for most content editing on the web. I was deep into Draft a while back, and there are some downsides to it though. It's document model is flat, which makes it hard to model nested structures like tables, captions, etc. It also treats a lot of the built-in logic in privileged ways which makes it hard to override and add custom logic.…

How does Slate compare to draft in package size? I find that including Draft for simple simple simple WYSIWYG editing to be enormous. I don't have the exact size on me, but it made my bundle huuge

Re: React Draft Wysiwyg

#38

Post by ianstormtaylor »

jmfurlott wrote: post #37
ianstormtaylor wrote: post #32

This is great! I agree that I think this kind of editor composing is the way forward for most content editing on the web. I was deep into Draft a while back, and there are some downsides to it though. It's document model is flat, which makes it hard to model nested structures like tables, captions, etc. It also treats a lot of the built-in logic in privileged ways which makes it hard to override and add custom logic.…

How does Slate compare to draft in package size? I find that including Draft for simple simple simple WYSIWYG editing to be enormous. I don't have the exact size on me, but it made my bundle huuge

Honestly right now it's probably worse. It's still in beta, so I've been working on the core architecture and logic, before diving into things like package size. So I'm not sure. It also hugely depends on whether you were already using React and Immutable.js as dependencies inside your app, or whether you have to add them just for the editor.

For super simple WYSIWYG editing, like I mentioned, you're not going to want to use Slate. (Or maybe Draft either.)

Slate is designed for much more advanced use cases. Things like building wiki tools, or chat tools, or anything where the editing experience itself is a significant enough portion of your product that you want total control over it, and don't want to be constrained by the opinions that most editing frameworks bake into their core libraries.

Re: React Draft Wysiwyg

#39

Post by dismantlethesun »

galacticpony wrote: post #35

No offense, but it feels junky, just like most web stuff that's trying to do "real" application UI. Here's some of the problems: - You can accidentally "select" the text of the buttons - changing the style of the text causes selection to flicker - clicking outside a paragraph area causes the selection to flicker (instead of moving the cursor) - many of the menus don't collapse automatically and they overlap each othe…

In case anyone is reading this. You can solve #1 with CSS3, using "user-select: none;".

It's something I don't often see added to buttons, but it is a huge benefit for any app-like layout.

Re: React Draft Wysiwyg

#40

Post by jyotipuri »

ianstormtaylor wrote: post #32

This is great! I agree that I think this kind of editor composing is the way forward for most content editing on the web. I was deep into Draft a while back, and there are some downsides to it though. It's document model is flat, which makes it hard to model nested structures like tables, captions, etc. It also treats a lot of the built-in logic in privileged ways which makes it hard to override and add custom logic.…

Thanks, Slate looks good - great work. Thanks for useful feedbacks. I will check slate more deeply soon.
Post reply on HN