Spec proposal for document.execCommand(‘insertHTML’)

[shwetabin]

Current spec doesn’t tell whether the inserted html should be pasted as is or merged into the parent element. Chrome/Firefox/Safari each execute differently. The following examples demonstrate each browser’s behavior.

Case: Inline into Inline content

<!-- Before -->
<span>Hello ^world</span>
<!-- execCommand('insertHTML', false, '<b>inserted</b>') -->

<!-- Chrome -->
<span>Hello <b>inserted</b> world</span>

<!-- Firefox-->
<span>Hello <b>inserted</b> world</span>
<!-- Safari does not insert anything–!>

Case: Block into Inline content

<!-- Before -->
<span>Hello ^world</span>
<!-- execCommand('insertHTML', false, '<p>inserted</p>') -->

<!-- Chrome -->
<span>Hello inserted world</span>

<!-- Firefox-->
<span>Hello <p>inserted</p> world</span>

<!-- Safari-->
<span>Hello <br> world</span>

Case: Block into block content

<!-- Before -->
<div>Hello ^world</div>
<!-- execCommand('insertHTML', false, '<div>inserted</div>') -->

<!-- Chrome -->
<div>Hello inserted world</div>
<!-- Firefox-->
<div>Hello <div>inserted</div> world</div>
<!-- safari do not insert anything–!>

The behavior should be uniform across browsers.
Proposed Solution:
Insert the HTML content as-is at the caret/selection position, then invoke fix disallowed ancestors algorithm (execCommand) to normalize structure.

Case 1: inline in block/ inline element:

!-- Before -->
<div>Hello ^world</div>
<!-- execCommand('insertHTML', false, '<b>inserted</b>') -->

<!-- Result-->
<div>Hello <b>inserted</b> world</div>

Case 2: Block into Inline Context

<!-- Before -->
<span>Hello ^world</span>
<!-- execCommand('insertHTML', false, '<p>inserted</p>') -->

<!-- Result-->
<span>Hello </span> <p>inserted</p> <span> world</span>

Case 3: Block into block Context

<!-- Before -->
<div>Hello ^world</div>
<!-- execCommand('insertHTML', false, '<div>inserted</div>') -->

<!-- Result-->
<div>Hello <div>inserted</div> world</div>

Case 4: paragraph into paragraph Context ( fix disallowed ancestors algorithm)

<!-- Before -->
<p>Hello ^world</p>
<!-- execCommand('insertHTML', false, '<p>inserted</p>') -->

<!-- Result-->
<p>Hello </p><p>inserted</p><p> world</p>

[masayuki-nakano]

Firefox treats the API as a simple way to the DOM manipulation. Therefore, allowing the invalid HTML structure since the raw DOM API allows that. And it takes a cost to check all ancestors are valid for inserting an element. On the other hand, when pasting the same HTML fragment, Firefox tries to split the ancestors to avoid the builtin editor makes an invalid HTML structure.