@jackuait/blok 0.22.0 → 0.23.0

package/dist/full.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./chunks/blok-Blnd71Ww.cjs`),t=require(`./chunks/constants-BIqDMhRj.cjs`),n=require(`./chunks/objectSpread2-iNkE6aJh.cjs`),r=require(`./chunks/tools-DTjC0C5o.cjs`);var i={paragraph:{class:r.k,inlineToolbar:!0,config:{preserveBlank:!0}},header:{class:r.O,inlineToolbar:!0},list:{class:r.D,inlineToolbar:!0}},a=n.t(n.t({},i),{},{bold:{class:r.l},italic:{class:r.c},marker:{class:r.o},underline:{class:r.a},strikethrough:{class:r.i},link:{class:r.s}});exports.Blok=e.t,exports.Bold=r.l,exports.DATA_ATTR=t.ja,exports.Header=r.O,exports.Italic=r.c,exports.Link=r.s,exports.List=r.D,exports.Marker=r.o,exports.Paragraph=r.k,exports.Strikethrough=r.i,exports.Toggle=r.T,exports.Underline=r.a,exports.allTools=a,exports.defaultBlockTools=r.t,exports.defaultInlineTools=r.n,exports.defaultTools=i,exports.version=e.n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./chunks/blok-D4WXeg3t.cjs`),t=require(`./chunks/constants-BbCnmzAr.cjs`),n=require(`./chunks/objectSpread2-iNkE6aJh.cjs`),r=require(`./chunks/tools-tG5_UaWz.cjs`);var i={paragraph:{class:r.k,inlineToolbar:!0,config:{preserveBlank:!0}},header:{class:r.O,inlineToolbar:!0},list:{class:r.D,inlineToolbar:!0}},a=n.t(n.t({},i),{},{bold:{class:r.l},italic:{class:r.c},marker:{class:r.o},underline:{class:r.a},strikethrough:{class:r.i},link:{class:r.s}});exports.Blok=e.t,exports.Bold=r.l,exports.DATA_ATTR=t.ja,exports.Header=r.O,exports.Italic=r.c,exports.Link=r.s,exports.List=r.D,exports.Marker=r.o,exports.Paragraph=r.k,exports.Strikethrough=r.i,exports.Toggle=r.T,exports.Underline=r.a,exports.allTools=a,exports.defaultBlockTools=r.t,exports.defaultInlineTools=r.n,exports.defaultTools=i,exports.version=e.n;

package/dist/full.mjs

@@ -1,7 +1,7 @@
-import { n as e, t } from "./chunks/blok-S6c68iVJ.mjs";
-import { ja as n } from "./chunks/constants-BvxJIgSQ.mjs";
+import { n as e, t } from "./chunks/blok-BmckXjmW.mjs";
+import { ja as n } from "./chunks/constants-tXKHkDAG.mjs";
 import { t as r } from "./chunks/objectSpread2-jlBcdYeb.mjs";
-import { D as i, O as a, T as o, a as s, c, i as l, k as u, l as d, n as f, o as p, s as m, t as h } from "./chunks/tools-B89FUeNz.mjs";
+import { D as i, O as a, T as o, a as s, c, i as l, k as u, l as d, n as f, o as p, s as m, t as h } from "./chunks/tools-oXMAa9zD.mjs";
 //#region src/full.ts
 var g = {
 	paragraph: {

package/dist/react.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunks/chunk-BL1yB9zm.cjs`);const e=require(`./chunks/blok-Blnd71Ww.cjs`),t=require(`./chunks/objectSpread2-iNkE6aJh.cjs`);let n=require(`react`),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(r,i){let[o,c]=(0,n.useState)(null),u=(0,n.useRef)(r);u.current=r;let d=(0,n.useRef)({editor:null,holder:null,destroyTimeout:null,isDestroyed:!1,depsToken:null}),f=(0,n.useMemo)(()=>({}),i==null?[]:i);(0,n.useEffect)(()=>{if(typeof window>`u`)return;let n=d.current;if(n.destroyTimeout!==null&&(clearTimeout(n.destroyTimeout),n.destroyTimeout=null),n.editor!==null&&!n.isDestroyed&&n.depsToken===f)return c(n.editor),()=>{l(n,c)};if(n.editor!==null&&!n.isDestroyed){s(n.editor);try{n.editor.destroy()}catch(e){}n.editor=null,n.holder=null,n.isDestroyed=!0,c(null)}let r=document.createElement(`div`);n.holder=r,n.isDestroyed=!1,n.depsToken=f;let i=u.current,o=new e.t(t.t(t.t({},i),{},{holder:r,onReady:()=>{var e,t;(e=(t=u.current).onReady)==null||e.call(t)},onChange:(...e)=>{var t,n;(t=(n=u.current).onChange)==null||t.call(n,...e)}}));return n.editor=o,a(o,r),o.isReady.then(()=>{n.editor===o&&!n.isDestroyed&&c(o)}).catch(()=>{if(n.editor===o&&!n.isDestroyed){s(o);try{o.destroy()}catch(e){}n.editor=null,n.holder=null,n.isDestroyed=!0,c(null)}}),()=>{l(n,c)}},[f]);let{readOnly:p}=r;(0,n.useEffect)(()=>{o!==null&&o.readOnly.set(p==null?!1:p)},[o,p]);let{autofocus:m}=r;return(0,n.useEffect)(()=>{o===null||!m||o.focus()},[o,m]),o}function l(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.destroyTimeout=null,t(null)}},0)}var u=[`editor`],d=(0,n.forwardRef)(function(i,a){let{editor:s}=i,c=e.i(i,u),l=(0,n.useRef)(null);return(0,n.useEffect)(()=>{if(s===null||l.current===null)return;let e=o(s);if(e!==void 0)return l.current.appendChild(e),()=>{e.remove()}},[s]),(0,r.jsx)(`div`,t.t({ref:e=>{if(l.current=e,typeof a==`function`)a(e);else if(a!=null){let t=a;t.current=e}}},c))});exports.BlokContent=d,exports.useBlok=c;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunks/chunk-BL1yB9zm.cjs`);const e=require(`./chunks/blok-D4WXeg3t.cjs`),t=require(`./chunks/objectSpread2-iNkE6aJh.cjs`);let n=require(`react`),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(r,i){let[o,c]=(0,n.useState)(null),u=(0,n.useRef)(r);u.current=r;let d=(0,n.useRef)({editor:null,holder:null,destroyTimeout:null,isDestroyed:!1,depsToken:null}),f=(0,n.useMemo)(()=>({}),i==null?[]:i);(0,n.useEffect)(()=>{if(typeof window>`u`)return;let n=d.current;if(n.destroyTimeout!==null&&(clearTimeout(n.destroyTimeout),n.destroyTimeout=null),n.editor!==null&&!n.isDestroyed&&n.depsToken===f)return c(n.editor),()=>{l(n,c)};if(n.editor!==null&&!n.isDestroyed){s(n.editor);try{n.editor.destroy()}catch(e){}n.editor=null,n.holder=null,n.isDestroyed=!0,c(null)}let r=document.createElement(`div`);n.holder=r,n.isDestroyed=!1,n.depsToken=f;let i=u.current,o=new e.t(t.t(t.t({},i),{},{holder:r,onReady:()=>{var e,t;(e=(t=u.current).onReady)==null||e.call(t)},onChange:(...e)=>{var t,n;(t=(n=u.current).onChange)==null||t.call(n,...e)}}));return n.editor=o,a(o,r),o.isReady.then(()=>{n.editor===o&&!n.isDestroyed&&c(o)}).catch(()=>{if(n.editor===o&&!n.isDestroyed){s(o);try{o.destroy()}catch(e){}n.editor=null,n.holder=null,n.isDestroyed=!0,c(null)}}),()=>{l(n,c)}},[f]);let{readOnly:p}=r;(0,n.useEffect)(()=>{o!==null&&o.readOnly.set(p==null?!1:p)},[o,p]);let{autofocus:m}=r;(0,n.useEffect)(()=>{o===null||!m||o.focus()},[o,m]);let{theme:h}=r;(0,n.useEffect)(()=>{o===null||h===void 0||o.theme.set(h)},[o,h]);let{width:g}=r;return(0,n.useEffect)(()=>{o===null||g===void 0||o.width.set(g)},[o,g]),o}function l(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.destroyTimeout=null,t(null)}},0)}var u=[`editor`],d=(0,n.forwardRef)(function(i,a){let{editor:s}=i,c=e.i(i,u),l=(0,n.useRef)(null);return(0,n.useEffect)(()=>{if(s===null||l.current===null)return;let e=o(s);if(e!==void 0)return l.current.appendChild(e),()=>{e.remove()}},[s]),(0,r.jsx)(`div`,t.t({ref:e=>{if(l.current=e,typeof a==`function`)a(e);else if(a!=null){let t=a;t.current=e}}},c))}),f=[`deps`,`className`,`onReady`,`data-testid`],p=(0,n.forwardRef)(function(t,i){let{deps:a,className:o,onReady:s,"data-testid":l}=t,u=c(e.i(t,f),a);(0,n.useImperativeHandle)(i,()=>u,[u]);let p=(0,n.useRef)(s);return p.current=s,(0,n.useEffect)(()=>{if(u!==null){var e;(e=p.current)==null||e.call(p,u)}},[u]),(0,r.jsx)(d,{editor:u,className:o,"data-testid":l})});exports.BlokContent=d,exports.BlokEditor=p,exports.useBlok=c;

package/dist/react.mjs

@@ -1,83 +1,91 @@
-import { i as e, t } from "./chunks/blok-S6c68iVJ.mjs";
+import { i as e, t } from "./chunks/blok-BmckXjmW.mjs";
 import { t as n } from "./chunks/objectSpread2-jlBcdYeb.mjs";
-import { forwardRef as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";
-import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as r, useEffect as i, useImperativeHandle as a, useMemo as o, useRef as s, useState as c } from "react";
+import { jsx as l } from "react/jsx-runtime";
 //#region src/react/holder-map.ts
-var l = /* @__PURE__ */ new WeakMap();
-function u(e, t) {
-	l.set(e, t);
-}
-function d(e) {
-	return l.get(e);
+var u = /* @__PURE__ */ new WeakMap();
+function d(e, t) {
+	u.set(e, t);
 }
 function f(e) {
-	l.delete(e);
+	return u.get(e);
+}
+function p(e) {
+	u.delete(e);
 }
 //#endregion
 //#region src/react/useBlok.ts
-function p(e, r) {
-	let [c, l] = s(null), d = o(e);
-	d.current = e;
-	let p = o({
+function m(e, r) {
+	let [a, l] = c(null), u = s(e);
+	u.current = e;
+	let f = s({
 		editor: null,
 		holder: null,
 		destroyTimeout: null,
 		isDestroyed: !1,
 		depsToken: null
-	}), h = a(() => ({}), r == null ? [] : r);
+	}), m = o(() => ({}), r == null ? [] : r);
 	i(() => {
 		if (typeof window > "u") return;
-		let e = p.current;
-		if (e.destroyTimeout !== null && (clearTimeout(e.destroyTimeout), e.destroyTimeout = null), e.editor !== null && !e.isDestroyed && e.depsToken === h) return l(e.editor), () => {
-			m(e, l);
+		let e = f.current;
+		if (e.destroyTimeout !== null && (clearTimeout(e.destroyTimeout), e.destroyTimeout = null), e.editor !== null && !e.isDestroyed && e.depsToken === m) return l(e.editor), () => {
+			h(e, l);
 		};
 		if (e.editor !== null && !e.isDestroyed) {
-			f(e.editor);
+			p(e.editor);
 			try {
 				e.editor.destroy();
 			} catch (e) {}
 			e.editor = null, e.holder = null, e.isDestroyed = !0, l(null);
 		}
 		let r = document.createElement("div");
-		e.holder = r, e.isDestroyed = !1, e.depsToken = h;
-		let i = d.current, a = new t(n(n({}, i), {}, {
+		e.holder = r, e.isDestroyed = !1, e.depsToken = m;
+		let i = u.current, a = new t(n(n({}, i), {}, {
 			holder: r,
 			onReady: () => {
 				var e, t;
-				(e = (t = d.current).onReady) == null || e.call(t);
+				(e = (t = u.current).onReady) == null || e.call(t);
 			},
 			onChange: (...e) => {
 				var t, n;
-				(t = (n = d.current).onChange) == null || t.call(n, ...e);
+				(t = (n = u.current).onChange) == null || t.call(n, ...e);
 			}
 		}));
-		return e.editor = a, u(a, r), a.isReady.then(() => {
+		return e.editor = a, d(a, r), a.isReady.then(() => {
 			e.editor === a && !e.isDestroyed && l(a);
 		}).catch(() => {
 			if (e.editor === a && !e.isDestroyed) {
-				f(a);
+				p(a);
 				try {
 					a.destroy();
 				} catch (e) {}
 				e.editor = null, e.holder = null, e.isDestroyed = !0, l(null);
 			}
 		}), () => {
-			m(e, l);
+			h(e, l);
 		};
-	}, [h]);
+	}, [m]);
 	let { readOnly: g } = e;
 	i(() => {
-		c !== null && c.readOnly.set(g == null ? !1 : g);
-	}, [c, g]);
+		a !== null && a.readOnly.set(g == null ? !1 : g);
+	}, [a, g]);
 	let { autofocus: _ } = e;
+	i(() => {
+		a === null || !_ || a.focus();
+	}, [a, _]);
+	let { theme: v } = e;
+	i(() => {
+		a === null || v === void 0 || a.theme.set(v);
+	}, [a, v]);
+	let { width: y } = e;
 	return i(() => {
-		c === null || !_ || c.focus();
-	}, [c, _]), c;
+		a === null || y === void 0 || a.width.set(y);
+	}, [a, y]), a;
 }
-function m(e, t) {
+function h(e, t) {
 	e.destroyTimeout = setTimeout(() => {
 		if (e.editor !== null) {
-			f(e.editor);
+			p(e.editor);
 			try {
 				e.editor.destroy();
 			} catch (e) {}
@@ -87,21 +95,40 @@ function m(e, t) {
 }
 //#endregion
 //#region src/react/BlokContent.tsx
-var h = ["editor"], g = r(function(t, r) {
-	let { editor: a } = t, s = e(t, h), l = o(null);
+var g = ["editor"], _ = r(function(t, r) {
+	let { editor: a } = t, o = e(t, g), c = s(null);
 	return i(() => {
-		if (a === null || l.current === null) return;
-		let e = d(a);
-		if (e !== void 0) return l.current.appendChild(e), () => {
+		if (a === null || c.current === null) return;
+		let e = f(a);
+		if (e !== void 0) return c.current.appendChild(e), () => {
 			e.remove();
 		};
-	}, [a]), /* @__PURE__ */ c("div", n({ ref: (e) => {
-		if (l.current = e, typeof r == "function") r(e);
+	}, [a]), /* @__PURE__ */ l("div", n({ ref: (e) => {
+		if (c.current = e, typeof r == "function") r(e);
 		else if (r != null) {
 			let t = r;
 			t.current = e;
 		}
-	} }, s));
+	} }, o));
+}), v = [
+	"deps",
+	"className",
+	"onReady",
+	"data-testid"
+], y = r(function(t, n) {
+	let { deps: r, className: o, onReady: c, "data-testid": u } = t, d = m(e(t, v), r);
+	a(n, () => d, [d]);
+	let f = s(c);
+	return f.current = c, i(() => {
+		if (d !== null) {
+			var e;
+			(e = f.current) == null || e.call(f, d);
+		}
+	}, [d]), /* @__PURE__ */ l(_, {
+		editor: d,
+		className: o,
+		"data-testid": u
+	});
 });
 //#endregion
-export { g as BlokContent, p as useBlok };
+export { _ as BlokContent, y as BlokEditor, m as useBlok };

package/dist/tools.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./chunks/constants-BIqDMhRj.cjs`),t=require(`./chunks/tools-DTjC0C5o.cjs`);exports.Audio=t.g,exports.Bold=t.l,exports.Bookmark=t.u,exports.Callout=t.w,exports.Code=t.y,exports.Column=t.p,exports.ColumnList=t.m,exports.Columns=t.f,exports.Convert=e.m,exports.Database=t.C,exports.DatabaseRow=t.S,exports.Divider=t.x,exports.Embed=t.d,exports.File=t._,exports.Header=t.O,exports.Image=t.v,exports.InlineCode=t.r,exports.Italic=t.c,exports.Link=t.s,exports.List=t.D,exports.Marker=t.o,exports.Paragraph=t.k,exports.Quote=t.b,exports.Strikethrough=t.i,exports.Table=t.E,exports.Toggle=t.T,exports.Underline=t.a,exports.Video=t.h,exports.defaultBlockTools=t.t,exports.defaultInlineTools=t.n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./chunks/constants-BbCnmzAr.cjs`),t=require(`./chunks/tools-tG5_UaWz.cjs`);exports.Audio=t.g,exports.Bold=t.l,exports.Bookmark=t.u,exports.Callout=t.w,exports.Code=t.y,exports.Column=t.p,exports.ColumnList=t.m,exports.Columns=t.f,exports.Convert=e.m,exports.Database=t.C,exports.DatabaseRow=t.S,exports.Divider=t.x,exports.Embed=t.d,exports.File=t._,exports.Header=t.O,exports.Image=t.v,exports.InlineCode=t.r,exports.Italic=t.c,exports.Link=t.s,exports.List=t.D,exports.Marker=t.o,exports.Paragraph=t.k,exports.Quote=t.b,exports.Strikethrough=t.i,exports.Table=t.E,exports.Toggle=t.T,exports.Underline=t.a,exports.Video=t.h,exports.defaultBlockTools=t.t,exports.defaultInlineTools=t.n;

package/dist/tools.mjs

@@ -1,3 +1,3 @@
-import { m as e } from "./chunks/constants-BvxJIgSQ.mjs";
-import { C as t, D as n, E as r, O as i, S as a, T as o, _ as s, a as c, b as l, c as u, d, f, g as p, h as m, i as h, k as g, l as _, m as v, n as y, o as b, p as x, r as S, s as C, t as w, u as T, v as E, w as D, x as O, y as k } from "./chunks/tools-B89FUeNz.mjs";
+import { m as e } from "./chunks/constants-tXKHkDAG.mjs";
+import { C as t, D as n, E as r, O as i, S as a, T as o, _ as s, a as c, b as l, c as u, d, f, g as p, h as m, i as h, k as g, l as _, m as v, n as y, o as b, p as x, r as S, s as C, t as w, u as T, v as E, w as D, x as O, y as k } from "./chunks/tools-oXMAa9zD.mjs";
 export { p as Audio, _ as Bold, T as Bookmark, D as Callout, k as Code, x as Column, v as ColumnList, f as Columns, e as Convert, t as Database, a as DatabaseRow, O as Divider, d as Embed, s as File, i as Header, E as Image, S as InlineCode, u as Italic, C as Link, n as List, b as Marker, g as Paragraph, l as Quote, h as Strikethrough, r as Table, o as Toggle, c as Underline, m as Video, w as defaultBlockTools, y as defaultInlineTools };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackuait/blok",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "Blok — headless, highly extensible rich text editor built for developers who need to implement a block-based editing experience (similar to Notion) without building it from scratch",
   "module": "dist/blok.mjs",
   "main": "./dist/blok.cjs",

package/src/react/BlokEditor.tsx

@@ -0,0 +1,63 @@
+import { forwardRef, useImperativeHandle, useEffect, useRef, type DependencyList } from 'react';
+import { useBlok } from './useBlok';
+import { BlokContent } from './BlokContent';
+import type { Blok } 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), plus container `className`/`data-testid` and an optional
+ * `deps` list. When any value in `deps` changes, the editor is destroyed and
+ * recreated (use this when `tools` or other structural config changes).
+ *
+ * `data` is uncontrolled (seed-only): it sets the INITIAL content. After mount the
+ * editor owns the document — passing a new `data` reference does NOT reload it.
+ * Read content via `onChange` or the ref (`ref.current.save()`); replace it
+ * imperatively via `ref.current.render(newData)`.
+ */
+export interface BlokEditorProps extends Omit<UseBlokConfig, 'onReady'> {
+  /** When any value changes, the editor is destroyed and recreated. */
+  deps?: DependencyList;
+  /** Class name applied to the editor container element. */
+  className?: string;
+  /** 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;
+}
+
+/**
+ * The recommended way to embed Blok in React. Internally wires `useBlok` and
+ * `BlokContent`, and forwards a ref to the live `Blok` instance.
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<Blok | null>(null);
+ * <BlokEditor ref={ref} tools={tools} data={data} theme={theme} onReady={(e) => e.focus()} />;
+ * ```
+ */
+export const BlokEditor = forwardRef<Blok | null, BlokEditorProps>(
+  function BlokEditor({ deps, className, onReady, 'data-testid': dataTestId, ...config }, ref) {
+    const editor = useBlok(config, 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]);
+
+    return <BlokContent editor={editor} className={className} data-testid={dataTestId} />;
+  }
+);

package/src/react/index.ts

@@ -1,3 +1,5 @@
 export { useBlok } from './useBlok';
 export { BlokContent } from './BlokContent';
+export { BlokEditor } from './BlokEditor';
 export type { UseBlokConfig, BlokContentProps } from './types';
+export type { BlokEditorProps } from './BlokEditor';

package/src/react/types.ts

@@ -1,10 +1,20 @@
-import type { BlokConfig, Blok } from '@/types';
+import type { BlokConfig, Blok, EditorWidth } from '@/types';
 
 /**
  * Configuration for useBlok hook.
- * Same as BlokConfig but without `holder` — the holder is managed by BlokContent.
+ * Same as BlokConfig but without `holder` (managed by BlokContent), plus a
+ * React-only reactive `width` prop.
+ *
+ * Reactive props (sync after mount without recreation):
+ * - `readOnly` — calls `editor.readOnly.set(value)`
+ * - `autofocus` — calls `editor.focus()` when changed to true
+ * - `theme` — calls `editor.theme.set(value)`
+ * - `width` — calls `editor.width.set(value)`
  */
-export interface UseBlokConfig extends Omit<BlokConfig, 'holder'> {}
+export interface UseBlokConfig extends Omit<BlokConfig, 'holder'> {
+  /** Editor content width mode. Synced reactively after mount via `editor.width.set()`. */
+  width?: EditorWidth;
+}
 
 /**
  * Props for the BlokContent component.

package/src/react/useBlok.ts

@@ -146,6 +146,24 @@ export function useBlok(config: UseBlokConfig, deps?: DependencyList): Blok | nu
     editor.focus();
   }, [editor, autofocus]);
 
+  // Reactive: theme
+  const { theme } = config;
+  useEffect(() => {
+    if (editor === null || theme === undefined) {
+      return;
+    }
+    editor.theme.set(theme);
+  }, [editor, theme]);
+
+  // Reactive: width
+  const { width } = config;
+  useEffect(() => {
+    if (editor === null || width === undefined) {
+      return;
+    }
+    editor.width.set(width);
+  }, [editor, width]);
+
   return editor;
 }
 

package/types/react.d.ts

@@ -1,18 +1,23 @@
 import type { BlokConfig } from './index';
-import type { Blok } from './index';
+import type { Blok, EditorWidth } from './index';
 import type React from 'react';
 
 /**
  * Configuration for the useBlok hook.
- * Accepts all BlokConfig properties except `holder`, which is managed by BlokContent.
+ * Accepts all BlokConfig properties except `holder`, plus a React-only `width` prop.
  *
  * Reactive props (sync after mount without recreation):
  * - `readOnly` — calls `editor.readOnly.set(value)`
  * - `autofocus` — calls `editor.focus()` when changed to true
+ * - `theme` — calls `editor.theme.set(value)`
+ * - `width` — calls `editor.width.set(value)`
  *
  * All other config is consumed once at editor creation.
  */
-export interface UseBlokConfig extends Omit<BlokConfig, 'holder'> {}
+export interface UseBlokConfig extends Omit<BlokConfig, 'holder'> {
+  /** Editor content width mode. Synced reactively after mount. */
+  width?: EditorWidth;
+}
 
 /**
  * Props for the BlokContent component.
@@ -56,3 +61,33 @@ export function useBlok(
  * ```
  */
 export declare const BlokContent: React.ForwardRefExoticComponent<BlokContentProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Props for the BlokEditor component — all useBlok config (except `onReady`,
+ * re-typed to receive the ready instance) plus container `className`/`data-testid`
+ * and an optional `deps` list that forces recreation when changed.
+ */
+export interface BlokEditorProps extends Omit<UseBlokConfig, 'onReady'> {
+  /** When any value changes, the editor is destroyed and recreated. */
+  deps?: React.DependencyList;
+  /** Class name applied to the editor container element. */
+  className?: string;
+  /** 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 (ref is also committed). */
+  onReady?: (editor: Blok) => void;
+}
+
+/**
+ * The recommended all-in-one React component. Wires useBlok + BlokContent and
+ * forwards a ref to the live Blok instance (null before the editor is ready).
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<Blok | null>(null);
+ * <BlokEditor ref={ref} tools={tools} data={data} theme="dark" />;
+ * ```
+ */
+export declare const BlokEditor: React.ForwardRefExoticComponent<
+  BlokEditorProps & React.RefAttributes<Blok | null>
+>;