From 9cdd0fd06e3426cfc148cd3942a4d3c1081ae768 Mon Sep 17 00:00:00 2001
From: Rodolpho Lima <rcdl@odoo.com>
Date: Fri, 16 Feb 2024 19:32:06 +0100
Subject: [PATCH] [SPEC CHANGE] Make column hints permanent

---
 .../static/src/editor/column/column_plugin.js | 27 +++-------
 .../static/tests/editor/columnize.test.js     | 50 ++++++++++++++++++-
 2 files changed, 54 insertions(+), 23 deletions(-)

diff --git a/addons/html_editor/static/src/editor/column/column_plugin.js b/addons/html_editor/static/src/editor/column/column_plugin.js
index 20a3bef9e1675..a629c4d38a875 100644
--- a/addons/html_editor/static/src/editor/column/column_plugin.js
+++ b/addons/html_editor/static/src/editor/column/column_plugin.js
@@ -3,29 +3,14 @@ import { registry } from "@web/core/registry";
 import { Plugin } from "../plugin";
 import { closestBlock } from "../utils/blocks";
 import { unwrapContents } from "../utils/dom";
-import { isEmpty } from "../utils/dom_info";
 import { closestElement } from "../utils/dom_traversal";
 
 const REGEX_BOOTSTRAP_COLUMN = /(?:^| )col(-[a-zA-Z]+)?(-\d+)?(?:$| )/;
 
-// @todo @phoenix: the powerbox plugin puts a hint first on the empty paragraph,
-// this currently has no effect
-function targetForHint(selection) {
-    let node = selection.anchorNode;
-    if (node.nodeType === Node.TEXT_NODE) {
-        node = node.parentElement;
-    }
-    return node.matches(".o_text_columns p") && isEmpty(node) && node;
-}
-
 export class ColumnPlugin extends Plugin {
     static name = "column";
     static dependencies = ["selection"];
     static resources = () => ({
-        temp_hints: {
-            text: "New column...",
-            target: targetForHint,
-        },
         powerboxCommands: [
             {
                 name: _t("2 columns"),
@@ -64,6 +49,12 @@ export class ColumnPlugin extends Plugin {
                 },
             },
         ],
+        emptyBlockHints: [
+            {
+                selector: ".odoo-editor-editable .o_text_columns p:first-child",
+                hint: _t("Empty column"),
+            },
+        ],
     });
 
     handleCommand(command, payload) {
@@ -130,9 +121,6 @@ export class ColumnPlugin extends Plugin {
         for (const column of columns) {
             const p = this.document.createElement("p");
             p.append(this.document.createElement("br"));
-            // @todo @phoenix: move this to hint plugin
-            // p.classList.add("oe-hint");
-            // p.setAttribute("placeholder", "New column...");
             column.append(p);
         }
         if (addParagraphAfter) {
@@ -164,9 +152,6 @@ export class ColumnPlugin extends Plugin {
                 column.classList.add(`col-${columnSize}`);
                 const p = this.document.createElement("p");
                 p.append(this.document.createElement("br"));
-                // @todo @phoenix: move this to hint plugin
-                // p.classList.add("oe-hint");
-                // p.setAttribute("placeholder", "New column...");
                 column.append(p);
                 lastColumn.after(column);
                 lastColumn = column;
diff --git a/addons/html_editor/static/tests/editor/columnize.test.js b/addons/html_editor/static/tests/editor/columnize.test.js
index abff38f1e5be9..7e45041c5dc76 100644
--- a/addons/html_editor/static/tests/editor/columnize.test.js
+++ b/addons/html_editor/static/tests/editor/columnize.test.js
@@ -16,6 +16,23 @@ function columnize(numberOfColumns) {
 }
 
 describe("2 columns", () => {
+    test("should display hint for empty columns", async () => {
+        await testEditor({
+            /* eslint-disable prettier/prettier */
+            contentBefore:
+                columnsContainer(
+                    column(6, "<p>[]<br></p>") +
+                    column(6, "<p><br></p>")
+                ),
+            contentAfterEdit:
+                columnsContainer(
+                    column(6, `<p placeholder="Empty column" class="o-we-hint">[]<br></p>`) +
+                    column(6, `<p placeholder="Empty column" class="o-we-hint"><br></p>`)
+                ),
+            /* eslint-enable prettier/prettier */
+        });
+    });
+
     test("should do nothing", async () => {
         await testEditor({
             contentBefore: columnsContainer(
@@ -32,9 +49,20 @@ describe("2 columns", () => {
         await testEditor({
             contentBefore: "<p>[]abcd</p>",
             stepFunction: columnize(2),
+            contentAfterEdit:
+            /* eslint-disable prettier/prettier */
+                columnsContainer(
+                    column(6, "<p>[]abcd</p>") +
+                    column(6, `<p placeholder="Empty column" class="o-we-hint"><br></p>`)
+                ) +
+                "<p><br></p>",
             contentAfter:
-                columnsContainer(column(6, "<p>[]abcd</p>") + column(6, "<p><br></p>")) +
+                columnsContainer(
+                    column(6, "<p>[]abcd</p>") +
+                    column(6, "<p><br></p>")
+                ) +
                 "<p><br></p>",
+            /* eslint-enable prettier/prettier */
         });
     });
 
@@ -73,6 +101,14 @@ describe("3 columns", () => {
             contentBefore: columnsContainer(
                 column(4, "<p>abcd</p>") + column(4, "<p><br></p>") + column(4, "<p>[]<br></p>")
             ),
+            /* eslint-disable prettier/prettier */
+            contentBeforeEdit:
+                columnsContainer(
+                    column(4, "<p>abcd</p>") +
+                    column(4, `<p placeholder="Empty column" class="o-we-hint"><br></p>`) +
+                    column(4, `<p placeholder="Empty column" class="o-we-hint">[]<br></p>`)
+                ),
+            /* eslint-enable prettier/prettier */
             stepFunction: columnize(3),
             contentAfter: columnsContainer(
                 column(4, "<p>abcd</p>") + column(4, "<p><br></p>") + column(4, "<p>[]<br></p>")
@@ -84,10 +120,20 @@ describe("3 columns", () => {
         await testEditor({
             contentBefore: "<p>ab[]cd</p>",
             stepFunction: columnize(3),
+            /* eslint-disable prettier/prettier */
+            contentAfterEdit:
+                columnsContainer(
+                    column(4, "<p>ab[]cd</p>") +
+                    column(4, `<p placeholder="Empty column" class="o-we-hint"><br></p>`) +
+                    column(4, `<p placeholder="Empty column" class="o-we-hint"><br></p>`)
+                ) + "<p><br></p>",
             contentAfter:
                 columnsContainer(
-                    column(4, "<p>ab[]cd</p>") + column(4, "<p><br></p>") + column(4, "<p><br></p>")
+                    column(4, "<p>ab[]cd</p>") +
+                    column(4, "<p><br></p>") +
+                    column(4, "<p><br></p>")
                 ) + "<p><br></p>",
+            /* eslint-enable prettier/prettier */
         });
     });