diff --git a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js index 84240e2b20f..c5f81257252 100644 --- a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js +++ b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js @@ -80,7 +80,8 @@ export class WysiwygAdapterComponent extends Wysiwyg { this.oeStructureSelector = '#wrapwrap .oe_structure[data-oe-xpath][data-oe-id]'; this.oeFieldSelector = '#wrapwrap [data-oe-field]:not([data-oe-sanitize-prevent-edition])'; - this.oeCoverSelector = '#wrapwrap .s_cover[data-res-model], #wrapwrap .o_record_cover_container[data-res-model]'; + this.oeRecordCoverSelector = "#wrapwrap .o_record_cover_container[data-res-model]"; + this.oeCoverSelector = `#wrapwrap .s_cover[data-res-model], ${this.oeRecordCoverSelector}`; if (this.props.savableSelector) { this.savableSelector = this.props.savableSelector; } else { @@ -473,7 +474,13 @@ export class WysiwygAdapterComponent extends Wysiwyg { .not('input, [data-oe-readonly], ' + '[data-oe-type="monetary"], [data-oe-many2one-id], [data-oe-field="arch"]:empty') .filter((_, el) => { - return !$(el).closest('.o_not_editable').length; + // The whole record cover is considered editable by the editor, + // which makes it possible to add content (text, images,...) + // from the text tools. To fix this issue, we need to reduce the + // editable area to its editable fields only, but first, we need + // to remove the cover along with its descendants from the + // initial editable zones. + return !$(el).closest('.o_not_editable').length && !el.closest(this.oeRecordCoverSelector); }); // TODO migrate in master. This stable fix restores the possibility to @@ -499,7 +506,8 @@ export class WysiwygAdapterComponent extends Wysiwyg { // oe_structure editable. This avoids having a selection range span // over all further inactive tabs when using Chrome. // grep: .s_tabs - $extraEditableZones = $extraEditableZones.add($editableSavableZones.find('.tab-pane > .oe_structure')); + $extraEditableZones = $extraEditableZones.add($editableSavableZones.find('.tab-pane > .oe_structure')) + .add(this.websiteService.pageDocument.querySelectorAll(`${this.oeRecordCoverSelector} [data-oe-field]:not([data-oe-field="arch"])`)); return $editableSavableZones.add($extraEditableZones).toArray(); }