@jackuait/blok 0.4.1-beta.11 → 0.4.1-beta.12

package/dist/chunks/{i18next-loader-BdNRw4n4.mjs → i18next-loader-D8GzSwio.mjs}

@@ -1,4 +1,4 @@
-import { e as i } from "./blok-oNSQ3HA6.mjs";
+import { e as i } from "./blok-BU6NwVkN.mjs";
 const l = async (e, r) => {
   const n = (await import("./i18next-CugVlwWp.mjs")).default.createInstance(), s = {
     lng: e,

package/dist/chunks/{index-DHgXmfki.mjs → index-C5e_WLFg.mjs}

@@ -1,4 +1,4 @@
-import { t as f, q as i } from "./inline-tool-convert-CRqgjRim.mjs";
+import { t as f, q as i } from "./inline-tool-convert-CLUxkCe_.mjs";
 const a = {
   wrapper: i(
     "fixed z-[2] bottom-5 left-5",

package/dist/chunks/{inline-tool-convert-CRqgjRim.mjs → inline-tool-convert-CLUxkCe_.mjs}

@@ -18,7 +18,7 @@ let nt = (o = 21) => {
   return t;
 };
 var ot = /* @__PURE__ */ ((o) => (o.VERBOSE = "VERBOSE", o.INFO = "INFO", o.WARN = "WARN", o.ERROR = "ERROR", o))(ot || {});
-const rt = () => "0.4.1-beta.11", Ct = {
+const rt = () => "0.4.1-beta.12", Ct = {
   BACKSPACE: 8,
   TAB: 9,
   ENTER: 13,
@@ -1895,6 +1895,7 @@ const te = `
       },
       children: {
         items: s,
+        width: "auto",
         onOpen: () => {
           c && (this.selectionAPI.setFakeBackground(), this.selectionAPI.save());
         },

package/dist/full.mjs

@@ -10,10 +10,10 @@ var e = (a, l, o) => l in a ? n(a, l, { enumerable: !0, configurable: !0, writab
       d.call(l, o) && e(a, o, l[o]);
   return a;
 }, r = (a, l) => t(a, c(l));
-import { B as v, v as A } from "./chunks/blok-oNSQ3HA6.mjs";
+import { B as v, v as A } from "./chunks/blok-BU6NwVkN.mjs";
 import { List as p, Header as f, Paragraph as I, Link as k, Italic as u, Bold as B } from "./tools.mjs";
 import { defaultBlockTools as H, defaultInlineTools as P } from "./tools.mjs";
-import { D as _ } from "./chunks/inline-tool-convert-CRqgjRim.mjs";
+import { D as _ } from "./chunks/inline-tool-convert-CLUxkCe_.mjs";
 const m = {
   paragraph: {
     class: I,

package/dist/tools.mjs

@@ -10,8 +10,8 @@ var U = (f, t, e) => t in f ? nt(f, t, { enumerable: !0, configurable: !0, writa
       it.call(t, e) && U(f, e, t[e]);
   return f;
 }, P = (f, t) => rt(f, st(t));
-import { t as x, D as m, a9 as et, aa as at, ab as lt, A as ct, ac as dt, ad as ut, ae as ht, af as ft, ag as pt, ah as mt, ai as G, aj as j, ak as $, f as A, al as gt, am as Et, S as H, P as Tt, an as Ct, l as At, J as yt } from "./chunks/inline-tool-convert-CRqgjRim.mjs";
-import { a0 as Dt } from "./chunks/inline-tool-convert-CRqgjRim.mjs";
+import { t as x, D as m, a9 as et, aa as at, ab as lt, A as ct, ac as dt, ad as ut, ae as ht, af as ft, ag as pt, ah as mt, ai as G, aj as j, ak as $, f as A, al as gt, am as Et, S as H, P as Tt, an as Ct, l as At, J as yt } from "./chunks/inline-tool-convert-CLUxkCe_.mjs";
+import { a0 as Dt } from "./chunks/inline-tool-convert-CLUxkCe_.mjs";
 const W = [
   "empty:before:pointer-events-none",
   "empty:before:text-gray-text",
@@ -531,7 +531,8 @@ const L = class L {
       titleKey: t.nameKey,
       name: `header-${t.number}`,
       data: { level: t.number },
-      searchTerms: [`h${t.number}`, "title", "header", "heading"]
+      searchTerms: [`h${t.number}`, "title", "header", "heading"],
+      shortcut: "#".repeat(t.number)
     }));
   }
 };
@@ -1342,7 +1343,11 @@ const u = class u {
     return {
       text: {
         br: !0,
-        a: !0,
+        a: {
+          href: !0,
+          target: "_blank",
+          rel: "nofollow"
+        },
         b: !0,
         i: !0,
         mark: !0
@@ -1421,7 +1426,8 @@ const u = class u {
         titleKey: "bulletedList",
         data: { style: "unordered" },
         name: "bulleted-list",
-        searchTerms: ["ul", "bullet", "unordered", "list"]
+        searchTerms: ["ul", "bullet", "unordered", "list"],
+        shortcut: "-"
       },
       {
         icon: j,
@@ -1429,7 +1435,8 @@ const u = class u {
         titleKey: "numberedList",
         data: { style: "ordered" },
         name: "numbered-list",
-        searchTerms: ["ol", "ordered", "number", "list"]
+        searchTerms: ["ol", "ordered", "number", "list"],
+        shortcut: "1."
       },
       {
         icon: $,
@@ -1437,7 +1444,8 @@ const u = class u {
         titleKey: "todoList",
         data: { style: "checklist" },
         name: "check-list",
-        searchTerms: ["checkbox", "task", "todo", "check", "list"]
+        searchTerms: ["checkbox", "task", "todo", "check", "list"],
+        shortcut: "[]"
       }
     ];
   }
@@ -2907,6 +2915,7 @@ const D = class D {
       isActive: () => !!this.selection.findParentTag("A"),
       children: {
         hideChevron: !0,
+        width: "200px",
         items: [
           {
             type: Tt.Html,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackuait/blok",
-  "version": "0.4.1-beta.11",
+  "version": "0.4.1-beta.12",
   "description": "Blok — headless, highly extensible rich text editor built for developers who need to implement a block-based editing experience (similar to Notion) without building it from scratch",
   "module": "dist/blok.mjs",
   "types": "./types/index.d.ts",

package/src/components/inline-tools/inline-tool-convert.ts

@@ -123,6 +123,7 @@ export class ConvertInlineTool implements InlineTool {
       },
       children: {
         items: convertToItems,
+        width: 'auto',
         onOpen: () => {
           if (isDesktop) {
             this.selectionAPI.setFakeBackground();

package/src/components/inline-tools/inline-tool-link.ts

@@ -133,6 +133,7 @@ export class LinkInlineTool implements InlineTool {
       isActive: () => !!this.selection.findParentTag('A'),
       children: {
         hideChevron: true,
+        width: '200px',
         items: [
           {
             type: PopoverItemType.Html,

package/src/components/modules/toolbar/blockSettings.ts

@@ -164,10 +164,11 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
 
     const PopoverClass = isMobileScreen() ? PopoverMobile : PopoverDesktop;
     const popoverParams: PopoverParams & { flipper?: Flipper } = {
-      searchable: true,
+      searchable: false,
       trigger: trigger || this.nodes.wrapper,
       items: await this.getTunesItems(block, commonTunes, toolTunes),
       scopeElement: this.Blok.API.methods.ui.nodes.redactor,
+      width: 'auto',
       messages: {
         nothingFound: this.Blok.I18n.t('popover.nothingFound'),
         search: this.Blok.I18n.t('popover.search'),

package/src/components/modules/toolbar/index.ts

@@ -109,18 +109,6 @@ export class Toolbar extends Module<ToolbarNodes> {
    */
   private toolboxInstance: Toolbox | null = null;
 
-  /**
-   * Mouse position when mousedown occurred on settings toggler
-   * Used to distinguish between click and drag
-   */
-  private settingsTogglerMouseDownPosition: { x: number; y: number } | null = null;
-
-  /**
-   * Mouse position when mousedown occurred on plus button
-   * Used to distinguish between click and drag
-   */
-  private plusButtonMouseDownPosition: { x: number; y: number } | null = null;
-
   /**
    * Last calculated toolbar Y position
    * Used to avoid unnecessary repositioning when the position hasn't changed
@@ -133,6 +121,12 @@ export class Toolbar extends Module<ToolbarNodes> {
    */
   private ignoreNextSettingsMouseUp = false;
 
+  /**
+   * Set of pending document-level mouseup listeners that need cleanup on destroy.
+   * Each listener is added on mousedown and removed after mouseup fires.
+   */
+  private pendingMouseUpListeners: Set<(e: MouseEvent) => void> = new Set();
+
   /**
    * @class
    * @param moduleConfiguration - Module Configuration
@@ -218,7 +212,6 @@ export class Toolbar extends Module<ToolbarNodes> {
         'not-mobile:w-6'
       ),
       settingsTogglerHidden: 'hidden',
-      settingsTogglerOpened: '',
     };
   }
 
@@ -660,60 +653,25 @@ export class Toolbar extends Module<ToolbarNodes> {
 
     /**
      * Plus button mousedown handler
-     * Stores the initial mouse position and sets up a document-level mouseup listener.
-     * Using document-level mouseup ensures we catch the event even if the mouse
-     * moves slightly off the button element during the click.
+     * Uses click-vs-drag detection to distinguish clicks from drags.
      */
     this.readOnlyMutableListeners.on(plusButton, 'mousedown', (e) => {
       hide();
 
-      const mouseEvent = e as MouseEvent;
-
-      /**
-       * Store the mouse position when mousedown occurs
-       * This will be used to determine if the user dragged or clicked
-       */
-      this.plusButtonMouseDownPosition = {
-        x: mouseEvent.clientX,
-        y: mouseEvent.clientY,
-      };
-
-      /**
-       * Add document-level mouseup listener to catch the event even if mouse
-       * moves slightly off the button. This is removed after firing once.
-       */
-      const onMouseUp = (mouseUpEvent: MouseEvent): void => {
-        document.removeEventListener('mouseup', onMouseUp, true);
-
-        const mouseDownPos = this.plusButtonMouseDownPosition;
-
-        this.plusButtonMouseDownPosition = null;
-
-        if (mouseDownPos === null) {
-          return;
-        }
-
-        const wasDragged = (
-          Math.abs(mouseUpEvent.clientX - mouseDownPos.x) > DRAG_THRESHOLD ||
-          Math.abs(mouseUpEvent.clientY - mouseDownPos.y) > DRAG_THRESHOLD
-        );
+      this.setupClickVsDrag(
+        e as MouseEvent,
+        (mouseUpEvent) => {
+          /**
+           * Check for modifier key to determine insert direction:
+           * - Option/Alt on Mac, Ctrl on Windows → insert above
+           * - No modifier → insert below (default)
+           */
+          const userOS = getUserOS();
+          const insertAbove = userOS.win ? mouseUpEvent.ctrlKey : mouseUpEvent.altKey;
 
-        if (wasDragged) {
-          return;
+          this.plusButtonClicked(insertAbove);
         }
-
-        /**
-         * Check for modifier key to determine insert direction:
-         * - Option/Alt on Mac, Ctrl on Windows → insert above
-         * - No modifier → insert below (default)
-         */
-        const userOS = getUserOS();
-        const insertAbove = userOS.win ? mouseUpEvent.ctrlKey : mouseUpEvent.altKey;
-
-        this.plusButtonClicked(insertAbove);
-      };
-
-      document.addEventListener('mouseup', onMouseUp, true);
+      );
     }, true);
 
     /**
@@ -931,66 +889,35 @@ export class Toolbar extends Module<ToolbarNodes> {
     if (settingsToggler) {
       /**
        * Settings toggler mousedown handler
-       * Stores the initial mouse position and sets up a document-level mouseup listener.
-       * Using document-level mouseup ensures we catch the event even if the mouse
-       * moves slightly off the toggler element during the click.
+       * Uses click-vs-drag detection to distinguish clicks from drags.
        */
       this.readOnlyMutableListeners.on(settingsToggler, 'mousedown', (e) => {
         hide();
 
-        const mouseEvent = e as MouseEvent;
-
-        /**
-         * Store the mouse position when mousedown occurs
-         * This will be used to determine if the user dragged or clicked
-         */
-        this.settingsTogglerMouseDownPosition = {
-          x: mouseEvent.clientX,
-          y: mouseEvent.clientY,
-        };
-
-        /**
-         * Add document-level mouseup listener to catch the event even if mouse
-         * moves slightly off the toggler. This is removed after firing once.
-         */
-        const onMouseUp = (mouseUpEvent: MouseEvent): void => {
-          document.removeEventListener('mouseup', onMouseUp, true);
-
-          /**
-           * Ignore mouseup after a block drop to prevent settings menu from opening
-           */
-          if (this.ignoreNextSettingsMouseUp) {
-            this.ignoreNextSettingsMouseUp = false;
-            this.settingsTogglerMouseDownPosition = null;
-
-            return;
-          }
-
-          const mouseDownPos = this.settingsTogglerMouseDownPosition;
-
-          this.settingsTogglerMouseDownPosition = null;
-
-          if (mouseDownPos === null) {
-            return;
-          }
-
-          const wasDragged = (
-            Math.abs(mouseUpEvent.clientX - mouseDownPos.x) > DRAG_THRESHOLD ||
-            Math.abs(mouseUpEvent.clientY - mouseDownPos.y) > DRAG_THRESHOLD
-          );
-
-          if (wasDragged) {
-            return;
-          }
-
-          this.settingsTogglerClicked();
-
-          if (this.toolboxInstance?.opened) {
-            this.toolboxInstance.close();
+        this.setupClickVsDrag(
+          e as MouseEvent,
+          () => {
+            this.settingsTogglerClicked();
+
+            if (this.toolboxInstance?.opened) {
+              this.toolboxInstance.close();
+            }
+          },
+          {
+            /**
+             * Check if we should ignore this mouseup (e.g., after a block drop)
+             */
+            beforeCallback: () => {
+              if (this.ignoreNextSettingsMouseUp) {
+                this.ignoreNextSettingsMouseUp = false;
+
+                return false;
+              }
+
+              return true;
+            },
           }
-        };
-
-        document.addEventListener('mouseup', onMouseUp, true);
+        );
       }, true);
     }
 
@@ -1302,6 +1229,50 @@ export class Toolbar extends Module<ToolbarNodes> {
     return container;
   }
 
+  /**
+   * Sets up a click-vs-drag detection pattern on an element.
+   * Tracks mousedown position and fires callback only if mouse didn't move beyond threshold.
+   * Uses document-level mouseup to catch events even if mouse moves off element.
+   * @param element - Element to attach mousedown listener to
+   * @param mouseEvent - The mousedown event
+   * @param onClickCallback - Callback to fire if it was a click (not a drag)
+   * @param options - Optional configuration
+   * @param options.beforeCallback - Function called before click callback, return false to abort
+   */
+  private setupClickVsDrag(
+    mouseEvent: MouseEvent,
+    onClickCallback: (mouseUpEvent: MouseEvent) => void,
+    options?: { beforeCallback?: () => boolean }
+  ): void {
+    const startPosition = {
+      x: mouseEvent.clientX,
+      y: mouseEvent.clientY,
+    };
+
+    const onMouseUp = (mouseUpEvent: MouseEvent): void => {
+      document.removeEventListener('mouseup', onMouseUp, true);
+      this.pendingMouseUpListeners.delete(onMouseUp);
+
+      if (options?.beforeCallback && !options.beforeCallback()) {
+        return;
+      }
+
+      const wasDragged = (
+        Math.abs(mouseUpEvent.clientX - startPosition.x) > DRAG_THRESHOLD ||
+        Math.abs(mouseUpEvent.clientY - startPosition.y) > DRAG_THRESHOLD
+      );
+
+      if (wasDragged) {
+        return;
+      }
+
+      onClickCallback(mouseUpEvent);
+    };
+
+    this.pendingMouseUpListeners.add(onMouseUp);
+    document.addEventListener('mouseup', onMouseUp, true);
+  }
+
   /**
    * Removes all created and saved HTMLElements
    * It is used in Read-Only mode
@@ -1311,5 +1282,15 @@ export class Toolbar extends Module<ToolbarNodes> {
     if (this.toolboxInstance) {
       this.toolboxInstance.destroy();
     }
+
+    /**
+     * Clean up any pending document-level mouseup listeners.
+     * These are added on mousedown and normally removed on mouseup,
+     * but if the component is destroyed mid-click, they need manual cleanup.
+     */
+    for (const listener of this.pendingMouseUpListeners) {
+      document.removeEventListener('mouseup', listener, true);
+    }
+    this.pendingMouseUpListeners.clear();
   }
 }

package/src/components/modules/ui.ts

@@ -468,7 +468,7 @@ export class UI extends Module<UINodes> {
     };
 
     const handleBlockHovered = (event: Event): void => {
-      if (!(event instanceof MouseEvent)) {
+      if (typeof MouseEvent === 'undefined' || !(event instanceof MouseEvent)) {
         return;
       }
 

package/src/components/ui/toolbox.ts

@@ -145,6 +145,12 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
    */
   private currentBlockForSearch: HTMLElement | null = null;
 
+  /**
+   * Cached contentEditable element for the current block being searched.
+   * Avoids repeated DOM queries on each input event.
+   */
+  private currentContentEditable: Element | null = null;
+
   /**
    * Toolbox constructor
    * @param options - available parameters
@@ -383,6 +389,9 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
       const userSearchTerms = tool.searchTerms ?? [];
       const mergedSearchTerms = [...new Set([...librarySearchTerms, ...userSearchTerms])];
 
+      // Use entry-level shortcut if available, otherwise fall back to tool-level shortcut (for first entry only)
+      const shortcut = toolboxItem.shortcut ?? (displaySecondaryLabel ? tool.shortcut : undefined);
+
       return {
         icon: toolboxItem.icon,
         title: translateToolTitle(this.i18n, toolboxItem, capitalize(tool.name)),
@@ -390,7 +399,7 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
         onActivate: (): void => {
           void this.toolButtonActivated(tool.name, toolboxItem.data);
         },
-        secondaryLabel: (tool.shortcut && displaySecondaryLabel) ? beautifyShortcut(tool.shortcut) : '',
+        secondaryLabel: shortcut ? beautifyShortcut(shortcut) : '',
         englishTitle,
         searchTerms: mergedSearchTerms,
       };
@@ -545,6 +554,7 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
     }
 
     this.currentBlockForSearch = currentBlock.holder;
+    this.currentContentEditable = this.currentBlockForSearch.querySelector('[contenteditable="true"]');
     this.listeners.on(this.currentBlockForSearch, 'input', this.handleBlockInput);
   }
 
@@ -555,6 +565,7 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
     if (this.currentBlockForSearch !== null) {
       this.listeners.off(this.currentBlockForSearch, 'input', this.handleBlockInput);
       this.currentBlockForSearch = null;
+      this.currentContentEditable = null;
     }
 
     this.popover?.filterItems('');
@@ -565,13 +576,11 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
    * Extracts text after "/" and applies it as a filter query.
    */
   private handleBlockInput = (): void => {
-    if (this.currentBlockForSearch === null) {
+    if (this.currentContentEditable === null) {
       return;
     }
 
-    // Get text from the contenteditable element inside the block
-    const contentEditable = this.currentBlockForSearch.querySelector('[contenteditable="true"]');
-    const text = contentEditable?.textContent || '';
+    const text = this.currentContentEditable.textContent || '';
     const slashIndex = text.lastIndexOf('/');
 
     if (slashIndex === -1) {

package/src/components/utils/popover/components/popover-item/popover-item-default/popover-item-default.ts

@@ -265,7 +265,7 @@ export class PopoverItemDefault extends PopoverItem {
     if (params.secondaryLabel) {
       const secondaryEl = document.createElement('div');
 
-      secondaryEl.className = 'whitespace-nowrap pr-1.5 text-xs -tracking-widest text-text-secondary opacity-60';
+      secondaryEl.className = 'whitespace-nowrap pr-1.5 text-xs font-light tracking-[0.25px] text-text-secondary opacity-60';
       secondaryEl.setAttribute(DATA_ATTR.popoverItemSecondaryTitle, '');
       secondaryEl.setAttribute('data-blok-testid', 'popover-item-secondary-title');
       secondaryEl.textContent = params.secondaryLabel;

package/src/components/utils/popover/components/popover-item/popover-item.ts

@@ -158,6 +158,17 @@ export abstract class PopoverItem {
     return this.params !== undefined && 'children' in this.params && this.params.children?.searchable === true;
   }
 
+  /**
+   * Returns the width for children popover, if specified
+   */
+  public get childrenWidth(): string | undefined {
+    if (this.params === undefined || !('children' in this.params)) {
+      return undefined;
+    }
+
+    return this.params.children?.width;
+  }
+
   /**
    * True if popover should close once item is activated
    */

package/src/components/utils/popover/popover-abstract.ts

@@ -399,7 +399,7 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
     popover.setAttribute('data-blok-testid', 'popover');
 
     // Set CSS variables
-    popover.style.setProperty('--width', '200px');
+    popover.style.setProperty('--width', this.params.width ?? '280px');
     popover.style.setProperty('--item-padding', '3px');
     popover.style.setProperty('--item-height', 'calc(1.25rem + 2 * var(--item-padding))');
     popover.style.setProperty('--popover-top', 'calc(100% + 0.5rem)');

package/src/components/utils/popover/popover-desktop.ts

@@ -401,6 +401,7 @@ export class PopoverDesktop extends PopoverAbstract {
       flippable: item.isChildrenFlippable,
       messages: this.messages,
       onNavigateBack: this.destroyNestedPopoverIfExists.bind(this),
+      width: item.childrenWidth,
     });
 
     item.onChildrenOpen();
@@ -452,14 +453,19 @@ export class PopoverDesktop extends PopoverAbstract {
     // Apply position: absolute for nested container
     nestedContainer.style.position = 'absolute';
 
+    // Get parent width - use computed width if --width is 'auto'
+    const parentWidth = this.params.width === 'auto'
+      ? `${this.nodes.popoverContainer.offsetWidth}px`
+      : 'var(--width)';
+
     // Calculate --popover-left based on nesting level and parent open direction
     // Set on the actual popover element to override its default value
     if (isParentOpenLeft) {
       // Position to the left
-      actualPopoverEl.style.setProperty(CSSVariables.PopoverLeft, 'calc(-1 * (var(--nesting-level) + 1) * var(--width) + 100%)');
+      actualPopoverEl.style.setProperty(CSSVariables.PopoverLeft, `calc(-1 * (var(--nesting-level) + 1) * ${parentWidth} + 100%)`);
     } else {
       // Position to the right
-      actualPopoverEl.style.setProperty(CSSVariables.PopoverLeft, 'calc(var(--nesting-level) * (var(--width) - var(--nested-popover-overlap)))');
+      actualPopoverEl.style.setProperty(CSSVariables.PopoverLeft, `calc(var(--nesting-level) * (${parentWidth} - var(--nested-popover-overlap)))`);
     }
 
     // Calculate top position based on parent open direction

package/src/stories/Popover.stories.ts

@@ -21,7 +21,6 @@ const POPOVER_ITEM_TESTID = '[data-blok-testid="popover-item"]';
 const POPOVER_OPENED_SELECTOR = '[data-blok-popover-opened="true"]';
 const ITEM_FOCUSED_SELECTOR = '[data-blok-focused=\"true\"]';
 const CONFIRMATION_SELECTOR = '[data-blok-popover-item-confirmation="true"]';
-const NOTHING_FOUND_SELECTOR = '[data-blok-nothing-found-displayed="true"]';
 const DELETE_BUTTON_SELECTOR = '[data-blok-item-name="delete"]';
 const CONVERT_TO_SELECTOR = '[data-blok-item-name="convert-to"]';
 const NESTED_POPOVER_SELECTOR = '[data-blok-nested="true"]';
@@ -451,90 +450,6 @@ export const SearchFiltering: Story = {
   },
 };
 
-/**
- * Popover nothing found message (in block settings).
- */
-export const NothingFoundMessage: Story = {
-  args: {
-    data: sampleData,
-  },
-  play: async ({ canvasElement, step }) => {
-    await step('Wait for editor and toolbar to initialize', async () => {
-      await waitFor(
-        () => {
-          const block = canvasElement.querySelector(BLOCK_TESTID);
-
-          expect(block).toBeInTheDocument();
-        },
-        TIMEOUT_INIT
-      );
-      // Wait for toolbar to be created (happens in requestIdleCallback)
-      await waitForToolbar(canvasElement);
-    });
-
-    await step('Click block to show toolbar', async () => {
-      const block = canvasElement.querySelector(BLOCK_TESTID);
-
-      if (block) {
-        simulateClick(block);
-      }
-
-      await waitFor(
-        () => {
-          const toolbar = canvasElement.querySelector(TOOLBAR_TESTID);
-
-          expect(toolbar).toHaveAttribute('data-blok-opened', 'true');
-        },
-        TIMEOUT_ACTION
-      );
-    });
-
-    await step('Open block settings', async () => {
-      const settingsButton = canvasElement.querySelector(SETTINGS_BUTTON_TESTID);
-
-      if (settingsButton) {
-        await userEvent.click(settingsButton);
-      }
-
-      await waitFor(
-        () => {
-          // Block tunes popover is appended to document.body
-          const blockTunesPopover = document.querySelector(BLOCK_TUNES_POPOVER_TESTID);
-
-          expect(blockTunesPopover).toBeInTheDocument();
-        },
-        TIMEOUT_ACTION
-      );
-    });
-
-    await step('Search for non-existent item', async () => {
-      // Wait for popover to be fully rendered and search input to be available
-      await new Promise((resolve) => setTimeout(resolve, 100));
-
-      // Find and focus the search input inside the popover
-      const searchInput = document.querySelector('[data-blok-testid="popover-search-input"]') as HTMLInputElement;
-
-      if (searchInput) {
-        searchInput.focus();
-        // Type directly into the input
-        searchInput.value = 'xyznonexistent';
-        // Trigger input event to notify the search handler
-        searchInput.dispatchEvent(new Event('input', { bubbles: true }));
-      }
-
-      await waitFor(
-        () => {
-          // Nothing found message is inside the popover which is in document.body
-          const nothingFound = document.querySelector(NOTHING_FOUND_SELECTOR);
-
-          expect(nothingFound).toBeInTheDocument();
-        },
-        TIMEOUT_ACTION
-      );
-    });
-  },
-};
-
 /**
  * Popover item in disabled state.
  */