ab x[]\u200B cd
', }); }); - it('should insert a char into a oe-zws-empty-inline span removing the zws and oe-zws-empty-inline', async () => { + it('should insert a char into a data-oe-zws-empty-inline span removing the zws and data-oe-zws-empty-inline', async () => { await testEditor(BasicEditor, { - contentBefore: 'ab[]\u200Bcd
', + contentBefore: 'ab[]\u200Bcd
', stepFunction: async editor => { await insertText(editor, 'x'); }, contentAfter: 'abx[]cd
', }); }); - it('should insert a char into a oe-zws-empty-inline span surrounded by space without removing the zws and oe-zws-empty-inline', async () => { + it('should insert a char into a data-oe-zws-empty-inline span surrounded by space without removing the zws and data-oe-zws-empty-inline', async () => { await testEditor(BasicEditor, { - contentBefore: 'ab[]\u200Bcd
', + contentBefore: 'ab[]\u200Bcd
', stepFunction: async editor => { await insertText(editor, 'x'); }, @@ -3653,12 +3652,8 @@ X[] stepFunction: async editor => { // simulate preview editor.historyPauseSteps(); - try { - applyInlineStyle(editor, (el) => el.style.color = 'lime'); - // a[bcd]e with bcd in lime - } finally { - editor.historyUnpauseSteps(); - } + editor.execCommand('bold'); + editor.historyUnpauseSteps(); // simulate preview's reset editor.historyRevertCurrentStep(); // back to initial state }, @@ -4262,11 +4257,11 @@ X[] 'a[bc
' + + contentAfterEdit: 'a[bc
' + '| ab | ' + - 'cd | ' + - 'ef] | ' + + 'ab | ' + + 'cd | ' + + 'ef] | ' + '
a]bc
', stepFunction: async editor => editor.execCommand('bold'), contentAfterEdit: '| [ab | ' + - 'cd | ' + - 'ef | ' + + '[ab | ' + + 'cd | ' + + 'ef | ' + '
a]bc
', + 'a]bc
', }); }); it('should apply bold to some characters, a table and some more characters', async () => { @@ -4296,13 +4291,13 @@ X[] '' + 'a]bc
', stepFunction: async editor => editor.execCommand('bold'), - contentAfterEdit: 'a[bc
' + + contentAfterEdit: 'a[bc
' + '| ab | ' + - 'cd | ' + - 'ef | ' + + 'ab | ' + + 'cd | ' + + 'ef | ' + '
a]bc
', + 'a]bc
', }); }); it('should apply bold to some characters, a table, some more characters and another table', async () => { @@ -4320,17 +4315,17 @@ X[] 'a[bc
' + + contentAfterEdit: 'a[bc
' + '| ab | ' + - 'cd | ' + - 'ef | ' + + 'ab | ' + + 'cd | ' + + 'ef | ' + '
abc
' + + 'abc
' + '| ab | ' + - 'cd | ' + - 'ef] | ' + + 'ab | ' + + 'cd | ' + + 'ef] | ' + '
a]bc
', stepFunction: async editor => editor.execCommand('bold'), - contentAfterEdit: 'a[bc
' + + contentAfterEdit: 'a[bc
' + '| ab | ' + - 'cd | ' + - 'ef | ' + + 'ab | ' + + 'cd | ' + + 'ef | ' + '
abc
' + + 'abc
' + '| ab | ' + - 'cd | ' + - 'ef | ' + + 'ab | ' + + 'cd | ' + + 'ef | ' + '
a]bc
', + 'a]bc
', }); }); }); @@ -4591,8 +4586,8 @@ X[] '', stepFunction: async editor => editor.execCommand('bold'), contentAfterEdit: '| [ab | ' + - 'cd] | ' + + '[ab | ' + + 'cd] | ' + 'ef | ' + '
| [ab | ' + - 'cd | ' + - 'ef] | ' + + '[ab | ' + + 'cd | ' + + 'ef] | ' + '
| ab | cd | ef |
| [ab | ' + + '[ab | ' + 'cd | ' + 'ef | ' + '||||||||||||||
| ab | ' + + 'ab | ' + 'cd | ' + 'ef | ' + '||||||||||||||
| ab] | ' + + 'ab] | ' + 'cd | ' + 'ef | ' + '
| [ab | ' + - 'cd | ' + + '[ab | ' + + 'cd | ' + 'ef | ' + '|||||||||||||
| ab | ' + - 'cd] | ' + + 'ab | ' + + 'cd] | ' + 'ef | ' + '|||||||||||||
| [ab | ' + - 'cd | ' + - 'ef | ' + + '[ab | ' + + 'cd | ' + + 'ef | ' + '
| ab | ' + - 'cd | ' + - 'ef | ' + + 'ab | ' + + 'cd | ' + + 'ef | ' + '
| ab | ' + - 'cd | ' + - 'ef] | ' + + 'ab | ' + + 'cd | ' + + 'ef] | ' + '
ab[cde]fg
', - stepFunction: setFontSize('10px'), - contentAfter: 'ab[cde]fg
', - }); - }); - it('should change the font size of a whole heading after a triple click', async () => { - await testEditor(BasicEditor, { - contentBefore: ']cd
', - stepFunction: setFontSize('36px'), - contentAfter: 'cd
', - }); - }); - it('should get ready to type with a different font size', async () => { - await testEditor(BasicEditor, { - contentBefore: 'ab[]cd
', - stepFunction: setFontSize('36px'), - contentAfter: 'ab[]\u200Bcd
', - }); - }); - }); -}); diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/format.test.js b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/format.test.js index 51014ea8928..bf8f2494a50 100644 --- a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/format.test.js +++ b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/format.test.js @@ -1,5 +1,5 @@ +import { isSelectionFormat } from '../../src/utils/utils.js'; import { BasicEditor, testEditor, setTestSelection, Direction } from '../utils.js'; -import { applyInlineStyle } from '../../src/commands/commands.js'; const bold = async editor => { await editor.execCommand('bold'); @@ -13,177 +13,273 @@ const underline = async editor => { const strikeThrough = async editor => { await editor.execCommand('strikeThrough'); }; +const setFontSize = size => editor => editor.execCommand('setFontSize', size); + +const switchDirection = editor => editor.execCommand('switchDirection'); describe('Format', () => { - const b = (content, zws) => `ab[cde]fg
', stepFunction: bold, - contentAfter: `ab${b(`[cde]`)}fg
`, + contentAfter: `ab${strong(`[cde]`)}fg
`, }); }); it('should make a few characters not bold', async () => { await testEditor(BasicEditor, { - contentBefore: `${b(`ab[cde]fg`)}
`, + contentBefore: `${strong(`ab[cde]fg`)}
`, stepFunction: bold, - contentAfter: `${b(`ab${notB(`[cde]`)}fg`)}
`, + contentAfter: `${strong(`ab`)}[cde]${strong(`fg`)}
`, }); }); it('should make two paragraphs bold', async () => { await testEditor(BasicEditor, { contentBefore: '[abc
def]
', stepFunction: bold, - contentAfter: `${b(`[abc`)}
${b(`def]`)}
`, + contentAfter: `${strong(`[abc`)}
${strong(`def]`)}
`, }); }); it('should make two paragraphs not bold', async () => { await testEditor(BasicEditor, { - contentBefore: `${b(`[abc`)}
${b(`def]`)}
`, + contentBefore: `${strong(`[abc`)}
${strong(`def]`)}
`, stepFunction: bold, - contentAfter: `${notB(`[abc`)}
${notB(`def]`, 400)}
`, + contentAfter: `[abc
def]
`, }); }); it('should make a whole heading bold after a triple click', async () => { await testEditor(BasicEditor, { - contentBefore: `]cd
`, + contentBefore: `]cd
`, stepFunction: bold, - // TODO: ideally should restore regular h1 without span instead. - contentAfter: `cd
`, + contentAfter: `cd
`, }); }); it('should make a whole heading not bold after a triple click (heading is considered bold)', async () => { await testEditor(BasicEditor, { contentBefore: ']cd
', stepFunction: bold, - contentAfter: `cd
`, + contentAfter: `cd
`, }); }); it('should make a selection starting with bold text fully bold', async () => { await testEditor(BasicEditor, { - contentBefore: `${b(`[ab`)}
c]d
`, + contentBefore: `${strong(`[ab`)}
c]d
`, stepFunction: bold, - contentAfter: `${b(`[ab`)}
${b(`c]`)}d
`, + contentAfter: `${strong(`[ab`)}
${strong(`c]`)}d
`, }); }); it('should make a selection with bold text in the middle fully bold', async () => { await testEditor(BasicEditor, { - contentBefore: `[a${b(`b`)}
${b(`c`)}d]e
`, + contentBefore: `[a${strong(`b`)}
${strong(`c`)}d]e
`, stepFunction: bold, - contentAfter: `${b(`[ab`)}
${b(`cd]`)}e
`, + contentAfter: `${strong(`[ab`)}
${strong(`cd]`)}e
`, }); }); it('should make a selection ending with bold text fully bold', async () => { await testEditor(BasicEditor, { - contentBefore: `${b(`c]d`)}
`, + contentBefore: `${strong(`c]d`)}
`, stepFunction: bold, - contentAfter: `${b(`c]d`)}
`, + contentAfter: `${strong(`c]d`)}
`, }); }); it('should get ready to type in bold', async () => { await testEditor(BasicEditor, { contentBefore: 'ab[]cd
', stepFunction: bold, - contentAfterEdit: `ab${b(`[]\u200B`, 'first')}cd
`, + contentAfterEdit: `ab${strong(`[]\u200B`, 'first')}cd
`, contentAfter: `ab[]cd
`, }); }); it('should get ready to type in not bold', async () => { await testEditor(BasicEditor, { - contentBefore: `${b(`ab[]cd`)}
`, + contentBefore: `${strong(`ab[]cd`)}
`, stepFunction: bold, - contentAfterEdit: `${b(`ab${notB(`[]\u200B`, undefined, 'first')}cd`)}
`, - contentAfter: `${b(`ab[]cd`)}
`, + contentAfterEdit: `${strong(`ab`)}${span(`[]\u200B`, 'first')}${strong(`cd`)}
`, + contentAfter: `${strong(`ab[]cd`)}
`, + }); + }); + + + it('should remove a bold tag that was redondant while performing the command', async () => { + await repeatWithBoldTags(async (tag) => { + await testEditor(BasicEditor, { + contentBefore: `a${tag(`b${tag(`[c]`)}d`)}e
`, + stepFunction: bold, + contentAfter: `a${tag('b')}[c]${tag('d')}e
`, + }); + }); + }); + it('should remove a bold tag that was redondant with different tags while performing the command', async () => { + await testEditor(BasicEditor, { + contentBefore: `a${spanBold(`b${strong(`c${b(`[d]`)}e`)}f`)}g
`, + stepFunction: bold, + contentAfter: `a${spanBold(`bc`)}[d]${spanBold(`ef`)}g
`, + }); + }); + + describe('inside container or inline with class already bold', () => { + it('should force the font-weight to normal with an inline with class', async () => { + await testEditor(BasicEditor, { + styleContent: `.boldClass { font-weight: bold; }`, + contentBefore: `ab[cde]fg
`, stepFunction: italic, - contentAfter: `ab${i(`[cde]`)}fg
`, + contentAfter: `ab${em(`[cde]`)}fg
`, }); }); it('should make a few characters not italic', async () => { await testEditor(BasicEditor, { - contentBefore: `${i(`ab[cde]fg`)}
`, + contentBefore: `${em(`ab[cde]fg`)}
`, stepFunction: italic, - contentAfter: `${i(`ab${notI(`[cde]`)}fg`)}
`, + contentAfter: `${em(`ab`)}[cde]${em(`fg`)}
`, }); }); it('should make two paragraphs italic', async () => { await testEditor(BasicEditor, { contentBefore: '[abc
def]
', stepFunction: italic, - contentAfter: `${i(`[abc`)}
${i(`def]`)}
`, + contentAfter: `${em(`[abc`)}
${em(`def]`)}
`, }); }); it('should make two paragraphs not italic', async () => { await testEditor(BasicEditor, { - contentBefore: `${i(`[abc`)}
${i(`def]`)}
`, + contentBefore: `${em(`[abc`)}
${em(`def]`)}
`, stepFunction: italic, - contentAfter: `${notI(`[abc`)}
${notI(`def]`)}
`, + contentAfter: `[abc
def]
`, }); }); it('should make a whole heading italic after a triple click', async () => { await testEditor(BasicEditor, { contentBefore: `]cd
`, stepFunction: italic, - contentAfter: `cd
`, + contentAfter: `cd
`, }); }); it('should make a whole heading not italic after a triple click', async () => { await testEditor(BasicEditor, { - contentBefore: `]cd
`, + contentBefore: `]cd
`, stepFunction: italic, - // TODO: ideally should restore regular h1 without span instead. - contentAfter: `cd
`, + contentAfter: `cd
`, }); }); it('should make a selection starting with italic text fully italic', async () => { await testEditor(BasicEditor, { - contentBefore: `${i(`[ab`)}
c]d
`, + contentBefore: `${em(`[ab`)}
c]d
`, stepFunction: italic, - contentAfter: `${i(`[ab`)}
${i(`c]`)}d
`, + contentAfter: `${em(`[ab`)}
${em(`c]`)}d
`, }); }); it('should make a selection with italic text in the middle fully italic', async () => { await testEditor(BasicEditor, { - contentBefore: `[a${i(`b`)}
${i(`c`)}d]e
`, + contentBefore: `[a${em(`b`)}
${em(`c`)}d]e
`, stepFunction: italic, - contentAfter: `${i(`[ab`)}
${i(`cd]`)}e
`, + contentAfter: `${em(`[ab`)}
${em(`cd]`)}e
`, }); }); it('should make a selection ending with italic text fully italic', async () => { await testEditor(BasicEditor, { - contentBefore: `[ab
${i(`c]d`)}
`, + contentBefore: `[ab
${em(`c]d`)}
`, stepFunction: italic, - contentAfter: `${i(`[ab`)}
${i(`c]d`)}
`, + contentAfter: `${em(`[ab`)}
${em(`c]d`)}
`, }); }); it('should get ready to type in italic', async () => { await testEditor(BasicEditor, { contentBefore: `ab[]cd
`, stepFunction: italic, - contentAfterEdit: `ab${i(`[]\u200B`, 'first')}cd
`, + contentAfterEdit: `ab${em(`[]\u200B`, 'first')}cd
`, contentAfter: `ab[]cd
`, }); }); it('should get ready to type in not italic', async () => { await testEditor(BasicEditor, { - contentBefore: `${i(`ab[]cd`)}
`, + contentBefore: `${em(`ab[]cd`)}
`, stepFunction: italic, - contentAfterEdit: `${i(`ab${notI(`[]\u200B`, 'first')}cd`)}
`, - contentAfter: `${i(`ab[]cd`)}
`, + contentAfterEdit: `${em(`ab`)}${span(`[]\u200B`, 'first')}${em(`cd`)}
`, + contentAfter: `${em(`ab[]cd`)}
`, }); }); }); - const u = (content, zws) => `${u(`ab[cde]fg`)}
`, stepFunction: underline, - contentAfter: `${u(`ab[`)}cde]${u(`fg`)}
`, + contentAfter: `${u(`ab`)}[cde]${u(`fg`)}
`, }); }); it('should make two paragraphs underline', async () => { @@ -260,12 +356,11 @@ describe('Format', () => { await testEditor(BasicEditor, { contentBefore: `${u(`ab[]cd`)}
`, stepFunction: underline, - contentAfterEdit: `${u(`ab`)}\u200B[]${u(`cd`)}
`, - contentAfter: `${u(`ab`)}[]${u(`cd`)}
`, + contentAfterEdit: `${u(`ab`)}${span(`[]\u200B`, 'first')}${u(`cd`)}
`, + contentAfter: `${u(`ab[]cd`)}
`, }); }); }); - const s = (content, zws) => `${s(`ab[cde]fg`)}
`, stepFunction: strikeThrough, - contentAfter: `${s(`ab[`)}cde]${s(`fg`)}
`, + contentAfter: `${s(`ab`)}[cde]${s(`fg`)}
`, }); }); it('should make a few characters strikeThrough then remove style inside', async () => { @@ -286,7 +381,7 @@ describe('Format', () => { contentBefore: `ab[c d]ef
`, stepFunction: async editor => { await strikeThrough(editor); - const styleSpan = editor.editable.querySelector('span[style="text-decoration-line: line-through;"]').childNodes[0]; + const styleSpan = editor.editable.querySelector('s').childNodes[0]; const selection = { anchorNode: styleSpan, anchorOffset: 1, @@ -297,7 +392,7 @@ describe('Format', () => { await setTestSelection(selection); await strikeThrough(editor); }, - contentAfter: `ab${s(`c[`)} ]${s(`d`)}ef
`, + contentAfter: `ab${s(`c`)}[ ]${s(`d`)}ef
`, }); }); it('should make strikeThrough then more then remove', async () => { @@ -398,18 +493,19 @@ describe('Format', () => { await testEditor(BasicEditor, { contentBefore: `${s(`ab[]cd`)}
`, stepFunction: strikeThrough, - contentAfterEdit: `${s(`ab`)}\u200B[]${s(`cd`)}
`, - contentAfter: `${s(`ab`)}[]${s(`cd`)}
`, + contentAfterEdit: `${s(`ab`)}${span(`[]\u200B`, 'first')}${s(`cd`)}
`, + contentAfter: `${s(`ab[]cd`)}
`, }); }); }); + describe('underline + strikeThrough', () => { it('should get ready to write in strikeThrough without underline (underline was first)', async () => { await testEditor(BasicEditor, { contentBefore: `ab${u(s(`cd[]ef`))}
`, stepFunction: underline, - contentAfterEdit: `ab${u(s(`cd`))}${s(`\u200b[]`, 'last')}${u(s(`ef`))}
`, - contentAfter: `ab${u(s(`cd`))}[]${u(s(`ef`))}
`, + contentAfterEdit: `ab${u(s(`cd`))}${s(`[]\u200b`, 'last')}${u(s(`ef`))}
`, + contentAfter: `ab${u(s(`cd[]ef`))}
`, }); }); it('should restore underline after removing it (collapsed, strikeThrough)', async () => { @@ -417,22 +513,22 @@ describe('Format', () => { contentBefore: `ab${u(s(`cd`))}${s(`\u200b[]`, 'first')}${u(s(`ef`))}
`, stepFunction: underline, contentAfterEdit: `ab${u(s(`cd`))}${s(u(`[]\u200b`, 'first'), 'first')}${u(s(`ef`))}
`, - contentAfter: `ab${u(s(`cd`))}[]${u(s(`ef`))}
`, + contentAfter: `ab${u(s(`cd[]ef`))}
`, }); }); it('should remove underline after restoring it after removing it (collapsed, strikeThrough)', async () => { await testEditor(BasicEditor, { contentBefore: `ab${u(s(`cd`))}${s(u(`[]\u200b`, 'first'))}${u(s(`ef`))}
`, stepFunction: underline, - contentAfterEdit: `ab${u(s(`cd`))}${s(`\u200b[]`, 'last')}${u(s(`ef`))}
`, - contentAfter: `ab${u(s(`cd`))}[]${u(s(`ef`))}
`, + contentAfterEdit: `ab${u(s(`cd`))}${s(`[]\u200b`, 'last')}${u(s(`ef`))}
`, + contentAfter: `ab${u(s(`cd[]ef`))}
`, }); }); it('should remove underline after restoring it and writing after removing it (collapsed, strikeThrough)', async () => { await testEditor(BasicEditor, { contentBefore: `ab${u(s(`cd`))}${s(u(`ghi[]`))}${u(s(`ef`))}
`, stepFunction: underline, - contentAfterEdit: `ab${u(s(`cd`))}${s(u(`ghi`) + `\u200b[]`)}${u(s(`ef`))}
`, + contentAfterEdit: `ab${u(s(`cd`))}${s(`${u(`ghi`)}${span(`[]\u200b`, 'first')}`)}${u(s(`ef`))}
`, contentAfter: `ab${u(s(`cd`))}${s(u(`ghi`) + `[]`)}${u(s(`ef`))}
`, }); }); @@ -452,9 +548,15 @@ describe('Format', () => { contentAfterEdit: `ab${u(s(`cd`))}${s(`A${u(`B`)}${uselessSpan(`C[]`)}${uselessU}`)}${u(s(`ef`))}
`, }); }); + it('should remove only underline decoration on a span', async () => { + await testEditor(BasicEditor, { + contentBefore: `[a]
`, + stepFunction: underline, + contentAfter: `[a]
`, + }); + }); }); describe('underline + italic', () => { - const iAndU = (content, zws) => `ab[]cd
`, @@ -462,11 +564,11 @@ describe('Format', () => { await editor.execCommand('italic'); await editor.execCommand('underline'); }, - contentAfterEdit: `ab${iAndU(`[]\u200B`, 'first')}cd
`, + contentAfterEdit: `ab${em(u(`[]\u200B`, 'first'), 'first')}cd
`, contentAfter: `ab[]cd
`, }); }); - it('should get ready to write in italic, after changing one\'s mind about underline', async () => { + it('should get ready to write in italic, after changing one\'s mind about underline (two consecutive at the end)', async () => { await testEditor(BasicEditor, { contentBefore: `ab[]cd
`, stepFunction: async editor => { @@ -474,9 +576,11 @@ describe('Format', () => { await editor.execCommand('underline'); await editor.execCommand('underline'); }, - contentAfterEdit: `ab${i(`\u200B[]`, 'first')}cd
`, + contentAfterEdit: `ab${em(`[]\u200B`, 'first')}cd
`, contentAfter: `ab[]cd
`, }); + }); + it('should get ready to write in italic, after changing one\'s mind about underline (separated by italic)', async () => { await testEditor(BasicEditor, { contentBefore: `ab[]cd
`, stepFunction: async editor => { @@ -484,9 +588,11 @@ describe('Format', () => { await editor.execCommand('italic'); await editor.execCommand('underline'); }, - contentAfterEdit: `ab${i(`\u200B[]`, 'first')}cd
`, + contentAfterEdit: `ab${em(`[]\u200B`, 'first')}cd
`, contentAfter: `ab[]cd
`, }); + }); + it('should get ready to write in italic, after changing one\'s mind about underline (two consecutive at the beginning)', async () => { await testEditor(BasicEditor, { contentBefore: `ab[]cd
`, stepFunction: async editor => { @@ -494,47 +600,47 @@ describe('Format', () => { await editor.execCommand('underline'); await editor.execCommand('italic'); }, - contentAfterEdit: `ab${i(`[]\u200B`, 'first')}cd
`, + contentAfterEdit: `ab${em(`[]\u200B`, 'first')}cd
`, contentAfter: `ab[]cd
`, }); }); it('should get ready to write in italic without underline (underline was first)', async () => { await testEditor(BasicEditor, { - contentBefore: `ab${u(i(`cd[]ef`))}
`, + contentBefore: `ab${u(em(`cd[]ef`))}
`, stepFunction: underline, - contentAfterEdit: `ab${u(i(`cd`))}${i(`\u200b[]`, 'last')}${u(i(`ef`))}
`, - contentAfter: `ab${u(i(`cd`))}[]${u(i(`ef`))}
`, + contentAfterEdit: `ab${u(em(`cd`))}${em(`[]\u200b`, 'last')}${u(em(`ef`))}
`, + contentAfter: `ab${u(em(`cd[]ef`))}
`, }); }); it('should restore underline after removing it (collapsed, italic)', async () => { await testEditor(BasicEditor, { - contentBefore: `ab${u(i(`cd`))}${i(`\u200b[]`)}${u(i(`ef`))}
`, + contentBefore: `ab${u(em(`cd`))}${em(`[]\u200b`)}${u(em(`ef`))}
`, stepFunction: underline, - contentAfterEdit: `ab${u(i(`cd`))}${iAndU(`[]\u200b`, 'last')}${u(i(`ef`))}
`, - contentAfter: `ab${u(i(`cd`))}[]${u(i(`ef`))}
`, + contentAfterEdit: `ab${u(em(`cd`))}${em(u(`[]\u200b`, 'last'))}${u(em(`ef`))}
`, + contentAfter: `ab${u(em(`cd`))}${em(`[]`)}${u(em(`ef`))}
`, }); }); it('should remove underline after restoring it after removing it (collapsed, italic)', async () => { await testEditor(BasicEditor, { - contentBefore: `ab${u(i(`cd`))}${i(u(`[]\u200b`))}${u(i(`ef`))}
`, + contentBefore: `ab${u(em(`cd`))}${em(u(`[]\u200b`))}${u(em(`ef`))}
`, stepFunction: underline, - contentAfterEdit: `ab${u(i(`cd`))}${i(`\u200b[]`, 'last')}${u(i(`ef`))}
`, - contentAfter: `ab${u(i(`cd`))}[]${u(i(`ef`))}
`, + contentAfterEdit: `ab${u(em(`cd`))}${em(`[]\u200b`, 'last')}${u(em(`ef`))}
`, + contentAfter: `ab${u(em(`cd[]ef`))}
`, }); }); it('should remove underline after restoring it and writing after removing it (collapsed, italic)', async () => { await testEditor(BasicEditor, { - contentBefore: `ab${u(i(`cd`))}${i(u(`ghi[]`))}${u(i(`ef`))}
`, + contentBefore: `ab${u(em(`cd`))}${em(u(`ghi[]`))}${u(em(`ef`))}
`, stepFunction: underline, - contentAfterEdit: `ab${u(i(`cd`))}${i(u(`ghi`) + `\u200b[]`)}${u(i(`ef`))}
`, - contentAfter: `ab${u(i(`cd`))}${i(u(`ghi`) + `[]`)}${u(i(`ef`))}
`, + contentAfterEdit: `ab${u(em(`cd`))}${em(u(`ghi`) + `[]\u200b`)}${u(em(`ef`))}
`, + contentAfter: `ab${u(em(`cd`))}${em(u(`ghi`) + `[]`)}${u(em(`ef`))}
`, }); }); it('should remove underline, write, restore underline, write, remove underline again, write (collapsed, italic)', async () => { const uselessSpan = content => `${content}`; const uselessU = u(''); // TODO: clean await testEditor(BasicEditor, { - contentBefore: `ab${u(i(`cd[]ef`))}
`, + contentBefore: `ab${u(em(`cd[]ef`))}
`, stepFunction: async editor => { await editor.execCommand('underline'); await editor.execCommand('insert', 'A'); @@ -543,18 +649,84 @@ describe('Format', () => { await editor.execCommand('underline'); await editor.execCommand('insert', 'C'); }, - contentAfter: `ab${u(i(`cd`))}${i(`A${u(`B`)}${uselessSpan(`C[]`)}${uselessU}`)}${u(i(`ef`))}
`, + contentAfter: `ab${u(em(`cd`))}${em(`A${u(`B`)}${uselessSpan(`C[]`)}${uselessU}`)}${u(em(`ef`))}
`, }); }); }); -}); -describe('applyInlineStyle', () => { - it('should apply style to selection only', async () => { + describe('setFontSize', () => { + it('should change the font size of a few characters', async () => { + await testEditor(BasicEditor, { + contentBefore: 'ab[cde]fg
', + stepFunction: setFontSize('10px'), + contentAfter: 'ab[cde]fg
', + }); + }); + it('should change the font size of a whole heading after a triple click', async () => { + await testEditor(BasicEditor, { + contentBefore: ']cd
', + stepFunction: setFontSize('36px'), + contentAfter: 'cd
', + }); + }); + it('should get ready to type with a different font size', async () => { + await testEditor(BasicEditor, { + contentBefore: 'ab[]cd
', + stepFunction: setFontSize('36px'), + contentAfterEdit: `ab[]\u200Bcd
`, + contentAfter: 'ab[]cd
', + }); + }); + }); + + it('should add style to a span parent of an inline', async () => { await testEditor(BasicEditor, { - contentBefore: 'a[bc]def
', - stepFunction: editor => applyInlineStyle(editor, (el) => el.style.color = 'tomato'), - contentAfter: 'a[bc]def
', + contentBefore: `a${strong(`[bc]`)}d
`, + stepFunction: setFontSize('10px'), + contentAfter: `a${strong(`[bc]`)}d
`, + }); + }); + + describe('isSelectionFormat', () => { + it('return false for isSelectionFormat when partially selecting 2 text node, the anchor is formated and focus is not formated', async () => { + await testEditor(BasicEditor, { + contentBefore: `${strong(`a[b`)}
c]d
`, + stepFunction: (editor) => { + window.chai.expect(isSelectionFormat(editor.editable, 'bold')).to.be.equal(false); + }, + }); + }); + it('return false for isSelectionFormat when partially selecting 2 text node, the anchor is not formated and focus is formated', async () => { + await testEditor(BasicEditor, { + contentBefore: `${strong(`a]b`)}
c[d
`, + stepFunction: (editor) => { + window.chai.expect(isSelectionFormat(editor.editable, 'bold')).to.be.equal(false); + }, + }); + }); + it('return false for isSelectionFormat when selecting 3 text node, the anchor and focus not formated and the text node in between formated', async () => { + await testEditor(BasicEditor, { + contentBefore: `a[b
${strong(`c`)}
d]e
`, + stepFunction: (editor) => { + window.chai.expect(isSelectionFormat(editor.editable, 'bold')).to.be.equal(false); + }, + }); + }); + }); + describe('switchDirection', () => { + it('should switch direction on a collapsed range', async () => { + await testEditor(BasicEditor, { + contentBefore: `a[]b
`, + stepFunction: switchDirection, + contentAfter: `a[]b
`, + }); + }); + it('should switch direction on an uncollapsed range', async () => { + await testEditor(BasicEditor, { + contentBefore: `a[b]c
`, + stepFunction: switchDirection, + contentAfter: `a[b]c
`, + }); }); }); }); diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/utils.test.js b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/utils.test.js index b5cdd2a6013..63fe4fa93fc 100644 --- a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/utils.test.js +++ b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/utils.test.js @@ -1549,13 +1549,10 @@ describe('Utils', () => { splitTextNode(cd, 1); const d = cd; const result = splitAroundUntil(d, p.childNodes[1]); - window.chai.expect(result.every(node => node.tagName === 'FONT')).to.be.ok; + window.chai.expect(result.tagName === 'FONT').to.be.ok; window.chai.expect(p.outerHTML).to.eql( 'abcdefg
' ); - window.chai.expect(result[0]).to.eql(p.childNodes[2]); - // "before" split happened so "after" split is not in the DOM anymore: - window.chai.expect(result[1].parentElement).to.eql(null); }); it('should split a slice of text from its inline ancestry', () => { const [p] = insertTestHtml('abcdefghi
'); @@ -1570,21 +1567,27 @@ describe('Utils', () => { splitTextNode(cd, 1); const d = cd; const result = splitAroundUntil([d, d.nextSibling.nextSibling], p.childNodes[1]); - window.chai.expect(result.every(node => node.tagName === 'FONT')).to.be.ok; + window.chai.expect(result.tagName === 'FONT').to.be.ok; window.chai.expect(p.outerHTML).to.eql( 'abcdefghi
' ); - window.chai.expect(result[0]).to.eql(p.childNodes[2]); - // "before" split happened so "after" split is not in the DOM anymore: - window.chai.expect(result[1].parentElement).to.eql(null); + }); + it('should split from a textNode that has no siblings', () => { + const [p] = insertTestHtml('abcdefg
'); + const font = p.querySelector('font'); + const cde = p.querySelector('span').firstChild; + const result = splitAroundUntil(cde, font); + window.chai.expect(result.tagName === 'FONT' && result !== font).to.be.ok; + window.chai.expect(p.outerHTML).to.eql('abcdefg
'); }); it('should not do anything (nothing to split)', () => { - const [p] = insertTestHtml('abcdefg
'); - const cde = p.childNodes[1].childNodes[1].firstChild; - const result = splitAroundUntil(cde, p.childNodes[1]); - window.chai.expect(result.every(node => node === undefined)).to.be.ok; - window.chai.expect(p.outerHTML).to.eql('abcdefg
'); + const [p] = insertTestHtml('abcde
'); + const bcd = p.querySelector('span').firstChild; + const result = splitAroundUntil(bcd, p.childNodes[1]); + window.chai.expect(result === p.childNodes[1]).to.be.ok; + window.chai.expect(p.outerHTML).to.eql('abcde
'); }); + }); describe('CleanUp Html', () => { diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/test/utils.js b/addons/web_editor/static/src/js/editor/odoo-editor/test/utils.js index ef5b4d8ea0c..63ec2d6396d 100644 --- a/addons/web_editor/static/src/js/editor/odoo-editor/test/utils.js +++ b/addons/web_editor/static/src/js/editor/odoo-editor/test/utils.js @@ -277,6 +277,12 @@ export async function testEditor(Editor = OdooEditor, spec, options = {}) { const testNode = document.createElement('div'); document.querySelector('#editor-test-container').innerHTML = ''; document.querySelector('#editor-test-container').appendChild(testNode); + let styleTag; + if (spec.styleContent) { + styleTag = document.createElement('style'); + styleTag.textContent = spec.styleContent; + document.querySelector('#editor-test-container').appendChild(styleTag); + } // Add the content to edit and remove the "[]" markers *before* initializing // the editor as otherwise those would genererate mutations the editor would