Search code examples
htmlcontenteditable

What is contenteditable="caret", "events", "plaintext", "typing"?


MDN's contenteditable documentation mentions the following experimental features in its Browser Compatibility list, in addition to the basic contenteditable="true":

  • contenteditable="caret"
  • contenteditable="events"
  • contenteditable="plaintext-only"
  • contenteditable="typing"

Is there any documentation that explains what these do?


Solution

  • I was quite surprised to find out just how burried this information seemed to be on the internet. Usually MDN is pretty good about their information and sources, but all of their official references only show the current official values of true and false for contenteditable.

    After some digging I found this discussion on the W3C github page that referenced a draft from W3C on contenteditable.

    There is currently a wayback machine link to the draft (as the actual page url no longer works), however it's hard to say how long this will be available.

    So here I will try to cover some of the information as to provide another (more permanent) reference to these values for contenteditable.

    First, there is a section that gives somewhat of an overview of the meaning/purpose of the states.

    Meaning of states

    The states "events", "caret", "typing", "plaintext-only" and "true" are hierarchically ordered, so that the state "caret" also includes the features of the "events" state, the "typing" state includes the features of the "caret" state, the "plaintext-only" state includes the features of the "typing" state, and the "true" state includes all the features of the "plaintext-only" state.

    The "events" state means that beforeinput events are triggered when the user asks for an editing operation. The "caret" state adds default browser controlled movement of the caret. The "typing" state adds handling of text input through IME and keyboard, and deletion within an IME composition. The "plaintext-only" state adds handling of text deletion within a text node. The "true" state adds handling of deletion deletion of non-textual content and editing commands through the execCommand command.

    The states "events", "caret", "typing" and "plaintext-only" are defined in this document.

    The state "true" is currently not well-defined and its usage is discouraged. An initial attempt has been made to specify the behavior of the "true" state in the contentEditable=True spec.

    contentEditable=events

    In a focused editing host that is in the "events" state, a caret MUST be drawn if the selection is collapsed, and it MUST be possible to place the caret in all of the Legal Caret Positions programmatically.

    All user editing intentions initiated while an editing host that is in the events state is focused, MUST trigger a beforeinput event.

    contentEditable=caret

    A focused editing host that is in the "caret" state MUST behave like an editing host in the events state. Additionally, the default action of the beforeSelectionChange event in such an editing host must be to move the caret in the indicated direction, if movement in that direction seems possible.

    contentEditable=typing

    A focused editing host that is in the "typing" state MUST behave like an editing host in the caret state, and additionally, it MUST handle text insertion by keyboard at the position of the caret if the caret is placed within a text node or it is possible to place a text node at the place of the caret. It must by default also handle composition by IME, both insertion as well as deletion of text input.

    contentEditable=plaintext-only

    A focused editing host that is in the "plaintext-only" state MUST behave like an editing host in the typing state, and additionally, it MUST handle text deletion.

    I understand this is not really documentation for these values, however it doesn't look like anyone really has any documentation currently. None of the supported browsers of those values have any documentation available, and this may be due to the fact that these values have not yet been implemented to any real extent, as the spec is not yet finalized.

    I suppose we will have to wait a bit to see if W3C or any of the browsers do officially publish something related to these new values of contenteditable.