Just an idea

Author: FrancoisGe

addons/html_builder/static/src/plugins/carousel_option_plugin.js

@@ -24,24 +24,21 @@ export class CarouselOptionPlugin extends Plugin {
     getActions() {
         return {
             addSlide: {
-                apply: ({ editingElement }) =>
-                    new Promise((resolve) => {
-                        resolve(this.addSlide(editingElement));
-                    }),
+                load: ({ editingElement }) => this.addSlide(editingElement),
+                apply: ({ loadResult: toApply }) => toApply(),
             },
             slideCarousel: {
-                apply: async ({ editingElement, direction }) => {
-                    await this.slide(direction, editingElement);
-                },
+                load: ({ editingElement, direction }) => this.slide(direction, editingElement),
+                apply: ({ loadResult: toApply }) => toApply(),
             },
         };
     }
 
-    addSlide(editingElement) {
+    async addSlide(editingElement) {
         const activeCarouselItem = editingElement.querySelector(".carousel-item.active");
         this.dependencies.clone.cloneElement(activeCarouselItem);
-
-        return this.slide("next", editingElement);
+        const toApply = await this.slide("next", editingElement);
+        return toApply;
     }
 
     /**
@@ -65,28 +62,36 @@ export class CarouselOptionPlugin extends Plugin {
         );
 
         return new Promise((resolve) => {
-            editingElement.addEventListener("slid.bs.carousel", () => {
-                // slid.bs.carousel is most of the time fired too soon by bootstrap
-                // since it emulates the transitionEnd with a setTimeout. We wait
-                // here an extra 20% of the time before retargeting edition, which
-                // should be enough...
-                const slideDuration = window.performance.now() - this.slideTimestamp;
-                setTimeout(() => {
-                    // Setting the active indicator manually, as Bootstrap could
-                    // not do it because the `data-bs-slide-to` attribute is not
-                    // here in edit mode anymore.
-                    const activeSlide = editingElement.querySelector(".carousel-item.active");
-                    const indicatorsEl = editingElement.querySelector(".carousel-indicators");
-                    const activeIndex = [...activeSlide.parentElement.children].indexOf(
-                        activeSlide
-                    );
-                    const activeIndicatorEl = [...indicatorsEl.children][activeIndex];
-                    activeIndicatorEl.classList.add("active");
-                    activeIndicatorEl.setAttribute("aria-current", "true");
-
-                    resolve();
-                }, 0.2 * slideDuration);
-            });
+            editingElement.addEventListener(
+                "slid.bs.carousel",
+                () => {
+                    // slid.bs.carousel is most of the time fired too soon by bootstrap
+                    // since it emulates the transitionEnd with a setTimeout. We wait
+                    // here an extra 20% of the time before retargeting edition, which
+                    // should be enough...
+                    const slideDuration = window.performance.now() - this.slideTimestamp;
+                    setTimeout(() => {
+                        const toApply = () => {
+                            // Setting the active indicator manually, as Bootstrap could
+                            // not do it because the `data-bs-slide-to` attribute is not
+                            // here in edit mode anymore.
+                            const activeSlide =
+                                editingElement.querySelector(".carousel-item.active");
+                            const indicatorsEl =
+                                editingElement.querySelector(".carousel-indicators");
+                            const activeIndex = [...activeSlide.parentElement.children].indexOf(
+                                activeSlide
+                            );
+                            const activeIndicatorEl = [...indicatorsEl.children][activeIndex];
+                            activeIndicatorEl.classList.add("active");
+                            activeIndicatorEl.setAttribute("aria-current", "true");
+                        };
+
+                        resolve(toApply);
+                    }, 0.2 * slideDuration);
+                },
+                { once: true }
+            );
 
             // rewrite the jquery interface in carousel.js
             const carouselInstance = window.Carousel.getOrCreateInstance(editingElement);