@bloklabs/react 1.1.1

package/dist/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`react`),t=require(`@bloklabs/core`),n=require(`@bloklabs/core/adapters`),r=require(`react/jsx-runtime`);var i=new WeakMap;function a(e,t){i.set(e,t)}function o(e){return i.get(e)}function s(e){i.delete(e)}function c(e){"@babel/helpers - typeof";return c=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},c(e)}function l(e,t){if(c(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(c(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function u(e){var t=l(e,`string`);return c(t)==`symbol`?t:t+``}function d(e,t,n){return(t=u(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function f(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function p(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?f(Object(n),!0).forEach(function(t){d(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):f(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}var m=(0,e.createContext)({});function h({defaults:e,children:t}){return(0,r.jsx)(m.Provider,{value:e,children:t})}function g(){return(0,e.useContext)(m)}function _(e,t){if(Object.keys(e).length===0)return t;let n=p({},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=p(p({},e.tools),t.tools)),n}function v(r,i){let o=_((0,e.useContext)(m),r),[c,l]=(0,e.useState)(null),u=(0,e.useRef)(o);u.current=o;let d=(0,e.useRef)({editor:null,holder:null,destroyTimeout:null,isDestroyed:!1,isEditorReady:!1,depsToken:null}),f=(0,e.useMemo)(()=>({}),i==null?[]:i),h=(0,e.useRef)(o.data),g=(0,e.useRef)(null),v=(0,e.useRef)(o.data),b=(0,e.useRef)(Promise.resolve()),x=(0,e.useRef)(void 0);(0,e.useEffect)(()=>{if(typeof window>`u`)return;let e=d.current;if(e.destroyTimeout!==null&&(clearTimeout(e.destroyTimeout),e.destroyTimeout=null),e.editor!==null&&!e.isDestroyed&&e.depsToken===f)return e.isEditorReady&&l(e.editor),()=>{y(e,l)};if(e.editor!==null&&!e.isDestroyed){s(e.editor);try{e.editor.destroy()}catch(e){}e.editor=null,e.holder=null,e.isDestroyed=!0,e.isEditorReady=!1,l(null)}let n=document.createElement(`div`);e.holder=n,e.isDestroyed=!1,e.isEditorReady=!1,e.depsToken=f;let r=u.current,i=p(p({},r),{},{holder:n,onReady:(...e)=>{var t,n;(t=(n=u.current).onReady)==null||t.call(n,...e)},onChange:(...e)=>{var t,n;(t=(n=u.current).onChange)==null||t.call(n,...e)}});r.onSave&&(i.onSave=(...e)=>{var t,n;h.current=e[0],(t=(n=u.current).onSave)==null||t.call(n,...e)}),r.onBeforeRender&&(i.onBeforeRender=(...e)=>{var t,n,r;return(t=(n=(r=u.current).onBeforeRender)==null?void 0:n.call(r,...e))==null?e[0]:t}),r.onAfterRender&&(i.onAfterRender=(...e)=>{var t,n;(t=(n=u.current).onAfterRender)==null||t.call(n,...e)});let o=new t.Blok(i);return e.editor=o,v.current=r.data,a(o,n),o.isReady.then(()=>{e.editor===o&&!e.isDestroyed&&(e.isEditorReady=!0,l(o))}).catch(()=>{if(e.editor===o&&!e.isDestroyed){s(o);try{o.destroy()}catch(e){}e.editor=null,e.holder=null,e.isDestroyed=!0,e.isEditorReady=!1,l(null)}}),()=>{y(e,l)}},[f]);let S=(0,n.normalizeReadOnlyConfig)(o.readOnly).enabled;(0,e.useEffect)(()=>{c!==null&&c.readOnly.set(S)},[c,S]);let{autofocus:C}=o;(0,e.useEffect)(()=>{c===null||!C||c.focus()},[c,C]);let{theme:w}=o;(0,e.useEffect)(()=>{c===null||w===void 0||c.theme.set(w)},[c,w]);let{width:T}=o;(0,e.useEffect)(()=>{c===null||T===void 0||c.width.set(T)},[c,T]);let{placeholder:E}=o;(0,e.useEffect)(()=>{c===null||E===void 0||c.placeholder.set(E)},[c,E]);let{data:D}=o;return(0,e.useEffect)(()=>{if(c===null||D===void 0)return;let e=d.current;if(!(e.editor!==c||e.isDestroyed)){if(g.current!==c&&(g.current=c,x.current=void 0,(0,n.deepEqual)(D,v.current))){h.current=D;return}(0,n.deepEqual)(D,h.current)||(0,n.deepEqual)(D,x.current)||(x.current=D,b.current=b.current.catch(()=>void 0).then(()=>c.render(D)).then(()=>{h.current=D},()=>{}).then(()=>{x.current===D&&(x.current=void 0)}))}},[c,D]),c}function y(e,t){e.destroyTimeout=setTimeout(()=>{if(e.editor!==null){s(e.editor);try{e.editor.destroy()}catch(e){}e.editor=null,e.holder=null,e.isDestroyed=!0,e.isEditorReady=!1,e.destroyTimeout=null,t(null)}},0)}function b(e,t){if(e==null)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}function x(e,t){if(e==null)return{};var n,r,i=b(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])}return i}var S=[`editor`],C=(0,e.forwardRef)(function(t,n){let{editor:i}=t,a=x(t,S),s=(0,e.useRef)(null);return(0,e.useEffect)(()=>{if(i===null||s.current===null)return;let e=o(i);if(e!==void 0)return s.current.appendChild(e),()=>{e.remove()}},[i]),(0,r.jsx)(`div`,p({ref:e=>{if(s.current=e,typeof n==`function`)n(e);else if(n!=null){let t=n;t.current=e}}},a))}),w=`autofocus.defaultBlock.dataModel.placeholder.sanitizer.hideToolbar.maxHistoryLength.historyDebounceTime.newGroupDelay.globalUndoRedo.tools.data.minHeight.logLevel.readOnly.i18n.link.linkPaste.onBeforePaste.onReady.onChange.onSave.onBeforeRender.onAfterRender.inlineToolbar.tunes.style.theme.onThemeChange.scrollToBlock.user.resolveUser.notifierPosition.notifier.width`.split(`.`),T=[`deps`,`onReady`,`onBlocksRendered`,`onBlockRendered`],E=new Set(w),D=(0,e.forwardRef)(function(t,n){let{deps:i,onReady:a,onBlocksRendered:o,onBlockRendered:s}=t,c=x(t,T),l={},u={};for(let e of Object.keys(c)){let t=c[e];E.has(e)?l[e]=t:u[e]=t}let d=v(l,i);(0,e.useImperativeHandle)(n,()=>d,[d]);let f=(0,e.useRef)(a);f.current=a,(0,e.useEffect)(()=>{if(d!==null){var e;(e=f.current)==null||e.call(f,d)}},[d]);let m=(0,e.useRef)(o);m.current=o;let h=(0,e.useRef)(s);h.current=s;let g=!!o,_=!!s;return(0,e.useEffect)(()=>{if(d===null)return;let e=[];if(g){let t=e=>{var t;return(t=m.current)==null?void 0:t.call(m,e)};d.on(`blocks:rendered`,t),e.push([`blocks:rendered`,t])}if(_){let t=e=>{var t;return(t=h.current)==null?void 0:t.call(h,e)};d.on(`block:rendered`,t),e.push([`block:rendered`,t])}return()=>{for(let[t,n]of e)d.off(t,n)}},[d,g,_]),(0,r.jsx)(C,p({editor:d},u))}),O=`block changed`;function k(t){let r=(0,e.useRef)(0),i=(0,e.useRef)(t);i.current!==t&&(i.current=t,r.current=0);let a=(0,e.useCallback)(e=>{if(t===null)return()=>void 0;let n=()=>{r.current+=1,e()};return t.on(O,n),()=>t.off(O,n)},[t]),o=(0,e.useCallback)(()=>r.current,[]);return(0,e.useSyncExternalStore)(a,o,o),(0,e.useMemo)(()=>t===null?n.EMPTY_API:(0,n.createBlocksApiForEditor)(t),[t])}exports.BlokContent=C,exports.BlokEditor=D,exports.BlokProvider=h,exports.useBlocks=k,exports.useBlok=v,exports.useBlokDefaults=g;

package/dist/index.mjs

@@ -0,0 +1,313 @@
+import { createContext as e, forwardRef as t, useCallback as n, useContext as r, useEffect as i, useImperativeHandle as a, useMemo as o, useRef as s, useState as c, useSyncExternalStore as l } from "react";
+import { Blok as u } from "@bloklabs/core";
+import { EMPTY_API as d, createBlocksApiForEditor as f, deepEqual as p, normalizeReadOnlyConfig as m } from "@bloklabs/core/adapters";
+import { jsx as h } from "react/jsx-runtime";
+//#region src/holder-map.ts
+var g = /* @__PURE__ */ new WeakMap();
+function _(e, t) {
+	g.set(e, t);
+}
+function v(e) {
+	return g.get(e);
+}
+function y(e) {
+	g.delete(e);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.126.0/helpers/typeof.js
+function b(e) {
+	"@babel/helpers - typeof";
+	return b = 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;
+	}, b(e);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.126.0/helpers/toPrimitive.js
+function x(e, t) {
+	if (b(e) != "object" || !e) return e;
+	var n = e[Symbol.toPrimitive];
+	if (n !== void 0) {
+		var r = n.call(e, t || "default");
+		if (b(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.126.0/helpers/toPropertyKey.js
+function S(e) {
+	var t = x(e, "string");
+	return b(t) == "symbol" ? t : t + "";
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.126.0/helpers/defineProperty.js
+function C(e, t, n) {
+	return (t = S(t)) in e ? Object.defineProperty(e, t, {
+		value: n,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[t] = n, e;
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.126.0/helpers/objectSpread2.js
+function w(e, t) {
+	var n = Object.keys(e);
+	if (Object.getOwnPropertySymbols) {
+		var r = Object.getOwnPropertySymbols(e);
+		t && (r = r.filter(function(t) {
+			return Object.getOwnPropertyDescriptor(e, t).enumerable;
+		})), n.push.apply(n, r);
+	}
+	return n;
+}
+function T(e) {
+	for (var t = 1; t < arguments.length; t++) {
+		var n = arguments[t] == null ? {} : arguments[t];
+		t % 2 ? w(Object(n), !0).forEach(function(t) {
+			C(e, t, n[t]);
+		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : w(Object(n)).forEach(function(t) {
+			Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
+		});
+	}
+	return e;
+}
+//#endregion
+//#region src/provide-blok.tsx
+var E = e({});
+function D({ defaults: e, children: t }) {
+	return /* @__PURE__ */ h(E.Provider, {
+		value: e,
+		children: t
+	});
+}
+function O() {
+	return r(E);
+}
+function k(e, t) {
+	if (Object.keys(e).length === 0) return t;
+	let n = T({}, 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 = T(T({}, e.tools), t.tools)), n;
+}
+//#endregion
+//#region src/useBlok.ts
+function A(e, t) {
+	let n = k(r(E), e), [a, l] = c(null), d = s(n);
+	d.current = n;
+	let f = s({
+		editor: null,
+		holder: null,
+		destroyTimeout: null,
+		isDestroyed: !1,
+		isEditorReady: !1,
+		depsToken: null
+	}), h = o(() => ({}), t == null ? [] : t), g = s(n.data), v = s(null), b = s(n.data), x = s(Promise.resolve()), S = s(void 0);
+	i(() => {
+		if (typeof window > "u") return;
+		let e = f.current;
+		if (e.destroyTimeout !== null && (clearTimeout(e.destroyTimeout), e.destroyTimeout = null), e.editor !== null && !e.isDestroyed && e.depsToken === h) return e.isEditorReady && l(e.editor), () => {
+			j(e, l);
+		};
+		if (e.editor !== null && !e.isDestroyed) {
+			y(e.editor);
+			try {
+				e.editor.destroy();
+			} catch (e) {}
+			e.editor = null, e.holder = null, e.isDestroyed = !0, e.isEditorReady = !1, l(null);
+		}
+		let t = document.createElement("div");
+		e.holder = t, e.isDestroyed = !1, e.isEditorReady = !1, e.depsToken = h;
+		let n = d.current, r = T(T({}, n), {}, {
+			holder: t,
+			onReady: (...e) => {
+				var t, n;
+				(t = (n = d.current).onReady) == null || t.call(n, ...e);
+			},
+			onChange: (...e) => {
+				var t, n;
+				(t = (n = d.current).onChange) == null || t.call(n, ...e);
+			}
+		});
+		n.onSave && (r.onSave = (...e) => {
+			var t, n;
+			g.current = e[0], (t = (n = d.current).onSave) == null || t.call(n, ...e);
+		}), n.onBeforeRender && (r.onBeforeRender = (...e) => {
+			var t, n, r;
+			return (t = (n = (r = d.current).onBeforeRender) == null ? void 0 : n.call(r, ...e)) == null ? e[0] : t;
+		}), n.onAfterRender && (r.onAfterRender = (...e) => {
+			var t, n;
+			(t = (n = d.current).onAfterRender) == null || t.call(n, ...e);
+		});
+		let i = new u(r);
+		return e.editor = i, b.current = n.data, _(i, t), i.isReady.then(() => {
+			e.editor === i && !e.isDestroyed && (e.isEditorReady = !0, l(i));
+		}).catch(() => {
+			if (e.editor === i && !e.isDestroyed) {
+				y(i);
+				try {
+					i.destroy();
+				} catch (e) {}
+				e.editor = null, e.holder = null, e.isDestroyed = !0, e.isEditorReady = !1, l(null);
+			}
+		}), () => {
+			j(e, l);
+		};
+	}, [h]);
+	let C = m(n.readOnly).enabled;
+	i(() => {
+		a !== null && a.readOnly.set(C);
+	}, [a, C]);
+	let { autofocus: w } = n;
+	i(() => {
+		a === null || !w || a.focus();
+	}, [a, w]);
+	let { theme: D } = n;
+	i(() => {
+		a === null || D === void 0 || a.theme.set(D);
+	}, [a, D]);
+	let { width: O } = n;
+	i(() => {
+		a === null || O === void 0 || a.width.set(O);
+	}, [a, O]);
+	let { placeholder: A } = n;
+	i(() => {
+		a === null || A === void 0 || a.placeholder.set(A);
+	}, [a, A]);
+	let { data: M } = n;
+	return i(() => {
+		if (a === null || M === void 0) return;
+		let e = f.current;
+		if (!(e.editor !== a || e.isDestroyed)) {
+			if (v.current !== a && (v.current = a, S.current = void 0, p(M, b.current))) {
+				g.current = M;
+				return;
+			}
+			p(M, g.current) || p(M, S.current) || (S.current = M, x.current = x.current.catch(() => void 0).then(() => a.render(M)).then(() => {
+				g.current = M;
+			}, () => {}).then(() => {
+				S.current === M && (S.current = void 0);
+			}));
+		}
+	}, [a, M]), a;
+}
+function j(e, t) {
+	e.destroyTimeout = setTimeout(() => {
+		if (e.editor !== null) {
+			y(e.editor);
+			try {
+				e.editor.destroy();
+			} catch (e) {}
+			e.editor = null, e.holder = null, e.isDestroyed = !0, e.isEditorReady = !1, e.destroyTimeout = null, t(null);
+		}
+	}, 0);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.126.0/helpers/objectWithoutPropertiesLoose.js
+function M(e, t) {
+	if (e == null) return {};
+	var n = {};
+	for (var r in e) if ({}.hasOwnProperty.call(e, r)) {
+		if (t.includes(r)) continue;
+		n[r] = e[r];
+	}
+	return n;
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.126.0/helpers/objectWithoutProperties.js
+function N(e, t) {
+	if (e == null) return {};
+	var n, r, i = M(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]);
+	}
+	return i;
+}
+//#endregion
+//#region src/BlokContent.tsx
+var P = ["editor"], F = t(function(e, t) {
+	let { editor: n } = e, r = N(e, P), a = s(null);
+	return i(() => {
+		if (n === null || a.current === null) return;
+		let e = v(n);
+		if (e !== void 0) return a.current.appendChild(e), () => {
+			e.remove();
+		};
+	}, [n]), /* @__PURE__ */ h("div", T({ ref: (e) => {
+		if (a.current = e, typeof t == "function") t(e);
+		else if (t != null) {
+			let n = t;
+			n.current = e;
+		}
+	} }, r));
+}), I = /* @__PURE__ */ "autofocus.defaultBlock.dataModel.placeholder.sanitizer.hideToolbar.maxHistoryLength.historyDebounceTime.newGroupDelay.globalUndoRedo.tools.data.minHeight.logLevel.readOnly.i18n.link.linkPaste.onBeforePaste.onReady.onChange.onSave.onBeforeRender.onAfterRender.inlineToolbar.tunes.style.theme.onThemeChange.scrollToBlock.user.resolveUser.notifierPosition.notifier.width".split("."), L = [
+	"deps",
+	"onReady",
+	"onBlocksRendered",
+	"onBlockRendered"
+], R = new Set(I), z = t(function(e, t) {
+	let { deps: n, onReady: r, onBlocksRendered: o, onBlockRendered: c } = e, l = N(e, L), u = {}, d = {};
+	for (let e of Object.keys(l)) {
+		let t = l[e];
+		R.has(e) ? u[e] = t : d[e] = t;
+	}
+	let f = A(u, n);
+	a(t, () => f, [f]);
+	let p = s(r);
+	p.current = r, i(() => {
+		if (f !== null) {
+			var e;
+			(e = p.current) == null || e.call(p, f);
+		}
+	}, [f]);
+	let m = s(o);
+	m.current = o;
+	let g = s(c);
+	g.current = c;
+	let _ = !!o, v = !!c;
+	return i(() => {
+		if (f === null) return;
+		let e = [];
+		if (_) {
+			let t = (e) => {
+				var t;
+				return (t = m.current) == null ? void 0 : t.call(m, e);
+			};
+			f.on("blocks:rendered", t), e.push(["blocks:rendered", t]);
+		}
+		if (v) {
+			let t = (e) => {
+				var t;
+				return (t = g.current) == null ? void 0 : t.call(g, e);
+			};
+			f.on("block:rendered", t), e.push(["block:rendered", t]);
+		}
+		return () => {
+			for (let [t, n] of e) f.off(t, n);
+		};
+	}, [
+		f,
+		_,
+		v
+	]), /* @__PURE__ */ h(F, T({ editor: f }, d));
+}), B = "block changed";
+function V(e) {
+	let t = s(0), r = s(e);
+	r.current !== e && (r.current = e, t.current = 0);
+	let i = n((n) => {
+		if (e === null) return () => void 0;
+		let r = () => {
+			t.current += 1, n();
+		};
+		return e.on(B, r), () => e.off(B, r);
+	}, [e]), a = n(() => t.current, []);
+	return l(i, a, a), o(() => e === null ? d : f(e), [e]);
+}
+//#endregion
+export { F as BlokContent, z as BlokEditor, D as BlokProvider, V as useBlocks, A as useBlok, O as useBlokDefaults };

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@bloklabs/react",
+  "version": "1.1.1",
+  "description": "React bindings for the Blok editor",
+  "license": "Apache-2.0",
+  "author": "JackUait",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JackUait/blok.git",
+    "directory": "packages/react"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "types",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "yarn run -T vite build --mode production"
+  },
+  "peerDependencies": {
+    "@bloklabs/core": "^1.1.1",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  }
+}

package/src/BlokContent.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useRef, forwardRef } from 'react';
+import { getHolder } from './holder-map';
+import type { BlokContentProps } from './types';
+
+/**
+ * Component that provides the DOM mount point for a Blok editor.
+ * Renders a <div> and adopts the editor's detached holder DOM into it.
+ * When editor is null, renders an empty div (for layout stability).
+ * Passes through all standard HTML div attributes (className, style, etc.).
+ */
+export const BlokContent = forwardRef<HTMLDivElement, BlokContentProps>(
+  function BlokContent({ editor, ...divProps }, ref) {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+
+    const setRefs = (node: HTMLDivElement | null): void => {
+      containerRef.current = node;
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref !== null && ref !== undefined) {
+        const mutableRef = ref;
+
+        mutableRef.current = node;
+      }
+    };
+
+    useEffect(() => {
+      if (editor === null || containerRef.current === null) {
+        return;
+      }
+
+      const holder = getHolder(editor);
+
+      if (holder === undefined) {
+        return;
+      }
+
+      containerRef.current.appendChild(holder);
+
+      return (): void => {
+        holder.remove();
+      };
+    }, [editor]);
+
+    return <div ref={setRefs} {...divProps} />;
+  }
+);

package/src/BlokEditor.tsx

@@ -0,0 +1,157 @@
+import {
+  forwardRef,
+  useImperativeHandle,
+  useEffect,
+  useRef,
+  type DependencyList,
+  type HTMLAttributes,
+} from 'react';
+import { useBlok } from './useBlok';
+import { BlokContent } from './BlokContent';
+import { USE_BLOK_CONFIG_KEYS } from './config-keys';
+import type { Blok, BlockRenderedPayload, BlocksRenderedPayload } from '@/types';
+import type { UseBlokConfig } from './types';
+
+/**
+ * Props for the all-in-one BlokEditor component.
+ * Accepts every useBlok config prop (except `onReady`, re-typed below to receive
+ * the ready instance) AND every standard HTML div attribute, which is forwarded
+ * to the editor container element (mirrors `BlokContent`). `style` and `onChange`
+ * keep their editor-config meaning (they collide with div attributes of the same
+ * name), so the container is styled via `className` rather than an inline `style`.
+ *
+ * `data` is reactive (controlled-ish): it seeds the INITIAL content and, after
+ * mount, changing it to new *content* re-renders the editor via `render()` — no
+ * recreation. Updates are deep-equal–deduped (a new reference with identical
+ * content is a no-op, so it won't clobber the caret) and serialized (rapid
+ * changes can't overlap). For ad-hoc reloads you can still call
+ * `ref.current.render(newData)`.
+ *
+ * Pair `data` with `onSave` for a true controlled component: `onSave` is the
+ * output half, firing (debounced) with the full serialized `OutputData` on every
+ * content change — no manual `ref.current.save()` polling. Echoing that payload
+ * straight back via `onSave={setData}` is safe and caret-stable: the adapter
+ * records the editor's own emitted output as the content baseline, so the
+ * `onSave → setState → data` round-trip deep-equals that baseline and is deduped
+ * to a no-op (no re-render, no caret reset, no recursion). Genuine external `data`
+ * changes still re-render in place.
+ */
+export interface BlokEditorProps
+  extends Omit<UseBlokConfig, 'onReady'>,
+    Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'onChange'> {
+  /**
+   * When any value changes, the editor is destroyed and recreated. Keep each
+   * value referentially stable (primitives or useMemo-stable objects) — a dep
+   * whose identity changes every render recreates the editor each time.
+   */
+  deps?: DependencyList;
+  /** Test id forwarded to the editor container element (via data-testid). */
+  'data-testid'?: string;
+  /**
+   * Called once the editor is ready, with the live Blok instance. Fires after the
+   * forwarded ref is committed, so `ref.current` is also populated at this point.
+   */
+  onReady?: (editor: Blok) => void;
+  /**
+   * Called after a batch render completes (core `blocks:rendered` event). The
+   * declarative analog of `ref.current.on('blocks:rendered', …)` — mirrors the
+   * Vue/Angular adapters' rendered-lifecycle outputs.
+   */
+  onBlocksRendered?: (payload: BlocksRenderedPayload) => void;
+  /** Called for each block rendered into the DOM (core `block:rendered` event). */
+  onBlockRendered?: (payload: BlockRenderedPayload) => void;
+}
+
+/** Fast membership test for partitioning props into editor config vs. div attributes. */
+const CONFIG_KEY_SET = new Set<string>(USE_BLOK_CONFIG_KEYS);
+
+/**
+ * The recommended way to embed Blok in React. Internally wires `useBlok` and
+ * `BlokContent`, and forwards a ref to the live `Blok` instance.
+ *
+ * Don't wrap this component in `styled()` or any HOC that reserves the `theme`
+ * prop — styled-components claims `theme` for its own `ThemeProvider`, so it
+ * never reaches the editor and theme sync silently breaks. Render it directly
+ * and style the container via `className`.
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<Blok | null>(null);
+ * <BlokEditor ref={ref} id="editor" tools={tools} data={data} theme={theme} onReady={(e) => e.focus()} />;
+ * ```
+ */
+export const BlokEditor = forwardRef<Blok | null, BlokEditorProps>(
+  function BlokEditor({ deps, onReady, onBlocksRendered, onBlockRendered, ...rest }, ref) {
+    const config: Record<string, unknown> = {};
+    const divProps: Record<string, unknown> = {};
+
+    for (const key of Object.keys(rest)) {
+      const value = (rest as Record<string, unknown>)[key];
+
+      if (CONFIG_KEY_SET.has(key)) {
+        config[key] = value;
+      } else {
+        divProps[key] = value;
+      }
+    }
+
+    const editor = useBlok(config as UseBlokConfig, deps);
+
+    useImperativeHandle<Blok | null, Blok | null>(ref, () => editor, [editor]);
+
+    // Own onReady here instead of forwarding it to the core config: the core
+    // onReady fires before useImperativeHandle commits the ref. This passive
+    // effect runs AFTER the commit, so both the instance argument and ref.current
+    // are reliably populated.
+    const onReadyRef = useRef(onReady);
+    onReadyRef.current = onReady;
+    useEffect(() => {
+      if (editor !== null) {
+        onReadyRef.current?.(editor);
+      }
+    }, [editor]);
+
+    // Subscribe to the rendered-lifecycle events (the declarative analog of the
+    // Vue/Angular outputs). Latest handlers are read through refs so a new
+    // callback identity never resubscribes; presence booleans in the deps add or
+    // drop subscriptions when a handler appears/disappears.
+    const onBlocksRenderedRef = useRef(onBlocksRendered);
+    onBlocksRenderedRef.current = onBlocksRendered;
+    const onBlockRenderedRef = useRef(onBlockRendered);
+    onBlockRenderedRef.current = onBlockRendered;
+
+    const hasBlocksRendered = Boolean(onBlocksRendered);
+    const hasBlockRendered = Boolean(onBlockRendered);
+    useEffect(() => {
+      if (editor === null) {
+        return;
+      }
+
+      const subscriptions: Array<[string, (payload?: unknown) => void]> = [];
+
+      if (hasBlocksRendered) {
+        const handler = (payload?: unknown): void =>
+          onBlocksRenderedRef.current?.(payload as BlocksRenderedPayload);
+
+        editor.on('blocks:rendered', handler);
+        subscriptions.push(['blocks:rendered', handler]);
+      }
+
+      if (hasBlockRendered) {
+        const handler = (payload?: unknown): void =>
+          onBlockRenderedRef.current?.(payload as BlockRenderedPayload);
+
+        editor.on('block:rendered', handler);
+        subscriptions.push(['block:rendered', handler]);
+      }
+
+      return (): void => {
+        for (const [name, handler] of subscriptions) {
+          editor.off(name, handler);
+        }
+      };
+    }, [editor, hasBlocksRendered, hasBlockRendered]);
+
+    return <BlokContent editor={editor} {...(divProps as HTMLAttributes<HTMLDivElement>)} />;
+  }
+);

package/src/blocks-snapshot.ts

@@ -0,0 +1,27 @@
+// packages/react/src/blocks-snapshot.ts
+//
+// The block-tree connection types and pure resolution helpers are
+// framework-agnostic and now live in a shared core module so the React, Vue,
+// and Angular adapters — and core's own per-block `BlockAPI` — resolve flat
+// insert/move indices through ONE battle-tested implementation (the parity
+// requirement: author once, reuse everywhere). This file re-exports them so
+// existing React imports (`./blocks-snapshot`) keep working unchanged.
+export {
+  snapshotNodes,
+  resolveInsertIndex,
+  resolveMoveIndex,
+  parentMap,
+  isDescendantOf,
+} from '@bloklabs/core/adapters';
+
+export type {
+  BlockNode,
+  CaretTarget,
+  InsertPosition,
+  InsertSpec,
+  TreeInsertSpec,
+  MoveTarget,
+  BlocksReader,
+  IndexReader,
+  UseBlocksApi,
+} from '@bloklabs/core/adapters';

package/src/config-keys.ts

@@ -0,0 +1,56 @@
+import type { UseBlokConfig } from './types';
+
+/**
+ * Keys that belong to the editor config (consumed by `useBlok`). Any prop on
+ * `BlokEditor` whose key is NOT in this set is treated as a container div
+ * attribute and spread onto the underlying element (mirrors `BlokContent`).
+ *
+ * Keep in sync with `UseBlokConfig`. The two compile-time guards below fail the
+ * `yarn lint:types` typecheck if this list drifts.
+ */
+export const USE_BLOK_CONFIG_KEYS = [
+  'autofocus',
+  'defaultBlock',
+  'dataModel',
+  'placeholder',
+  'sanitizer',
+  'hideToolbar',
+  'maxHistoryLength',
+  'historyDebounceTime',
+  'newGroupDelay',
+  'globalUndoRedo',
+  'tools',
+  'data',
+  'minHeight',
+  'logLevel',
+  'readOnly',
+  'i18n',
+  'link',
+  'linkPaste',
+  'onBeforePaste',
+  'onReady',
+  'onChange',
+  'onSave',
+  'onBeforeRender',
+  'onAfterRender',
+  'inlineToolbar',
+  'tunes',
+  'style',
+  'theme',
+  'onThemeChange',
+  'scrollToBlock',
+  'user',
+  'resolveUser',
+  'notifierPosition',
+  'notifier',
+  'width',
+] as const satisfies readonly (keyof UseBlokConfig)[];
+
+/**
+ * Compile error if a `UseBlokConfig` key is missing from the list above.
+ * (`satisfies` only proves each entry is a valid key; this proves coverage.)
+ */
+type _MissingConfigKey = Exclude<keyof UseBlokConfig, (typeof USE_BLOK_CONFIG_KEYS)[number]>;
+const _exhaustive: _MissingConfigKey extends never ? true : never = true;
+
+void _exhaustive;

package/src/deep-equal.ts

@@ -0,0 +1,7 @@
+/**
+ * Re-export of the framework-agnostic deep equality used to dedupe reactive
+ * `data` updates. The implementation now lives in `src/shared/deep-equal.ts`
+ * (shared with the Angular adapter); this module is kept for back-compat with
+ * existing `./deep-equal` importers in the React adapter.
+ */
+export { deepEqual } from '@bloklabs/core/adapters';

package/src/holder-map.ts

@@ -0,0 +1,17 @@
+/**
+ * Module-level WeakMap associating editor instances with their detached holder divs.
+ * WeakMap ensures no memory leaks — when the editor is garbage collected, the holder reference is released.
+ */
+const holders = new WeakMap<WeakKey, HTMLDivElement>();
+
+export function setHolder(editor: WeakKey, holder: HTMLDivElement): void {
+  holders.set(editor, holder);
+}
+
+export function getHolder(editor: WeakKey): HTMLDivElement | undefined {
+  return holders.get(editor);
+}
+
+export function removeHolder(editor: WeakKey): void {
+  holders.delete(editor);
+}