@jackuait/blok 0.10.1 → 0.10.2

package/dist/blok.mjs

@@ -1,3 +1,3 @@
-import { n as e, t } from "./chunks/blok-u_68bnlk.mjs";
-import { nr as n } from "./chunks/constants-VDhCUk4c.mjs";
+import { n as e, t } from "./chunks/blok-D-T1XZ92.mjs";
+import { nr as n } from "./chunks/constants-CaB-mlB5.mjs";
 export { t as Blok, n as DATA_ATTR, e as version };

package/dist/chunks/{blok-u_68bnlk.mjs → blok-D-T1XZ92.mjs}

@@ -1,5 +1,5 @@
 import { t as e } from "./chunk-D6kmoKXy.mjs";
-import { $n as t, $t as n, An as r, Bn as i, C as a, Cn as o, Dn as s, E as c, Fn as l, Gn as u, Hn as d, Ht as f, In as p, Jn as m, Jt as h, Kn as g, Ln as _, Mn as ee, Nn as te, On as v, Pn as ne, Pt as re, Qn as ie, Qt as ae, Rn as oe, S as se, Sn as ce, T as le, Tn as ue, Un as de, Ut as fe, Vn as pe, Wn as me, Xn as y, Xt as he, Yn as ge, Yt as _e, Zn as b, Zt as ve, _ as ye, _n as be, _t as xe, an as Se, b as x, bn as Ce, bt as we, cn as Te, en as Ee, er as S, fn as De, g as Oe, gn as ke, h as Ae, hn as je, in as Me, j as Ne, jn as Pe, jt as Fe, kn as Ie, m as Le, mn as Re, nn as ze, nr as C, on as w, p as Be, pn as Ve, pt as He, qn as Ue, qt as We, rn as Ge, rr as T, sn as E, tn as Ke, tr as qe, u as Je, un as Ye, v as Xe, vn as Ze, w as Qe, wn as $e, x as et, xn as tt, y as nt, yn as rt, zn as it, zt as at } from "./constants-VDhCUk4c.mjs";
+import { $n as t, $t as n, An as r, Bn as i, C as a, Cn as o, Dn as s, E as c, Fn as l, Gn as u, Hn as d, Ht as f, In as p, Jn as m, Jt as h, Kn as g, Ln as _, Mn as ee, Nn as te, On as v, Pn as ne, Pt as re, Qn as ie, Qt as ae, Rn as oe, S as se, Sn as ce, T as le, Tn as ue, Un as de, Ut as fe, Vn as pe, Wn as me, Xn as y, Xt as he, Yn as ge, Yt as _e, Zn as b, Zt as ve, _ as ye, _n as be, _t as xe, an as Se, b as x, bn as Ce, bt as we, cn as Te, en as Ee, er as S, fn as De, g as Oe, gn as ke, h as Ae, hn as je, in as Me, j as Ne, jn as Pe, jt as Fe, kn as Ie, m as Le, mn as Re, nn as ze, nr as C, on as w, p as Be, pn as Ve, pt as He, qn as Ue, qt as We, rn as Ge, rr as T, sn as E, tn as Ke, tr as qe, u as Je, un as Ye, v as Xe, vn as Ze, w as Qe, wn as $e, x as et, xn as tt, y as nt, yn as rt, zn as it, zt as at } from "./constants-CaB-mlB5.mjs";
 import { n as ot, t as D } from "./objectSpread2-CWwMYL_U.mjs";
 import { n as O, t as st } from "./tw-CqxBf-1Y.mjs";
 import { r as ct, t as lt } from "./lightweight-i18n-DZmo8dAI.mjs";
@@ -10802,9 +10802,9 @@ var Dd = {
 		this.Blok.BlockManager.blocks.length === 1 && a.isEmpty && !ee ? this.blockTunesToggler.hide() : this.blockTunesToggler.show(), this.open();
 		let te = a.name === "header" && a.holder.querySelector("[data-blok-toggle-arrow]") !== null;
 		if ((a.name === "callout" || a.name === "toggle" || te) && this.nodes.actions && (this.nodes.actions.style.pointerEvents = "none", this.restoreSettingsTogglerForLeftEdgeBlock(a)), g && this.nodes.content) {
-			var v, ne;
-			let e = parseFloat(getComputedStyle(g).marginLeft) || 0, t = (v = (ne = this.nodes.actions) == null ? void 0 : ne.offsetWidth) == null ? 0 : v;
-			this.nodes.content.style.marginLeft = `${Math.max(e, t)}px`;
+			var v, ne, re;
+			let e = (v = this.nodes.wrapper) == null ? void 0 : v.getBoundingClientRect(), t = g.getBoundingClientRect(), n = e ? Math.max(0, t.left - e.left) : 0, r = (ne = (re = this.nodes.actions) == null ? void 0 : re.offsetWidth) == null ? 0 : ne;
+			this.nodes.content.style.marginLeft = `${Math.max(n, r)}px`, this.nodes.content.style.maxWidth = `${t.width}px`;
 		}
 	}
 	moveAndOpenForMultipleBlocks(e) {
@@ -10830,14 +10830,14 @@ var Dd = {
 		this.positioner.moveToY(this.nodes, s), o.appendChild(r), a && !this.Blok.ReadOnly.isEnabled && n.setupDraggable(a, this.Blok.DragManager);
 		let c = o.querySelector(`[${C.elementContent}]`);
 		if (c && this.toolboxInstance.updateLeftAlignElement(c), this.positioner.applyContentOffset(this.nodes, n), this.blockTunesToggler.show(), this.open(), c && this.nodes.content) {
-			var l, u;
-			let e = parseFloat(getComputedStyle(c).marginLeft) || 0, t = (l = (u = this.nodes.actions) == null ? void 0 : u.offsetWidth) == null ? 0 : l;
-			this.nodes.content.style.marginLeft = `${Math.max(e, t)}px`;
+			var l, u, d;
+			let e = (l = this.nodes.wrapper) == null ? void 0 : l.getBoundingClientRect(), t = c.getBoundingClientRect(), n = e ? Math.max(0, t.left - e.left) : 0, r = (u = (d = this.nodes.actions) == null ? void 0 : d.offsetWidth) == null ? 0 : u;
+			this.nodes.content.style.marginLeft = `${Math.max(n, r)}px`, this.nodes.content.style.maxWidth = `${t.width}px`;
 		}
 	}
 	close(e) {
 		var t, n, r, i;
-		this.Blok.ReadOnly.isEnabled || ((t = this.nodes.wrapper) == null || t.classList.remove(this.CSS.toolbarOpened), (n = this.nodes.wrapper) == null || n.classList.add(this.CSS.toolbarClosed), (r = this.nodes.wrapper) == null || r.removeAttribute("data-blok-opened"), this.blockActions.hide(), (i = this.toolboxInstance) == null || i.close(), this.Blok.BlockSettings.close(), this.hoveredBlock = null, this.hoveredBlockIsFromTableCell = !1, (e == null ? void 0 : e.setExplicitlyClosed) !== !1 && (this.explicitlyClosed = !0, this.Blok.UI.resetBlockHoverState()), this.nodes.plusButton && (this.nodes.plusButton.style.display = "", this.nodes.plusButton.style.color = ""), this.nodes.settingsToggler && (this.nodes.settingsToggler.style.display = "", this.nodes.settingsToggler.style.color = ""), this.nodes.actions && (this.nodes.actions.style.transform = ""), this.nodes.content && (this.nodes.content.style.marginLeft = ""), this.positioner.setHoveredTarget(null), this.reset());
+		this.Blok.ReadOnly.isEnabled || ((t = this.nodes.wrapper) == null || t.classList.remove(this.CSS.toolbarOpened), (n = this.nodes.wrapper) == null || n.classList.add(this.CSS.toolbarClosed), (r = this.nodes.wrapper) == null || r.removeAttribute("data-blok-opened"), this.blockActions.hide(), (i = this.toolboxInstance) == null || i.close(), this.Blok.BlockSettings.close(), this.hoveredBlock = null, this.hoveredBlockIsFromTableCell = !1, (e == null ? void 0 : e.setExplicitlyClosed) !== !1 && (this.explicitlyClosed = !0, this.Blok.UI.resetBlockHoverState()), this.nodes.plusButton && (this.nodes.plusButton.style.display = "", this.nodes.plusButton.style.color = ""), this.nodes.settingsToggler && (this.nodes.settingsToggler.style.display = "", this.nodes.settingsToggler.style.color = ""), this.nodes.actions && (this.nodes.actions.style.transform = ""), this.nodes.content && (this.nodes.content.style.marginLeft = "", this.nodes.content.style.maxWidth = ""), this.positioner.setHoveredTarget(null), this.reset());
 	}
 	skipNextSettingsToggle() {
 		this.settingsTogglerHandler.skipNextToggle();

package/dist/chunks/{constants-VDhCUk4c.mjs → constants-CaB-mlB5.mjs}

@@ -130,7 +130,7 @@ var a = {
 	RIGHT: 2,
 	BACKWARD: 3,
 	FORWARD: 4
-}, l = () => "0.10.1", u = /* @__PURE__ */ function(e) {
+}, l = () => "0.10.2", u = /* @__PURE__ */ function(e) {
 	return e.VERBOSE = "VERBOSE", e.INFO = "INFO", e.WARN = "WARN", e.ERROR = "ERROR", e;
 }({}), d = (e, t, n = "log", r, i = "color: inherit") => {
 	let a = typeof console > "u" ? void 0 : console;

package/dist/chunks/{tools-1ZFajlGN.mjs → tools-BFK2MvVI.mjs}

@@ -1,4 +1,4 @@
-import { $ as e, A as t, At as n, B as r, Bt as i, Ct as a, D as o, Dt as s, En as c, Et as l, F as u, Ft as d, G as f, Gt as p, H as m, Ht as h, I as g, It as _, J as v, K as ee, Kt as y, L as b, Lt as x, M as S, Mt as te, N as ne, Nt as re, O as ie, Ot as ae, P as oe, Q as se, R as ce, Rt as le, St as ue, Tt as de, U as fe, Ut as pe, V as me, Vt as he, W as ge, Wt as _e, X as ve, Xn as ye, Xt as be, Y as xe, Z as Se, _t as Ce, a as we, at as Te, c as Ee, ct as De, d as Oe, dn as ke, dt as Ae, en as je, et as Me, f as Ne, ft as Pe, g as Fe, gt as Ie, h as Le, ht as Re, i as ze, it as Be, jt as Ve, k as He, kt as Ue, l as We, lt as Ge, mt as Ke, n as qe, nn as Je, nr as C, nt as Ye, o as Xe, on as w, ot as Ze, p as Qe, q as $e, qt as et, r as tt, rn as nt, rr as T, rt, s as it, sn as at, st as ot, t as st, tn as E, tt as ct, u as D, un as lt, ut, v as dt, vt as ft, wt as pt, xt as mt, yt as ht, z as gt, zt as _t } from "./constants-VDhCUk4c.mjs";
+import { $ as e, A as t, At as n, B as r, Bt as i, Ct as a, D as o, Dt as s, En as c, Et as l, F as u, Ft as d, G as f, Gt as p, H as m, Ht as h, I as g, It as _, J as v, K as ee, Kt as y, L as b, Lt as x, M as S, Mt as te, N as ne, Nt as re, O as ie, Ot as ae, P as oe, Q as se, R as ce, Rt as le, St as ue, Tt as de, U as fe, Ut as pe, V as me, Vt as he, W as ge, Wt as _e, X as ve, Xn as ye, Xt as be, Y as xe, Z as Se, _t as Ce, a as we, at as Te, c as Ee, ct as De, d as Oe, dn as ke, dt as Ae, en as je, et as Me, f as Ne, ft as Pe, g as Fe, gt as Ie, h as Le, ht as Re, i as ze, it as Be, jt as Ve, k as He, kt as Ue, l as We, lt as Ge, mt as Ke, n as qe, nn as Je, nr as C, nt as Ye, o as Xe, on as w, ot as Ze, p as Qe, q as $e, qt as et, r as tt, rn as nt, rr as T, rt, s as it, sn as at, st as ot, t as st, tn as E, tt as ct, u as D, un as lt, ut, v as dt, vt as ft, wt as pt, xt as mt, yt as ht, z as gt, zt as _t } from "./constants-CaB-mlB5.mjs";
 import { t as O } from "./objectSpread2-CWwMYL_U.mjs";
 import { n as k } from "./tw-CqxBf-1Y.mjs";
 //#region src/components/utils/html.ts
@@ -7257,7 +7257,7 @@ var Ls = 1500, Rs = class {
 		return e.code.trim() !== "";
 	}
 	merge(e) {
-		this._data.code += "\n" + e.code, this._dom && (this._dom.codeElement.textContent = this._data.code), this.highlightCode();
+		this._data.code += "\n" + e.code, this._dom && (this._dom.codeElement.textContent = this._data.code, this.syncTrailingBr(), this.updateGutter()), this.highlightCode();
 	}
 	renderSettings() {
 		let e = this._data.language, t = this._detectedLanguage, n = t !== null && t !== e, r = [];
@@ -7296,7 +7296,7 @@ var Ls = 1500, Rs = class {
 				this._data.code = t;
 			}
 		}
-		this._dom && (this._dom.codeElement.textContent = this._data.code), this.highlightCode();
+		this._dom && (this._dom.codeElement.textContent = this._data.code, this.syncTrailingBr(), this.updateGutter()), this.highlightCode();
 	}
 	setLanguage(e) {
 		this._data.language = e;

package/dist/full.mjs

@@ -1,7 +1,7 @@
-import { n as e, t } from "./chunks/blok-u_68bnlk.mjs";
-import { nr as n } from "./chunks/constants-VDhCUk4c.mjs";
+import { n as e, t } from "./chunks/blok-D-T1XZ92.mjs";
+import { nr as n } from "./chunks/constants-CaB-mlB5.mjs";
 import { t as r } from "./chunks/objectSpread2-CWwMYL_U.mjs";
-import { _ as i, a, c as o, g as s, i as c, l, m as u, n as d, o as f, s as p, t as m, v as h } from "./chunks/tools-1ZFajlGN.mjs";
+import { _ as i, a, c as o, g as s, i as c, l, m as u, n as d, o as f, s as p, t as m, v as h } from "./chunks/tools-BFK2MvVI.mjs";
 //#region src/full.ts
 var g = {
 	paragraph: {

package/dist/react.mjs

@@ -1,5 +1,5 @@
-import { t as e } from "./chunks/blok-u_68bnlk.mjs";
-import "./chunks/constants-VDhCUk4c.mjs";
+import { t as e } from "./chunks/blok-D-T1XZ92.mjs";
+import "./chunks/constants-CaB-mlB5.mjs";
 import { t } from "./chunks/objectSpread2-CWwMYL_U.mjs";
 import { t as n } from "./chunks/objectWithoutProperties-D0XxKB4n.mjs";
 import { forwardRef as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";

package/dist/tools.mjs

@@ -1,3 +1,3 @@
-import { m as e } from "./chunks/constants-VDhCUk4c.mjs";
-import { _ as t, a as n, c as r, d as i, f as a, g as o, h as s, i as c, l, m as u, n as d, o as f, p, r as m, s as h, t as g, u as _, v } from "./chunks/tools-1ZFajlGN.mjs";
+import { m as e } from "./chunks/constants-CaB-mlB5.mjs";
+import { _ as t, a as n, c as r, d as i, f as a, g as o, h as s, i as c, l, m as u, n as d, o as f, p, r as m, s as h, t as g, u as _, v } from "./chunks/tools-BFK2MvVI.mjs";
 export { l as Bold, p as Callout, _ as Code, e as Convert, a as Divider, t as Header, m as InlineCode, r as Italic, h as Link, o as List, f as Marker, v as Paragraph, i as Quote, c as Strikethrough, s as Table, u as Toggle, n as Underline, g as defaultBlockTools, d as defaultInlineTools };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackuait/blok",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "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/toolbar/index.ts

@@ -526,19 +526,26 @@ export class Toolbar extends Module<ToolbarNodes> {
     }
 
     /**
-     * Sync toolbar content wrapper's margin with the block content element
-     * so toolbar buttons align with the block content edge, even when
-     * consumer CSS overrides the block content's margin.
+     * Sync toolbar content wrapper's position and width with the block content element
+     * so toolbar buttons align with the block content edge regardless of whether
+     * the consumer uses CSS margin or overrides max-width (e.g. wide-mode).
+     *
+     * Uses getBoundingClientRect to get the actual visual offset rather than reading
+     * CSS marginLeft, which does not account for cases where max-width is removed
+     * and the content fills the full container width.
      *
      * Uses Math.max to guarantee the actions container (positioned via right:100%)
      * never extends beyond the left edge of the viewport, which would make the
-      * drag handle unreachable by pointer events.
+     * drag handle unreachable by pointer events.
      */
     if (blockContentElement && this.nodes.content) {
-      const blockMarginLeft = parseFloat(getComputedStyle(blockContentElement).marginLeft) || 0;
+      const holderRect = this.nodes.wrapper?.getBoundingClientRect();
+      const contentRect = blockContentElement.getBoundingClientRect();
+      const visualOffset = holderRect ? Math.max(0, contentRect.left - holderRect.left) : 0;
       const actionsWidth = this.nodes.actions?.offsetWidth ?? 0;
 
-      this.nodes.content.style.marginLeft = `${Math.max(blockMarginLeft, actionsWidth)}px`;
+      this.nodes.content.style.marginLeft = `${Math.max(visualOffset, actionsWidth)}px`;
+      this.nodes.content.style.maxWidth = `${contentRect.width}px`;
     }
   }
 
@@ -659,14 +666,18 @@ export class Toolbar extends Module<ToolbarNodes> {
     this.open();
 
     /**
-     * Sync toolbar content wrapper's margin with the block content element.
+     * Sync toolbar content wrapper's position and width with the block content element.
+     * Uses getBoundingClientRect so wide-mode content (max-width: none) is handled correctly.
      * Clamp to actionsWidth so actions never extend beyond the left viewport edge.
      */
     if (blockContentElement && this.nodes.content) {
-      const blockMarginLeft = parseFloat(getComputedStyle(blockContentElement).marginLeft) || 0;
+      const holderRect = this.nodes.wrapper?.getBoundingClientRect();
+      const contentRect = blockContentElement.getBoundingClientRect();
+      const visualOffset = holderRect ? Math.max(0, contentRect.left - holderRect.left) : 0;
       const actionsWidth = this.nodes.actions?.offsetWidth ?? 0;
 
-      this.nodes.content.style.marginLeft = `${Math.max(blockMarginLeft, actionsWidth)}px`;
+      this.nodes.content.style.marginLeft = `${Math.max(visualOffset, actionsWidth)}px`;
+      this.nodes.content.style.maxWidth = `${contentRect.width}px`;
     }
   }
 
@@ -732,6 +743,7 @@ export class Toolbar extends Module<ToolbarNodes> {
     }
     if (this.nodes.content) {
       this.nodes.content.style.marginLeft = '';
+      this.nodes.content.style.maxWidth = '';
     }
     this.positioner.setHoveredTarget(null);
 

package/src/tools/code/index.ts

@@ -286,6 +286,8 @@ export class CodeTool implements BlockTool {
 
     if (this._dom) {
       this._dom.codeElement.textContent = this._data.code;
+      this.syncTrailingBr();
+      this.updateGutter();
     }
 
     void this.highlightCode();
@@ -348,6 +350,8 @@ export class CodeTool implements BlockTool {
 
     if (this._dom) {
       this._dom.codeElement.textContent = this._data.code;
+      this.syncTrailingBr();
+      this.updateGutter();
     }
 
     void this.highlightCode();