diff --git a/src/components/inline-tools/inline-tool-convert.ts b/src/components/inline-tools/inline-tool-convert.ts index ccc66b7d..053a14a4 100644 --- a/src/components/inline-tools/inline-tool-convert.ts +++ b/src/components/inline-tools/inline-tool-convert.ts @@ -1,6 +1,6 @@ import { IconReplace } from '@codexteam/icons'; import { InlineTool, API } from '../../../types'; -import { MenuConfig } from '../../../types/tools'; +import { MenuConfig, MenuConfigItem } from '../../../types/tools'; import * as _ from '../utils'; import { Blocks, Selection, Tools, I18n, Caret } from '../../../types/api'; import SelectionUtils from '../selection'; @@ -57,6 +57,11 @@ export default class ConvertInlineTool implements InlineTool { public async render(): Promise { const currentSelection = SelectionUtils.get(); const currentBlock = this.blocksAPI.getBlockByElement(currentSelection.anchorNode as HTMLElement); + + if (currentBlock === undefined) { + return []; + } + const allBlockTools = this.toolsAPI.getBlockTools(); const convertibleTools = await getConvertibleToolsForBlock(currentBlock, allBlockTools); @@ -64,8 +69,8 @@ export default class ConvertInlineTool implements InlineTool { return []; } - const convertToItems = convertibleTools.reduce((result, tool) => { - tool.toolbox.forEach((toolboxItem) => { + const convertToItems = convertibleTools.reduce((result, tool) => { + tool.toolbox?.forEach((toolboxItem) => { result.push({ icon: toolboxItem.icon, title: toolboxItem.title, diff --git a/src/components/modules/toolbar/inline.ts b/src/components/modules/toolbar/inline.ts index f3150329..350c7508 100644 --- a/src/components/modules/toolbar/inline.ts +++ b/src/components/modules/toolbar/inline.ts @@ -524,10 +524,6 @@ export default class InlineToolbar extends Module { private toolClicked(tool: IInlineTool): void { const range = SelectionUtils.range; - if (range === null) { - return; - } - tool.surround?.(range); this.checkToolsState(); } diff --git a/src/components/utils/popover/components/popover-item/popover-item-html/popover-item-html.ts b/src/components/utils/popover/components/popover-item/popover-item-html/popover-item-html.ts index d911c138..d06210eb 100644 --- a/src/components/utils/popover/components/popover-item/popover-item-html/popover-item-html.ts +++ b/src/components/utils/popover/components/popover-item/popover-item-html/popover-item-html.ts @@ -67,11 +67,4 @@ export class PopoverItemHtml extends PopoverItem { return Array.from(controls); } - - /** - * Called on popover item click - */ - public handleClick(): void { - this.params.onActivate?.(this.params); - } } diff --git a/src/components/utils/popover/components/popover-item/popover-item.ts b/src/components/utils/popover/components/popover-item/popover-item.ts index 44c370cc..9fc59b56 100644 --- a/src/components/utils/popover/components/popover-item/popover-item.ts +++ b/src/components/utils/popover/components/popover-item/popover-item.ts @@ -58,6 +58,21 @@ export abstract class PopoverItem { } } + /** + * Called on popover item click + */ + public handleClick(): void { + if (this.params === undefined) { + return; + } + + if (!('onActivate' in this.params)) { + return; + } + + this.params.onActivate?.(this.params); + } + /** * Adds hint to the item element if hint data is provided * @@ -147,8 +162,9 @@ export abstract class PopoverItem { if (this.params === undefined) { return false; } + if (!('isActive' in this.params)) { - return; + return false; } if (typeof this.params.isActive === 'function') { diff --git a/src/components/utils/popover/popover-desktop.ts b/src/components/utils/popover/popover-desktop.ts index 1cce489b..73cd1030 100644 --- a/src/components/utils/popover/popover-desktop.ts +++ b/src/components/utils/popover/popover-desktop.ts @@ -1,6 +1,6 @@ import Flipper from '../../flipper'; import { PopoverAbstract } from './popover-abstract'; -import { PopoverItem, PopoverItemRenderParamsMap, PopoverItemSeparator, WithChildren, css as popoverItemCls } from './components/popover-item'; +import { PopoverItem, PopoverItemRenderParamsMap, PopoverItemSeparator, css as popoverItemCls } from './components/popover-item'; import { PopoverEvent, PopoverParams } from './popover.types'; import { keyCodes } from '../../utils'; import { CSSVariables, css } from './popover.const'; @@ -32,6 +32,11 @@ export class PopoverDesktop extends PopoverAbstract { */ protected nestedPopover: PopoverDesktop | undefined | null; + /** + * Item nested popover is displayed for + */ + protected nestedPopoverTriggerItem: PopoverItem | null = null; + /** * Last hovered item inside popover. * Is used to determine if cursor is moving inside one item or already moved away to another one. @@ -168,10 +173,13 @@ export class PopoverDesktop extends PopoverAbstract { * * @param item – item to show nested popover for */ - protected override showNestedItems(item: WithChildren | WithChildren): void { + protected override showNestedItems(item: PopoverItem): void { if (this.nestedPopover !== null && this.nestedPopover !== undefined) { return; } + + this.nestedPopoverTriggerItem = item; + this.showNestedPopoverForItem(item); } @@ -209,7 +217,7 @@ export class PopoverDesktop extends PopoverAbstract { * @param nestedPopoverEl - nested popover element * @param item – item near which nested popover should be displayed */ - protected setTriggerItemPosition(nestedPopoverEl: HTMLElement, item: WithChildren | WithChildren): void { + protected setTriggerItemPosition(nestedPopoverEl: HTMLElement, item: PopoverItem): void { const itemEl = item.getElement(); const itemOffsetTop = (itemEl ? itemEl.offsetTop : 0) - this.scrollTop; const topOffset = this.offsetTop + itemOffsetTop; @@ -232,7 +240,7 @@ export class PopoverDesktop extends PopoverAbstract { this.nestedPopover = null; this.flipper?.activate(this.flippableElements); - this.items.forEach(item => item.onChildrenClose()); + this.nestedPopoverTriggerItem?.onChildrenClose(); } /** @@ -241,7 +249,7 @@ export class PopoverDesktop extends PopoverAbstract { * * @param item - item to display nested popover by */ - protected showNestedPopoverForItem(item: WithChildren | WithChildren): PopoverDesktop { + protected showNestedPopoverForItem(item: PopoverItem): PopoverDesktop { this.nestedPopover = new PopoverDesktop({ searchable: item.isChildrenSearchable, items: item.children, diff --git a/src/components/utils/popover/popover-inline.ts b/src/components/utils/popover/popover-inline.ts index 444f46d0..78d75a30 100644 --- a/src/components/utils/popover/popover-inline.ts +++ b/src/components/utils/popover/popover-inline.ts @@ -1,5 +1,5 @@ import { isMobileScreen } from '../../utils'; -import { PopoverItem, PopoverItemDefault, PopoverItemType, WithChildren } from './components/popover-item'; +import { PopoverItem, PopoverItemDefault, PopoverItemType } from './components/popover-item'; import { PopoverItemHtml } from './components/popover-item/popover-item-html/popover-item-html'; import { PopoverDesktop } from './popover-desktop'; import { CSSVariables, css } from './popover.const'; @@ -9,11 +9,6 @@ import { PopoverParams } from './popover.types'; * Horizontal popover that is displayed inline with the content */ export class PopoverInline extends PopoverDesktop { - /** - * Item nested popover is displayed for - */ - private nestedPopoverTriggerItem: PopoverItemDefault | PopoverItemHtml | null = null; - /** * Constructs the instance * @@ -138,7 +133,6 @@ export class PopoverInline extends PopoverDesktop { return; } - this.nestedPopoverTriggerItem = item; super.showNestedItems(item); } @@ -148,7 +142,7 @@ export class PopoverInline extends PopoverDesktop { * * @param item - item to display nested popover by */ - protected showNestedPopoverForItem(item: WithChildren | WithChildren): PopoverDesktop { + protected showNestedPopoverForItem(item: PopoverItem): PopoverDesktop { const nestedPopover = super.showNestedPopoverForItem(item); const nestedPopoverEl = nestedPopover.getElement(); diff --git a/types/tools/inline-tool.d.ts b/types/tools/inline-tool.d.ts index 170779b0..42ebc3f2 100644 --- a/types/tools/inline-tool.d.ts +++ b/types/tools/inline-tool.d.ts @@ -13,10 +13,10 @@ export interface InlineTool extends BaseTool { /** * Method that accepts selected range and wrap it somehow - * @param {Range} range - selection's range + * @param range - selection's range. If no active selection, range is null * @deprecated use {@link MenuConfig} item onActivate property instead */ - surround?(range: Range): void; + surround?(range: Range | null): void; /** * Get SelectionUtils and detect if Tool was applied