Git Product home page Git Product logo

contenteditable's Introduction

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

contenteditable's People

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.