[w3c/editing] When an 'insertHTML' command should be applied inside a sibling <font> element ? (#191)

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 &lt;font&gt; element is inserted as **first child** of the "theFrame" &lt;div&gt; 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 &lt;font&gt; 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 &lt;font&gt; 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 &lt;font&gt; 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>
```


-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/editing/issues/191

Received on Monday, 8 April 2019 21:18:00 UTC