interactions vs history

addons/html_builder/static/src/interactions/image_gallery.edit.js

@@ -9,10 +9,7 @@ export class ImageGalleryEdit extends Interaction {
         },
     };
     setup() {
-        const containerEl = this.el.querySelector(
-            ".container, .container-fluid, .o_container_small"
-        );
-        this.renderAt("html_builder.empty_image_gallery_alert", {}, containerEl);
+        this.renderAt("html_builder.empty_image_gallery_alert", {}, this.el);
     }
     onAddImage() {
         const applySpec = { editingElement: this.el };

addons/html_builder/static/src/interactions/image_gallery.edit.xml

@@ -2,9 +2,11 @@
 <templates xml:space="preserve">
 
 <t t-name="html_builder.empty_image_gallery_alert">
-    <div class="alert alert-info o_empty_gallery_alert text-center o_not_editable" contentEditable="false">
-        <i class="fa fa-plus-circle"/>
-        <span class="o_add_images"> Add Images</span>
+    <div class="container">
+	    <div class="alert alert-info o_empty_gallery_alert text-center o_not_editable" contentEditable="false">
+	        <i class="fa fa-plus-circle"/>
+	        <span class="o_add_images"> Add Images</span>
+	    </div>
     </div>
 </t>
 

addons/html_builder/static/src/website_builder/plugins/website_edit_service.js

@@ -1,6 +1,7 @@
 import { registry } from "@web/core/registry";
 import { PublicRoot } from "@web/legacy/js/public/public_root";
 import { Colibri } from "@web/public/colibri";
+import { Interaction } from "@web/public/interaction";
 import { patch } from "@web/core/utils/patch";
 
 export function buildEditableInteractions(builders) {
@@ -125,6 +126,18 @@ registry.category("services").add("website_edit", {
                     applyTOut(...args) {
                         historyCallbacks.ignoreDOMMutations(() => super.applyTOut(...args));
                     },
+                }),
+                patch(Interaction.prototype, {
+                    insert(...args) {
+                        const el = args[0];
+                        super.insert(...args);
+                        // Avoid deletion accidents.
+                        // E.g. if an interaction inserts a node into a parent
+                        // node, and an option uses replaceChildren on the
+                        // parent node, you do not want the inserted node to be
+                        // reinserted upon undo of the option's action.
+                        el.dataset.skipHistoryHack = "true";
+                    },
                 })
             );
         };

addons/html_editor/static/src/core/history_plugin.js

@@ -534,6 +534,21 @@ export class HistoryPlugin extends Plugin {
                 }
                 case "childList": {
                     record.addedNodes.forEach((added) => {
+                        // When nodes are expected to not be observed by the
+                        // history, e.g. because they belong to a distinct
+                        // lifecycle such as interactions, some operations such
+                        // as replaceChildren might impact such a node together
+                        // with observed ones.
+                        // Marking the node with skipHistoryHack makes sure that
+                        // it does not accidentally get observed during those
+                        // operations.
+                        // TODO Find a better solution.
+                        if (
+                            added?.dataset?.skipHistoryHack ||
+                            added?.closest?.("data-skip-history-hack")
+                        ) {
+                            return;
+                        }
                         const mutation = {
                             type: "add",
                         };
@@ -556,6 +571,13 @@ export class HistoryPlugin extends Plugin {
                         this.currentStep.mutations.push(mutation);
                     });
                     record.removedNodes.forEach((removed) => {
+                        // TODO Find a better solution.
+                        if (
+                            removed?.dataset?.skipHistoryHack ||
+                            removed?.closest?.("data-skip-history-hack")
+                        ) {
+                            return;
+                        }
                         this.currentStep.mutations.push({
                             type: "remove",
                             id: this.nodeToIdMap.get(removed),