diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js index c7000be83f5..b787d32cb04 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -1865,9 +1865,39 @@ var SnippetsMenu = Widget.extend({ this.customizePanel = document.createElement('div'); this.customizePanel.classList.add('o_we_customize_panel', 'd-none'); + + this._toolbarWrapperEl = document.createElement('div'); + this._toolbarWrapperEl.classList.add('o_we_toolbar_wrapper'); + class WebsiteToolbar extends Component { + static components = { Toolbar, LinkTools }; + static template = xml` + + + + + + `; + static props = { + wysiwygState: Object, + }; + } + // Add the toolbarWrapperEl to the dom for owl to properly mount the + // Toolbar. + document.body.append(this._toolbarWrapperEl); + this._toolbarWrapperEl.style.display = 'none'; + await attachComponent(this, this._toolbarWrapperEl, WebsiteToolbar, { + wysiwygState: this.options.wysiwyg.state, + }); + this._toolbarWrapperEl.style.display = 'contents'; + + const toolbarEl = this._toolbarWrapperEl.firstChild; + toolbarEl.classList.remove('oe-floating'); + this.options.wysiwyg.toolbarEl.style.display = 'none'; + this.options.wysiwyg.setupToolbar(toolbarEl); this._addToolbar(); this._checkEditorToolbarVisibilityCallback = this._checkEditorToolbarVisibility.bind(this); $(this.options.wysiwyg.odooEditor.document.body).on('click', this._checkEditorToolbarVisibilityCallback); + this.invisibleDOMPanelEl = document.createElement('div'); this.invisibleDOMPanelEl.classList.add('o_we_invisible_el_panel'); this.invisibleDOMPanelEl.appendChild( @@ -4318,7 +4348,7 @@ var SnippetsMenu = Widget.extend({ async _onUpdateInvisibleDom() { await this._updateInvisibleDOM(); }, - async _addToolbar(toolbarMode = "text") { + _addToolbar(toolbarMode = "text") { if (this.folded) { return; } @@ -4334,38 +4364,6 @@ var SnippetsMenu = Widget.extend({ titleText = _t("Icon Formatting"); break; } - - if (!this._toolbarWrapperEl) { - this._toolbarWrapperEl = document.createElement('div'); - this._toolbarWrapperEl.classList.add('o_we_toolbar_wrapper'); - class WebsiteToolbar extends Component { - static components = { Toolbar, LinkTools }; - static template = xml` - - - - - - `; - static props = { - wysiwygState: Object, - }; - } - // Add the toolbarWrapperEl to the dom for owl to properly mount the - // Toolbar. - document.body.append(this._toolbarWrapperEl); - this._toolbarWrapperEl.style.display = 'none'; - await attachComponent(this, this._toolbarWrapperEl, WebsiteToolbar, { - wysiwygState: this.options.wysiwyg.state, - }); - this._toolbarWrapperEl.style.display = 'contents'; - - const toolbarEl = this._toolbarWrapperEl.firstChild; - toolbarEl.classList.remove('oe-floating'); - this.options.wysiwyg.toolbarEl.style.display = 'none'; - this.options.wysiwyg.setupToolbar(toolbarEl); - } - // Create toolbar custom container. this._$toolbarContainer = $(''); const $title = $("" + titleText + "");