<story><title>Why ContentEditable Is Terrible, Or: How the Medium Editor Works (2014)</title><url>https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40e480</url></story><parent_chain></parent_chain><comment><author>morgante</author><text>This article was very inspirational for me when developing the CMS for a previous startup and informed that development extensively.&lt;p&gt;Personally, I found the most beneficial thing to be abandoning HTML entirely. Instead I developed a JSON data structure for documents which was stored internally. This is very powerful for a couple of reasons:&lt;p&gt;1. Any user input can be mapped as pure functions on top of your internal document structure. This way you can also enforce business rules easily. Additionally, any function which you don&amp;#x27;t support will &lt;i&gt;never&lt;/i&gt; occur. (No more Word garbage!) ContentEditable works fine as an &lt;i&gt;input&lt;/i&gt; though.&lt;p&gt;2. You can write functionally pure mappings from your internal structure to other formats. This of course includes HTML, but isn&amp;#x27;t exclusive to HTML. Content can also be mapped into native mobile components as well.&lt;p&gt;3. You can be flexible with input types. For example, it was fairly trivial to (for fun) add a Markdown mode which would map any Markdown input onto the internal document representation and then back to Markdown.&lt;p&gt;4. You can introduce new semantic concepts which HTML doesn&amp;#x27;t have elements for, like a &amp;quot;quiz.&amp;quot; This makes it easy to rejigger the display of such elements later on, or to have the same semantic element render completely differently on mobile and desktop (for example). With HTML, you&amp;#x27;re stuck doing error-prone tree parsing or Regexes.</text></comment>
<story><title>Why ContentEditable Is Terrible, Or: How the Medium Editor Works (2014)</title><url>https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40e480</url></story><parent_chain></parent_chain><comment><author>Jaruzel</author><text>On the basis that browser based WYSIWYG editors have become de-rigour in almost all big online publishing platforms, it surprises me that the browsers themselves are not being updated to provide a standard input field (standardised via w3c of course) whose &amp;#x27;value&amp;#x27; attribute outputs basic HTML mark-up. Something along the lines of:&lt;p&gt;&lt;pre&gt;&lt;code&gt;  &amp;lt;input type=&amp;quot;editor&amp;quot; supports=&amp;quot;bold;italic;images;headings&amp;quot;  ... &amp;gt;
&lt;/code&gt;&lt;/pre&gt;
This would remove the massive amount of work that UI developers still have to do to hand crank something as simple as a good editor that GUI OSs have enjoyed for decades.</text></comment>