pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web_editor: link / unlink buttons not appearing/disappearing

Browse Source 
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) <nby@odoo.com>
This commit is contained in:
Adnan Saiyed
2023-12-19 09:36:57 +00:00
parent 623279045c
commit 3deed0ece1
2 changed files with 17 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
+15
View File
@@ -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();
}
addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+2 -24
View File
@@ -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.