@jackuait/blok 0.7.0-beta.4 → 0.7.0

package/src/components/modules/rectangleSelection.ts

@@ -93,6 +93,11 @@ export class RectangleSelection extends Module {
    */
   private rectCrossesBlocks = false;
 
+  /**
+   * The block index where selection started (anchor point for geometry-based selection)
+   */
+  private anchorBlockIndex: number | null = null;
+
   /**
    * Selection rectangle
    */
@@ -167,8 +172,10 @@ export class RectangleSelection extends Module {
      */
     if (!startsInsideToolbar && !shiftKey) {
       this.Blok.BlockSelection.allBlocksSelected = false;
+      this.Blok.BlockSelection.disableNavigationMode();
       this.clearSelection();
       this.stackOfSelected = [];
+      this.anchorBlockIndex = null;
     }
 
     const selectorsToAvoid = [
@@ -208,6 +215,8 @@ export class RectangleSelection extends Module {
     this.mousedown = false;
     this.startX = 0;
     this.startY = 0;
+    this.anchorBlockIndex = null;
+    this.stackOfSelected = [];
     if (this.overlayRectangle !== null) {
       this.overlayRectangle.style.display = 'none';
     }
@@ -217,7 +226,7 @@ export class RectangleSelection extends Module {
    * is RectSelection Activated
    */
   public isRectActivated(): boolean {
-    return this.isRectSelectionActivated;
+    return this.isRectSelectionActivated || this.mousedown;
   }
 
   /**
@@ -274,7 +283,7 @@ export class RectangleSelection extends Module {
       passive: true,
     });
 
-    this.listeners.on(document.body, 'mouseup', () => {
+    this.listeners.on(document, 'mouseup', () => {
       this.processMouseUp();
     }, false);
   }
@@ -467,9 +476,12 @@ export class RectangleSelection extends Module {
      */
     this.rectCrossesBlocks = false;
     const block = index !== undefined ? this.Blok.BlockManager.getBlockByIndex(index) : undefined;
+    const rootBlock = block !== undefined
+      ? this.Blok.BlockManager.resolveToRootBlock(block)
+      : undefined;
 
-    if (block) {
-      const holderRect = block.holder.getBoundingClientRect();
+    if (rootBlock) {
+      const holderRect = rootBlock.holder.getBoundingClientRect();
       const scrollLeft = this.getScrollLeft();
 
       // Selection rectangle horizontal bounds (in page coordinates)
@@ -584,45 +596,34 @@ 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
+   * For page-wide selection, we check blocks at the redactor's center X position but at the actual mouse Y position
+   * @returns {object} index - index of the Block at the current mouse Y position
    */
-  private genInfoForMouseSelection(): {index: number | undefined; leftPos: number; rightPos: number} {
-    const widthOfRedactor = document.body.offsetWidth;
-    const centerOfRedactor = widthOfRedactor / 2;
+  private genInfoForMouseSelection(): {index: number | undefined} {
+    const { UI } = this.Blok;
+    const redactor = UI.nodes.redactor;
+    const redactorRect = redactor.getBoundingClientRect();
+    const centerOfRedactor = redactorRect.left + redactorRect.width / 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));
-    const contentWidth = contentElement ? Number.parseInt(window.getComputedStyle(contentElement).width, 10) : 0;
-    const centerOfBlock = contentWidth / 2;
-    const leftPos = centerOfRedactor - centerOfBlock;
-    const rightPos = centerOfRedactor + centerOfBlock;
 
     if (!elementUnderMouse) {
       return {
         index: undefined,
-        leftPos,
-        rightPos,
       };
     }
     const blockInCurrentPos = this.Blok.BlockManager.getBlockByChildNode(elementUnderMouse);
-    const rootBlock = blockInCurrentPos !== undefined
-      ? this.Blok.BlockManager.resolveToRootBlock(blockInCurrentPos)
-      : undefined;
 
-    const index = rootBlock !== undefined
-      ? this.Blok.BlockManager.blocks.findIndex((block) => block.holder === rootBlock.holder)
+    const index = blockInCurrentPos !== undefined
+      ? this.Blok.BlockManager.blocks.indexOf(blockInCurrentPos)
       : undefined;
 
     return {
       index,
-      leftPos,
-      rightPos,
     };
   }
 
@@ -660,83 +661,75 @@ export class RectangleSelection extends Module {
   }
 
   /**
-   * Adds a block to the selection and determines which blocks should be selected
-   * @param {object} index - index of new block in the reactor
+   * Adds a block to the selection and determines which blocks should be selected.
+   * Uses geometry-based approach: tracks an anchor block index and computes the
+   * expected range [min(anchor, current), max(anchor, current)] on each call.
+   * @param {number} index - index of new block in the reactor
    */
   private trySelectNextBlock(index: number): void {
-    const sizeStack = this.stackOfSelected.length;
-    const lastSelected = this.stackOfSelected[sizeStack - 1];
-    const sameBlock = lastSelected === index;
-
-    if (sameBlock) {
-      return;
+    if (this.anchorBlockIndex === null) {
+      this.anchorBlockIndex = index;
     }
 
-    const previousSelected = this.stackOfSelected[sizeStack - 2];
-    const blockNumbersIncrease = previousSelected !== undefined && lastSelected !== undefined
-      ? lastSelected - previousSelected > 0
-      : false;
-    const isInitialSelection = sizeStack <= 1;
-    const selectionInDownDirection = lastSelected !== undefined && index > lastSelected && blockNumbersIncrease;
-    const selectionInUpDirection = lastSelected !== undefined && index < lastSelected && sizeStack > 1 && !blockNumbersIncrease;
-    const generalSelection = selectionInDownDirection || selectionInUpDirection || isInitialSelection;
-    const reduction = !generalSelection;
-
-    // When the selection is too fast, some blocks do not have time to be noticed. Fix it.
-    if (!reduction && (lastSelected === undefined || index > lastSelected)) {
-      const startIndex = lastSelected !== undefined ? lastSelected + 1 : index;
-
-      Array.from({ length: index - startIndex + 1 }, (_unused, offset) => startIndex + offset)
-        .forEach((ind) => {
-          this.addBlockInSelection(ind);
-        });
+    const blocks = this.Blok.BlockManager.blocks;
+    const anchorBlock = blocks[this.anchorBlockIndex];
+    const currentBlock = blocks[index];
 
+    if (!anchorBlock || !currentBlock) {
       return;
     }
 
-    // for both directions
-    if (!reduction && lastSelected !== undefined && index < lastSelected) {
-      Array.from(
-        { length: lastSelected - index },
-        (_unused, offset) => lastSelected - 1 - offset
-      ).forEach((ind) => {
-        this.addBlockInSelection(ind);
-      });
+    const anchorRect = anchorBlock.holder.getBoundingClientRect();
+    const currentRect = currentBlock.holder.getBoundingClientRect();
 
-      return;
-    }
+    /**
+     * Constrain the selection range to the actual rubber band coordinates.
+     * Without this, the range extends to the full bounding box of the anchor/current blocks,
+     * which can select blocks that are visually outside the rubber band rectangle.
+     */
+    const scrollTop = this.getScrollTop();
+    const rubberBandMinY = Math.min(this.startY, this.mouseY) - scrollTop;
+    const rubberBandMaxY = Math.max(this.startY, this.mouseY) - scrollTop;
 
-    if (!reduction) {
-      return;
-    }
+    const minY = Math.max(Math.min(anchorRect.top, currentRect.top), rubberBandMinY);
+    const maxY = Math.min(Math.max(anchorRect.bottom, currentRect.bottom), rubberBandMaxY);
 
-    const shouldRemove = (stackIndex: number): boolean => {
-      if (lastSelected === undefined) {
-        return false;
-      }
+    const scrollLeft = this.getScrollLeft();
+    const rubberBandMinX = Math.min(this.startX, this.mouseX) - scrollLeft;
+    const rubberBandMaxX = Math.max(this.startX, this.mouseX) - scrollLeft;
 
-      if (index > lastSelected) {
-        return index > stackIndex;
-      }
+    const expectedIndices = new Set<number>();
 
-      return index < stackIndex;
-    };
+    blocks.forEach((block, i) => {
+      const blockRect = block.holder.getBoundingClientRect();
+      const blockContentEl = block.holder.querySelector<HTMLElement>('[data-blok-element-content]');
+      const blockContentRect = (blockContentEl ?? block.holder).getBoundingClientRect();
 
-    const indicesToRemove: number[] = [];
+      const xOverlaps = rubberBandMinX === rubberBandMaxX || (blockContentRect.right > rubberBandMinX && blockContentRect.left < rubberBandMaxX);
 
-    for (const stackIndex of [ ...this.stackOfSelected ].reverse()) {
-      if (!shouldRemove(stackIndex)) {
-        break;
+      // Include blocks that have visual height and overlap the selection range
+      if (blockRect.height > 0 && blockRect.bottom > minY && blockRect.top < maxY && xOverlaps) {
+        expectedIndices.add(i);
       }
+    });
 
-      if (this.rectCrossesBlocks) {
-        this.Blok.BlockSelection.unSelectBlockByIndex(stackIndex);
+    const previousStack = new Set(this.stackOfSelected);
+
+    // Deselect blocks no longer in range
+    for (const prevIndex of previousStack) {
+      if (!expectedIndices.has(prevIndex) && this.rectCrossesBlocks) {
+        this.Blok.BlockSelection.unSelectBlockByIndex(prevIndex);
       }
-      indicesToRemove.push(stackIndex);
     }
 
-    if (indicesToRemove.length > 0) {
-      this.stackOfSelected.splice(this.stackOfSelected.length - indicesToRemove.length, indicesToRemove.length);
+    // Select blocks newly in range
+    for (const expectedIndex of expectedIndices) {
+      if (!previousStack.has(expectedIndex) && this.rectCrossesBlocks) {
+        this.Blok.BlockSelection.selectBlockByIndex(expectedIndex);
+      }
     }
+
+    // Replace stack with the visually selected indices
+    this.stackOfSelected = Array.from(expectedIndices).sort((a, b) => a - b);
   }
 }

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

@@ -183,7 +183,7 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
         this.Blok.BlockSelection.clearCache();
       }
 
-      /** Get tool's settings data - only relevant for single block selection */
+      /** Get tool-specific tunes and common tunes (delete, move, etc.) */
       const { toolTunes, commonTunes } = block.getTunes();
 
       const PopoverClass = isMobileScreen() ? PopoverMobile : PopoverDesktop;
@@ -196,6 +196,7 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
           nothingFound: this.Blok.I18n.t('popover.nothingFound'),
           search: this.Blok.I18n.t('popover.search'),
         },
+        autoFocusFirstItem: false,
       };
 
       if (PopoverClass === PopoverDesktop) {
@@ -292,18 +293,20 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
 
   /**
    * Returns list of items to be displayed in block tunes menu.
-   * Merges tool specific tunes, conversion menu and common tunes in one list in predefined order
+   * Merges conversion menu, tool-specific tunes, and common tunes in one list in predefined order
    * @param currentBlock –  block we are about to open block tunes for
    * @param commonTunes – common tunes
-   * @param toolTunes - tool specific tunes
+   * @param toolTunes – tool-specific tunes from renderSettings()
    */
   private async getTunesItems(currentBlock: Block, commonTunes: MenuConfigItem[], toolTunes?: MenuConfigItem[]): Promise<PopoverItemParams[]> {
     const items = [] as MenuConfigItem[];
     const selectedBlocks = this.Blok.BlockSelection.selectedBlocks;
     const hasMultipleBlocksSelected = selectedBlocks.length > 1;
 
+    const allBlockTools = Array.from(this.Blok.Tools.blockTools.values());
+
     /**
-     * Only show tool-specific tunes when a single block is selected
+     * Tool-specific tunes come first (e.g. heading level selector)
      */
     if (!hasMultipleBlocksSelected && toolTunes !== undefined && toolTunes.length > 0) {
       items.push(...toolTunes);
@@ -312,8 +315,6 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
       });
     }
 
-    const allBlockTools = Array.from(this.Blok.Tools.blockTools.values());
-
     /**
      * Get convertible tools based on selection:
      * - For single block: use existing single-block conversion logic
@@ -340,6 +341,23 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
           onActivate: async () => {
             const { Caret, Toolbar } = this.Blok;
 
+            // Warn before converting a block that has nested children — they will be
+            // promoted to sibling level (or lost if the host cannot hold children).
+            const childCount = currentBlock.contentIds.length;
+
+            if (childCount > 0) {
+              const message = this.Blok.I18n.t('blockSettings.convertWithChildrenWarning', {
+                count: childCount,
+              });
+              const fallback = `This block has ${childCount} nested block${childCount === 1 ? '' : 's'}. Converting it will promote them to the top level. Continue?`;
+              // eslint-disable-next-line no-alert
+              const confirmed = window.confirm(message !== 'blockSettings.convertWithChildrenWarning' ? message : fallback);
+
+              if (!confirmed) {
+                return;
+              }
+            }
+
             const newBlock = await this.convertBlock(
               currentBlock,
               selectedBlocks,
@@ -375,7 +393,7 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
     }
 
     /**
-     * For single block selection, show all common tunes (delete, move, etc.)
+     * For single block selection, show common tunes (delete, move, etc.)
      * For multiple blocks, only show delete option with multi-block delete behavior
      */
     if (!hasMultipleBlocksSelected) {

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

@@ -586,6 +586,15 @@ export class Toolbar extends Module<ToolbarNodes> {
     // Only set explicitlyClosed if not explicitly disabled (e.g., when called from toolbox after block insertion)
     if (options?.setExplicitlyClosed !== false) {
       this.explicitlyClosed = true;
+
+      /**
+       * Reset the BlockHoverController's lastHoveredBlockId so that the next
+       * mousemove over the same block re-emits BlockHovered.
+       * Without this, deduplication in BlockHoverController suppresses the event
+       * and the toolbar can never reopen on the same block after being closed by
+       * a mousedown (e.g. from RectangleSelection.startSelection).
+       */
+      this.Blok.UI.resetBlockHoverState();
     }
 
     /**
@@ -761,13 +770,6 @@ export class Toolbar extends Module<ToolbarNodes> {
     const actions = $.make('div', [
       // eslint-disable-next-line @typescript-eslint/no-deprecated -- CSS getter now returns Tailwind classes
       this.CSS.actions,
-      // Narrow mode positioning on non-mobile screens
-      'not-mobile:group-data-[blok-narrow=true]:right-[calc(-1*(var(--spacing-narrow-mode-right-padding))-5px)]',
-      // RTL narrow mode: use left positioning instead
-      'not-mobile:group-data-[blok-rtl=true]:group-data-[blok-narrow=true]:right-auto',
-      'not-mobile:group-data-[blok-rtl=true]:group-data-[blok-narrow=true]:left-[calc(-1*(var(--spacing-narrow-mode-right-padding))-5px)]',
-      // RTL narrow mode additional left offset
-      'not-mobile:group-data-[blok-rtl=true]:group-data-[blok-narrow=true]:left-[-5px]',
     ]);
 
     this.nodes.content = content;

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

@@ -351,7 +351,12 @@ export class InlineToolbar extends Module<InlineToolbarNodes> {
       return;
     }
 
-    const wrapperOffset = this.Blok.UI.nodes.wrapper.getBoundingClientRect();
+    const uiWrapper = this.Blok.UI.nodes.wrapper;
+    const offsetParent = this.nodes.wrapper.offsetParent as HTMLElement | null;
+    const isContainedByUiWrapper = offsetParent === uiWrapper;
+    const wrapperOffset = isContainedByUiWrapper
+      ? uiWrapper.getBoundingClientRect()
+      : new DOMRect(0, 0, 0, 0);
     const contentRect = this.Blok.UI.contentRect;
     const selectionRect = SelectionUtils.rect;
 

package/src/components/modules/toolbar/plus-button.ts

@@ -99,14 +99,10 @@ export class PlusButtonHandler {
         // Keep hover background when toolbox is open
         'group-data-[blok-toolbox-opened=true]:bg-bg-light',
         // Mobile styles (static positioning with overlay-pane appearance)
-        'mobile:bg-white mobile:border mobile:border-[#e8e8eb] mobile:shadow-overlay-pane mobile:rounded-[6px] mobile:z-2',
+        'mobile:bg-popover-bg mobile:border mobile:border-mobile-border mobile:shadow-overlay-pane mobile:rounded-[6px] mobile:z-2',
         'mobile:w-toolbox-btn-mobile mobile:h-toolbox-btn-mobile',
         // RTL styles
-        'group-data-[blok-rtl=true]:right-[calc(-1*(var(--spacing-toolbox-btn)))] group-data-[blok-rtl=true]:left-auto',
-        // Narrow mode (not-mobile)
-        'not-mobile:group-data-[blok-narrow=true]:left-[5px]',
-        // Narrow mode RTL (not-mobile)
-        'not-mobile:group-data-[blok-rtl=true]:group-data-[blok-narrow=true]:left-0 not-mobile:group-data-[blok-rtl=true]:group-data-[blok-narrow=true]:right-[5px]'
+        'group-data-[blok-rtl=true]:right-[calc(-1*(var(--spacing-toolbox-btn)))] group-data-[blok-rtl=true]:left-auto'
       ),
     ], {
       innerHTML: IconPlus,

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

@@ -76,7 +76,16 @@ export class ToolbarPositioner {
      * to properly center the toolbar on the text, not on the marker which may have different font-size
      */
     const textElement = listItemElement?.querySelector('[contenteditable]');
-    const contentElement = textElement ?? listItemElement ?? targetBlock.pluginsContent;
+    const pluginsContent = targetBlock.pluginsContent;
+    /**
+     * If pluginsContent is a non-editable container (e.g. a toggle heading wrapper <div>),
+     * use its first contenteditable descendant for accurate line-height centering.
+     */
+    const editableDescendant =
+      !pluginsContent.matches('[contenteditable]')
+        ? (pluginsContent.querySelector('[contenteditable]') ?? null)
+        : null;
+    const contentElement = textElement ?? listItemElement ?? editableDescendant ?? pluginsContent;
     const contentRect = contentElement.getBoundingClientRect();
     const contentOffset = contentRect.top - holderRect.top;
 

package/src/components/modules/toolbar/settings-toggler.ts

@@ -126,7 +126,7 @@ export class SettingsTogglerHandler {
         'group-data-[blok-block-settings-opened=true]:bg-bg-light',
         'can-hover:hover:group-data-[blok-block-settings-opened=true]:cursor-pointer',
         // Mobile styles (static positioning with overlay-pane appearance)
-        'mobile:bg-white mobile:border mobile:border-[#e8e8eb] mobile:shadow-overlay-pane mobile:rounded-[6px] mobile:z-2',
+        'mobile:bg-popover-bg mobile:border mobile:border-mobile-border mobile:shadow-overlay-pane mobile:rounded-[6px] mobile:z-2',
         'mobile:w-toolbox-btn-mobile mobile:h-toolbox-btn-mobile'
       ),
       'group-data-[blok-dragging=true]:cursor-grabbing',

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

@@ -40,14 +40,10 @@ export const getToolbarStyles = (): { [name: string]: string } => {
       // Keep hover background when toolbox is opened
       'group-data-[blok-toolbox-opened=true]:bg-bg-light',
       // Mobile styles (static positioning with overlay-pane appearance)
-      'mobile:bg-white mobile:border mobile:border-[#e8e8eb] mobile:shadow-overlay-pane mobile:rounded-[6px] mobile:z-2',
+      'mobile:bg-popover-bg mobile:border mobile:border-mobile-border mobile:shadow-overlay-pane mobile:rounded-[6px] mobile:z-2',
       'mobile:w-toolbox-btn-mobile mobile:h-toolbox-btn-mobile',
       // RTL styles
-      'group-data-[blok-rtl=true]:right-[calc(-1*(var(--spacing-toolbox-btn)))] group-data-[blok-rtl=true]:left-auto',
-      // Narrow mode (not-mobile)
-      'not-mobile:group-data-[blok-narrow=true]:left-[5px]',
-      // Narrow mode RTL (not-mobile)
-      'not-mobile:group-data-[blok-rtl=true]:group-data-[blok-narrow=true]:left-0 not-mobile:group-data-[blok-rtl=true]:group-data-[blok-narrow=true]:right-[5px]'
+      'group-data-[blok-rtl=true]:right-[calc(-1*(var(--spacing-toolbox-btn)))] group-data-[blok-rtl=true]:left-auto'
     ),
     plusButtonShortcutKey: 'text-white',
     /**
@@ -69,7 +65,7 @@ export const getToolbarStyles = (): { [name: string]: string } => {
       'group-data-[blok-block-settings-opened=true]:bg-bg-light',
       'can-hover:hover:group-data-[blok-block-settings-opened=true]:cursor-pointer',
       // Mobile styles (static positioning with overlay-pane appearance)
-      'mobile:bg-white mobile:border mobile:border-[#e8e8eb] mobile:shadow-overlay-pane mobile:rounded-[6px] mobile:z-2',
+      'mobile:bg-popover-bg mobile:border mobile:border-mobile-border mobile:shadow-overlay-pane mobile:rounded-[6px] mobile:z-2',
       'mobile:w-toolbox-btn-mobile mobile:h-toolbox-btn-mobile',
       // Not-mobile styles
       'not-mobile:w-6'

package/src/components/modules/ui.ts

@@ -65,6 +65,9 @@ export class UI extends Module<UINodes> {
   private documentClickedHandler: ((event: MouseEvent) => void) | null = null;
   private redactorTouchHandler: ((event: Event) => void) | null = null;
 
+  /** Unique style tag ID for this instance's font override, derived from the holder element */
+  private fontStyleTagId: string | null = null;
+
   /**
    * Reset the block hover state (used after drag cancellation to allow toolbar to show again)
    */
@@ -148,6 +151,7 @@ export class UI extends Module<UINodes> {
      * Load and append CSS
      */
     this.loadStyles();
+    this.loadFontStyles();
 
     /**
      * Register this Blok instance with the accessibility announcer
@@ -370,6 +374,14 @@ export class UI extends Module<UINodes> {
     this.unbindReadOnlyInsensitiveListeners();
     this.unbindReadOnlySensitiveListeners();
 
+    // Remove the per-instance font style tag to prevent leaks in SPAs
+    if (this.fontStyleTagId !== null) {
+      const fontStyleTag = $.get(this.fontStyleTagId);
+      if (fontStyleTag) {
+        fontStyleTag.remove();
+      }
+    }
+
     // Clean up accessibility announcer
     destroyAnnouncer();
   }
@@ -454,11 +466,11 @@ export class UI extends Module<UINodes> {
       this.nodes.wrapper.setAttribute(DATA_ATTR.rtl, 'true');
     }
     this.nodes.redactor = $.make('div', [
-      // Narrow mode: add right margin on non-mobile screens
-      'not-mobile:group-data-[blok-narrow=true]:mr-(--spacing-narrow-mode-right-padding)',
-      // RTL narrow mode: add left margin instead
-      'not-mobile:group-data-[blok-rtl=true]:group-data-[blok-narrow=true]:ml-(--spacing-narrow-mode-right-padding)',
-      'not-mobile:group-data-[blok-rtl=true]:group-data-[blok-narrow=true]:mr-0',
+      // Narrow mode: add left margin on non-mobile screens to make room for toolbar buttons
+      'not-mobile:group-data-[blok-narrow=true]:ml-(--spacing-narrow-mode-padding)',
+      // RTL narrow mode: add right margin instead
+      'not-mobile:group-data-[blok-rtl=true]:group-data-[blok-narrow=true]:mr-(--spacing-narrow-mode-padding)',
+      'not-mobile:group-data-[blok-rtl=true]:group-data-[blok-narrow=true]:ml-0',
       // Firefox empty contenteditable fix
       '[&_[contenteditable]:empty]:after:content-["\\feff_"]',
     ]);
@@ -527,6 +539,48 @@ export class UI extends Module<UINodes> {
     $.prepend(document.head, tag);
   }
 
+  /**
+   * Injects a font-family override stylesheet when config.style.fontFamily is set.
+   * Uses a separate <style> tag so it applies even when blok-styles already exists
+   * (multiple editor instances on the same page).
+   */
+  private loadFontStyles(): void {
+    const fontFamily = this.config.style?.fontFamily;
+
+    if (!fontFamily) {
+      return;
+    }
+
+    const holderId = this.nodes.holder.id !== '' ? this.nodes.holder.id : (this.nodes.wrapper.dataset['blokInterface'] ?? 'default');
+    const styleTagId = `blok-font-${holderId}`;
+
+    this.fontStyleTagId = styleTagId;
+
+    if ($.get(styleTagId)) {
+      return;
+    }
+
+    const css = [
+      `[data-blok-interface=blok], [data-blok-interface=tooltip] {`,
+      `  --blok-font-family: ${fontFamily};`,
+      `}`,
+      `[data-blok-popover]:not([data-blok-popover-inline]) {`,
+      `  --blok-font-family: ${fontFamily};`,
+      `}`,
+    ].join('\n');
+
+    const tag = $.make('style', null, {
+      id: styleTagId,
+      textContent: css,
+    });
+
+    if (this.config.style?.nonce) {
+      tag.setAttribute('nonce', this.config.style.nonce);
+    }
+
+    $.prepend(document.head, tag);
+  }
+
   /**
    * Adds listeners that should work both in read-only and read-write modes
    */

package/src/components/modules/uiControllers/handlers/click.ts

@@ -109,9 +109,10 @@ export const createDocumentClickedHandler = (
     /**
      * Clear Selection if user clicked somewhere
      * But preserve selection when clicking on block settings toggler or inside block settings
-     * to allow multi-block operations like conversion
+     * to allow multi-block operations like conversion.
+     * Also preserve selection when Shift is held (additive Shift+drag rubber band selection).
      */
-    if (!context.doNotProcess) {
+    if (!context.doNotProcess && !event.shiftKey) {
       Blok.BlockSelection.clearSelection(event);
     }
 

package/src/components/modules/widthManager.ts

@@ -0,0 +1,69 @@
+import { Module } from '../__module';
+
+const DEFAULT_NARROW_WIDTH = '650px';
+const DEFAULT_FULL_WIDTH = '100%';
+const CSS_VAR = '--blok-content-width';
+
+/**
+ * Manages the editor-level width mode.
+ *
+ * Applies a CSS custom property (--blok-content-width) to the editor wrapper
+ * element, which block content elements read via CSS cascade.
+ */
+export class WidthManager extends Module {
+  private currentMode: 'narrow' | 'full' = 'narrow';
+
+  /**
+   * Called by Core after all modules are constructed and wired.
+   */
+  public prepare(): void {
+    const initialMode = this.config.defaultWidth ?? 'narrow';
+    this.currentMode = initialMode;
+    this.applyWidth(initialMode);
+  }
+
+  /**
+   * Returns the current width mode.
+   */
+  public getWidth(): 'narrow' | 'full' {
+    return this.currentMode;
+  }
+
+  /**
+   * Sets the editor width mode.
+   * No-op if already in the requested mode.
+   */
+  public setWidth(mode: 'narrow' | 'full'): void {
+    if (this.currentMode === mode) {
+      return;
+    }
+    this.currentMode = mode;
+    this.applyWidth(mode);
+
+    const callback = this.config.onWidthChange;
+    if (typeof callback === 'function') {
+      callback(mode, this.resolveValue(mode));
+    }
+  }
+
+  /**
+   * Toggles between 'narrow' and 'full'.
+   */
+  public toggle(): void {
+    this.setWidth(this.currentMode === 'narrow' ? 'full' : 'narrow');
+  }
+
+  // ─── Private ───────────────────────────────────────────────────────────────
+
+  private applyWidth(mode: 'narrow' | 'full'): void {
+    const value = this.resolveValue(mode);
+    this.Blok.UI.nodes.wrapper.style.setProperty(CSS_VAR, value);
+  }
+
+  private resolveValue(mode: 'narrow' | 'full'): string {
+    if (mode === 'narrow') {
+      return this.config.narrowWidth ?? DEFAULT_NARROW_WIDTH;
+    }
+    return this.config.fullWidth ?? DEFAULT_FULL_WIDTH;
+  }
+}

package/src/components/modules/yjs/document-store.ts

@@ -212,6 +212,17 @@ export class DocumentStore {
     this.ydoc.transact(fn, origin);
   }
 
+  /**
+   * Execute Yjs operations without adding them to the undo history.
+   * Uses a non-tracked origin so the UndoManager ignores these changes.
+   * Use this for auto-repair operations (e.g. ensuring empty cells have a block)
+   * that should never be undoable by the user.
+   * @param fn - Function containing Yjs operations to execute
+   */
+  public transactWithoutCapture(fn: () => void): void {
+    this.ydoc.transact(fn, 'no-capture');
+  }
+
   /**
    * Get existing tunes Y.Map or create a new one.
    * @param yblock - The block Y.Map