diff --git a/addons/mass_mailing/static/src/js/mass_mailing_html_field.js b/addons/mass_mailing/static/src/js/mass_mailing_html_field.js
index 488cb379b96..433a192ecca 100644
--- a/addons/mass_mailing/static/src/js/mass_mailing_html_field.js
+++ b/addons/mass_mailing/static/src/js/mass_mailing_html_field.js
@@ -4,7 +4,7 @@ import { registry } from "@web/core/registry";
 import { _lt } from "@web/core/l10n/translation";
 import { standardFieldProps } from "@web/views/fields/standard_field_props";
 import { initializeDesignTabCss } from "mass_mailing.design_constants";
-import { toInline } from "web_editor.convertInline";
+import { toInline, getCSSRules } from "web_editor.convertInline";
 import { loadBundle, loadJS } from "@web/core/assets";
 import { qweb } from 'web.core';
 import { useService } from "@web/core/utils/hooks";
@@ -97,7 +97,7 @@ export class MassMailingHtmlField extends HtmlField {
         }
 
         const $editable = this.wysiwyg.getEditable();
-        const initialHtml = $editable.html();
+        this.wysiwyg.odooEditor.historyPauseSteps();
         await this.wysiwyg.cleanForSave();
         await this.wysiwyg.savePendingImages(this.$content);
 
@@ -107,11 +107,31 @@ export class MassMailingHtmlField extends HtmlField {
         $editorEnable.removeClass('editor_enable');
         // Prevent history reverts.
         this.wysiwyg.odooEditor.observerUnactive('toInline');
-        await toInline($editable, this.cssRules, this.wysiwyg.$iframe);
+        const iframe = document.createElement('iframe');
+        iframe.style.height = '0px';
+        iframe.style.visibility = 'hidden';
+        const clonedHtmlNode = $editable[0].closest('html').cloneNode(true);
+        // Replace the body to only contain the target as we do not care for
+        // other elements (e.g. sidebar, toolbar, ...)
+        const clonedBody = clonedHtmlNode.querySelector('body');
+        const clonedIframeTarget = clonedHtmlNode.querySelector('#iframe_target');
+        clonedBody.replaceChildren(clonedIframeTarget);
+        const editableClone = clonedHtmlNode.querySelector('.note-editable');
+        const iframePromise = new Promise((resolve) => {
+            iframe.addEventListener("load", resolve);
+        });
+        document.body.append(iframe);
+        iframe.contentDocument.firstChild.replaceWith(clonedHtmlNode);
+        // Wait for the css and images to be loaded.
+        await iframePromise;
+        this.cssRules = this.cssRules || getCSSRules($editable[0].ownerDocument);
+        await toInline($(editableClone), this.cssRules, $(iframe));
+        iframe.remove();
         this.wysiwyg.odooEditor.observerActive('toInline');
-        const inlineHtml = $editable.html();
+        const inlineHtml = editableClone.innerHTML;
         $editorEnable.addClass('editor_enable');
-        this.wysiwyg.odooEditor.resetContent(initialHtml);
+        this.wysiwyg.odooEditor.historyUnpauseSteps();
+        this.wysiwyg.odooEditor.historyRevertCurrentStep();
 
         const fieldName = this.props.inlineField;
         return this.props.record.update({[fieldName]: this._unWrap(inlineHtml)});