What's wrong with contentEditable

Nick Santos (medium) on "Why contentEditable is terrible"

Piotrek Koszuliński (CKEditor) on "contentEditable — the good, the bad, and the ugly"

Piotrek Koszuliński (CKEditor) on "Fixing contentEditable"

List of contentEditable browser inconsistencies by Guardian

Problematic use cases in the wild

• Facebook implements rich editing via textarea and an overlayed element on top to visualize mentions
• Google plus has contenteditable="plaintext-only" which seems to be completely JS-driven plain element
• Grammarly implements grammar-correcting-underlines via textarea + element on top (reasons: contenteditable is slow to render, no way to clean markup, hard to do proper selection/annotations)
• Quip has a hybrid editor (each paragraph is a contenteditable line; same with http://notion.so)
• Trix editor ignores contentEditable and maintains its own internal model (to avoid dealing with x-browser inconsistencies and complexities); same with ProseMirror

Chrome ticket on improving painting performance of contentEdtiable

contentEditable=minimal

Original discussion from June 2014

To make this simpler for sites, frameworks, and browsers, it makes sense to enable a new, simpler version of contentEditable that provides basic functionality only. For the sake of discussion, call it contentEditable='minimal'

Julie Parent breaking down potential contentEditable=minimal functionality:

1. Selections: Enable selections, perform cursor movement, scoping the boundaries on which the selection can operate.
2. Input: Perform dom modifications, dispatch events, not limited to keyboard input, also includes IME, paste, drop, etc.
3. Spell check: Enable spell check, modify the dom (or dispatch an event) when the user selects a replacement
4. Formatting magic: bold when the user hits control + b, change directionality on Ctrl+LeftShift , etc.

Where do we draw the line with cE=minimal? Only 1 or 1+2? Should cE=minimal modify DOM? Opinions divided in two. Some say that DOM mutation is a can of worms that shouldn't be opened (instead allowing user to change it programmatically). Others say that cE=minimal will be useless without some sort of automatic text modification.

W3C ticket on contentEditable=plaintext

Piotr Koszuliński on current progress with contentEditable=minimal

Light at the end of a tunnel?

The Editing Task Force

What about this kind of tiered solution?

contentEditable value	Fires events	Draws cursor	Mutates DOM	Formatting
minimal	yes	no	no	no
minimal-with-cursor	yes	yes	no	no
minimal-with-mutation	yes	yes	yes	no
true	yes	yes	yes	yes