[SPEC CHANGE] Make column hints permanent

odoo-dev · Feb 20, 2024 · 9cdd0fd · 9cdd0fd
1 parent 9f5b742
commit 9cdd0fd
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 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
@@ -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
@@ -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 */
         });
     });