deblan-mirror/editor.js
deblan-mirror/editor.js
1
0
Fork 0
mirror of https://github.com/codex-team/editor.js synced 2026-03-18 08:29:52 +01:00
Code Issues Projects Releases Wiki Activity

Fix popover item highlighting issue

Browse source
This commit is contained in:
Tanya Fomina 2022-10-28 19:52:46 +03:00
commit 9959709b72
3 changed files with 7 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/components/modules/toolbar/blockSettings.ts
View file

@ -122,7 +122,6 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
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);

13
src/components/utils/popover.ts
View file

@ -157,11 +157,6 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
*/
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<PopoverEvent> {
* @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<PopoverEvent> {
customContent?: HTMLElement;
customContentFlippableItems?: HTMLElement[];
scopeElement: HTMLElement;
shouldHighlightActivated?: boolean;
}) {
super();
this.items = items;
@ -194,7 +187,6 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
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<PopoverEvent> {
}
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);
}

5
types/configs/popover.d.ts vendored
View file

@ -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;
}
/**