@jackuait/blok 0.10.10 → 0.10.12

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

@@ -3,7 +3,7 @@
  * @classdesc Handles state-changing operations on blocks
  * @module BlockOperations
  */
-import type { BlockToolData, PasteEvent, SanitizerConfig , BlokConfig } from '../../../../types';
+import type { BlockToolData, PasteEvent, SanitizerConfig, BlokConfig, OutputBlockData } from '../../../../types';
 import type { BlockTuneData } from '../../../../types/block-tunes/block-tune-data';
 import type { BlockMutationType } from '../../../../types/events/block';
 import { BlockAddedMutationType } from '../../../../types/events/block/BlockAdded';
@@ -17,6 +17,7 @@ import type { BlokEventMap } from '../../events';
 import { isEmpty, isObject, isString, log, generateBlockId } from '../../utils';
 import { announce } from '../../utils/announcer';
 import { convertStringToBlockData, isBlockConvertable } from '../../utils/blocks';
+import { validateHierarchy } from '../../utils/hierarchy-invariant';
 import type { EventsDispatcher } from '../../utils/events';
 import { sanitizeBlocks, clean, composeSanitizerConfig } from '../../utils/sanitizer';
 import { isInsideTableCell, isRestrictedInTableCell } from '../../../tools/table/table-restrictions';
@@ -357,6 +358,8 @@ export class BlockOperations {
       this.dependencies.YjsManager?.stopCapturing();
     }
 
+    this.assertHierarchyInvariantInDev('insert');
+
     return block;
   }
 
@@ -491,6 +494,8 @@ export class BlockOperations {
         this.currentBlockIndexValue = 0;
       }
 
+      this.assertHierarchyInvariantInDev('removeBlock');
+
       resolve();
     });
   }
@@ -732,6 +737,8 @@ export class BlockOperations {
       this.reparentChildren(oldContentIds, newBlock.id);
     }
 
+    this.assertHierarchyInvariantInDev('replace');
+
     return newBlock;
   }
 
@@ -767,6 +774,23 @@ export class BlockOperations {
       return;
     }
 
+    /**
+     * Defense-in-depth: capture the destination's parentId BEFORE the flat
+     * reorder so we can auto-heal cross-container moves below.
+     *
+     * `move()` is only a flat-array reorder — it does NOT touch parentId or
+     * the source/destination container `contentIds`. Without an auto-heal,
+     * any caller that drags or keyboard-shuffles a block past a container
+     * boundary leaves `parentId` stale: the block lands visually inside the
+     * new container but still claims the old one. That's the exact drift
+     * the cross-parent merge guard already blocks at the merge layer; we
+     * mirror the defense here so the same bug family can never re-enter
+     * via the move pipeline. DragController already calls setBlockParent
+     * after move(); the auto-heal below makes that a no-op (idempotent),
+     * and rescues every other caller (keyboard moveUp/Down, public api).
+     */
+    const destinationParentId = neighborBlock !== undefined ? neighborBlock.parentId : null;
+
     // Suppress stopCapturing to keep DOM + Yjs move as single undo entry
     this.suppressStopCapturing = true;
     try {
@@ -790,6 +814,19 @@ export class BlockOperations {
         throw new Error(`Could not move Block. Block at index ${toIndex} is not available.`);
       }
 
+      /**
+       * Cross-container auto-heal — see the comment above destinationParentId.
+       *
+       * Routes through `setBlockParent`, which is the canonical chokepoint
+       * that updates BOTH the moved block's `parentId` AND the source/dest
+       * container `contentIds` arrays. Idempotent when the parent already
+       * matches, so DragController's existing post-move setBlockParent call
+       * remains a safe no-op.
+       */
+      if (movedBlock.parentId !== destinationParentId) {
+        this.hierarchy.setBlockParent(movedBlock, destinationParentId);
+      }
+
       /**
        * Force call of didMutated event on Block movement
        */
@@ -800,6 +837,8 @@ export class BlockOperations {
 
       // Sync to Yjs using the actual resolved index
       this.dependencies.YjsManager.moveBlock(movedBlock.id, resolvedIndex);
+
+      this.assertHierarchyInvariantInDev('move');
     } finally {
       this.suppressStopCapturing = false;
     }
@@ -841,6 +880,27 @@ export class BlockOperations {
       return;
     }
 
+    /**
+     * Defense-in-depth: refuse to merge across container boundaries.
+     *
+     * Every block belongs to a logical container identified by `parentId`
+     * (null = root, or the id of a table/toggle/callout/header/database-row
+     * block). Merging across containers silently mangles the hierarchy —
+     * the source block's data is appended to a target in a DIFFERENT
+     * container, and the source is then deleted, losing content and
+     * breaking the invariant that a block lives under exactly one parent.
+     *
+     * keyboardNavigation already guards Backspace/Delete at cell/toggle
+     * boundaries, but a missed guard (or a future composer that forgets
+     * the check) must fail safe at this layer instead of corrupting data.
+     * This is the root-cause fix for the "Enter-then-Backspace-inside-a-
+     * table-cell" bug family — any similar bug in any nested-container
+     * tool is prevented here.
+     */
+    if (targetBlock.parentId !== blockToMerge.parentId) {
+      return;
+    }
+
     /**
      * Complete the merge operation with the prepared data
      * Syncs to Yjs atomically, then updates DOM without re-syncing
@@ -1070,6 +1130,8 @@ export class BlockOperations {
         this.hierarchy.setBlockParent(newBlock, currentBlock.parentId);
       }
 
+      this.assertHierarchyInvariantInDev('splitBlockWithData');
+
       return newBlock;
     });
   }
@@ -1090,7 +1152,7 @@ export class BlockOperations {
    * @param blocksStore - The blocks store to modify
    * @returns the newly created child block
    */
-  public insertInsideParent(parentId: string, insertIndex: number, blocksStore: BlocksStore): Block {
+  public insertInsideParent(parentId: string, insertIndex: number, blocksStore: BlocksStore, childData?: BlockToolData): Block {
     const parentBlock = this.repository.getBlockById(parentId);
 
     if (parentBlock === undefined) {
@@ -1098,14 +1160,16 @@ export class BlockOperations {
     }
 
     const newBlockId = generateBlockId();
+    const defaultBlockTool = this.dependencies.config.defaultBlock ?? 'paragraph';
+    const resolvedChildData = childData ?? { text: '' };
 
     return this.yjsSync.withAtomicOperation(() => {
       // Atomic Yjs transaction: add new block with parent (single undo entry)
       this.dependencies.YjsManager.transact(() => {
         this.dependencies.YjsManager.addBlock({
           id: newBlockId,
-          type: this.dependencies.config.defaultBlock ?? 'paragraph',
-          data: { text: '' },
+          type: defaultBlockTool,
+          data: resolvedChildData,
           parent: parentId,
         }, insertIndex);
       });
@@ -1113,8 +1177,8 @@ export class BlockOperations {
       // Insert DOM block (skip Yjs sync — already done above)
       const newBlock = this.insert({
         id: newBlockId,
-        tool: this.dependencies.config.defaultBlock ?? 'paragraph',
-        data: { text: '' },
+        tool: defaultBlockTool,
+        data: resolvedChildData,
         index: insertIndex,
         needToFocus: false,
         skipYjsSync: true,
@@ -1130,6 +1194,8 @@ export class BlockOperations {
       // otherwise create a second Yjs undo entry for the toggle data update, splitting undo).
       this.hierarchy.setBlockParent(newBlock, parentId);
 
+      this.assertHierarchyInvariantInDev('insertInsideParent');
+
       return newBlock;
     }, { extendThroughRAF: true });
   }
@@ -1190,7 +1256,50 @@ export class BlockOperations {
       ? Object.assign(baseBlockData, blockDataOverrides)
       : baseBlockData;
 
-    return this.replace(blockToConvert, replacingTool.name, newBlockData, blocksStore);
+    /**
+     * Bracket the whole convert in a single undo group.
+     *
+     * Two things can split a convert across multiple Cmd+Z entries if left
+     * unchecked:
+     *
+     * 1. Container tools (callout) seed a first child paragraph inside their
+     *    `rendered()` hook via `api.blocks.insertInsideParent`, which normally
+     *    forces a new undo boundary via `stopCapturing()`.
+     *
+     * 2. ANY tool can accept `{text}` on conversion but then populate extra
+     *    fields (e.g. toggle's `isOpen: true`) during its first `save()` pass.
+     *    That first save is triggered by the MutationObserver watching the
+     *    brand-new block's DOM, and its `syncBlockDataToYjs` would write the
+     *    extra fields as a *separate* Yjs transaction — creating a phantom
+     *    post-convert undo entry so Cmd+Z needs two presses.
+     *
+     * We solve (1) with `suppressStopCapturing` (no new undo boundary) and
+     * (2) with `yjsSync.withAtomicOperation({ extendThroughRAF: true })` which
+     * keeps `isSyncingFromYjs = true` through the next animation frame, so
+     * mutation-triggered `syncBlockDataToYjs` calls are suppressed for
+     * rendered()/first-save writes. The tool's real data persists because
+     * `replace()` already wrote it into Yjs via its own transaction.
+     */
+    this.dependencies.YjsManager.stopCapturing();
+    const prevSuppress = this.suppressStopCapturing;
+
+    this.suppressStopCapturing = true;
+
+    try {
+      return this.yjsSync.withAtomicOperation(
+        () => this.replace(blockToConvert, replacingTool.name, newBlockData, blocksStore),
+        { extendThroughRAF: true }
+      );
+    } finally {
+      // Close the undo group after the sync `replace()` and any synchronous
+      // `rendered()` → `insertInsideParent` have landed, but wait one microtask
+      // so DOM MutationObserver-triggered Yjs writes settle inside the same
+      // entry.
+      queueMicrotask(() => {
+        this.suppressStopCapturing = prevSuppress;
+        this.dependencies.YjsManager.stopCapturing();
+      });
+    }
   }
 
   /**
@@ -1232,6 +1341,16 @@ export class BlockOperations {
     // Insert block without syncing to Yjs yet.
     // Wrap in atomic operation so that child blocks created during rendered()
     // (e.g., table cell paragraph blocks) also skip Yjs sync.
+    //
+    // `extendThroughRAF: true` keeps `isSyncingFromYjs` elevated past the end
+    // of this sync closure and through the next animation frame. Without it,
+    // the cleanup runs immediately on return and the subsequent
+    // `await block.ready` → `onPaste` → `addBlock` microtask chain would see
+    // `isSyncingFromYjs === false`. Any MutationObserver-triggered first
+    // `save()` on the freshly rendered block would then land as a separate
+    // Yjs transaction *before* the authoritative `YjsManager.addBlock()` call
+    // below, producing a phantom post-paste undo entry. Mirrors the guard in
+    // `convert()` for the same bug class.
     const block = this.yjsSync.withAtomicOperation(() => {
       return this.insert({
         tool: toolName,
@@ -1239,7 +1358,7 @@ export class BlockOperations {
         needToFocus: false,
         skipYjsSync: true,
       }, blocksStore);
-    });
+    }, { extendThroughRAF: true });
 
     // Update currentBlockIndex AFTER insert (and handleBlockMutation) completes.
     this.currentBlockIndex = this.repository.getBlockIndex(block);
@@ -1251,10 +1370,19 @@ export class BlockOperations {
 
     // Call onPaste within atomic operation so child blocks created
     // during cell initialization also skip Yjs sync.
+    //
+    // `extendThroughRAF: true` is critical for tools whose `onPaste()`
+    // performs async DOM mutation — e.g. database card drawer dynamic
+    // `import('../../blok')`, code tool shiki/mermaid/katex imports.
+    // Without it, the atomic-op cleanup fires synchronously on return
+    // and the async work lands after `isSyncingFromYjs` flips back to
+    // false, letting MutationObserver-triggered `syncBlockDataToYjs`
+    // calls on the fresh block become a separate Yjs transaction — the
+    // same phantom-undo bug class as the insert-time wrap above.
     this.yjsSync.withAtomicOperation(() => {
       block.call(BlockToolAPI.ON_PASTE, pasteEvent as unknown as Record<string, unknown>);
       block.refreshToolRootElement();
-    });
+    }, { extendThroughRAF: true });
 
     // Wire the new block into the predecessor's parent BEFORE the Yjs addBlock
     // call below so Yjs sees the final parentId in one shot. For replace we
@@ -1358,4 +1486,56 @@ export class BlockOperations {
       this.dependencies.Caret.setToBlock(block, this.dependencies.Caret.positions.END);
     }
   }
+
+  /**
+   * Dev/test invariant gate.
+   *
+   * Validates the parent/contentIds bidirectional invariant against the live
+   * repository. Gated behind NODE_ENV so prod stays free, but every test run
+   * and dev session asserts it after every BlockOperations mutation. Catches
+   * any future regression that would corrupt the hierarchy at the point of
+   * introduction instead of one save cycle later — closing the last gap in
+   * the "callout/table/toggle ejection" bug family by instrumenting the
+   * mutation pipeline itself.
+   *
+   * The save-time gate (saver) and the setBlockParent dangling-id guard are
+   * defenses at the boundaries; this is the defense at the core.
+   *
+   * Filters out the saver-repairable violation kinds (`child-parent-missing`,
+   * `content-id-dangling`) because complex multi-step ops legitimately pass
+   * through transient orphan states between sub-operations. The gate fires
+   * only on the irreversible drift kinds: bidirectional divergence
+   * (`child-not-in-parent-content`, `content-parent-mismatch`) and duplicate
+   * content ids (`content-duplicate`) — the patterns the callout/table/toggle
+   * ejection bug family exhibits.
+   */
+  private assertHierarchyInvariantInDev(context: string): void {
+    const env = typeof process !== 'undefined' ? process.env?.NODE_ENV : undefined;
+
+    if (env !== 'test' && env !== 'development') {
+      return;
+    }
+
+    const blocks: OutputBlockData[] = this.repository.blocks.map(b => ({
+      id: b.id,
+      type: b.name,
+      data: {},
+      ...(b.parentId !== null && b.parentId !== undefined ? { parent: b.parentId } : {}),
+      ...(Array.isArray(b.contentIds) && b.contentIds.length > 0 ? { content: [...b.contentIds] } : {}),
+    } as OutputBlockData));
+
+    const violations = validateHierarchy(blocks).filter(v =>
+      v.kind === 'child-not-in-parent-content' ||
+      v.kind === 'content-parent-mismatch' ||
+      v.kind === 'content-duplicate'
+    );
+
+    if (violations.length === 0) {
+      return;
+    }
+
+    const summary = violations.map(v => `  - ${v.message}`).join('\n');
+
+    throw new Error(`Hierarchy invariant violated at BlockOperations.${context}:\n${summary}`);
+  }
 }

package/src/components/modules/caret.ts

@@ -802,6 +802,47 @@ export class Caret extends Module {
       return true;
     }
 
+    /**
+     * If both blocks share the same DOM container (e.g., same table cell),
+     * navigate directly to the previous block instead of exiting the container.
+     * Symmetric to navigateVerticalNext — without this guard, ArrowUp from the
+     * first child of a callout/toggle/table cell would silently escape the
+     * container even though a sibling block sits right above it in the same
+     * DOM container.
+     */
+    if (previousBlock !== null && currentBlock.parentId !== null &&
+        currentBlock.holder.parentElement !== null &&
+        currentBlock.holder.parentElement === previousBlock.holder.parentElement) {
+      this.setToBlockAtXPosition(previousBlock, caretX, false);
+
+      return true;
+    }
+
+    /**
+     * If current block is inside a container, the "previous block" in the flat
+     * array may belong to a DIFFERENT cell of the SAME parent (e.g., a sibling
+     * cell of the same table). Navigating to it would jump across cells, which
+     * Notion-style navigation should treat as exiting the container UP.
+     */
+    const shouldExitParent = currentBlock.parentId !== null && (
+      previousBlock === null ||
+      previousBlock.parentId === currentBlock.parentId ||
+      previousBlock.id === currentBlock.parentId
+    );
+
+    if (shouldExitParent && currentBlock.parentId !== null) {
+      const blockBeforeContainer = this.findFirstBlockBeforeParent(currentBlock.parentId);
+
+      if (blockBeforeContainer !== null) {
+        this.setToBlockAtXPosition(blockBeforeContainer, caretX, false);
+
+        return true;
+      }
+
+      // No block before container — we're at the top of the document.
+      return false;
+    }
+
     /**
      * Navigate to previous block, preserving horizontal position
      */
@@ -814,6 +855,22 @@ export class Caret extends Module {
     return false;
   }
 
+  /**
+   * Find the first block before a parent block (e.g., a table) — the block
+   * sitting immediately above the parent in the flat block array.
+   */
+  private findFirstBlockBeforeParent(parentBlockId: string): Block | null {
+    const { BlockManager } = this.Blok;
+    const blocks = BlockManager.blocks;
+    const parentIndex = blocks.findIndex(b => b.id === parentBlockId);
+
+    if (parentIndex <= 0) {
+      return null;
+    }
+
+    return blocks[parentIndex - 1];
+  }
+
   /**
    * Find the first block after a parent block (e.g., a table) by scanning the flat
    * block array and skipping blocks whose parentId matches.

package/src/components/modules/drag/operations/DragOperations.ts

@@ -239,12 +239,19 @@ export class DragOperations {
       return { duplicatedBlocks: [], targetIndex: prep.baseInsertIndex };
     }
 
-    // Insert duplicated blocks
+    // Insert duplicated blocks.
+    //
+    // Deep-clone `saved.data` and `saved.tunes` so the duplicate does not share
+    // nested structures with the source. Tools like `table` return arrays from
+    // their internal state straight out of `save()`, so a shallow pass would
+    // leave the duplicate and the original mutating each other's `content`
+    // until the next save cycle — a silent data-corruption class of bug in the
+    // same family as the nested-container ejection regressions.
     const duplicatedBlocks = prep.validResults.map(({ saved, toolName }, index) =>
       this.blockManager.insert({
         tool: toolName,
-        data: saved.data,
-        tunes: saved.tunes,
+        data: structuredClone(saved.data),
+        tunes: structuredClone(saved.tunes),
         index: prep.baseInsertIndex + index,
         needToFocus: false,
       })

package/src/components/utils/data-model-transform.ts

@@ -380,6 +380,29 @@ const expandListToHierarchical = (
  * @param bodyBlocks - legacy body blocks to expand
  * @param parentId - id of the parent block (toggle/callout) that owns them
  */
+/**
+ * Route one emitted block into the accumulator. Root-level blocks (no parent)
+ * become direct children of the legacy container; descendants keep their
+ * existing parent refs assigned during recursive expansion.
+ */
+const appendEmittedBlock = (
+  emitted: OutputBlockData,
+  parentId: BlockId,
+  childIds: BlockId[],
+  childBlocks: OutputBlockData[]
+): void => {
+  if (emitted.parent !== undefined) {
+    childBlocks.push(emitted);
+
+    return;
+  }
+
+  const childId = emitted.id ?? generateBlockId();
+
+  childIds.push(childId);
+  childBlocks.push({ ...emitted, id: childId, parent: parentId });
+};
+
 const expandLegacyBodyBlocks = (
   bodyBlocks: OutputBlockData[],
   parentId: BlockId
@@ -390,18 +413,29 @@ const expandLegacyBodyBlocks = (
   for (const childBlock of bodyBlocks) {
     const expanded = expandToHierarchical([childBlock]);
 
-    if (expanded.length === 0) {
-      continue;
+    // A single legacy block may expand into N root-level siblings (e.g. a list
+    // with N items). Every parent-less root becomes a direct child here so
+    // multi-item lists inside callout/toggle bodies aren't orphaned.
+    for (const emitted of expanded) {
+      appendEmittedBlock(emitted, parentId, childIds, childBlocks);
     }
+  }
 
-    // The first emitted block corresponds to the original input block.
-    // Re-parent it to the legacy container; descendants already carry the
-    // correct parent refs assigned during their own recursive expansion.
-    const [first, ...rest] = expanded;
-    const childId = first.id ?? generateBlockId();
-
-    childIds.push(childId);
-    childBlocks.push({ ...first, id: childId, parent: parentId }, ...rest);
+  // Invariant: every emitted block must either carry a parent ref (descendant
+  // assigned during its own recursive expansion) or appear in childIds (root
+  // we just re-parented). If this ever trips, some expansion path is leaking
+  // orphans — exactly the regression this assertion exists to catch.
+  for (const block of childBlocks) {
+    const hasParent = block.parent !== undefined;
+    const hasId = block.id !== undefined;
+    const isDirectChild = hasId && childIds.includes(block.id as BlockId);
+
+    if (!hasParent && !isDirectChild) {
+      throw new Error(
+        `expandLegacyBodyBlocks: orphaned block emitted (type=${block.type}, id=${block.id ?? '<none>'}). ` +
+        `Every root-level expansion must be re-parented to ${parentId}.`
+      );
+    }
   }
 
   return { childIds, childBlocks };
@@ -646,6 +680,52 @@ const processRootListItem = (
   return listBlock;
 };
 
+/**
+ * Recursively collapse a container's body: routes each direct child through the
+ * appropriate processRoot* helper based on its type so that grandchildren land in
+ * the correct nested legacy shape instead of being ejected to the document root.
+ */
+function collapseBodyBlocks(
+  contentIds: BlockId[],
+  blockMap: Map<BlockId, OutputBlockData>,
+  processedIds: Set<BlockId>
+): OutputBlockData[] {
+  const result: OutputBlockData[] = [];
+
+  for (const childId of contentIds) {
+    if (processedIds.has(childId)) {
+      continue;
+    }
+    const childBlock = blockMap.get(childId);
+
+    if (childBlock === undefined) {
+      continue;
+    }
+
+    if (isFlatModelListBlock(childBlock)) {
+      result.push(processRootListItem(childBlock, blockMap, processedIds));
+      continue;
+    }
+    if (isFlatModelToggleBlock(childBlock)) {
+      result.push(processRootToggleItem(childBlock, blockMap, processedIds));
+      continue;
+    }
+    if (isToggleableHeaderBlock(childBlock)) {
+      result.push(processRootToggleableHeader(childBlock, blockMap, processedIds));
+      continue;
+    }
+    if (isFlatModelCalloutBlock(childBlock)) {
+      result.push(processRootCalloutItem(childBlock, blockMap, processedIds));
+      continue;
+    }
+
+    markBlockAsProcessed(childBlock.id, processedIds);
+    result.push(stripHierarchyFields(childBlock));
+  }
+
+  return result;
+}
+
 /**
  * Process a root toggle block and convert to a legacy toggleList block
  */
@@ -662,18 +742,8 @@ const processRootToggleItem = (
     ? (data as Record<string, unknown>).isOpen as boolean
     : undefined;
 
-  // Collect child blocks
-  const childBlocks: OutputBlockData[] = [];
   const contentIds = block.content ?? [];
-
-  for (const childId of contentIds) {
-    const childBlock = blockMap.get(childId);
-
-    if (childBlock) {
-      markBlockAsProcessed(childId, processedIds);
-      childBlocks.push(stripHierarchyFields(childBlock));
-    }
-  }
+  const childBlocks = collapseBodyBlocks(contentIds, blockMap, processedIds);
 
   const legacyBlock: OutputBlockData = {
     id: block.id,
@@ -732,17 +802,8 @@ const processRootToggleableHeader = (
     ? (data as Record<string, unknown>).isOpen as boolean
     : undefined;
 
-  const childBlocks: OutputBlockData[] = [];
   const contentIds = block.content ?? [];
-
-  for (const childId of contentIds) {
-    const childBlock = blockMap.get(childId);
-
-    if (childBlock) {
-      markBlockAsProcessed(childId, processedIds);
-      childBlocks.push(stripHierarchyFields(childBlock));
-    }
-  }
+  const childBlocks = collapseBodyBlocks(contentIds, blockMap, processedIds);
 
   const legacyBlock: OutputBlockData = {
     id: block.id,
@@ -810,18 +871,8 @@ const processRootCalloutItem = (
   const isEmojiVisible = typeof emojiValue === 'string' && emojiValue.length > 0;
   const emoji = isEmojiVisible ? emojiValue : null;
 
-  // Collect child blocks
-  const childBlocks: OutputBlockData[] = [];
   const contentIds = block.content ?? [];
-
-  for (const childId of contentIds) {
-    const childBlock = blockMap.get(childId);
-
-    if (childBlock) {
-      markBlockAsProcessed(childId, processedIds);
-      childBlocks.push(stripHierarchyFields(childBlock));
-    }
-  }
+  const childBlocks = collapseBodyBlocks(contentIds, blockMap, processedIds);
 
   const legacyBlock: OutputBlockData = {
     id: block.id,

package/src/styles/main.css

@@ -1458,6 +1458,11 @@
   @apply bg-search-input-bg rounded-[10px] transition-colors duration-150 w-fit max-w-[240px] px-2;
 }
 
+[data-blok-table-cell] [data-blok-slash-search],
+[data-blok-table-cell] [data-blok-slash-search]:focus-visible {
+  @apply rounded-[6px];
+}
+
 [data-blok-slash-search]::after {
   content: attr(data-blok-slash-search);
   @apply text-gray-text font-medium text-base pointer-events-none;