NextERP/Odoo18-Base
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity
main
Odoo18-Base/addons/html_editor/static/tests/delete/backward.test.js

2091 lines
85 KiB
JavaScript
Raw Permalink Normal View History

init
2025-01-06 10:57:38 +07:00
import { describe, expect, test } from "@odoo/hoot";
import { setupEditor, testEditor } from "../_helpers/editor";
import { unformat } from "../_helpers/format";
import { microTick, press } from "@odoo/hoot-dom";
import { animationFrame, tick } from "@odoo/hoot-mock";
import { deleteBackward, insertText, tripleClick, undo } from "../_helpers/user_actions";
import { getContent } from "../_helpers/selection";
/**
* content of the "deleteBackward" sub suite in editor.test.js
*/
describe("Selection collapsed", () => {
describe("Basic", () => {
test("should do nothing", async () => {
// TODO the addition of <br/> "correction" part was judged
// unnecessary to enforce, the rest of the test still makes
// sense: not removing the unique <p/> and keeping the
// cursor at the right place.
await testEditor({
contentBefore: "<p>[]</p>",
stepFunction: deleteBackward,
contentAfter: "<p>[]</p>",
});
// TODO this cannot actually be tested currently as a
// backspace/delete in that case is not even detected
// (no input event to rollback)
// await testEditor({
// contentBefore: '<p>[<br>]</p>',
// stepFunction: deleteBackward,
// // The <br> is there only to make the <p> visible.
// // It does not exist in VDocument and selecting it
// // has no meaning in the DOM.
// contentAfter: '<p>[]<br></p>',
// });
await testEditor({
contentBefore: "<p>[]abc</p>",
stepFunction: deleteBackward,
contentAfter: "<p>[]abc</p>",
});
});
test("should delete the first character in a paragraph", async () => {
await testEditor({
contentBefore: "<p>a[]bc</p>",
stepFunction: deleteBackward,
contentAfter: "<p>[]bc</p>",
});
});
test("should delete a character within a paragraph", async () => {
await testEditor({
contentBefore: "<p>ab[]c</p>",
stepFunction: deleteBackward,
contentAfter: "<p>a[]c</p>",
});
});
test("should delete the last character in a paragraph", async () => {
await testEditor({
contentBefore: "<p>abc[]</p>",
stepFunction: deleteBackward,
contentAfter: "<p>ab[]</p>",
});
await testEditor({
contentBefore: "<p>ab c[]</p>",
stepFunction: deleteBackward,
// The space should be converted to an unbreakable space
// so it is visible.
contentAfter: "<p>ab&nbsp;[]</p>",
});
});
test("should merge a paragraph into an empty paragraph", async () => {
await testEditor({
contentBefore: "<p><br></p><p>[]abc</p>",
stepFunction: deleteBackward,
contentAfter: "<p>[]abc</p>",
});
});
test("should merge node correctly", async () => {
await testEditor({
contentBefore: '<div>a<span class="a">b</span><p>[]c</p>d</div>',
stepFunction: deleteBackward,
contentAfter: '<div>a<span class="a">b[]</span>c<br>d</div>',
});
});
test("should ignore ZWS", async () => {
await testEditor({
contentBefore: "<p>ab\u200B[]c</p>",
stepFunction: deleteBackward,
contentAfter: "<p>a[]c</p>",
});
});
test("should keep inline block", async () => {
await testEditor({
contentBefore: "<div><p>ab</p><br><i>c[]</i></div>",
stepFunction: deleteBackward,
contentAfterEdit:
'<div><p>ab</p><br><i data-oe-zws-empty-inline="">[]\u200B</i></div>',
contentAfter: "<div><p>ab</p><br><br>[]</div>",
});
await testEditor({
contentBefore: '<div><p>uv</p><br><span class="style">w[]</span></div>',
stepFunction: deleteBackward,
contentAfterEdit:
'<div><p>uv</p><br><span class="style" data-oe-zws-empty-inline="">[]\u200B</span></div>',
contentAfter: '<div><p>uv</p><br><span class="style">[]\u200B</span></div>',
});
await testEditor({
contentBefore: '<div><p>cd</p><br><span class="a">e[]</span></div>',
stepFunction: async (editor) => {
deleteBackward(editor);
await insertText(editor, "x");
},
contentAfterEdit: '<div><p>cd</p><br><span class="a">x[]</span></div>',
contentAfter: '<div><p>cd</p><br><span class="a">x[]</span></div>',
});
});
test("should keep inline block and then undo (1)", async () => {
await testEditor({
contentBefore: "<div>ab<b>c[]</b>de</div>",
stepFunction: async (editor) => {
deleteBackward(editor);
await insertText(editor, "x");
undo(editor);
},
contentAfterEdit: '<div>ab<b data-oe-zws-empty-inline="">[]\u200B</b>de</div>',
contentAfter: "<div>ab[]de</div>",
});
});
test("should keep inline block and then undo (2)", async () => {
await testEditor({
contentBefore: "<div>ab<b>c[]</b>de</div>",
stepFunction: async (editor) => {
deleteBackward(editor);
await insertText(editor, "x");
undo(editor);
undo(editor);
},
contentAfterEdit: "<div>ab<b>c[]</b>de</div>",
contentAfter: "<div>ab<b>c[]</b>de</div>",
});
});
test("should delete through ZWS and Empty Inline", async () => {
await testEditor({
contentBefore: '<p>ab<span class="style">c</span>d[]e</p>',
stepFunction: async (editor) => {
deleteBackward(editor);
deleteBackward(editor);
deleteBackward(editor);
},
contentAfter: "<p>a[]e</p>",
});
});
test("ZWS: should delete element content but keep cursor in", async () => {
await testEditor({
contentBefore: '<p>uv<i style="color:red">w[]</i>xy</p>',
stepFunction: async (editor) => {
deleteBackward(editor);
},
contentAfterEdit:
'<p>uv<i style="color:red" data-oe-zws-empty-inline="">[]\u200B</i>xy</p>',
contentAfter: "<p>uv[]xy</p>",
});
await testEditor({
contentBefore: '<p>uv<i style="color:red">w[]</i>xy</p>',
stepFunction: async (editor) => {
deleteBackward(editor);
await insertText(editor, "i");
},
contentAfterEdit: '<p>uv<i style="color:red">i[]</i>xy</p>',
contentAfter: '<p>uv<i style="color:red">i[]</i>xy</p>',
});
await testEditor({
contentBefore: '<p>ab<span class="style">cd[]</span>ef</p>',
stepFunction: async (editor) => {
deleteBackward(editor);
deleteBackward(editor);
},
contentAfterEdit:
'<p>ab<span class="style" data-oe-zws-empty-inline="">[]\u200B</span>ef</p>',
contentAfter: '<p>ab<span class="style">[]\u200B</span>ef</p>',
});
await testEditor({
contentBefore: '<p>ab<span class="style">cd[]</span>ef</p>',
stepFunction: async (editor) => {
deleteBackward(editor);
deleteBackward(editor);
await insertText(editor, "x");
},
contentAfterEdit: '<p>ab<span class="style">x[]</span>ef</p>',
contentAfter: '<p>ab<span class="style">x[]</span>ef</p>',
});
});
test("should ignore ZWS and merge (1)", async () => {
await testEditor({
contentBefore:
'<p><b>ab</b><span class="removeme" data-oe-zws-empty-inline="">[]\u200B</span></p>',
stepFunction: async (editor) => {
deleteBackward(editor);
await insertText(editor, "x");
},
contentAfter: "<p><b>ax[]</b></p>",
});
await testEditor({
contentBefore:
'<p><span class="a">cd</span><span class="removeme" data-oe-zws-empty-inline="">[]\u200B</span></p>',
stepFunction: async (editor) => {
deleteBackward(editor);
await insertText(editor, "x");
},
contentAfter: '<p><span class="a">cx[]</span></p>',
});
await testEditor({
contentBefore:
'<p><b>ef</b><br><span class="removeme" data-oe-zws-empty-inline="">[]\u200B</span></p>',
stepFunction: async (editor) => {
deleteBackward(editor);
await insertText(editor, "x");
},
contentAfter: "<p><b>efx[]</b></p>",
});
});
test("should ignore ZWS and merge (2)", async () => {
await testEditor({
contentBefore: '<div><p>ab</p><span class="a">[]\u200B</span></div>',
stepFunction: deleteBackward,
contentAfter: "<div><p>ab[]</p></div>",
});
await testEditor({
contentBefore: '<div><p>cd</p><br><span class="a">[]\u200B</span></div>',
stepFunction: async (editor) => {
deleteBackward(editor);
await insertText(editor, "x");
},
contentAfter: "<div><p>cd</p>x[]</div>",
});
});
test("should not remove empty Bootstrap column", async () => {
await testEditor({
contentBefore: '<div><div><p>ABC</p></div><div class="col">X[]</div></div>',
stepFunction: async (editor) => {
deleteBackward(editor);
deleteBackward(editor);
deleteBackward(editor);
},
contentAfter: '<div><div><p>ABC</p></div><div class="col">[]<br></div></div>',
});
await testEditor({
contentBefore: '<div><div><p>ABC</p></div><div class="col-12">X[]</div></div>',
stepFunction: async (editor) => {
deleteBackward(editor);
deleteBackward(editor);
deleteBackward(editor);
},
contentAfter: '<div><div><p>ABC</p></div><div class="col-12">[]<br></div></div>',
});
await testEditor({
contentBefore: '<div><div><p>ABC</p></div><div class="col-lg-3">X[]</div></div>',
stepFunction: async (editor) => {
deleteBackward(editor);
deleteBackward(editor);
deleteBackward(editor);
},
contentAfter: '<div><div><p>ABC</p></div><div class="col-lg-3">[]<br></div></div>',
});
});
test("should merge the following inline text node", async () => {
await testEditor({
contentBefore: "<div><p>abc</p>[]def</div>",
stepFunction: deleteBackward,
contentAfter: "<div><p>abc[]def</p></div>",
});
await testEditor({
contentBefore: "<div><p>abc</p>[]def<p>ghi</p></div>",
stepFunction: deleteBackward,
contentAfter: "<div><p>abc[]def</p><p>ghi</p></div>",
});
});
test("should merge paragraphs", async () => {
await testEditor({
contentBefore: '<p>abc</p><p style="margin-bottom: 0px;">[]def</p>',
stepFunction: deleteBackward,
contentAfter: "<p>abc[]def</p>",
});
await testEditor({
contentBefore: '<p>abc</p><p style="margin-bottom: 0px;">[]def</p><p>ghi</p>',
stepFunction: deleteBackward,
contentAfter: "<p>abc[]def</p><p>ghi</p>",
});
});
test("should delete starting white space and merge paragraphs", async () => {
await testEditor({
contentBefore: `<p>mollis.</p><p>\n <i>[]Pe</i><i>lentesque</i></p>`,
stepFunction: deleteBackward,
contentAfter: `<p>mollis.[]<i>Pelentesque</i></p>`,
});
});
test('should remove contenteditable="false"', async () => {
await testEditor({
contentBefore: `<div><span contenteditable="false">abc</span>[]def</div>`,
stepFunction: async (editor) => {
deleteBackward(editor);
},
contentAfter: `<div>[]def</div>`,
});
});
test('should remove contenteditable="false" at the beggining of a P', async () => {
await testEditor({
contentBefore: `<p>abc</p><div contenteditable="false">def</div><p>[]ghi</p>`,
stepFunction: async (editor) => {
deleteBackward(editor);
},
contentAfter: `<p>abc</p><p>[]ghi</p>`,
});
});
test("should remove a fontawesome", async () => {
await testEditor({
contentBefore: `<div><p>abc<span class="fa"></span>[]def</p></div>`,
stepFunction: async (editor) => {
deleteBackward(editor);
},
contentAfter: `<div><p>abc[]def</p></div>`,
});
});
test("should unwrap a block next to an inline sibling element", async () => {
await testEditor({
contentBefore: `<div><p>abc</p><span contenteditable="false">xyz</span><p>[]def</p></div>`,
stepFunction: async (editor) => {
deleteBackward(editor);
},
contentAfter: `<div><p>abc</p><span contenteditable="false">xyz</span>[]def</div>`,
});
});
test("should unwrap a block next to an inline unbreakable element", async () => {
await testEditor({
contentBefore: `<div><p>abc</p><div class="o_image"></div><p>[]def</p></div>`,
stepFunction: async (editor) => {
deleteBackward(editor);
},
contentAfter: `<div><p>abc</p><div class="o_image"></div>[]def</div>`,
});
});
test("should remove an inline unbreakable contenteditable='false' sibling element", async () => {
await testEditor({
contentBefore: `<div><p>abc</p><div class="o_image"></div>[]def</div>`,
stepFunction: async (editor) => {
deleteBackward(editor);
},
contentAfter: `<div><p>abc</p>[]def</div>`,
});
});
test("should not remove an inline contenteditable='false' in a previous sibling", async () => {
await testEditor({
contentBefore: `<p>a<span contenteditable="false">bc</span></p><p>[]<br></p>`,
stepFunction: async (editor) => {
deleteBackward(editor);
},
contentAfter: `<p>a<span contenteditable="false">bc</span>[]</p>`,
});
});
test("should not remove a non editable sibling (inline)", async () => {
await testEditor({
contentBefore: unformat(`
<div contenteditable="false">
<span class="a">a</span>
<div contenteditable="true">
<p>[]<br></p>
</div>
</div>
`),
stepFunction: async (editor) => {
deleteBackward(editor);
},
contentAfter: unformat(`
<div contenteditable="false">
<span class="a">a</span>
<div contenteditable="true">
<p>[]<br></p>
</div>
</div>
`),
});
});
test("should not remove a non editable sibling (block)", async () => {
await testEditor({
contentBefore: unformat(`
<div contenteditable="false">
<div class="a">a<span>a</span></div>
<div contenteditable="true">
<p>[]<br></p>
</div>
</div>
`),
stepFunction: async (editor) => {
deleteBackward(editor);
},
contentAfter: unformat(`
<div contenteditable="false">
<div class="a">a<span>a</span></div>
<div contenteditable="true">
<p>[]<br></p>
</div>
</div>
`),
});
});
test("should remove a hr", async () => {
await testEditor({
contentBefore: `<div><p>abc</p><hr><p>[]def</p></div>`,
stepFunction: async (editor) => {
deleteBackward(editor);
},
contentAfter: `<div><p>abc</p><p>[]def</p></div>`,
});
});
test("should merge paragraph with previous one containing a media element", async () => {
await testEditor({
contentBefore: `<p>abc</p><p style="margin-bottom: 0px;"><o-image class="o_image" contenteditable="false"></o-image></p><p>[]def</p>`,
stepFunction: deleteBackward,
contentAfterEdit: `<p>abc</p><p style="margin-bottom: 0px;"><o-image class="o_image" contenteditable="false"></o-image>[]def</p>`,
contentAfter: `<p>abc</p><p style="margin-bottom: 0px;"><o-image class="o_image"></o-image>[]def</p>`,
});
});
test("should remove a media element inside a p", async () => {
await testEditor({
contentBefore: `<p>abc</p><p style="margin-bottom: 0px;"><o-image class="o_image" contenteditable="false"></o-image>[]def</p>`,
stepFunction: deleteBackward,
contentAfter: `<p>abc</p><p style="margin-bottom: 0px;">[]def</p>`,
});
});
test("should remove a link to uploaded document", async () => {
await testEditor({
contentBefore: `<p>abc<a href="#" title="document" data-mimetype="application/pdf" class="o_image" contenteditable="false"></a>[]</p>`,
stepFunction: deleteBackward,
contentAfter: `<p>abc[]</p>`,
});
});
test("should remove a link to uploaded document at the beginning of the editable", async () => {
await testEditor({
contentBefore: `<p><a href="#" title="document" data-mimetype="application/pdf" class="o_image" contenteditable="false"></a>[]</p>`,
stepFunction: deleteBackward,
contentAfter: `<p>[]<br></p>`,
});
});
test.todo("should not delete in contenteditable=false", async () => {
await testEditor({
contentBefore: `<p contenteditable="false">ab[]cdef</p>`,
stepFunction: deleteBackward,
contentAfter: `<p contenteditable="false">ab[]cdef</p>`,
});
});
test("should merge p elements inside conteneditbale=true inside contenteditable=false", async () => {
await testEditor({
contentBefore: `<div contenteditable="false"><div contenteditable="true"><p>abc</p><p>[]def</p></div></div>`,
stepFunction: deleteBackward,
contentAfter: `<div contenteditable="false"><div contenteditable="true"><p>abc[]def</p></div></div>`,
});
});
test("should not remove preceding character with U+0020 whitespace", async () => {
await testEditor({
contentBefore: `<p>abcd\u0020[]</p>`,
stepFunction: deleteBackward,
contentAfter: `<p>abcd[]</p>`,
});
});
});
describe("Line breaks", () => {
describe("Single", () => {
test("should delete a leading line break", async () => {
await testEditor({
contentBefore: "<p><br>[]abc</p>",
stepFunction: deleteBackward,
contentAfter: "<p>[]abc</p>",
});
await testEditor({
contentBefore: "<p><br>[] abc</p>",
stepFunction: deleteBackward,
// The space after the <br> is expected to be parsed
// away, like it is in the DOM.
contentAfter: "<p>[]abc</p>",
});
});
test("should delete a line break within a paragraph", async () => {
await testEditor({
contentBefore: "<p>ab<br>[]cd</p>",
stepFunction: deleteBackward,
contentAfter: "<p>ab[]cd</p>",
});
await testEditor({
contentBefore: "<p>ab <br>[]cd</p>",
stepFunction: deleteBackward,
contentAfter: "<p>ab []cd</p>",
});
await testEditor({
contentBefore: "<p>ab<br>[] cd</p>",
stepFunction: deleteBackward,
// The space after the <br> is expected to be parsed
// away, like it is in the DOM.
contentAfter: "<p>ab[]cd</p>",
});
});
test("should delete a trailing line break", async () => {
await testEditor({
contentBefore: "<p>abc<br><br>[]</p>",
stepFunction: deleteBackward,
contentAfter: "<p>abc[]</p>",
});
await testEditor({
contentBefore: "<p>abc<br>[]<br></p>",
stepFunction: deleteBackward,
contentAfter: "<p>abc[]</p>",
});
await testEditor({
contentBefore: "<p>abc <br><br>[]</p>",
stepFunction: deleteBackward,
contentAfter: "<p>abc&nbsp;[]</p>",
});
});
test("should delete a character and a line break, emptying a paragraph", async () => {
await testEditor({
contentBefore: "<p>aaa</p><p><br>a[]</p>",
stepFunction: async (editor) => {
deleteBackward(editor);
deleteBackward(editor);
},
contentAfter: "<p>aaa</p><p>[]<br></p>",
});
});
test("should delete a character after a trailing line break", async () => {
await testEditor({
contentBefore: "<p>ab<br>c[]</p>",
stepFunction: deleteBackward,
// A new <br> should be insterted, to make the first one
// visible.
contentAfter: "<p>ab<br>[]<br></p>",
});
});
});
describe("Consecutive", () => {
test("should merge a paragraph with 4 <br> into a paragraph with text", async () => {
// 1
await testEditor({
contentBefore: "<p>ab</p><p>[]<br><br><br><br></p><p>cd</p>",
stepFunction: deleteBackward,
contentAfter: "<p>ab[]<br><br><br><br></p><p>cd</p>",
});
});
test("should delete a line break (1)", async () => {
// 2-1
await testEditor({
contentBefore: "<p>ab</p><p><br>[]<br><br><br></p><p>cd</p>",
stepFunction: deleteBackward,
contentAfter: "<p>ab</p><p>[]<br><br><br></p><p>cd</p>",
});
});
test("should delete a line break, then merge a paragraph with 3 <br> into a paragraph with text", async () => {
// 2-2
await testEditor({
contentBefore: "<p>ab</p><p><br>[]<br><br><br></p><p>cd</p>",
stepFunction: async (editor) => {
deleteBackward(editor);
deleteBackward(editor);
},
contentAfter: "<p>ab[]<br><br><br></p><p>cd</p>",
});
});
test("should delete a line break (2)", async () => {
// 3-1
await testEditor({
contentBefore: "<p>ab</p><p><br><br>[]<br><br></p><p>cd</p>",
stepFunction: deleteBackward,
contentAfter: "<p>ab</p><p><br>[]<br><br></p><p>cd</p>",
});
});
test("should delete two line breaks (3)", async () => {
// 3-2
await testEditor({
contentBefore: "<p>ab</p><p><br><br>[]<br><br></p><p>cd</p>",
stepFunction: async (editor) => {
deleteBackward(editor);
deleteBackward(editor);
},
contentAfter: "<p>ab</p><p>[]<br><br></p><p>cd</p>",
});
});
test("should delete two line breaks, then merge a paragraph with 3 <br> into a paragraph with text", async () => {
// 3-3
await testEditor({
contentBefore: "<p>ab</p><p><br><br>[]<br><br></p><p>cd</p>",
stepFunction: async (editor) => {
deleteBackward(editor);
deleteBackward(editor);
deleteBackward(editor);
},
contentAfter: "<p>ab[]<br><br></p><p>cd</p>",
});
});
test("should delete a line break when several", async () => {
// 4-1
await testEditor({
contentBefore: "<p>ab</p><p><br><br><br>[]<br></p><p>cd</p>",
stepFunction: deleteBackward,
// A trailing line break is rendered as two <br>.
contentAfter: "<p>ab</p><p><br><br>[]<br></p><p>cd</p>",
});
// 5-1
await testEditor({
contentBefore: "<p>ab</p><p><br><br><br><br>[]</p><p>cd</p>",
stepFunction: deleteBackward,
// This should be identical to 4-1
contentAfter: "<p>ab</p><p><br><br>[]<br></p><p>cd</p>",
});
});
test("should delete two line breaks", async () => {
// 4-2
await testEditor({
contentBefore: "<p>ab</p><p><br><br><br>[]<br></p><p>cd</p>",
stepFunction: async (editor) => {
deleteBackward(editor);
deleteBackward(editor);
},
// A trailing line break is rendered as two <br>.
contentAfter: "<p>ab</p><p><br>[]<br></p><p>cd</p>",
});
// 5-2
await testEditor({
contentBefore: "<p>ab</p><p><br><br><br><br>[]</p><p>cd</p>",
stepFunction: async (editor) => {
deleteBackward(editor);
deleteBackward(editor);
},
// This should be identical to 4-2
contentAfter: "<p>ab</p><p><br>[]<br></p><p>cd</p>",
});
});
test("should delete three line breaks (emptying a paragraph)", async () => {
// 4-3
await testEditor({
contentBefore: "<p>ab</p><p><br><br><br>[]<br></p><p>cd</p>",
stepFunction: async (editor) => {
deleteBackward(editor);
deleteBackward(editor);
deleteBackward(editor);
},
contentAfter: "<p>ab</p><p>[]<br></p><p>cd</p>",
});
// 5-3
await testEditor({
contentBefore: "<p>ab</p><p><br><br><br><br>[]</p><p>cd</p>",
stepFunction: async (editor) => {
deleteBackward(editor);
deleteBackward(editor);
deleteBackward(editor);
},
// This should be identical to 4-3
contentAfter: "<p>ab</p><p>[]<br></p><p>cd</p>",
});
});
test("should delete three line breaks, then merge an empty parargaph into a paragraph with text", async () => {
// 4-4
await testEditor({
contentBefore: "<p>ab</p><p><br><br><br>[]<br></p><p>cd</p>",
stepFunction: async (editor) => {
deleteBackward(editor);
deleteBackward(editor);
deleteBackward(editor);
deleteBackward(editor);
},
// This should be identical to 4-4
contentAfter: "<p>ab[]</p><p>cd</p>",
});
// 5-4
await testEditor({
contentBefore: "<p>ab</p><p><br><br><br><br>[]</p><p>cd</p>",
stepFunction: async (editor) => {
deleteBackward(editor);
deleteBackward(editor);
deleteBackward(editor);
deleteBackward(editor);
},
contentAfter: "<p>ab[]</p><p>cd</p>",
});
});
test("should merge a paragraph into a paragraph with 4 <br>", async () => {
// 6-1
await testEditor({
contentBefore: "<p>ab</p><p><br><br><br><br></p><p>[]cd</p>",
stepFunction: deleteBackward,
contentAfter: "<p>ab</p><p><br><br><br>[]cd</p>",
});
});
test("should merge a paragraph into a paragraph with 4 <br>, then delete a trailing line break", async () => {
// 6-2
await testEditor({
contentBefore: "<p>ab</p><p><br><br><br><br></p><p>[]cd</p>",
stepFunction: async (editor) => {
deleteBackward(editor);
deleteBackward(editor);
},
contentAfter: "<p>ab</p><p><br><br>[]cd</p>",
});
});
test("should merge a paragraph into a paragraph with 4 <br>, then delete two line breaks", async () => {
// 6-3
await testEditor({
contentBefore: "<p>ab</p><p><br><br><br><br></p><p>[]cd</p>",
stepFunction: async (editor) => {
deleteBackward(editor);
deleteBackward(editor);
deleteBackward(editor);
},
contentAfter: "<p>ab</p><p><br>[]cd</p>",
});
});
test("should merge a paragraph into a paragraph with 4 <br>, then delete three line breaks", async () => {
// 6-4
await testEditor({
contentBefore: "<p>ab</p><p><br><br><br><br></p><p>[]cd</p>",
stepFunction: async (editor) => {
deleteBackward(editor);
deleteBackward(editor);
deleteBackward(editor);
deleteBackward(editor);
},
contentAfter: "<p>ab</p><p>[]cd</p>",
});
});
test("should merge a paragraph into a paragraph with 4 <br>, then delete three line breaks, then merge two paragraphs with text", async () => {
// 6-5
await testEditor({
contentBefore: "<p>ab</p><p><br><br><br><br></p><p>[]cd</p>",
stepFunction: async (editor) => {
deleteBackward(editor);
deleteBackward(editor);
deleteBackward(editor);
deleteBackward(editor);
deleteBackward(editor);
},
contentAfter: "<p>ab[]cd</p>",
});
});
});
});
describe("Pre", () => {
test("should delete a character in a pre", async () => {
await testEditor({
contentBefore: "<pre>ab[]cd</pre>",
stepFunction: deleteBackward,
contentAfter: "<pre>a[]cd</pre>",
});
});
test("should delete a character in a pre (space before)", async () => {
await testEditor({
contentBefore: "<pre> ab[]cd</pre>",
stepFunction: deleteBackward,
contentAfter: "<pre> a[]cd</pre>",
});
});
test("should delete a character in a pre (space after)", async () => {
await testEditor({
contentBefore: "<pre>ab[]cd </pre>",
stepFunction: deleteBackward,
contentAfter: "<pre>a[]cd </pre>",
});
});
test("should delete a character in a pre (space before and after)", async () => {
await testEditor({
contentBefore: "<pre> ab[]cd </pre>",
stepFunction: deleteBackward,
contentAfter: "<pre> a[]cd </pre>",
});
});
test("should delete a space in a pre", async () => {
await testEditor({
contentBefore: "<pre> [] ab</pre>",
stepFunction: deleteBackward,
contentAfter: "<pre> [] ab</pre>",
});
});
test("should delete a newline in a pre", async () => {
await testEditor({
contentBefore: "<pre>ab\n[]cd</pre>",
stepFunction: deleteBackward,
contentAfter: "<pre>ab[]cd</pre>",
});
});
test("should delete all leading space in a pre", async () => {
await testEditor({
contentBefore: "<pre> []ab</pre>",
stepFunction: async (BasicEditor) => {
deleteBackward(BasicEditor);
deleteBackward(BasicEditor);
deleteBackward(BasicEditor);
deleteBackward(BasicEditor);
deleteBackward(BasicEditor);
},
contentAfter: "<pre>[]ab</pre>",
});
});
test("should delete all trailing space in a pre", async () => {
await testEditor({
contentBefore: "<pre>ab []</pre>",
stepFunction: async (BasicEditor) => {
deleteBackward(BasicEditor);
deleteBackward(BasicEditor);
deleteBackward(BasicEditor);
deleteBackward(BasicEditor);
deleteBackward(BasicEditor);
},
contentAfter: "<pre>ab[]</pre>",
});
});
});
describe("Formats", () => {
test("should delete a character before a format node", async () => {
await testEditor({
contentBefore: "<p>abc<b>[]def</b></p>",
stepFunction: deleteBackward,
// The selection is normalized so we only have one way
// to represent a position.
contentAfter: "<p>ab[]<b>def</b></p>",
});
await testEditor({
contentBefore: "<p>abc[]<b>def</b></p>",
stepFunction: deleteBackward,
contentAfter: "<p>ab[]<b>def</b></p>",
});
});
});
describe("Nested Elements", () => {
test("should delete a h1 inside a td immediately after insertion", async () => {
await testEditor({
contentBefore:
"<table><tbody><tr><td>[]<br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td></tr></tbody></table>",
stepFunction: async (editor) => {
await insertText(editor, "/");
await insertText(editor, "Heading");
await animationFrame();
await press("Enter");
deleteBackward(editor);
},
contentAfter:
"<table><tbody><tr><td><p>[]<br></p></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td></tr></tbody></table>",
});
});
test("should delete a h1 inside a nested list immediately after insertion", async () => {
await testEditor({
contentBefore:
'<ul><li>abc</li><li class="oe-nested"><ul><li>[]<br></li></ul></li></ul>',
stepFunction: async (editor) => {
await insertText(editor, "/");
await insertText(editor, "Heading");
await animationFrame();
await press("Enter");
deleteBackward(editor);
deleteBackward(editor);
},
contentAfter: "<ul><li>abc[]</li></ul>",
});
});
});
describe("Merging different types of elements", () => {
test("should merge a paragraph with text into a paragraph with text", async () => {
await testEditor({
contentBefore: "<p>ab</p><p>[]cd</p>",
stepFunction: deleteBackward,
contentAfter: "<p>ab[]cd</p>",
});
});
test("should merge a paragraph with formated text into a paragraph with text", async () => {
await testEditor({
contentBefore: "<p>aa</p><p>[]a<i>bbb</i></p>",
stepFunction: deleteBackward,
contentAfter: "<p>aa[]a<i>bbb</i></p>",
});
});
test("should merge a paragraph with text into a heading1 with text", async () => {
await testEditor({
contentBefore: "<h1>ab</h1><p>[]cd</p>",
stepFunction: deleteBackward,
contentAfter: "<h1>ab[]cd</h1>",
});
});
test("should merge an empty paragraph into a heading1 with text", async () => {
await testEditor({
contentBefore: "<h1>ab</h1><p>[]<br></p>",
stepFunction: deleteBackward,
contentAfter: "<h1>ab[]</h1>",
});
await testEditor({
contentBefore: "<h1>ab</h1><p><br>[]</p>",
stepFunction: deleteBackward,
contentAfter: "<h1>ab[]</h1>",
});
});
test("should remove empty paragraph (keeping the heading)", async () => {
await testEditor({
contentBefore: "<p><br></p><h1>[]ab</h1>",
stepFunction: deleteBackward,
contentAfter: "<h1>[]ab</h1>",
});
});
test("should merge a text preceding a paragraph (removing the paragraph)", async () => {
await testEditor({
contentBefore: "<div>ab<p>[]cd</p></div>",
stepFunction: deleteBackward,
contentAfter: "<div>ab[]cd</div>",
});
await testEditor({
contentBefore: "<div>ab<p>[]cd</p>ef</div>",
stepFunction: deleteBackward,
contentAfter: "<div>ab[]cd<br>ef</div>",
});
});
});
describe("With attributes", () => {
test("should remove paragraph with class", async () => {
await testEditor({
contentBefore: '<p class="a"><br></p><p>[]abc</p>',
stepFunction: deleteBackward,
contentAfter: "<p>[]abc</p>",
});
});
test("should merge two paragraphs with spans of same classes", async () => {
await testEditor({
contentBefore: '<p><span class="a">ab</span></p><p><span class="a">[]cd</span></p>',
stepFunction: deleteBackward,
contentAfter: '<p><span class="a">ab[]cd</span></p>',
});
});
test("should merge two paragraphs with spans of different classes without merging the spans", async () => {
await testEditor({
contentBefore: '<p><span class="a">ab</span></p><p><span class="b">[]cd</span></p>',
stepFunction: deleteBackward,
contentAfter: '<p><span class="a">ab[]</span><span class="b">cd</span></p>',
});
});
test("should merge two paragraphs of different classes, each containing spans of the same class", async () => {
await testEditor({
contentBefore:
'<p class="a"><span class="b">ab</span></p><p class="c"><span class="b">[]cd</span></p>',
stepFunction: deleteBackward,
contentAfter: '<p class="a"><span class="b">ab[]cd</span></p>',
});
});
test("should merge two paragraphs of different classes, each containing spans of different classes without merging the spans", async () => {
await testEditor({
contentBefore:
'<p class="a"><span class="b">ab</span></p><p class="c"><span class="d">[]cd</span></p>',
stepFunction: deleteBackward,
contentAfter:
'<p class="a"><span class="b">ab[]</span><span class="d">cd</span></p>',
});
});
test("should delete a line break between two spans with bold and merge these formats", async () => {
await testEditor({
contentBefore:
'<p><span class="a"><b>ab</b></span><br><span class="a"><b>[]cd</b></span></p>',
stepFunction: deleteBackward,
contentAfter: '<p><span class="a"><b>ab[]cd</b></span></p>',
});
});
test("should delete a character in a span with bold, then a line break between two spans with bold and merge these formats", async () => {
await testEditor({
contentBefore:
'<p><span class="a"><b>ab<br></b></span><br><span class="a"><b>c[]de</b></span></p>',
stepFunction: async (editor) => {
deleteBackward(editor);
deleteBackward(editor);
},
contentAfter: '<p><span class="a"><b>ab<br>[]de</b></span></p>',
});
});
});
describe("Nested editable zone (inside contenteditable=false element)", () => {
test("should not remove the uneditable nesting zone nor the editable nested zone if the last element of the nested zone is empty", async () => {
await testEditor({
contentBefore: unformat(`
<div contenteditable="false">
<div contenteditable="true">
<p>[]<br></p>
</div>
</div>
`),
stepFunction: deleteBackward,
contentAfter: unformat(`
<div contenteditable="false">
<div contenteditable="true">
<p>[]<br></p>
</div>
</div>
`),
});
});
test("should not remove the uneditable nesting zone nor the editable nested zone even if there is a paragraph after", async () => {
await testEditor({
contentBefore: unformat(`
<div contenteditable="false">
<div contenteditable="true">
<p>[]<br></p>
</div>
</div>
<p>content</p>
`),
stepFunction: deleteBackward,
contentAfter: unformat(`
<div contenteditable="false">
<div contenteditable="true">
<p>[]<br></p>
</div>
</div>
<p>content</p>
`),
});
});
test("should not remove the uneditable nesting zone nor the editable nested zone if the last element of the nested zone is not empty", async () => {
await testEditor({
contentBefore: unformat(`
<div contenteditable="false">
<div contenteditable="true">
<p>[]content</p>
</div>
</div>
`),
stepFunction: deleteBackward,
contentAfter: unformat(`
<div contenteditable="false">
<div contenteditable="true">
<p>[]content</p>
</div>
</div>
`),
});
});
test("should remove the uneditable nesting zone from the outside", async () => {
await testEditor({
contentBefore: unformat(`
<div contenteditable="false">
<div contenteditable="true">
<p>content</p>
</div>
</div>
<p>[]content</p>
`),
stepFunction: deleteBackward,
contentAfter: unformat(`
<p>[]content</p>
`),
});
});
});
describe("POC extra tests", () => {
test("should delete an unique space between letters", async () => {
await testEditor({
contentBefore: "<p>ab []cd</p>",
stepFunction: deleteBackward,
contentAfter: "<p>ab[]cd</p>",
});
});
test("should delete the first character in a paragraph (2)", async () => {
await testEditor({
contentBefore: "<p>a[] bc</p>",
stepFunction: deleteBackward,
contentAfter: "<p>[]&nbsp;bc</p>",
});
});
test("should delete a space", async () => {
await testEditor({
contentBefore: "<p>ab [] de</p>",
stepFunction: deleteBackward,
contentAfter: "<p>ab[]de</p>",
});
});
test("should delete a one letter word followed by visible space (start of block)", async () => {
await testEditor({
contentBefore: "<p>a[] b</p>",
stepFunction: deleteBackward,
contentAfter: "<p>[]&nbsp;b</p>",
});
await testEditor({
contentBefore: "<p>[a] b</p>",
stepFunction: deleteBackward,
contentAfter: "<p>[]&nbsp;b</p>",
});
});
test("should delete a one letter word surrounded by visible space", async () => {
await testEditor({
contentBefore: "<p>ab c[] de</p>",
stepFunction: deleteBackward,
contentAfter: "<p>ab []&nbsp;de</p>",
});
await testEditor({
contentBefore: "<p>ab [c] de</p>",
stepFunction: deleteBackward,
contentAfter: "<p>ab []&nbsp;de</p>",
});
});
test("should delete a one letter word preceded by visible space (end of block)", async () => {
await testEditor({
contentBefore: "<p>a b[]</p>",
stepFunction: deleteBackward,
contentAfter: "<p>a&nbsp;[]</p>",
});
await testEditor({
contentBefore: "<p>a [b]</p>",
stepFunction: deleteBackward,
contentAfter: "<p>a&nbsp;[]</p>",
});
});
test("should delete an empty paragraph in a table cell", async () =>
await testEditor({
contentBefore:
"<table><tbody><tr><td><p>a<br></p><p>[]<br></p></td></tr></tbody></table>",
stepFunction: deleteBackward,
contentAfter: "<table><tbody><tr><td><p>a[]</p></td></tr></tbody></table>",
}));
test("should fill empty block with a <br>", async () => {
await testEditor({
contentBefore: "<p>a[]</p>",
stepFunction: deleteBackward,
contentAfter: "<p>[]<br></p>",
});
await testEditor({
contentBefore: "<p><img>[]</p>",
stepFunction: deleteBackward,
contentAfter: "<p>[]<br></p>",
});
});
test("should merge a paragraph with text into a paragraph with text removing spaces", async () => {
await testEditor({
contentBefore: "<p>ab </p> <p> []cd</p>",
stepFunction: deleteBackward,
// This is a tricky case: the spaces after ab are
// visible on Firefox but not on Chrome... to be
// consistent we enforce the space removal here but
// maybe not a good idea... see next case ->
contentAfter: "<p>ab[]cd</p>",
});
await testEditor({
contentBefore: "<p>ab <br></p> <p> []cd</p>",
stepFunction: deleteBackward,
// This is the same visible case as the one above. The
// difference is that here the space after ab is visible
// on both Firefox and Chrome, so it should stay
// visible.
contentAfter: "<p>ab []cd</p>",
});
});
test("should remove a br and remove following spaces", async () => {
await testEditor({
contentBefore: "<p>ab<br><b>[] </b>cd</p>",
stepFunction: deleteBackward,
contentAfter: "<p>ab[]cd</p>",
});
await testEditor({
contentBefore: "<p>ab<br><b>[] x</b>cd</p>",
stepFunction: deleteBackward,
contentAfter: "<p>ab[]<b>x</b>cd</p>",
});
});
test("should ignore empty inline node between blocks being merged", async () => {
await testEditor({
contentBefore: "<div><p>abc</p><i> </i><p>[]def</p></div>",
stepFunction: deleteBackward,
contentAfter: "<div><p>abc[]def</p></div>",
});
});
test("should merge in nested paragraphs and remove invisible inline content", async () => {
await testEditor({
contentBefore:
'<custom-block style="display: block;"><p>ab</p> </custom-block><p>[]c</p>',
stepFunction: deleteBackward,
contentAfter: '<custom-block style="display: block;"><p>ab[]c</p></custom-block>',
});
await testEditor({
contentBefore:
'<custom-block style="display: block;"><p>ab</p> <i> </i> </custom-block><p>[]c</p>',
stepFunction: deleteBackward,
contentAfter: '<custom-block style="display: block;"><p>ab[]c</p></custom-block>',
});
});
test("should not merge in nested blocks if inline content afterwards", async () => {
await testEditor({
contentBefore:
'<custom-block style="display: block;"><p>ab</p>de</custom-block><p>[]fg</p>',
stepFunction: deleteBackward,
contentAfter:
'<custom-block style="display: block;"><p>ab</p>de[]fg</custom-block>',
});
await testEditor({
contentBefore:
'<custom-block style="display: block;"><p>ab</p><img></custom-block><p>[]fg</p>',
stepFunction: deleteBackward,
contentAfter:
'<custom-block style="display: block;"><p>ab</p><img>[]fg</custom-block>',
});
});
test("should move paragraph content to empty block", async () => {
await testEditor({
contentBefore: "<p>abc</p><h1><br></h1><p>[]def</p>",
stepFunction: deleteBackward,
contentAfter: "<p>abc</p><p>[]def</p>",
});
});
test("should remove only one br between contents", async () => {
await testEditor({
contentBefore: "<p>abc<br>[]<br>def</p>",
stepFunction: deleteBackward,
contentAfter: "<p>abc[]<br>def</p>",
});
});
test("should remove an empty block instead of merging it", async () => {
await testEditor({
contentBefore: "<p><br></p><p>[]<br></p>",
stepFunction: deleteBackward,
contentAfter: "<p>[]<br></p>",
});
});
test("should not remove a table without selecting it", async () => {
await testEditor({
contentBefore: unformat(
`<p>ab</p>
<table><tbody>
<tr><td>cd</td><td>ef</td></tr>
<tr><td>gh</td><td>ij</td></tr>
</tbody></table>
<p>[]kl</p>`
),
stepFunction: deleteBackward,
contentAfter: unformat(
`<p>ab</p>
<table><tbody>
<tr><td>cd</td><td>ef</td></tr>
<tr><td>gh</td><td>ij</td></tr>
</tbody></table>
<p>[]kl</p>`
),
});
});
test("should not merge a table into its previous sibling", async () => {
await testEditor({
contentBefore: unformat(
`<p>ab</p>
<table><tbody>
<tr><td>[]cd</td><td>ef</td></tr>
<tr><td>gh</td><td>ij</td></tr>
</tbody></table>
<p>kl</p>`
),
stepFunction: deleteBackward,
contentAfter: unformat(
`<p>ab</p>
<table><tbody>
<tr><td>[]cd</td><td>ef</td></tr>
<tr><td>gh</td><td>ij</td></tr>
</tbody></table>
<p>kl</p>`
),
});
});
test("should delete an image that is displayed as a block", async () => {
await testEditor({
// @phoenix content adapted to make it valid html
contentBefore: unformat(`<div>a[b<img style="display: block;">c]d</div>`),
stepFunction: deleteBackward,
contentAfter: unformat(`<div>a[]d</div>`),
});
});
});
});
describe("Selection not collapsed", () => {
test("ZWS : should keep inline block", async () => {
await testEditor({
contentBefore: '<div><p>ab <span class="style">[c]</span> d</p></div>',
stepFunction: async (editor) => {
deleteBackward(editor);
},
contentAfterEdit:
'<div><p>ab <span class="style" data-oe-zws-empty-inline="">[]\u200B</span> d</p></div>',
contentAfter: '<div><p>ab <span class="style">[]\u200B</span> d</p></div>',
});
await testEditor({
contentBefore: '<div><p>ab <span class="style">[c]</span> d</p></div>',
stepFunction: async (editor) => {
deleteBackward(editor);
await insertText(editor, "x");
},
contentAfterEdit: '<div><p>ab <span class="style">x[]</span> d</p></div>',
contentAfter: '<div><p>ab <span class="style">x[]</span> d</p></div>',
});
await testEditor({
contentBefore: "<div><p>ab <span>[c]</span> d</p></div>",
stepFunction: async (editor) => {
deleteBackward(editor);
},
contentAfterEdit:
'<div><p>ab <span data-oe-zws-empty-inline="">[]\u200B</span> d</p></div>',
contentAfter: "<div><p>ab []&nbsp;d</p></div>",
});
await testEditor({
contentBefore: '<div><p>ab<span class="style">[c]</span>d</p></div>',
stepFunction: async (editor) => {
deleteBackward(editor);
await insertText(editor, "x");
},
contentAfterEdit: '<div><p>ab<span class="style">x[]</span>d</p></div>',
contentAfter: '<div><p>ab<span class="style">x[]</span>d</p></div>',
});
await testEditor({
contentBefore: '<div><p>ab <span class="style">[cde]</span> f</p></div>',
stepFunction: async (editor) => {
deleteBackward(editor);
await insertText(editor, "x");
},
contentAfterEdit: '<div><p>ab <span class="style">x[]</span> f</p></div>',
contentAfter: '<div><p>ab <span class="style">x[]</span> f</p></div>',
});
});
test("should merge node correctly (1)", async () => {
await testEditor({
contentBefore: '<div>a<span class="a">b[c</span><p>d]e</p>f<br>g</div>',
stepFunction: deleteBackward,
// FIXME ?? : Maybe this should bing the content inside the <p>
// Instead of removing the <p>,
// ex : <div><p>a<span class="a">b[]</span>e</p>f<br>g</div>
contentAfter: '<div>a<span class="a">b[]</span>e<br>f<br>g</div>',
});
});
test("should merge node correctly (2)", async () => {
await testEditor({
contentBefore: '<div>a<p>b[c</p><span class="a">d]e</span>f<p>xxx</p></div>',
stepFunction: deleteBackward,
contentAfter: '<div>a<p>b[]<span class="a">e</span>f</p><p>xxx</p></div>',
});
});
test("should delete part of the text within a paragraph (backward, forward selection)", async () => {
// Forward selection
await testEditor({
contentBefore: "<p>ab[cd]ef</p>",
stepFunction: deleteBackward,
contentAfter: "<p>ab[]ef</p>",
});
});
test("should delete part of the text within a paragraph (backward, backward selection)", async () => {
// Backward selection
await testEditor({
contentBefore: "<p>ab]cd[ef</p>",
stepFunction: deleteBackward,
contentAfter: "<p>ab[]ef</p>",
});
});
test("should delete across two paragraphs", async () => {
// Forward selection
await testEditor({
contentBefore: "<p>ab[cd</p><p>ef]gh</p>",
stepFunction: deleteBackward,
contentAfter: "<p>ab[]gh</p>",
});
// Backward selection
await testEditor({
contentBefore: "<p>ab]cd</p><p>ef[gh</p>",
stepFunction: deleteBackward,
contentAfter: "<p>ab[]gh</p>",
});
});
test("should delete part of the text across two paragraphs (backward, forward selection)", async () => {
await testEditor({
contentBefore: "<div>a<p>b[c</p><p>d]e</p>f</div>",
stepFunction: deleteBackward,
contentAfter: "<div>a<p>b[]e</p>f</div>",
});
});
test("should delete part of the text across two paragraphs (backward, backward selection)", async () => {
await testEditor({
contentBefore: "<div>a<p>b]c</p><p>d[e</p>f</div>",
stepFunction: deleteBackward,
contentAfter: "<div>a<p>b[]e</p>f</div>",
});
});
test("should delete all the text in a paragraph", async () => {
// Forward selection
await testEditor({
contentBefore: "<p>[abc]</p>",
stepFunction: deleteBackward,
contentAfter: "<p>[]<br></p>",
});
// Backward selection
await testEditor({
contentBefore: "<p>]abc[</p>",
stepFunction: deleteBackward,
contentAfter: "<p>[]<br></p>",
});
});
test("should delete a complex selection accross format nodes and multiple paragraphs", async () => {
// Forward selection
await testEditor({
contentBefore: "<p><b>ab[cd</b></p><p><b>ef<br>gh</b>ij<i>kl]</i>mn</p>",
stepFunction: deleteBackward,
contentAfter: "<p><b>ab[]</b>mn</p>",
});
await testEditor({
contentBefore: "<p><b>ab[cd</b></p><p><b>ef<br>gh</b>ij<i>k]l</i>mn</p>",
stepFunction: deleteBackward,
contentAfter: "<p><b>ab[]</b><i>l</i>mn</p>",
});
// Backward selection
await testEditor({
contentBefore: "<p><b>ab]cd</b></p><p><b>ef<br>gh</b>ij<i>kl[</i>mn</p>",
stepFunction: deleteBackward,
contentAfter: "<p><b>ab[]</b>mn</p>",
});
await testEditor({
contentBefore: "<p><b>ab]cd</b></p><p><b>ef<br>gh</b>ij<i>k[l</i>mn</p>",
stepFunction: deleteBackward,
contentAfter: "<p><b>ab[]</b><i>l</i>mn</p>",
});
});
//
test("should delete all contents of a complex DOM with format nodes and multiple paragraphs (backward, forward selection)", async () => {
await testEditor({
contentBefore: "<p><b>[abcd</b></p><p><b>ef<br>gh</b>ij<i>kl</i>mn]</p>",
stepFunction: deleteBackward,
contentAfter: "<p>[]<br></p>",
});
});
test("should delete all contents of a complex DOM with format nodes and multiple paragraphs (backward, backward selection)", async () => {
await testEditor({
contentBefore: "<p><b>]abcd</b></p><p><b>ef<br>gh</b>ij<i>kl</i>mn[</p>",
stepFunction: deleteBackward,
contentAfter: "<p>[]<br></p>",
});
});
test("should delete a selection accross a heading1 and a paragraph", async () => {
// Forward selection
await testEditor({
contentBefore: "<h1>ab [cd</h1><p>ef]gh</p>",
stepFunction: deleteBackward,
contentAfter: "<h1>ab []gh</h1>",
});
// Backward selection
await testEditor({
contentBefore: "<h1>ab ]cd</h1><p>ef[gh</p>",
stepFunction: deleteBackward,
contentAfter: "<h1>ab []gh</h1>",
});
});
test("should delete a selection from the beginning of a heading1 with a format to the middle of a paragraph", async () => {
// Forward selection
await testEditor({
contentBefore: "<h1><b>[abcd</b></h1><p>ef]gh1</p>",
stepFunction: deleteBackward,
contentAfter: "<p>[]gh1</p>",
});
await testEditor({
contentBefore: "<h1>[<b>abcd</b></h1><p>ef]gh2</p>",
stepFunction: deleteBackward,
contentAfter: "<p>[]gh2</p>",
});
// Backward selection
await testEditor({
contentBefore: "<h1><b>]abcd</b></h1><p>ef[gh3</p>",
stepFunction: deleteBackward,
contentAfter: "<p>[]gh3</p>",
});
await testEditor({
contentBefore: "<h1>]<b>abcd</b></h1><p>ef[gh4</p>",
stepFunction: deleteBackward,
contentAfter: "<p>[]gh4</p>",
});
});
test("should delete a heading (triple click backspace) (1)", async () => {
const { editor, el } = await setupEditor("<h1>abc</h1><p>def</p>", {});
tripleClick(el.querySelector("h1"));
await microTick();
// Chrome puts the cursor at the start of next sibling
expect(getContent(el)).toBe("<h1>[abc</h1><p>]def</p>");
await tick();
// The Editor corrects it on selection change
expect(getContent(el)).toBe("<h1>[abc]</h1><p>def</p>");
tripleClick(el.querySelector("h1"));
await microTick();
// Chrome puts the cursor at the start of next sibling
expect(getContent(el)).toBe("<h1>[abc</h1><p>]def</p>");
await tick();
// The Editor corrects it repeatedly on selection change
expect(getContent(el)).toBe("<h1>[abc]</h1><p>def</p>");
deleteBackward(editor);
expect(getContent(el)).toBe(
'<h1 placeholder="Heading 1" class="o-we-hint">[]<br></h1><p>def</p>'
);
});
test("should delete a heading (triple click backspace) (2)", async () => {
const { editor, el } = await setupEditor("<h1>abc</h1><p><br></p><p>def</p>", {});
tripleClick(el.querySelector("h1"));
await microTick();
// Chrome puts the cursor at the start of next sibling
expect(getContent(el)).toBe("<h1>[abc</h1><p>]<br></p><p>def</p>");
await tick();
// The Editor corrects it on selection change
expect(getContent(el)).toBe("<h1>[abc]</h1><p><br></p><p>def</p>");
deleteBackward(editor);
expect(getContent(el)).toBe(
'<h1 placeholder="Heading 1" class="o-we-hint">[]<br></h1><p><br></p><p>def</p>'
);
});
test("should delete last character of paragraph and merge the two p elements", async () => {
await testEditor({
contentBefore: "<p>ab[c</p><p>]def</p>",
stepFunction: deleteBackward,
contentAfter: "<p>ab[]def</p>",
});
await testEditor({
contentBefore: "<p>ab[c</p><p>]<br></p><p>def</p>",
stepFunction: deleteBackward,
contentAfter: "<p>ab[]</p><p>def</p>",
});
});
test("should delete first character of paragraph, as well as selected paragraph break", async () => {
await testEditor({
contentBefore: "<p>abc[</p><p>d]ef</p>",
stepFunction: deleteBackward,
contentAfter: "<p>abc[]ef</p>",
});
});
test("should remove a fully selected table", async () => {
await testEditor({
contentBefore: unformat(
`<p>a[b</p>
<table><tbody>
<tr><td>cd</td><td>ef</td></tr>
<tr><td>gh</td><td>ij</td></tr>
</tbody></table>
<p>k]l</p>`
),
stepFunction: deleteBackward,
contentAfter: "<p>a[]l</p>",
});
});
test("should remove a fully selected nested table", async () => {
await testEditor({
contentBefore: unformat(
`<p>a[b</p>
<table><tbody>
<tr>
<td>
<table><tbody>
<tr><td><br></td><td><br></td></tr>
<tr><td><br></td><td><br></td></tr>
</tbody></table>
</td>
<td>ef</td></tr>
<tr><td>gh</td><td>ij</td></tr>
</tbody></table>
<p>k]l</p>`
),
stepFunction: deleteBackward,
contentAfter: "<p>a[]l</p>",
});
});
test("should delete nothing when in an empty table cell", async () => {
await testEditor({
contentBefore:
"<table><tbody><tr><td>abc</td><td>[]<br></td><td>abc</td></tr></tbody></table>",
stepFunction: deleteBackward,
contentAfter:
"<table><tbody><tr><td>abc</td><td>[]<br></td><td>abc</td></tr></tbody></table>",
});
});
test("should delete nothing when in an empty paragraph in a table cell", async () => {
await testEditor({
contentBefore:
"<table><tbody><tr><td>abc</td><td><p>[]<br></p></td></tr></tbody></table>",
stepFunction: deleteBackward,
contentAfter:
"<table><tbody><tr><td>abc</td><td><p>[]<br></p></td></tr></tbody></table>",
});
});
test("should only remove the text content of cells in a partly selected table", async () => {
await testEditor({
contentBefore: unformat(
`<table><tbody>
<tr><td>cd</td><td class="o_selected_td">e[f</td><td>gh</td></tr>
<tr><td>ij</td><td class="o_selected_td">k]l</td><td>mn</td></tr>
<tr><td>op</td><td>qr</td><td>st</td></tr>
</tbody></table>`
),
stepFunction: deleteBackward,
contentAfter: unformat(
`<table><tbody>
<tr><td>cd</td><td>[]<br></td><td>gh</td></tr>
<tr><td>ij</td><td><br></td><td>mn</td></tr>
<tr><td>op</td><td>qr</td><td>st</td></tr>
</tbody></table>`
),
});
});
test("should remove a row in a partly selected table", async () => {
await testEditor({
contentBefore: unformat(
`<table><tbody>
<tr><td class="o_selected_td">[ab</td><td class="o_selected_td">cd]</td></tr>
<tr><td>ef</td><td>gh</td></tr>
</tbody></table>`
),
stepFunction: deleteBackward,
contentAfter: unformat(
`<table><tbody>
<tr><td>[]ef</td><td>gh</td></tr>
</tbody></table>`
),
});
});
test("should remove a column in a partly selected table", async () => {
await testEditor({
contentBefore: unformat(
`<table><tbody>
<tr><td class="o_selected_td">[ab</td> <td>cd</td></tr>
<tr><td class="o_selected_td">ef]</td> <td>gh</td></tr>
</tbody></table>`
),
stepFunction: deleteBackward,
contentAfter: unformat(
`<table><tbody>
<tr><td>[]cd</td></tr>
<tr><td>gh</td></tr>
</tbody></table>`
),
});
});
test("should remove some text and a table (even if the table is partly selected)", async () => {
await testEditor({
contentBefore: unformat(
`<p>a[b</p>
<table><tbody>
<tr><td>cd</td><td>ef</td></tr>
<tr><td>g]h</td><td>ij</td></tr>
</tbody></table>
<p>kl</p>`
),
stepFunction: deleteBackward,
contentAfter: unformat(
`<p>a[]</p>
<p>kl</p>`
),
});
});
test("should remove a table and some text (even if the table is partly selected)", async () => {
await testEditor({
contentBefore: unformat(
`<p>ab</p>
<table><tbody>
<tr><td>cd</td><td>ef</td></tr>
<tr><td>gh</td><td>i[j</td></tr>
</tbody></table>
<p>k]l</p>`
),
stepFunction: deleteBackward,
contentAfter: unformat(
`<p>ab</p>
<p>[]l</p>`
),
});
});
test("should remove some text, a table and some more text", async () => {
await testEditor({
contentBefore: unformat(
`<p>a[b</p>
<table><tbody>
<tr><td>cd</td><td>ef</td></tr>
<tr><td>gh</td><td>ij</td></tr>
</tbody></table>
<p>k]l</p>`
),
stepFunction: deleteBackward,
contentAfter: `<p>a[]l</p>`,
});
});
test("should remove a selection of several tables", async () => {
await testEditor({
contentBefore: unformat(
`<table><tbody>
<tr><td>cd</td><td>e[f</td></tr>
<tr><td>gh</td><td>ij</td></tr>
</tbody></table>
<table><tbody>
<tr><td>cd</td><td>ef</td></tr>
<tr><td>gh</td><td>ij</td></tr>
</tbody></table>
<table><tbody>
<tr><td>cd</td><td>e]f</td></tr>
<tr><td>gh</td><td>ij</td></tr>
</tbody></table>`
),
stepFunction: deleteBackward,
contentAfter: `<p>[]<br></p>`,
});
});
test("should remove a selection including several tables", async () => {
await testEditor({
contentBefore: unformat(
`<p>0[1</p>
<table><tbody>
<tr><td>cd</td><td>ef</td></tr>
<tr><td>gh</td><td>ij</td></tr>
</tbody></table>
<p>23</p>
<table><tbody>
<tr><td>cd</td><td>ef</td></tr>
<tr><td>gh</td><td>ij</td></tr>
</tbody></table>
<p>45</p>
<table><tbody>
<tr><td>cd</td><td>ef</td></tr>
<tr><td>gh</td><td>ij</td></tr>
</tbody></table>
<p>67]</p>`
),
stepFunction: deleteBackward,
contentAfter: `<p>0[]</p>`,
});
});
test("should remove everything, including several tables", async () => {
await testEditor({
contentBefore: unformat(
`<p>[01</p>
<table><tbody>
<tr><td>cd</td><td>ef</td></tr>
<tr><td>gh</td><td>ij</td></tr>
</tbody></table>
<p>23</p>
<table><tbody>
<tr><td>cd</td><td>ef</td></tr>
<tr><td>gh</td><td>ij</td></tr>
</tbody></table>
<p>45</p>
<table><tbody>
<tr><td>cd</td><td>ef</td></tr>
<tr><td>gh</td><td>ij</td></tr>
</tbody></table>
<p>67]</p>`
),
stepFunction: deleteBackward,
contentAfter: `<p>[]<br></p>`,
});
});
test("should do nothing with selection before table and start of middle cell", async () => {
await testEditor({
contentBefore: unformat(
`[<table><tbody>
<tr><td><br></td><td><br></td></tr>
<tr><td><br></td><td>]<br></td></tr>
</tbody></table>`
),
stepFunction: deleteBackward,
contentAfter: unformat(
`<table><tbody>
<tr><td>[]<br></td><td><br></td></tr>
<tr><td><br></td><td><br></td></tr>
</tbody></table>`
),
});
});
test("should empty an inline unremovable but remain in it", async () => {
await testEditor({
contentBefore: '<p>ab<b class="oe_unremovable">[cd]</b>ef</p>',
stepFunction: deleteBackward,
contentAfter: '<p>ab<b class="oe_unremovable">[]\u200B</b>ef</p>',
});
});
test("should delete if first element and append in paragraph", async () => {
await testEditor({
contentBefore: `<blockquote><br>[]</blockquote>`,
stepFunction: deleteBackward,
contentAfter: `<p>[]<br></p>`,
});
await testEditor({
contentBefore: `<h1><br>[]</h1>`,
stepFunction: deleteBackward,
contentAfter: `<p>[]<br></p>`,
});
await testEditor({
contentBefore: `<h4><br>[]</h4>`,
stepFunction: deleteBackward,
contentAfter: `<p>[]<br></p>`,
});
});
test("should not delete the block and appends a paragraph if the element has textContent ", async () => {
await testEditor({
contentBefore: `<h1>[]abc</h1>`,
stepFunction: deleteBackward,
contentAfter: `<h1>[]abc</h1>`,
});
await testEditor({
contentBefore: `<h1><font style="background-color: rgb(255, 0, 0);">[]abc</font></h1>`,
stepFunction: deleteBackward,
contentAfter: `<h1><font style="background-color: rgb(255, 0, 0);">[]abc</font></h1>`,
});
await testEditor({
contentBefore: `<table><tbody><tr><td><h1>[]ab</h1></td><td>cd</td><td>ef</td></tr><tr><td><br></td><td><br></td><td><br></td></tr></tbody></table>`,
stepFunction: deleteBackward,
contentAfter: `<table><tbody><tr><td><h1>[]ab</h1></td><td>cd</td><td>ef</td></tr><tr><td><br></td><td><br></td><td><br></td></tr></tbody></table>`,
});
});
test("should not delete styling nodes if not selected", async () => {
// deleteBackward selection
await testEditor({
contentBefore: '<p>a<span class="style-class">[bcde]</span>f</p>',
stepFunction: deleteBackward,
contentAfter: '<p>a<span class="style-class">[]\u200B</span>f</p>',
});
});
test("should delete styling nodes when delete if empty with space around inline (backward)", async () => {
// deleteBackward selection
await testEditor({
contentBefore: '<p>ab <span class="style-class">[cd]</span> ef</p>',
stepFunction: async (editor) => {
deleteBackward(editor);
deleteBackward(editor);
},
contentAfter: "<p>ab[] ef</p>",
});
});
test("should delete styling nodes when delete if empty (backward)", async () => {
await testEditor({
contentBefore: '<p>uv<span class="style-class">[wx]</span>yz</p>',
stepFunction: async (editor) => {
deleteBackward(editor);
deleteBackward(editor);
},
contentAfter: "<p>u[]yz</p>",
});
});
test("should transform the last space of a container to an &nbsp; after removing the last word through deleteRange", async () => {
await testEditor({
contentBefore: `<p>a [b]</p>`,
stepFunction: async (editor) => {
deleteBackward(editor);
},
contentAfter: `<p>a&nbsp;[]</p>`,
});
});
describe("Nested editable zone (inside contenteditable=false element)", () => {
test("should extend the range to fully include contenteditable=false that are partially selected at the end of the range", async () => {
await testEditor({
contentBefore: unformat(`
<p>before[o</p>
<div contenteditable="false">
<div contenteditable="true"><p>intruder]</p></div>
</div>
<p>after</p>`),
stepFunction: async (editor) => {
deleteBackward(editor);
},
contentAfter: unformat(`
<p>before[]</p><p>after</p>`),
});
});
// @todo @phoenix: review this spec. It should not merge, like the test above.
test("should extend the range to fully include contenteditable=false that are partially selected at the start of the range", async () => {
await testEditor({
contentBefore: unformat(`
<p>before</p>
<div contenteditable="false">
<div contenteditable="true"><p>[intruder</p></div>
</div>
<p>o]after</p>`),
stepFunction: async (editor) => {
deleteBackward(editor);
},
contentAfter: unformat(`
<p>before[]after</p>`),
});
});
test("should remove element which is contenteditable=true even if their parent is contenteditable=false", async () => {
await testEditor({
contentBefore: unformat(`
<p>before[o</p>
<div contenteditable="false">
<div contenteditable="true"><p>intruder</p></div>
</div>
<p>o]after</p>`),
stepFunction: async (editor) => {
deleteBackward(editor);
},
contentAfter: unformat(`
<p>before[]after</p>`),
});
});
test("should remove empty paragraph and content from the second one", async () => {
await testEditor({
contentBefore: "<p>ab</p><p>[<br></p><p>d]ef</p>",
stepFunction: deleteBackward,
contentAfter: "<p>ab</p><p>[]ef</p>",
});
});
test.todo("should not delete in contenteditable=false 1", async () => {
await testEditor({
contentBefore: `<p contenteditable="false">ab[cd]ef</p>`,
stepFunction: deleteBackward,
contentAfter: `<p contenteditable="false">ab[cd]ef</p>`,
});
});
test.todo("should not delete in contenteditable=false 2", async () => {
await testEditor({
contentBefore: `<div contenteditable="false">
<p>a[b</p>
<p>cd</p>
<p>e]f</p>
</div>`,
stepFunction: deleteBackward,
contentAfter: `<div contenteditable="false">
<p>a[b</p>
<p>cd</p>
<p>e]f</p>
</div>`,
});
});
test("should fill the inner editable with a P when all of its contents are removed", async () => {
await testEditor({
contentBefore: unformat(`
<div contenteditable="false">
<div contenteditable="true">[<p>abc</p>]</div>
</div>`),
stepFunction: async (editor) => {
deleteBackward(editor);
},
contentAfter: unformat(`
<div contenteditable="false">
<div contenteditable="true"><p>[]<br></p></div>
</div>`),
});
});
test("should fill the inner editable with a P when all of its contents are removed (2)", async () => {
await testEditor({
contentBefore: unformat(`
<div contenteditable="false">
<div contenteditable="true">[<h1>abc</h1><p>def</p>]</div>
</div>`),
stepFunction: async (editor) => {
deleteBackward(editor);
},
contentAfter: unformat(`
<div contenteditable="false">
<div contenteditable="true"><p>[]<br></p></div>
</div>`),
});
});
});
});
Reference in New Issue Copy Permalink