From 65748973083bd4bb69804de0c1fc0b467b5e4340 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souk=C3=A9ina=20Bojabza?= <sobo@odoo.com>
Date: Thu, 5 May 2022 09:25:04 +0000
Subject: [PATCH] [FIX] web_editor: resolve bug of focused input element in
 edit mode

In the Firefox browser, when in edit mode, if we click on an input
element, a traceback sometimes appears for no apparent reasons.
The error comes from the fact that when calling the getRangeAt function
on the selection, it sometimes returns a "restricted" range.
Ex: Range { commonAncestorContainer: Restricted, startContainer:
Restricted, startOffset: 0, endContainer: Restricted, endOffset: 0,
collapsed: true }
And so, trying to access a container property (ex: nodetype) will
trigger a "Permission denied to access property "nodetype"" error.

This commit provides a solution to bypass the error. It consists in
redefining the getRangeAt function as the following:

- A range is created by calling the original function that was saved
  beforehand
- We check if the range is restricted (the same way as what was done in
  this issue: https://github.com/tinymce/tinymce/issues/2194)
    - if it is not restricted, the range is simply returned
    - otherwise, a new range is created manually, based on the selection

Steps to reproduce the bug:

- Install website
- Drop a form snippet
- Click on the input fields
-> Sometimes a traceback appears

task-2810365

closes odoo/odoo#92097

X-original-commit: c32f6efa956ae9affbb80f84b66118e343268eff
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../src/js/common/browser_extensions.js       | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 addons/web_editor/static/src/js/common/browser_extensions.js

diff --git a/addons/web_editor/static/src/js/common/browser_extensions.js b/addons/web_editor/static/src/js/common/browser_extensions.js
new file mode 100644
index 00000000000..9a477529bcf
--- /dev/null
+++ b/addons/web_editor/static/src/js/common/browser_extensions.js
@@ -0,0 +1,21 @@
+/** @odoo-module **/
+
+// Redefine the getRangeAt function in order to avoid an error appearing
+// sometimes when an input element is focused on Firefox.
+// The error happens because the range returned by getRangeAt is "restricted".
+// Ex: Range { commonAncestorContainer: Restricted, startContainer: Restricted,
+// startOffset: 0, endContainer: Restricted, endOffset: 0, collapsed: true }
+// The solution consists in detecting when the range is restricted and then
+// redefining it manually based on the current selection.
+const originalGetRangeAt = Selection.prototype.getRangeAt;
+Selection.prototype.getRangeAt = function () {
+    let range = originalGetRangeAt.apply(this, arguments);
+    // Check if the range is restricted
+    if (range.startContainer && !Object.getPrototypeOf(range.startContainer)) {
+        // Define the range manually based on the selection
+        range = document.createRange();
+        range.setStart(this.anchorNode, 0);
+        range.setEnd(this.focusNode, 0);
+    }
+    return range;
+};