From 02e0a316655adf6a482fee454da949a6cff07360 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Mon, 4 Nov 2019 15:10:49 +0000
Subject: [PATCH] [FIX] web_editor: put the snippet editor UI at the correct
 DOM position

Commit https://github.com/odoo/odoo/commit/4f27e52cabb77b8b1a9637a11185ddf882adc9af
had to instantiate the snippet editor UI differently but the hack broke
the position of the oe_manipulator which is supposed to be at the top
left of the editable zone.

closes odoo/odoo#39775

X-original-commit: 86d12706729c256a8ea1103575db9817961a2ff2
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../web_editor/static/src/js/editor/editor.js |  4 +---
 .../static/src/js/wysiwyg/wysiwyg_snippets.js | 20 ++++++++++++++++++-
 .../js/editor/wysiwyg_multizone_translate.js  |  2 +-
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/editor.js b/addons/web_editor/static/src/js/editor/editor.js
index 31c31e5ce6a..07947db56e4 100644
--- a/addons/web_editor/static/src/js/editor/editor.js
+++ b/addons/web_editor/static/src/js/editor/editor.js
@@ -106,9 +106,7 @@ var EditorMenuBar = Widget.extend({
 
         // Snippets menu
         if (self.snippetsMenu) {
-            // TODO improve this, the editor can be relocated so here,
-            // 'insertAfter(this.$el)' won't work.
-            defs.push(this.snippetsMenu.appendTo(this.$el.parent()));
+            defs.push(this.snippetsMenu.insertAfter(this.$el));
         }
         this.rte.editable().find('*').off('mousedown mouseup click');
 
diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg_snippets.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg_snippets.js
index df6d243ffc6..4cf9fd750e4 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg_snippets.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg_snippets.js
@@ -18,7 +18,7 @@ Wysiwyg.include({
             this.editor = new (this.Editor)(this, this.options);
             this.$editor = this.editor.rte.editable();
             await this.editor.prependTo(this.$editor[0].ownerDocument.body);
-            this.options.toolbarHandler.append(this.editor.$el);
+            this._relocateEditorBar();
             this.$el.on('content_changed', function (e) {
                 self.trigger_up('wysiwyg_change');
             });
@@ -26,6 +26,24 @@ Wysiwyg.include({
             return this._super();
         }
     },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _relocateEditorBar: function () {
+        this.options.toolbarHandler.append(this.editor.$el);
+        // TODO the next four lines are a huge hack: since the editor.$el
+        // is repositioned, the snippetsMenu elements are not at the
+        // correct position anymore... the whole logic has to be refactored.
+        if (this.editor.snippetsMenu) {
+            this.editor.snippetsMenu.$el.insertAfter(this.options.toolbarHandler);
+            this.editor.snippetsMenu.$snippetEditorArea.insertAfter(this.editor.snippetsMenu.$el);
+        }
+    },
 });
 
 });
diff --git a/addons/website/static/src/js/editor/wysiwyg_multizone_translate.js b/addons/website/static/src/js/editor/wysiwyg_multizone_translate.js
index 20d181c5c53..410f6e08631 100644
--- a/addons/website/static/src/js/editor/wysiwyg_multizone_translate.js
+++ b/addons/website/static/src/js/editor/wysiwyg_multizone_translate.js
@@ -97,7 +97,7 @@ var WysiwygTranslate = WysiwygMultizone.extend({
         var promise = this.editor.prependTo(this.$editor[0].ownerDocument.body);
 
         return promise.then(function () {
-            self.options.toolbarHandler.append(self.editor.$el);
+            self._relocateEditorBar();
             var attrs = ['placeholder', 'title', 'alt'];
             _.each(attrs, function (attr) {
                 self._getEditableArea().filter('[' + attr + '*="data-oe-translation-id="]').filter(':empty, input, select, textarea, img').each(function () {