Fix fast toggling of link tool in safari (#2757)

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<MenuConfig> {
     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<MenuConfigItem[]>((result, tool) => {
+      tool.toolbox?.forEach((toolboxItem) => {
         result.push({
           icon: toolboxItem.icon,
           title: toolboxItem.title,

src/components/modules/toolbar/inline.ts

@@ -524,10 +524,6 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
   private toolClicked(tool: IInlineTool): void {
     const range = SelectionUtils.range;
 
-    if (range === null) {
-      return;
-    }
-
     tool.surround?.(range);
     this.checkToolsState();
   }

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);
-  }
 }

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') {

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<PopoverItemDefault> | WithChildren<PopoverItemHtml>): 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<PopoverItemDefault> | WithChildren<PopoverItemHtml>): 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<PopoverItemDefault> | WithChildren<PopoverItemHtml>): PopoverDesktop {
+  protected showNestedPopoverForItem(item: PopoverItem): PopoverDesktop {
     this.nestedPopover = new PopoverDesktop({
       searchable: item.isChildrenSearchable,
       items: item.children,

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<PopoverItemDefault> | WithChildren<PopoverItemHtml>): PopoverDesktop {
+  protected showNestedPopoverForItem(item: PopoverItem): PopoverDesktop {
     const nestedPopover = super.showNestedPopoverForItem(item);
     const nestedPopoverEl = nestedPopover.getElement();
 

types/tools/inline-tool.d.ts

@@ -13,10 +13,10 @@ export interface InlineTool extends BaseTool<HTMLElement | MenuConfig> {
 
   /**
    * 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