@bloklabs/react 1.3.0 → 1.4.0

package/dist/index.mjs

@@ -1,52 +1,53 @@
-import { Component as e, createContext as t, forwardRef as n, isValidElement as r, useCallback as i, useContext as a, useEffect as o, useImperativeHandle as s, useMemo as c, useRef as l, useState as u, useSyncExternalStore as d } from "react";
-import { Blok as f } from "@bloklabs/core";
-import { DATA_ATTR as p, EMPTY_API as m, createBlocksApiForEditor as h, createEmittedEchoWindow as g, deepEqual as _, deepEqual as v, fillDefaults as y, mountChildBlocks as b, normalizeReadOnlyConfig as x } from "@bloklabs/core/adapters";
-import { Fragment as S, jsx as C } from "react/jsx-runtime";
-import { createPortal as w, flushSync as T } from "react-dom";
-import { createRoot as E } from "react-dom/client";
+import { Component as e, Fragment as t, createContext as n, createElement as r, forwardRef as i, isValidElement as a, useCallback as o, useContext as s, useEffect as c, useImperativeHandle as l, useMemo as u, useRef as d, useState as f, useSyncExternalStore as p } from "react";
+import { Blok as m } from "@bloklabs/core";
+import { DATA_ATTR as h, EMPTY_API as g, createBlocksApiForEditor as _, createEmittedEchoWindow as v, deepEqual as y, deepEqual as b, fillDefaults as x, markSanitizerConfig as S, mountChildBlocks as C, normalizeReadOnlyConfig as ee } from "@bloklabs/core/adapters";
+import { Fragment as w, jsx as T } from "react/jsx-runtime";
+import { createPortal as E, flushSync as D } from "react-dom";
+import { blocksToViewNodes as O } from "@bloklabs/core/view";
+import { createRoot as k } from "react-dom/client";
 //#region src/holder-map.ts
-var D = /* @__PURE__ */ new WeakMap();
-function ee(e, t) {
-	D.set(e, t);
+var A = /* @__PURE__ */ new WeakMap();
+function te(e, t) {
+	A.set(e, t);
 }
-function O(e) {
-	return D.get(e);
+function j(e) {
+	return A.get(e);
 }
-function k(e) {
-	D.delete(e);
+function M(e) {
+	A.delete(e);
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.139.0/helpers/esm/typeof.js
-function A(e) {
+function N(e) {
 	"@babel/helpers - typeof";
-	return A = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(e) {
+	return N = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(e) {
 		return typeof e;
 	} : function(e) {
 		return e && typeof Symbol == "function" && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-	}, A(e);
+	}, N(e);
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.139.0/helpers/esm/toPrimitive.js
-function j(e, t) {
-	if (A(e) != "object" || !e) return e;
+function P(e, t) {
+	if (N(e) != "object" || !e) return e;
 	var n = e[Symbol.toPrimitive];
 	if (n !== void 0) {
 		var r = n.call(e, t || "default");
-		if (A(r) != "object") return r;
+		if (N(r) != "object") return r;
 		throw TypeError("@@toPrimitive must return a primitive value.");
 	}
 	return (t === "string" ? String : Number)(e);
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.139.0/helpers/esm/toPropertyKey.js
-function M(e) {
-	var t = j(e, "string");
-	return A(t) == "symbol" ? t : t + "";
+function F(e) {
+	var t = P(e, "string");
+	return N(t) == "symbol" ? t : t + "";
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.139.0/helpers/esm/defineProperty.js
-function N(e, t, n) {
-	return (t = M(t)) in e ? Object.defineProperty(e, t, {
+function I(e, t, n) {
+	return (t = F(t)) in e ? Object.defineProperty(e, t, {
 		value: n,
 		enumerable: !0,
 		configurable: !0,
@@ -55,7 +56,7 @@ function N(e, t, n) {
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.139.0/helpers/esm/objectSpread2.js
-function P(e, t) {
+function L(e, t) {
 	var n = Object.keys(e);
 	if (Object.getOwnPropertySymbols) {
 		var r = Object.getOwnPropertySymbols(e);
@@ -65,12 +66,12 @@ function P(e, t) {
 	}
 	return n;
 }
-function F(e) {
+function R(e) {
 	for (var t = 1; t < arguments.length; t++) {
 		var n = arguments[t] == null ? {} : arguments[t];
-		t % 2 ? P(Object(n), !0).forEach(function(t) {
-			N(e, t, n[t]);
-		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : P(Object(n)).forEach(function(t) {
+		t % 2 ? L(Object(n), !0).forEach(function(t) {
+			I(e, t, n[t]);
+		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : L(Object(n)).forEach(function(t) {
 			Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
 		});
 	}
@@ -78,35 +79,35 @@ function F(e) {
 }
 //#endregion
 //#region src/provide-blok.tsx
-var I = t({});
-function L({ defaults: e, children: t }) {
-	return /* @__PURE__ */ C(I.Provider, {
+var z = n({});
+function B({ defaults: e, children: t }) {
+	return /* @__PURE__ */ T(z.Provider, {
 		value: e,
 		children: t
 	});
 }
-function R() {
-	return a(I);
+function V() {
+	return s(z);
 }
-function te(e, t) {
+function ne(e, t) {
 	if (Object.keys(e).length === 0) return t;
-	let n = F({}, e);
+	let n = R({}, e);
 	for (let e of Object.keys(t)) {
 		let r = t[e];
 		r !== void 0 && (n[e] = r);
 	}
-	return (e.tools !== void 0 || t.tools !== void 0) && (n.tools = F(F({}, e.tools), t.tools)), n;
+	return (e.tools !== void 0 || t.tools !== void 0) && (n.tools = R(R({}, e.tools), t.tools)), n;
 }
 //#endregion
 //#region src/block-portal-registry.ts
-var z = "__blokPortalRegistry", B = "__blokToolName", V = () => {
+var H = "__blokPortalRegistry", U = "__blokToolName", W = () => {
 	let e = { snapshot: /* @__PURE__ */ new Map() }, t = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Map(), r = (n) => {
 		e.snapshot = n, t.forEach((e) => e());
 	};
 	return {
 		register(t, i) {
 			let a = new Map(e.snapshot), o = i.toolName === void 0 ? void 0 : n.get(i.toolName);
-			a.set(t, o === void 0 ? i : F(F({}, i), {}, { props: F(F({}, i.props), {}, { config: o }) })), r(a);
+			a.set(t, o === void 0 ? i : R(R({}, i), {}, { props: R(R({}, i.props), {}, { config: o }) })), r(a);
 		},
 		unregister(t) {
 			if (!e.snapshot.has(t)) return;
@@ -117,14 +118,14 @@ var z = "__blokPortalRegistry", B = "__blokToolName", V = () => {
 			let i = e.snapshot.get(t);
 			if (i === void 0) return;
 			let a = new Map(e.snapshot);
-			a.set(t, F(F({}, i), {}, { props: F(F({}, i.props), n) })), r(a);
+			a.set(t, R(R({}, i), {}, { props: R(R({}, i.props), n) })), r(a);
 		},
 		setToolConfig(t, i) {
 			n.set(t, i);
 			let a = [...e.snapshot].filter(([, e]) => e.toolName === t);
 			if (a.length === 0) return;
 			let o = new Map(e.snapshot);
-			for (let [e, t] of a) o.set(e, F(F({}, t), {}, { props: F(F({}, t.props), {}, { config: i }) }));
+			for (let [e, t] of a) o.set(e, R(R({}, t), {}, { props: R(R({}, t.props), {}, { config: i }) }));
 			r(o);
 		},
 		subscribe(e) {
@@ -136,45 +137,45 @@ var z = "__blokPortalRegistry", B = "__blokToolName", V = () => {
 			return e.snapshot;
 		}
 	};
-}, H = /* @__PURE__ */ new WeakMap();
-function U(e, t) {
-	H.set(e, t);
+}, G = /* @__PURE__ */ new WeakMap();
+function re(e, t) {
+	G.set(e, t);
 }
-function W(e) {
-	return H.get(e);
+function ie(e) {
+	return G.get(e);
 }
-function G(e) {
-	H.delete(e);
+function K(e) {
+	G.delete(e);
 }
 //#endregion
 //#region src/live-tool-config.ts
-var K = (e) => {
+var q = (e) => {
 	if (typeof e != "object" || !e) return !1;
 	let t = Object.getPrototypeOf(e);
 	return t === Object.prototype || t === null;
-}, ne = (e, t) => t.reduce((e, t) => {
+}, ae = (e, t) => t.reduce((e, t) => {
 	if (Array.isArray(e)) return typeof t == "number" ? e[t] : void 0;
-	if (K(e)) return e[t];
-}, e), re = (e, t) => {
+	if (q(e)) return e[t];
+}, e), oe = (e, t) => {
 	let n = (e, t) => {
 		if (typeof e == "function") return typeof t == "function" ? t : e;
 		if (Array.isArray(e)) {
 			let r = Array.isArray(t) ? t : [];
 			return e.map((e, t) => n(e, r[t]));
 		}
-		if (K(e)) {
-			let r = K(t) ? t : {}, i = {};
+		if (q(e)) {
+			let r = q(t) ? t : {}, i = {};
 			for (let [t, a] of Object.entries(e)) i[t] = n(a, r[t]);
 			return i;
 		}
 		return e;
 	}, r = n(t, e);
-	return K(r) ? r : {};
-}, ie = (e, t) => {
-	if (!K(e)) return e;
+	return q(r) ? r : {};
+}, se = (e, t) => {
+	if (!q(e)) return e;
 	let n = {};
 	for (let [r, i] of Object.entries(e)) {
-		if (!K(i) || !K(i.config)) {
+		if (!q(i) || !q(i.config)) {
 			n[r] = i;
 			continue;
 		}
@@ -182,12 +183,12 @@ var K = (e) => {
 			if (typeof n == "function") {
 				let e = n;
 				return function(...n) {
-					let a = t(), o = K(a) ? a[r] : void 0, s = ne(K(o) ? o.config : void 0, i);
+					let a = t(), o = q(a) ? a[r] : void 0, s = ae(q(o) ? o.config : void 0, i);
 					return Reflect.apply(typeof s == "function" ? s : e, this, n);
 				};
 			}
 			if (Array.isArray(n)) return e.has(n) ? n : (e.add(n), n.map((e, t) => a(e, [...i, t])));
-			if (K(n)) {
+			if (q(n)) {
 				if (e.has(n)) return n;
 				e.add(n);
 				let t = {};
@@ -196,171 +197,191 @@ var K = (e) => {
 			}
 			return n;
 		};
-		n[r] = F(F({}, i), {}, { config: a(i.config, []) });
+		n[r] = R(R({}, i), {}, { config: a(i.config, []) });
 	}
 	return n;
-}, q = (e) => {
+}, J = (e) => {
 	let t = typeof e == "function" ? e : e == null ? void 0 : e.class;
 	return typeof t == "function" && t.__isBlokReactBlock === !0;
-}, ae = (e) => {
+}, ce = (e) => {
 	let t = typeof e == "function" ? e : e == null ? void 0 : e.class;
 	return typeof t == "function" && t.__isBlokReactInlineTool === !0;
-}, oe = (e, t) => {
+}, le = (e, t) => {
 	if (typeof e != "object" || !e) return e;
 	let n = {};
 	for (let [i, a] of Object.entries(e)) {
 		var r;
-		if (!q(a) && !ae(a)) {
+		if (!J(a) && !ce(a)) {
 			n[i] = a;
 			continue;
 		}
-		let e = typeof a == "function" ? { class: a } : F({}, a);
-		e.config = F(F({}, (r = e.config) == null ? {} : r), {}, {
-			[z]: t,
-			[B]: i
+		let e = typeof a == "function" ? { class: a } : R({}, a);
+		e.config = R(R({}, (r = e.config) == null ? {} : r), {}, {
+			[H]: t,
+			[U]: i
 		}), n[i] = e;
 	}
 	return n;
 };
-function J(e, t) {
+function Y(e, t) {
 	var n, r;
-	let i = te(a(I), e), [s, d] = u(null), p = l(i);
-	p.current = i;
-	let m = l({
+	let i = ne(s(z), e), [a, o] = f(null), l = d(i);
+	l.current = i;
+	let p = d({
 		editor: null,
 		holder: null,
 		destroyTimeout: null,
 		isDestroyed: !1,
 		isEditorReady: !1,
 		depsToken: null
-	}), h = c(() => ({}), t == null ? [] : t), _ = l(i.data), y = l(g()), b = l(null), S = l(i.data), C = l(Promise.resolve()), w = l(void 0), T = l(null), E = l(void 0), D = l(/* @__PURE__ */ new Map()), O = l(/* @__PURE__ */ new Map());
-	o(() => {
+	}), h = u(() => ({}), t == null ? [] : t), g = d(i.data), _ = d(v()), y = d(null), x = d(i.data), S = d(Promise.resolve()), C = d(void 0), w = d(null), T = d(void 0), E = d(/* @__PURE__ */ new Map()), D = d(/* @__PURE__ */ new Map());
+	c(() => {
 		var e;
 		if (typeof window > "u") return;
-		let t = m.current;
-		if (t.destroyTimeout !== null && (clearTimeout(t.destroyTimeout), t.destroyTimeout = null), t.editor !== null && !t.isDestroyed && t.depsToken === h) return t.isEditorReady && d(t.editor), () => {
-			Y(t, d);
+		let t = p.current;
+		if (t.destroyTimeout !== null && (clearTimeout(t.destroyTimeout), t.destroyTimeout = null), t.editor !== null && !t.isDestroyed && t.depsToken === h) return t.isEditorReady && o(t.editor), () => {
+			X(t, o);
 		};
 		if (t.editor !== null && !t.isDestroyed) {
-			k(t.editor), G(t.editor);
+			M(t.editor), K(t.editor);
 			try {
 				t.editor.destroy();
 			} catch (e) {}
-			t.editor = null, t.holder = null, t.isDestroyed = !0, t.isEditorReady = !1, d(null);
+			t.editor = null, t.holder = null, t.isDestroyed = !0, t.isEditorReady = !1, o(null);
 		}
 		let n = document.createElement("div");
 		t.holder = n, t.isDestroyed = !1, t.isEditorReady = !1, t.depsToken = h;
-		let r = p.current, i = V(), a = r.tools === void 0 ? void 0 : ie(r.tools, () => p.current.tools), o = a === void 0 ? void 0 : oe(a, i);
-		T.current = i, E.current = a, D.current = /* @__PURE__ */ new Map(), O.current = new Map(Object.entries((e = r.tools) == null ? {} : e).map(([e, t]) => [e, typeof t == "object" && t ? t.toolbox : void 0]));
-		let s = F(F(F({}, r), o === void 0 ? {} : { tools: o }), {}, {
+		let r = l.current, i = W(), a = r.tools === void 0 ? void 0 : se(r.tools, () => l.current.tools), s = a === void 0 ? void 0 : le(a, i);
+		w.current = i, T.current = a, E.current = /* @__PURE__ */ new Map(), D.current = new Map(Object.entries((e = r.tools) == null ? {} : e).map(([e, t]) => [e, typeof t == "object" && t ? t.toolbox : void 0]));
+		let c = R(R(R({}, r), s === void 0 ? {} : { tools: s }), {}, {
 			holder: n,
 			onReady: (...e) => {
 				var t, n;
-				(t = (n = p.current).onReady) == null || t.call(n, ...e);
+				(t = (n = l.current).onReady) == null || t.call(n, ...e);
 			},
 			onChange: (...e) => {
 				var t, n;
-				(t = (n = p.current).onChange) == null || t.call(n, ...e);
+				(t = (n = l.current).onChange) == null || t.call(n, ...e);
 			},
 			onEnter: (...e) => {
 				var t, n;
-				return (t = (n = p.current).onEnter) == null ? void 0 : t.call(n, ...e);
+				return (t = (n = l.current).onEnter) == null ? void 0 : t.call(n, ...e);
 			}
 		});
-		r.onSave && (s.onSave = (...e) => {
+		r.onSave && (c.onSave = (...e) => {
 			var t, n;
-			_.current = e[0], y.current.record(e[0]), (t = (n = p.current).onSave) == null || t.call(n, ...e);
-		}), r.onBeforeRender && (s.onBeforeRender = (...e) => {
+			g.current = e[0], _.current.record(e[0]), (t = (n = l.current).onSave) == null || t.call(n, ...e);
+		}), r.onBeforeRender && (c.onBeforeRender = (...e) => {
 			var t, n, r;
-			return (t = (n = (r = p.current).onBeforeRender) == null ? void 0 : n.call(r, ...e)) == null ? e[0] : t;
-		}), r.onAfterRender && (s.onAfterRender = (...e) => {
+			return (t = (n = (r = l.current).onBeforeRender) == null ? void 0 : n.call(r, ...e)) == null ? e[0] : t;
+		}), r.onAfterRender && (c.onAfterRender = (...e) => {
 			var t, n;
-			(t = (n = p.current).onAfterRender) == null || t.call(n, ...e);
+			(t = (n = l.current).onAfterRender) == null || t.call(n, ...e);
 		});
-		let c = new f(s);
-		return t.editor = c, S.current = r.data, ee(c, n), U(c, i), c.isReady.then(() => {
-			t.editor === c && !t.isDestroyed && (t.isEditorReady = !0, d(c));
+		let u = new m(c);
+		return t.editor = u, x.current = r.data, te(u, n), re(u, i), u.isReady.then(() => {
+			t.editor === u && !t.isDestroyed && (t.isEditorReady = !0, o(u));
 		}).catch(() => {
-			if (t.editor === c && !t.isDestroyed) {
-				k(c), G(c);
+			if (t.editor === u && !t.isDestroyed) {
+				M(u), K(u);
 				try {
-					c.destroy();
+					u.destroy();
 				} catch (e) {}
-				t.editor = null, t.holder = null, t.isDestroyed = !0, t.isEditorReady = !1, d(null);
+				t.editor = null, t.holder = null, t.isDestroyed = !0, t.isEditorReady = !1, o(null);
 			}
 		}), () => {
-			Y(t, d);
+			X(t, o);
 		};
-	}, [h]), o(() => {
-		let e = T.current, t = m.current;
+	}, [h]), c(() => {
+		let e = w.current, t = p.current;
 		if (e === null || t.editor === null || t.isDestroyed) return;
-		let n = p.current.tools;
+		let n = l.current.tools;
 		if (typeof n != "object" || !n) return;
-		let r = E.current;
+		let r = T.current;
 		for (let [t, a] of Object.entries(n)) {
 			var i;
-			if (!q(a)) continue;
-			let n = typeof a == "function" || (i = a.config) == null ? {} : i, o = r == null ? void 0 : r[t], s = re(typeof o == "object" && o ? o.config : void 0, n), c = D.current.get(t);
-			if (c !== void 0 && v(s, c)) continue;
+			if (!J(a)) continue;
+			let n = typeof a == "function" || (i = a.config) == null ? {} : i, o = r == null ? void 0 : r[t], s = oe(typeof o == "object" && o ? o.config : void 0, n), c = E.current.get(t);
+			if (c !== void 0 && b(s, c)) continue;
 			let l = Object.freeze(s);
-			D.current.set(t, l), e.setToolConfig(t, l);
+			E.current.set(t, l), e.setToolConfig(t, l);
 		}
-	}), o(() => {
-		let e = m.current;
+	}), c(() => {
+		let e = p.current;
 		if (e.editor === null || e.isDestroyed || !e.isEditorReady) return;
-		let t = p.current.tools;
+		let t = l.current.tools;
 		if (!(typeof t != "object" || !t)) for (let [r, i] of Object.entries(t)) {
 			var n;
-			if (!O.current.has(r)) continue;
+			if (!D.current.has(r)) continue;
 			let t = typeof i == "object" && i ? i.toolbox : void 0;
-			v(t, O.current.get(r)) || (O.current.set(r, t), (n = e.editor.tools) == null || n.update(r, { toolbox: t }));
+			b(t, D.current.get(r)) || (D.current.set(r, t), (n = e.editor.tools) == null || n.update(r, { toolbox: t }));
 		}
 	});
-	let A = x(i.readOnly).enabled;
-	o(() => {
-		s !== null && s.readOnly.set(A);
-	}, [s, A]);
-	let { autofocus: j } = i;
-	o(() => {
-		s === null || !j || s.focus();
-	}, [s, j]);
-	let { theme: M } = i;
-	o(() => {
-		s === null || M === void 0 || s.theme.set(M);
-	}, [s, M]);
-	let { width: N } = i;
-	o(() => {
-		s === null || N === void 0 || s.width.set(N);
-	}, [s, N]);
-	let P = (n = i.style) == null ? void 0 : n.tokens, L = l((r = i.style) == null ? void 0 : r.tokens);
-	o(() => {
-		s === null || P === void 0 || v(P, L.current) || (L.current = P, s.tokens.set(P));
-	}, [s, P]);
-	let { placeholder: R } = i;
-	o(() => {
-		s === null || R === void 0 || s.placeholder.set(R);
-	}, [s, R]);
-	let { data: z } = i;
-	return o(() => {
-		if (s === null || z === void 0) return;
-		let e = m.current;
-		if (!(e.editor !== s || e.isDestroyed)) {
-			if (b.current !== s && (b.current = s, w.current = void 0, y.current.clear(), v(z, S.current))) {
-				_.current = z;
+	let O = typeof i.readOnly == "object" && i.readOnly !== null, { enabled: k, hideControls: A } = ee(i.readOnly);
+	c(() => {
+		a !== null && (O ? a.readOnly.set(k, { hideControls: A }) : a.readOnly.set(k));
+	}, [
+		a,
+		k,
+		A,
+		O
+	]);
+	let { hideToolbar: j } = i;
+	c(() => {
+		a === null || j === void 0 || a.toolbar.setHidden(j);
+	}, [a, j]);
+	let { inlineToolbar: N } = i;
+	c(() => {
+		a === null || N === void 0 || a.tools.setInlineToolbar(N);
+	}, [a, N === void 0 ? void 0 : JSON.stringify(N)]);
+	let { autofocus: P } = i;
+	c(() => {
+		a === null || !P || a.focus();
+	}, [a, P]);
+	let { theme: F } = i;
+	c(() => {
+		a === null || F === void 0 || a.theme.set(F);
+	}, [a, F]);
+	let { width: I } = i;
+	c(() => {
+		a === null || I === void 0 || a.width.set(I);
+	}, [a, I]);
+	let L = (n = i.style) == null ? void 0 : n.tokens, B = d((r = i.style) == null ? void 0 : r.tokens);
+	c(() => {
+		a === null || L === void 0 || b(L, B.current) || (B.current = L, a.tokens.set(L));
+	}, [a, L]);
+	let { i18n: V } = i, H = d(i.i18n);
+	c(() => {
+		if (a === null || V === void 0 || b(V, H.current)) return;
+		H.current = V;
+		let { locale: e, messages: t, direction: n } = V;
+		a.i18n.update(R(R(R({}, e === void 0 ? {} : { locale: e }), t === void 0 ? {} : { messages: t }), n === void 0 ? {} : { direction: n }));
+	}, [a, V]);
+	let { placeholder: U } = i;
+	c(() => {
+		a === null || U === void 0 || a.placeholder.set(U);
+	}, [a, U]);
+	let { data: G } = i;
+	return c(() => {
+		if (a === null || G === void 0) return;
+		let e = p.current;
+		if (!(e.editor !== a || e.isDestroyed)) {
+			if (y.current !== a && (y.current = a, C.current = void 0, _.current.clear(), b(G, x.current))) {
+				g.current = G;
 				return;
 			}
-			v(z, _.current) || v(z, w.current) || y.current.matches(z) || (y.current.clear(), w.current = z, C.current = C.current.catch(() => void 0).then(() => s.render(z)).then(() => {
-				_.current = z;
+			b(G, g.current) || b(G, C.current) || _.current.matches(G) || (_.current.clear(), C.current = G, S.current = S.current.catch(() => void 0).then(() => a.render(G)).then(() => {
+				g.current = G;
 			}, () => {}).then(() => {
-				w.current === z && (w.current = void 0);
+				C.current === G && (C.current = void 0);
 			}));
 		}
-	}, [s, z]), s;
+	}, [a, G]), a;
 }
-function Y(e, t) {
+function X(e, t) {
 	e.destroyTimeout = setTimeout(() => {
 		if (e.editor !== null) {
-			k(e.editor), G(e.editor);
+			M(e.editor), K(e.editor);
 			try {
 				e.editor.destroy();
 			} catch (e) {}
@@ -370,7 +391,7 @@ function Y(e, t) {
 }
 //#endregion
 //#region src/BlockPortalHost.tsx
-var se = class extends e {
+var ue = class extends e {
 	constructor(...e) {
 		super(...e), this.state = { failed: !1 };
 	}
@@ -382,16 +403,16 @@ var se = class extends e {
 		return this.state.failed ? null : this.props.children;
 	}
 };
-function X({ registry: e }) {
-	let t = d(e.subscribe, e.getSnapshot, e.getSnapshot);
-	return /* @__PURE__ */ C(S, { children: Array.from(t.entries()).map(([e, t]) => {
+function Z({ registry: e }) {
+	let t = p(e.subscribe, e.getSnapshot, e.getSnapshot);
+	return /* @__PURE__ */ T(w, { children: Array.from(t.entries()).map(([e, t]) => {
 		let n = t.component;
-		return w(/* @__PURE__ */ C(se, { children: /* @__PURE__ */ C(n, F({}, t.props)) }), t.hostEl, e);
+		return E(/* @__PURE__ */ T(ue, { children: /* @__PURE__ */ T(n, R({}, t.props)) }), t.hostEl, e);
 	}) });
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.139.0/helpers/esm/objectWithoutPropertiesLoose.js
-function ce(e, t) {
+function de(e, t) {
 	if (e == null) return {};
 	var n = {};
 	for (var r in e) if ({}.hasOwnProperty.call(e, r)) {
@@ -402,9 +423,9 @@ function ce(e, t) {
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.139.0/helpers/esm/objectWithoutProperties.js
-function Z(e, t) {
+function Q(e, t) {
 	if (e == null) return {};
-	var n, r, i = ce(e, t);
+	var n, r, i = de(e, t);
 	if (Object.getOwnPropertySymbols) {
 		var a = Object.getOwnPropertySymbols(e);
 		for (r = 0; r < a.length; r++) n = a[r], t.includes(n) || {}.propertyIsEnumerable.call(e, n) && (i[n] = e[n]);
@@ -413,51 +434,51 @@ function Z(e, t) {
 }
 //#endregion
 //#region src/BlokContent.tsx
-var le = ["editor"], Q = n(function(e, t) {
-	let { editor: n } = e, r = Z(e, le), i = l(null), a = (e) => {
+var fe = ["editor"], pe = i(function(e, t) {
+	let { editor: n } = e, r = Q(e, fe), i = d(null), a = (e) => {
 		if (i.current = e, typeof t == "function") t(e);
 		else if (t != null) {
 			let n = t;
 			n.current = e;
 		}
 	};
-	o(() => {
+	c(() => {
 		if (n === null || i.current === null) return;
-		let e = O(n);
+		let e = j(n);
 		if (e !== void 0) return i.current.appendChild(e), () => {
 			e.remove();
 		};
 	}, [n]);
-	let s = n === null ? void 0 : W(n);
-	return /* @__PURE__ */ C("div", F(F({ ref: a }, r), {}, { children: s === void 0 ? null : /* @__PURE__ */ C(X, { registry: s }) }));
-}), ue = /* @__PURE__ */ "autofocus.defaultBlock.dataModel.placeholder.sanitizer.hideToolbar.maxHistoryLength.historyDebounceTime.newGroupDelay.globalUndoRedo.tools.data.minHeight.logLevel.readOnly.i18n.link.linkPaste.onBeforePaste.onReady.onChange.onSave.onEnter.onBeforeRender.onAfterRender.inlineToolbar.tunes.style.theme.onThemeChange.scrollToBlock.user.resolveUser.notifierPosition.notifier.width".split("."), de = [
+	let o = n === null ? void 0 : ie(n);
+	return /* @__PURE__ */ T("div", R(R({ ref: a }, r), {}, { children: o === void 0 ? null : /* @__PURE__ */ T(Z, { registry: o }) }));
+}), me = /* @__PURE__ */ "autofocus.defaultBlock.dataModel.placeholder.sanitizer.hideToolbar.maxHistoryLength.historyDebounceTime.newGroupDelay.globalUndoRedo.tools.data.minHeight.logLevel.readOnly.i18n.link.linkPaste.onBeforePaste.onReady.onChange.onSave.onEnter.onBeforeRender.onAfterRender.inlineToolbar.tunes.style.theme.onThemeChange.scrollToBlock.user.resolveUser.notifierPosition.notifier.width".split("."), he = [
 	"deps",
 	"onReady",
 	"onBlocksRendered",
 	"onBlockRendered"
-], fe = new Set(ue), pe = n(function(e, t) {
-	let { deps: n, onReady: r, onBlocksRendered: i, onBlockRendered: a } = e, c = Z(e, de), u = {}, d = {};
-	for (let e of Object.keys(c)) {
-		let t = c[e];
-		fe.has(e) ? u[e] = t : d[e] = t;
+], ge = new Set(me), _e = i(function(e, t) {
+	let { deps: n, onReady: r, onBlocksRendered: i, onBlockRendered: a } = e, o = Q(e, he), s = {}, u = {};
+	for (let e of Object.keys(o)) {
+		let t = o[e];
+		ge.has(e) ? s[e] = t : u[e] = t;
 	}
-	let f = J(u, n);
-	s(t, () => f, [f]);
-	let p = l(r);
+	let f = Y(s, n);
+	l(t, () => f, [f]);
+	let p = d(r);
 	p.current = r;
-	let m = l(null);
-	o(() => {
+	let m = d(null);
+	c(() => {
 		if (f !== null && m.current !== f) {
 			var e;
 			m.current = f, (e = p.current) == null || e.call(p, f);
 		}
 	}, [f]);
-	let h = l(i);
+	let h = d(i);
 	h.current = i;
-	let g = l(a);
+	let g = d(a);
 	g.current = a;
 	let _ = !!i, v = !!a;
-	return o(() => {
+	return c(() => {
 		if (f === null) return;
 		let e = [];
 		if (_) {
@@ -481,65 +502,192 @@ var le = ["editor"], Q = n(function(e, t) {
 		f,
 		_,
 		v
-	]), /* @__PURE__ */ C(Q, F({ editor: f }, d));
-}), $ = "block changed";
-function me(e) {
-	let t = l(0), n = l(e);
+	]), /* @__PURE__ */ T(pe, R({ editor: f }, u));
+}), ve = "block changed";
+function ye(e) {
+	let t = d(0), n = d(e);
 	n.current !== e && (n.current = e, t.current = 0);
-	let r = i((n) => {
+	let r = o((n) => {
 		if (e === null) return () => void 0;
 		let r = () => {
 			t.current += 1, n();
 		};
-		return e.on($, r), () => e.off($, r);
-	}, [e]), a = i(() => t.current, []);
-	return d(r, a, a), c(() => e === null ? m : h(e), [e]);
+		return e.on(ve, r), () => e.off(ve, r);
+	}, [e]), i = o(() => t.current, []);
+	return p(r, i, i), u(() => e === null ? g : _(e), [e]);
+}
+//#endregion
+//#region src/useBlokReady.ts
+function be(e = {}) {
+	let { within: t, settleOn: n } = e, [r, i] = f(!1);
+	return c(() => {
+		let e = () => {
+			var e;
+			let r = t instanceof Element ? t : (e = t == null ? void 0 : t.current) == null ? null : e;
+			i(t !== void 0 && r === null ? !1 : m.readyState({
+				within: r,
+				settleOn: n
+			}).ready);
+		};
+		return e(), m.subscribeReady(e);
+	}, [t, n]), r;
 }
 //#endregion
-//#region src/createReactBlock.tsx
-var he = ["commit", "readOnly"], ge = [z, B];
-function _e(e) {
+//#region src/view-nodes-to-react.ts
+var xe = /* @__PURE__ */ new Set([
+	"area",
+	"base",
+	"br",
+	"col",
+	"embed",
+	"hr",
+	"img",
+	"input",
+	"link",
+	"meta",
+	"param",
+	"source",
+	"track",
+	"wbr"
+]), Se = /* @__PURE__ */ new Set([
+	"disabled",
+	"open",
+	"controls",
+	"autoplay",
+	"loop",
+	"muted",
+	"required",
+	"multiple",
+	"playsinline",
+	"reversed",
+	"hidden",
+	"default",
+	"novalidate",
+	"allowfullscreen",
+	"itemscope"
+]), Ce = {
+	class: "className",
+	for: "htmlFor",
+	colspan: "colSpan",
+	rowspan: "rowSpan",
+	tabindex: "tabIndex",
+	readonly: "readOnly",
+	srcset: "srcSet",
+	srclang: "srcLang",
+	datetime: "dateTime",
+	autoplay: "autoPlay",
+	playsinline: "playsInline",
+	novalidate: "noValidate",
+	allowfullscreen: "allowFullScreen",
+	crossorigin: "crossOrigin",
+	referrerpolicy: "referrerPolicy",
+	contenteditable: "contentEditable",
+	spellcheck: "spellCheck",
+	maxlength: "maxLength",
+	minlength: "minLength",
+	usemap: "useMap",
+	itemscope: "itemScope"
+}, we = (e) => {
+	let t = {};
+	for (let n of e.split(";")) {
+		let e = n.indexOf(":");
+		if (e === -1) continue;
+		let r = n.slice(0, e).trim(), i = n.slice(e + 1).trim();
+		if (r === "" || i === "") continue;
+		let a = r.startsWith("--") ? r : r.toLowerCase().replace(/-([a-z])/g, (e, t) => t.toUpperCase());
+		t[a] = i;
+	}
+	return t;
+}, Te = (e, t) => {
+	let n = { key: t };
+	for (let [t, a] of Object.entries(e)) {
+		var r;
+		if (t === "style") {
+			n.style = we(a);
+			continue;
+		}
+		if (t === "checked") {
+			n.defaultChecked = !0;
+			continue;
+		}
+		if (t === "value") {
+			n.defaultValue = a;
+			continue;
+		}
+		if (Se.has(t)) {
+			var i;
+			n[(i = Ce[t]) == null ? t : i] = !0;
+			continue;
+		}
+		n[(r = Ce[t]) == null ? t : r] = a;
+	}
+	return n;
+}, Ee = (e) => e.map((e, t) => {
+	if ("text" in e) return e.text;
+	let n = Te(e.attrs, t);
+	return xe.has(e.tag) || e.children.length === 0 ? r(e.tag, n) : r(e.tag, n, ...Ee(e.children));
+}), De = (e, n) => {
+	let i = n == null ? void 0 : n.schema, a = n == null ? void 0 : n.renderers, o = n == null ? void 0 : n.onUnknownBlock;
+	return u(() => r(t, null, ...Ee(O(e, {
+		schema: i,
+		renderers: a,
+		onUnknownBlock: o
+	}))), [
+		e,
+		i,
+		a,
+		o
+	]);
+}, Oe = ({ data: e, schema: t, renderers: n, onUnknownBlock: r, className: i }) => /* @__PURE__ */ T("div", {
+	className: i,
+	children: De(e, {
+		schema: t,
+		renderers: n,
+		onUnknownBlock: r
+	})
+}), ke = ["commit", "readOnly"], Ae = [H, U];
+function je(e) {
 	var t;
 	let n = (e) => {
 		if (typeof document > "u") return null;
-		let t = document.createElement("div"), n = E(t);
-		T(() => {
+		let t = document.createElement("div"), n = k(t);
+		D(() => {
 			n.render(e);
 		});
 		let r = t.innerHTML;
 		return n.unmount(), r === "" ? null : r;
-	}, i = () => {
-		let t = { complete: !0 }, i = (e) => {
-			if (!r(e.icon)) return e;
-			let i = n(e.icon);
-			return i === null ? (t.complete = !1, e) : F(F({}, e), {}, { icon: i });
+	}, r = () => {
+		let t = { complete: !0 }, r = (e) => {
+			if (!a(e.icon)) return e;
+			let r = n(e.icon);
+			return r === null ? (t.complete = !1, e) : R(R({}, e), {}, { icon: r });
 		};
 		return e.toolbox === void 0 ? {
 			value: void 0,
 			complete: t.complete
 		} : {
-			value: Array.isArray(e.toolbox) ? e.toolbox.map(i) : i(e.toolbox),
+			value: Array.isArray(e.toolbox) ? e.toolbox.map(r) : r(e.toolbox),
 			complete: t.complete
 		};
-	}, a = {
+	}, i = {
 		resolved: !1,
 		value: void 0
-	}, s = () => {
-		if (a.resolved) return a.value;
-		let { value: e, complete: t } = i();
-		return t && (a.value = e, a.resolved = !0), e;
-	}, c = e.viewComponent === void 0 ? e.component : (t) => {
+	}, o = () => {
+		if (i.resolved) return i.value;
+		let { value: e, complete: t } = r();
+		return t && (i.value = e, i.resolved = !0), e;
+	}, s = e.viewComponent === void 0 ? e.component : (t) => {
 		let n = e.viewComponent;
 		if (t.readOnly && n !== void 0) {
 			let { commit: e, readOnly: r } = t;
-			return /* @__PURE__ */ C(n, F({}, Z(t, he)));
+			return /* @__PURE__ */ T(n, R({}, Q(t, ke)));
 		}
 		let r = e.component;
-		return /* @__PURE__ */ C(r, F({}, t));
+		return /* @__PURE__ */ T(r, R({}, t));
 	};
 	return t = class {
 		static get toolbox() {
-			return s();
+			return o();
 		}
 		static get isReadOnlySupported() {
 			return !0;
@@ -548,29 +696,29 @@ function _e(e) {
 			var n, r;
 			this.hostEl = null, this.pendingDispatch = !1, this.commit = (t) => {
 				var n;
-				let r = y(e.propSchema, F(F({}, this.mirror), t));
-				_(r, this.mirror) || (this.mirror = r, this.lastRendered = r, (n = this.registry) == null || n.setProps(this.blockApi.id, { data: r }), this.flushDispatch());
+				let r = x(e.propSchema, R(R({}, this.mirror), t));
+				y(r, this.mirror) || (this.mirror = r, this.lastRendered = r, (n = this.registry) == null || n.setProps(this.blockApi.id, { data: r }), this.flushDispatch());
 			}, this.blockApi = t.block;
 			let i = (n = t.config) == null ? {} : n;
-			this.registry = i[z];
-			let a = i[B];
+			this.registry = i[H];
+			let a = i[U];
 			this.toolName = typeof a == "string" ? a : void 0;
-			let s = {};
-			for (let [e, t] of Object.entries(i)) ge.includes(e) || (s[e] = t);
-			this.toolConfig = Object.freeze(s);
-			let c = t.api;
+			let o = {};
+			for (let [e, t] of Object.entries(i)) Ae.includes(e) || (o[e] = t);
+			this.toolConfig = Object.freeze(o);
+			let s = t.api;
 			this.pointerDrag = () => {
 				var e;
-				return (c == null || (e = c.blocks) == null ? void 0 : e.isPointerDragActive) === !0;
-			}, this.mirror = y(e.propSchema, (r = t.data) == null ? {} : r), this.lastRendered = this.mirror, this.readOnly = t.readOnly;
-			let u = this.blockApi;
+				return (s == null || (e = s.blocks) == null ? void 0 : e.isPointerDragActive) === !0;
+			}, this.mirror = x(e.propSchema, (r = t.data) == null ? {} : r), this.lastRendered = this.mirror, this.readOnly = t.readOnly;
+			let l = this.blockApi;
 			this.childrenComponent = function() {
-				let e = l(null);
-				return o(() => {
-					e.current !== null && b(e.current, u.getChildren());
-				}), /* @__PURE__ */ C("div", {
+				let e = d(null);
+				return c(() => {
+					e.current !== null && C(e.current, l.getChildren());
+				}), /* @__PURE__ */ T("div", {
 					ref: e,
-					[p.nestedBlocks]: ""
+					[h.nestedBlocks]: ""
 				});
 			};
 		}
@@ -579,7 +727,7 @@ function _e(e) {
 			let t = document.createElement("div");
 			return t.setAttribute("data-blok-mutation-free", "true"), this.hostEl = t, (e = this.registry) == null || e.register(this.blockApi.id, {
 				hostEl: t,
-				component: c,
+				component: s,
 				props: this.buildProps(),
 				toolName: this.toolName
 			}), t;
@@ -593,8 +741,8 @@ function _e(e) {
 		}
 		async setData(t) {
 			var n = this;
-			let r = y(e.propSchema, t == null ? {} : t);
-			return _(r, n.lastRendered) ? !0 : (n.mirror = r, n.lastRendered = r, n.pushProps({ data: r }), !0);
+			let r = x(e.propSchema, t == null ? {} : t);
+			return y(r, n.lastRendered) ? !0 : (n.mirror = r, n.lastRendered = r, n.pushProps({ data: r }), !0);
 		}
 		setReadOnly(e) {
 			this.readOnly = e, this.pushProps({ readOnly: e });
@@ -623,7 +771,7 @@ function _e(e) {
 		}
 		pushProps(e) {
 			let t = this.registry;
-			t !== void 0 && T(() => {
+			t !== void 0 && D(() => {
 				t.setProps(this.blockApi.id, e);
 			});
 		}
@@ -647,8 +795,13 @@ function _e(e) {
 }
 //#endregion
 //#region src/createReactInlineTool.tsx
-var ve = [z, B], ye = (e) => `__blok-inline-tool__:${e}:${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
-function be(e) {
+var Me = [H, U], Ne = (e) => `__blok-inline-tool__:${e}:${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`, $ = n(null);
+function Pe() {
+	let e = s($);
+	if (e === null) throw Error("useInlineTool() must be called from a component rendered by createReactInlineTool");
+	return e;
+}
+function Fe(e) {
 	var t;
 	return t = class {
 		static get title() {
@@ -661,7 +814,7 @@ function be(e) {
 			return e.shortcut;
 		}
 		static get sanitize() {
-			return e.sanitize;
+			return e.sanitize === void 0 ? e.mark === void 0 ? void 0 : S(e.mark) : e.sanitize;
 		}
 		static get isReadOnlySupported() {
 			var t;
@@ -671,18 +824,18 @@ function be(e) {
 			var n;
 			this.active = !1, this.registered = !1;
 			let r = (n = t == null ? void 0 : t.config) == null ? {} : n;
-			this.registry = r[z];
-			let i = r[B];
-			this.toolName = typeof i == "string" ? i : e.type, this.portalKey = ye(this.toolName);
+			this.api = t == null ? void 0 : t.api, this.registry = r[H];
+			let i = r[U];
+			this.toolName = typeof i == "string" ? i : e.type, this.portalKey = Ne(this.toolName);
 			let a = {};
-			for (let [e, t] of Object.entries(r)) ve.includes(e) || (a[e] = t);
-			this.toolConfig = Object.freeze(a);
+			for (let [e, t] of Object.entries(r)) Me.includes(e) || (a[e] = t);
+			this.toolConfig = Object.freeze(a), this.portalComponent = this.createPortalComponent();
 		}
 		render() {
 			let t = document.createElement("div");
 			return t.setAttribute("data-blok-mutation-free", "true"), this.registry !== void 0 && (this.registry.register(this.portalKey, {
 				hostEl: t,
-				component: e.component,
+				component: this.portalComponent,
 				props: {
 					active: this.active,
 					config: this.toolConfig
@@ -693,9 +846,7 @@ function be(e) {
 				title: e.title,
 				icon: t,
 				onActivate: () => {
-					if (typeof e.surround != "function") return;
-					let t = window.getSelection();
-					!t || t.rangeCount === 0 || e.surround(t.getRangeAt(0));
+					this.activate();
 				},
 				isActive: () => this.refreshActiveState()
 			};
@@ -704,15 +855,53 @@ function be(e) {
 			var e;
 			this.registered && (this.registered = !1, (e = this.registry) == null || e.unregister(this.portalKey));
 		}
+		activate() {
+			var t;
+			if (typeof e.surround == "function") {
+				let t = window.getSelection();
+				if (!t || t.rangeCount === 0) return;
+				e.surround(t.getRangeAt(0), this.api);
+				return;
+			}
+			e.mark !== void 0 && ((t = this.api) == null ? void 0 : t.marks) !== void 0 && this.api.marks.toggle(e.mark);
+		}
 		refreshActiveState() {
-			let t = typeof e.checkState == "function" && !!e.checkState(window.getSelection());
-			if (t !== this.active && (this.active = t, this.registered)) {
-				var n;
-				(n = this.registry) == null || n.setProps(this.portalKey, { active: t });
+			let e = this.computeActiveState();
+			if (e !== this.active && (this.active = e, this.registered)) {
+				var t;
+				(t = this.registry) == null || t.setProps(this.portalKey, { active: e });
 			}
-			return t;
+			return e;
+		}
+		computeActiveState() {
+			var t;
+			return typeof e.checkState == "function" ? !!e.checkState(window.getSelection(), this.api) : e.mark !== void 0 && ((t = this.api) == null ? void 0 : t.marks) !== void 0 && this.api.marks.has(e.mark);
+		}
+		createPortalComponent() {
+			let t = this.api, n = e.mark, r = e.component, i = n !== void 0 && (t == null ? void 0 : t.marks) !== void 0 ? {
+				has: () => t.marks.has(n),
+				toggle: (e) => t.marks.toggle(n, e),
+				apply: (e) => t.marks.apply(n, e),
+				remove: () => t.marks.remove(n),
+				read: () => t.marks.read(n)
+			} : null, a = (e) => {
+				let n = u(() => ({
+					active: e.active,
+					config: e.config,
+					api: t,
+					mark: i
+				}), [e.active, e.config]);
+				return /* @__PURE__ */ T($.Provider, {
+					value: n,
+					children: /* @__PURE__ */ T(r, {
+						active: e.active,
+						config: e.config
+					})
+				});
+			};
+			return a.displayName = `BlokInlineTool(${this.toolName})`, a;
 		}
 	}, t.__isBlokReactInlineTool = !0, t.isInline = !0, t;
 }
 //#endregion
-export { z as BLOK_PORTAL_REGISTRY_CONFIG_KEY, B as BLOK_TOOL_NAME_CONFIG_KEY, X as BlockPortalHost, Q as BlokContent, pe as BlokEditor, L as BlokProvider, V as createBlockPortalRegistry, _e as createReactBlock, be as createReactInlineTool, me as useBlocks, J as useBlok, R as useBlokDefaults };
+export { H as BLOK_PORTAL_REGISTRY_CONFIG_KEY, U as BLOK_TOOL_NAME_CONFIG_KEY, Z as BlockPortalHost, pe as BlokContent, _e as BlokEditor, B as BlokProvider, Oe as BlokView, W as createBlockPortalRegistry, je as createReactBlock, Fe as createReactInlineTool, ye as useBlocks, Y as useBlok, V as useBlokDefaults, be as useBlokReady, De as useBlokView, Pe as useInlineTool };