pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web_editor: list indentation in table

Browse Source 
Before this commit:

Indenting list using tab inside a table used to switch to the next cell.

After this commit:

Indenting list using tab inside a table now indents a list instead of switching
to the next cell.

task-3470092

closes odoo/odoo#136538

X-original-commit: 62c16468e2759eb0a0c3eecf3866b543be3bfabb
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
This commit is contained in:
Deependra Solanki
2023-09-25 18:09:57 +00:00
parent c5c253c436
commit f3cc75bac6
2 changed files with 300 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
+3 -2
View File
@@ -3709,9 +3709,10 @@ export class OdooEditor extends EventTarget {
// Tab
const tabHtml = '<span class="oe-tabs" contenteditable="false">\u0009</span>\u200B';
const sel = this.document.getSelection();
if (closestElement(sel.anchorNode, 'table')) {
const closestLi = closestElement(sel.anchorNode, 'li');
if (closestElement(sel.anchorNode, 'table') && !closestLi) {
this._onTabulationInTable(ev);
} else if (!ev.shiftKey && sel.isCollapsed && !closestElement(sel.anchorNode, 'li')) {
} else if (!ev.shiftKey && sel.isCollapsed && !closestLi) {
// Indent text (collapsed selection).
this.execCommand('insert', parseHTML(tabHtml));
} else {
addons/web_editor/static/src/js/editor/odoo-editor/test/spec/list.test.js
+297
View File
@@ -14,6 +14,7 @@ import {
toggleCheckList,
toggleOrderedList,
toggleUnorderedList,
triggerEvent,
unformat,
} from '../utils.js';
@@ -7441,6 +7442,105 @@ describe('List', () => {
</ol>`),
});
});
it('should indent unordered list inside a table cell', async () => {
await testEditor(BasicEditor, {
contentBefore: unformat(`
<table>
<tbody>
<tr>
<td>
<ul>
<li>abc</li>
<li>def[]</li>
</ul>
</td>
<td>
ghi
</td>
<td>
jkl
</td>
</tr>
</tbody>
</table>
`),
stepFunction: async editor => triggerEvent(editor.editable, 'keydown', { key: 'Tab' }),
contentAfter: unformat(`
<table>
<tbody>
<tr>
<td>
<ul>
<li>abc</li>
<li class="oe-nested">
<ul>
<li>def[]</li>
</ul>
</li>
</ul>
</td>
<td>
ghi
</td>
<td>
jkl
</td>
</tr>
</tbody>
</table>
`),
});
});
it('should indent checklist inside a table cell', async() => {
await testEditor(BasicEditor, {
removeCheckIds: true,
contentBefore: unformat(`
<table>
<tbody>
<tr>
<td>
<ul class="o_checklist">
<li>abc</li>
<li>def[]</li>
</ul>
</td>
<td>
ghi
</td>
<td>
jkl
</td>
</tr>
</tbody>
</table>
`),
stepFunction: async editor => triggerEvent(editor.editable, 'keydown', { key: 'Tab' }),
contentAfter: unformat(`
<table>
<tbody>
<tr>
<td>
<ul class="o_checklist">
<li>abc</li>
<li class="oe-nested">
<ul class="o_checklist">
<li>def[]</li>
</ul>
</li>
</ul>
</td>
<td>
ghi
</td>
<td>
jkl
</td>
</tr>
</tbody>
</table>
`),
});
});
});
describe('with selection', () => {
it('should indent the first element of a list', async () => {
@@ -7855,6 +7955,55 @@ describe('List', () => {
<p>after]</p>`),
});
});
it('should indent ordered list inside a table cell', async() => {
await testEditor(BasicEditor, {
contentBefore: unformat(`
<table>
<tbody>
<tr>
<td>
<ol>
<li>abc</li>
<li>[def]</li>
</ol>
</td>
<td>
ghi
</td>
<td>
jkl
</td>
</tr>
</tbody>
</table>
`),
stepFunction: async editor => triggerEvent(editor.editable, 'keydown', { key: 'Tab' }),
contentAfter: unformat(`
<table>
<tbody>
<tr>
<td>
<ol>
<li>abc</li>
<li class="oe-nested">
<ol>
<li>[def]</li>
</ol>
</li>
</ol>
</td>
<td>
ghi
</td>
<td>
jkl
</td>
</tr>
</tbody>
</table>
`),
});
});
});
});
describe('outdent', () => {
@@ -7992,6 +8141,105 @@ describe('List', () => {
</ul>`),
});
});
it('should outdent unordered list inside a table cell', async() => {
await testEditor(BasicEditor, {
contentBefore: unformat(`
<table>
<tbody>
<tr>
<td>
ghi
</td>
<td>
<ul>
<li>abc</li>
<li class="oe-nested">
<ul>
<li>def[]</li>
</ul>
</li>
</ul>
</td>
<td>
jkl
</td>
</tr>
</tbody>
</table>
`),
stepFunction: editor => triggerEvent(editor.editable, 'keydown', { key: 'Tab', shiftKey: true }),
contentAfter: unformat(`
<table>
<tbody>
<tr>
<td>
ghi
</td>
<td>
<ul>
<li>abc</li>
<li>def[]</li>
</ul>
</td>
<td>
jkl
</td>
</tr>
</tbody>
</table>
`),
});
});
it('should outdent checklist inside a table cell', async() => {
await testEditor(BasicEditor, {
removeCheckIds: true,
contentBefore: unformat(`
<table>
<tbody>
<tr>
<td>
ghi
</td>
<td>
<ul class="o_checklist">
<li>abc</li>
<li class="oe-nested">
<ul class="o_checklist">
<li>def[]</li>
</ul>
</li>
</ul>
</td>
<td>
jkl
</td>
</tr>
</tbody>
</table>
`),
stepFunction: editor => triggerEvent(editor.editable, 'keydown', { key: 'Tab', shiftKey: true }),
contentAfter: unformat(`
<table>
<tbody>
<tr>
<td>
ghi
</td>
<td>
<ul class="o_checklist">
<li>abc</li>
<li>def[]</li>
</ul>
</td>
<td>
jkl
</td>
</tr>
</tbody>
</table>
`),
});
});
});
describe('with selection', () => {
it('should outdent the middle element of a list', async () => {
@@ -8184,6 +8432,55 @@ describe('List', () => {
<p>after]</p>`),
});
});
it('should outdent a ordered list inside a table cell', async() => {
await testEditor(BasicEditor, {
contentBefore: unformat(`
<table>
<tbody>
<tr>
<td>
ghi
</td>
<td>
<ol>
<li>abc</li>
<li class="oe-nested">
<ol>
<li>[def]</li>
</ol>
</li>
</ol>
</td>
<td>
jkl
</td>
</tr>
</tbody>
</table>
`),
stepFunction: editor => triggerEvent(editor.editable, 'keydown', { key: 'Tab', shiftKey: true }),
contentAfter: unformat(`
<table>
<tbody>
<tr>
<td>
ghi
</td>
<td>
<ol>
<li>abc</li>
<li>[def]</li>
</ol>
</td>
<td>
jkl
</td>
</tr>
</tbody>
</table>
`),
});
});
});
});
});