React Draft Wysiwyg

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&#x27;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&#x2F;Immutable, you might be interested in a library I&#x27;ve been working on called Slate:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;ianstormtaylor&#x2F;slate" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;ianstormtaylor&#x2F;slate</a><p>Unlike most of the other editors, its goal is to not have opinions out of the box. If you&#x27;re going for just basic WYSIWYG then it&#x27;s probably not for you, but if you&#x27;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&#x27;t think the toolbar actions work as one would usually expect. That is, hit Bold, type, text should be bold but isn&#x27;t. The tools only seem to apply if there&#x27;s already a selection, but that&#x27;s not how vanilla Draft or any editor I can think of works.

[EDIT: Just for reference, the title originally was &#x27;the right way to content manage..&#x27;]<p>I&#x27;d maybe call this &quot;an&quot; approach, rather than the &#x27;right&#x27; approach :)<p>Already, prosemirror has provided a solid alternative, with things like custom-schemas, which ensure we&#x27;re no longer in contenteditable-copy&#x2F;paste hell. There&#x27;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&#x27;s not to discount this. It&#x27;ll be great in certain settings, but it has far to mature if it&#x27;s goal is to compete with tinyMCE.

No offense, but it feels junky, just like most web stuff that&#x27;s trying to do &quot;real&quot; application UI.<p>Here&#x27;s some of the problems:<p>- You can accidentally &quot;select&quot; 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&#x27;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 &quot;good&quot; and &quot;acceptable&quot;.

I&#x27;ve done a some investigation into this, and I can tell you while this looks cool. It&#x27;d be difficult to use on other devices (tablets, phones). The best I&#x27;ve seen is <a href="https:&#x2F;&#x2F;www.froala.com&#x2F;wysiwyg-editor" rel="nofollow">https:&#x2F;&#x2F;www.froala.com&#x2F;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&#x27;s easy to integrate because there are plugins available for different frameworks (angular, django, ...)

Please note that Draft.js lacks &quot;inline blocks&quot;: there&#x27;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&#x27;ve been using <a href="https:&#x2F;&#x2F;github.com&#x2F;ianstormtaylor&#x2F;slate" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;ianstormtaylor&#x2F;slate</a> instead, which uses a similar architecture but has inline blocks. It&#x27;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&#x27;t delete stuff (backspace does nothing).<p>Edit: at this point I just quit trying.

Doesn&#x27;t seem to be working on mobile. iOS 10

Looks very nice, thanks for the work.<p>I&#x27;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&#x27;s still only a workaround for block styles (as in setting &quot;style&quot; 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&#x27;t attach any kind of unit. For example, if I select 18, it doesn&#x27;t convert that to 18px or 18em...just &quot;18&quot;:<p>&lt;span style=&quot;font-size: 18;&quot;&gt;This is some text.&lt;&#x2F;span&gt;<p>I believe that&#x27;s not valid css.

Just a few random observations: I can&#x27;t seem to toggle off bold&#x2F;italic&#x2F;...? 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&#x27;t point to it, but whenever I type with a delayed response it feels as though I&#x27;m slogging through muddy ground, an almost subliminal sensation.

Nice! p.s. indent buttons don&#x27;t work (on Firefox)

This looks really good. I&#x27;m only missing an option to put in formatted code or something.

Anyone know a modern editor that can handle editing HTML implemented using an iframe so there&#x27;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&#x2F;wysiwyg editors: <a href="https:&#x2F;&#x2F;gist.github.com&#x2F;manigandham&#x2F;65543a0bc2bf7006a487" rel="nofollow">https:&#x2F;&#x2F;gist.github.com&#x2F;manigandham&#x2F;65543a0bc2bf7006a487</a>

Since you can&#x27;t tab or you lose focus of the editor box, I am pressing the &quot;add indent&quot; button but to no avail<p>Edit: Someone beat me to it, but being 2&#x2F;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&#x27;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).