When an 'insertHTML' command should be applied as sibling or child of a styled 'span' element ?
@johanneswilm is already working on this.
Since Apr 8, 2019.
- Dominant language
- HTML
- Stars
- 202
- Forks
- 43
- PR merge metrics
- No merged PRs in 30d
Description
Lets consider this case:
<!doctype html>
<style>
.textBox {
font: 20px/1 Arial;
height: 200px;
border: 2px solid blue;
}
</style>
<script>
function insertHTML() {
document.getElementById("theFrame").focus();
document.execCommand("insertHTML", false, '<a href="www.igalia.com">Igalia</a><div style="display: inline;font-size: large"></div>');
};
function onLoad() {
document.getElementById("theFrame").focus();
document.execCommand("foreColor", false, "green");
}
</script>
<body onload="onLoad();">
<div id="theFrame" class="textBox" contenteditable="true"></div>
<div>
<button onclick="insertHTML()">Insert HTML</button>
</div>
</body>
After typing a single character, a new <font> element is inserted as first child of the "theFrame" <div> element, which will be the parent of the inline block that will contain all the text. This is the DOM tree generated by any of the major browsers:
<div id="theFrame" class=textBox" contenteditable=true>
<font color="green">XXXXX</font>
</div>
Once the insertHTML command is executed, via the "insert HTML" button, the new HTML fragment is added to the DOM tree, and this is where browsers shows an interoperability issue.
In the case of Safari and Chrome, the new HTML fragment is inserted as sibling of the <font> element, producing the following DOM tree:
<div id="theFrame" class=textBox" contenteditable=true>
<font color="green">XXXXX</font>
<a href="www.igalia.com">Igalia</a>
<div display="inline; font-size: large"><div>
YYYY
</div>
This behavior implies that the text that follows the new HTML inserted doesn't follow the same style (font color in this case) than the preceding text.
Firefox and Edge insert the new HTML fragment as a new child of the <font> element, but they produce a slightly different DOM, since Firefox refuses to insert the empty inline block; this is what Firefox produces after executing the insertHTML command:
<div id="theFrame" class=textBox" contenteditable=true>
<font color="green">
XXXXX
<a href="www.igalia.com">Igalia</a>
</font>
</div>
While Edge produces the following DOM after executing the the insertHTML command;
<div id="theFrame" class=textBox" contenteditable=true>
<font color="green">
XXXXX
<a href="www.igalia.com">Igalia</a>
<div display="inline; font-size: large"><div>
</font>
</div>
Additionally, there are still differences between Firefox and Edge regarding where the text following the new HTML fragment is inserted in the DOM tree.
In the case of Firefox, it's inserted as a sibling of the <font> element, producing a DOM tree that looks as follows:
<div id="theFrame" class=textBox" contenteditable=true>
<font color="green">
XXXXX
<a href="www.igalia.com">Igalia</a>
</font>
YYYY
</div>
On the other hand, Edge produces a DOM tree that guarantees the text's style is preserved after executing the insertHTML command:
<div id="theFrame" class=textBox" contenteditable=true>
<font color="green">
XXXXX
<a href="www.igalia.com">Igalia</a>
<div display="inline; font-size: large"><div>
YYYYY
</font>
</div>
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.