Make `HTMLEditor::AutoInlineStyleSetter::ExtendOrShrinkRangeToApplyTheStyle` recompute common ancestor of the range if it updates the range
In this case, `<font face="monospace">abc []<br></font>`, the range applying
new style will be extended as `<font face="monospace">abc [<br>}</font>` first.
https://searchfox.org/mozilla-central/rev/29bdf6ff9965a647c6f64d63fed2b5bd094532c7/editor/libeditor/HTMLStyleEditor.cpp#1944
Then, the start point should be shrunken and the range should become
`<font face="monospace">abc {<br>}</font>`.
https://searchfox.org/mozilla-central/rev/29bdf6ff9965a647c6f64d63fed2b5bd094532c7/editor/libeditor/HTMLStyleEditor.cpp#1977-1978
However, `commonAncestor` is still the text node because it's not updated
after extending the range to include the `<br>`. Then,
`AutoInlineStyleSetter::GetNextEditableInlineContent` fails to get `<br>`
from the text node.
https://searchfox.org/mozilla-central/rev/29bdf6ff9965a647c6f64d63fed2b5bd094532c7/editor/libeditor/HTMLStyleEditor.cpp#1576-1578
Finally, the unexpected range computation will reach here with the text editor
and adjust the start of the range to start of the text node.
https://searchfox.org/mozilla-central/rev/29bdf6ff9965a647c6f64d63fed2b5bd094532c7/editor/libeditor/HTMLStyleEditor.cpp#420-423
Therefore, the new text which the new style should be applied is jumped to
start of the text node.
Differential Revision: https://phabricator.services.mozilla.com/D190028
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1852849
gecko-commit: c9c063011de338289887167e0001fde5471c8b37
gecko-reviewers: m_kato
diff --git a/editing/other/inserttext-after-bold-in-font-face-monospace.html b/editing/other/inserttext-after-bold-in-font-face-monospace.html
new file mode 100644
index 0000000..cc937f2
--- /dev/null
+++ b/editing/other/inserttext-after-bold-in-font-face-monospace.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div contenteditable><div><br></div></div>
+<script>
+"use strict";
+
+const editingHost = document.querySelector("div[contenteditable]");
+test(() => {
+ editingHost.focus();
+ document.execCommand("fontName", false, "monospace");
+ document.execCommand("insertText", false, "abc");
+ document.execCommand("insertParagraph");
+ document.execCommand("insertText", false, "def ");
+ document.execCommand("bold");
+ document.execCommand("insertText", false, "g");
+ assert_in_array(
+ editingHost.querySelector("div + div").innerHTML,
+ [
+ '<font face="monospace">def <b>g</b></font>',
+ '<font face="monospace">def <b>g<br></b></font>',
+ ]
+ );
+}, "");
+</script>
+</body>
+</html>
