[w3c/editing] Spec proposal for document.execCommand(‘insertHTML’) (Issue #525)

shwetabin created an issue (w3c/editing#525)

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](https://w3c.github.io/editing/docs/execCommand/#fix-disallowed-ancestors)) 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>
```

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

Message ID: <w3c/editing/issues/525@github.com>