[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.
This commit is contained in:
Antoine Guenet
2019-04-25 10:00:43 +00:00
parent 91b6c1076c
commit 8e89ffb175
2 changed files with 343 additions and 2 deletions
@@ -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);
}
+342 -2
View File
@@ -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) {