async useDomState

Author: Goaman

addons/html_builder/static/src/builder.js

@@ -92,7 +92,10 @@ export class Builder extends Component {
                         this.state.canRedo = this.editor.shared.history.canRedo();
                         this.updateInvisibleEls();
                         editorBus.trigger("UPDATE_EDITING_ELEMENT");
-                        editorBus.trigger("DOM_UPDATED");
+                        const getStatePromises = [];
+                        const { promise: updatePromise, resolve } = Promise.withResolvers();
+                        editorBus.trigger("DOM_UPDATED", { getStatePromises, updatePromise });
+                        Promise.all(getStatePromises).then(resolve);
                     }
                 },
                 reloadEditor: (param = {}) => {

addons/html_builder/static/src/core/utils.js

@@ -1,4 +1,5 @@
 import { isElement, isTextNode } from "@html_editor/utils/dom_info";
+import { on } from "@odoo/hoot-dom";
 import {
     Component,
     onMounted,
@@ -25,21 +26,18 @@ function isConnectedElement(el) {
 export function useDomState(getState, { checkEditingElement = true, onReady } = {}) {
     const env = useEnv();
     const isValid = (el) => (!el && !checkEditingElement) || isConnectedElement(el);
-    const handler = () => {
+    const handler = async (ev) => {
         const editingElement = env.getEditingElement();
         if (isValid(editingElement)) {
-            Object.assign(state, getState(editingElement));
+            const newStatePromise = getState(editingElement);
+            ev?.detail.getStatePromises.push(newStatePromise);
+            const newState = await newStatePromise;
+            await ev?.detail.updatePromise;
+            Object.assign(state, newState);
         }
     };
     const state = useState({});
-    if (onReady) {
-        onReady.then(() => {
-            handler();
-        });
-    } else {
-        handler();
-    }
-
+    onWillStart(() => (onReady ? onReady.then(() => handler()) : handler()));
     useBus(env.editorBus, "DOM_UPDATED", handler);
     return state;
 }

addons/html_builder/static/src/plugins/image/image_filter_option.js

@@ -1,7 +1,6 @@
 import { BaseOptionComponent, useDomState } from "@html_builder/core/utils";
 import { shouldPreventGifTransformation } from "@html_editor/main/media/image_post_process_plugin";
 import { loadImageInfo } from "@html_editor/utils/image_processing";
-import { KeepLast } from "@web/core/utils/concurrency";
 
 export class ImageFilterOption extends BaseOptionComponent {
     static template = "html_builder.ImageFilterOption";
@@ -13,22 +12,14 @@ export class ImageFilterOption extends BaseOptionComponent {
     };
     setup() {
         super.setup();
-        const keepLast = new KeepLast();
-        this.state = useDomState((editingElement) => {
-            keepLast
-                .add(
-                    loadImageInfo(editingElement).then((data) => ({
-                        ...editingElement.dataset,
-                        ...data,
-                    }))
-                )
-                .then((data) => {
-                    this.state.showFilter =
-                        data.mimetypeBeforeConversion && !shouldPreventGifTransformation(data);
-                });
+        this.state = useDomState(async (editingElement) => {
+            const data = await loadImageInfo(editingElement).then((data) => ({
+                ...editingElement.dataset,
+                ...data,
+            }));
             return {
                 isCustomFilter: editingElement.dataset.glFilter === "custom",
-                showFilter: false,
+                showFilter: data.mimetypeBeforeConversion && !shouldPreventGifTransformation(data),
             };
         });
     }

addons/html_builder/static/src/plugins/image/image_format_option.js

@@ -1,5 +1,4 @@
 import { BaseOptionComponent, useDomState } from "@html_builder/core/utils";
-import { KeepLast } from "@web/core/utils/concurrency";
 import { getImageSrc, getMimetype } from "@html_editor/utils/image";
 import { clamp } from "@web/core/utils/numbers";
 
@@ -15,22 +14,15 @@ export class ImageFormatOption extends BaseOptionComponent {
     MAX_SUGGESTED_WIDTH = 1920;
     setup() {
         super.setup();
-        const keepLast = new KeepLast();
-        this.state = useDomState((editingElement) => {
-            keepLast
-                .add(
-                    this.env.editor.shared.imageFormatOption.computeAvailableFormats(
-                        editingElement,
-                        this.computeMaxDisplayWidth.bind(this)
-                    )
-                )
-                .then((formats) => {
-                    const hasSrc = !!getImageSrc(editingElement);
-                    this.state.formats = hasSrc ? formats : [];
-                });
+        this.state = useDomState(async (editingElement) => {
+            const formats = await this.env.editor.shared.imageFormatOption.computeAvailableFormats(
+                editingElement,
+                this.computeMaxDisplayWidth.bind(this)
+            );
+            const hasSrc = !!getImageSrc(editingElement);
             return {
                 showQuality: ["image/jpeg", "image/webp"].includes(getMimetype(editingElement)),
-                formats: [],
+                formats: hasSrc ? formats : [],
             };
         });
     }

addons/html_builder/static/src/plugins/image/image_tool_option_plugin.js

@@ -1,4 +1,8 @@
-import { cropperDataFieldsWithAspectRatio, isGif } from "@html_editor/utils/image_processing";
+import {
+    cropperDataFieldsWithAspectRatio,
+    isGif,
+    loadImageInfo,
+} from "@html_editor/utils/image_processing";
 import { registry } from "@web/core/registry";
 import { Plugin } from "@html_editor/plugin";
 import { ImageToolOption } from "./image_tool_option";
@@ -192,11 +196,12 @@ class ImageToolOptionPlugin extends Plugin {
         };
     }
     async canHaveHoverEffect(img) {
+        const getDataset = async () => Object.assign({}, img.dataset, await loadImageInfo(img));
         return (
             img.tagName === "IMG" &&
             !this.isDeviceShape(img) &&
             !this.isAnimatedShape(img) &&
-            this.isImageSupportedForShapes(img) &&
+            this.isImageSupportedForShapes(img, await getDataset()) &&
             !(await isImageCorsProtected(img))
         );
     }
@@ -212,8 +217,8 @@ class ImageToolOptionPlugin extends Plugin {
         // todo: to implement while implementing the animated shapes
         return false;
     }
-    isImageSupportedForShapes(img) {
-        return img.dataset.originalId && isImageSupportedForProcessing(getMimetype(img));
+    isImageSupportedForShapes(img, dataset = img.dataset) {
+        return dataset.originalId && isImageSupportedForProcessing(getMimetype(img));
     }
 }
 registry.category("website-plugins").add(ImageToolOptionPlugin.id, ImageToolOptionPlugin);

addons/html_builder/static/src/website_builder/plugins/options/animate_option.js

@@ -1,4 +1,3 @@
-import { KeepLast } from "@web/core/utils/concurrency";
 import { BaseOptionComponent, useDomState } from "@html_builder/core/utils";
 import { isImageSupportedForStyle } from "@html_builder/plugins/image/replace_media_option";
 
@@ -12,19 +11,15 @@ export class AnimateOption extends BaseOptionComponent {
 
     setup() {
         super.setup();
-        const keeplast = new KeepLast();
-        this.state = useDomState((editingElement) => {
+        this.state = useDomState(async (editingElement) => {
             const hasAnimateClass = editingElement.classList.contains("o_animate");
 
-            // todo: maybe add a spinner
-            keeplast.add(this.props.canHaveHoverEffect(editingElement)).then((result) => {
-                this.state.canHover = result;
-            });
+            const canHover = await this.props.canHaveHoverEffect(editingElement);
 
             return {
                 isOptionActive: this.isOptionActive(editingElement),
                 hasAnimateClass: hasAnimateClass,
-                canHover: false,
+                canHover,
                 isLimitedEffect: this.limitedEffects.some((className) =>
                     editingElement.classList.contains(className)
                 ),

addons/html_editor/static/src/utils/image.js

@@ -35,12 +35,12 @@ export function backgroundImagePartsToCss(parts) {
  * @param {HTMLImageElement} image
  * @returns {string|null} The mimetype of the image.
  */
-export function getMimetype(image) {
+export function getMimetype(image, dataset = image.dataset) {
     const src = getImageSrc(image);
 
     return (
-        image.dataset.mimetype ||
-        image.dataset.mimetypeBeforeConversion ||
+        dataset.mimetype ||
+        dataset.mimetypeBeforeConversion ||
         (src &&
             ((src.endsWith(".png") && "image/png") ||
                 (src.endsWith(".webp") && "image/webp") ||