From 0f84b3aed7b9bbd0edde23c28c12e179b46544bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souk=C3=A9ina=20Bojabza?= <sobo@odoo.com>
Date: Mon, 15 May 2023 11:23:44 +0000
Subject: [PATCH] [FIX] web_editor: allow to delete/replace text after toggle
 to grid mode

When toggling a snippet to grid mode, if it has None columns (e.g. Text)
or if it has contents located outside of the row element (e.g. Picture),
the contents are wrapped inside a column and then put inside the row.
However, after this operation, it is impossible to delete or replace the
text in this newly created column.

As mentioned in commit [1], this happens because there is an unwanted
rollback in the history, which should be prevented by resetting the
nodes unbreakable id (i.e. the `ouid` property).

This commit makes this property reset and therefore allows to delete or
replace the text after the toggle to grid mode.

[1]: https://github.com/odoo/odoo/commit/e33b802b05b41df20e13ebc44bc5b78edae50bb8

task-3324775

X-original-commit: 5bd354802a9aae9575806ad83350e0b002efa2fa
Part-of: odoo/odoo#124513
---
 .../static/src/js/common/grid_layout_utils.js          | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/addons/web_editor/static/src/js/common/grid_layout_utils.js b/addons/web_editor/static/src/js/common/grid_layout_utils.js
index 7878f22ea16..b4e35092ceb 100644
--- a/addons/web_editor/static/src/js/common/grid_layout_utils.js
+++ b/addons/web_editor/static/src/js/common/grid_layout_utils.js
@@ -2,6 +2,7 @@
 'use strict';
 
 import {qweb} from 'web.core';
+import {descendants} from "@web_editor/js/editor/odoo-editor/src/utils/utils";
 const rowSize = 50; // 50px.
 // Maximum number of rows that can be added when dragging a grid item.
 export const additionalRowLimit = 10;
@@ -84,6 +85,13 @@ export function _gridCleanUp(rowEl, columnEl) {
  */
 export function _toggleGridMode(containerEl) {
     let rowEl = containerEl.querySelector(':scope > .row');
+    // Avoid an unwanted rollback that prevents from deleting the text.
+    const avoidRollback = (el) => {
+        for (const node of descendants(el)) {
+            node.ouid = undefined;
+        }
+    };
+
     // For the snippets having elements outside of the row (and therefore not in
     // a column), create a column and put these elements in it so they can also
     // be placed in the grid.
@@ -94,6 +102,7 @@ export function _toggleGridMode(containerEl) {
         for (let i = outOfRowEls.length - 1; i >= 0; i--) {
             columnEl.prepend(outOfRowEls[i]);
         }
+        avoidRollback(columnEl);
         rowEl.prepend(columnEl);
     }
 
@@ -111,6 +120,7 @@ export function _toggleGridMode(containerEl) {
         for (let i = containerChildren.length - 1; i >= 0; i--) {
             columnEl.prepend(containerChildren[i]);
         }
+        avoidRollback(columnEl);
         rowEl.appendChild(columnEl);
         containerEl.appendChild(rowEl);
     }