add image size tag in image option header

Author: emge-odoo

addons/website/static/src/builder/plugins/image/image_size_tag.js

@@ -0,0 +1,23 @@
+import { Component, onWillStart, useState } from "@odoo/owl";
+import { useDomState } from "@html_builder/core/utils";
+import { loadImageDataURL, getImageSizeFromCache } from "@html_editor/utils/image_processing";
+import { KeepLast } from "@web/core/utils/concurrency";
+
+export class ImageSizeTag extends Component {
+    static template = "website.ImageSizeTag";
+    setup() {
+        this.keepLast = new KeepLast();
+        this.state = useState({ size: 0 });
+        useDomState((imageEl) => this.updateImageSize(imageEl));
+        onWillStart(() => this.updateImageSize(this.env.getEditingElement()));
+    }
+
+    async updateImageSize(imageEl) {
+        if (imageEl !== this.env.getEditingElement()) {
+            return;
+        }
+        const src = imageEl.src;
+        await this.keepLast.add(loadImageDataURL(src));
+        this.state.size = Math.round((getImageSizeFromCache(src) / 1024) * 10) / 10;
+    }
+}

addons/website/static/src/builder/plugins/image/image_size_tag.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="website.ImageSizeTag">
+        <span class="badge text-bg-dark" title="Size"><t t-out="state.size"/> kB</span>
+    </t>
+</templates>

addons/website/static/src/builder/plugins/image/image_tool_option_plugin.js

@@ -10,6 +10,7 @@ import {
     ALIGNMENT_STYLE_PADDING,
 } from "@html_builder/utils/option_sequence";
 import { ReplaceMediaOption, searchSupportedParentLinkEl } from "./replace_media_option";
+import { ImageSizeTag } from "./image_size_tag";
 
 export const REPLACE_MEDIA_SELECTOR = "img, .media_iframe_video, span.fa, i.fa";
 export const REPLACE_MEDIA_EXCLUDE =
@@ -27,6 +28,10 @@ class ImageToolOptionPlugin extends Plugin {
     ];
     static shared = ["canHaveHoverEffect"];
     resources = {
+        builder_header_middle_buttons: {
+            Component: ImageSizeTag,
+            selector: "img",
+        },
         builder_options: [
             withSequence(REPLACE_MEDIA, {
                 OptionComponent: ReplaceMediaOption,