From 8e89ffb175b3ac11481762c8f044544dcd67ba0e Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Mon, 15 Apr 2019 13:05:29 +0000
Subject: [PATCH] [FIX] web_editor: properly convert a checklist to an ordered
list
The `o_checklist` class was preserved when converting a checklist to an
ordered list.
---
.../static/src/js/wysiwyg/plugin/bullet.js | 1 +
.../web_editor/static/tests/wysiwyg_tests.js | 344 +++++++++++++++++-
2 files changed, 343 insertions(+), 2 deletions(-)
diff --git a/addons/web_editor/static/src/js/wysiwyg/plugin/bullet.js b/addons/web_editor/static/src/js/wysiwyg/plugin/bullet.js
index 506646d46970..59dbdd2c4770 100644
--- a/addons/web_editor/static/src/js/wysiwyg/plugin/bullet.js
+++ b/addons/web_editor/static/src/js/wysiwyg/plugin/bullet.js
@@ -173,6 +173,7 @@ var BulletPlugin = AbstractPlugin.extend({
} else {
ul = this.document.createElement(sorted === "ol" ? "ol" : "ul");
ul.className = ol.className;
+ $(ul).removeClass('o_checklist');
$(ul).insertBefore(ol).append(lis);
parent.removeChild(ol);
}
diff --git a/addons/web_editor/static/tests/wysiwyg_tests.js b/addons/web_editor/static/tests/wysiwyg_tests.js
index 3146f908520f..98c08f504b89 100644
--- a/addons/web_editor/static/tests/wysiwyg_tests.js
+++ b/addons/web_editor/static/tests/wysiwyg_tests.js
@@ -1193,7 +1193,7 @@ QUnit.test('Text bgcolor', function (assert) {
QUnit.test('Unordered list', function (assert) {
var done = assert.async();
- assert.expect(10);
+ assert.expect(34);
return weTestUtils.createWysiwyg({
debug: false,
@@ -1275,6 +1275,176 @@ QUnit.test('Unordered list', function (assert) {
end: 'p:eq(2):contents()[0]->5',
},
},
+ // Conversion from OL
+ {
+ name: "Click UL: ol -> ul",
+ content: '<p>dom not to edit</p><ol><li><p>dom to edit</p></li></ol>',
+ start: 'p:eq(1):contents()[0]->1',
+ end: 'p:eq(1):contents()[0]->5',
+ do: function () {
+ $btnUL.mousedown().click();
+ },
+ test: {
+ content: '<p>dom not to edit</p><ul><li><p>dom to edit</p></li></ul>',
+ start: 'p:eq(1):contents()[0]->1',
+ end: 'p:eq(1):contents()[0]->5',
+ },
+ },
+ {
+ name: "Click UL: ol -> ul (across li's)",
+ content: '<p>dom not to edit</p><ol><li><p>dom to edit</p></li><li><p>dom to edit</p></li></ol>',
+ start: 'p:eq(1):contents()[0]->1',
+ end: 'p:eq(2):contents()[0]->5',
+ do: function () {
+ $btnUL.mousedown().click();
+ },
+ test: {
+ content: '<p>dom not to edit</p><ul><li><p>dom to edit</p></li><li><p>dom to edit</p></li></ul>',
+ start: 'p:eq(1):contents()[0]->1',
+ end: 'p:eq(2):contents()[0]->5',
+ },
+ },
+ {
+ name: "Click UL: ol -> ul (from second li)",
+ content: '<p>dom not to edit</p><ol><li><p>xxx</p></li><li><p>dom to edit</p></li></ol>',
+ start: 'li:eq(1) p:contents()[0]->1',
+ end: 'li:eq(1) p:contents()[0]->5',
+ do: function () {
+ $btnUL.mousedown().click();
+ },
+ test: {
+ content: '<p>dom not to edit</p><ol><li><p>xxx</p></li></ol><ul><li><p>dom to edit</p></li></ul>',
+ start: 'p:eq(2):contents()[0]->1',
+ end: 'p:eq(2):contents()[0]->5',
+ },
+ },
+ {
+ name: "Click UL: ul ol -> ul ul (from indented li)",
+ content: '<p>dom not to edit</p><ul><li><p>xxx</p></li><ol><li><p>dom to edit</p></li></ol></ul>',
+ start: 'li:eq(1) p:contents()[0]->1',
+ end: 'li:eq(1) p:contents()[0]->5',
+ do: function () {
+ $btnUL.mousedown().click();
+ },
+ test: {
+ content: '<p>dom not to edit</p><ul><li><p>xxx</p></li><ul><li><p>dom to edit</p></li></ul></ul>',
+ start: 'p:eq(2):contents()[0]->1',
+ end: 'p:eq(2):contents()[0]->5',
+ },
+ },
+ {
+ name: "Click UL: ul ol -> ul ul (across several indented li)",
+ content: '<p>dom not to edit</p><ul><li><p>xxx</p></li><ol><li><p>dom to edit 1</p></li><li><p>dom to edit 2</p></li></ol></ul>',
+ start: 'li:eq(1) p:contents()[0]->1',
+ end: 'li:eq(2) p:contents()[0]->5',
+ do: function () {
+ $btnUL.mousedown().click();
+ },
+ test: {
+ content: '<p>dom not to edit</p><ul><li><p>xxx</p></li><ul><li><p>dom to edit 1</p></li><li><p>dom to edit 2</p></li></ul></ul>',
+ start: 'p:eq(2):contents()[0]->1',
+ end: 'p:eq(3):contents()[0]->5',
+ },
+ },
+ {
+ name: "Click UL: ul ol -> ul ul (from second indented li)",
+ content: '<p>dom not to edit</p><ul><li><p>xxx</p></li><ol><li><p>dom not to edit</p></li><li><p>dom to edit</p></li><li><p>dom not to edit</p></li></ol></ul>',
+ start: 'li:eq(2) p:contents()[0]->1',
+ end: 'li:eq(2) p:contents()[0]->5',
+ do: function () {
+ $btnUL.mousedown().click();
+ },
+ test: {
+ content: '<p>dom not to edit</p><ul><li><p>xxx</p></li><ol><li><p>dom not to edit</p></li></ol><ul><li><p>dom to edit</p></li></ul><ol><li><p>dom not to edit</p></li></ol></ul>',
+ start: 'p:eq(3):contents()[0]->1',
+ end: 'p:eq(3):contents()[0]->5',
+ },
+ },
+ // Conversion from Checklist
+ {
+ name: "Click UL: ul.o_checklist -> ul",
+ content: '<p>dom not to edit</p><ul class="o_checklist"><li><p>dom to edit</p></li></ul>',
+ start: 'p:eq(1):contents()[0]->1',
+ end: 'p:eq(1):contents()[0]->5',
+ do: function () {
+ $btnUL.mousedown().click();
+ },
+ test: {
+ content: '<p>dom not to edit</p><ul><li><p>dom to edit</p></li></ul>',
+ start: 'p:eq(1):contents()[0]->1',
+ end: 'p:eq(1):contents()[0]->5',
+ },
+ },
+ {
+ name: "Click UL: ul.o_checklist -> ul (across li's)",
+ content: '<p>dom not to edit</p><ul class="o_checklist"><li><p>dom to edit</p></li><li><p>dom to edit</p></li></ul>',
+ start: 'p:eq(1):contents()[0]->1',
+ end: 'p:eq(2):contents()[0]->5',
+ do: function () {
+ $btnUL.mousedown().click();
+ },
+ test: {
+ content: '<p>dom not to edit</p><ul><li><p>dom to edit</p></li><li><p>dom to edit</p></li></ul>',
+ start: 'p:eq(1):contents()[0]->1',
+ end: 'p:eq(2):contents()[0]->5',
+ },
+ },
+ {
+ name: "Click UL: ul.o_checklist -> ul (from second li)",
+ content: '<p>dom not to edit</p><ul class="o_checklist"><li><p>xxx</p></li><li><p>dom to edit</p></li></ul>',
+ start: 'li:eq(1) p:contents()[0]->1',
+ end: 'li:eq(1) p:contents()[0]->5',
+ do: function () {
+ $btnUL.mousedown().click();
+ },
+ test: {
+ content: '<p>dom not to edit</p><ul class="o_checklist"><li><p>xxx</p></li></ul><ul><li><p>dom to edit</p></li></ul>',
+ start: 'p:eq(2):contents()[0]->1',
+ end: 'p:eq(2):contents()[0]->5',
+ },
+ },
+ {
+ name: "Click UL: ul ul.o_checklist -> ul ul (from indented li)",
+ content: '<p>dom not to edit</p><ul><li><p>xxx</p></li><ul class="o_checklist"><li><p>dom to edit</p></li></ul></ul>',
+ start: 'li:eq(1) p:contents()[0]->1',
+ end: 'li:eq(1) p:contents()[0]->5',
+ do: function () {
+ $btnUL.mousedown().click();
+ },
+ test: {
+ content: '<p>dom not to edit</p><ul><li><p>xxx</p></li><ul><li><p>dom to edit</p></li></ul></ul>',
+ start: 'p:eq(2):contents()[0]->1',
+ end: 'p:eq(2):contents()[0]->5',
+ },
+ },
+ {
+ name: "Click UL: ul ul.o_checklist -> ul ul (across several indented li)",
+ content: '<p>dom not to edit</p><ul><li><p>xxx</p></li><ul class="o_checklist"><li><p>dom to edit 1</p></li><li><p>dom to edit 2</p></li></ul></ul>',
+ start: 'li:eq(1) p:contents()[0]->1',
+ end: 'li:eq(2) p:contents()[0]->5',
+ do: function () {
+ $btnUL.mousedown().click();
+ },
+ test: {
+ content: '<p>dom not to edit</p><ul><li><p>xxx</p></li><ul><li><p>dom to edit 1</p></li><li><p>dom to edit 2</p></li></ul></ul>',
+ start: 'p:eq(2):contents()[0]->1',
+ end: 'p:eq(3):contents()[0]->5',
+ },
+ },
+ {
+ name: "Click UL: ul ul.o_checklist -> ul ul (from second indented li)",
+ content: '<p>dom not to edit</p><ul><li><p>xxx</p></li><ul class="o_checklist"><li><p>dom not to edit</p></li><li><p>dom to edit</p></li><li><p>dom not to edit</p></li></ul></ul>',
+ start: 'li:eq(2) p:contents()[0]->1',
+ end: 'li:eq(2) p:contents()[0]->5',
+ do: function () {
+ $btnUL.mousedown().click();
+ },
+ test: {
+ content: '<p>dom not to edit</p><ul><li><p>xxx</p></li><ul class="o_checklist"><li><p>dom not to edit</p></li></ul><ul><li><p>dom to edit</p></li></ul><ul class="o_checklist"><li><p>dom not to edit</p></li></ul></ul>',
+ start: 'p:eq(3):contents()[0]->1',
+ end: 'p:eq(3):contents()[0]->5',
+ },
+ },
];
_.each(ulTests, function (test) {
@@ -1294,7 +1464,7 @@ QUnit.test('Unordered list', function (assert) {
QUnit.test('Ordered list', function (assert) {
var done = assert.async();
- assert.expect(32);
+ assert.expect(56);
return weTestUtils.createWysiwyg({
debug: false,
@@ -1725,6 +1895,176 @@ QUnit.test('Ordered list', function (assert) {
start: 'font:contents(0)->11',
},
},
+ // Conversion from UL
+ {
+ name: "Click OL: ul -> ol",
+ content: '<p>dom not to edit</p><ul><li><p>dom to edit</p></li></ul>',
+ start: 'p:eq(1):contents()[0]->1',
+ end: 'p:eq(1):contents()[0]->5',
+ do: function () {
+ $btnOL.mousedown().click();
+ },
+ test: {
+ content: '<p>dom not to edit</p><ol><li><p>dom to edit</p></li></ol>',
+ start: 'p:eq(1):contents()[0]->1',
+ end: 'p:eq(1):contents()[0]->5',
+ },
+ },
+ {
+ name: "Click OL: ul -> ol (across li's)",
+ content: '<p>dom not to edit</p><ul><li><p>dom to edit</p></li><li><p>dom to edit</p></li></ul>',
+ start: 'p:eq(1):contents()[0]->1',
+ end: 'p:eq(2):contents()[0]->5',
+ do: function () {
+ $btnOL.mousedown().click();
+ },
+ test: {
+ content: '<p>dom not to edit</p><ol><li><p>dom to edit</p></li><li><p>dom to edit</p></li></ol>',
+ start: 'p:eq(1):contents()[0]->1',
+ end: 'p:eq(2):contents()[0]->5',
+ },
+ },
+ {
+ name: "Click OL: ul -> ol (from second li)",
+ content: '<p>dom not to edit</p><ul><li><p>xxx</p></li><li><p>dom to edit</p></li></ul>',
+ start: 'li:eq(1) p:contents()[0]->1',
+ end: 'li:eq(1) p:contents()[0]->5',
+ do: function () {
+ $btnOL.mousedown().click();
+ },
+ test: {
+ content: '<p>dom not to edit</p><ul><li><p>xxx</p></li></ul><ol><li><p>dom to edit</p></li></ol>',
+ start: 'p:eq(2):contents()[0]->1',
+ end: 'p:eq(2):contents()[0]->5',
+ },
+ },
+ {
+ name: "Click OL: ol ul -> ol ol (from indented li)",
+ content: '<p>dom not to edit</p><ol><li><p>xxx</p></li><ul><li><p>dom to edit</p></li></ul></ol>',
+ start: 'li:eq(1) p:contents()[0]->1',
+ end: 'li:eq(1) p:contents()[0]->5',
+ do: function () {
+ $btnOL.mousedown().click();
+ },
+ test: {
+ content: '<p>dom not to edit</p><ol><li><p>xxx</p></li><ol><li><p>dom to edit</p></li></ol></ol>',
+ start: 'p:eq(2):contents()[0]->1',
+ end: 'p:eq(2):contents()[0]->5',
+ },
+ },
+ {
+ name: "Click OL: ol ul -> ol ol (across several indented li)",
+ content: '<p>dom not to edit</p><ol><li><p>xxx</p></li><ul><li><p>dom to edit 1</p></li><li><p>dom to edit 2</p></li></ul></ol>',
+ start: 'li:eq(1) p:contents()[0]->1',
+ end: 'li:eq(2) p:contents()[0]->5',
+ do: function () {
+ $btnOL.mousedown().click();
+ },
+ test: {
+ content: '<p>dom not to edit</p><ol><li><p>xxx</p></li><ol><li><p>dom to edit 1</p></li><li><p>dom to edit 2</p></li></ol></ol>',
+ start: 'p:eq(2):contents()[0]->1',
+ end: 'p:eq(3):contents()[0]->5',
+ },
+ },
+ {
+ name: "Click OL: ol ul -> ol ol (from second indented li)",
+ content: '<p>dom not to edit</p><ol><li><p>xxx</p></li><ul><li><p>dom not to edit</p></li><li><p>dom to edit</p></li><li><p>dom not to edit</p></li></ul></ol>',
+ start: 'li:eq(2) p:contents()[0]->1',
+ end: 'li:eq(2) p:contents()[0]->5',
+ do: function () {
+ $btnOL.mousedown().click();
+ },
+ test: {
+ content: '<p>dom not to edit</p><ol><li><p>xxx</p></li><ul><li><p>dom not to edit</p></li></ul><ol><li><p>dom to edit</p></li></ol><ul><li><p>dom not to edit</p></li></ul></ol>',
+ start: 'p:eq(3):contents()[0]->1',
+ end: 'p:eq(3):contents()[0]->5',
+ },
+ },
+ // Conversion from Checklist
+ {
+ name: "Click OL: ul.o_checklist -> ol",
+ content: '<p>dom not to edit</p><ul class="o_checklist"><li><p>dom to edit</p></li></ul>',
+ start: 'p:eq(1):contents()[0]->1',
+ end: 'p:eq(1):contents()[0]->5',
+ do: function () {
+ $btnOL.mousedown().click();
+ },
+ test: {
+ content: '<p>dom not to edit</p><ol><li><p>dom to edit</p></li></ol>',
+ start: 'p:eq(1):contents()[0]->1',
+ end: 'p:eq(1):contents()[0]->5',
+ },
+ },
+ {
+ name: "Click OL: ul.o_checklist -> ol (across li's)",
+ content: '<p>dom not to edit</p><ul class="o_checklist"><li><p>dom to edit</p></li><li><p>dom to edit</p></li></ul>',
+ start: 'p:eq(1):contents()[0]->1',
+ end: 'p:eq(2):contents()[0]->5',
+ do: function () {
+ $btnOL.mousedown().click();
+ },
+ test: {
+ content: '<p>dom not to edit</p><ol><li><p>dom to edit</p></li><li><p>dom to edit</p></li></ol>',
+ start: 'p:eq(1):contents()[0]->1',
+ end: 'p:eq(2):contents()[0]->5',
+ },
+ },
+ {
+ name: "Click OL: ul.o_checklist -> ol (from second li)",
+ content: '<p>dom not to edit</p><ul class="o_checklist"><li><p>xxx</p></li><li><p>dom to edit</p></li></ul>',
+ start: 'li:eq(1) p:contents()[0]->1',
+ end: 'li:eq(1) p:contents()[0]->5',
+ do: function () {
+ $btnOL.mousedown().click();
+ },
+ test: {
+ content: '<p>dom not to edit</p><ul class="o_checklist"><li><p>xxx</p></li></ul><ol><li><p>dom to edit</p></li></ol>',
+ start: 'p:eq(2):contents()[0]->1',
+ end: 'p:eq(2):contents()[0]->5',
+ },
+ },
+ {
+ name: "Click OL: ol ul.o_checklist -> ol ol (from indented li)",
+ content: '<p>dom not to edit</p><ol><li><p>xxx</p></li><ul class="o_checklist"><li><p>dom to edit</p></li></ul></ol>',
+ start: 'li:eq(1) p:contents()[0]->1',
+ end: 'li:eq(1) p:contents()[0]->5',
+ do: function () {
+ $btnOL.mousedown().click();
+ },
+ test: {
+ content: '<p>dom not to edit</p><ol><li><p>xxx</p></li><ol><li><p>dom to edit</p></li></ol></ol>',
+ start: 'p:eq(2):contents()[0]->1',
+ end: 'p:eq(2):contents()[0]->5',
+ },
+ },
+ {
+ name: "Click OL: ul ul.o_checklist -> ul ol (across several indented li)",
+ content: '<p>dom not to edit</p><ul><li><p>xxx</p></li><ul class="o_checklist"><li><p>dom to edit 1</p></li><li><p>dom to edit 2</p></li></ul></ul>',
+ start: 'li:eq(1) p:contents()[0]->1',
+ end: 'li:eq(2) p:contents()[0]->5',
+ do: function () {
+ $btnOL.mousedown().click();
+ },
+ test: {
+ content: '<p>dom not to edit</p><ul><li><p>xxx</p></li><ol><li><p>dom to edit 1</p></li><li><p>dom to edit 2</p></li></ol></ul>',
+ start: 'p:eq(2):contents()[0]->1',
+ end: 'p:eq(3):contents()[0]->5',
+ },
+ },
+ {
+ name: "Click OL: ul ul.o_checklist -> ul ol (from second indented li)",
+ content: '<p>dom not to edit</p><ul><li><p>xxx</p></li><ul class="o_checklist"><li><p>dom not to edit</p></li><li><p>dom to edit</p></li><li><p>dom not to edit</p></li></ul></ul>',
+ start: 'li:eq(2) p:contents()[0]->1',
+ end: 'li:eq(2) p:contents()[0]->5',
+ do: function () {
+ $btnOL.mousedown().click();
+ },
+ test: {
+ content: '<p>dom not to edit</p><ul><li><p>xxx</p></li><ul class="o_checklist"><li><p>dom not to edit</p></li></ul><ol><li><p>dom to edit</p></li></ol><ul class="o_checklist"><li><p>dom not to edit</p></li></ul></ul>',
+ start: 'p:eq(3):contents()[0]->1',
+ end: 'p:eq(3):contents()[0]->5',
+ },
+ },
];
_.each(olTests, function (test) {
--
GitLab