The Editing taskforce

The Editing Task Force can be followed on our mailing list. We track issues in GitHub Issues as well.

See the Task Force's charter for more information about the group.

Introduction

contenteditable is used extensively on the web to enable users to directly edit HTML content. However, it is very complex and its behavior is often largely overwritten by sites or javascript frameworks. Completely overwriting it is very difficult because it requires overwriting all keyboard shortcuts that perform commands like bold and undo, as well as the context menu. Further, this must be done in all supported languages. A post on Medium tells one perspective of why it should be changed.

To further simplify the work of sites and frameworks, new types of contentEditable simplifies default behavior to text input only, while providing local-specific information on what a user intends such as to create newlines, delete content, or format it. This allows sites to easily provide their own behaviors without needing to handle complex text input like IMEs.

Use Cases

Semantic HTML WYSIWYG editor for a blogging platform or email. (link to mail)
The editor needs to able to add both semantic and visual annotation to the document as it will be published as a blog. Headings are to be marked up with h1. h2, etc... and each acronyms, abbreviations, and so forth are marked up with respective HTML elements. However, the editor also supports visual annotations such as bolding, italicizing, and enlarging text, each of which will be interpreted by the editor to respective underlying semantics in HTML.
More Info: In order to keep things consistent he may want to disallow certain types of styling. A few years ago it was common to see people with Joomla sites who just pasted the text into the editor after copying it from a word processor. Each blog post therefore ended up having very different styling.
More thoughts (From Microsoft):
In addition to the functionality mentioned above, the editor should support more advanced markup operations like handling bullets/indentation, tables, and clear formatting (in heavily nested HTML) that are not consistent across browsers today.
Scenarios:
- Prevent style bleeding between the app and the body of the draft mail
- Remember cursor position (or selected range) when focus is out of editor - formatting bar buttons, or insert image cases
- Extensible and consistent paste mode across browsers - e.g. paste AS-IS HTML, paste clean HTML (aka merge formatting), and paste text only
- Extensibility for formatting commands - e.g. when browser handles the bullets it allows callback to javascript to define customized behavior; on under a nested bullet structure, some browsers add a new bullet, others create a new line without bullet and delete the previous bullet; Merge two lists using delete/backspace, instead of keeping two different list structures
Structured content editor with whitelisted DOM elements and/or classes. (link to mail)
Part of the point is to keep the structure of the document semantically defined. Users can't change font sizes of individual words, etc. This is because one of the main tasks of scientific journal editors who currently receive drafts in Word or Libreoffice format have to undo all the manual styling the writers have added in order to get everything to look in a similar way. We simply take those styling possibilities away so that we can define the entire design through one stylesheet as well as easily convert to other formats, such as LaTex or an Epub, and be sure that we cover all formatting tags that were used.
Editor that supports areas of non-editable content, nested editable content, etc (see what CKEditor are doing with widgets.) (link to mail)
We also do that - for example in the case of formulas. Generally the text is editable near-Wysiwyg style. But when it comes to formulas, we let the user enter them in Latex format and display the result using mathjax. Each formula object within the text is a noneditable island. If the user clicks on it with the mouse, he can change the formula.
Another example are figures: We want them to always be block elements and to have exactly one caption without styling. They are therefore non-editable islands and if the user clicks on them he can change the figure's display and the caption text.
Web-based code editor with syntax highlighting, etc. (link to mail)
Browser based "word art" generator where end-user types some text and it renders in 3D along a curve and in rainbow colors on a <canvas>. (link to mail)
Track changes functionality within an editor (like https://github.com/NYTimes/ice )
(really should be run MVC in order to keep the code somewhat readable. Currently ICE breaks whenever any of the browser makers decide to change anything about contenteditable.)
Web-based DTP application (link to mail)
The app can creates a document that contains pagination, columns, and a complex illustrations. It needs to let users edit any text that appears in the document. Each editable text needs to be accessible, and styles applied to text need to be backed by the application's internal model of the document.
Surface for plain text editing (From Microsoft)
Plain-text emails require a formatting surface that strips out any HTML tags, and prevents them from being entered (e.g. via copy paste)
Style read-only text (From Microsoft)
The sample text is read only, but is possible to change the format of the text. This is used to select default compose font properties (text font, size, color, BIU).

Specs maintained

It is a pattern in web editors that are built on top of contenteditable to disable some commanding functionality. The reason for this is that consistency for Rich Text Editors is very hard, and requirements vary greatly from one app to the next. Disabling all functionality is very difficult, however.

In order to make it easier to disable specific capabilities of contenteditable, we are creating different types of contenteditable with different features disabled by default in the contentEditable spec.

Because it is widely used, contentEditable="true" will continue to be developed in the contentEditable=True spec. Similarly, the execCommand spec aims to spec the behavior of the execCommand command.

The Editing taskforce

Specifications

Introduction

Framing the Problem

Use Cases

Goals

Specs maintained

Acknowledgements