diff --git a/src/components/modules/toolbar/blockSettings.ts b/src/components/modules/toolbar/blockSettings.ts index f95a0264..b8f57abf 100644 --- a/src/components/modules/toolbar/blockSettings.ts +++ b/src/components/modules/toolbar/blockSettings.ts @@ -122,7 +122,6 @@ 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 4d6373c5..65de2446 100644 --- a/src/components/utils/popover.ts +++ b/src/components/utils/popover.ts @@ -157,11 +157,6 @@ 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 * @@ -173,9 +168,8 @@ 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, shouldHighlightActivated = false }: { + constructor({ items, className, searchable, filterLabel, nothingFoundLabel, customContent, customContentFlippableItems, scopeElement }: { items: PopoverItem[]; className?: string; searchable?: boolean; @@ -184,7 +178,6 @@ export default class Popover extends EventsDispatcher { customContent?: HTMLElement; customContentFlippableItems?: HTMLElement[]; scopeElement: HTMLElement; - shouldHighlightActivated?: boolean; }) { super(); this.items = items; @@ -194,7 +187,6 @@ 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; @@ -493,8 +485,7 @@ export default class Popover extends EventsDispatcher { } clickedItem.onActivate(clickedItem, event); - if (this.shouldHighlightActivated) { - /** If popover is not intended to close once item is activated, we need to update active state of activated item */ + if (clickedItem.toggle) { clickedItem.isActive = !clickedItem.isActive; itemEl.classList.toggle(Popover.CSS.itemActive); } diff --git a/types/configs/popover.d.ts b/types/configs/popover.d.ts index cddf2569..5002464e 100644 --- a/types/configs/popover.d.ts +++ b/types/configs/popover.d.ts @@ -37,6 +37,11 @@ interface PopoverItemBase { * Used in data attributes needed for cypress tests */ name?: string; + + /** + * True if item should be highlighted once activated + */ + toggle?: boolean; } /**