[FIX] web_editor: solve bold command issues

Summernote uses execCommand and, worth, obsolete queryCommandState
function to customize the edited content. Here we try to hack the
function to solve some problems by making the DOM and style easier to
understand for the base functions for the duration of their executions.
This won't obviously solves all problems but this is an improvement
while waiting for the new Odoo editor coming in future versions.

The original problem this solves is handling bold text in blog posts.
Posts are using font-weight: 300 which is enough to confuse summernote.
Hitting bold on a selected paragraph wraps its content in a <b> tag but
hitting bold again does nothing... having a <b> rendered as fw-400 is
enough to break it. What this commit does is: before any execCommand or
queryCommandState being used to modify the DOM or retrieve its state,
the whole DOM is forced to fw-400 and <b> elements to fw-700. This also
solves issues in some base snippets.

closes odoo/odoo#64472

X-original-commit: 424d9661c5657cbcf10ce40acb94a7a200c2a48b
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

1 files changed, 31 insertions, 0 deletions

diff --git a/addons/web_editor/static/src/js/editor/rte.summernote.js b/addons/web_editor/static/src/js/editor/rte.summernote.js
index cc238b34592..ec1a059aecd 100644
--- a/addons/web_editor/static/src/js/editor/rte.summernote.js
+++ b/addons/web_editor/static/src/js/editor/rte.summernote.js
@@ -25,6 +25,37 @@ var range = $.summernote.core.range;
 var eventHandler = $.summernote.eventHandler;
 var renderer = $.summernote.renderer;
 
+// Summernote uses execCommand and, worth, obsolete queryCommandState function
+// to customize the edited content. Here we try to hack the function to solve
+// some problems by making the DOM and style easier to understand for the
+// base function for the duration of their executions. This won't obviously
+// solves all problems but this is an improvement while waiting for the new
+// Odoo editor coming in future versions.
+function protectCommand(callback) {
+    return function () {
+        var rng = range.create();
+        var $sc = (rng && rng.sc) ? $(rng.sc).parents(':o_editable').last() : $();
+        var $ec = (rng && rng.ec) ? $(rng.ec).parents(':o_editable').last() : $();
+        $sc.addClass('o_we_command_protector');
+        $ec.addClass('o_we_command_protector');
+        var restore = function () {
+            $sc.removeClass('o_we_command_protector');
+            $ec.removeClass('o_we_command_protector');
+        };
+        var result;
+        try {
+            result = callback.apply(this, arguments);
+        } catch (err) {
+            restore();
+            throw err;
+        }
+        restore();
+        return result;
+    };
+}
+document.execCommand = protectCommand(document.execCommand);
+document.queryCommandState = protectCommand(document.queryCommandState);
+
 var tplButton = renderer.getTemplate().button;
 var tplIconButton = renderer.getTemplate().iconButton;
 var tplDropdown = renderer.getTemplate().dropdown;