IE: Link placement is off by some characters

[spiderpug]

After selecting a word and clicking the anchor button, I insert a link. The resulting link appears 1 to n characters later, not where my selection was.

I found out that this depends on the underlying markup. If the paragraphs within the contenteditable div are not indented the issue appears. The issue gets worse depending on the markup level, e.g. if you have additional tags like table, tr, td, p the link is placed even more characters later.

If the paragraphs are indented for readability it does not appear - at least I could not reproduce it. The JSFiddle also show cases the working version.

Steps to reproduce (IE 11.0.9600.17420)

• open this JSFiddle OR use exactly this markup:

<div class="editable">
<p>First paragraph</p>
<p>Some <strong>heavy</strong> lifting is required.</p>
</div>

• doubleclick the word "heavy". Note that the space is selected too. There is a seperate issue on this: In Windows, don't include empty space character after word(s) when creating anchor/link #259
• click the anchor button in the toolbar
• insert a random link href, e.g. "12345"

Expected behavior:

Link should cover the word "heavy".

Actual behavior:

Link covers "eavy l"

Link to an example: JSFiddle

Versions

• medium-editor: 5.22.0 (JSFiddle uses "latest")
• browser: IE 11.0.9600.17420
• OS: Win7

[nmielnik]

It seems like this came up again in #1251 @spiderpug does #1251 sound like the same issue you're seeing?

[spiderpug]

@nmielnik seems like it's a similar one, although I don't know if it's caused by the same regression. But yes, we observed different forms of this bug in IE11.

At least I was able to fix #1251 's markup the same way as here: By indenting the HTML. See this fiddle with the markup given in #1251 : https://jsfiddle.net/LuL7rh0u/1/ . It works if you indent the <h1> tag. Same fix applies to this issue at least.