From 3deed0ece176bddf78112c45a96c13dcbbc43c7d Mon Sep 17 00:00:00 2001 From: Adnan Saiyed Date: Mon, 25 Sep 2023 12:58:09 +0530 Subject: [PATCH] [FIX] web_editor: link / unlink buttons not appearing/disappearing Current behaviour before commit: -When creating a link, the 'unlink' button is not getting appeared in the toolbar. -When removing link through 'unlink' button, the 'unlink' button is not getting disappeared in toolbar. -Before this commit, _updateEditorUI method is responsible for hiding/ showing create-link button. Desired behaviour after commit: -Now, When creating a link, the 'unlink' button gets appeared in the toolbar. -When removing link through 'unlink' button, the 'unlink' button gets disappeared in toolbar. -This commit ensures that _updateToolbar method is responsible for hiding/ showing of create-link and unlink button. task-3514639 closes odoo/odoo#146680 X-original-commit: 92ca62162e85a3c617ba73eaa974d342adc3e35a Signed-off-by: Nicolas Bayet (nby) --- .../js/editor/odoo-editor/src/OdooEditor.js | 15 +++++++++++ .../static/src/js/wysiwyg/wysiwyg.js | 26 ++----------------- 2 files changed, 17 insertions(+), 24 deletions(-) diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js index 8eb7d4104b5..9e87690b0de 100644 --- a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js +++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js @@ -3208,13 +3208,28 @@ export class OdooEditor extends EventTarget { styleSection.querySelector('button span').textContent = activeLabel; } + const isInMedia = this.toolbar.classList.contains('oe-media'); const linkNode = getInSelection(this.document, 'a'); const linkButton = this.toolbar.querySelector('#create-link'); linkButton && linkButton.classList.toggle('active', !!linkNode); + // Hide unlink button if no link in selection, always hide on media + // elements. + const unlinkButton = this.toolbar.querySelector('#unlink'); + unlinkButton?.classList.toggle('d-none', isInMedia || !linkNode); const undoButton = this.toolbar.querySelector('#undo'); undoButton && undoButton.classList.toggle('disabled', !this.historyCanUndo()); const redoButton = this.toolbar.querySelector('#redo'); redoButton && redoButton.classList.toggle('disabled', !this.historyCanRedo()); + + // Hide create-link button if selection spans several blocks, always + // hide on media elements. + const range = getDeepRange(this.editable, { sel, correctTripleClick: true }); + const spansBlocks = [...range.commonAncestorContainer.childNodes].some(isBlock); + linkButton?.classList.toggle('d-none', spansBlocks || isInMedia); + + // Hide link button group if it has no visible button. + const linkBtnGroup = this.toolbar.querySelector('#link.btn-group'); + linkBtnGroup?.classList.toggle('d-none', !linkBtnGroup.querySelector('.btn:not(.d-none)')); if (this.autohideToolbar && !this.isMobile && !this.toolbar.contains(sel.anchorNode)) { this._positionToolbar(); } diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js index 0f83dac952e..2ece37ca753 100644 --- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js +++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js @@ -51,7 +51,6 @@ const OdooEditor = OdooEditorLib.OdooEditor; const getDeepRange = OdooEditorLib.getDeepRange; const getInSelection = OdooEditorLib.getInSelection; const isProtected = OdooEditorLib.isProtected; -const isBlock = OdooEditorLib.isBlock; const rgbToHex = OdooEditorLib.rgbToHex; const preserveCursor = OdooEditorLib.preserveCursor; const closestElement = OdooEditorLib.closestElement; @@ -2064,10 +2063,6 @@ export class Wysiwyg extends Component { } this.odooEditor.automaticStepSkipStack(); - // Clear "d-none" for button groups. - for (const buttonGroup of this.toolbarEl.querySelectorAll('.btn-group')) { - buttonGroup.classList.remove('d-none'); - } // We need to use the editor's window so the tooltip displays in its // document even if it's in an iframe. const editorWindow = this.odooEditor.document.defaultView; @@ -2078,6 +2073,7 @@ export class Wysiwyg extends Component { // snippet is a media. const isInMedia = $target.is(mediaSelector) && !$target.parent().hasClass('o_stars') && e.target && (e.target.isContentEditable || (e.target.parentElement && e.target.parentElement.isContentEditable)); + this.toolbarEl.classList.toggle('oe-media', isInMedia); for (const el of this.toolbarEl.querySelectorAll([ '#image-preview', @@ -2113,13 +2109,12 @@ export class Wysiwyg extends Component { '#justifyFull', '#list', '#colorInputButtonGroup', - '#create-link', '#media-insert', // "Insert media" should be replaced with "Replace media". ].join(','))){ el.classList.toggle('d-none', isInMedia); } // Some icons are relevant for icons, that aren't for other media. - for (const el of this.toolbarEl.querySelectorAll('#colorInputButtonGroup, #create-link')) { + for (const el of this.toolbarEl.querySelectorAll('#colorInputButtonGroup')) { el.classList.toggle('d-none', isInMedia && !$target.is('.fa')); } for (const el of this.toolbarEl.querySelectorAll('.only_fa')) { @@ -2135,17 +2130,6 @@ export class Wysiwyg extends Component { el.classList.toggle('d-none', true); } } - // Hide the create-link button if the selection spans several blocks. - selection = this.odooEditor.document.getSelection(); - const range = selection && selection.rangeCount && selection.getRangeAt(0); - const $rangeContainer = range && $(range.commonAncestorContainer); - const spansBlocks = range && !!$rangeContainer.contents().filter((i, node) => isBlock(node)).length; - if (!range || spansBlocks) { - this.toolbarEl.querySelector('#create-link')?.classList.toggle('d-none', true); - } - // Toggle unlink button. Always hide it on media. - const linkNode = getInSelection(this.odooEditor.document, 'a'); - this.toolbarEl.querySelector('#unlink')?.classList.toggle('d-none', !linkNode || isInMedia); // Toggle the toolbar arrow. this.toolbarEl.classList.toggle('noarrow', isInMedia); // Unselect all media. @@ -2183,12 +2167,6 @@ export class Wysiwyg extends Component { }); }, 400)); } - // Hide button groups that have no visible buttons. - for (const buttonGroup of this.toolbarEl.querySelectorAll('.btn-group:not(.d-none)')) { - if (!buttonGroup.querySelector('.btn:not(.d-none)')) { - buttonGroup.classList.add('d-none'); - } - } // Toolbar might have changed size, update its position. this.odooEditor.updateToolbarPosition(); // Update color of already opened colorpickers.