From a015f17ce6ce07afeb86f7594c7c294c973bba61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souk=C3=A9ina=20Bojabza?= Date: Tue, 23 Jan 2024 14:44:10 +0100 Subject: [PATCH] [FIX] web_editor: prevent recording the `o_draggable` class changes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Since commit [1], which removed jQueryUI for the drag and drop, the history when editing breaks easily. Steps to reproduce: - Drag and drop "Text-Image", save and go back to edit mode. - Click on a column, move it to the right using the arrow and then to the left, still with the arrow. - Undo: no issue, the column went to the right. - Undo: nothing changed => the column should have gone to the left. - Undo: the column goes to the left => there should not be a third undo since we only did two changes.  - Redo: no issue, the column goes to right. - Redo: nothing changed => the column should have gone to the left. - Nothing to redo anymore => the column never goes to the left again. This happens because with the new drag and drop, an `o_draggable` class is added on the elements when their editor are started, which adds mutations in the history. Even though it does not explicitely add a step, these mutations are well reverted when undoing/redoing (e.g. this is what happens when nothing changes in the steps to reproduce). This commit fixes this history issue by ignoring the mutations linked to the `o_draggable` class. Note that commit [2] already fixed other `o_draggable` class issues. This commit therefore fixes them in a more general way. [1]: https://github.com/odoo/odoo/commit/7594d71ca8610d5947e80f325ccb57abc23c2c76 [2]: https://github.com/odoo/odoo/commit/32a6729dd094d53eb4a653ebb9d69d2b8cbe2390 task-3698536 closes odoo/odoo#150687 Signed-off-by: Guillaume Dieleman (gdi) --- addons/web_editor/static/src/js/editor/snippets.editor.js | 2 -- addons/web_editor/static/src/js/wysiwyg/wysiwyg.js | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js index 768262acfcf..fd185a1118a 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -120,10 +120,8 @@ var SnippetEditor = Widget.extend({ // _initDragAndDrop function. So adding it here is probably // useless. To check. The fact that that class is added in any // case should probably reviewed in master anyway (TODO). - this.options.wysiwyg.odooEditor.observerUnactive('image_drag_and_drop'); this.$target[0].classList.add("o_draggable"); this.draggableComponentImgs = this._initDragAndDrop("img", ".o_draggable", this.$target[0]); - this.options.wysiwyg.odooEditor.observerActive('image_drag_and_drop'); } } else { this.$('.o_overlay_move_options').addClass('d-none'); diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js index 1e272349f08..619979b01ed 100644 --- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js +++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js @@ -486,7 +486,7 @@ export class Wysiwyg extends Component { plugins: options.editorPlugins, direction: options.direction || localization.direction || 'ltr', collaborationClientAvatarUrl: this._getCollaborationClientAvatarUrl(), - renderingClasses: ['o_dirty', 'o_transform_removal', 'oe_edited_link', 'o_menu_loading'], + renderingClasses: ["o_dirty", "o_transform_removal", "oe_edited_link", "o_menu_loading", "o_draggable"], dropImageAsAttachment: options.dropImageAsAttachment, foldSnippets: !!options.foldSnippets, useResponsiveFontSizes: options.useResponsiveFontSizes,