From 923a92a0bb4dbfc90a4d431f66e42f5e434b55af Mon Sep 17 00:00:00 2001 From: Nicolas Bayet Date: Thu, 24 Feb 2022 16:02:52 +0000 Subject: [PATCH] [FIX] web_editor: only include website commands in website task-2696972 closes odoo/odoo#85628 X-original-commit: c1ff3260a8e09ba4af3ad44138d44d4457c7c689 Signed-off-by: David Monjoie (dmo) --- .../static/src/js/wysiwyg/wysiwyg.js | 116 ++---------------- addons/website/static/src/js/menu/edit.js | 105 ++++++++++++++++ 2 files changed, 114 insertions(+), 107 deletions(-) diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js index 9b3e8c16da0..9fef4c26294 100644 --- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js +++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js @@ -808,6 +808,12 @@ const Wysiwyg = Widget.extend({ selection.addRange(range); } }, + getDeepRange() { + return getDeepRange(this.odooEditor.editable); + }, + closestElement(...args) { + return closestElement(...args); + }, /** * Start or resume the Odoo field changes muation observers. * @@ -1598,6 +1604,7 @@ const Wysiwyg = Widget.extend({ this.$editable.find('.oe_edited_link').removeClass('oe_edited_link'); }, _getCommands: function () { + const options = this._editorOptions(); const commands = [ { groupName: 'Basic blocks', @@ -1658,117 +1665,12 @@ const Wysiwyg = Widget.extend({ }, }, ]; - if (this.options.snippets) { - commands.push(...this._getSnippetsCommands()); + if (options.powerboxCommands) { + commands.push(...options.powerboxCommands); } return commands; }, - _getSnippetsCommands: function () { - const snippetCommandCallback = (selector) => { - const $separatorBody = $(selector); - const $clonedBody = $separatorBody.clone().removeClass('oe_snippet_body'); - const range = getDeepRange(this.odooEditor.editable); - const block = closestElement(range.endContainer, 'p, div, ol, ul, cl, h1, h2, h3, h4, h5, h6'); - if (block) { - block.after($clonedBody[0]); - this.snippetsMenu.callPostSnippetDrop($clonedBody); - } - }; - return [ - { - groupName: 'Website', - title: 'Alert', - description: 'Insert an alert snippet.', - fontawesome: 'fa-info', - callback: () => { - snippetCommandCallback('.oe_snippet_body[data-snippet="s_alert"]'); - }, - }, - { - groupName: 'Website', - title: 'Rating', - description: 'Insert a rating snippet.', - fontawesome: 'fa-star-half-o', - callback: () => { - snippetCommandCallback('.oe_snippet_body[data-snippet="s_rating"]'); - }, - }, - { - groupName: 'Website', - title: 'Card', - description: 'Insert a card snippet.', - fontawesome: 'fa-sticky-note', - callback: () => { - snippetCommandCallback('.oe_snippet_body[data-snippet="s_card"]'); - }, - }, - { - groupName: 'Website', - title: 'Share', - description: 'Insert a share snippet.', - fontawesome: 'fa-share-square-o', - callback: () => { - snippetCommandCallback('.oe_snippet_body[data-snippet="s_share"]'); - }, - }, - { - groupName: 'Website', - title: 'Text Highlight', - description: 'Insert a text Highlight snippet.', - fontawesome: 'fa-sticky-note', - callback: () => { - snippetCommandCallback('.oe_snippet_body[data-snippet="s_text_highlight"]'); - }, - }, - { - groupName: 'Website', - title: 'Chart', - description: 'Insert a chart snippet.', - fontawesome: 'fa-bar-chart', - callback: () => { - snippetCommandCallback('.oe_snippet_body[data-snippet="s_chart"]'); - }, - }, - { - groupName: 'Website', - title: 'Progress Bar', - description: 'Insert a progress bar snippet.', - fontawesome: 'fa-spinner', - callback: () => { - snippetCommandCallback('.oe_snippet_body[data-snippet="s_progress_bar"]'); - }, - }, - { - groupName: 'Website', - title: 'Badge', - description: 'Insert a badge snippet.', - fontawesome: 'fa-tags', - callback: () => { - snippetCommandCallback('.oe_snippet_body[data-snippet="s_badge"]'); - }, - }, - { - groupName: 'Website', - title: 'Blockquote', - description: 'Insert a blockquote snippet.', - fontawesome: 'fa-quote-left', - callback: () => { - snippetCommandCallback('.oe_snippet_body[data-snippet="s_blockquote"]'); - }, - }, - { - groupName: 'Website', - title: 'Separator', - description: 'Insert an horizontal separator sippet.', - fontawesome: 'fa-minus', - callback: () => { - snippetCommandCallback('.oe_snippet_body[data-snippet="s_hr"]'); - }, - }, - ]; - }, - /** * Returns the editable areas on the page. * diff --git a/addons/website/static/src/js/menu/edit.js b/addons/website/static/src/js/menu/edit.js index 4c63835bc53..948eea6a834 100644 --- a/addons/website/static/src/js/menu/edit.js +++ b/addons/website/static/src/js/menu/edit.js @@ -415,12 +415,117 @@ var EditPageMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({ isRootEditable: false, controlHistoryFromDocument: true, getContentEditableAreas: this._getContentEditableAreas.bind(this), + powerboxCommands: this._getSnippetsCommands(), }, collaborationConfig); return wysiwygLoader.createWysiwyg(this, Object.assign(params, this.wysiwygOptions), ['website.compiled_assets_wysiwyg'] ); }, + _getSnippetsCommands: function () { + const snippetCommandCallback = (selector) => { + const $separatorBody = $(selector); + const $clonedBody = $separatorBody.clone().removeClass('oe_snippet_body'); + const range = this.wysiwyg.getDeepRange(); + const block = this.wysiwyg.closestElement(range.endContainer, 'p, div, ol, ul, cl, h1, h2, h3, h4, h5, h6'); + if (block) { + block.after($clonedBody[0]); + this.wysiwyg.snippetsMenu.callPostSnippetDrop($clonedBody); + } + }; + return [ + { + groupName: 'Website', + title: 'Alert', + description: 'Insert an alert snippet.', + fontawesome: 'fa-info', + callback: () => { + snippetCommandCallback('.oe_snippet_body[data-snippet="s_alert"]'); + }, + }, + { + groupName: 'Website', + title: 'Rating', + description: 'Insert a rating snippet.', + fontawesome: 'fa-star-half-o', + callback: () => { + snippetCommandCallback('.oe_snippet_body[data-snippet="s_rating"]'); + }, + }, + { + groupName: 'Website', + title: 'Card', + description: 'Insert a card snippet.', + fontawesome: 'fa-sticky-note', + callback: () => { + snippetCommandCallback('.oe_snippet_body[data-snippet="s_card"]'); + }, + }, + { + groupName: 'Website', + title: 'Share', + description: 'Insert a share snippet.', + fontawesome: 'fa-share-square-o', + callback: () => { + snippetCommandCallback('.oe_snippet_body[data-snippet="s_share"]'); + }, + }, + { + groupName: 'Website', + title: 'Text Highlight', + description: 'Insert a text Highlight snippet.', + fontawesome: 'fa-sticky-note', + callback: () => { + snippetCommandCallback('.oe_snippet_body[data-snippet="s_text_highlight"]'); + }, + }, + { + groupName: 'Website', + title: 'Chart', + description: 'Insert a chart snippet.', + fontawesome: 'fa-bar-chart', + callback: () => { + snippetCommandCallback('.oe_snippet_body[data-snippet="s_chart"]'); + }, + }, + { + groupName: 'Website', + title: 'Progress Bar', + description: 'Insert a progress bar snippet.', + fontawesome: 'fa-spinner', + callback: () => { + snippetCommandCallback('.oe_snippet_body[data-snippet="s_progress_bar"]'); + }, + }, + { + groupName: 'Website', + title: 'Badge', + description: 'Insert a badge snippet.', + fontawesome: 'fa-tags', + callback: () => { + snippetCommandCallback('.oe_snippet_body[data-snippet="s_badge"]'); + }, + }, + { + groupName: 'Website', + title: 'Blockquote', + description: 'Insert a blockquote snippet.', + fontawesome: 'fa-quote-left', + callback: () => { + snippetCommandCallback('.oe_snippet_body[data-snippet="s_blockquote"]'); + }, + }, + { + groupName: 'Website', + title: 'Separator', + description: 'Insert an horizontal separator sippet.', + fontawesome: 'fa-minus', + callback: () => { + snippetCommandCallback('.oe_snippet_body[data-snippet="s_hr"]'); + }, + }, + ]; + }, //--------------------------------------------------------------------------