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

[FIX] web_editor: apply font size on selected cells

Browse Source 
Before this commit:

-Font size does not get applied to selected cells.
-Font style buttons were active when cells are selected.

After this commit:

-Font size can be applied.
-The font styles should not all be toggle by default.

task-3477490

closes odoo/odoo#137080

X-original-commit: 1d20abfbfd9f337f356c5a237edc713fb973b636
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Signed-off-by: Sanjay Sharma (shsa) <shsa@odoo.com>
This commit is contained in:
shsa-odoo
2023-09-29 11:59:05 +00:00
parent 8e4aa704c6
commit 9e2f0edba5
2 changed files with 29 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js
+7 -3
View File
@@ -1033,8 +1033,13 @@ export const formatSelection = (editor, formatName, {applyStyle, formatProps} =
getDeepRange(editor.editable, { splitText: true, select: true, correctTripleClick: true });
}
const selectedTextNodes = getSelectedNodes(editor.editable)
// Get selected nodes within td to handle non-p elements like h1, h2...
// Targeting <br> to ensure span stays inside its corresponding block node.
const selectedNodesInTds = [...editor.editable.querySelectorAll('.o_selected_td')]
.map(node => closestElement(node).querySelector('br'));
const selectedNodes = getSelectedNodes(editor.editable)
.filter(n => n.nodeType === Node.TEXT_NODE && closestElement(n).isContentEditable && (isVisibleTextNode(n) || isZWS(n)));
const selectedTextNodes = selectedNodes.length ? selectedNodes : selectedNodesInTds;
const formatSpec = formatsSpecs[formatName];
for (const selectedTextNode of selectedTextNodes) {
@@ -1064,7 +1069,6 @@ export const formatSelection = (editor, formatName, {applyStyle, formatProps} =
}
const firstBlockOrClassHasFormat = formatSpec.isFormatted(parentNode, formatProps);
if (firstBlockOrClassHasFormat && !applyStyle) {
formatSpec.addNeutralStyle && formatSpec.addNeutralStyle(getOrCreateSpan(selectedTextNode, inlineAncestors));
} else if (!firstBlockOrClassHasFormat && applyStyle) {
@@ -1306,7 +1310,7 @@ export function isSelectionFormat(editable, format) {
const selectedNodes = getTraversedNodes(editable)
.filter(n => n.nodeType === Node.TEXT_NODE && n.nodeValue.trim().length);
const isFormatted = formatsSpecs[format].isFormatted;
return selectedNodes.every(n => isFormatted(n, editable));
return selectedNodes && selectedNodes.every(n => isFormatted(n, editable));
}
export function isUnbreakable(node) {
addons/web_editor/static/src/js/editor/odoo-editor/test/spec/format.test.js
+22 -1
View File
@@ -429,7 +429,7 @@ describe('Format', () => {
await setTestSelection(selection);
await strikeThrough(editor);
},
contentAfter: `<p>ab${s(`c`)}[ ]${s(`d`)}ef</p>`,
contentAfter: `<p>ab<s>c</s>[ ]<s>d</s>ef</p>`,
});
});
it('should make strikeThrough then more then remove', async () => {
@@ -820,6 +820,27 @@ describe('Format', () => {
`),
});
});
it('should add font size in selected table cells', async () => {
await testEditor(BasicEditor, {
contentBefore: '<table><tbody><tr><td class="o_selected_td"><p>[<br></p></td><td class="o_selected_td"><p><br></p>]</td></tr><tr><td><p><br></p></td><td><p><br></p></td></tr></tbody></table>',
stepFunction: setFontSize('48px'),
contentAfter: '<table><tbody><tr><td><p><span style="font-size: 48px;">[]<br></span></p></td><td><p><span style="font-size: 48px;"><br></span></p></td></tr><tr><td><p><br></p></td><td><p><br></p></td></tr></tbody></table>',
});
});
it('should add font size in all table cells', async () => {
await testEditor(BasicEditor, {
contentBefore: '<table><tbody><tr><td class="o_selected_td"><p>[<br></p></td><td class="o_selected_td"><p><br></p></td></tr><tr><td class="o_selected_td"><p><br></p></td><td class="o_selected_td"><p><br>]</p></td></tr></tbody></table>',
stepFunction: setFontSize('36px'),
contentAfter: '<table><tbody><tr><td><p><span style="font-size: 36px;">[]<br></span></p></td><td><p><span style="font-size: 36px;"><br></span></p></td></tr><tr><td><p><span style="font-size: 36px;"><br></span></p></td><td><p><span style="font-size: 36px;"><br></span></p></td></tr></tbody></table>',
});
});
it('should add font size in selected table cells with h1 as first child', async () => {
await testEditor(BasicEditor, {
contentBefore: '<table><tbody><tr><td class="o_selected_td"><h1>[<br></h1></td><td class="o_selected_td"><h1><br>]</h1></td></tr><tr><td><h1><br></h1></td><td><h1><br></h1></td></tr></tbody></table>',
stepFunction: setFontSize('18px'),
contentAfter: '<table><tbody><tr><td><h1><span style="font-size: 18px;">[]<br></span></h1></td><td><h1><span style="font-size: 18px;"><br></span></h1></td></tr><tr><td><h1><br></h1></td><td><h1><br></h1></td></tr></tbody></table>',
});
});
});
it('should add style to a span parent of an inline', async () => {