This is great! I agree that I think this kind of editor composing is the way forward for most content editing on the web.<p>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.<p>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:<p><a href="https://github.com/ianstormtaylor/slate" rel="nofollow">https://github.com/ianstormtaylor/slate</a><p>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.<p>Anyways, awesome work! I just wanted to add another perspective.
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.
[EDIT: Just for reference, the title originally was 'the right way to content manage..']<p>I'd maybe call this "an" approach, rather than the 'right' approach :)<p>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.<p>Any of these could be the right approach for a particular CMS problem.
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.
No offense, but it feels junky, just like most web stuff that's trying to do "real" application UI.<p>Here's some of the problems:<p>- You can accidentally "select" the text of the buttons<p>- changing the style of the text causes selection to flicker<p>- clicking outside a paragraph area causes the selection to flicker (instead of moving the cursor)<p>- many of the menus don't collapse automatically and they overlap each other<p>- the site layout just breaks when the page width is too narrow (may be more of a website problem)<p>All of these are very common problems with web technology, working around them makes the difference between "good" and "acceptable".
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 <a href="https://www.froala.com/wysiwyg-editor" rel="nofollow">https://www.froala.com/wysiwyg-editor</a>
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, ...)
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 :)<p>I've been using <a href="https://github.com/ianstormtaylor/slate" rel="nofollow">https://github.com/ianstormtaylor/slate</a> instead, which uses a similar architecture but has inline blocks. It's not quite as fully-baked as Draft.js yet though.
I tried it in firefox mobile. After inputting the first letter the cursor jumped behind it.<p>I tried to reposition the cursor to no avail (the whole edit area loses and regains focus on each tap).<p>Also, I can't delete stuff (backspace does nothing).<p>Edit: at this point I just quit trying.
Looks very nice, thanks for the work.<p>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.<p>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).
Looks nice.<p>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":<p><span style="font-size: 18;">This is some text.</span><p>I believe that's not valid css.
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.<p>Nice idea, but functionally not quite there yet.
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.
Anyone know a modern editor that can handle editing HTML implemented using an iframe so there's no CSS leak?<p>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.
Running list of html/wysiwyg editors: <a href="https://gist.github.com/manigandham/65543a0bc2bf7006a487" rel="nofollow">https://gist.github.com/manigandham/65543a0bc2bf7006a487</a>
Since you can't tab or you lose focus of the editor box, I am pressing the "add indent" button but to no avail<p>Edit: Someone beat me to it, but being 2/6 of the early comments shows that they are important!
One important thing seems to be missing though: collaborative editing.<p>(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).