From 38a8c54e7095713f7c290318480c68bb6f2322ef Mon Sep 17 00:00:00 2001
From: Masayuki Nakano <masayuki@d-toybox.com>
Date: Fri, 11 Oct 2024 23:31:29 +0000
Subject: [PATCH] Make `HTMLEditor::InsertElementAtSelectionAsAction` split
 ancestor inline elements

Chrome and Safari splits ancestors when `document.execCommand("insertImage")`
 inserts an `<img>`, but we insert into the closest inline element. For example,
```html
<b>A[]B</b>
```
Chrome and Safari make it to:
```html
<b>A</b><img><b>B</b>
```
But Firefox makes it to:
```html
<b>A<img>B</b>
```
I think that we should not change the behavior on Thunderbird.  Therefore, the
behavior is controlled with the new `options` argument and the new behavior
runs only when the `HTMLEditor` works for content document and it's not caused
by the XPCOM method.

Differential Revision: https://phabricator.services.mozilla.com/D225037

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1923250
gecko-commit: 4d82c0995e5d5653017d08b4c101f078a165039c
gecko-reviewers: m_kato
---
 editing/data/insertimage.js | 58 +++++++++++++++++++++++++++----------
 1 file changed, 43 insertions(+), 15 deletions(-)

diff --git a/editing/data/insertimage.js b/editing/data/insertimage.js
index b18388a7971dfd..b62331e152098e 100644
--- a/editing/data/insertimage.js
+++ b/editing/data/insertimage.js
@@ -12,7 +12,7 @@ var browserTests = [
     {"insertimage":[false,false,"",false,false,""]}],
 ["<span>foo[</span><span>]bar</span>",
     [["insertimage","/img/lion.svg"]],
-    "<span>foo<img src=\"/img/lion.svg\">{}</span><span>bar</span>",
+    "<span>foo</span><img src=\"/img/lion.svg\"><span>bar</span>",
     [true],
     {"insertimage":[false,false,"",false,false,""]}],
 ["foo[bar]baz",
@@ -27,17 +27,17 @@ var browserTests = [
     {"insertimage":[false,false,"",false,false,""]}],
 ["foo<span style=color:#aBcDeF>[bar]</span>baz",
     [["insertimage","/img/lion.svg"]],
-    "foo<span style=\"color:rgb(171, 205, 239)\"><img src=\"/img/lion.svg\">{}</span>baz",
+    "foo<img src=\"/img/lion.svg\">baz",
     [true],
     {"insertimage":[false,false,"",false,false,""]}],
 ["foo<span style=color:#aBcDeF>{bar}</span>baz",
     [["insertimage","/img/lion.svg"]],
-    "foo<span style=\"color:rgb(171, 205, 239)\"><img src=\"/img/lion.svg\">{}</span>baz",
+    "foo<img src=\"/img/lion.svg\">baz",
     [true],
     {"insertimage":[false,false,"",false,false,""]}],
 ["foo{<span style=color:#aBcDeF>bar</span>}baz",
     [["insertimage","/img/lion.svg"]],
-    "foo<span style=\"color:rgb(171, 205, 239)\"><img src=\"/img/lion.svg\">{}</span>baz",
+    "foo<img src=\"/img/lion.svg\">baz",
     [true],
     {"insertimage":[false,false,"",false,false,""]}],
 ["[foo<span style=color:#aBcDeF>bar]</span>baz",
@@ -62,57 +62,57 @@ var browserTests = [
     {"stylewithcss":[false,true,"",false,false,""],"insertimage":[false,false,"",false,false,""]}],
 ["foo<span style=color:#aBcDeF>[bar</span>baz]",
     [["insertimage","/img/lion.svg"]],
-    "foo<span style=\"color:rgb(171, 205, 239)\"><img src=\"/img/lion.svg\">{}</span>",
+    "foo<img src=\"/img/lion.svg\">",
     [true],
     {"insertimage":[false,false,"",false,false,""]}],
 ["foo<span style=color:#aBcDeF>{bar</span>baz}",
     [["insertimage","/img/lion.svg"]],
-    "foo<span style=\"color:rgb(171, 205, 239)\"><img src=\"/img/lion.svg\">{}</span>",
+    "foo<img src=\"/img/lion.svg\">",
     [true],
     {"insertimage":[false,false,"",false,false,""]}],
 ["foo<span style=color:#aBcDeF>[bar</span><span style=color:#fEdCbA>baz]</span>quz",
     [["stylewithcss","true"],["insertimage","/img/lion.svg"]],
-    "foo<span style=\"color:rgb(171, 205, 239)\"><img src=\"/img/lion.svg\">{}</span>quz",
+    "foo<img src=\"/img/lion.svg\">quz",
     [true,true],
     {"stylewithcss":[false,false,"",false,true,""],"insertimage":[false,false,"",false,false,""]}],
 ["foo<span style=color:#aBcDeF>[bar</span><span style=color:#fEdCbA>baz]</span>quz",
     [["stylewithcss","false"],["insertimage","/img/lion.svg"]],
-    "foo<span style=\"color:rgb(171, 205, 239)\"><img src=\"/img/lion.svg\">{}</span>quz",
+    "foo<img src=\"/img/lion.svg\">quz",
     [true,true],
     {"stylewithcss":[false,true,"",false,false,""],"insertimage":[false,false,"",false,false,""]}],
 ["foo<b>[bar]</b>baz",
     [["insertimage","/img/lion.svg"]],
-    "foo<b><img src=\"/img/lion.svg\">{}</b>baz",
+    "foo<img src=\"/img/lion.svg\">baz",
     [true],
     {"insertimage":[false,false,"",false,false,""]}],
 ["foo<b>{bar}</b>baz",
     [["insertimage","/img/lion.svg"]],
-    "foo<b><img src=\"/img/lion.svg\">{}</b>baz",
+    "foo<img src=\"/img/lion.svg\">baz",
     [true],
     {"insertimage":[false,false,"",false,false,""]}],
 ["foo{<b>bar</b>}baz",
     [["insertimage","/img/lion.svg"]],
-    "foo<b><img src=\"/img/lion.svg\">{}</b>baz",
+    "foo<img src=\"/img/lion.svg\">baz",
     [true],
     {"insertimage":[false,false,"",false,false,""]}],
 ["foo<span>[bar]</span>baz",
     [["insertimage","/img/lion.svg"]],
-    "foo<span><img src=\"/img/lion.svg\">{}</span>baz",
+    "foo<img src=\"/img/lion.svg\">baz",
     [true],
     {"insertimage":[false,false,"",false,false,""]}],
 ["foo<span>{bar}</span>baz",
     [["insertimage","/img/lion.svg"]],
-    "foo<span><img src=\"/img/lion.svg\">{}</span>baz",
+    "foo<img src=\"/img/lion.svg\">baz",
     [true],
     {"insertimage":[false,false,"",false,false,""]}],
 ["foo{<span>bar</span>}baz",
     [["insertimage","/img/lion.svg"]],
-    "foo<span><img src=\"/img/lion.svg\">{}</span>baz",
+    "foo<img src=\"/img/lion.svg\">baz",
     [true],
     {"insertimage":[false,false,"",false,false,""]}],
 ["<b>foo[bar</b><i>baz]quz</i>",
     [["insertimage","/img/lion.svg"]],
-    "<b>foo<img src=\"/img/lion.svg\">{}</b><i>quz</i>",
+    "<b>foo</b><img src=\"/img/lion.svg\"><i>quz</i>",
     [true],
     {"insertimage":[false,false,"",false,false,""]}],
 ["<p>foo</p><p>[bar]</p><p>baz</p>",
@@ -355,4 +355,32 @@ var browserTests = [
     "foo<img src=\"/\u65E5\u672C\u8A9E\u30D1\u30B9/lion.svg\">{}bar",
     [true],
     {"insertimage":[false,false,"",false,false,""]}],
+["<div>{}<br></div>",
+    [["insertimage","/img/lion.svg"]],
+    ["<div><img src=\"/img/lion.svg\"></div>",
+     "<div><img src=\"/img/lion.svg\"><br></div>"],
+    [true],
+    {}],
+["<div><b>{}<br></b></div>",
+    [["insertimage","/img/lion.svg"]],
+    ["<div><img src=\"/img/lion.svg\"></div>",
+     "<div><img src=\"/img/lion.svg\"><b><br></b></div>"],
+    [true],
+    {}],
+["<div><span>{}<br></span></div>",
+    [["insertimage","/img/lion.svg"]],
+    ["<div><img src=\"/img/lion.svg\"></div>",
+     "<div><img src=\"/img/lion.svg\"><span><br></span></div>"],
+    [true],
+    {}],
+["<div><b>A[]B</b></div>",
+    [["insertimage","/img/lion.svg"]],
+    "<div><b>A</b><img src=\"/img/lion.svg\"><b>B</b></div>",
+    [true],
+    {}],
+["<div><span>A[]B</span></div>",
+    [["insertimage","/img/lion.svg"]],
+    "<div><span>A</span><img src=\"/img/lion.svg\"><span>B</span></div>",
+    [true],
+    {}],
 ]