@jackuait/blok 0.6.0 → 0.7.0-beta.2

package/src/components/modules/blockManager/operations.ts

@@ -175,6 +175,35 @@ export class BlockOperations {
     return previousBlock ?? null;
   }
 
+  /**
+   * Get next visible block (skips blocks whose holder has 'hidden' class)
+   * Returns null when no visible block is found after the current one
+   */
+  public get nextVisibleBlock(): Block | null {
+    if (this.currentBlockIndex === -1) {
+      return null;
+    }
+
+    return this.repository.blocks
+      .slice(this.currentBlockIndex + 1)
+      .find(block => !block.holder.classList.contains('hidden')) ?? null;
+  }
+
+  /**
+   * Get previous visible block (skips blocks whose holder has 'hidden' class)
+   * Returns null when no visible block is found before the current one
+   */
+  public get previousVisibleBlock(): Block | null {
+    if (this.currentBlockIndex === -1) {
+      return null;
+    }
+
+    return this.repository.blocks
+      .slice(0, this.currentBlockIndex)
+      .reverse()
+      .find(block => !block.holder.classList.contains('hidden')) ?? null;
+  }
+
   /**
    * Insert new block
    * @param options - Insert options
@@ -256,6 +285,20 @@ export class BlockOperations {
 
     blocksStore.insert(targetIndex, block, replace, appendToWorkingArea);
 
+    /**
+     * Update the raw currentBlockIndex BEFORE firing the mutation event so
+     * that listeners (e.g. TableCellBlocks.handleBlockMutation) see the
+     * index of the newly inserted block. We bypass the setter to avoid
+     * triggering stopCapturing prematurely — that happens after Yjs sync.
+     */
+    const prevIndex = this.currentBlockIndex;
+
+    if (needToFocus) {
+      this.currentBlockIndex = targetIndex;
+    } else if (targetIndex <= this.currentBlockIndex) {
+      this.currentBlockIndex++;
+    }
+
     /**
      * Force call of didMutated event on Block insertion
      */
@@ -277,12 +320,12 @@ export class BlockOperations {
       }, targetIndex);
     }
 
-    if (needToFocus) {
-      this.currentBlockIndexValue = targetIndex;
-    }
-
-    if (!needToFocus && targetIndex <= this.currentBlockIndex) {
-      this.currentBlockIndexValue++;
+    /**
+     * Trigger stopCapturing for the index change now that Yjs sync is done.
+     * This preserves undo group boundaries at the original timing.
+     */
+    if (this.currentBlockIndex !== prevIndex && !this.suppressStopCapturing) {
+      this.dependencies.YjsManager?.stopCapturing();
     }
 
     return block;
@@ -349,6 +392,18 @@ export class BlockOperations {
         parentBlock.contentIds = parentBlock.contentIds.filter(id => id !== block.id);
       }
 
+      // Promote children to root level when a parent block is removed
+      for (const childId of block.contentIds) {
+        const childBlock = this.repository.getBlockById(childId);
+
+        if (childBlock === undefined) {
+          continue;
+        }
+
+        childBlock.parentId = null;
+        childBlock.holder.classList.remove('hidden');
+      }
+
       blocksStore.remove(index);
 
       /**
@@ -416,6 +471,8 @@ export class BlockOperations {
       tool: block.name,
       data: Object.assign({}, existingData, data ?? {}),
       tunes: tunes ?? block.preservedTunes,
+      parentId: block.parentId ?? undefined,
+      contentIds: block.contentIds.length > 0 ? [...block.contentIds] : undefined,
       bindEventsImmediately: true,
     });
 
@@ -455,6 +512,10 @@ export class BlockOperations {
     const blockIndex = this.repository.getBlockIndex(block);
     const newBlockId = generateBlockId();
 
+    // Capture hierarchy before replacement
+    const oldParentId = block.parentId;
+    const oldContentIds = [...block.contentIds];
+
     // Atomic transaction: remove old block + add new block as single undo entry
     this.dependencies.YjsManager.transact(() => {
       this.dependencies.YjsManager.removeBlock(block.id);
@@ -466,7 +527,7 @@ export class BlockOperations {
     });
 
     // DOM update (skip Yjs sync — already done above)
-    return this.insert({
+    const newBlock = this.insert({
       id: newBlockId,
       tool: newTool,
       data,
@@ -474,6 +535,28 @@ export class BlockOperations {
       replace: true,
       skipYjsSync: true,
     }, blocksStore);
+
+    // Transfer hierarchy to new block
+    if (oldParentId !== null) {
+      newBlock.parentId = oldParentId;
+
+      const parentBlock = this.repository.getBlockById(oldParentId);
+
+      if (parentBlock !== undefined) {
+        parentBlock.contentIds = parentBlock.contentIds.map(id => id === block.id ? newBlock.id : id);
+      }
+    }
+
+    for (const childId of oldContentIds) {
+      const childBlock = this.repository.getBlockById(childId);
+
+      if (childBlock !== undefined) {
+        childBlock.parentId = newBlock.id;
+      }
+    }
+    newBlock.contentIds = oldContentIds;
+
+    return newBlock;
   }
 
   /**
@@ -663,12 +746,19 @@ export class BlockOperations {
       });
 
       // Insert DOM block (skip Yjs sync - already done above)
-      return this.insert({
+      const newBlock = this.insert({
         id: newBlockId,
         tool: currentBlock.name,
         data: { text: extractedText },
         skipYjsSync: true,
       }, blocksStore);
+
+      // Inherit parentId from the split block so nested blocks stay nested
+      if (currentBlock.parentId !== null) {
+        this.hierarchy.setBlockParent(newBlock, currentBlock.parentId);
+      }
+
+      return newBlock;
     });
   }
 
@@ -722,7 +812,7 @@ export class BlockOperations {
       }
 
       // Insert DOM block (skip Yjs sync - already done above)
-      return this.insert({
+      const newBlock = this.insert({
         id: newBlockId,
         tool: newBlockType,
         data: newBlockData,
@@ -730,6 +820,13 @@ export class BlockOperations {
         needToFocus: true,
         skipYjsSync: true,
       }, blocksStore);
+
+      // Inherit parentId from the split block so nested blocks stay nested
+      if (currentBlock.parentId !== null) {
+        this.hierarchy.setBlockParent(newBlock, currentBlock.parentId);
+      }
+
+      return newBlock;
     });
   }
 

package/src/components/modules/blockSelection.ts

@@ -336,6 +336,8 @@ export class BlockSelection extends Module {
       tool: block.name,
       data: block.preservedData,
       tunes: block.preservedTunes,
+      parentId: block.parentId,
+      contentIds: block.contentIds,
     }));
 
     this.selectedBlocks.forEach((block) => {

package/src/components/modules/caret.ts

@@ -499,7 +499,7 @@ export class Caret extends Module {
    */
   public navigateNext(force = false): boolean {
     const { BlockManager } = this.Blok;
-    const { currentBlock, nextBlock } = BlockManager;
+    const { currentBlock, nextVisibleBlock: nextBlock } = BlockManager;
 
     if (currentBlock === undefined) {
       return false;
@@ -567,7 +567,7 @@ export class Caret extends Module {
    * @param {boolean} force - pass true to skip check for caret position
    */
   public navigatePrevious(force = false): boolean {
-    const { currentBlock, previousBlock } = this.Blok.BlockManager;
+    const { currentBlock, previousVisibleBlock: previousBlock } = this.Blok.BlockManager;
 
     if (!currentBlock) {
       return false;
@@ -634,7 +634,7 @@ export class Caret extends Module {
    */
   public navigateVerticalNext(): boolean {
     const { BlockManager } = this.Blok;
-    const { currentBlock, nextBlock } = BlockManager;
+    const { currentBlock, nextVisibleBlock: nextBlock } = BlockManager;
 
     if (currentBlock === undefined) {
       return false;
@@ -681,6 +681,35 @@ export class Caret extends Module {
       return true;
     }
 
+    /**
+     * If current block is inside a table cell (has parentId), check if we should
+     * exit the table. This handles two cases:
+     * 1. nextBlock is still in the same table → skip all cell paragraphs
+     * 2. nextBlock is null (last block in flat list) → table is at the end
+     */
+    const shouldExitParent = currentBlock.parentId !== null && (
+      nextBlock === null ||
+      nextBlock.parentId === currentBlock.parentId ||
+      nextBlock.id === currentBlock.parentId
+    );
+
+    if (shouldExitParent && currentBlock.parentId !== null) {
+      const blockAfterTable = this.findFirstBlockAfterParent(currentBlock.parentId);
+
+      if (blockAfterTable !== null) {
+        this.setToBlockAtXPosition(blockAfterTable, caretX, true);
+
+        return true;
+      }
+
+      // No block after table — create one
+      const newBlock = BlockManager.insertAtEnd();
+
+      this.setToBlock(newBlock, this.positions.START);
+
+      return true;
+    }
+
     /**
      * Navigate to next block, preserving horizontal position
      */
@@ -714,7 +743,7 @@ export class Caret extends Module {
    */
   public navigateVerticalPrevious(): boolean {
     const { BlockManager } = this.Blok;
-    const { currentBlock, previousBlock } = BlockManager;
+    const { currentBlock, previousVisibleBlock: previousBlock } = BlockManager;
 
     if (currentBlock === undefined) {
       return false;
@@ -773,6 +802,22 @@ export class Caret extends Module {
     return false;
   }
 
+  /**
+   * Find the first block after a parent block (e.g., a table) by scanning the flat
+   * block array and skipping blocks whose parentId matches.
+   */
+  private findFirstBlockAfterParent(parentBlockId: string): Block | null {
+    const { BlockManager } = this.Blok;
+    const blocks = BlockManager.blocks;
+    const parentIndex = blocks.findIndex(b => b.id === parentBlockId);
+
+    if (parentIndex === -1) {
+      return null;
+    }
+
+    return blocks.slice(parentIndex + 1).find(b => b.parentId !== parentBlockId) ?? null;
+  }
+
   /**
    * Inserts shadow element after passed element where caret can be placed
    * @param {Element} element - element after which shadow caret should be inserted

package/src/components/modules/drag/DragController.ts

@@ -110,11 +110,18 @@ export class DragController extends Module {
       ? this.Blok.BlockSelection.selectedBlocks
       : [block];
 
-    // For single-block list item drags, include all descendants
-    const descendants = !isBlockSelected && this.listItemDescendants
+    // For single-block drags, include all descendants (list items via depth, toggles via contentIds)
+    const listDescendants = !isBlockSelected && this.listItemDescendants
       ? this.listItemDescendants.getDescendants(block)
       : [];
 
+    // If no list descendants found, check for hierarchy children (toggle blocks)
+    const hasHierarchyChildren = !isBlockSelected && block.contentIds?.length > 0;
+    const hierarchyDescendants = listDescendants.length === 0 && hasHierarchyChildren
+      ? this.getHierarchyDescendants(block)
+      : [];
+    const descendants = listDescendants.length > 0 ? listDescendants : hierarchyDescendants;
+
     const blocksToMove = descendants.length > 0
       ? [block, ...descendants]
       : initialBlocks;
@@ -458,6 +465,31 @@ export class DragController extends Module {
     this.Blok.Toolbar.moveAndOpen(blockToShow);
   }
 
+  /**
+   * Recursively collects all descendants of a block via the parentId/contentIds hierarchy.
+   * Used for toggle blocks and other parent-child structures that don't use data-list-depth.
+   * @param block - Parent block to collect descendants for
+   * @returns Array of descendant blocks
+   */
+  private getHierarchyDescendants(block: Block): Block[] {
+    const descendants: Block[] = [];
+
+    const collectChildren = (parentBlock: Block): void => {
+      for (const childId of parentBlock.contentIds) {
+        const child = this.Blok.BlockManager.getBlockById(childId);
+
+        if (child !== undefined) {
+          descendants.push(child);
+          collectChildren(child);
+        }
+      }
+    };
+
+    collectChildren(block);
+
+    return descendants;
+  }
+
   public destroy(): void {
     this.cleanup();
   }

package/src/components/modules/paste/handlers/blok-data-handler.ts

@@ -1,6 +1,7 @@
 import type { SanitizerConfig } from '../../../../../types/configs/sanitizer-config';
 import type { SavedData } from '../../../../../types/data-formats';
 import type { BlokModules } from '../../../../types-internal/blok-modules';
+import type { Block } from '../../../block';
 import { sanitizeBlocks } from '../../../utils/sanitizer';
 import type { SanitizerConfigBuilder } from '../sanitizer-config';
 import type { ToolRegistry } from '../tool-registry';
@@ -10,6 +11,15 @@ import type { PasteHandler } from './base';
 import { BasePasteHandler } from './base';
 import { PatternHandler } from './pattern-handler';
 
+/**
+ * Shape of a block in the Blok clipboard data.
+ * Extends the basic SavedData fields with optional hierarchy information.
+ */
+interface BlokClipboardBlock extends Pick<SavedData, 'id' | 'data' | 'tool'> {
+  parentId?: string | null;
+  contentIds?: string[];
+}
+
 
 /**
  * Blok Data Handler Priority.
@@ -45,7 +55,7 @@ export class BlokDataHandler extends BasePasteHandler implements PasteHandler {
       return false;
     }
 
-    const parsedBlokData = JSON.parse(data) as Pick<SavedData, 'id' | 'data' | 'tool'>[];
+    const parsedBlokData = JSON.parse(data) as BlokClipboardBlock[];
 
     // Check if we should try pattern matching first (for URL pasting within editor)
     const hasPatterns = this.toolRegistry.toolsPatterns.length > 0;
@@ -118,9 +128,11 @@ export class BlokDataHandler extends BasePasteHandler implements PasteHandler {
 
   /**
    * Insert Blok JSON blocks.
+   * After inserting all blocks, restores parent-child hierarchy using an ID mapping
+   * (pasted blocks receive new IDs, so original IDs are mapped to new block instances).
    */
   private insertBlokBlocks(
-    blocks: Pick<SavedData, 'id' | 'data' | 'tool'>[],
+    blocks: BlokClipboardBlock[],
     canReplace: boolean
   ): void {
     const { BlockManager, Caret, Tools } = this.Blok;
@@ -130,7 +142,14 @@ export class BlokDataHandler extends BasePasteHandler implements PasteHandler {
       this.config.sanitizer
     );
 
-    sanitizedBlocks.forEach(({ tool, data }, i) => {
+    /**
+     * Map from original (old) block ID to the newly inserted Block instance.
+     * Used after insertion to re-establish parent-child relationships.
+     */
+    const oldIdToEntry = new Map<string, { newBlock: Block; original: BlokClipboardBlock }>();
+
+    sanitizedBlocks.forEach((sanitizedBlock, i) => {
+      const { tool, data } = sanitizedBlock;
       const needToReplaceCurrentBlock = i === 0 &&
         canReplace &&
         Boolean(BlockManager.currentBlock?.tool.isDefault) &&
@@ -142,7 +161,35 @@ export class BlokDataHandler extends BasePasteHandler implements PasteHandler {
         replace: needToReplaceCurrentBlock,
       });
 
+      const originalBlock = blocks[i];
+
+      if (originalBlock !== undefined) {
+        oldIdToEntry.set(originalBlock.id, { newBlock: block, original: originalBlock });
+      }
+
       Caret.setToBlock(block, Caret.positions.END);
     });
+
+    /**
+     * Restore parent-child hierarchy using the old-to-new ID mapping.
+     * Only restores relationships where both parent and child are in the pasted set.
+     */
+    for (const [, { newBlock, original }] of oldIdToEntry) {
+      if (original.parentId === undefined || original.parentId === null) {
+        continue;
+      }
+
+      const parentEntry = oldIdToEntry.get(original.parentId);
+
+      if (parentEntry === undefined) {
+        continue;
+      }
+
+      newBlock.parentId = parentEntry.newBlock.id;
+
+      if (!parentEntry.newBlock.contentIds.includes(newBlock.id)) {
+        parentEntry.newBlock.contentIds = [...parentEntry.newBlock.contentIds, newBlock.id];
+      }
+    }
   }
 }

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

@@ -393,22 +393,16 @@ export class Toolbar extends Module<ToolbarNodes> {
     }
 
     /**
-     * Suppress toolbar buttons when the focused element is inside a table cell.
-     * The toolbar still positions itself for toolbox/slash-search purposes,
-     * but plus button and settings toggler remain hidden while a cell has focus.
-     *
-     * Note: we check focus (activeElement) not hover. On hover alone, the plus
-     * button should remain visible so the user can click it to add blocks
-     * below the table. Only when the user actually clicks/focuses inside a cell
-     * should the buttons be suppressed.
+     * Adjust toolbar button visibility when focus is inside a table cell.
+     * The plus button always stays visible so users can add blocks below the table.
+     * The settings toggler is hidden because drag/settings don't apply to individual cells.
      */
     const focusIsInsideCell = this.isFocusInsideTableCell();
-    const displayValue = focusIsInsideCell ? 'none' : '';
 
-    plusButton.style.display = displayValue;
+    plusButton.style.display = '';
 
     if (settingsToggler) {
-      settingsToggler.style.display = displayValue;
+      settingsToggler.style.display = focusIsInsideCell ? 'none' : '';
     }
 
     const targetBlockHolder = targetBlock.holder;
@@ -662,8 +656,8 @@ export class Toolbar extends Module<ToolbarNodes> {
 
   /**
    * Updates toolbar button visibility based on whether a table cell has focus.
-   * Hides plus button and settings toggler when focus is inside a cell;
-   * restores them when focus moves to a regular block.
+   * The plus button always stays visible; the settings toggler is hidden when
+   * focus is inside a cell and restored when focus moves to a regular block.
    *
    * Called from the focusin listener so button state is updated immediately
    * on click, without waiting for the next hover/moveAndOpen cycle.
@@ -676,12 +670,11 @@ export class Toolbar extends Module<ToolbarNodes> {
     }
 
     const focusIsInsideCell = this.isFocusInsideTableCell();
-    const displayValue = focusIsInsideCell ? 'none' : '';
 
-    plusButton.style.display = displayValue;
+    plusButton.style.display = '';
 
     if (settingsToggler) {
-      settingsToggler.style.display = displayValue;
+      settingsToggler.style.display = focusIsInsideCell ? 'none' : '';
     }
   }
 
@@ -837,9 +830,11 @@ export class Toolbar extends Module<ToolbarNodes> {
       i18nLabels: {
         filter: this.Blok.I18n.t('popover.search'),
         nothingFound: this.Blok.I18n.t('popover.nothingFound'),
+        slashSearchPlaceholder: this.Blok.I18n.t('toolbox.typeToSearch'),
       },
       i18n: this.Blok.I18n,
       triggerElement: this.nodes.plusButton,
+      leftAlignElement: this.nodes.content,
     });
 
     this.toolboxInstance.on(ToolboxEvent.Opened, () => {

package/src/components/modules/ui.ts

@@ -22,6 +22,7 @@ import { KeyboardController } from './uiControllers/controllers/keyboard';
 import { SelectionController } from './uiControllers/controllers/selection';
 import { createDocumentClickedHandler } from './uiControllers/handlers/click';
 import { createRedactorTouchHandler } from './uiControllers/handlers/touch';
+import { ToggleShortcuts } from '../../tools/toggle/toggle-shortcuts';
 
 /**
  * HTML Elements used for UI
@@ -56,6 +57,7 @@ export class UI extends Module<UINodes> {
   private keyboardController: KeyboardController | null = null;
   private selectionController: SelectionController | null = null;
   private blockHoverController: BlockHoverController | null = null;
+  private toggleShortcuts: ToggleShortcuts | null = null;
 
   /**
    * Handlers for simple event behaviors
@@ -158,6 +160,15 @@ export class UI extends Module<UINodes> {
      */
     this.initializeControllers();
 
+    /**
+     * Register toggle shortcuts (CMD+ALT+T) for collapsing/expanding all toggle blocks
+     */
+    this.toggleShortcuts = new ToggleShortcuts(
+      this.Blok.API.methods,
+      this.nodes.wrapper
+    );
+    this.toggleShortcuts.register();
+
     /**
      * Enable selection controller after initialization.
      * This is needed because bindReadOnlyInsensitiveListeners() is called in make()
@@ -343,6 +354,7 @@ export class UI extends Module<UINodes> {
    * Clean blok`s UI
    */
   public destroy(): void {
+    this.toggleShortcuts?.unregister();
     this.nodes.holder.innerHTML = '';
 
     this.unbindReadOnlyInsensitiveListeners();

package/src/components/ui/toolbox.ts

@@ -14,6 +14,7 @@ import { translateToolTitle, type I18nInstance } from '../utils/tools';
 
 import type { API, BlockToolData, ToolboxConfigEntry, PopoverItemParams, BlockAPI } from '@/types';
 import { PopoverEvent } from '@/types/utils/popover/popover-event';
+import { DATA_ATTR } from '../constants';
 
 
 /**
@@ -56,7 +57,7 @@ export interface ToolboxEventMap {
 /**
  * Available i18n dict keys that should be passed to the constructor
  */
-type ToolboxTextLabelsKeys = 'filter' | 'nothingFound';
+type ToolboxTextLabelsKeys = 'filter' | 'nothingFound' | 'slashSearchPlaceholder';
 
 /**
  * Toolbox
@@ -144,6 +145,11 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
    */
   private triggerElement?: HTMLElement;
 
+  /**
+   * Optional element whose left edge is used for horizontal popover alignment.
+   */
+  private leftAlignElement?: HTMLElement;
+
   /**
    * The block element currently being listened to for inline slash search
    */
@@ -168,13 +174,15 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
    * @param options.tools - Tools available to check whether some of them should be displayed at the Toolbox or not
    * @param options.i18n - I18n instance for translations
    * @param options.triggerElement - Element relative to which the popover should be positioned
+   * @param options.leftAlignElement - Element whose left edge is used for horizontal popover alignment
    */
-  constructor({ api, tools, i18nLabels, i18n, triggerElement }: {
+  constructor({ api, tools, i18nLabels, i18n, triggerElement, leftAlignElement }: {
     api: API;
     tools: ToolsCollection<BlockToolAdapter>;
     i18nLabels: Record<ToolboxTextLabelsKeys, string>;
     i18n: I18nInstance;
     triggerElement?: HTMLElement;
+    leftAlignElement?: HTMLElement;
   }) {
     super();
 
@@ -183,6 +191,7 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
     this.i18nLabels = i18nLabels;
     this.i18n = i18n;
     this.triggerElement = triggerElement;
+    this.leftAlignElement = leftAlignElement;
 
     this.enableShortcuts();
 
@@ -311,6 +320,7 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
       this.isInsideTableCell = false;
     }
 
+    this.stopListeningToBlockInput();
     this.popover?.hide();
     this.opened = false;
     this.emit(ToolboxEvent.Closed);
@@ -344,6 +354,7 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
     this.popover = new PopoverClass({
       scopeElement: this.api.ui.nodes.redactor,
       trigger: this.triggerElement || this.nodes.toolbox,
+      leftAlignElement: this.leftAlignElement,
       messages: {
         nothingFound: this.i18nLabels.nothingFound,
         search: this.i18nLabels.filter,
@@ -630,6 +641,9 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
 
     this.currentBlockForSearch = currentBlock.holder;
     this.currentContentEditable = this.currentBlockForSearch.querySelector('[contenteditable="true"]');
+    if (this.currentContentEditable instanceof HTMLElement) {
+      this.currentContentEditable.setAttribute(DATA_ATTR.slashSearch, this.i18nLabels.slashSearchPlaceholder);
+    }
     this.listeners.on(this.currentBlockForSearch, 'input', this.handleBlockInput);
   }
 
@@ -639,6 +653,9 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
   private stopListeningToBlockInput(): void {
     if (this.currentBlockForSearch !== null) {
       this.listeners.off(this.currentBlockForSearch, 'input', this.handleBlockInput);
+      if (this.currentContentEditable instanceof HTMLElement) {
+        this.currentContentEditable.removeAttribute(DATA_ATTR.slashSearch);
+      }
       this.currentBlockForSearch = null;
       this.currentContentEditable = null;
     }
@@ -666,6 +683,13 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
 
     const query = text.slice(slashIndex + 1);
 
+    if (this.currentContentEditable instanceof HTMLElement) {
+      this.currentContentEditable.setAttribute(
+        DATA_ATTR.slashSearch,
+        query.length === 0 ? this.i18nLabels.slashSearchPlaceholder : ''
+      );
+    }
+
     this.popover?.filterItems(query);
   };