w3c / w3c/editing

Removal of browser built-in Undo stack functionality from contenteditable

Open
#150 76 comments 10 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
202
Forks
43
PR merge metrics
No merged PRs in 30d

Description

The subject of removing the undo manager functionality from contenteditable by default came up at the Editing Taskforce F2F meeting on 2016-09-22 at TPAC in Lisboa, Portugal. It was pointed out that the browser's undo stack would be entirely useless once the JS editor interrupt the default behavior even in just a few limited cases. No-one present opposed the idea of removing the browser's undo functionality for contenteditable and replacing it by a way for the JS to enable/disable the menu entries for redo and undo + giving the ability to listen for redo/undo being triggered via beforeinput events.

Everyone agreed to turn this functionality of by default. (given that there seems to be no authoritative spec that says that undo IS provided, we may only need to spec that undo is turned off be default).

In addition, the following JS editor projects were contacted and all of them responded that the browser's undo stack and default undo behavior was either useless or harmful:

  • CKEditor
  • ProseMirror
  • QuillJS
  • ContentTools library
  • Substance.io
  • TinyMCE
  • Froala

The following applications were investigated and it was determined that they use their own undo stacks (a separate stack for each input field):

  • Medium.js
  • Google Gmail
  • Microsoft Office 365
  • Apple iCloud Pages
  • Google Docs (only using very limited amount of contenteditable anyway)
  • Facebook's various input fields
  • Wikimedia Visual editor

Two working contenteditable webapps were found that makes use of the browser's undo stack:

  • Facebook's draft-js uses its own undo stack, but falls through to the native undo stack in case the last change was a spell checker fix, so that the browser learns that the change was unwanted and stops making the same suggestion in the future [1].
  • TypeIt.org is a barebones JavaScript editor that uses contenteditable on platforms other than Android. It's purpose is to give extra buttons so that users who don't have a specific language keyboard can write a text in that language relatively easily. It does not allow saving text and it's not guaranteeing that text pasted from other sources will be editable and not behave as expected.

[1] https://github.com/facebook/draft-js/blob/67c5e69499e3b0c149ce83b004872afdf4180463/src/component/handlers/edit/commands/keyCommandUndo.js#L24-L27

(This issue is updated as responses from developers arrive.)

Edit 2019-11-27: Added TypeIt.org

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the issue's discussion of contenteditable undo behavior and beforeinput events, then review the linked Draft.js keyCommandUndo.js example. The work is complete when the task force agrees on and documents the default undo behavior and the proposed script-facing controls or events.

Written by the indexing model from the issue text.

Assessment

Tech stack
html, javascript
Domain
web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.