Problems with contenteditable span inside hyperlink in Firefox - html

Question

I've got a contenteditable span placed inside an <a> tag. I'd like to be able to edit the text inside the span so it is important to:
place the cursor on mouseclick somewhere inside the span
select part of the text inside the span using the mouse
Both does not work in Firefox as soon as there is a href attribute in the hyperlink (which is also needed in my case). There is no problem without this attribute and there are no problems in Chrome.
Please try my example on JSFiddle.
<ul>
<li>
<a href="#">
<span contenteditable="true">PlacingCursorOrTextSelectionInFirefoxImpossible</span>
</a>
</li>
<li>
<a>
<span contenteditable="true">noProblemsHereSoFar</span>
</a>
</li>
</ul>

Answer 1

What you can do to improve the click behaviour is to prevent its propagation like this:
<a href="#">
<span contenteditable="true" onclick="event.stopPropagation();">
PlacingCursorOrTextSelectionInFirefoxImpossible
</span>
</a>
Unfortunately, this only allows to put the cursor inside the span, but it is somewhy put to its beginning, not where one have clicked.
To enable selecting, you need to prevent the dragging behaviour, but it is to be changed for the a element:
<a href="#" draggable="false">
<span contenteditable="true" onclick="event.stopPropagation();">
PlacingCursorOrTextSelectionInFirefoxImpossible
</span>
</a>
But wow, draggable="false" actually fixed the "cursor to beginning" bug! Here's the working example (tested in FF 47): https://jsfiddle.net/8v1ebkfd/4/

Answer 2

This works for me:
prevent click-default inside contenteditables
and for firefox, remove and add href-attribute to prevent placing the cursor at the start of the contenteditable-element
http://jsfiddle.net/uy4q0zcm/1/
// if contenteditable inside a link
document.addEventListener('click', e=>{
if (e.button !== 0) return;
if (e.target.isContentEditable) {
e.preventDefault();
}
if (e.explicitOriginalTarget && e.explicitOriginalTarget.isContentEditable) { // keyboard click firefox
e.preventDefault();
}
});
// prevent (Firefox) placing cursor incorrectly
document.addEventListener('mousedown', e=>{
if (!e.target.isContentEditable) return;
var link = e.target.closest('a');
if (link) {
const href = link.getAttribute('href')
link.removeAttribute('href');
setTimeout(()=>link.setAttribute('href', href))
}
});