[IMP] html_editor: automatic checklist detection

Purpose:

This commit implement the automatic checklist detection feature. User can
now easily generate checklist by typing '[]' followed by a space.

task-4002195

closes odoo#174999

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>

Author: dhba-odoo

addons/html_editor/static/src/main/list/list_plugin.js

@@ -144,8 +144,9 @@ export class ListPlugin extends Plugin {
         const stringToConvert = blockEl.textContent.substring(0, selection.anchorOffset);
         const shouldCreateNumberList = /^(?:[1aA])[.)]\s$/.test(stringToConvert);
         const shouldCreateBulletList = /^[-*]\s$/.test(stringToConvert);
+        const shouldCreateCheckList = /^\[\]\s$/.test(stringToConvert);
         if (
-            (shouldCreateNumberList || shouldCreateBulletList) &&
+            (shouldCreateNumberList || shouldCreateBulletList || shouldCreateCheckList) &&
             !closestElement(selection.anchorNode, "li")
         ) {
             this.shared.setSelection({
@@ -173,6 +174,8 @@ export class ListPlugin extends Plugin {
                 }
             } else if (shouldCreateBulletList) {
                 this.toggleList("UL");
+            } else if (shouldCreateCheckList) {
+                this.toggleList("CL");
             }
             this.dispatch("ADD_STEP");
         }

addons/html_editor/static/tests/list/automatic_list_detection.test.js

@@ -143,6 +143,34 @@ test("should convert a bullet list into a numbered list", async () => {
     expect(getContent(el)).toBe(`<ol><li placeholder="List" class="o-we-hint">[]<br></li></ol>`);
 });
 
+test("typing '[] ' should create checklist and restore the original text when undo", async () => {
+    const { el, editor } = await setupEditor("<p>[]</p>");
+    insertText(editor, "[] ");
+    expect(getContent(el)).toBe(
+        `<ul class="o_checklist"><li placeholder="List" class="o-we-hint">[]<br></li></ul>`
+    );
+
+    editor.dispatch("HISTORY_UNDO");
+    expect(getContent(el)).toBe(`<p>\[\] []</p>`);
+});
+
+test("Typing '[] ' at the start of existing text should create a checklist and restore the original text when undo", async () => {
+    const { el, editor } = await setupEditor("<p>[]abc</p>");
+    insertText(editor, "[] ");
+    expect(getContent(el)).toBe(`<ul class="o_checklist"><li>[]abc</li></ul>`);
+
+    editor.dispatch("HISTORY_UNDO");
+    expect(getContent(el)).toBe(`<p>\[\] []abc</p>`);
+});
+
+test("should convert a checklist into a numbered list", async () => {
+    const { el, editor } = await setupEditor("<p>[]</p>");
+    insertText(editor, "[] ");
+    insertText(editor, "/numberedlist");
+    press("Enter");
+    expect(getContent(el)).toBe(`<ol><li placeholder="List" class="o-we-hint">[]<br></li></ol>`);
+});
+
 test("List should not be created when typing '1. ' at the end the text", async () => {
     const { el, editor } = await setupEditor("<p>abc[]</p>");
     insertText(editor, "1. ");