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

Contributors

kangax avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  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.