@bloklabs/vue 1.6.2 → 1.8.0

package/dist/index.mjs

@@ -1,49 +1,61 @@
 import { Fragment as e, Teleport as t, computed as n, defineComponent as r, getCurrentInstance as i, h as a, inject as o, markRaw as s, nextTick as c, onBeforeUnmount as l, onErrorCaptured as u, onMounted as d, onScopeDispose as f, onUpdated as p, provide as m, reactive as h, ref as g, shallowRef as _, toRaw as v, toValue as y, watch as b } from "vue";
 import { Blok as x } from "@bloklabs/core";
-import { DATA_ATTR as ee, EMPTY_API as S, createBlocksApiForEditor as C, deepEqual as w, fillDefaults as T, mountChildBlocks as E, normalizeReadOnlyConfig as D, toRenderableData as O } from "@bloklabs/core/adapters";
-//#region src/holder-map.ts
+import { BlockChildrenMounted as ee, DATA_ATTR as S, EMPTY_API as C, createBlocksApiForEditor as w, deepEqual as T, equalsOutputData as te, fillDefaults as E, mountChildBlocks as D, normalizeReadOnlyConfig as O, toRenderableData as ne } from "@bloklabs/core/adapters";
+//#region src/content-baseline-map.ts
 var k = /* @__PURE__ */ new WeakMap();
-function te(e, t) {
+function A(e, t) {
 	k.set(e, t);
 }
-function A(e) {
+function re(e) {
 	return k.get(e);
 }
 function j(e) {
 	k.delete(e);
 }
 //#endregion
+//#region src/holder-map.ts
+var M = /* @__PURE__ */ new WeakMap();
+function N(e, t) {
+	M.set(e, t);
+}
+function P(e) {
+	return M.get(e);
+}
+function F(e) {
+	M.delete(e);
+}
+//#endregion
 //#region \0@oxc-project+runtime@0.139.0/helpers/esm/typeof.js
-function M(e) {
+function I(e) {
 	"@babel/helpers - typeof";
-	return M = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(e) {
+	return I = 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;
-	}, M(e);
+	}, I(e);
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.139.0/helpers/esm/toPrimitive.js
-function N(e, t) {
-	if (M(e) != "object" || !e) return e;
+function ie(e, t) {
+	if (I(e) != "object" || !e) return e;
 	var n = e[Symbol.toPrimitive];
 	if (n !== void 0) {
 		var r = n.call(e, t || "default");
-		if (M(r) != "object") return r;
+		if (I(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 P(e) {
-	var t = N(e, "string");
-	return M(t) == "symbol" ? t : t + "";
+function ae(e) {
+	var t = ie(e, "string");
+	return I(t) == "symbol" ? t : t + "";
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.139.0/helpers/esm/defineProperty.js
-function F(e, t, n) {
-	return (t = P(t)) in e ? Object.defineProperty(e, t, {
+function L(e, t, n) {
+	return (t = ae(t)) in e ? Object.defineProperty(e, t, {
 		value: n,
 		enumerable: !0,
 		configurable: !0,
@@ -52,7 +64,7 @@ function F(e, t, n) {
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.139.0/helpers/esm/objectSpread2.js
-function I(e, t) {
+function R(e, t) {
 	var n = Object.keys(e);
 	if (Object.getOwnPropertySymbols) {
 		var r = Object.getOwnPropertySymbols(e);
@@ -62,12 +74,12 @@ function I(e, t) {
 	}
 	return n;
 }
-function L(e) {
+function z(e) {
 	for (var t = 1; t < arguments.length; t++) {
 		var n = arguments[t] == null ? {} : arguments[t];
-		t % 2 ? I(Object(n), !0).forEach(function(t) {
-			F(e, t, n[t]);
-		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : I(Object(n)).forEach(function(t) {
+		t % 2 ? R(Object(n), !0).forEach(function(t) {
+			L(e, t, n[t]);
+		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : R(Object(n)).forEach(function(t) {
 			Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
 		});
 	}
@@ -75,52 +87,60 @@ function L(e) {
 }
 //#endregion
 //#region src/provide-blok.ts
-var R = Symbol("BLOK_DEFAULT_CONFIG");
-function z(e) {
-	m(R, e);
+var B = Symbol("BLOK_DEFAULT_CONFIG");
+function V(e) {
+	m(B, e);
 }
-function B() {
-	return o(R, {});
+function H() {
+	return o(B, {});
 }
-function V(e, t) {
+function U(e, t) {
 	if (Object.keys(e).length === 0) return t;
-	let n = L({}, e);
+	let n = z({}, 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 = L(L({}, e.tools), t.tools)), n;
+	return (e.tools !== void 0 || t.tools !== void 0) && (n.tools = z(z({}, e.tools), t.tools)), n;
 }
 //#endregion
 //#region src/block-portal-registry.ts
-var H = "__blokPortalRegistry", U = () => {
+var W = "__blokPortalRegistry", G = () => {
 	let e = h(/* @__PURE__ */ new Map());
 	return {
 		entries: e,
 		register(t, n) {
 			e.set(t, s(n));
 		},
-		unregister(t) {
-			e.delete(t);
+		unregister(t, n) {
+			var r;
+			n !== void 0 && ((r = e.get(t)) == null ? void 0 : r.hostEl) !== n || e.delete(t);
 		},
 		setProps(t, n) {
 			let r = e.get(t);
 			r !== void 0 && Object.assign(r.props, n);
 		}
 	};
-}, W = /* @__PURE__ */ new WeakMap();
-function G(e, t) {
-	W.set(e, t);
+}, K = /* @__PURE__ */ new WeakMap();
+function q(e, t) {
+	K.set(e, t);
 }
-function K(e) {
-	return W.get(e);
+function J(e) {
+	return K.get(e);
 }
-function q(e) {
-	W.delete(e);
+function oe(e) {
+	K.delete(e);
 }
 //#endregion
 //#region src/useBlok.ts
-var J = (e, t) => {
+var Y = (e) => ({
+	onChange: e.onChange !== void 0,
+	onSave: e.onSave !== void 0,
+	onEnter: e.onEnter !== void 0,
+	onSubmit: e.onSubmit !== void 0,
+	onBeforeRender: e.onBeforeRender !== void 0,
+	onAfterRender: e.onAfterRender !== void 0
+}), se = (e, t) => {
 	if (typeof e != "object" || !e) return e;
 	let n = {};
 	for (let [i, a] of Object.entries(e)) {
@@ -130,48 +150,82 @@ var J = (e, t) => {
 			n[i] = a;
 			continue;
 		}
-		let o = typeof a == "function" ? { class: a } : L({}, a);
-		o.config = L(L({}, (r = o.config) == null ? {} : r), {}, { [H]: t }), n[i] = o;
+		let o = typeof a == "function" ? { class: a } : z({}, a);
+		o.config = z(z({}, (r = o.config) == null ? {} : r), {}, { [W]: t }), n[i] = o;
 	}
 	return n;
 };
-function Y(e, t) {
-	let n = _(null), r = o(R, {}), i = () => V(r, y(e)), a = {
+function X(e, t) {
+	let n = _(null), r = o(B, {}), i = () => U(r, y(e)), a = {
 		current: null,
 		holder: null,
 		lastRenderedData: i().data,
 		seededEditor: null,
-		renderChain: Promise.resolve()
-	}, s = () => {
-		let t = L({}, V(v(r), v(y(e))));
-		return delete t.holder, t.data !== void 0 && (t.data = v(t.data)), t;
+		renderChain: Promise.resolve(),
+		appliedHandlerPresence: {
+			onChange: !1,
+			onSave: !1,
+			onEnter: !1,
+			onSubmit: !1,
+			onBeforeRender: !1,
+			onAfterRender: !1
+		}
+	}, s = {
+		onChange: (...e) => {
+			var t, n;
+			(t = (n = i()).onChange) == null || t.call(n, ...e);
+		},
+		onSave: (...e) => {
+			var t, n;
+			a.lastRenderedData = e[0], (t = (n = i()).onSave) == null || t.call(n, ...e);
+		},
+		onEnter: (...e) => {
+			var t, n;
+			return (t = (n = i()).onEnter) == null ? void 0 : t.call(n, ...e);
+		},
+		onSubmit: (...e) => {
+			var t, n;
+			(t = (n = i()).onSubmit) == null || t.call(n, ...e);
+		},
+		onBeforeRender: (...e) => {
+			var t, n, r;
+			return (t = (n = (r = i()).onBeforeRender) == null ? void 0 : n.call(r, ...e)) == null ? e[0] : t;
+		},
+		onAfterRender: (...e) => {
+			var t, n;
+			(t = (n = i()).onAfterRender) == null || t.call(n, ...e);
+		}
 	}, c = () => {
+		let t = z({}, U(v(r), v(y(e))));
+		return delete t.holder, t.data !== void 0 && (t.data = v(t.data)), t;
+	}, u = () => {
 		if (a.current !== null) {
-			j(a.current), q(a.current);
+			F(a.current), oe(a.current), j(a.current);
 			try {
 				a.current.destroy();
 			} catch (e) {}
 		}
 		a.current = null, a.holder = null, n.value = null;
-	}, u = () => {
+	}, f = () => {
 		let e = document.createElement("div");
 		a.holder = e;
-		let t = s(), r = U();
-		t.tools !== void 0 && (t.tools = J(t.tools, r)), typeof t.onSave == "function" && (t.onSave = (...e) => {
-			var t, n;
-			a.lastRenderedData = e[0], (t = (n = i()).onSave) == null || t.call(n, ...e);
-		});
-		let o = new x(L(L({}, t), {}, { holder: e }));
-		a.current = o, te(o, e), G(o, r), o.isReady.then(() => {
-			a.current === o && (n.value = o);
+		let t = c(), r = G();
+		t.tools !== void 0 && (t.tools = se(t.tools, r));
+		let o = Y(i());
+		t.onChange = o.onChange ? s.onChange : void 0, t.onSave = o.onSave ? s.onSave : void 0, t.onEnter = o.onEnter ? s.onEnter : void 0, t.onSubmit = o.onSubmit ? s.onSubmit : void 0, t.onBeforeRender = o.onBeforeRender ? s.onBeforeRender : void 0, t.onAfterRender = o.onAfterRender ? s.onAfterRender : void 0, a.appliedHandlerPresence = o;
+		let l = new x(z(z({}, t), {}, { holder: e }));
+		a.current = l, N(l, e), q(l, r), A(l, { markRendered: (e) => {
+			a.lastRenderedData = e;
+		} }), l.isReady.then(() => {
+			a.current === l && (n.value = l);
 		}).catch(() => {
-			a.current === o && c();
+			a.current === l && u();
 		});
 	};
 	b([
 		n,
-		() => D(i().readOnly).enabled,
-		() => D(i().readOnly).hideControls,
+		() => O(i().readOnly).enabled,
+		() => O(i().readOnly).hideControls,
 		() => typeof i().readOnly == "object"
 	], ([e, t, n, r]) => {
 		e && (r ? e.readOnly.set(t, { hideControls: n }) : e.readOnly.set(t));
@@ -184,75 +238,93 @@ function Y(e, t) {
 	}, { immediate: !0 }), b([n, () => i().placeholder], ([e, t]) => {
 		e && t !== void 0 && e.placeholder.set(t);
 	}, { immediate: !0 });
-	let f = { value: void 0 };
+	let p = { value: void 0 };
 	b([n, () => {
 		var e;
 		return (e = i().style) == null ? void 0 : e.tokens;
 	}], ([e, t]) => {
-		!e || t === void 0 || w(t, f.value) || (f.value = L({}, t), e.tokens.set(t));
+		!e || t === void 0 || T(t, p.value) || (p.value = z({}, t), e.tokens.set(t));
 	}, {
 		immediate: !0,
 		deep: !0
 	});
-	let p = { value: i().i18n };
+	let m = { value: i().i18n };
 	b([n, () => i().i18n], ([e, t]) => {
-		if (!e || t === void 0 || w(t, p.value)) return;
-		p.value = L({}, t);
+		if (!e || t === void 0 || T(t, m.value)) return;
+		m.value = z({}, t);
 		let { locale: n, messages: r, direction: i } = t;
-		e.i18n.update(L(L(L({}, n === void 0 ? {} : { locale: n }), r === void 0 ? {} : { messages: r }), i === void 0 ? {} : { direction: i }));
+		e.i18n.update(z(z(z({}, n === void 0 ? {} : { locale: n }), r === void 0 ? {} : { messages: r }), i === void 0 ? {} : { direction: i }));
 	}, {
 		immediate: !0,
 		deep: !0
 	});
-	let m = {
+	let h = {
 		editor: null,
 		value: void 0
 	};
 	return b([n, () => i().inlineToolbar], ([e, t]) => {
-		if (!e || t === void 0 || m.editor === e && w(t, m.value)) return;
+		if (!e || t === void 0 || h.editor === e && T(t, h.value)) return;
 		let n = Array.isArray(t) ? [...t] : t;
-		m.editor = e, m.value = n, e.tools.setInlineToolbar(n);
+		h.editor = e, h.value = n, e.tools.setInlineToolbar(n);
 	}, {
 		immediate: !0,
 		deep: !0
 	}), b([n, () => i().autofocus], ([e, t]) => {
 		e && t && e.focus();
+	}, { immediate: !0 }), b([n, () => JSON.stringify(Y(i()))], ([e]) => {
+		if (!e) return;
+		let t = Y(i()), n = a.appliedHandlerPresence, r = {}, o = { value: !1 }, c = (e, r) => {
+			t[e] !== n[e] && (n[e] = t[e], o.value = !0, r(t[e] ? s[e] : void 0));
+		};
+		c("onChange", (e) => {
+			r.onChange = e;
+		}), c("onSave", (e) => {
+			r.onSave = e;
+		}), c("onEnter", (e) => {
+			r.onEnter = e;
+		}), c("onSubmit", (e) => {
+			r.onSubmit = e;
+		}), c("onBeforeRender", (e) => {
+			r.onBeforeRender = e;
+		}), c("onAfterRender", (e) => {
+			r.onAfterRender = e;
+		}), o.value && e.handlers.set(r);
 	}, { immediate: !0 }), b([n, () => i().data], ([e, t]) => {
-		if (!(!e || t === void 0)) {
-			if (a.seededEditor !== e) {
-				a.seededEditor = e, a.lastRenderedData = t;
-				return;
-			}
-			w(t, a.lastRenderedData) || (a.lastRenderedData = t, a.renderChain = a.renderChain.catch(() => void 0).then(() => e.render(O(v(t)))));
+		if (!e || t === void 0) return;
+		if (a.seededEditor !== e) {
+			a.seededEditor = e, a.lastRenderedData = t;
+			return;
 		}
+		let n = a.lastRenderedData;
+		n !== void 0 && te(t, n) || (a.lastRenderedData = t, a.renderChain = a.renderChain.catch(() => void 0).then(() => e.render(ne(v(t)))));
 	}, { immediate: !0 }), t !== void 0 && b(() => y(t), () => {
-		c(), u();
-	}), d(u), l(c), n;
+		u(), f();
+	}), d(f), l(u), n;
 }
 //#endregion
 //#region src/useBlocks.ts
-var X = "block changed";
-function Z(e) {
+var Z = "block changed";
+function ce(e) {
 	let t = _(0), n = () => {
 		let t = y(e);
 		return t === null ? null : v(t);
 	}, r = () => {
 		t.value;
-	}, i = _(S), a = {
+	}, i = _(C), a = {
 		editor: null,
 		handler: null
 	}, o = () => {
-		a.editor !== null && a.handler !== null && a.editor.off(X, a.handler), a.editor = null, a.handler = null;
+		a.editor !== null && a.handler !== null && a.editor.off(Z, a.handler), a.editor = null, a.handler = null;
 	};
 	return b(() => n(), (e) => {
 		if (o(), t.value += 1, e === null) {
-			i.value = S;
+			i.value = C;
 			return;
 		}
 		let n = () => {
 			t.value += 1;
 		};
-		e.on(X, n), a.editor = e, a.handler = n, i.value = C(e, r);
+		e.on(Z, n), a.editor = e, a.handler = n, i.value = w(e, r);
 	}, { immediate: !0 }), f(o), {
 		getById: (e) => i.value.getById(e),
 		getChildren: (e) => i.value.getChildren(e),
@@ -287,7 +359,7 @@ function Z(e) {
 }
 //#endregion
 //#region src/useBlokReady.ts
-function ne(e = {}) {
+function le(e = {}) {
 	let { within: t, settleOn: n } = e, r = _(!1), i = () => {
 		var e;
 		let i = t === void 0 || (e = y(t)) == null ? null : e;
@@ -300,7 +372,7 @@ function ne(e = {}) {
 }
 //#endregion
 //#region src/BlockPortalHost.ts
-var re = r({
+var ue = r({
 	name: "BlockErrorBoundary",
 	setup(e, { slots: t }) {
 		return u(() => !1), () => {
@@ -308,7 +380,7 @@ var re = r({
 			return (e = t.default) == null ? void 0 : e.call(t);
 		};
 	}
-}), Q = r({
+}), de = r({
 	name: "BlockPortalHost",
 	props: { registry: {
 		type: Object,
@@ -318,35 +390,43 @@ var re = r({
 		return () => a(e, Array.from(n.registry.entries.entries()).map(([e, n]) => a(t, {
 			key: e,
 			to: n.hostEl
-		}, [a(re, null, { default: () => a(n.component, n.props) })])));
+		}, [a(ue, null, { default: () => a(n.component, n.props) })])));
 	}
-}), $ = r({
+}), Q = Symbol("BLOK_EDITOR_INSTANCE"), fe = _(null);
+function pe() {
+	return o(Q, fe);
+}
+//#endregion
+//#region src/BlokContent.ts
+var $ = r({
 	name: "BlokContent",
 	props: { editor: {
 		type: Object,
 		default: null
 	} },
 	setup(e) {
-		let t = g(null), n = (e) => {
+		let t = g(null);
+		m(Q, n(() => e.editor === null ? null : v(e.editor)));
+		let r = (e) => {
 			if (t.value === null || e === null) return;
-			let n = A(v(e));
+			let n = P(v(e));
 			n !== void 0 && t.value.appendChild(n);
-		}, r = (e) => {
+		}, i = (e) => {
 			var t;
-			e !== null && ((t = A(v(e))) == null || t.remove());
+			e !== null && ((t = P(v(e))) == null || t.remove());
 		};
 		return d(() => {
-			n(e.editor);
+			r(e.editor);
 		}), b(() => e.editor, (e, t) => {
-			r(t == null ? null : t), n(e);
+			i(t == null ? null : t), r(e);
 		}), l(() => {
-			r(e.editor);
+			i(e.editor);
 		}), () => {
-			let n = e.editor, r = n === null ? void 0 : K(v(n));
-			return a("div", { ref: t }, r === void 0 ? [] : [a(Q, { registry: r })]);
+			let n = e.editor, r = n === null ? void 0 : J(v(n));
+			return a("div", { ref: t }, r === void 0 ? [] : [a(de, { registry: r })]);
 		};
 	}
-}), ie = /* @__PURE__ */ "autofocus.defaultBlock.dataModel.placeholder.sanitizer.hideToolbar.maxHistoryLength.historyDebounceTime.newGroupDelay.globalUndoRedo.tools.data.minHeight.logLevel.readOnly.i18n.link.linkPaste.inlineToolbar.tunes.style.theme.scrollToBlock.user.resolveUser.notifierPosition.notifier.width.onBeforeRender.onBeforePaste.onEnter.onSubmit.onError.migrations.uploader".split("."), ae = r({
+}), me = /* @__PURE__ */ "autofocus.defaultBlock.dataModel.placeholder.sanitizer.hideToolbar.maxHistoryLength.historyDebounceTime.newGroupDelay.globalUndoRedo.tools.data.minHeight.logLevel.readOnly.i18n.link.linkPaste.inlineToolbar.tunes.style.theme.scrollToBlock.user.resolveUser.notifierPosition.notifier.width.onBeforeRender.onBeforePaste.onEnter.onSubmit.onError.migrations.uploader.captureClicksBelowEditor".split("."), he = r({
 	name: "BlokEditor",
 	inheritAttrs: !1,
 	props: {
@@ -490,6 +570,10 @@ var re = r({
 			type: Object,
 			default: void 0
 		},
+		captureClicksBelowEditor: {
+			type: Boolean,
+			default: void 0
+		},
 		recreateKey: { type: null }
 	},
 	emits: {
@@ -503,36 +587,40 @@ var re = r({
 		"block-rendered": (e) => !0
 	},
 	setup(e, { emit: t, expose: r, attrs: o }) {
-		let s = i(), c = (e) => {
-			let t = s == null ? void 0 : s.vnode.props;
-			return t != null && e in t;
-		}, l = () => {
+		let s = i(), c = () => {
+			let e = s == null ? void 0 : s.vnode.props;
+			return e == null ? "" : Object.keys(e).filter((e) => e.startsWith("on")).sort().join("|");
+		}, l = g(c());
+		p(() => {
+			l.value = c();
+		});
+		let u = (e) => l.value.split("|").includes(e), d = () => {
 			let n = {};
-			for (let t of ie) {
+			for (let t of me) {
 				let r = e[t];
 				r !== void 0 && (n[t] = r);
 			}
-			return c("onChange") && (n.onChange = (e, n) => {
+			return u("onChange") && (n.onChange = (e, n) => {
 				t("change", {
 					api: e,
 					event: n
 				});
-			}), (c("onSave") || c("onUpdate:data")) && (n.onSave = (e) => {
+			}), (u("onSave") || u("onUpdate:data")) && (n.onSave = (e) => {
 				t("update:data", e), t("save", e);
-			}), c("onAfterRender") && (n.onAfterRender = (e) => {
+			}), u("onAfterRender") && (n.onAfterRender = (e) => {
 				t("after-render", e);
-			}), c("onThemeChange") && (n.onThemeChange = (e) => {
+			}), u("onThemeChange") && (n.onThemeChange = (e) => {
 				t("theme-change", e);
 			}), n;
-		}, u = Y(() => l(), () => e.recreateKey);
-		b(u, (e, n, r) => {
+		}, f = X(() => d(), () => e.recreateKey);
+		b([f, l], ([e], n, r) => {
 			if (e === null) return;
 			let i = [];
-			if (c("onBlocksRendered")) {
+			if (u("onBlocksRendered")) {
 				let n = (e) => t("blocks-rendered", e);
 				e.on("blocks:rendered", n), i.push(["blocks:rendered", n]);
 			}
-			if (c("onBlockRendered")) {
+			if (u("onBlockRendered")) {
 				let n = (e) => t("block-rendered", e);
 				e.on("block:rendered", n), i.push(["block:rendered", n]);
 			}
@@ -540,41 +628,87 @@ var re = r({
 				for (let [t, n] of i) e.off(t, n);
 			});
 		});
-		let d = { last: null };
-		return b(u, (e) => {
-			e !== null && e !== d.last && (d.last = e, t("ready", e));
+		let m = { last: null };
+		return b(f, (e) => {
+			e !== null && e !== m.last && (m.last = e, t("ready", e));
 		}), r({
-			instance: n(() => u.value),
+			instance: n(() => f.value),
 			save: () => {
 				var e;
-				return (e = u.value) == null ? void 0 : e.save();
+				return (e = f.value) == null ? void 0 : e.save();
 			},
 			focus: (e) => {
 				var t;
-				(t = u.value) == null || t.focus(e);
+				(t = f.value) == null || t.focus(e);
 			},
 			render: (e) => {
-				var t;
-				return (t = u.value) == null ? void 0 : t.render(e);
+				let t = f.value;
+				if (t !== null) return t.render(e).then(() => {
+					var n;
+					(n = re(t)) == null || n.markRendered(e);
+				});
 			}
-		}), () => a($, L({ editor: u.value }, o));
+		}), () => a($, z({ editor: f.value }, o));
 	}
-});
-//#endregion
-//#region src/createVueBlock.ts
-function oe(e) {
-	var t;
-	let n = r({
+}), ge = [
+	"toolbox",
+	"isReadOnlySupported",
+	"__isBlokVueBlock"
+], _e = /* @__PURE__ */ new Set([
+	void 0,
+	"user",
+	"api",
+	"convert"
+]), ve = (e, t, n) => {
+	let r = /* @__PURE__ */ new Map();
+	t.forEach((e, t) => {
+		var i;
+		let a = [];
+		for (let [r, o] of Object.entries((i = n == null ? void 0 : n(e, t)) == null ? {} : i)) {
+			if (o == null) {
+				e.holder.removeAttribute(r);
+				continue;
+			}
+			e.holder.setAttribute(r, String(o)), a.push(r);
+		}
+		r.set(e.id, {
+			holder: e.holder,
+			names: a
+		});
+	});
+	for (let [t, n] of e) {
+		let e = r.get(t);
+		n.names.filter((t) => e === void 0 || !e.names.includes(t)).forEach((e) => n.holder.removeAttribute(e));
+	}
+	e.clear(), r.forEach((t, n) => e.set(n, t));
+}, ye = (e, t, n) => {
+	var r;
+	e == null || (r = e.events) == null || r.emit(ee, {
+		blockId: t,
+		childIds: n.map((e) => e.id)
+	});
+};
+function be(e) {
+	var t, n;
+	let i = () => r({
 		name: `VueBlock(${e.type})`,
-		props: { ctx: {
-			type: Object,
-			required: !0
-		} },
+		props: {
+			ctx: {
+				type: Object,
+				required: !0
+			},
+			notifyMounted: {
+				type: Function,
+				default: void 0
+			}
+		},
 		setup(t) {
-			return e.setup(t.ctx);
+			return d(() => {
+				var e;
+				return (e = t.notifyMounted) == null ? void 0 : e.call(t);
+			}), e.setup(t.ctx);
 		}
-	});
-	return t = class {
+	}), o = (t = class {
 		static get toolbox() {
 			return e.toolbox;
 		}
@@ -582,28 +716,46 @@ function oe(e) {
 			return !0;
 		}
 		constructor(t) {
-			var n, i;
-			this.hostEl = null, this.pendingDispatch = !1, this.commit = (t) => {
-				let n = T(e.propSchema, L(L({}, this.mirror), t));
-				w(n, this.mirror) || (this.mirror = n, this.lastRendered = n, this.dataRef.value = n, this.flushDispatch());
+			var n, o, s;
+			this.wrappedComponent = i(), this.mountSignalled = !1, this.hostEl = null, this.pendingDispatch = !1, this.notifyMounted = () => {
+				var t;
+				if (this.mountSignalled) return;
+				this.mountSignalled = !0;
+				let n = {
+					origin: this.origin,
+					api: this.api
+				};
+				if ((t = e.onMounted) == null || t.call(e, this.blockApi, n), _e.has(this.origin)) {
+					var r;
+					(r = e.onCreated) == null || r.call(e, this.blockApi, n);
+				}
+			}, this.commit = (t) => {
+				let n = E(e.propSchema, z(z({}, this.mirror), t));
+				T(n, this.mirror) || (this.mirror = n, this.lastRendered = n, this.dataRef.value = n, this.flushDispatch());
 			}, this.blockApi = t.block;
-			let o = (n = t.config) == null ? {} : n;
-			this.registry = o[H];
-			let s = t.api;
+			let c = (n = t.config) == null ? {} : n;
+			this.registry = c[W], this.api = t.api;
+			let l = t.api;
 			this.pointerDrag = () => {
 				var e;
-				return (s == null || (e = s.blocks) == null ? void 0 : e.isPointerDragActive) === !0;
-			}, this.mirror = T(e.propSchema, v((i = t.data) == null ? {} : i)), this.lastRendered = this.mirror, this.dataRef = _(this.mirror), this.readOnlyRef = _(t.readOnly);
-			let c = this.blockApi;
+				return (l == null || (e = l.blocks) == null ? void 0 : e.isPointerDragActive) === !0;
+			}, this.mirror = E(e.propSchema, v((o = t.data) == null ? {} : o)), this.lastRendered = this.mirror, this.dataRef = _(this.mirror), this.readOnlyRef = _(t.readOnly), this.origin = (s = t.origin) == null ? "api" : s;
+			let u = this.blockApi, f = this.api;
 			this.childrenComponent = r({
 				name: `VueBlockChildren(${e.type})`,
-				setup() {
-					let e = g(null), t = () => {
-						e.value !== null && E(e.value, c.getChildren());
+				props: { childAttributes: {
+					type: Function,
+					default: void 0
+				} },
+				setup(e) {
+					let t = g(null), n = /* @__PURE__ */ new Map(), r = () => {
+						if (t.value === null) return;
+						let r = u.getChildren();
+						D(t.value, r), ve(n, r, e.childAttributes), ye(f, u.id, r);
 					};
-					return d(t), p(t), () => a("div", {
-						ref: e,
-						[ee.nestedBlocks]: ""
+					return d(r), p(r), () => a("div", {
+						ref: t,
+						[S.nestedBlocks]: ""
 					});
 				}
 			});
@@ -612,17 +764,21 @@ function oe(e) {
 			var e;
 			let t = document.createElement("div");
 			t.setAttribute("data-blok-mutation-free", "true"), this.hostEl = t;
-			let r = {
+			let n = {
 				data: this.dataRef,
 				commit: this.commit,
 				block: this.blockApi,
+				api: this.api,
 				readOnly: this.readOnlyRef,
 				BlockChildren: this.childrenComponent
 			};
 			return (e = this.registry) == null || e.register(this.blockApi.id, {
 				hostEl: t,
-				component: n,
-				props: { ctx: r }
+				component: this.wrappedComponent,
+				props: {
+					ctx: n,
+					notifyMounted: this.notifyMounted
+				}
 			}), t;
 		}
 		rendered() {
@@ -634,23 +790,28 @@ function oe(e) {
 		}
 		async setData(t) {
 			var n = this;
-			let r = T(e.propSchema, v(t == null ? {} : t));
-			return w(r, n.lastRendered) ? !0 : (n.mirror = r, n.lastRendered = r, n.dataRef.value = r, await c(), !0);
+			let r = E(e.propSchema, v(t == null ? {} : t));
+			return T(r, n.lastRendered) ? !0 : (n.mirror = r, n.lastRendered = r, n.dataRef.value = r, await c(), !0);
 		}
 		setReadOnly(e) {
 			this.readOnlyRef.value = e;
 		}
+		getToolbarAnchorElement() {
+			var t;
+			let n = this.hostEl;
+			if (!(n === null || e.getToolbarAnchorElement === void 0)) return (t = e.getToolbarAnchorElement(n, this.blockApi)) == null ? void 0 : t;
+		}
 		moved() {
 			var t;
 			(t = e.onMoved) == null || t.call(e, this.blockApi);
 		}
 		removed() {
-			var t, n;
-			(t = this.registry) == null || t.unregister(this.blockApi.id), (n = e.onRemoved) == null || n.call(e, this.blockApi);
+			var t, n, r;
+			(t = this.registry) == null || t.unregister(this.blockApi.id, (n = this.hostEl) == null ? void 0 : n), (r = e.onRemoved) == null || r.call(e, this.blockApi);
 		}
 		destroy() {
-			var e;
-			(e = this.registry) == null || e.unregister(this.blockApi.id);
+			var e, t;
+			(e = this.registry) == null || e.unregister(this.blockApi.id, (t = this.hostEl) == null ? void 0 : t);
 		}
 		flushDispatch() {
 			if (!this.pointerDrag()) {
@@ -668,7 +829,14 @@ function oe(e) {
 			};
 			requestAnimationFrame(e);
 		}
-	}, t.__isBlokVueBlock = !0, t;
+	}, t.__isBlokVueBlock = !0, t);
+	for (let [t, r] of Object.entries((n = e.statics) == null ? {} : n)) ge.includes(t) || Object.defineProperty(o, t, {
+		value: r,
+		writable: !0,
+		enumerable: !0,
+		configurable: !0
+	});
+	return o;
 }
 //#endregion
-export { R as BLOK_DEFAULT_CONFIG, $ as BlokContent, ae as BlokEditor, oe as createVueBlock, z as provideBlok, Z as useBlocks, Y as useBlok, B as useBlokDefaults, ne as useBlokReady };
+export { B as BLOK_DEFAULT_CONFIG, Q as BLOK_EDITOR_INSTANCE, $ as BlokContent, he as BlokEditor, be as createVueBlock, V as provideBlok, ce as useBlocks, X as useBlok, H as useBlokDefaults, pe as useBlokInstance, le as useBlokReady };