[FIX] web_editor: put the snippet editor UI at the correct DOM position

Commit odoo@4f27e52 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#39751 Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
delbern310 · Nov 4, 2019 · 86d1270 · 86d1270
1 parent b8d7c69
commit 86d1270
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git 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
@@ -18,14 +18,32 @@ 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');
             });
         } else {
             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
@@ -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 () {