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

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

@@ -1,4 +1,4 @@
-import { e as i } from "./blok-BOtlKwVO.mjs";
+import { e as i } from "./blok-bzxy6Olq.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-DSSrx_Co.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-D4SXxjDd.mjs";
 const a = {
   wrapper: s(
     "fixed z-[2] bottom-5 left-5",

package/dist/chunks/{inline-tool-convert-UoYdJJic.mjs → inline-tool-convert-D4SXxjDd.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.8";
 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-bzxy6Olq.mjs";
+import { D as _ } from "./chunks/inline-tool-convert-D4SXxjDd.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 Pe, aq as He, 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 P, aF as Xe, aG as Ye, S as et, aH as Ze, l as Je, a8 as Qe } from "./chunks/inline-tool-convert-D4SXxjDd.mjs";
+import { ab as xo } from "./chunks/inline-tool-convert-D4SXxjDd.mjs";
 const ie = (i) => {
   if (!i || !i.includes("data-blok-fake-background"))
     return i;
@@ -550,8 +550,8 @@ const O = class O {
 };
 O.BASE_STYLES = "py-[3px] px-[2px] m-0 !leading-[1.3] outline-none [&_p]:!p-0 [&_p]:!m-0 [&_div]:!p-0 [&_div]:!m-0", O.DEFAULT_LEVELS = [
   { number: 1, tag: "H1", nameKey: "tools.header.heading1", name: "Heading 1", icon: De, styles: "text-4xl font-bold mt-8 mb-1" },
-  { number: 2, tag: "H2", nameKey: "tools.header.heading2", name: "Heading 2", icon: He, styles: "text-3xl font-semibold mt-6 mb-px" },
-  { number: 3, tag: "H3", nameKey: "tools.header.heading3", name: "Heading 3", icon: Pe, styles: "text-2xl font-semibold mt-4 mb-px" },
+  { number: 2, tag: "H2", nameKey: "tools.header.heading2", name: "Heading 2", icon: Pe, styles: "text-3xl font-semibold mt-6 mb-px" },
+  { number: 3, tag: "H3", nameKey: "tools.header.heading3", name: "Heading 3", icon: He, styles: "text-2xl font-semibold mt-4 mb-px" },
   { number: 4, tag: "H4", nameKey: "tools.header.heading4", name: "Heading 4", icon: _e, styles: "text-xl font-semibold mt-3 mb-px" },
   { number: 5, tag: "H5", nameKey: "tools.header.heading5", name: "Heading 5", icon: Oe, styles: "text-base font-semibold mt-3 mb-px" },
   { number: 6, tag: "H6", nameKey: "tools.header.heading6", name: "Heading 6", icon: Me, styles: "text-sm font-semibold mt-3 mb-px" }
@@ -728,7 +728,7 @@ const z = 24, rn = "outline-none py-[3px] mt-[2px] mb-px", ln = "outline-none pl
     return !1;
   const e = Object.entries(i).find(([n]) => n === "items");
   return e === void 0 ? !1 : Array.isArray(e[1]);
-}, Ln = (i) => typeof i == "object" && i !== null, Bn = (i) => typeof i == "string" ? i : "", In = (i, t) => i === "unordered" || i === "ordered" || i === "checklist" ? i : t, Nn = (i) => !!i, Dn = (i, t) => typeof i == "number" ? i : t, Hn = (i, t) => {
+}, Ln = (i) => typeof i == "object" && i !== null, Bn = (i) => typeof i == "string" ? i : "", In = (i, t) => i === "unordered" || i === "ordered" || i === "checklist" ? i : t, Nn = (i) => !!i, Dn = (i, t) => typeof i == "number" ? i : t, Pn = (i, t) => {
   const e = t.defaultStyle || "unordered";
   if (!i || typeof i != "object")
     return {
@@ -822,7 +822,7 @@ class ce {
     return n ? Math.round(parseInt(n[1], 10) / z) : 0;
   }
 }
-const Pn = (i, t) => {
+const Hn = (i, t) => {
   if (!i) return null;
   if (t === "checklist") {
     const n = i.querySelector("[contenteditable]");
@@ -849,7 +849,7 @@ const Pn = (i, t) => {
     n.style
   );
   return l === null ? 1 : o.getBlockStartValue(l);
-}, Ht = (i, t, e, n, s, o) => {
+}, Pt = (i, t, e, n, s, o) => {
   const l = Mn(i, t, n, e, s, o) + i;
   return o.formatNumber(l, t);
 }, Wn = (i, t, e, n) => n.findGroupStart(i, t, e), ue = (i, t, e, n) => {
@@ -1412,7 +1412,7 @@ const Yn = (i) => i instanceof HTMLElement, Zn = /* @__PURE__ */ new Set([
     style: "unordered",
     checked: !1
   })
-}), Pt = [
+}), Ht = [
   {
     name: "bulletedList",
     titleKey: "bulletedList",
@@ -1471,11 +1471,11 @@ class vo {
     return typeof t == "object" && t !== null && "event" in t && typeof t.event == "object" && t.event !== null && "type" in t.event && typeof t.event.type == "string";
   }
   normalizeData(t) {
-    return Hn(t, this._settings);
+    return Pn(t, this._settings);
   }
   get availableStyles() {
     const t = this._settings.styles;
-    return !t || t.length === 0 ? Pt : Pt.filter((e) => t.includes(e.style));
+    return !t || t.length === 0 ? Ht : Ht.filter((e) => t.includes(e.style));
   }
   get itemColor() {
     return this._settings.itemColor;
@@ -1535,7 +1535,7 @@ class vo {
     const t = (o = this._element) == null ? void 0 : o.querySelector("[data-list-marker]");
     if (!t)
       return;
-    const e = this.getDepth(), n = Dt(this.blockId, e, this._data.style, this.api.blocks, this.markerCalculator), s = Ht(n, e, this._data, this.blockId, this.api.blocks, this.markerCalculator);
+    const e = this.getDepth(), n = Dt(this.blockId, e, this._data.style, this.api.blocks, this.markerCalculator), s = Pt(n, e, this._data, this.blockId, this.api.blocks, this.markerCalculator);
     t.textContent = s;
   }
   updateSiblingListMarkers() {
@@ -1548,7 +1548,7 @@ class vo {
     const n = (s = this._element) == null ? void 0 : s.querySelector('[aria-hidden="true"]');
     if (n instanceof HTMLElement)
       if (e === "ordered") {
-        const o = Dt(this.blockId, t, this._data.style, this.api.blocks, this.markerCalculator), r = Ht(o, t, this._data, this.blockId, this.api.blocks, this.markerCalculator);
+        const o = Dt(this.blockId, t, this._data.style, this.api.blocks, this.markerCalculator), r = Pt(o, t, this._data, this.blockId, this.api.blocks, this.markerCalculator);
         n.textContent = r;
       } else {
         const o = On(t, this.markerCalculator);
@@ -1638,7 +1638,7 @@ class vo {
     e instanceof HTMLInputElement && (this._data.checked = e.checked);
   }
   getContentElement() {
-    return Pn(this._element, this._data.style);
+    return Hn(this._element, this._data.style);
   }
   renderSettings() {
     return vn(this.availableStyles, this._data.style, this.api.i18n.t, (t) => this.setStyle(t));
@@ -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;
@@ -1886,7 +1886,7 @@ class ds {
     e && (e.setAttribute("width", $t), e.setAttribute("height", $t), e.setAttribute("viewBox", "0 0 24 24"), e.classList.add("text-gray-500", "pointer-events-none"));
   }
 }
-const g = "data-blok-table-row", u = "data-blok-table-cell", P = 1, nt = `${P}px solid #d1d5db`, hs = [
+const g = "data-blok-table-row", u = "data-blok-table-cell", H = 1, nt = `${H}px solid #d1d5db`, hs = [
   "flex"
 ], us = [
   "py-1",
@@ -2189,7 +2189,7 @@ class fs {
         return;
       const d = c.getAttribute("data-blok-id");
       d && this.api.caret.setToBlock(d, "end");
-    }, this.api = t.api, this.gridElement = t.gridElement, this.onNavigateToCell = t.onNavigateToCell, this.api.events.on("block changed", this.handleBlockMutation), this.gridElement.addEventListener("click", this.handleCellBlankSpaceClick);
+    }, this.api = t.api, this.gridElement = t.gridElement, this.tableBlockId = t.tableBlockId, this.onNavigateToCell = t.onNavigateToCell, this.api.events.on("block changed", this.handleBlockMutation), this.gridElement.addEventListener("click", this.handleCellBlankSpaceClick);
   }
   /**
    * Get the currently active cell that contains blocks
@@ -2314,7 +2314,7 @@ class fs {
           a.push({ blocks: f });
         else {
           const m = typeof c == "string" ? c : "", C = this.api.blocks.insert("paragraph", { text: m }, {}, this.api.blocks.getBlocksCount(), !1);
-          p.appendChild(C.holder), a.push({ blocks: [C.id] });
+          p.appendChild(C.holder), this.api.blocks.setBlockParent(C.id, this.tableBlockId), a.push({ blocks: [C.id] });
         }
         this.stripPlaceholders(p);
       }), n.push(a);
@@ -2342,7 +2342,7 @@ class fs {
       if (o === void 0)
         continue;
       const r = this.api.blocks.getBlockByIndex(o);
-      r && (t.appendChild(r.holder), n.push(s));
+      r && (t.appendChild(r.holder), this.api.blocks.setBlockParent(s, this.tableBlockId), n.push(s));
     }
     return n;
   }
@@ -2357,7 +2357,7 @@ class fs {
     if (s === void 0)
       return;
     const o = this.api.blocks.getBlockByIndex(s);
-    o && (n.appendChild(o.holder), this.stripPlaceholders(n));
+    o && (n.appendChild(o.holder), this.api.blocks.setBlockParent(e, this.tableBlockId), this.stripPlaceholders(n));
   }
   /**
    * Given a new block's index, find which cell it should belong to
@@ -2386,7 +2386,7 @@ class fs {
     if (!e || e.querySelector("[data-blok-id]") !== null)
       return;
     const s = this.api.blocks.insert("paragraph", { text: "" }, {}, this.api.blocks.getBlocksCount(), !0);
-    e.appendChild(s.holder), this.stripPlaceholders(e);
+    e.appendChild(s.holder), this.api.blocks.setBlockParent(s.id, this.tableBlockId), this.stripPlaceholders(e);
   }
   /**
    * If the removed block's holder is currently inside a cell of this table,
@@ -2714,7 +2714,7 @@ const U = (i) => {
   );
 }, ct = (i, t) => {
   const e = t.reduce((o, r) => o + r, 0), n = i;
-  n.style.width = `${e + P}px`, i.querySelectorAll(`[${g}]`).forEach((o) => {
+  n.style.width = `${e + H}px`, i.querySelectorAll(`[${g}]`).forEach((o) => {
     o.querySelectorAll(`[${u}]`).forEach((l, a) => {
       if (a < t.length) {
         const c = l;
@@ -2785,7 +2785,7 @@ const U = (i) => {
     return [];
   const s = i.querySelectorAll(`[${g}]`)[e];
   return s ? (o = t == null ? void 0 : t.getBlockIdsFromCells(s.querySelectorAll(`[${u}]`))) != null ? o : [] : [];
-}, Hs = (i, t, e) => {
+}, Ps = (i, t, e) => {
   var o;
   if (!i)
     return [];
@@ -2814,7 +2814,7 @@ const U = (i) => {
   i.querySelectorAll(`[${u}]`).forEach((n) => {
     t == null || t.ensureCellHasBlock(n);
   });
-}, Ps = (i, t, e) => {
+}, Hs = (i, t, e) => {
   const n = i.querySelectorAll(`[${g}]`);
   t.forEach((s, o) => {
     const r = n[o];
@@ -2929,7 +2929,7 @@ class Gs {
   }
   createHandle(t) {
     const e = document.createElement("div"), n = this.getHandleLeftPx(t);
-    return e.setAttribute(Ft, ""), e.setAttribute("data-col", String(t)), e.style.position = "absolute", e.style.top = `-${P}px`, e.style.bottom = "0px", e.style.width = `${Ct}px`, e.style.left = `${n - Ct / 2}px`, e.style.cursor = "col-resize", e.style.zIndex = "2", e.style.background = "linear-gradient(to right, transparent 7px, #3b82f6 7px, #3b82f6 9px, transparent 9px)", e.style.opacity = "0", e.style.transition = "opacity 150ms ease", e.setAttribute("contenteditable", "false"), e.addEventListener("mouseenter", () => {
+    return e.setAttribute(Ft, ""), e.setAttribute("data-col", String(t)), e.style.position = "absolute", e.style.top = `-${H}px`, e.style.bottom = "0px", e.style.width = `${Ct}px`, e.style.left = `${n - Ct / 2}px`, e.style.cursor = "col-resize", e.style.zIndex = "2", e.style.background = "linear-gradient(to right, transparent 7px, #3b82f6 7px, #3b82f6 9px, transparent 9px)", e.style.opacity = "0", e.style.transition = "opacity 150ms ease", e.setAttribute("contenteditable", "false"), e.addEventListener("mouseenter", () => {
       this.isDragging || (e.style.opacity = "1");
     }), e.addEventListener("mouseleave", () => {
       this.isDragging || (e.style.opacity = "0");
@@ -2971,7 +2971,7 @@ class Gs {
   }
   applyWidths() {
     const t = this.colWidths.reduce((n, s) => n + s, 0);
-    this.gridEl.style.width = `${t + P}px`, this.gridEl.querySelectorAll(`[${Ws}]`).forEach((n) => {
+    this.gridEl.style.width = `${t + H}px`, this.gridEl.querySelectorAll(`[${Ws}]`).forEach((n) => {
       n.querySelectorAll(`[${Ms}]`).forEach((o, r) => {
         if (r < this.colWidths.length) {
           const l = o;
@@ -3138,10 +3138,10 @@ class js {
     this.dropIndicator = document.createElement("div");
     const t = this.dropIndicator.style;
     if (t.position = "absolute", t.backgroundColor = "#3b82f6", t.borderRadius = "1.5px", t.zIndex = "5", t.pointerEvents = "none", this.dropIndicator.setAttribute("contenteditable", "false"), this.dragType === "row")
-      t.height = "3px", t.left = `${-P}px`, t.right = "0", t.transition = "top 100ms ease";
+      t.height = "3px", t.left = `${-H}px`, t.right = "0", t.transition = "top 100ms ease";
     else {
       const e = this.grid.querySelectorAll(`[${g}]`), n = e[e.length - 1], s = n ? n.offsetTop + n.offsetHeight : 0;
-      t.width = "3px", t.top = `${-P}px`, t.height = `${s + P}px`, t.transition = "left 100ms ease";
+      t.width = "3px", t.top = `${-H}px`, t.height = `${s + H}px`, t.transition = "left 100ms ease";
     }
     this.grid.appendChild(this.dropIndicator);
   }
@@ -3530,12 +3530,12 @@ class ao {
       if (o + 1 >= n.length)
         return;
       const r = (n[o] + n[o + 1]) / 2, l = s.style;
-      l.top = `${-P / 2}px`, l.left = `${r}px`;
+      l.top = `${-H / 2}px`, l.left = `${r}px`;
     }), this.rowGrips.forEach((s, o) => {
       if (o >= t.length)
         return;
       const r = t[o], l = r.offsetTop + r.offsetHeight / 2, a = s.style;
-      a.left = `${-P / 2}px`, a.top = `${l}px`;
+      a.left = `${-H / 2}px`, a.top = `${l}px`;
     });
   }
   /**
@@ -3745,7 +3745,7 @@ class So {
     const t = this.element.firstElementChild;
     if (t) {
       if (this.readOnly) {
-        Ps(t, this.data.content, this.api);
+        Hs(t, this.data.content, this.api);
         return;
       }
       if (this.data.content = (n = (e = this.cellBlocks) == null ? void 0 : e.initializeCells(this.data.content)) != null ? n : this.data.content, this.isNewTable && G(t, this.cellBlocks), this.data.initialColWidth === void 0) {
@@ -3810,7 +3810,7 @@ class So {
     return Ds(this.element, this.cellBlocks, t);
   }
   getBlockIdsInColumn(t) {
-    return Hs(this.element, this.cellBlocks, t);
+    return Ps(this.element, this.cellBlocks, t);
   }
   initAddControls(t) {
     var n;
@@ -4140,7 +4140,7 @@ const q = (i) => {
    */
   synchronize(t) {
     var r, l;
-    const e = (r = t == null ? void 0 : t.anchorNode) != null ? r : t == null ? void 0 : t.focusNode, n = e && e.nodeType === Node.ELEMENT_NODE ? e : e == null ? void 0 : e.parentElement, s = (l = n == null ? void 0 : n.closest(H(E.editor))) != null ? l : n == null ? void 0 : n.ownerDocument;
+    const e = (r = t == null ? void 0 : t.anchorNode) != null ? r : t == null ? void 0 : t.focusNode, n = e && e.nodeType === Node.ELEMENT_NODE ? e : e == null ? void 0 : e.parentElement, s = (l = n == null ? void 0 : n.closest(P(E.editor))) != null ? l : n == null ? void 0 : n.ownerDocument;
     if (!s)
       return;
     const o = `strong[${S.COLLAPSED_ACTIVE}="true"]`;
@@ -4178,7 +4178,7 @@ const q = (i) => {
     const e = (r = t == null ? void 0 : t.anchorNode) != null ? r : t == null ? void 0 : t.focusNode;
     if (!e)
       return;
-    const n = e.nodeType === Node.ELEMENT_NODE ? e : e.parentElement, s = n == null ? void 0 : n.closest(H(E.editor));
+    const n = e.nodeType === Node.ELEMENT_NODE ? e : e.parentElement, s = n == null ? void 0 : n.closest(P(E.editor));
     if (!s)
       return;
     s.querySelectorAll(`strong[${S.COLLAPSED_LENGTH}]`).forEach((l) => {
@@ -4513,8 +4513,8 @@ class R {
     const n = e.nodeType === Node.ELEMENT_NODE ? e : e.parentElement;
     if (!n)
       return null;
-    const s = (l = n.closest('[data-blok-component="paragraph"]')) != null ? l : n.closest(H(E.elementContent));
-    return s || n.closest(H(E.editor));
+    const s = (l = n.closest('[data-blok-component="paragraph"]')) != null ? l : n.closest(P(E.elementContent));
+    return s || n.closest(P(E.editor));
   }
 }
 const T = class T {
@@ -4921,7 +4921,7 @@ const Co = (i, t) => {
     const t = window.getSelection();
     if (!t)
       return;
-    const e = t.anchorNode, n = (e == null ? void 0 : e.nodeType) === Node.ELEMENT_NODE ? e : e == null ? void 0 : e.parentElement, s = n == null ? void 0 : n.closest(H(E.editor));
+    const e = t.anchorNode, n = (e == null ? void 0 : e.nodeType) === Node.ELEMENT_NODE ? e : e == null ? void 0 : e.parentElement, s = n == null ? void 0 : n.closest(P(E.editor));
     if (!s)
       return;
     const o = s.querySelector("[data-blok-testid=inline-toolbar]");
@@ -4976,7 +4976,7 @@ const Co = (i, t) => {
    */
   static findBlokScopeFromNode(t) {
     const e = t.nodeType === Node.ELEMENT_NODE ? t : t.parentElement;
-    return !e || typeof e.closest != "function" ? null : e.closest(`${H(E.interface)}, ${H(E.editor)}`);
+    return !e || typeof e.closest != "function" ? null : e.closest(`${P(E.interface)}, ${P(E.editor)}`);
   }
   /**
    * Get a bold element at the boundary of a collapsed range
@@ -5020,7 +5020,7 @@ const Co = (i, t) => {
     if (!e)
       return !1;
     const n = e.nodeType === Node.ELEMENT_NODE ? e : e.parentElement;
-    return !!(n != null && n.closest(H(E.editor)));
+    return !!(n != null && n.closest(P(E.editor)));
   }
   /**
    * Get HTML content of a range with bold tags removed
@@ -5366,7 +5366,7 @@ const j = class j {
    */
   getButtonElement() {
     const t = document.querySelector(
-      `${H(E.interface, Qe)} [data-blok-item-name="link"]`
+      `${P(E.interface, Qe)} [data-blok-item-name="link"]`
     );
     return t && t !== this.nodes.button && (t.addEventListener("click", this.handleButtonClick, !0), this.nodes.button = t), t;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackuait/blok",
-  "version": "0.6.0-beta.6",
+  "version": "0.6.0-beta.8",
   "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/api/blocks.ts

@@ -38,6 +38,7 @@ export class BlocksAPI extends Module {
       update: this.update,
       composeBlockData: this.composeBlockData,
       convert: this.convert,
+      setBlockParent: (blockId: string, parentId: string | null): void => this.setBlockParent(blockId, parentId),
       stopBlockMutationWatching: (index: number): void => this.stopBlockMutationWatching(index),
       splitBlock: this.splitBlock,
     };
@@ -376,6 +377,23 @@ export class BlocksAPI extends Module {
     return blocksToInsert.map((block) => new BlockAPI(block));
   };
 
+  /**
+   * Sets the parent of a block, updating both the block's parentId and the parent's contentIds.
+   * @param blockId - id of the block to reparent
+   * @param parentId - id of the new parent block, or null for root level
+   */
+  private setBlockParent(blockId: string, parentId: string | null): void {
+    const block = this.Blok.BlockManager.getBlockById(blockId);
+
+    if (block === undefined) {
+      logLabeled('There is no block with id `' + blockId + '`', 'warn');
+
+      return;
+    }
+
+    this.Blok.BlockManager.setBlockParent(block, parentId);
+  }
+
   /**
    * Stops mutation watching on a block at the specified index.
    * This is used to prevent spurious block-changed events during block replacement.

package/src/components/modules/rectangleSelection.ts

@@ -140,11 +140,14 @@ 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. Uses UI.contentRect which queries the first block's
+     * content element and caches the result.
      */
-    const withinEditorHorizontally = pointerX >= editorRect.left && pointerX <= editorRect.right;
+    const contentRect = this.Blok.UI.contentRect;
+    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;
         }
 
@@ -326,13 +335,14 @@ export class Toolbar extends Module<ToolbarNodes> {
       return;
     }
 
-    const targetBlock = this.resolveTableCellBlock(unresolvedBlock);
-
-    if (!targetBlock) {
-      this.close();
+    /**
+     * Track whether the original block is inside a table cell.
+     * Check the DOM directly rather than relying on resolution success,
+     * so that the flag is correct even when resolution falls back to the original block.
+     */
+    this.hoveredBlockIsFromTableCell = unresolvedBlock.holder.closest('[data-blok-table-cell-blocks]') !== null;
 
-      return;
-    }
+    const targetBlock = this.resolveTableCellBlock(unresolvedBlock);
 
     /** Clean up draggable on previous block if any */
     if (this.hoveredBlock && this.hoveredBlock !== targetBlock) {
@@ -351,6 +361,19 @@ 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.
+     */
+    const displayValue = this.hoveredBlockIsFromTableCell ? 'none' : '';
+
+    plusButton.style.display = displayValue;
+
+    if (settingsToggler) {
+      settingsToggler.style.display = displayValue;
+    }
+
     const targetBlockHolder = targetBlock.holder;
     const { isMobile } = this.Blok.UI;
 
@@ -456,12 +479,22 @@ export class Toolbar extends Module<ToolbarNodes> {
     this.positioner.setHoveredTarget(null); // No target for multi-block selection
     this.positioner.resetCachedPosition(); // Reset cached position when moving to a new block
 
-    const { wrapper, plusButton } = this.nodes;
+    const { wrapper, plusButton, settingsToggler } = this.nodes;
 
     if (!wrapper || !plusButton) {
       return;
     }
 
+    /**
+     * Restore plus button and settings toggler visibility for multi-block selection,
+     * in case they were hidden for table cell blocks.
+     */
+    plusButton.style.display = '';
+
+    if (settingsToggler) {
+      settingsToggler.style.display = '';
+    }
+
     const targetBlockHolder = targetBlock.holder;
 
     const toolbarY = this.positioner.calculateToolbarY(
@@ -476,9 +509,6 @@ export class Toolbar extends Module<ToolbarNodes> {
     this.positioner.moveToY(this.nodes, toolbarY);
     targetBlockHolder.appendChild(wrapper);
 
-    /** Set up draggable on the target block using the settings toggler as drag handle */
-    const { settingsToggler } = this.nodes;
-
     if (settingsToggler && !this.Blok.ReadOnly.isEnabled) {
       targetBlock.setupDraggable(settingsToggler, this.Blok.DragManager);
     }
@@ -521,18 +551,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 +602,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 +614,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]');