From f3cc75bac66c6d21924f6efee01e83160f2ccfd6 Mon Sep 17 00:00:00 2001 From: Deependra Solanki Date: Mon, 21 Aug 2023 14:39:28 +0530 Subject: [PATCH] [FIX] web_editor: list indentation in table Before this commit: Indenting list using tab inside a table used to switch to the next cell. After this commit: Indenting list using tab inside a table now indents a list instead of switching to the next cell. task-3470092 closes odoo/odoo#136538 X-original-commit: 62c16468e2759eb0a0c3eecf3866b543be3bfabb Signed-off-by: David Monjoie (dmo) --- .../js/editor/odoo-editor/src/OdooEditor.js | 5 +- .../editor/odoo-editor/test/spec/list.test.js | 297 ++++++++++++++++++ 2 files changed, 300 insertions(+), 2 deletions(-) diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js index ef7603caae8..e7f722a3ed2 100644 --- a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js +++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js @@ -3709,9 +3709,10 @@ export class OdooEditor extends EventTarget { // Tab const tabHtml = '\u0009\u200B'; const sel = this.document.getSelection(); - if (closestElement(sel.anchorNode, 'table')) { + const closestLi = closestElement(sel.anchorNode, 'li'); + if (closestElement(sel.anchorNode, 'table') && !closestLi) { this._onTabulationInTable(ev); - } else if (!ev.shiftKey && sel.isCollapsed && !closestElement(sel.anchorNode, 'li')) { + } else if (!ev.shiftKey && sel.isCollapsed && !closestLi) { // Indent text (collapsed selection). this.execCommand('insert', parseHTML(tabHtml)); } else { diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/list.test.js b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/list.test.js index c05de19de3e..941e77eb647 100644 --- a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/list.test.js +++ b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/list.test.js @@ -14,6 +14,7 @@ import { toggleCheckList, toggleOrderedList, toggleUnorderedList, + triggerEvent, unformat, } from '../utils.js'; @@ -7441,6 +7442,105 @@ describe('List', () => { `), }); }); + it('should indent unordered list inside a table cell', async () => { + await testEditor(BasicEditor, { + contentBefore: unformat(` + + + + + + + + +
+
    +
  • abc
    • +
  • def[]
    • +
+ 		+ ghi + + jkl +
+ `), + stepFunction: async editor => triggerEvent(editor.editable, 'keydown', { key: 'Tab' }), + contentAfter: unformat(` + + + + + + + + +
+
    +
  • abc
    • +
  • +
      +
    • def[]
      • +
    +
    • +
+ 		+ ghi + + jkl +
+ `), + }); + }); + it('should indent checklist inside a table cell', async() => { + await testEditor(BasicEditor, { + removeCheckIds: true, + contentBefore: unformat(` + + + + + + + + +
+
    +
  • abc
    • +
  • def[]
    • +
+ 		+ ghi + + jkl +
+ `), + stepFunction: async editor => triggerEvent(editor.editable, 'keydown', { key: 'Tab' }), + contentAfter: unformat(` + + + + + + + + +
+
    +
  • abc
    • +
  • +
      +
    • def[]
      • +
    +
    • +
+ 		+ ghi + + jkl +
+ `), + }); + }); }); describe('with selection', () => { it('should indent the first element of a list', async () => { @@ -7855,6 +7955,55 @@ describe('List', () => {

after]

`), }); }); + it('should indent ordered list inside a table cell', async() => { + await testEditor(BasicEditor, { + contentBefore: unformat(` + + + + + + + + +
+
    +
  1. abc
    2. +
  2. [def]
    3. +
+ 		+ ghi + + jkl +
+ `), + stepFunction: async editor => triggerEvent(editor.editable, 'keydown', { key: 'Tab' }), + contentAfter: unformat(` + + + + + + + + +
+
    +
  1. abc
    2. +
  2. +
      +
    1. [def]
      2. +
    +
    3. +
+ 		+ ghi + + jkl +
+ `), + }); + }); }); }); describe('outdent', () => { @@ -7992,6 +8141,105 @@ describe('List', () => { `), }); }); + it('should outdent unordered list inside a table cell', async() => { + await testEditor(BasicEditor, { + contentBefore: unformat(` + + + + + + + + +
+ ghi + +
    +
  • abc
    • +
  • +
      +
    • def[]
      • +
    +
    • +
+ 		+ jkl +
+ `), + stepFunction: editor => triggerEvent(editor.editable, 'keydown', { key: 'Tab', shiftKey: true }), + contentAfter: unformat(` + + + + + + + + +
+ ghi + +
    +
  • abc
    • +
  • def[]
    • +
+ 		+ jkl +
+ `), + }); + }); + it('should outdent checklist inside a table cell', async() => { + await testEditor(BasicEditor, { + removeCheckIds: true, + contentBefore: unformat(` + + + + + + + + +
+ ghi + +
    +
  • abc
    • +
  • +
      +
    • def[]
      • +
    +
    • +
+ 		+ jkl +
+ `), + stepFunction: editor => triggerEvent(editor.editable, 'keydown', { key: 'Tab', shiftKey: true }), + contentAfter: unformat(` + + + + + + + + +
+ ghi + +
    +
  • abc
    • +
  • def[]
    • +
+ 		+ jkl +
+ `), + }); + }); }); describe('with selection', () => { it('should outdent the middle element of a list', async () => { @@ -8184,6 +8432,55 @@ describe('List', () => {

after]

`), }); }); + it('should outdent a ordered list inside a table cell', async() => { + await testEditor(BasicEditor, { + contentBefore: unformat(` + + + + + + + + +
+ ghi + +
    +
  1. abc
    2. +
  2. +
      +
    1. [def]
      2. +
    +
    3. +
+ 		+ jkl +
+ `), + stepFunction: editor => triggerEvent(editor.editable, 'keydown', { key: 'Tab', shiftKey: true }), + contentAfter: unformat(` + + + + + + + + +
+ ghi + +
    +
  1. abc
    2. +
  2. [def]
    3. +
+ 		+ jkl +
+ `), + }); + }); }); }); });