@jackuait/blok 0.6.0-beta.4 → 0.6.0-beta.6

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

@@ -324,6 +324,8 @@ export class PopoverItemDefault extends PopoverItem {
 
     return twMerge(
       css.item,
+      // Asymmetric padding for vertical popovers (better visual balance)
+      !isInline && !isNestedInline && 'pl-2 pr-8',
       isInline && cssInline.item,
       isNestedInline && cssNestedInline.item,
       this.params.isDisabled && css.itemDisabled
@@ -338,7 +340,7 @@ export class PopoverItemDefault extends PopoverItem {
       css.icon,
       isInline && 'w-auto h-auto [&_svg]:w-icon [&_svg]:h-icon mobile:[&_svg]:w-icon-mobile mobile:[&_svg]:h-icon-mobile',
       isNestedInline && 'w-toolbox-btn h-toolbox-btn',
-      iconWithGap && 'mr-2',
+      iconWithGap && 'mr-3',
       iconWithGap && isInline && 'shadow-none bg-transparent !mr-0',
       iconWithGap && isNestedInline && '!mr-2',
       isWobbling && 'animate-wobble'

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

@@ -217,31 +217,50 @@ export class PopoverDesktop extends PopoverAbstract {
     this.flipper?.focusItem(0, { skipNextTab: true });
   }
 
+  /**
+   * Updates the popover position dynamically.
+   * Used when the trigger position changes or when positioning at caret location.
+   * @param position - new DOMRect position for the popover
+   */
+  public updatePosition(position: DOMRect): void {
+    this.params.position = position;
+
+    // Recalculate and apply position if already shown
+    if (this.nodes.popover.hasAttribute('data-blok-popover-opened')) {
+      const { top, left } = this.calculatePosition();
+
+      this.nodes.popover.style.top = `${top}px`;
+      this.nodes.popover.style.left = `${left}px`;
+    }
+  }
+
   /**
    * Calculates position for the popover
    */
   private calculatePosition(): { top: number; left: number } {
-    if (!this.trigger) {
+    // Use provided position if available, otherwise fall back to trigger element
+    const rect = this.params.position ?? this.trigger?.getBoundingClientRect();
+
+    if (!rect) {
       return {
         top: 0,
         left: 0,
       };
     }
 
-    const triggerRect = this.trigger.getBoundingClientRect();
     const popoverRect = this.size;
     const windowWidth = window.innerWidth;
     const windowHeight = window.innerHeight;
     const offset = 8;
 
-    const initialTop = triggerRect.bottom + offset + window.scrollY;
-    const shouldFlipTop = (triggerRect.bottom + offset + popoverRect.height > windowHeight + window.scrollY) &&
-      (triggerRect.top - offset - popoverRect.height > window.scrollY);
-    const top = shouldFlipTop ? triggerRect.top - offset - popoverRect.height + window.scrollY : initialTop;
+    const initialTop = rect.bottom + offset + window.scrollY;
+    const shouldFlipTop = (rect.bottom + offset + popoverRect.height > windowHeight + window.scrollY) &&
+      (rect.top - offset - popoverRect.height > window.scrollY);
+    const top = shouldFlipTop ? rect.top - offset - popoverRect.height + window.scrollY : initialTop;
 
-    const initialLeft = triggerRect.left + window.scrollX;
+    const initialLeft = rect.left + window.scrollX;
     const shouldFlipLeft = initialLeft + popoverRect.width > windowWidth + window.scrollX;
-    const left = shouldFlipLeft ? Math.max(0, triggerRect.right - popoverRect.width + window.scrollX) : initialLeft;
+    const left = shouldFlipLeft ? Math.max(0, rect.right - popoverRect.width + window.scrollX) : initialLeft;
 
     return {
       top,

package/src/tools/table/index.ts

@@ -18,7 +18,7 @@ import { TableGrid } from './table-core';
 import {
   applyPixelWidths,
   computeHalfAvgWidth,
-  computeInsertColumnWidths,
+  computeInitialColWidth,
   deleteColumnWithBlockCleanup,
   deleteRowWithBlockCleanup,
   enableScrollOverflow,
@@ -30,14 +30,14 @@ import {
   normalizeTableData,
   populateNewCells,
   readPixelWidths,
-  redistributePercentWidths,
   SCROLL_OVERFLOW_CLASSES,
   setupKeyboardNavigation,
-  syncColWidthsAfterMove,
   updateHeadingColumnStyles,
   updateHeadingStyles,
 } from './table-operations';
 import { TableResize } from './table-resize';
+import { executeRowColAction } from './table-row-col-action-handler';
+import type { PendingHighlight } from './table-row-col-action-handler';
 import { TableRowColControls } from './table-row-col-controls';
 import type { RowColAction } from './table-row-col-controls';
 import type { TableData, TableConfig } from './types';
@@ -71,7 +71,8 @@ export class Table implements BlockTool {
   private cellSelection: TableCellSelection | null = null;
   private element: HTMLDivElement | null = null;
   private blockId: string | undefined;
-  private pendingHighlight: { type: 'row' | 'col'; index: number } | null = null;
+  private pendingHighlight: PendingHighlight | null = null;
+  private isNewTable = false;
 
   constructor({ data, config, api, readOnly, block }: BlockToolConstructorOptions<TableData, TableConfig>) {
     this.api = api;
@@ -127,6 +128,8 @@ export class Table implements BlockTool {
       wrapper.setAttribute('data-blok-table-readonly', '');
     }
 
+    this.isNewTable = this.data.content.length === 0;
+
     const rows = this.data.content.length || this.config.rows || DEFAULT_ROWS;
     const cols = this.data.content[0]?.length || this.config.cols || DEFAULT_COLS;
 
@@ -178,10 +181,28 @@ export class Table implements BlockTool {
 
     this.data.content = this.cellBlocks?.initializeCells(this.data.content) ?? this.data.content;
 
+    if (this.isNewTable) {
+      populateNewCells(gridEl, this.cellBlocks);
+    }
+
+    if (this.data.initialColWidth === undefined) {
+      const widths = this.data.colWidths ?? readPixelWidths(gridEl);
+
+      this.data.initialColWidth = widths.length > 0
+        ? computeInitialColWidth(widths)
+        : undefined;
+    }
+
     this.initResize(gridEl);
     this.initAddControls(gridEl);
     this.initRowColControls(gridEl);
     this.initCellSelection(gridEl);
+
+    if (this.isNewTable) {
+      const firstEditable = gridEl.querySelector<HTMLElement>('[contenteditable="true"]');
+
+      firstEditable?.focus();
+    }
   }
 
   public save(blockContent: HTMLElement): TableData {
@@ -197,6 +218,7 @@ export class Table implements BlockTool {
       stretched: this.data.stretched,
       content,
       ...(colWidths ? { colWidths } : {}),
+      ...(this.data.initialColWidth !== undefined ? { initialColWidth: this.data.initialColWidth } : {}),
     };
   }
 
@@ -252,6 +274,8 @@ export class Table implements BlockTool {
   }
 
   public destroy(): void {
+    this.cellBlocks?.deleteAllBlocks();
+
     this.resize?.destroy();
     this.resize = null;
     this.addControls?.destroy();
@@ -296,9 +320,19 @@ export class Table implements BlockTool {
       return;
     }
 
+    const dragState = { addedCols: 0 };
+
     this.addControls = new TableAddControls({
       wrapper: this.element,
       grid: gridEl,
+      i18n: this.api.i18n,
+      getNewColumnWidth: () => {
+        const colWidths = this.data.colWidths ?? readPixelWidths(gridEl);
+
+        return this.data.initialColWidth !== undefined
+          ? Math.round((this.data.initialColWidth / 2) * 100) / 100
+          : computeHalfAvgWidth(colWidths);
+      },
       onAddRow: () => {
         this.grid.addRow(gridEl);
         populateNewCells(gridEl, this.cellBlocks);
@@ -310,10 +344,12 @@ export class Table implements BlockTool {
       },
       onAddColumn: () => {
         const colWidths = this.data.colWidths ?? readPixelWidths(gridEl);
-        const halfAvgWidth = computeHalfAvgWidth(colWidths);
+        const halfWidth = this.data.initialColWidth !== undefined
+          ? Math.round((this.data.initialColWidth / 2) * 100) / 100
+          : computeHalfAvgWidth(colWidths);
 
-        this.grid.addColumn(gridEl, undefined, colWidths);
-        this.data.colWidths = [...colWidths, halfAvgWidth];
+        this.grid.addColumn(gridEl, undefined, colWidths, halfWidth);
+        this.data.colWidths = [...colWidths, halfWidth];
         populateNewCells(gridEl, this.cellBlocks);
         updateHeadingColumnStyles(this.element, this.data.withHeadingColumn);
         this.initResize(gridEl);
@@ -342,14 +378,22 @@ export class Table implements BlockTool {
       },
       onDragAddCol: () => {
         const colWidths = this.data.colWidths ?? readPixelWidths(gridEl);
-        const halfAvgWidth = computeHalfAvgWidth(colWidths);
+        const halfWidth = this.data.initialColWidth !== undefined
+          ? Math.round((this.data.initialColWidth / 2) * 100) / 100
+          : computeHalfAvgWidth(colWidths);
 
-        this.grid.addColumn(gridEl, undefined, colWidths);
-        this.data.colWidths = [...colWidths, halfAvgWidth];
+        this.grid.addColumn(gridEl, undefined, colWidths, halfWidth);
+        this.data.colWidths = [...colWidths, halfWidth];
         applyPixelWidths(gridEl, this.data.colWidths);
         populateNewCells(gridEl, this.cellBlocks);
         updateHeadingColumnStyles(this.element, this.data.withHeadingColumn);
         this.initResize(gridEl);
+
+        dragState.addedCols++;
+
+        if (this.element) {
+          this.element.scrollLeft = this.element.scrollWidth;
+        }
       },
       onDragRemoveCol: () => {
         const colCount = this.grid.getColumnCount(gridEl);
@@ -365,6 +409,8 @@ export class Table implements BlockTool {
         }
 
         this.initResize(gridEl);
+
+        dragState.addedCols--;
       },
       onDragEnd: () => {
         this.initResize(gridEl);
@@ -372,8 +418,10 @@ export class Table implements BlockTool {
         this.rowColControls?.refresh();
 
         if (this.element) {
-          this.element.scrollLeft = 0;
+          this.element.scrollLeft = dragState.addedCols > 0 ? this.element.scrollWidth : 0;
         }
+
+        dragState.addedCols = 0;
       },
     });
   }
@@ -391,6 +439,7 @@ export class Table implements BlockTool {
       getRowCount: () => this.grid.getRowCount(gridEl),
       isHeadingRow: () => this.data.withHeadings,
       isHeadingColumn: () => this.data.withHeadingColumn,
+      i18n: this.api.i18n,
       onAction: (action: RowColAction) => this.handleRowColAction(gridEl, action),
       onDragStateChange: (isDragging: boolean) => {
         if (this.resize) {
@@ -434,72 +483,37 @@ export class Table implements BlockTool {
   }
 
   private handleRowColAction(gridEl: HTMLElement, action: RowColAction): void {
-    switch (action.type) {
-      case 'insert-row-above':
-        this.grid.addRow(gridEl, action.index);
-        populateNewCells(gridEl, this.cellBlocks);
-        this.pendingHighlight = { type: 'row', index: action.index };
-        break;
-      case 'insert-row-below':
-        this.grid.addRow(gridEl, action.index + 1);
-        populateNewCells(gridEl, this.cellBlocks);
-        this.pendingHighlight = { type: 'row', index: action.index + 1 };
-        break;
-      case 'insert-col-left':
-        this.data.colWidths = computeInsertColumnWidths(gridEl, action.index, this.data, this.grid);
-        populateNewCells(gridEl, this.cellBlocks);
-        this.pendingHighlight = { type: 'col', index: action.index };
-        break;
-      case 'insert-col-right':
-        this.data.colWidths = computeInsertColumnWidths(gridEl, action.index + 1, this.data, this.grid);
-        populateNewCells(gridEl, this.cellBlocks);
-        this.pendingHighlight = { type: 'col', index: action.index + 1 };
-        break;
-      case 'move-row':
-        this.grid.moveRow(gridEl, action.fromIndex, action.toIndex);
-        break;
-      case 'move-col':
-        this.grid.moveColumn(gridEl, action.fromIndex, action.toIndex);
-        this.data.colWidths = syncColWidthsAfterMove(this.data.colWidths, action.fromIndex, action.toIndex);
-        break;
-      case 'delete-row': {
-        deleteRowWithBlockCleanup(gridEl, action.index, this.grid, this.cellBlocks);
-        const newRowCount = this.grid.getRowCount(gridEl);
-        const neighborRow = action.index < newRowCount ? action.index : action.index - 1;
-
-        this.pendingHighlight = { type: 'row', index: neighborRow };
-        break;
-      }
-      case 'delete-col': {
-        this.data.colWidths = deleteColumnWithBlockCleanup(gridEl, action.index, this.data.colWidths, this.grid, this.cellBlocks);
-
-        if (this.data.colWidths) {
-          applyPixelWidths(gridEl, this.data.colWidths);
-        } else {
-          redistributePercentWidths(gridEl);
-        }
+    const result = executeRowColAction(
+      gridEl,
+      action,
+      { grid: this.grid, data: this.data, cellBlocks: this.cellBlocks },
+    );
 
-        const newColCount = this.grid.getColumnCount(gridEl);
-        const neighborCol = action.index < newColCount ? action.index : action.index - 1;
-
-        this.pendingHighlight = { type: 'col', index: neighborCol };
-        break;
-      }
-      case 'toggle-heading':
-        this.data.withHeadings = !this.data.withHeadings;
-        this.pendingHighlight = { type: 'row', index: 0 };
-        break;
-      case 'toggle-heading-column':
-        this.data.withHeadingColumn = !this.data.withHeadingColumn;
-        this.pendingHighlight = { type: 'col', index: 0 };
-        break;
-    }
+    this.data.colWidths = result.colWidths;
+    this.data.withHeadings = result.withHeadings;
+    this.data.withHeadingColumn = result.withHeadingColumn;
+    this.pendingHighlight = result.pendingHighlight;
 
     updateHeadingStyles(this.element, this.data.withHeadings);
     updateHeadingColumnStyles(this.element, this.data.withHeadingColumn);
     this.initResize(gridEl);
     this.addControls?.syncRowButtonWidth();
     this.rowColControls?.refresh();
+
+    if (!result.moveSelection) {
+      return;
+    }
+
+    // After move operations, select the moved row/column to show where it landed
+    const { type: moveType, index: moveIndex } = result.moveSelection;
+
+    if (moveType === 'row') {
+      this.cellSelection?.selectRow(moveIndex);
+    } else {
+      this.cellSelection?.selectColumn(moveIndex);
+    }
+
+    this.rowColControls?.setActiveGrip(moveType, moveIndex);
   }
 
   private initResize(gridEl: HTMLElement): void {
@@ -547,6 +561,7 @@ export class Table implements BlockTool {
     this.cellSelection = new TableCellSelection({
       grid: gridEl,
       rectangleSelection, // Pass reference
+      i18n: this.api.i18n,
       onSelectionActiveChange: (hasSelection) => {
         if (this.resize) {
           this.resize.enabled = !hasSelection;
@@ -567,3 +582,5 @@ export class Table implements BlockTool {
     });
   }
 }
+
+export { isInsideTableCell, isRestrictedInTableCell, convertToParagraph } from './table-restrictions';

package/src/tools/table/table-add-controls.ts

@@ -1,3 +1,4 @@
+import type { I18n } from '../../../types/api';
 import { IconPlus } from '../../components/icons';
 import { createTooltipContent } from '../../components/modules/toolbar/tooltip';
 import { hide as hideTooltip, onHover } from '../../components/utils/tooltip';
@@ -46,6 +47,7 @@ interface DragState {
 interface TableAddControlsOptions {
   wrapper: HTMLElement;
   grid: HTMLElement;
+  i18n: I18n;
   onAddRow: () => void;
   onAddColumn: () => void;
   onDragStart: () => void;
@@ -54,6 +56,8 @@ interface TableAddControlsOptions {
   onDragAddCol: () => void;
   onDragRemoveCol: () => void;
   onDragEnd: () => void;
+  /** Returns the pixel width of a newly added column, used as the drag unit size. */
+  getNewColumnWidth?: () => number;
 }
 
 /**
@@ -64,6 +68,7 @@ interface TableAddControlsOptions {
 export class TableAddControls {
   private wrapper: HTMLElement;
   private grid: HTMLElement;
+  private i18n: I18n;
   private addRowBtn: HTMLElement;
   private addColBtn: HTMLElement;
   private rowHideTimeout: ReturnType<typeof setTimeout> | null = null;
@@ -86,10 +91,12 @@ export class TableAddControls {
   private boundPointerUp: (e: PointerEvent) => void;
   private boundRowPointerDown: (e: PointerEvent) => void;
   private boundColPointerDown: (e: PointerEvent) => void;
+  private getNewColumnWidth: (() => number) | undefined;
 
   constructor(options: TableAddControlsOptions) {
     this.wrapper = options.wrapper;
     this.grid = options.grid;
+    this.i18n = options.i18n;
 
     this.boundAddRowClick = options.onAddRow;
     this.boundAddColClick = options.onAddColumn;
@@ -99,6 +106,7 @@ export class TableAddControls {
     this.onDragAddCol = options.onDragAddCol;
     this.onDragRemoveCol = options.onDragRemoveCol;
     this.onDragEnd = options.onDragEnd;
+    this.getNewColumnWidth = options.getNewColumnWidth;
     this.boundMouseMove = this.handleMouseMove.bind(this);
     this.boundMouseLeave = this.handleMouseLeave.bind(this);
     this.boundPointerMove = this.handlePointerMove.bind(this);
@@ -151,10 +159,15 @@ export class TableAddControls {
    * Disables pointer events and hover effects during cell selection.
    */
   public setInteractive(interactive: boolean): void {
-    const pointerEvents = interactive ? '' : 'none';
+    if (!interactive) {
+      this.addRowBtn.style.pointerEvents = 'none';
+      this.addColBtn.style.pointerEvents = 'none';
 
-    this.addRowBtn.style.pointerEvents = pointerEvents;
-    this.addColBtn.style.pointerEvents = pointerEvents;
+      return;
+    }
+
+    this.addRowBtn.style.pointerEvents = this.rowVisible ? '' : 'none';
+    this.addColBtn.style.pointerEvents = this.colVisible ? '' : 'none';
   }
 
   public destroy(): void {
@@ -274,6 +287,10 @@ export class TableAddControls {
       return lastRow?.offsetHeight || 30;
     }
 
+    if (this.getNewColumnWidth) {
+      return this.getNewColumnWidth();
+    }
+
     const firstRow = this.grid.querySelector('[data-blok-table-row]');
 
     if (!firstRow) {
@@ -314,6 +331,7 @@ export class TableAddControls {
 
     if (!this.rowVisible) {
       this.addRowBtn.style.opacity = '1';
+      this.addRowBtn.style.pointerEvents = '';
       this.rowVisible = true;
     }
   }
@@ -323,6 +341,7 @@ export class TableAddControls {
 
     if (!this.colVisible) {
       this.addColBtn.style.opacity = '1';
+      this.addColBtn.style.pointerEvents = '';
       this.colVisible = true;
     }
   }
@@ -334,6 +353,7 @@ export class TableAddControls {
 
     this.rowHideTimeout = setTimeout(() => {
       this.addRowBtn.style.opacity = '0';
+      this.addRowBtn.style.pointerEvents = 'none';
       this.rowVisible = false;
       this.rowHideTimeout = null;
     }, HIDE_DELAY_MS);
@@ -346,6 +366,7 @@ export class TableAddControls {
 
     this.colHideTimeout = setTimeout(() => {
       this.addColBtn.style.opacity = '0';
+      this.addColBtn.style.pointerEvents = 'none';
       this.colVisible = false;
       this.colHideTimeout = null;
     }, HIDE_DELAY_MS);
@@ -372,6 +393,10 @@ export class TableAddControls {
     btn.setAttribute(ADD_ROW_ATTR, '');
     btn.setAttribute('contenteditable', 'false');
     btn.style.opacity = '0';
+    btn.style.pointerEvents = 'none';
+    btn.style.position = 'absolute';
+    btn.style.left = '0';
+    btn.style.bottom = '-36px';
     btn.style.boxSizing = 'content-box';
     btn.style.width = '100%';
     btn.style.height = '32px';
@@ -388,8 +413,8 @@ export class TableAddControls {
     btn.appendChild(visual);
 
     onHover(btn, createTooltipContent([
-      'Click to add a new row',
-      'Drag to add or remove rows',
+      this.i18n.t('tools.table.clickToAddRow'),
+      this.i18n.t('tools.table.dragToAddRemoveRows'),
     ]), { placement: 'bottom', marginTop: -16 });
 
     return btn;
@@ -402,6 +427,7 @@ export class TableAddControls {
     btn.setAttribute(ADD_COL_ATTR, '');
     btn.setAttribute('contenteditable', 'false');
     btn.style.opacity = '0';
+    btn.style.pointerEvents = 'none';
     btn.style.position = 'absolute';
     btn.style.right = '-36px';
     btn.style.top = '0px';
@@ -418,8 +444,8 @@ export class TableAddControls {
     btn.appendChild(visual);
 
     onHover(btn, createTooltipContent([
-      'Click to add a new column',
-      'Drag to add or remove columns',
+      this.i18n.t('tools.table.clickToAddColumn'),
+      this.i18n.t('tools.table.dragToAddRemoveColumns'),
     ]), { placement: 'bottom' });
 
     return btn;

package/src/tools/table/table-cell-blocks.ts

@@ -71,6 +71,7 @@ export class TableCellBlocks {
     this.onNavigateToCell = options.onNavigateToCell;
 
     this.api.events.on('block changed', this.handleBlockMutation);
+    this.gridElement.addEventListener('click', this.handleCellBlankSpaceClick);
   }
 
   /**
@@ -228,6 +229,7 @@ export class TableCellBlocks {
    * Initialize all cells with blocks.
    * - Empty cells or legacy string cells get a new paragraph block.
    * - Cells that already have block references get those blocks mounted.
+   * - If referenced blocks are missing from BlockManager, a fallback paragraph is created.
    */
   public initializeCells(content: LegacyCellContent[][]): CellContent[][] {
     const rowElements = this.gridElement.querySelectorAll(`[${ROW_ATTR}]`);
@@ -256,9 +258,12 @@ export class TableCellBlocks {
           return;
         }
 
-        if (isCellWithBlocks(cellContent)) {
-          this.mountBlocksInCell(container, cellContent.blocks);
-          normalizedRow.push(cellContent);
+        const mountedIds = isCellWithBlocks(cellContent)
+          ? this.mountBlocksInCell(container, cellContent.blocks)
+          : [];
+
+        if (mountedIds.length > 0) {
+          normalizedRow.push({ blocks: mountedIds });
         } else {
           const text = typeof cellContent === 'string' ? cellContent : '';
           const block = this.api.blocks.insert('paragraph', { text }, {}, this.api.blocks.getBlocksCount(), false);
@@ -290,9 +295,12 @@ export class TableCellBlocks {
   }
 
   /**
-   * Mount existing blocks into a cell container by their IDs
+   * Mount existing blocks into a cell container by their IDs.
+   * Returns the IDs of blocks that were successfully mounted.
    */
-  private mountBlocksInCell(container: HTMLElement, blockIds: string[]): void {
+  private mountBlocksInCell(container: HTMLElement, blockIds: string[]): string[] {
+    const mountedIds: string[] = [];
+
     for (const blockId of blockIds) {
       const index = this.api.blocks.getBlockIndex(blockId);
 
@@ -307,7 +315,10 @@ export class TableCellBlocks {
       }
 
       container.appendChild(block.holder);
+      mountedIds.push(blockId);
     }
+
+    return mountedIds;
   }
 
   /**
@@ -575,10 +586,71 @@ export class TableCellBlocks {
     });
   }
 
+  /**
+   * Delete all blocks managed by this table from the BlockManager.
+   * Called before the table block itself is removed to prevent orphaned cell blocks.
+   */
+  public deleteAllBlocks(): void {
+    const allCells = this.gridElement.querySelectorAll(`[${CELL_ATTR}]`);
+    const blockIds = this.getBlockIdsFromCells(allCells);
+
+    this.deleteBlocks(blockIds);
+  }
+
+  /**
+   * Handle clicks on blank cell space.
+   * When a click lands on the cell or blocks container (not on block content),
+   * set the caret to the end of the last block in that cell.
+   */
+  private handleCellBlankSpaceClick = (event: Event): void => {
+    const target = event.target as HTMLElement | null;
+
+    if (!target) {
+      return;
+    }
+
+    const isCell = target.hasAttribute(CELL_ATTR);
+    const isBlocksContainer = target.hasAttribute(CELL_BLOCKS_ATTR);
+
+    if (!isCell && !isBlocksContainer) {
+      return;
+    }
+
+    const cell = isCell ? target : target.closest<HTMLElement>(`[${CELL_ATTR}]`);
+
+    if (!cell) {
+      return;
+    }
+
+    const container = isCell
+      ? cell.querySelector<HTMLElement>(`[${CELL_BLOCKS_ATTR}]`)
+      : target;
+
+    if (!container) {
+      return;
+    }
+
+    const blockHolders = container.querySelectorAll('[data-blok-id]');
+    const lastHolder = blockHolders[blockHolders.length - 1];
+
+    if (!lastHolder) {
+      return;
+    }
+
+    const blockId = lastHolder.getAttribute('data-blok-id');
+
+    if (!blockId) {
+      return;
+    }
+
+    this.api.caret.setToBlock(blockId, 'end');
+  };
+
   /**
    * Clean up event listeners
    */
   destroy(): void {
+    this.gridElement.removeEventListener('click', this.handleCellBlankSpaceClick);
     this.api.events.off('block changed', this.handleBlockMutation);
     this._activeCellWithBlocks = null;
     this.cellsPendingCheck.clear();