[FIX] html_editor: remove forced image dimensions on edit

Problem:
When resized images (e.g., with `style.width: 50%`) are processed by
`convert_inline`, `width` and `height` attributes may be added for
email client compatibility.

These attributes override resizing changes, forcing the last saved
dimensions and preventing fallback to the image's default size.

Solution:
Remove `width` and `height` attributes from the content inserted into
the editor. They will be correctly re-applied on save if needed.

Steps to reproduce:
- Create a new email template
- Add an image
- Resize the image to 100%
- Save
- Resize the image back to default
- The image keeps the 100% size

opw-4863515

closes odoo#213786

Signed-off-by: David Monjoie (dmo) <[email protected]>

Author: walidsahli

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

@@ -15,6 +15,19 @@ export function initElementForEdition(element, options = {}) {
             baseContainerNodeName: "DIV",
         });
     }
+
+    // During `convert_inline`, image elements may receive `width` and `height` attributes,
+    // along with inline styles. These attributes force specific dimensions, which breaks
+    // the fallback to default sizing. We remove them here to allow proper resizing behavior.
+    // The attributes will be re-applied on save.
+    for (const img of element.querySelectorAll("img[width], img[height]")) {
+        const width = img.getAttribute("width");
+        const height = img.getAttribute("height");
+        img.removeAttribute("height");
+        img.removeAttribute("width");
+        img.style.setProperty("width", width);
+        img.style.setProperty("height", height);
+    }
 }
 
 /**

addons/html_editor/static/tests/editor.test.js

@@ -137,3 +137,14 @@ test("Convert self closing t elements to opening/closing tags", async () => {
         '<div> <t t-out="object.partner_id" data-oe-t-inline="true" contenteditable="false"></t> </div>'
     );
 });
+
+test("Remove `width`, `height` attributes from image and apply them to style", async () => {
+    const { el } = await setupEditor(`
+        <div>
+            <img src="#" width="50%" height="50%">
+        </div>
+    `);
+    expect(el.innerHTML.trim().replace(/\s+/g, " ")).toBe(
+        `<div class="o-paragraph"> <img src="#" style="width: 50%; height: 50%;"> </div>`
+    );
+});