From 9e2f0edba539bec9708b639b9b85b96b8eddeb6f Mon Sep 17 00:00:00 2001
From: shsa-odoo <shsa@odoo.com>
Date: Fri, 25 Aug 2023 11:06:26 +0000
Subject: [PATCH] [FIX] web_editor: apply font size on selected cells

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>
---
 .../js/editor/odoo-editor/src/utils/utils.js  | 10 +++++---
 .../odoo-editor/test/spec/format.test.js      | 23 ++++++++++++++++++-
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js
index 65d6a088739..51f3683df68 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js
@@ -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) {
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 32a30873f1c..cbae5753617 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
@@ -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 () => {