[w3c/editing] contentEditable: clarification of selection and typing behavior (#156)

This discussion started in [Blink bug 663638](https://bugs.chromium.org/p/chromium/issues/detail?id=663638).

## The context

Consider the following snippet:

```html
<div id="sample" contenteditable="true" style="border-style: solid">
  abc <a href='bob'>selectMeAndTypeOver</a> def
</div>
```

It is not clear what the behavior should be when a user selects "selectMeAndTypeOver" (i.e. the entirety of the text node within the `<a>` node) and types something else.

What I could gather from Blink  (M57) and Gecko (Firefox 50) so far is this:

* Gecko
    * Double-clicking _selectMeAndTypeOver_:
        * `document.getSelection()` returns a `Selection` object with the `<div>` as both anchor and focus nodes (`anchorOffset==1`, `focusOffset==2`).
        * `document.execCommand("insertText", false, "foo")` replaces the entire `<a>` node with a new text node. That is, `document.getElementById("sample").childNodes` returns 3 text nodes.
        * Just typing something manually also removes the `<a>` node and replaces it with a text node whose contents are whatever is being typed.
    * Selecting _selectMeAndTypeOver_ with the mouse:
        * `document.getSelection()` returns a `Selection` object with the `selectMeAndTypeOver` text node as the anchor (`anchorOffset==0`) and the ` def` text node as the focus (`focusOffset==0`).
        * `document.execCommand("insertText", false, "foo")` replaces the contents of text node within the `<a>` node with "foo". That is, `document.getElementById("sample").childNodes` returns 3 nodes, the second being `<a>`.
        * Just typing something manually also causes the contents of the text node within `<a>` to be replaced, while `<a>` itself remains in the tree.
    * When moving the caret with the left and right keyboard keys and then typing, the new text may be either a child of the `<a>` node or a sibling text node:
        * When the caret is anywhere in `electMeAndTypeOve` and is moved to either `|selectMeAndTypeOver` or `selectMeAndTypeOver|`, the new text is added to the existing text node _inside_ <a>. In other words, the contents of the link changes, but the link remains the same.
        * When the caret is moved from "abc " towards `|selectMeAndTypeOver`, the new text is appended to the "abc " text node (it does not become part of the link node).
        * When the caret is moved from " def" towards `selectMeAndTypeOver|`, the new text is added to the " def" text node (it does not become part of the link node).

* Blink
    * Double-clicking _selectMeAndTypeOver_:
        * `document.getSelection()` returns a `Selection` object with the `selectMeAndTypeOver` text node as both anchor and focus (`anchorOffset==0`, `focusOffset==19`).
        * `document.execCommand("insertText", false, "foo")` replaces the contents of the text node within the `<a>` node with "foo". That is, the link remains but the text is changed.
        * Just typing something manually causes the *first* character to become the only contents of the text node within the `<a>` node, while any further input is added to a new text node that is inserted right after the `<a>` node. That is, the first character of the input becomes the link's text and all the rest becomes a new text node adjacent to `<a>` (`document.getElementById("sample").childNodes` returns 1 text node, `<a>` and 2 other text nodes).
    * The behavior when selecting _selectMeAndTypeOver_ with the mouse is identical to what was described above.
    * Typing something either before or after _selectMeAndTypeOver_ always creates text nodes (i.e. the text node within the `<a>` node is never touched):
        * When the caret is at `|selectMeAndTypeOver`, the new contents are appended to the "abc " text node.
        * When the caret is at `selectMeAndTypeOver|`, the new contents are added to a new text node that is inserted between the `<a>` node and the " def" text node.

I wasn't able to test Edge and Safari, but GNOME Web 3.22.1 with WebKitGTK+ 2.14.11 behaved identically to Blink.

## The questions

* Once _selectMeAndTypeOver_ is selected, what should the `Selection` object returned by `document.getSelection()` contain as focus and anchor (and respective offsets)?
* What's the expected behavior when _selectMeAndTypeOver_ and the user then starts typing? Should the content replace the `<a>` node or the contents of the text node _inside_ the `<a>`? Or should Blink/WebKit's behavior of just adding the first character to the text node within `<a>` be followed?
* What happens when the caret is positioned at either edge of _selectMeAndTypeOver_ and the user types something? Should the new text be part of the `<a>` node or adjacent to it? If it should be adjacent to it, should it be merged into the existing nodes or should new text nodes be created?

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/editing/issues/156