diff --git a/src/components/modules/toolbar/blockSettings.ts b/src/components/modules/toolbar/blockSettings.ts index b8f57abf..f95a0264 100644 --- a/src/components/modules/toolbar/blockSettings.ts +++ b/src/components/modules/toolbar/blockSettings.ts @@ -122,6 +122,7 @@ export default class BlockSettings extends Module { customContent: this.nodes.renderedTunes, customContentFlippableItems: this.getControls(this.nodes.renderedTunes), scopeElement: this.Editor.API.methods.ui.nodes.redactor, + shouldHighlightActivated: true, }); this.popover.on(PopoverEvent.OverlayClicked, this.onOverlayClicked); diff --git a/src/components/utils/popover.ts b/src/components/utils/popover.ts index c144f8cb..ce780824 100644 --- a/src/components/utils/popover.ts +++ b/src/components/utils/popover.ts @@ -157,6 +157,11 @@ export default class Popover extends EventsDispatcher { */ private itemsRequiringConfirmation: { [itemIndex: number]: PopoverItem } = {}; + /** + * If true, activated item should be highlighted as active once clicked. + */ + private shouldHighlightActivated: boolean; + /** * Creates the Popover * @@ -168,8 +173,9 @@ export default class Popover extends EventsDispatcher { * @param options.customContent - arbitrary html element to be inserted before items list * @param options.customContentFlippableItems - list of html elements inside custom content area that should be available for keyboard navigation * @param options.scopeElement - editor container element + * @param shouldHighlightActivated - If true, activated item should be highlighted as active once clicked. */ - constructor({ items, className, searchable, filterLabel, nothingFoundLabel, customContent, customContentFlippableItems, scopeElement }: { + constructor({ items, className, searchable, filterLabel, nothingFoundLabel, customContent, customContentFlippableItems, scopeElement, shouldHighlightActivated = false }: { items: PopoverItem[]; className?: string; searchable?: boolean; @@ -178,6 +184,7 @@ export default class Popover extends EventsDispatcher { customContent?: HTMLElement; customContentFlippableItems?: HTMLElement[]; scopeElement: HTMLElement; + shouldHighlightActivated?: boolean; }) { super(); this.items = items; @@ -187,6 +194,7 @@ export default class Popover extends EventsDispatcher { this.searchable = searchable; this.listeners = new Listeners(); this.scopeElement = scopeElement; + this.shouldHighlightActivated = shouldHighlightActivated; this.filterLabel = filterLabel; this.nothingFoundLabel = nothingFoundLabel; @@ -485,13 +493,15 @@ export default class Popover extends EventsDispatcher { } clickedItem.onActivate(clickedItem, event); - if (clickedItem.closeOnActivate) { - this.hide(); - } else { + if (this.shouldHighlightActivated) { /** If popover is not intended to close once item is activated, we need to update active state of activated item */ clickedItem.isActive = !clickedItem.isActive; itemEl.classList.toggle(Popover.CSS.itemActive); } + + if (clickedItem.closeOnActivate) { + this.hide(); + } } /**