[FIX] web_editor: fix background-image urls becoming absolute on drop

With the recent addition of the parallax option on all snippets,
background-image urls were being converted from relative to absolute on
snippet-drop. This was caused by trying to read the background-image's
url and setting it back onto the target, but there is no way to reliably
read a background-image url in relative form, so it was returned in
absolute form and then written back to the element as is.

This commit fixes that by always converting the absolute URL to relative
when they are on the same origin as the database.

task-2312878

closes odoo/odoo#59113

X-original-commit: 7558dcce791f707e3f3470835133f91ec7ff074f
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/web_editor/static/src/js/common/utils.js

@@ -224,6 +224,11 @@ function _getBgImageURL(el) {
     if (!match) {
         return '';
     }
+    const fullURL = new URL(match[2]);
+    // Make URL relative if possible
+    if (fullURL.origin === window.location.origin) {
+        return fullURL.href.slice(fullURL.origin.length);
+    }
     return match[2];
 }
 

addons/web_editor/static/src/js/editor/snippets.options.js

@@ -3420,9 +3420,9 @@ registry.BackgroundOptimize = ImageHandlerOption.extend({
         Object.entries(this.$target[0].dataset).forEach(([key, value]) => {
             this.img.dataset[key] = value;
         });
-        const src = new URL(getBgImageURL(this.$target[0]), window.location.origin);
-        // Make URL relative because that is how image urls are stored in the database.
-        this.img.src = src.origin === window.location.origin && src.pathname;
+        const src = getBgImageURL(this.$target[0]);
+        // Don't set the src if not relative (ie, not local image: cannot be modified)
+        this.img.src = src.startsWith('/') ? src : '';
         return await this._super(...arguments);
     },