Bug 154496 – Only first character inserted into a element in contenteditable mode

• Status: NEW
• Component: HTML Editing

## Repro steps

1. Open http://codepen.io/mlewand/pen/obRKqM?editors=1100
1. Focus contenteditable div (marked with blue border)
1. Make a selection containing at least one character at the end of link e.g. `<a href="#">bar baz [bom]</a>`
1. Type "aaa"

### Expected

Link inner text is changed to `<a href="#">bar baz aaa</a>`.

### Actual

Only first character gets into the link, any subsequent will be placed outside the anchor.


### References

This issue has been picked up by Drupal community https://www.drupal.org/node/2671896.

This issue does not appear in FF, IE11. It's also buggy in Chromium.

[Alexey Proskuryakov]

Could you please elaborate on why you are calling this a bug?

The behavior is consistent with what happens when typing right after a link (which is also different from Firefox).

Sure, I think there is misunderstanding:

It's not that you're typing after the link, but your selection is still *within* the link.

Here's a reference to this issue in Chromium tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=588418

[Alexey Proskuryakov]

The selection is not within the link after the first keypress. It's not a coincidence that the first keypress works as you expect.

Yes, selection is making its way out of the anchor element, and this is the source of the problem.

To have a better understanding of this issue look at it compared to any other inline element, such as bold here: http://codepen.io/mlewand/pen/ONmmmE?editors=1000

Cross linking yet another user request, this time in CKEditor's tracker http://dev.ckeditor.com/ticket/14506

[Alberto Fernandez]

I'm also suffering this bug. For me is even worse, since on my custom editor the user can edit the anchor links themselves.

This is an example of markup the user can end up with which gives the issues:
"<a href="#" contenteditable="true"><b>Select all the text and try to type more than two characters</b></a>"


Steps to Reproduce
------

 1. Open my live codepen at https://codepen.io/sinspiral/pen/xLbdqR
 2. Select all the text.
  * It doesn't matter if using Ctrl/Cmd+A, using the mouse, or the key arrows with Shift pressed.
 3. Type more than two characters, i.e. "lorem ipsum"

Expect
------
The new text typed will appear, so the content will be "lorem ipsum".

Result
------

After the second character is pressed or the whole content dissappears, or only the first character happens. Then you cannot continue typing anymore.

Platform:
------

Webkit Browsers where I can reproduce it:
 * Safari Version: 10.1.2 (12603.3.8)
 * Chrome Version 59.0.3071.115 (Official Build) (64-bit)
 * PhantomJS: Version 2.1.1
 * QtWebkit (annulen): 5.212.0 Alpha 2

OS Version:
 * macOS 10.12.6
 * Windows 10