[FIX] web_editor: unable navigate to next line of banner

Before this commit:

- Inserting a banner after already existing content it's impossible to
  go to the next line of the banner.

After this commit:

- It's now possible to navigate to the next line of the banner.

task-3432167

X-original-commit: 05a879f81ac59d47b718abbb5966fd4f8214e1de
Part-of: odoo/odoo#151735

addons/web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js

@@ -1973,6 +1973,11 @@ export function splitElement(element, offset) {
         index < offset ? before.appendChild(child) : after.appendChild(child);
         index++;
     }
+    // e.g.: <p>Test/banner</p> + ENTER <=> <p>Test</p><div class="o_editor_banner>...</div><p><br></p>
+    const blockEl = closestBlock(after);
+    if (blockEl) {
+        fillEmpty(blockEl);
+    }
     element.before(before);
     element.after(after);
     element.remove();

addons/web_editor/static/src/js/editor/odoo-editor/test/spec/htmlTables.test.js

@@ -247,7 +247,7 @@ describe('Paste HTML tables', () => {
     
 
     
-[]</p>`,
+[]<br></p>`,
             });
         });
     });
@@ -360,7 +360,7 @@ describe('Paste HTML tables', () => {
             </tr>
         </tbody>
     </table><p>
-[]</p>`,
+[]<br></p>`,
             });
         });
     });
@@ -493,7 +493,7 @@ describe('Paste HTML tables', () => {
     </tbody></table><p>
 
 
-[]</p>`,
+[]<br></p>`,
             });
         });
     });

addons/web_editor/static/tests/banner_tests.js

@@ -0,0 +1,85 @@
+/** @odoo-module **/
+import { setSelection } from "@web_editor/js/editor/odoo-editor/src/utils/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+import { patchWithCleanup, nextTick } from "@web/../tests/helpers/utils";
+import { Wysiwyg } from "@web_editor/js/wysiwyg/wysiwyg";
+import {
+    triggerEvent,
+    insertText,
+} from "@web_editor/js/editor/odoo-editor/test/utils";
+
+function onMount() {;
+    const editor = wysiwyg.odooEditor;
+    const editable = editor.editable;
+    editor.testMode = true;
+    return { editor, editable };
+}
+
+let wysiwyg;
+
+QUnit.module(
+    "web_editor",
+    {
+        beforeEach: async function () {
+            const serverData = {
+                models: {
+                    note: {
+                        fields: {
+                            body: {
+                                string: "Editor",
+                                type: "html",
+                            },
+                        },
+                        records: [
+                            {
+                                id: 1,
+                                display_name: "first record",
+                                body: "<p><br></p>",
+                            },
+                        ],
+                    },
+                },
+            };
+            setupViewRegistries();
+            patchWithCleanup(Wysiwyg.prototype, {
+                init() {
+                    super.init(...arguments);
+                    wysiwyg = this;
+                },
+            });
+            await makeView({
+                type: "form",
+                serverData,
+                resModel: "note",
+                arch:
+                    "<form>" +
+                    '<field name="body" widget="html" style="height: 100px"/>' +
+                    "</form>",
+                resId: 1,
+            });
+        },
+    },
+    function () {
+
+        QUnit.module("insert a new banner");
+        QUnit.test("should insert a banner followed by a paragraph", async function (assert) {
+            const { editor, editable } = onMount();
+            const node = editable.querySelector("p");
+            setSelection(node, 0);
+            insertText(editor, "Test");
+            setSelection(node.firstChild, 3, node.firstChild, 3);
+            insertText(editor, '/banner');
+            triggerEvent(editor.editable, "keydown", { key: "Enter" });
+            await nextTick();
+            assert.strictEqual(
+                editable.innerHTML,
+                `<p>Test</p><div class="o_editor_banner o_not_editable lh-1 d-flex align-items-center alert alert-info pb-0 pt-3" role="status" data-oe-protected="true" contenteditable="false">
+                        <i class="fs-4 fa fa-info-circle mb-3" aria-label="Banner Info"></i>
+                        <div class="w-100 ms-3" data-oe-protected="false" contenteditable="true">
+                            <p placeholder=\"Type &quot;/&quot; for commands\" class=\"oe-hint oe-command-temporary-hint\"><br></p>
+                        </div>
+                    </div><p><br></p>`,
+            );
+        });
+    }
+);