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

package/dist/chunks/{i18next-loader-CJNShSyT.mjs → i18next-loader-D-sjerXt.mjs}

@@ -1,4 +1,4 @@
-import { e as i } from "./blok-BOtlKwVO.mjs";
+import { e as i } from "./blok-Bjkxis7j.mjs";
 const l = async (e, r) => {
   const n = (await import("./i18next-CugVlwWp.mjs")).default.createInstance(), s = {
     lng: e,

package/dist/chunks/{index-BUAPAChM.mjs → index-CJfN4Vuv.mjs}

@@ -1,4 +1,4 @@
-import { a2 as s, t as f } from "./inline-tool-convert-UoYdJJic.mjs";
+import { a2 as s, t as f } from "./inline-tool-convert-5DE7c2fi.mjs";
 const a = {
   wrapper: s(
     "fixed z-[2] bottom-5 left-5",

package/dist/chunks/{inline-tool-convert-UoYdJJic.mjs → inline-tool-convert-5DE7c2fi.mjs}

@@ -278,7 +278,7 @@ const d = {
   DELETE: 46
 }, Ae = {
   LEFT: 0
-}, Se = 650, Wt = () => "0.6.0-beta.6";
+}, Se = 650, Wt = () => "0.6.0-beta.7";
 var Vt = /* @__PURE__ */ ((n) => (n.VERBOSE = "VERBOSE", n.INFO = "INFO", n.WARN = "WARN", n.ERROR = "ERROR", n))(Vt || {});
 const V = (n, t, e = "log", o, s = "color: inherit") => {
   const i = typeof console == "undefined" ? void 0 : console;

package/dist/full.mjs

@@ -12,8 +12,8 @@ var e = (a, l, o) => l in a ? n(a, l, { enumerable: !0, configurable: !0, writab
 }, r = (a, l) => t(a, c(l));
 import { Link as p, Italic as f, Bold as I, List as k, Header as u, Paragraph as B } from "./tools.mjs";
 import { defaultBlockTools as v, defaultInlineTools as A } from "./tools.mjs";
-import { B as H, v as P } from "./chunks/blok-BOtlKwVO.mjs";
-import { D as _ } from "./chunks/inline-tool-convert-UoYdJJic.mjs";
+import { B as H, v as P } from "./chunks/blok-Bjkxis7j.mjs";
+import { D as _ } from "./chunks/inline-tool-convert-5DE7c2fi.mjs";
 const m = {
   paragraph: {
     class: B,

package/dist/tools.mjs

@@ -10,8 +10,8 @@ var Tt = (i, t, e) => t in i ? ke(i, t, { enumerable: !0, configurable: !0, writ
       Le.call(t, e) && Tt(i, e, t[e]);
   return i;
 }, tt = (i, t) => xe(i, Te(t));
-import { t as v, D as E, am as Be, an as Ie, _ as Ne, ao as De, ap as He, aq as Pe, ar as _e, as as Oe, at as Me, au as Qt, av as te, aw as ee, o as We, p as Rt, a5 as Lt, a3 as $e, ax as Ge, J as ne, Q as se, P as F, ay as qe, az as Fe, a0 as oe, aA as ze, aB as Ve, aC as Ue, aD as Ke, aE as je, z as H, aF as Xe, aG as Ye, S as et, aH as Ze, l as Je, a8 as Qe } from "./chunks/inline-tool-convert-UoYdJJic.mjs";
-import { ab as xo } from "./chunks/inline-tool-convert-UoYdJJic.mjs";
+import { t as v, D as E, am as Be, an as Ie, _ as Ne, ao as De, ap as He, aq as Pe, ar as _e, as as Oe, at as Me, au as Qt, av as te, aw as ee, o as We, p as Rt, a5 as Lt, a3 as $e, ax as Ge, J as ne, Q as se, P as F, ay as qe, az as Fe, a0 as oe, aA as ze, aB as Ve, aC as Ue, aD as Ke, aE as je, z as H, aF as Xe, aG as Ye, S as et, aH as Ze, l as Je, a8 as Qe } from "./chunks/inline-tool-convert-5DE7c2fi.mjs";
+import { ab as xo } from "./chunks/inline-tool-convert-5DE7c2fi.mjs";
 const ie = (i) => {
   if (!i || !i.includes("data-blok-fake-background"))
     return i;
@@ -1824,7 +1824,7 @@ class ds {
       return (r == null ? void 0 : r.offsetHeight) || 30;
     }
     if (this.getNewColumnWidth)
-      return this.getNewColumnWidth();
+      return this.getNewColumnWidth() || 100;
     const e = this.grid.querySelector("[data-blok-table-row]");
     if (!e)
       return 100;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackuait/blok",
-  "version": "0.6.0-beta.6",
+  "version": "0.6.0-beta.7",
   "description": "Blok — headless, highly extensible rich text editor built for developers who need to implement a block-based editing experience (similar to Notion) without building it from scratch",
   "module": "dist/blok.mjs",
   "types": "./types/index.d.ts",

package/src/components/modules/rectangleSelection.ts

@@ -140,11 +140,15 @@ export class RectangleSelection extends Module {
     const pointerX = pageX - scrollLeft;
 
     /**
-     * Check if pointer is within editor's horizontal bounds.
+     * Check if pointer is within the content area's horizontal bounds.
      * This determines whether we should close the toolbar when starting selection.
-     * Clicks outside the horizontal bounds (to the left or right) should NOT close the toolbar.
+     * Clicks outside the content area (to the left or right, in the margin/toolbar zone)
+     * should NOT close the toolbar. Use the first block's content element for bounds,
+     * falling back to the redactor bounds if no content element exists.
      */
-    const withinEditorHorizontally = pointerX >= editorRect.left && pointerX <= editorRect.right;
+    const contentElement = redactor.querySelector('[data-blok-testid="block-content"]');
+    const contentRect = contentElement ? contentElement.getBoundingClientRect() : editorRect;
+    const withinEditorHorizontally = pointerX >= contentRect.left && pointerX <= contentRect.right;
 
     const elemWhereSelectionStart = document.elementFromPoint(pageX - scrollLeft, pointerY);
 

package/src/components/modules/saver.ts

@@ -125,7 +125,9 @@ export class Saver extends Module {
     const extractedBlocks: OutputData['blocks'] = [];
 
     allExtractedData.forEach(({ id, tool, data, tunes, isValid, parentId, contentIds }) => {
-      if (!isValid) {
+      const hasParent = parentId !== undefined && parentId !== null;
+
+      if (!isValid && !hasParent) {
         log(`Block «${tool}» skipped because saved data is invalid`);
 
         return;
@@ -151,7 +153,6 @@ export class Saver extends Module {
       }
 
       const isTunesEmpty = tunes === undefined || isEmpty(tunes);
-      const hasParent = parentId !== undefined && parentId !== null;
       const hasContent = contentIds !== undefined && contentIds.length > 0;
 
       const output: OutputData['blocks'][number] = {

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

@@ -85,6 +85,13 @@ export class Toolbar extends Module<ToolbarNodes> {
    */
   private explicitlyClosed: boolean = false;
 
+  /**
+   * Flag to track if the current hovered block was resolved from a table cell block.
+   * When true, the toolbar suppresses plus button, settings toggler, and
+   * prevents overriding the current block when the toolbox opens.
+   */
+  private hoveredBlockIsFromTableCell: boolean = false;
+
   /**
    * Toolbox class instance
    * It will be created in requestIdleCallback so it can be null in some period of time
@@ -215,8 +222,10 @@ export class Toolbar extends Module<ToolbarNodes> {
 
         /**
          * Set current block to cover the case when the Toolbar showed near hovered Block but caret is set to another Block.
+         * Skip this when the hovered block was resolved from a table cell, so the toolbox
+         * can detect the original cell block and hide restricted tools (e.g., table, header).
          */
-        if (this.hoveredBlock) {
+        if (this.hoveredBlock && !this.hoveredBlockIsFromTableCell) {
           this.Blok.BlockManager.currentBlock = this.hoveredBlock;
         }
 
@@ -328,11 +337,12 @@ export class Toolbar extends Module<ToolbarNodes> {
 
     const targetBlock = this.resolveTableCellBlock(unresolvedBlock);
 
-    if (!targetBlock) {
-      this.close();
-
-      return;
-    }
+    /**
+     * Track whether the original block was inside a table cell.
+     * When true, the toolbar suppresses plus button and settings toggler,
+     * and the toolbox uses the original current block for cell detection.
+     */
+    this.hoveredBlockIsFromTableCell = targetBlock !== unresolvedBlock;
 
     /** Clean up draggable on previous block if any */
     if (this.hoveredBlock && this.hoveredBlock !== targetBlock) {
@@ -351,6 +361,25 @@ export class Toolbar extends Module<ToolbarNodes> {
       return;
     }
 
+    /**
+     * Suppress toolbar buttons when the block is inside a table cell.
+     * The toolbar still positions itself for toolbox/slash-search purposes,
+     * but plus button and settings toggler remain hidden.
+     */
+    if (this.hoveredBlockIsFromTableCell) {
+      plusButton.style.display = 'none';
+
+      if (settingsToggler) {
+        settingsToggler.style.display = 'none';
+      }
+    } else {
+      plusButton.style.display = '';
+
+      if (settingsToggler) {
+        settingsToggler.style.display = '';
+      }
+    }
+
     const targetBlockHolder = targetBlock.holder;
     const { isMobile } = this.Blok.UI;
 
@@ -521,18 +550,24 @@ export class Toolbar extends Module<ToolbarNodes> {
      * to prevent toolbar from reopening on subsequent block-hovered events
      */
     this.hoveredBlock = null;
+    this.hoveredBlockIsFromTableCell = false;
     // Only set explicitlyClosed if not explicitly disabled (e.g., when called from toolbox after block insertion)
     if (options?.setExplicitlyClosed !== false) {
       this.explicitlyClosed = true;
     }
 
     /**
-     * Restore plus button visibility in case it was hidden by other interactions
+     * Restore plus button and settings toggler visibility
+     * in case they were hidden for table cell blocks
      */
     if (this.nodes.plusButton) {
       this.nodes.plusButton.style.display = '';
     }
 
+    if (this.nodes.settingsToggler) {
+      this.nodes.settingsToggler.style.display = '';
+    }
+
     /**
      * Reset the content offset transform
      */
@@ -566,9 +601,9 @@ export class Toolbar extends Module<ToolbarNodes> {
    * Uses the DOM attribute directly to avoid cross-module dependency on the table tool.
    *
    * @param block - the block to resolve
-   * @returns the parent table block if inside a cell, the original block otherwise, or null if resolution fails
+   * @returns the parent table block if inside a cell, the original block otherwise
    */
-  private resolveTableCellBlock(block: Block): Block | null {
+  private resolveTableCellBlock(block: Block): Block {
     const cellBlocksContainer = block.holder.closest('[data-blok-table-cell-blocks]');
 
     if (!cellBlocksContainer) {
@@ -578,10 +613,10 @@ export class Toolbar extends Module<ToolbarNodes> {
     const tableBlockHolder = cellBlocksContainer.closest('[data-blok-testid="block-wrapper"]');
 
     if (!tableBlockHolder) {
-      return null;
+      return block;
     }
 
-    return this.Blok.BlockManager.getBlockByChildNode(tableBlockHolder) ?? null;
+    return this.Blok.BlockManager.getBlockByChildNode(tableBlockHolder) ?? block;
   }
 
   /**

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

@@ -173,12 +173,33 @@ export class PlusButtonHandler {
     const hoveredBlockIndex = hoveredBlock !== null
       ? BlockManager.getBlockIndex(hoveredBlock)
       : BlockManager.currentBlockIndex;
-    const insertIndex = insertAbove ? hoveredBlockIndex : hoveredBlockIndex + 1;
+    const baseInsertIndex = insertAbove ? hoveredBlockIndex : hoveredBlockIndex + 1;
+
+    // When inserting below, skip past any blocks nested inside another block's
+    // DOM (e.g. paragraph blocks inside table cells). The block array may
+    // interleave nested blocks from multiple parents, so check whether each
+    // block's holder lives inside any block-wrapper ancestor rather than only
+    // the hovered block's holder.
+    const blocksAfterInsert = BlockManager.blocks.slice(baseInsertIndex);
+    const isNested = (block: Block): boolean =>
+      block.holder.parentElement?.closest('[data-blok-testid="block-wrapper"]') !== null;
+    const firstNonNestedOffset = !insertAbove && hoveredBlock && blocksAfterInsert.length > 0
+      ? blocksAfterInsert.findIndex((block) => !isNested(block))
+      : 0;
+    const insertIndex = baseInsertIndex + (firstNonNestedOffset === -1 ? blocksAfterInsert.length : firstNonNestedOffset);
 
     const targetBlock = isEmptyParagraph || startsWithSlash
       ? hoveredBlock
       : BlockManager.insertDefaultBlockAtIndex(insertIndex, true);
 
+    // The DOM insertion may place the new block's holder inside a nested
+    // container (e.g. a table cell) because the previous block in the array
+    // is inside another block's DOM. Move the holder to be a sibling after
+    // the hovered block so it becomes a top-level block.
+    if (targetBlock !== hoveredBlock && isNested(targetBlock)) {
+      hoveredBlock?.holder.after(targetBlock.holder);
+    }
+
     // Insert "/" or position caret after existing one
     if (startsWithSlash) {
       Caret.setToBlock(targetBlock, Caret.positions.DEFAULT, 1);

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

@@ -288,7 +288,7 @@ export class TableAddControls {
     }
 
     if (this.getNewColumnWidth) {
-      return this.getNewColumnWidth();
+      return this.getNewColumnWidth() || 100;
     }
 
     const firstRow = this.grid.querySelector('[data-blok-table-row]');