@jackuait/blok 0.4.3-beta.1 → 0.4.3-beta.10

package/src/components/modules/dragManager.ts

@@ -35,6 +35,8 @@ const DRAG_CONFIG = {
   autoScrollSpeed: 10,
   /** Throttle delay for drop position announcements (ms) */
   announcementThrottleMs: 300,
+  /** Horizontal distance to the left of blocks where drop is still valid */
+  leftDropZone: 50,
 };
 
 /**
@@ -424,20 +426,10 @@ export class DragManager extends Module {
       return;
     }
 
-    // Find block holder
-    const blockHolder = elementUnderCursor.closest(createSelector(DATA_ATTR.element)) as HTMLElement | null;
+    // Find block holder - first try direct hit, then left drop zone fallback
+    const { block: targetBlock, holder: blockHolder } = this.findDropTargetBlock(elementUnderCursor, clientX, clientY);
 
-    if (!blockHolder) {
-      this.dragState.targetBlock = null;
-      this.dragState.targetEdge = null;
-
-      return;
-    }
-
-    // Find the block instance
-    const targetBlock = this.Blok.BlockManager.blocks.find(b => b.holder === blockHolder);
-
-    if (!targetBlock || targetBlock === this.dragState.sourceBlock) {
+    if (!blockHolder || !targetBlock || targetBlock === this.dragState.sourceBlock) {
       this.dragState.targetBlock = null;
       this.dragState.targetEdge = null;
 
@@ -1132,6 +1124,72 @@ export class DragManager extends Module {
     return collectDescendants(blockIndex + 1, []);
   }
 
+  /**
+   * Finds the drop target block from an element or by checking the left drop zone.
+   * @param elementUnderCursor - Element directly under the cursor
+   * @param clientX - Cursor X position
+   * @param clientY - Cursor Y position
+   * @returns Object with block and holder, or nulls if no valid target found
+   */
+  private findDropTargetBlock(
+    elementUnderCursor: Element,
+    clientX: number,
+    clientY: number
+  ): { block: Block | undefined; holder: HTMLElement | null } {
+    // First try: find block holder directly under cursor
+    const directHolder = elementUnderCursor.closest(createSelector(DATA_ATTR.element)) as HTMLElement | null;
+
+    if (directHolder) {
+      const block = this.Blok.BlockManager.blocks.find(b => b.holder === directHolder);
+
+      return { block, holder: directHolder };
+    }
+
+    // Fallback: check if cursor is in the left drop zone
+    const leftZoneBlock = this.findBlockInLeftDropZone(clientX, clientY);
+
+    if (leftZoneBlock) {
+      return { block: leftZoneBlock, holder: leftZoneBlock.holder };
+    }
+
+    return { block: undefined, holder: null };
+  }
+
+  /**
+   * Finds a block by vertical position when cursor is in the left drop zone.
+   * Used as a fallback when elementFromPoint doesn't find a block directly.
+   * @param clientX - Cursor X position
+   * @param clientY - Cursor Y position
+   * @returns Block at the vertical position, or null if not in left zone or no block found
+   */
+  private findBlockInLeftDropZone(clientX: number, clientY: number): Block | null {
+    const contentRect = this.Blok.UI.contentRect;
+    const leftEdge = contentRect.left;
+
+    // Check if cursor is within left drop zone (between leftEdge - leftDropZone and leftEdge)
+    const distanceFromEdge = leftEdge - clientX;
+
+    if (distanceFromEdge < 0 || distanceFromEdge > DRAG_CONFIG.leftDropZone) {
+      return null;
+    }
+
+    // Find block by Y position
+    for (const block of this.Blok.BlockManager.blocks) {
+      // Skip source blocks
+      if (this.dragState?.sourceBlocks.includes(block)) {
+        continue;
+      }
+
+      const rect = block.holder.getBoundingClientRect();
+
+      if (clientY >= rect.top && clientY <= rect.bottom) {
+        return block;
+      }
+    }
+
+    return null;
+  }
+
   /**
    * Module destruction
    */

package/src/components/modules/i18n.ts

@@ -204,17 +204,7 @@ export class I18n extends Module {
     // Set default locale if configured
     this.applyDefaultLocale(i18nConfig?.defaultLocale);
 
-    // Handle custom messages (highest priority)
-    if (i18nConfig?.messages !== undefined) {
-      // For custom messages, use lightweight implementation with overrides
-      this.lightweightI18n.setDictionary(i18nConfig.messages);
-      this.usingI18next = false;
-      // Set direction from config or default to 'ltr' for custom messages
-      this.updateConfigDirection(i18nConfig.direction ?? 'ltr');
-
-      return;
-    }
-
+    // Load base translations first
     const requestedLocale = i18nConfig?.locale;
 
     if (requestedLocale === undefined || requestedLocale === 'auto') {
@@ -223,6 +213,11 @@ export class I18n extends Module {
       await this.setLocale(requestedLocale);
     }
 
+    // Merge custom messages on top of base translations (if provided)
+    if (i18nConfig?.messages !== undefined) {
+      this.setDictionary(i18nConfig.messages);
+    }
+
     // Update config.i18n.direction so other modules can access it via isRtl getter
     this.updateConfigDirection(i18nConfig?.direction ?? this.getDirection());
   }

package/src/components/modules/rectangleSelection.ts

@@ -116,11 +116,29 @@ export class RectangleSelection extends Module {
    * Init rect params
    * @param {number} pageX - X coord of mouse
    * @param {number} pageY - Y coord of mouse
+   * @param {boolean} shiftKey - whether Shift key is held for additive selection
    */
-  public startSelection(pageX: number, pageY: number): void {
-    const scrollLeft = this.getScrollLeft();
+  public startSelection(pageX: number, pageY: number, shiftKey = false): void {
+    const { UI } = this.Blok;
+    const redactor = UI.nodes.redactor;
+
+    if (!redactor) {
+      return;
+    }
+
+    const editorRect = redactor.getBoundingClientRect();
     const scrollTop = this.getScrollTop();
-    const elemWhereSelectionStart = document.elementFromPoint(pageX - scrollLeft, pageY - scrollTop);
+    const pointerY = pageY - scrollTop;
+
+    // Check if pointer is within editor's vertical bounds
+    const withinEditorVertically = pointerY >= editorRect.top && pointerY <= editorRect.bottom;
+
+    if (!withinEditorVertically) {
+      return;
+    }
+
+    const scrollLeft = this.getScrollLeft();
+    const elemWhereSelectionStart = document.elementFromPoint(pageX - scrollLeft, pointerY);
 
     if (!elemWhereSelectionStart) {
       return;
@@ -132,7 +150,11 @@ export class RectangleSelection extends Module {
      */
     const startsInsideToolbar = elemWhereSelectionStart.closest(createSelector(DATA_ATTR.toolbar));
 
-    if (!startsInsideToolbar) {
+    /**
+     * When Shift is held, preserve existing selection for additive behavior.
+     * Otherwise, clear selection state.
+     */
+    if (!startsInsideToolbar && !shiftKey) {
       this.Blok.BlockSelection.allBlocksSelected = false;
       this.clearSelection();
       this.stackOfSelected = [];
@@ -141,16 +163,16 @@ export class RectangleSelection extends Module {
     const selectorsToAvoid = [
       createSelector(DATA_ATTR.elementContent),
       createSelector(DATA_ATTR.toolbar),
+      createSelector(DATA_ATTR.popover),
       INLINE_TOOLBAR_INTERFACE_SELECTOR,
     ];
 
-    const startsInsideBlok = elemWhereSelectionStart.closest(createSelector(DATA_ATTR.editor));
     const startsInSelectorToAvoid = selectorsToAvoid.some((selector) => !!elemWhereSelectionStart.closest(selector));
 
     /**
-     * If selection starts outside of the blok or inside the blocks or on Blok UI elements, do not handle it
+     * If selection starts inside the blocks content or on Blok UI elements, do not handle it
      */
-    if (!startsInsideBlok || startsInSelectorToAvoid) {
+    if (startsInSelectorToAvoid) {
       return;
     }
 
@@ -194,9 +216,9 @@ export class RectangleSelection extends Module {
    * Sets Module necessary event handlers
    */
   private enableModuleBindings(): void {
-    const { container } = this.genHTML();
+    this.genHTML();
 
-    this.listeners.on(container, 'mousedown', (event: Event) => {
+    this.listeners.on(document.body, 'mousedown', (event: Event) => {
       this.processMouseDown(event as MouseEvent);
     }, false);
 
@@ -245,7 +267,7 @@ export class RectangleSelection extends Module {
     const startedFromContentEditable = (mouseEvent.target as Element).closest($.allInputsSelector) !== null;
 
     if (!startedFromContentEditable) {
-      this.startSelection(mouseEvent.pageX, mouseEvent.pageY);
+      this.startSelection(mouseEvent.pageX, mouseEvent.pageY, mouseEvent.shiftKey);
     }
   }
 
@@ -402,21 +424,38 @@ export class RectangleSelection extends Module {
       this.mouseY = event.pageY;
     }
 
-    const { rightPos, leftPos, index } = this.genInfoForMouseSelection();
-    // There is not new block in selection
-
-    const rectIsOnRighSideOfredactor = this.startX > rightPos && this.mouseX > rightPos;
-    const rectISOnLeftSideOfRedactor = this.startX < leftPos && this.mouseX < leftPos;
-
-    this.rectCrossesBlocks = !(rectIsOnRighSideOfredactor || rectISOnLeftSideOfRedactor);
-
     if (!this.isRectSelectionActivated) {
-      this.rectCrossesBlocks = false;
       this.isRectSelectionActivated = true;
       this.shrinkRectangleToPoint();
       overlayRectangle.style.display = 'block';
     }
 
+    const { index } = this.genInfoForMouseSelection();
+
+    /**
+     * Check if the selection rectangle intersects the block holder horizontally.
+     * For page-wide selection, we need to verify the rectangle actually reaches the block,
+     * not just that the mouse Y position is at the same height as a block.
+     */
+    this.rectCrossesBlocks = false;
+    const block = index !== undefined ? this.Blok.BlockManager.getBlockByIndex(index) : undefined;
+
+    if (block) {
+      const holderRect = block.holder.getBoundingClientRect();
+      const scrollLeft = this.getScrollLeft();
+
+      // Selection rectangle horizontal bounds (in page coordinates)
+      const rectLeft = Math.min(this.startX, this.mouseX);
+      const rectRight = Math.max(this.startX, this.mouseX);
+
+      // Block holder horizontal bounds (convert from viewport to page coordinates)
+      const holderLeft = holderRect.left + scrollLeft;
+      const holderRight = holderRect.right + scrollLeft;
+
+      // Check for horizontal intersection
+      this.rectCrossesBlocks = rectRight >= holderLeft && rectLeft <= holderRight;
+    }
+
     this.updateRectangleSize();
 
     /**
@@ -517,6 +556,7 @@ export class RectangleSelection extends Module {
 
   /**
    * Collects information needed to determine the behavior of the rectangle
+   * For page-wide selection, we check blocks at the center X position but at the actual mouse Y position
    * @returns {object} index - index next Block, leftPos - start of left border of Block, rightPos - right border
    */
   private genInfoForMouseSelection(): {index: number | undefined; leftPos: number; rightPos: number} {
@@ -524,6 +564,9 @@ export class RectangleSelection extends Module {
     const centerOfRedactor = widthOfRedactor / 2;
     const scrollTop = this.getScrollTop();
     const y = this.mouseY - scrollTop;
+
+    // For page-wide selection: check what block is at the center X, but at the mouse's Y position
+    // This allows selection to work even when mouse is in the left/right margins
     const elementUnderMouse = document.elementFromPoint(centerOfRedactor, y);
     const lastBlockHolder = this.Blok.BlockManager.lastBlock?.holder;
     const contentElement = lastBlockHolder?.querySelector(createSelector(DATA_ATTR.elementContent));

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

@@ -998,9 +998,9 @@ export class Toolbar extends Module<ToolbarNodes> {
        */
       this.eventsDispatcher.on(BlockHovered, (data) => {
         /**
-         * Do not move toolbar during drag operations
+         * Do not move toolbar during drag or rectangle selection operations
          */
-        if (this.Blok.DragManager.isDragging) {
+        if (this.Blok.DragManager.isDragging || this.Blok.RectangleSelection.isRectActivated()) {
           return;
         }
 

package/src/components/modules/tools.ts

@@ -334,18 +334,18 @@ export class Tools extends Module {
       .map(([toolName, settings]): ChainData => {
         const toolData: ToolPrepareData = {
           toolName,
-          config: (settings.config ?? {}) as ToolConfig,
+          config: this.extractToolConfig(settings),
         };
 
         const prepareFunction: ChainData['function'] = async (payload?: unknown) => {
-          const constructable = settings.class;
+          const constructable = settings.class as ToolConstructable | undefined;
 
           if (!constructable || !isFunction(constructable.prepare)) {
             return;
           }
 
           const data = (payload ?? toolData) as ToolPrepareData;
-          const prepareMethod = constructable.prepare as unknown as ToolPrepareFunction;
+          const prepareMethod = constructable.prepare as ToolPrepareFunction;
 
           return prepareMethod.call(constructable, data);
         };
@@ -357,6 +357,42 @@ export class Tools extends Module {
       });
   }
 
+  /**
+   * Keys that are Blok-level settings (not passed to tool constructor)
+   */
+  private static readonly BLOK_SETTINGS_KEYS = new Set([
+    'class',
+    'inlineToolbar',
+    'tunes',
+    'shortcut',
+    'toolbox',
+    'config',
+    'isInternal',
+  ]);
+
+  /**
+   * Extracts tool configuration from settings.
+   * Merges nested config with flat tool-specific options (flat takes precedence).
+   * @param settings - Tool settings from user config
+   * @returns Merged tool configuration
+   */
+  private extractToolConfig(settings: ToolSettings): ToolConfig {
+    // eslint-disable-next-line @typescript-eslint/no-deprecated -- Internal: reading legacy config for backwards compatibility
+    const nestedConfig = (settings.config ?? {}) as ToolConfig;
+
+    // Extract non-Blok keys as tool-specific config
+    const flatConfig: Record<string, unknown> = {};
+
+    for (const key of Object.keys(settings)) {
+      if (!Tools.BLOK_SETTINGS_KEYS.has(key)) {
+        flatConfig[key] = settings[key as keyof typeof settings];
+      }
+    }
+
+    // Merge: nested config first, flat config overrides
+    return { ...nestedConfig, ...flatConfig } as ToolConfig;
+  }
+
   /**
    * Assign enabled Inline Tools and Block Tunes for Block Tool
    */

package/src/components/modules/ui.ts

@@ -9,8 +9,15 @@ import { debounce, getValidUrl, isEmpty, openTab, throttle } from '../utils';
 
 import { SelectionUtils as Selection } from '../selection';
 import { Flipper } from '../flipper';
+import type { Block } from '../block';
 import { mobileScreenBreakpoint } from '../utils';
 
+/**
+ * Horizontal distance from the content edge where block hover is still detected.
+ * Extends to the left for LTR layouts, to the right for RTL.
+ */
+const HOVER_ZONE_SIZE = 100;
+
 import styles from '../../styles/main.css?inline';
 import { BlockHovered } from '../events/BlockHovered';
 import {
@@ -453,43 +460,60 @@ export class UI extends Module<UINodes> {
    */
   private watchBlockHoveredEvents(): void {
     /**
-     * Used to not emit the same block multiple times to the 'block-hovered' event on every mousemove
+     * Used to not emit the same block multiple times to the 'block-hovered' event on every mousemove.
+     * Stores block ID to ensure consistent comparison regardless of how the block was detected.
      */
-    const blockHoveredState: { lastHovered: Element | null } = {
-      lastHovered: null,
+    const blockHoveredState: { lastHoveredBlockId: string | null } = {
+      lastHoveredBlockId: null,
     };
 
     const handleBlockHovered = (event: Event): void => {
-      const isMouseEvent = typeof MouseEvent !== 'undefined' && event instanceof MouseEvent;
-      const isTouchEvent = typeof TouchEvent !== 'undefined' && event instanceof TouchEvent;
-
-      if (!isMouseEvent && !isTouchEvent) {
+      if (!(event instanceof MouseEvent)) {
         return;
       }
 
-      const hoveredBlock = (event.target as Element | null)?.closest('[data-blok-testid="block-wrapper"]');
-
-      if (!hoveredBlock) {
-        return;
-      }
+      const hoveredBlockElement = (event.target as Element | null)?.closest('[data-blok-testid="block-wrapper"]');
 
       /**
-       * For multi-block selection, still emit 'block-hovered' event so toolbar can follow the hovered block.
-       * The toolbar module will handle the logic of whether to move or not.
+       * If no block element found directly, try the extended hover zone
        */
+      const zoneBlock = !hoveredBlockElement
+        ? this.findBlockInHoverZone(event.clientX, event.clientY)
+        : null;
+
+      if (zoneBlock !== null && blockHoveredState.lastHoveredBlockId !== zoneBlock.id) {
+        blockHoveredState.lastHoveredBlockId = zoneBlock.id;
 
-      if (blockHoveredState.lastHovered === hoveredBlock) {
+        this.eventsDispatcher.emit(BlockHovered, {
+          block: zoneBlock,
+          target: zoneBlock.holder,
+        });
+      }
+
+      if (zoneBlock !== null) {
         return;
       }
 
-      blockHoveredState.lastHovered = hoveredBlock;
+      if (!hoveredBlockElement) {
+        return;
+      }
 
-      const block = this.Blok.BlockManager.getBlockByChildNode(hoveredBlock);
+      const block = this.Blok.BlockManager.getBlockByChildNode(hoveredBlockElement);
 
       if (!block) {
         return;
       }
 
+      /**
+       * For multi-block selection, still emit 'block-hovered' event so toolbar can follow the hovered block.
+       * The toolbar module will handle the logic of whether to move or not.
+       */
+      if (blockHoveredState.lastHoveredBlockId === block.id) {
+        return;
+      }
+
+      blockHoveredState.lastHoveredBlockId = block.id;
+
       this.eventsDispatcher.emit(BlockHovered, {
         block,
         target: event.target as Element,
@@ -502,13 +526,54 @@ export class UI extends Module<UINodes> {
       20
     );
 
-    this.readOnlyMutableListeners.on(this.nodes.redactor, 'mousemove', (event: Event) => {
+    /**
+     * Listen on document to detect hover in the extended zone
+     * which is outside the wrapper's bounds.
+     * We filter events to only process those over the editor or in the hover zone.
+     */
+    this.readOnlyMutableListeners.on(document, 'mousemove', (event: Event) => {
       throttledHandleBlockHovered(event);
     }, {
       passive: true,
     });
   }
 
+  /**
+   * Finds a block by vertical position when cursor is in the extended hover zone.
+   * The zone extends HOVER_ZONE_SIZE pixels from the content edge (left for LTR, right for RTL).
+   * @param clientX - Cursor X position
+   * @param clientY - Cursor Y position
+   * @returns Block at the vertical position, or null if not in hover zone or no block found
+   */
+  private findBlockInHoverZone(clientX: number, clientY: number): Block | null {
+    const contentRect = this.contentRect;
+
+    /**
+     * For LTR: check if cursor is within hover zone to the left of content
+     * For RTL: check if cursor is within hover zone to the right of content
+     */
+    const isInHoverZone = this.isRtl
+      ? clientX > contentRect.right && clientX <= contentRect.right + HOVER_ZONE_SIZE
+      : clientX < contentRect.left && clientX >= contentRect.left - HOVER_ZONE_SIZE;
+
+    if (!isInHoverZone) {
+      return null;
+    }
+
+    /**
+     * Find block by Y position
+     */
+    for (const block of this.Blok.BlockManager.blocks) {
+      const rect = block.holder.getBoundingClientRect();
+
+      if (clientY >= rect.top && clientY <= rect.bottom) {
+        return block;
+      }
+    }
+
+    return null;
+  }
+
   /**
    * Unbind events that should work only in read-only mode
    */

package/src/components/selection.ts

@@ -53,11 +53,6 @@ export class SelectionUtils {
    */
   public isFakeBackgroundEnabled = false;
 
-  /**
-   * The contenteditable element that had the selection when fake background was enabled
-   * Used to restore focus and selection when fake background is removed
-   */
-  private selectionContainer: HTMLElement | null = null;
 
   /**
    * Returns selected anchor
@@ -401,7 +396,6 @@ export class SelectionUtils {
     this.removeHighlightSpans();
 
     this.isFakeBackgroundEnabled = false;
-    this.selectionContainer = null;
   }
 
   /**
@@ -454,7 +448,6 @@ export class SelectionUtils {
   public clearFakeBackground(): void {
     this.removeOrphanedFakeBackgroundElements();
     this.isFakeBackgroundEnabled = false;
-    this.selectionContainer = null;
   }
 
   /**
@@ -478,12 +471,9 @@ export class SelectionUtils {
     }
 
     // Find the contenteditable container that holds the selection
-    const container = range.commonAncestorContainer;
-    const element = container.nodeType === Node.ELEMENT_NODE
-      ? container as HTMLElement
-      : container.parentElement;
+  
+    
 
-    this.selectionContainer = element?.closest('[contenteditable="true"]') as HTMLElement | null;
 
     // Collect text nodes and wrap them with highlight spans
     const textNodes = this.collectTextNodes(range);

package/src/components/tools/base.ts

@@ -7,6 +7,19 @@ import type { InlineToolAdapter as InlineToolAdapterInterface } from '@/types/to
 import type { BlockToolAdapter as BlockToolAdapterInterface } from '@/types/tools/adapters/block-tool-adapter';
 import type { BlockTuneAdapter as BlockTuneAdapterInterface } from '@/types/tools/adapters/block-tune-adapter';
 
+/**
+ * Keys that are Blok-level settings (not passed to tool constructor)
+ */
+const BLOK_SETTINGS_KEYS = new Set([
+  'class',
+  'inlineToolbar',
+  'tunes',
+  'shortcut',
+  'toolbox',
+  'config',
+  'isInternal',
+]);
+
 /**
  * Enum of Tool options provided by user
  */
@@ -188,10 +201,24 @@ export abstract class BaseToolAdapter<Type extends ToolType = ToolType, ToolClas
   }
 
   /**
-   * Returns Tool user configuration
+   * Returns Tool user configuration.
+   * Extracts tool-specific options from flat config and merges with nested config.
    */
   public get settings(): ToolConfig {
-    const config = (this.config[UserSettings.Config] ?? {}) as ToolConfig;
+    // eslint-disable-next-line @typescript-eslint/no-deprecated -- Internal: reading legacy config for backwards compatibility
+    const nestedConfig = (this.config[UserSettings.Config] ?? {}) as ToolConfig;
+
+    // Extract non-Blok keys as tool-specific config
+    const flatConfig: Record<string, unknown> = {};
+
+    for (const key of Object.keys(this.config)) {
+      if (!BLOK_SETTINGS_KEYS.has(key)) {
+        flatConfig[key] = this.config[key as keyof typeof this.config];
+      }
+    }
+
+    // Merge: nested config first, flat config overrides
+    const config = { ...nestedConfig, ...flatConfig } as ToolConfig;
 
     if (this.isDefault && !('placeholder' in config) && this.defaultPlaceholder) {
       config.placeholder = this.defaultPlaceholder;

package/src/components/tools/block.ts

@@ -51,13 +51,22 @@ export class BlockToolAdapter extends BaseToolAdapter<ToolType.Block, IBlockTool
    * @param readOnly - True if Blok is in read-only mode
    */
   public create(data: BlockToolData, block: BlockAPI, readOnly: boolean): IBlockTool {
+    const toolboxEntries = this.toolbox;
+
+    /**
+     * Inject merged toolbox entries into config so tools can use them in renderSettings().
+     * This allows tools like Header to show the same options in block settings as in the toolbox.
+     */
+    const configWithToolbox = toolboxEntries !== undefined
+      ? { ...this.settings, _toolboxEntries: toolboxEntries }
+      : this.settings;
 
     return new this.constructable({
       data,
       block,
       readOnly,
       api: this.api,
-      config: this.settings,
+      config: configWithToolbox,
     }) as IBlockTool;
   }
 
@@ -194,10 +203,18 @@ export class BlockToolAdapter extends BaseToolAdapter<ToolType.Block, IBlockTool
   }
 
   /**
-   * Returns enabled inline tools for Tool
+   * Returns enabled inline tools for Tool.
+   * Defaults to true (all inline tools) unless explicitly set to false or array.
    */
   public get enabledInlineTools(): boolean | string[] {
-    return this.config[UserSettings.EnabledInlineTools] || false;
+    const setting = this.config[UserSettings.EnabledInlineTools];
+
+    // Default to true if not specified
+    if (setting === undefined) {
+      return true;
+    }
+
+    return setting;
   }
 
   /**