From d72e471e5f367fde8744f3411b2db644d468c50c Mon Sep 17 00:00:00 2001
From: Rodolpho Lima <rcdl@odoo.com>
Date: Thu, 7 Sep 2023 18:14:41 +0200
Subject: [PATCH] [FIX] web_editor: extra history step on image paste

Before this commit, when pasting or dropping an image, the insertion of
the image element to the DOM and the addition of the
"o_b64_image_to_save" class to it were recorded in two separate history
steps. This commit makes sure they are both recorded in a single step.

Additionally, the dataset was removed from the image element by the
(unnecessary) call to _prepareClipboardData. This resulted in losing the
file name information, which is useful when converting the image into an
attachment.

Before this commit, the "width: 100%" addition to the image's style
attribute had no effect, as it was later removed by the call to
_prepareClipboardData. In fact, the class "img-fluid" sets "max-width"
to 100% instead, which is offers desirable behaviour.

task-3497880

closes odoo/odoo#134832

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
---
 .../js/editor/odoo-editor/src/OdooEditor.js   | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
index 26994bf0da7..1a66644a437 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
@@ -4630,15 +4630,22 @@ export class OdooEditor extends EventTarget {
         const promises = [];
         for (const imageFile of imageFiles) {
             const imageNode = document.createElement('img');
-            imageNode.style.width = '100%';
             imageNode.classList.add('img-fluid');
+            // Mark images as having to be saved as attachments.
+            if (this.options.dropImageAsAttachment) {
+                imageNode.classList.add('o_b64_image_to_save');
+            }
             imageNode.dataset.fileName = imageFile.name;
             promises.push(getImageUrl(imageFile).then(url => {
                 imageNode.src = url;
-                return imageNode.outerHTML;
+                return imageNode;
             }));
         }
-        return Promise.all(promises).then(html => html.join(''));
+        return Promise.all(promises).then(nodes => {
+            const fragment = document.createDocumentFragment();
+            fragment.append(...nodes);
+            return fragment;
+        });
     }
     /**
      * Handle safe pasting of html or plain text into the editor.
@@ -4676,13 +4683,7 @@ export class OdooEditor extends EventTarget {
             // the clipboard picture.
             if (files.length && !clipboardElem.querySelector('table')) {
                 this.addImagesFiles(files).then(html => {
-                    const imageNodes = this._applyCommand('insert', this._prepareClipboardData(html));
-                    if (imageNodes && this.options.dropImageAsAttachment) {
-                        // Mark images as having to be saved as attachments.
-                        for (const imageNode of imageNodes) {
-                            imageNode.classList.add('o_b64_image_to_save');
-                        }
-                    }
+                    this._applyCommand('insert', html);
                 });
             } else {
                 if (closestElement(sel.anchorNode, 'a')) {
@@ -4873,13 +4874,7 @@ export class OdooEditor extends EventTarget {
             this.execCommand('insert', this._prepareClipboardData(html));
         } else if (fileTransferItems.length) {
             this.addImagesFiles(fileTransferItems).then(html => {
-                const imageNodes = this.execCommand('insert', this._prepareClipboardData(html));
-                if (imageNodes && this.options.dropImageAsAttachment) {
-                    // Mark images as having to be saved as attachments.
-                    for (const imageNode of imageNodes) {
-                        imageNode.classList.add('o_b64_image_to_save');
-                    }
-                }
+                this.execCommand('insert', html);
             });
         } else if (htmlTransferItem) {
             htmlTransferItem.getAsString(pastedText => {