I’ve noticed this problem when trying to insert a node before an empty element when at the start of another element (pipe | is the caret position). Starting with this:
<p>|<span />Some text</p>
I used range.insertNode() on a Rangy range to paste some text, but in Chrome I see this result where the new node appears after the empty <span>:
<p><span />|INSERTED TEXTSome text</p>
Rather than this:
<p>|INSERTED TEXT<span />Some text</p>
Note that this appears to work correctly in IE9, and if the insert is not done at the start of the <p> node it also works in Chrome, e.g.:
<p>Some |<span />text</p>
results in:
<p>Some |INSERTED TEXT<span />text</p>
This is a simplified example, but shows the issue I’m seeing.
To clarify (and in case I’m approaching this the wrong way someone can suggest an alternative) I’m attempting to insert text and always have the cursor appear at the end of the newly inserted text once the insert is completed.
E.g. <p>|Original Text</p> should become <p>INSERTED TEXT|Original Text</p>
However, inserting a node results in the caret being placed immediately before the inserted text (which is as the documentation states it should be for inserting a node, so no complaint there). I am attempting to use the empty <span> as a marker to restore the caret position after the insert (in fact I’m using Rangy’s selection save and restore module to do it for me).
This is because WebKit doesn’t consider the position before the
<span>to be a valid caret position. It’s related to these Webkit bugs:If the range is as you expect, Rangy will allow you to insert the node where you want but if you’ve got the range from the selection then the range will reflect the browser’s idea of the selection. There may be a way around it but I’m not quite clear on exactly what you’re trying to do.