@bloklabs/react 1.2.2 → 1.2.4

package/dist/index.cjs

@@ -1 +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`),i=require(`react-dom`);var a=new WeakMap;function o(e,t){a.set(e,t)}function s(e){return a.get(e)}function c(e){a.delete(e)}function l(e){"@babel/helpers - typeof";return l=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},l(e)}function u(e,t){if(l(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(l(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function d(e){var t=u(e,`string`);return l(t)==`symbol`?t:t+``}function f(e,t,n){return(t=d(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function p(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 m(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){f(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}var h=(0,e.createContext)({});function g({defaults:e,children:t}){return(0,r.jsx)(h.Provider,{value:e,children:t})}function _(){return(0,e.useContext)(h)}function v(e,t){if(Object.keys(e).length===0)return t;let n=m({},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=m(m({},e.tools),t.tools)),n}var y=`__blokPortalRegistry`,b=()=>{let e={snapshot:new Map},t=new Set,n=n=>{e.snapshot=n,t.forEach(e=>e())};return{register(t,r){let i=new Map(e.snapshot);i.set(t,r),n(i)},unregister(t){if(!e.snapshot.has(t))return;let r=new Map(e.snapshot);r.delete(t),n(r)},setProps(t,r){let i=e.snapshot.get(t);if(i===void 0)return;let a=new Map(e.snapshot);a.set(t,m(m({},i),{},{props:m(m({},i.props),r)})),n(a)},subscribe(e){return t.add(e),()=>{t.delete(e)}},getSnapshot(){return e.snapshot}}},x=new WeakMap;function S(e,t){x.set(e,t)}function C(e){return x.get(e)}function w(e){x.delete(e)}var T=e=>{if(typeof e!=`object`||!e)return!1;let t=Object.getPrototypeOf(e);return t===Object.prototype||t===null},E=(e,t)=>t.reduce((e,t)=>{if(Array.isArray(e))return typeof t==`number`?e[t]:void 0;if(T(e))return e[t]},e),D=(e,t)=>{if(!T(e))return e;let n={};for(let[r,i]of Object.entries(e)){if(!T(i)||!T(i.config)){n[r]=i;continue}let e=new WeakSet,a=(n,i)=>{if(typeof n==`function`){let e=n;return function(...n){let a=t(),o=T(a)?a[r]:void 0,s=E(T(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(T(n)){if(e.has(n))return n;e.add(n);let t={};for(let[e,r]of Object.entries(n))t[e]=a(r,[...i,e]);return t}return n};n[r]=m(m({},i),{},{config:a(i.config,[])})}return n},O=(e,t)=>{if(typeof e!=`object`||!e)return e;let n={};for(let[i,a]of Object.entries(e)){var r;let e=typeof a==`function`?a:a==null?void 0:a.class;if(!(typeof e==`function`&&e.__isBlokReactBlock===!0)){n[i]=a;continue}let o=typeof a==`function`?{class:a}:m({},a);o.config=m(m({},(r=o.config)==null?{}:r),{},{[y]:t}),n[i]=o}return n};function k(r,i){let a=v((0,e.useContext)(h),r),[s,l]=(0,e.useState)(null),u=(0,e.useRef)(a);u.current=a;let d=(0,e.useRef)({editor:null,holder:null,destroyTimeout:null,isDestroyed:!1,isEditorReady:!1,depsToken:null}),f=(0,e.useMemo)(()=>({}),i==null?[]:i),p=(0,e.useRef)(a.data),g=(0,e.useRef)(null),_=(0,e.useRef)(a.data),y=(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),()=>{A(e,l)};if(e.editor!==null&&!e.isDestroyed){c(e.editor),w(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=b(),a=r.tools===void 0?void 0:O(D(r.tools,()=>u.current.tools),i),s=m(m(m({},r),a===void 0?{}:{tools:a}),{},{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&&(s.onSave=(...e)=>{var t,n;p.current=e[0],(t=(n=u.current).onSave)==null||t.call(n,...e)}),r.onBeforeRender&&(s.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&&(s.onAfterRender=(...e)=>{var t,n;(t=(n=u.current).onAfterRender)==null||t.call(n,...e)});let h=new t.Blok(s);return e.editor=h,_.current=r.data,o(h,n),S(h,i),h.isReady.then(()=>{e.editor===h&&!e.isDestroyed&&(e.isEditorReady=!0,l(h))}).catch(()=>{if(e.editor===h&&!e.isDestroyed){c(h),w(h);try{h.destroy()}catch(e){}e.editor=null,e.holder=null,e.isDestroyed=!0,e.isEditorReady=!1,l(null)}}),()=>{A(e,l)}},[f]);let C=(0,n.normalizeReadOnlyConfig)(a.readOnly).enabled;(0,e.useEffect)(()=>{s!==null&&s.readOnly.set(C)},[s,C]);let{autofocus:T}=a;(0,e.useEffect)(()=>{s===null||!T||s.focus()},[s,T]);let{theme:E}=a;(0,e.useEffect)(()=>{s===null||E===void 0||s.theme.set(E)},[s,E]);let{width:k}=a;(0,e.useEffect)(()=>{s===null||k===void 0||s.width.set(k)},[s,k]);let{placeholder:j}=a;(0,e.useEffect)(()=>{s===null||j===void 0||s.placeholder.set(j)},[s,j]);let{data:M}=a;return(0,e.useEffect)(()=>{if(s===null||M===void 0)return;let e=d.current;if(!(e.editor!==s||e.isDestroyed)){if(g.current!==s&&(g.current=s,x.current=void 0,(0,n.deepEqual)(M,_.current))){p.current=M;return}(0,n.deepEqual)(M,p.current)||(0,n.deepEqual)(M,x.current)||(x.current=M,y.current=y.current.catch(()=>void 0).then(()=>s.render(M)).then(()=>{p.current=M},()=>{}).then(()=>{x.current===M&&(x.current=void 0)}))}},[s,M]),s}function A(e,t){e.destroyTimeout=setTimeout(()=>{if(e.editor!==null){c(e.editor),w(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)}var j=class extends e.Component{constructor(...e){super(...e),this.state={failed:!1}}static getDerivedStateFromError(){return{failed:!0}}componentDidCatch(){}render(){return this.state.failed?null:this.props.children}};function M({registry:t}){let n=(0,e.useSyncExternalStore)(t.subscribe,t.getSnapshot,t.getSnapshot);return(0,r.jsx)(r.Fragment,{children:Array.from(n.entries()).map(([e,t])=>{let n=t.component;return(0,i.createPortal)((0,r.jsx)(j,{children:(0,r.jsx)(n,m({},t.props))}),t.hostEl,e)})})}function N(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 P(e,t){if(e==null)return{};var n,r,i=N(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 F=[`editor`],I=(0,e.forwardRef)(function(t,n){let{editor:i}=t,a=P(t,F),o=(0,e.useRef)(null),c=e=>{if(o.current=e,typeof n==`function`)n(e);else if(n!=null){let t=n;t.current=e}};(0,e.useEffect)(()=>{if(i===null||o.current===null)return;let e=s(i);if(e!==void 0)return o.current.appendChild(e),()=>{e.remove()}},[i]);let l=i===null?void 0:C(i);return(0,r.jsx)(`div`,m(m({ref:c},a),{},{children:l===void 0?null:(0,r.jsx)(M,{registry:l})}))}),L=`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(`.`),R=[`deps`,`onReady`,`onBlocksRendered`,`onBlockRendered`],z=new Set(L),B=(0,e.forwardRef)(function(t,n){let{deps:i,onReady:a,onBlocksRendered:o,onBlockRendered:s}=t,c=P(t,R),l={},u={};for(let e of Object.keys(c)){let t=c[e];z.has(e)?l[e]=t:u[e]=t}let d=k(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 p=(0,e.useRef)(o);p.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=p.current)==null?void 0:t.call(p,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)(I,m({editor:d},u))}),V=`block changed`;function H(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(V,n),()=>t.off(V,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])}function U(t){var a;return a=class{static get toolbox(){return t.toolbox}static get isReadOnlySupported(){return!0}constructor(i){var a,o;this.hostEl=null,this.pendingDispatch=!1,this.commit=e=>{var r;let i=(0,n.fillDefaults)(t.propSchema,m(m({},this.mirror),e));this.mirror=i,this.lastRendered=i,(r=this.registry)==null||r.setProps(this.blockApi.id,{data:i}),this.flushDispatch()},this.blockApi=i.block;let s=(a=i.config)==null?{}:a;this.registry=s[y];let c=i.api;this.pointerDrag=()=>{var e;return(c==null||(e=c.blocks)==null?void 0:e.isPointerDragActive)===!0},this.mirror=(0,n.fillDefaults)(t.propSchema,(o=i.data)==null?{}:o),this.lastRendered=this.mirror,this.readOnly=i.readOnly;let l=this.blockApi;this.childrenComponent=function(){let t=(0,e.useRef)(null);return(0,e.useEffect)(()=>{t.current!==null&&(0,n.mountChildBlocks)(t.current,l.getChildren())}),(0,r.jsx)(`div`,{ref:t,[n.DATA_ATTR.nestedBlocks]:``})}}render(){var e;let n=document.createElement(`div`);return n.setAttribute(`data-blok-mutation-free`,`true`),this.hostEl=n,(e=this.registry)==null||e.register(this.blockApi.id,{hostEl:n,component:t.component,props:this.buildProps()}),n}rendered(){var e;(e=t.onRendered)==null||e.call(t,this.blockApi)}save(){return this.mirror}async setData(e){var r=this;let i=(0,n.fillDefaults)(t.propSchema,e==null?{}:e);return(0,n.deepEqual)(i,r.lastRendered)?!0:(r.mirror=i,r.lastRendered=i,r.pushProps({data:i}),!0)}setReadOnly(e){this.readOnly=e,this.pushProps({readOnly:e})}moved(){var e;(e=t.onMoved)==null||e.call(t,this.blockApi)}removed(){var e,n;(e=this.registry)==null||e.unregister(this.blockApi.id),(n=t.onRemoved)==null||n.call(t,this.blockApi)}destroy(){var e;(e=this.registry)==null||e.unregister(this.blockApi.id)}buildProps(){return{data:this.mirror,commit:this.commit,block:this.blockApi,readOnly:this.readOnly,BlockChildren:this.childrenComponent}}pushProps(e){let t=this.registry;t!==void 0&&(0,i.flushSync)(()=>{t.setProps(this.blockApi.id,e)})}flushDispatch(){if(!this.pointerDrag()){this.pendingDispatch=!1,this.blockApi.dispatchChange();return}if(this.pendingDispatch)return;this.pendingDispatch=!0;let e=()=>{if(this.pointerDrag()){requestAnimationFrame(e);return}this.pendingDispatch=!1,this.blockApi.dispatchChange()};requestAnimationFrame(e)}},a.__isBlokReactBlock=!0,a}exports.BLOK_PORTAL_REGISTRY_CONFIG_KEY=y,exports.BlockPortalHost=M,exports.BlokContent=I,exports.BlokEditor=B,exports.BlokProvider=g,exports.createBlockPortalRegistry=b,exports.createReactBlock=U,exports.useBlocks=H,exports.useBlok=k,exports.useBlokDefaults=_;
+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`),i=require(`react-dom`);var a=new WeakMap;function o(e,t){a.set(e,t)}function s(e){return a.get(e)}function c(e){a.delete(e)}function l(e){"@babel/helpers - typeof";return l=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},l(e)}function u(e,t){if(l(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(l(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function d(e){var t=u(e,`string`);return l(t)==`symbol`?t:t+``}function f(e,t,n){return(t=d(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function p(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 m(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){f(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}var h=(0,e.createContext)({});function g({defaults:e,children:t}){return(0,r.jsx)(h.Provider,{value:e,children:t})}function _(){return(0,e.useContext)(h)}function v(e,t){if(Object.keys(e).length===0)return t;let n=m({},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=m(m({},e.tools),t.tools)),n}var y=`__blokPortalRegistry`,b=`__blokToolName`,x=()=>{let e={snapshot:new Map},t=new Set,n=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:m(m({},i),{},{props:m(m({},i.props),{},{config:o})})),r(a)},unregister(t){if(!e.snapshot.has(t))return;let n=new Map(e.snapshot);n.delete(t),r(n)},setProps(t,n){let i=e.snapshot.get(t);if(i===void 0)return;let a=new Map(e.snapshot);a.set(t,m(m({},i),{},{props:m(m({},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,m(m({},t),{},{props:m(m({},t.props),{},{config:i})}));r(o)},subscribe(e){return t.add(e),()=>{t.delete(e)}},getSnapshot(){return e.snapshot}}},S=new WeakMap;function C(e,t){S.set(e,t)}function w(e){return S.get(e)}function T(e){S.delete(e)}var E=e=>{if(typeof e!=`object`||!e)return!1;let t=Object.getPrototypeOf(e);return t===Object.prototype||t===null},D=(e,t)=>t.reduce((e,t)=>{if(Array.isArray(e))return typeof t==`number`?e[t]:void 0;if(E(e))return e[t]},e),O=(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(E(e)){let r=E(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 E(r)?r:{}},k=(e,t)=>{if(!E(e))return e;let n={};for(let[r,i]of Object.entries(e)){if(!E(i)||!E(i.config)){n[r]=i;continue}let e=new WeakSet,a=(n,i)=>{if(typeof n==`function`){let e=n;return function(...n){let a=t(),o=E(a)?a[r]:void 0,s=D(E(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(E(n)){if(e.has(n))return n;e.add(n);let t={};for(let[e,r]of Object.entries(n))t[e]=a(r,[...i,e]);return t}return n};n[r]=m(m({},i),{},{config:a(i.config,[])})}return n},A=e=>{let t=typeof e==`function`?e:e==null?void 0:e.class;return typeof t==`function`&&t.__isBlokReactBlock===!0},j=(e,t)=>{if(typeof e!=`object`||!e)return e;let n={};for(let[i,a]of Object.entries(e)){var r;if(!A(a)){n[i]=a;continue}let e=typeof a==`function`?{class:a}:m({},a);e.config=m(m({},(r=e.config)==null?{}:r),{},{[y]:t,[b]:i}),n[i]=e}return n};function M(r,i){let a=v((0,e.useContext)(h),r),[s,l]=(0,e.useState)(null),u=(0,e.useRef)(a);u.current=a;let d=(0,e.useRef)({editor:null,holder:null,destroyTimeout:null,isDestroyed:!1,isEditorReady:!1,depsToken:null}),f=(0,e.useMemo)(()=>({}),i==null?[]:i),p=(0,e.useRef)(a.data),g=(0,e.useRef)(null),_=(0,e.useRef)(a.data),y=(0,e.useRef)(Promise.resolve()),b=(0,e.useRef)(void 0),S=(0,e.useRef)(null),w=(0,e.useRef)(void 0),E=(0,e.useRef)(new Map);(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),()=>{N(e,l)};if(e.editor!==null&&!e.isDestroyed){c(e.editor),T(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=x(),a=r.tools===void 0?void 0:k(r.tools,()=>u.current.tools),s=a===void 0?void 0:j(a,i);S.current=i,w.current=a,E.current=new Map;let h=m(m(m({},r),s===void 0?{}:{tools:s}),{},{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&&(h.onSave=(...e)=>{var t,n;p.current=e[0],(t=(n=u.current).onSave)==null||t.call(n,...e)}),r.onBeforeRender&&(h.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&&(h.onAfterRender=(...e)=>{var t,n;(t=(n=u.current).onAfterRender)==null||t.call(n,...e)});let g=new t.Blok(h);return e.editor=g,_.current=r.data,o(g,n),C(g,i),g.isReady.then(()=>{e.editor===g&&!e.isDestroyed&&(e.isEditorReady=!0,l(g))}).catch(()=>{if(e.editor===g&&!e.isDestroyed){c(g),T(g);try{g.destroy()}catch(e){}e.editor=null,e.holder=null,e.isDestroyed=!0,e.isEditorReady=!1,l(null)}}),()=>{N(e,l)}},[f]),(0,e.useEffect)(()=>{let e=S.current,t=d.current;if(e===null||t.editor===null||t.isDestroyed)return;let r=u.current.tools;if(typeof r!=`object`||!r)return;let i=w.current;for(let[t,o]of Object.entries(r)){var a;if(!A(o))continue;let r=typeof o==`function`||(a=o.config)==null?{}:a,s=i==null?void 0:i[t],c=O(typeof s==`object`&&s?s.config:void 0,r),l=E.current.get(t);if(l!==void 0&&(0,n.deepEqual)(c,l))continue;let u=Object.freeze(c);E.current.set(t,u),e.setToolConfig(t,u)}});let D=(0,n.normalizeReadOnlyConfig)(a.readOnly).enabled;(0,e.useEffect)(()=>{s!==null&&s.readOnly.set(D)},[s,D]);let{autofocus:M}=a;(0,e.useEffect)(()=>{s===null||!M||s.focus()},[s,M]);let{theme:P}=a;(0,e.useEffect)(()=>{s===null||P===void 0||s.theme.set(P)},[s,P]);let{width:F}=a;(0,e.useEffect)(()=>{s===null||F===void 0||s.width.set(F)},[s,F]);let{placeholder:I}=a;(0,e.useEffect)(()=>{s===null||I===void 0||s.placeholder.set(I)},[s,I]);let{data:L}=a;return(0,e.useEffect)(()=>{if(s===null||L===void 0)return;let e=d.current;if(!(e.editor!==s||e.isDestroyed)){if(g.current!==s&&(g.current=s,b.current=void 0,(0,n.deepEqual)(L,_.current))){p.current=L;return}(0,n.deepEqual)(L,p.current)||(0,n.deepEqual)(L,b.current)||(b.current=L,y.current=y.current.catch(()=>void 0).then(()=>s.render(L)).then(()=>{p.current=L},()=>{}).then(()=>{b.current===L&&(b.current=void 0)}))}},[s,L]),s}function N(e,t){e.destroyTimeout=setTimeout(()=>{if(e.editor!==null){c(e.editor),T(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)}var P=class extends e.Component{constructor(...e){super(...e),this.state={failed:!1}}static getDerivedStateFromError(){return{failed:!0}}componentDidCatch(){}render(){return this.state.failed?null:this.props.children}};function F({registry:t}){let n=(0,e.useSyncExternalStore)(t.subscribe,t.getSnapshot,t.getSnapshot);return(0,r.jsx)(r.Fragment,{children:Array.from(n.entries()).map(([e,t])=>{let n=t.component;return(0,i.createPortal)((0,r.jsx)(P,{children:(0,r.jsx)(n,m({},t.props))}),t.hostEl,e)})})}function I(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 L(e,t){if(e==null)return{};var n,r,i=I(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 R=[`editor`],z=(0,e.forwardRef)(function(t,n){let{editor:i}=t,a=L(t,R),o=(0,e.useRef)(null),c=e=>{if(o.current=e,typeof n==`function`)n(e);else if(n!=null){let t=n;t.current=e}};(0,e.useEffect)(()=>{if(i===null||o.current===null)return;let e=s(i);if(e!==void 0)return o.current.appendChild(e),()=>{e.remove()}},[i]);let l=i===null?void 0:w(i);return(0,r.jsx)(`div`,m(m({ref:c},a),{},{children:l===void 0?null:(0,r.jsx)(F,{registry:l})}))}),B=`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(`.`),V=[`deps`,`onReady`,`onBlocksRendered`,`onBlockRendered`],H=new Set(B),U=(0,e.forwardRef)(function(t,n){let{deps:i,onReady:a,onBlocksRendered:o,onBlockRendered:s}=t,c=L(t,V),l={},u={};for(let e of Object.keys(c)){let t=c[e];H.has(e)?l[e]=t:u[e]=t}let d=M(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 p=(0,e.useRef)(o);p.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=p.current)==null?void 0:t.call(p,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)(z,m({editor:d},u))}),W=`block changed`;function G(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(W,n),()=>t.off(W,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])}var K=[y,b];function q(t){var a;return a=class{static get toolbox(){return t.toolbox}static get isReadOnlySupported(){return!0}constructor(i){var a,o;this.hostEl=null,this.pendingDispatch=!1,this.commit=e=>{var r;let i=(0,n.fillDefaults)(t.propSchema,m(m({},this.mirror),e));(0,n.deepEqual)(i,this.mirror)||(this.mirror=i,this.lastRendered=i,(r=this.registry)==null||r.setProps(this.blockApi.id,{data:i}),this.flushDispatch())},this.blockApi=i.block;let s=(a=i.config)==null?{}:a;this.registry=s[y];let c=s[b];this.toolName=typeof c==`string`?c:void 0;let l={};for(let[e,t]of Object.entries(s))K.includes(e)||(l[e]=t);this.toolConfig=Object.freeze(l);let u=i.api;this.pointerDrag=()=>{var e;return(u==null||(e=u.blocks)==null?void 0:e.isPointerDragActive)===!0},this.mirror=(0,n.fillDefaults)(t.propSchema,(o=i.data)==null?{}:o),this.lastRendered=this.mirror,this.readOnly=i.readOnly;let d=this.blockApi;this.childrenComponent=function(){let t=(0,e.useRef)(null);return(0,e.useEffect)(()=>{t.current!==null&&(0,n.mountChildBlocks)(t.current,d.getChildren())}),(0,r.jsx)(`div`,{ref:t,[n.DATA_ATTR.nestedBlocks]:``})}}render(){var e;let n=document.createElement(`div`);return n.setAttribute(`data-blok-mutation-free`,`true`),this.hostEl=n,(e=this.registry)==null||e.register(this.blockApi.id,{hostEl:n,component:t.component,props:this.buildProps(),toolName:this.toolName}),n}rendered(){var e;(e=t.onRendered)==null||e.call(t,this.blockApi)}save(){return this.mirror}async setData(e){var r=this;let i=(0,n.fillDefaults)(t.propSchema,e==null?{}:e);return(0,n.deepEqual)(i,r.lastRendered)?!0:(r.mirror=i,r.lastRendered=i,r.pushProps({data:i}),!0)}setReadOnly(e){this.readOnly=e,this.pushProps({readOnly:e})}moved(){var e;(e=t.onMoved)==null||e.call(t,this.blockApi)}removed(){var e,n;(e=this.registry)==null||e.unregister(this.blockApi.id),(n=t.onRemoved)==null||n.call(t,this.blockApi)}destroy(){var e;(e=this.registry)==null||e.unregister(this.blockApi.id)}buildProps(){return{data:this.mirror,commit:this.commit,block:this.blockApi,readOnly:this.readOnly,config:this.toolConfig,BlockChildren:this.childrenComponent}}pushProps(e){let t=this.registry;t!==void 0&&(0,i.flushSync)(()=>{t.setProps(this.blockApi.id,e)})}flushDispatch(){if(!this.pointerDrag()){this.pendingDispatch=!1,this.blockApi.dispatchChange();return}if(this.pendingDispatch)return;this.pendingDispatch=!0;let e=()=>{if(this.pointerDrag()){requestAnimationFrame(e);return}this.pendingDispatch=!1,this.blockApi.dispatchChange()};requestAnimationFrame(e)}},a.__isBlokReactBlock=!0,a}exports.BLOK_PORTAL_REGISTRY_CONFIG_KEY=y,exports.BLOK_TOOL_NAME_CONFIG_KEY=b,exports.BlockPortalHost=F,exports.BlokContent=z,exports.BlokEditor=U,exports.BlokProvider=g,exports.createBlockPortalRegistry=x,exports.createReactBlock=q,exports.useBlocks=G,exports.useBlok=M,exports.useBlokDefaults=_;

package/dist/index.mjs

@@ -1,51 +1,51 @@
 import { Component as e, createContext as t, forwardRef as n, useCallback as r, useContext as i, useEffect as a, useImperativeHandle as o, useMemo as s, useRef as c, useState as l, useSyncExternalStore as u } from "react";
 import { Blok as d } from "@bloklabs/core";
-import { DATA_ATTR as f, EMPTY_API as p, createBlocksApiForEditor as m, deepEqual as h, deepEqual as g, fillDefaults as _, mountChildBlocks as v, normalizeReadOnlyConfig as ee } from "@bloklabs/core/adapters";
-import { Fragment as y, jsx as b } from "react/jsx-runtime";
-import { createPortal as x, flushSync as S } from "react-dom";
+import { DATA_ATTR as f, EMPTY_API as p, createBlocksApiForEditor as m, deepEqual as h, deepEqual as g, fillDefaults as _, mountChildBlocks as v, normalizeReadOnlyConfig as y } from "@bloklabs/core/adapters";
+import { Fragment as b, jsx as x } from "react/jsx-runtime";
+import { createPortal as S, flushSync as C } from "react-dom";
 //#region src/holder-map.ts
-var C = /* @__PURE__ */ new WeakMap();
-function te(e, t) {
-	C.set(e, t);
+var w = /* @__PURE__ */ new WeakMap();
+function T(e, t) {
+	w.set(e, t);
 }
-function w(e) {
-	return C.get(e);
+function E(e) {
+	return w.get(e);
 }
-function T(e) {
-	C.delete(e);
+function D(e) {
+	w.delete(e);
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.126.0/helpers/typeof.js
-function E(e) {
+function O(e) {
 	"@babel/helpers - typeof";
-	return E = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(e) {
+	return O = 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;
-	}, E(e);
+	}, O(e);
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.126.0/helpers/toPrimitive.js
-function D(e, t) {
-	if (E(e) != "object" || !e) return e;
+function k(e, t) {
+	if (O(e) != "object" || !e) return e;
 	var n = e[Symbol.toPrimitive];
 	if (n !== void 0) {
 		var r = n.call(e, t || "default");
-		if (E(r) != "object") return r;
+		if (O(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 O(e) {
-	var t = D(e, "string");
-	return E(t) == "symbol" ? t : t + "";
+function A(e) {
+	var t = k(e, "string");
+	return O(t) == "symbol" ? t : t + "";
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.126.0/helpers/defineProperty.js
-function k(e, t, n) {
-	return (t = O(t)) in e ? Object.defineProperty(e, t, {
+function j(e, t, n) {
+	return (t = A(t)) in e ? Object.defineProperty(e, t, {
 		value: n,
 		enumerable: !0,
 		configurable: !0,
@@ -54,7 +54,7 @@ function k(e, t, n) {
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.126.0/helpers/objectSpread2.js
-function A(e, t) {
+function M(e, t) {
 	var n = Object.keys(e);
 	if (Object.getOwnPropertySymbols) {
 		var r = Object.getOwnPropertySymbols(e);
@@ -64,12 +64,12 @@ function A(e, t) {
 	}
 	return n;
 }
-function j(e) {
+function N(e) {
 	for (var t = 1; t < arguments.length; t++) {
 		var n = arguments[t] == null ? {} : arguments[t];
-		t % 2 ? A(Object(n), !0).forEach(function(t) {
-			k(e, t, n[t]);
-		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : A(Object(n)).forEach(function(t) {
+		t % 2 ? M(Object(n), !0).forEach(function(t) {
+			j(e, t, n[t]);
+		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : M(Object(n)).forEach(function(t) {
 			Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
 		});
 	}
@@ -77,46 +77,54 @@ function j(e) {
 }
 //#endregion
 //#region src/provide-blok.tsx
-var M = t({});
-function N({ defaults: e, children: t }) {
-	return /* @__PURE__ */ b(M.Provider, {
+var P = t({});
+function F({ defaults: e, children: t }) {
+	return /* @__PURE__ */ x(P.Provider, {
 		value: e,
 		children: t
 	});
 }
-function P() {
-	return i(M);
+function I() {
+	return i(P);
 }
-function F(e, t) {
+function ee(e, t) {
 	if (Object.keys(e).length === 0) return t;
-	let n = j({}, e);
+	let n = N({}, 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 = j(j({}, e.tools), t.tools)), n;
+	return (e.tools !== void 0 || t.tools !== void 0) && (n.tools = N(N({}, e.tools), t.tools)), n;
 }
 //#endregion
 //#region src/block-portal-registry.ts
-var I = "__blokPortalRegistry", L = () => {
-	let e = { snapshot: /* @__PURE__ */ new Map() }, t = /* @__PURE__ */ new Set(), n = (n) => {
+var L = "__blokPortalRegistry", R = "__blokToolName", z = () => {
+	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, r) {
-			let i = new Map(e.snapshot);
-			i.set(t, r), n(i);
+		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 : N(N({}, i), {}, { props: N(N({}, i.props), {}, { config: o }) })), r(a);
 		},
 		unregister(t) {
 			if (!e.snapshot.has(t)) return;
-			let r = new Map(e.snapshot);
-			r.delete(t), n(r);
+			let n = new Map(e.snapshot);
+			n.delete(t), r(n);
 		},
-		setProps(t, r) {
+		setProps(t, n) {
 			let i = e.snapshot.get(t);
 			if (i === void 0) return;
 			let a = new Map(e.snapshot);
-			a.set(t, j(j({}, i), {}, { props: j(j({}, i.props), r) })), n(a);
+			a.set(t, N(N({}, i), {}, { props: N(N({}, 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, N(N({}, t), {}, { props: N(N({}, t.props), {}, { config: i }) }));
+			r(o);
 		},
 		subscribe(e) {
 			return t.add(e), () => {
@@ -127,30 +135,45 @@ var I = "__blokPortalRegistry", L = () => {
 			return e.snapshot;
 		}
 	};
-}, R = /* @__PURE__ */ new WeakMap();
-function z(e, t) {
-	R.set(e, t);
+}, B = /* @__PURE__ */ new WeakMap();
+function V(e, t) {
+	B.set(e, t);
 }
-function B(e) {
-	return R.get(e);
+function H(e) {
+	return B.get(e);
 }
-function V(e) {
-	R.delete(e);
+function U(e) {
+	B.delete(e);
 }
 //#endregion
 //#region src/live-tool-config.ts
-var H = (e) => {
+var W = (e) => {
 	if (typeof e != "object" || !e) return !1;
 	let t = Object.getPrototypeOf(e);
 	return t === Object.prototype || t === null;
-}, U = (e, t) => t.reduce((e, t) => {
+}, G = (e, t) => t.reduce((e, t) => {
 	if (Array.isArray(e)) return typeof t == "number" ? e[t] : void 0;
-	if (H(e)) return e[t];
-}, e), W = (e, t) => {
-	if (!H(e)) return e;
+	if (W(e)) return e[t];
+}, e), K = (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 (W(e)) {
+			let r = W(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 W(r) ? r : {};
+}, te = (e, t) => {
+	if (!W(e)) return e;
 	let n = {};
 	for (let [r, i] of Object.entries(e)) {
-		if (!H(i) || !H(i.config)) {
+		if (!W(i) || !W(i.config)) {
 			n[r] = i;
 			continue;
 		}
@@ -158,12 +181,12 @@ var H = (e) => {
 			if (typeof n == "function") {
 				let e = n;
 				return function(...n) {
-					let a = t(), o = H(a) ? a[r] : void 0, s = U(H(o) ? o.config : void 0, i);
+					let a = t(), o = W(a) ? a[r] : void 0, s = G(W(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 (H(n)) {
+			if (W(n)) {
 				if (e.has(n)) return n;
 				e.add(n);
 				let t = {};
@@ -172,26 +195,31 @@ var H = (e) => {
 			}
 			return n;
 		};
-		n[r] = j(j({}, i), {}, { config: a(i.config, []) });
+		n[r] = N(N({}, i), {}, { config: a(i.config, []) });
 	}
 	return n;
-}, G = (e, t) => {
+}, q = (e) => {
+	let t = typeof e == "function" ? e : e == null ? void 0 : e.class;
+	return typeof t == "function" && t.__isBlokReactBlock === !0;
+}, ne = (e, t) => {
 	if (typeof e != "object" || !e) return e;
 	let n = {};
 	for (let [i, a] of Object.entries(e)) {
 		var r;
-		let e = typeof a == "function" ? a : a == null ? void 0 : a.class;
-		if (!(typeof e == "function" && e.__isBlokReactBlock === !0)) {
+		if (!q(a)) {
 			n[i] = a;
 			continue;
 		}
-		let o = typeof a == "function" ? { class: a } : j({}, a);
-		o.config = j(j({}, (r = o.config) == null ? {} : r), {}, { [I]: t }), n[i] = o;
+		let e = typeof a == "function" ? { class: a } : N({}, a);
+		e.config = N(N({}, (r = e.config) == null ? {} : r), {}, {
+			[L]: t,
+			[R]: i
+		}), n[i] = e;
 	}
 	return n;
 };
-function K(e, t) {
-	let n = F(i(M), e), [r, o] = l(null), u = c(n);
+function J(e, t) {
+	let n = ee(i(P), e), [r, o] = l(null), u = c(n);
 	u.current = n;
 	let f = c({
 		editor: null,
@@ -200,15 +228,15 @@ function K(e, t) {
 		isDestroyed: !1,
 		isEditorReady: !1,
 		depsToken: null
-	}), p = s(() => ({}), t == null ? [] : t), m = c(n.data), h = c(null), _ = c(n.data), v = c(Promise.resolve()), y = c(void 0);
+	}), p = s(() => ({}), t == null ? [] : t), m = c(n.data), h = c(null), _ = c(n.data), v = c(Promise.resolve()), b = c(void 0), x = c(null), S = c(void 0), C = c(/* @__PURE__ */ new Map());
 	a(() => {
 		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 === p) return e.isEditorReady && o(e.editor), () => {
-			q(e, o);
+			Y(e, o);
 		};
 		if (e.editor !== null && !e.isDestroyed) {
-			T(e.editor), V(e.editor);
+			D(e.editor), U(e.editor);
 			try {
 				e.editor.destroy();
 			} catch (e) {}
@@ -216,7 +244,9 @@ function K(e, t) {
 		}
 		let t = document.createElement("div");
 		e.holder = t, e.isDestroyed = !1, e.isEditorReady = !1, e.depsToken = p;
-		let n = u.current, r = L(), i = n.tools === void 0 ? void 0 : G(W(n.tools, () => u.current.tools), r), a = j(j(j({}, n), i === void 0 ? {} : { tools: i }), {}, {
+		let n = u.current, r = z(), i = n.tools === void 0 ? void 0 : te(n.tools, () => u.current.tools), a = i === void 0 ? void 0 : ne(i, r);
+		x.current = r, S.current = i, C.current = /* @__PURE__ */ new Map();
+		let s = N(N(N({}, n), a === void 0 ? {} : { tools: a }), {}, {
 			holder: t,
 			onReady: (...e) => {
 				var t, n;
@@ -227,72 +257,86 @@ function K(e, t) {
 				(t = (n = u.current).onChange) == null || t.call(n, ...e);
 			}
 		});
-		n.onSave && (a.onSave = (...e) => {
+		n.onSave && (s.onSave = (...e) => {
 			var t, n;
 			m.current = e[0], (t = (n = u.current).onSave) == null || t.call(n, ...e);
-		}), n.onBeforeRender && (a.onBeforeRender = (...e) => {
+		}), n.onBeforeRender && (s.onBeforeRender = (...e) => {
 			var t, n, r;
 			return (t = (n = (r = u.current).onBeforeRender) == null ? void 0 : n.call(r, ...e)) == null ? e[0] : t;
-		}), n.onAfterRender && (a.onAfterRender = (...e) => {
+		}), n.onAfterRender && (s.onAfterRender = (...e) => {
 			var t, n;
 			(t = (n = u.current).onAfterRender) == null || t.call(n, ...e);
 		});
-		let s = new d(a);
-		return e.editor = s, _.current = n.data, te(s, t), z(s, r), s.isReady.then(() => {
-			e.editor === s && !e.isDestroyed && (e.isEditorReady = !0, o(s));
+		let c = new d(s);
+		return e.editor = c, _.current = n.data, T(c, t), V(c, r), c.isReady.then(() => {
+			e.editor === c && !e.isDestroyed && (e.isEditorReady = !0, o(c));
 		}).catch(() => {
-			if (e.editor === s && !e.isDestroyed) {
-				T(s), V(s);
+			if (e.editor === c && !e.isDestroyed) {
+				D(c), U(c);
 				try {
-					s.destroy();
+					c.destroy();
 				} catch (e) {}
 				e.editor = null, e.holder = null, e.isDestroyed = !0, e.isEditorReady = !1, o(null);
 			}
 		}), () => {
-			q(e, o);
+			Y(e, o);
 		};
-	}, [p]);
-	let b = ee(n.readOnly).enabled;
+	}, [p]), a(() => {
+		let e = x.current, t = f.current;
+		if (e === null || t.editor === null || t.isDestroyed) return;
+		let n = u.current.tools;
+		if (typeof n != "object" || !n) return;
+		let r = S.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 = K(typeof o == "object" && o ? o.config : void 0, n), c = C.current.get(t);
+			if (c !== void 0 && g(s, c)) continue;
+			let l = Object.freeze(s);
+			C.current.set(t, l), e.setToolConfig(t, l);
+		}
+	});
+	let w = y(n.readOnly).enabled;
 	a(() => {
-		r !== null && r.readOnly.set(b);
-	}, [r, b]);
-	let { autofocus: x } = n;
+		r !== null && r.readOnly.set(w);
+	}, [r, w]);
+	let { autofocus: E } = n;
 	a(() => {
-		r === null || !x || r.focus();
-	}, [r, x]);
-	let { theme: S } = n;
+		r === null || !E || r.focus();
+	}, [r, E]);
+	let { theme: O } = n;
 	a(() => {
-		r === null || S === void 0 || r.theme.set(S);
-	}, [r, S]);
-	let { width: C } = n;
+		r === null || O === void 0 || r.theme.set(O);
+	}, [r, O]);
+	let { width: k } = n;
 	a(() => {
-		r === null || C === void 0 || r.width.set(C);
-	}, [r, C]);
-	let { placeholder: w } = n;
+		r === null || k === void 0 || r.width.set(k);
+	}, [r, k]);
+	let { placeholder: A } = n;
 	a(() => {
-		r === null || w === void 0 || r.placeholder.set(w);
-	}, [r, w]);
-	let { data: E } = n;
+		r === null || A === void 0 || r.placeholder.set(A);
+	}, [r, A]);
+	let { data: j } = n;
 	return a(() => {
-		if (r === null || E === void 0) return;
+		if (r === null || j === void 0) return;
 		let e = f.current;
 		if (!(e.editor !== r || e.isDestroyed)) {
-			if (h.current !== r && (h.current = r, y.current = void 0, g(E, _.current))) {
-				m.current = E;
+			if (h.current !== r && (h.current = r, b.current = void 0, g(j, _.current))) {
+				m.current = j;
 				return;
 			}
-			g(E, m.current) || g(E, y.current) || (y.current = E, v.current = v.current.catch(() => void 0).then(() => r.render(E)).then(() => {
-				m.current = E;
+			g(j, m.current) || g(j, b.current) || (b.current = j, v.current = v.current.catch(() => void 0).then(() => r.render(j)).then(() => {
+				m.current = j;
 			}, () => {}).then(() => {
-				y.current === E && (y.current = void 0);
+				b.current === j && (b.current = void 0);
 			}));
 		}
-	}, [r, E]), r;
+	}, [r, j]), r;
 }
-function q(e, t) {
+function Y(e, t) {
 	e.destroyTimeout = setTimeout(() => {
 		if (e.editor !== null) {
-			T(e.editor), V(e.editor);
+			D(e.editor), U(e.editor);
 			try {
 				e.editor.destroy();
 			} catch (e) {}
@@ -302,7 +346,7 @@ function q(e, t) {
 }
 //#endregion
 //#region src/BlockPortalHost.tsx
-var J = class extends e {
+var re = class extends e {
 	constructor(...e) {
 		super(...e), this.state = { failed: !1 };
 	}
@@ -314,16 +358,16 @@ var J = class extends e {
 		return this.state.failed ? null : this.props.children;
 	}
 };
-function Y({ registry: e }) {
+function X({ registry: e }) {
 	let t = u(e.subscribe, e.getSnapshot, e.getSnapshot);
-	return /* @__PURE__ */ b(y, { children: Array.from(t.entries()).map(([e, t]) => {
+	return /* @__PURE__ */ x(b, { children: Array.from(t.entries()).map(([e, t]) => {
 		let n = t.component;
-		return x(/* @__PURE__ */ b(J, { children: /* @__PURE__ */ b(n, j({}, t.props)) }), t.hostEl, e);
+		return S(/* @__PURE__ */ x(re, { children: /* @__PURE__ */ x(n, N({}, t.props)) }), t.hostEl, e);
 	}) });
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.126.0/helpers/objectWithoutPropertiesLoose.js
-function X(e, t) {
+function ie(e, t) {
 	if (e == null) return {};
 	var n = {};
 	for (var r in e) if ({}.hasOwnProperty.call(e, r)) {
@@ -336,7 +380,7 @@ function X(e, t) {
 //#region \0@oxc-project+runtime@0.126.0/helpers/objectWithoutProperties.js
 function Z(e, t) {
 	if (e == null) return {};
-	var n, r, i = X(e, t);
+	var n, r, i = ie(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]);
@@ -345,8 +389,8 @@ function Z(e, t) {
 }
 //#endregion
 //#region src/BlokContent.tsx
-var ne = ["editor"], Q = n(function(e, t) {
-	let { editor: n } = e, r = Z(e, ne), i = c(null), o = (e) => {
+var ae = ["editor"], Q = n(function(e, t) {
+	let { editor: n } = e, r = Z(e, ae), i = c(null), o = (e) => {
 		if (i.current = e, typeof t == "function") t(e);
 		else if (t != null) {
 			let n = t;
@@ -355,25 +399,25 @@ var ne = ["editor"], Q = n(function(e, t) {
 	};
 	a(() => {
 		if (n === null || i.current === null) return;
-		let e = w(n);
+		let e = E(n);
 		if (e !== void 0) return i.current.appendChild(e), () => {
 			e.remove();
 		};
 	}, [n]);
-	let s = n === null ? void 0 : B(n);
-	return /* @__PURE__ */ b("div", j(j({ ref: o }, r), {}, { children: s === void 0 ? null : /* @__PURE__ */ b(Y, { registry: s }) }));
-}), re = /* @__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("."), ie = [
+	let s = n === null ? void 0 : H(n);
+	return /* @__PURE__ */ x("div", N(N({ ref: o }, r), {}, { children: s === void 0 ? null : /* @__PURE__ */ x(X, { registry: s }) }));
+}), oe = /* @__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("."), se = [
 	"deps",
 	"onReady",
 	"onBlocksRendered",
 	"onBlockRendered"
-], ae = new Set(re), oe = n(function(e, t) {
-	let { deps: n, onReady: r, onBlocksRendered: i, onBlockRendered: s } = e, l = Z(e, ie), u = {}, d = {};
+], ce = new Set(oe), le = n(function(e, t) {
+	let { deps: n, onReady: r, onBlocksRendered: i, onBlockRendered: s } = e, l = Z(e, se), u = {}, d = {};
 	for (let e of Object.keys(l)) {
 		let t = l[e];
-		ae.has(e) ? u[e] = t : d[e] = t;
+		ce.has(e) ? u[e] = t : d[e] = t;
 	}
-	let f = K(u, n);
+	let f = J(u, n);
 	o(t, () => f, [f]);
 	let p = c(r);
 	p.current = r, a(() => {
@@ -411,9 +455,9 @@ var ne = ["editor"], Q = n(function(e, t) {
 		f,
 		g,
 		_
-	]), /* @__PURE__ */ b(Q, j({ editor: f }, d));
+	]), /* @__PURE__ */ x(Q, N({ editor: f }, d));
 }), $ = "block changed";
-function se(e) {
+function ue(e) {
 	let t = c(0), n = c(e);
 	n.current !== e && (n.current = e, t.current = 0);
 	let i = r((n) => {
@@ -427,7 +471,8 @@ function se(e) {
 }
 //#endregion
 //#region src/createReactBlock.tsx
-function ce(e) {
+var de = [L, R];
+function fe(e) {
 	var t;
 	return t = class {
 		static get toolbox() {
@@ -440,22 +485,27 @@ function ce(e) {
 			var n, r;
 			this.hostEl = null, this.pendingDispatch = !1, this.commit = (t) => {
 				var n;
-				let r = _(e.propSchema, j(j({}, this.mirror), t));
-				this.mirror = r, this.lastRendered = r, (n = this.registry) == null || n.setProps(this.blockApi.id, { data: r }), this.flushDispatch();
+				let r = _(e.propSchema, N(N({}, this.mirror), t));
+				h(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[I];
-			let o = t.api;
+			this.registry = i[L];
+			let o = i[R];
+			this.toolName = typeof o == "string" ? o : void 0;
+			let s = {};
+			for (let [e, t] of Object.entries(i)) de.includes(e) || (s[e] = t);
+			this.toolConfig = Object.freeze(s);
+			let l = t.api;
 			this.pointerDrag = () => {
 				var e;
-				return (o == null || (e = o.blocks) == null ? void 0 : e.isPointerDragActive) === !0;
+				return (l == null || (e = l.blocks) == null ? void 0 : e.isPointerDragActive) === !0;
 			}, this.mirror = _(e.propSchema, (r = t.data) == null ? {} : r), this.lastRendered = this.mirror, this.readOnly = t.readOnly;
-			let s = this.blockApi;
+			let u = this.blockApi;
 			this.childrenComponent = function() {
 				let e = c(null);
 				return a(() => {
-					e.current !== null && v(e.current, s.getChildren());
-				}), /* @__PURE__ */ b("div", {
+					e.current !== null && v(e.current, u.getChildren());
+				}), /* @__PURE__ */ x("div", {
 					ref: e,
 					[f.nestedBlocks]: ""
 				});
@@ -467,7 +517,8 @@ function ce(e) {
 			return n.setAttribute("data-blok-mutation-free", "true"), this.hostEl = n, (t = this.registry) == null || t.register(this.blockApi.id, {
 				hostEl: n,
 				component: e.component,
-				props: this.buildProps()
+				props: this.buildProps(),
+				toolName: this.toolName
 			}), n;
 		}
 		rendered() {
@@ -503,12 +554,13 @@ function ce(e) {
 				commit: this.commit,
 				block: this.blockApi,
 				readOnly: this.readOnly,
+				config: this.toolConfig,
 				BlockChildren: this.childrenComponent
 			};
 		}
 		pushProps(e) {
 			let t = this.registry;
-			t !== void 0 && S(() => {
+			t !== void 0 && C(() => {
 				t.setProps(this.blockApi.id, e);
 			});
 		}
@@ -531,4 +583,4 @@ function ce(e) {
 	}, t.__isBlokReactBlock = !0, t;
 }
 //#endregion
-export { I as BLOK_PORTAL_REGISTRY_CONFIG_KEY, Y as BlockPortalHost, Q as BlokContent, oe as BlokEditor, N as BlokProvider, L as createBlockPortalRegistry, ce as createReactBlock, se as useBlocks, K as useBlok, P as useBlokDefaults };
+export { L as BLOK_PORTAL_REGISTRY_CONFIG_KEY, R as BLOK_TOOL_NAME_CONFIG_KEY, X as BlockPortalHost, Q as BlokContent, le as BlokEditor, F as BlokProvider, z as createBlockPortalRegistry, fe as createReactBlock, ue as useBlocks, J as useBlok, I as useBlokDefaults };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloklabs/react",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "React bindings for the Blok editor",
   "license": "Apache-2.0",
   "author": "JackUait",
@@ -33,7 +33,7 @@
     "build": "yarn run -T vite build --mode production"
   },
   "peerDependencies": {
-    "@bloklabs/core": "^1.2.2",
+    "@bloklabs/core": "^1.2.4",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   }

package/src/BlokEditor.tsx

@@ -44,11 +44,13 @@ export interface BlokEditorProps
    * value referentially stable (primitives or useMemo-stable objects) — a dep
    * whose identity changes every render recreates the editor each time.
    *
-   * FUNCTIONS inside tool configs do NOT belong here: the adapter re-binds
-   * every tool-config function to the latest render's closure automatically,
-   * so an inline `uploadByFile`/callback with a fresh identity each render
-   * reaches the editor live, without recreation and without freezing its
-   * identity in a `useState` initializer.
+   * Tool configs do NOT belong here — reserve deps for true identity changes
+   * (e.g. the document id). FUNCTIONS inside tool configs are re-bound to the
+   * latest render's closure automatically (an inline `uploadByFile` with a
+   * fresh identity each render reaches the editor live), and non-function
+   * config VALUES of `createReactBlock` tools (permissions, URLs, locale…) are
+   * pushed to mounted blocks in place when they change. Neither requires
+   * recreation or `useState` identity-freezing.
    */
   deps?: DependencyList;
   /** Test id forwarded to the editor container element (via data-testid). */

package/src/block-portal-registry.ts

@@ -8,6 +8,15 @@ import type { ComponentType } from 'react';
  */
 export const BLOK_PORTAL_REGISTRY_CONFIG_KEY = '__blokPortalRegistry';
 
+/**
+ * Tool-config key carrying the name the tool was registered under in the
+ * consumer's `tools` map (injected next to the registry). The factory needs it
+ * to associate portal entries with their tool so live config updates can be
+ * routed; it is stripped (with the registry key) before the sanitized config
+ * reaches the component.
+ */
+export const BLOK_TOOL_NAME_CONFIG_KEY = '__blokToolName';
+
 /**
  * One mounted React block in the portal registry. `hostEl` is the Blok-owned
  * `toolRenderedElement` (tagged `data-blok-mutation-free`) the component is
@@ -18,6 +27,8 @@ export interface BlockPortalEntry {
   hostEl: HTMLElement;
   component: ComponentType<Record<string, unknown>>;
   props: Record<string, unknown>;
+  /** Name the tool is registered under — routes per-tool live config updates. */
+  toolName?: string;
 }
 
 /**
@@ -40,6 +51,12 @@ export interface BlockPortalRegistry {
   unregister(id: string): void;
   /** Merge `props` into the entry's props (in-place update, no remount). */
   setProps(id: string, props: Record<string, unknown>): void;
+  /**
+   * Replace the `config` prop of every entry registered under `toolName`, and
+   * remember it so entries registered LATER start from this latest config
+   * instead of their construction-time snapshot.
+   */
+  setToolConfig(toolName: string, config: Record<string, unknown>): void;
   /** Subscribe to snapshot changes; returns the unsubscribe function. */
   subscribe(listener: () => void): () => void;
   /** Current immutable snapshot (stable identity until the next mutation). */
@@ -56,6 +73,8 @@ export const createBlockPortalRegistry = (): BlockPortalRegistry => {
     snapshot: new Map<string, BlockPortalEntry>() as ReadonlyMap<string, BlockPortalEntry>,
   };
   const listeners = new Set<() => void>();
+  /** Latest per-tool config, applied to mounted entries and future registers. */
+  const toolConfigs = new Map<string, Record<string, unknown>>();
 
   const commit = (next: Map<string, BlockPortalEntry>): void => {
     state.snapshot = next;
@@ -65,8 +84,12 @@ export const createBlockPortalRegistry = (): BlockPortalRegistry => {
   return {
     register(id: string, entry: BlockPortalEntry): void {
       const next = new Map(state.snapshot);
+      const liveConfig = entry.toolName === undefined ? undefined : toolConfigs.get(entry.toolName);
 
-      next.set(id, entry);
+      next.set(
+        id,
+        liveConfig === undefined ? entry : { ...entry, props: { ...entry.props, config: liveConfig } }
+      );
       commit(next);
     },
     unregister(id: string): void {
@@ -91,6 +114,23 @@ export const createBlockPortalRegistry = (): BlockPortalRegistry => {
       next.set(id, { ...current, props: { ...current.props, ...props } });
       commit(next);
     },
+    setToolConfig(toolName: string, config: Record<string, unknown>): void {
+      toolConfigs.set(toolName, config);
+
+      const matching = [...state.snapshot].filter(([, entry]) => entry.toolName === toolName);
+
+      if (matching.length === 0) {
+        return;
+      }
+
+      const next = new Map(state.snapshot);
+
+      for (const [id, entry] of matching) {
+        next.set(id, { ...entry, props: { ...entry.props, config } });
+      }
+
+      commit(next);
+    },
     subscribe(listener: () => void): () => void {
       listeners.add(listener);
 

package/src/createReactBlock.tsx

@@ -3,6 +3,7 @@ import { flushSync } from 'react-dom';
 import { DATA_ATTR, deepEqual, fillDefaults, mountChildBlocks, type PropSchema } from '@bloklabs/core/adapters';
 import {
   BLOK_PORTAL_REGISTRY_CONFIG_KEY,
+  BLOK_TOOL_NAME_CONFIG_KEY,
   type BlockPortalRegistry,
 } from './block-portal-registry';
 import type { BlockAPI } from '@/types/api';
@@ -10,8 +11,14 @@ import type { BlockToolConstructorOptions, BlockToolData, ToolboxConfig } from '
 
 export type { PropSchema, PropSchemaEntry } from '@bloklabs/core/adapters';
 
+/** Adapter-internal config keys, stripped before the config reaches the component. */
+const INTERNAL_CONFIG_KEYS: readonly string[] = [
+  BLOK_PORTAL_REGISTRY_CONFIG_KEY,
+  BLOK_TOOL_NAME_CONFIG_KEY,
+];
+
 /** Props handed to a React block's `component` (the only data write path is `commit`). */
-export interface ReactBlockRenderProps<Data> {
+export interface ReactBlockRenderProps<Data, Config = Record<string, unknown>> {
   /** Frozen snapshot of the block data. Re-rendered with a new value on change; never mutate. */
   data: Readonly<Data>;
   /** The ONLY data write path: merge a partial patch and sync once. */
@@ -26,12 +33,21 @@ export interface ReactBlockRenderProps<Data> {
    * the editor is read-only (same contract as a vanilla tool's `setReadOnly`).
    */
   readOnly: boolean;
+  /**
+   * The tool's `config` from the consumer's `tools` map (adapter-internal keys
+   * stripped) — the first-class channel for host props (permissions, CDN/upload
+   * URLs, locale…). No context provider needed. Under `useBlok`/`BlokEditor`
+   * this prop is LIVE: functions always call the latest render's closure, and
+   * changed non-function values are pushed to mounted blocks in place — so
+   * config values never belong in `deps`.
+   */
+  config: Readonly<Partial<Config>>;
   /** Engine-owned child slot — render `<BlockChildren />` for a container block. */
   BlockChildren: ComponentType;
 }
 
 /** Spec for {@link createReactBlock}. */
-export interface CreateReactBlockSpec<Data = BlockToolData> {
+export interface CreateReactBlockSpec<Data = BlockToolData, Config = Record<string, unknown>> {
   /** Tool type name (registered key). */
   type: string;
   /** Optional toolbox entry. */
@@ -39,7 +55,7 @@ export interface CreateReactBlockSpec<Data = BlockToolData> {
   /** Declarative defaults that also define the exact `save()` key set. */
   propSchema: PropSchema;
   /** The component rendered for each block instance. */
-  component: ComponentType<ReactBlockRenderProps<Data>>;
+  component: ComponentType<ReactBlockRenderProps<Data, Config>>;
   /** Optional lifecycle callbacks mapped from Blok's block hooks. */
   onRendered?: (block: BlockAPI) => void;
   onMoved?: (block: BlockAPI) => void;
@@ -64,8 +80,8 @@ export interface CreateReactBlockSpec<Data = BlockToolData> {
  * - `commit()` merges a patch and fires `dispatchChange` exactly once.
  * - `removed()`/`destroy()` unregister the portal (deterministic unmount).
  */
-export function createReactBlock<Data = BlockToolData>(
-  spec: CreateReactBlockSpec<Data>
+export function createReactBlock<Data = BlockToolData, Config = Record<string, unknown>>(
+  spec: CreateReactBlockSpec<Data, Config>
 ): (new (options: BlockToolConstructorOptions) => {
   render(): HTMLElement;
   save(): BlockToolData;
@@ -100,6 +116,10 @@ export function createReactBlock<Data = BlockToolData>(
 
     private readonly blockApi: BlockAPI;
     private readonly registry: BlockPortalRegistry | undefined;
+    /** Name this tool is registered under in the consumer's `tools` map. */
+    private readonly toolName: string | undefined;
+    /** The consumer's tool config with adapter-internal keys stripped. */
+    private readonly toolConfig: Readonly<Partial<Config>>;
     private readonly pointerDrag: () => boolean;
     private readonly childrenComponent: ComponentType;
     private mirror: Readonly<Data>;
@@ -117,6 +137,18 @@ export function createReactBlock<Data = BlockToolData>(
       const config = (options.config ?? {}) as Record<string, unknown>;
 
       this.registry = config[BLOK_PORTAL_REGISTRY_CONFIG_KEY] as BlockPortalRegistry | undefined;
+      const toolName = config[BLOK_TOOL_NAME_CONFIG_KEY];
+
+      this.toolName = typeof toolName === 'string' ? toolName : undefined;
+
+      const publicConfig: Record<string, unknown> = {};
+
+      for (const [key, value] of Object.entries(config)) {
+        if (!INTERNAL_CONFIG_KEYS.includes(key)) {
+          publicConfig[key] = value;
+        }
+      }
+      this.toolConfig = Object.freeze(publicConfig) as Readonly<Partial<Config>>;
 
       // Read the LIVE pointer-drag flag so a mid-drag commit can be deferred
       // (core silently drops a dispatchChange while a drag is active).
@@ -160,6 +192,7 @@ export function createReactBlock<Data = BlockToolData>(
         hostEl: host,
         component: spec.component as unknown as ComponentType<Record<string, unknown>>,
         props: this.buildProps(),
+        toolName: this.toolName,
       });
 
       // Returned synchronously; React flushes the portal on its next commit.
@@ -224,11 +257,12 @@ export function createReactBlock<Data = BlockToolData>(
 
     /** The full entry props handed to the component on (re-)register. */
     private buildProps(): Record<string, unknown> {
-      const props: ReactBlockRenderProps<Data> = {
+      const props: ReactBlockRenderProps<Data, Config> = {
         data: this.mirror,
         commit: this.commit,
         block: this.blockApi,
         readOnly: this.readOnly,
+        config: this.toolConfig,
         BlockChildren: this.childrenComponent,
       };
 
@@ -262,6 +296,14 @@ export function createReactBlock<Data = BlockToolData>(
         ...(patch as Record<string, unknown>),
       });
 
+      // Idempotent: a patch that changes nothing is a full no-op — no props
+      // push, no dispatchChange. This is what makes an effect that echoes the
+      // current value back through commit safe without a consumer-side guard
+      // (an unguarded echo would otherwise loop commit → render → effect).
+      if (deepEqual(next, this.mirror)) {
+        return;
+      }
+
       this.mirror = next;
       this.lastRendered = next;
       // No flushSync here: commit is called from React event handlers (inside a

package/src/index.ts

@@ -15,6 +15,7 @@ export type {
 export {
   createBlockPortalRegistry,
   BLOK_PORTAL_REGISTRY_CONFIG_KEY,
+  BLOK_TOOL_NAME_CONFIG_KEY,
 } from './block-portal-registry';
 export type { BlockPortalRegistry, BlockPortalEntry } from './block-portal-registry';
 export { BlockPortalHost } from './BlockPortalHost';

package/src/live-tool-config.ts

@@ -38,6 +38,48 @@ const resolveAtPath = (root: unknown, path: readonly (string | number)[]): unkno
     return undefined;
   }, root);
 
+/**
+ * Build the component-facing `config` for a react block from the LATEST render's
+ * raw config, preferring the stable live wrapper from `wrappedConfig` wherever
+ * both sides hold a function at the same path. The result carries the newest
+ * non-function VALUES while keeping function identities stable across renders
+ * (wrappers already delegate to the latest closure), so a deep-equal dedupe of
+ * successive results only fires when a value genuinely changed.
+ */
+export const buildLiveBlockConfig = (
+  wrappedConfig: unknown,
+  latestConfig: unknown
+): Record<string, unknown> => {
+  const merge = (latest: unknown, wrapped: unknown): unknown => {
+    if (typeof latest === 'function') {
+      return typeof wrapped === 'function' ? wrapped : latest;
+    }
+
+    if (Array.isArray(latest)) {
+      const wrappedArray = Array.isArray(wrapped) ? wrapped : [];
+
+      return latest.map((item, index) => merge(item, wrappedArray[index]));
+    }
+
+    if (isPlainObject(latest)) {
+      const wrappedObject = isPlainObject(wrapped) ? wrapped : {};
+      const result: Record<string, unknown> = {};
+
+      for (const [key, value] of Object.entries(latest)) {
+        result[key] = merge(value, wrappedObject[key]);
+      }
+
+      return result;
+    }
+
+    return latest;
+  };
+
+  const merged = merge(latestConfig, wrappedConfig);
+
+  return isPlainObject(merged) ? merged : {};
+};
+
 /**
  * Return a copy of `tools` where every function inside a tool's `config` is
  * replaced by a stable wrapper that calls the function found at the same path

package/src/useBlok.ts

@@ -6,10 +6,11 @@ import { BlokDefaultsContext, mergeBlokDefaults } from './provide-blok';
 import {
   createBlockPortalRegistry,
   BLOK_PORTAL_REGISTRY_CONFIG_KEY,
+  BLOK_TOOL_NAME_CONFIG_KEY,
   type BlockPortalRegistry,
 } from './block-portal-registry';
 import { setRegistry, removeRegistry } from './registry-map';
-import { bindLiveToolConfigFunctions } from './live-tool-config';
+import { bindLiveToolConfigFunctions, buildLiveBlockConfig } from './live-tool-config';
 import { normalizeReadOnlyConfig } from '@bloklabs/core/adapters';
 import type { Blok } from '@/types';
 import type { UseBlokConfig } from './types';
@@ -32,6 +33,15 @@ interface EditorInstanceState {
  * CORE, outside any React render, so it cannot read context — this config
  * bridge is how the tool reaches its editor-scoped registry.
  */
+const isReactBlockEntry = (entry: unknown): boolean => {
+  const toolClass = typeof entry === 'function' ? entry : (entry as { class?: unknown })?.class;
+
+  return (
+    typeof toolClass === 'function' &&
+    (toolClass as { __isBlokReactBlock?: boolean }).__isBlokReactBlock === true
+  );
+};
+
 const injectPortalRegistry = (tools: unknown, registry: BlockPortalRegistry): unknown => {
   if (tools === null || typeof tools !== 'object') {
     return tools;
@@ -40,12 +50,7 @@ const injectPortalRegistry = (tools: unknown, registry: BlockPortalRegistry): un
   const result: Record<string, unknown> = {};
 
   for (const [name, entry] of Object.entries(tools as Record<string, unknown>)) {
-    const toolClass = typeof entry === 'function' ? entry : (entry as { class?: unknown })?.class;
-    const isReactBlock =
-      typeof toolClass === 'function' &&
-      (toolClass as { __isBlokReactBlock?: boolean }).__isBlokReactBlock === true;
-
-    if (!isReactBlock) {
+    if (!isReactBlockEntry(entry)) {
       result[name] = entry;
 
       continue;
@@ -57,6 +62,7 @@ const injectPortalRegistry = (tools: unknown, registry: BlockPortalRegistry): un
     base.config = {
       ...((base.config as Record<string, unknown> | undefined) ?? {}),
       [BLOK_PORTAL_REGISTRY_CONFIG_KEY]: registry,
+      [BLOK_TOOL_NAME_CONFIG_KEY]: name,
     };
     result[name] = base;
   }
@@ -122,6 +128,12 @@ export function useBlok(configInput: UseBlokConfig, deps?: DependencyList): Blok
   // success baseline — so a failed render can't strand the baseline on content
   // the editor never actually showed.
   const pendingDataRef = useRef<UseBlokConfig['data']>(undefined);
+  // Live block-config channel (see the sync effect below): the current editor's
+  // portal registry, its construction-time wrapped tools (stable function
+  // wrappers), and the last config pushed per tool name (dedupe baseline).
+  const liveRegistryRef = useRef<BlockPortalRegistry | null>(null);
+  const wrappedToolsRef = useRef<unknown>(undefined);
+  const pushedBlockConfigsRef = useRef<Map<string, Record<string, unknown>>>(new Map());
 
   // Main lifecycle effect
   useEffect(() => {
@@ -191,13 +203,17 @@ export function useBlok(configInput: UseBlokConfig, deps?: DependencyList): Blok
     // wrappers that always call the latest render's closure — so consumers
     // never need to freeze identities or recreate the editor to update them.
     const registry = createBlockPortalRegistry();
-    const liveTools =
+    const wrappedTools =
       currentConfig.tools === undefined
         ? undefined
-        : injectPortalRegistry(
-            bindLiveToolConfigFunctions(currentConfig.tools, () => configRef.current.tools),
-            registry
-          );
+        : bindLiveToolConfigFunctions(currentConfig.tools, () => configRef.current.tools);
+    const liveTools = wrappedTools === undefined ? undefined : injectPortalRegistry(wrappedTools, registry);
+
+    // Reset the live block-config channel for this editor: the sync effect below
+    // reads these to push changed non-function config VALUES to mounted blocks.
+    liveRegistryRef.current = registry;
+    wrappedToolsRef.current = wrappedTools;
+    pushedBlockConfigsRef.current = new Map();
 
     const blokConfig = {
       ...currentConfig,
@@ -277,6 +293,58 @@ export function useBlok(configInput: UseBlokConfig, deps?: DependencyList): Blok
     };
   }, [depsToken]);
 
+  // Live tool-config VALUES for react blocks. Function slots are already live
+  // via the stable wrappers, but non-function values (permissions, URLs,
+  // locale…) were snapshotted at construction — which forced consumers to put
+  // them in `deps` and recreate the whole editor to change them. Instead, this
+  // effect runs on every render, rebuilds each react-block tool's
+  // component-facing config from the LATEST render's values (keeping wrapper
+  // identities for functions), and pushes it through the portal registry when
+  // it genuinely changed — mounted blocks re-render in place, future blocks
+  // start from the latest config.
+  useEffect(() => {
+    const registry = liveRegistryRef.current;
+    const state = stateRef.current;
+
+    if (registry === null || state.editor === null || state.isDestroyed) {
+      return;
+    }
+
+    const latestTools = configRef.current.tools as Record<string, unknown> | undefined;
+
+    if (latestTools === null || typeof latestTools !== 'object') {
+      return;
+    }
+
+    const wrappedTools = wrappedToolsRef.current as Record<string, unknown> | undefined;
+
+    for (const [name, entry] of Object.entries(latestTools)) {
+      if (!isReactBlockEntry(entry)) {
+        continue;
+      }
+
+      const latestConfig =
+        typeof entry === 'function' ? {} : ((entry as { config?: unknown }).config ?? {});
+      const wrappedEntry = wrappedTools?.[name];
+      const wrappedConfig =
+        wrappedEntry !== null && typeof wrappedEntry === 'object'
+          ? (wrappedEntry as { config?: unknown }).config
+          : undefined;
+
+      const candidate = buildLiveBlockConfig(wrappedConfig, latestConfig);
+      const pushed = pushedBlockConfigsRef.current.get(name);
+
+      if (pushed !== undefined && deepEqual(candidate, pushed)) {
+        continue;
+      }
+
+      const frozen = Object.freeze(candidate);
+
+      pushedBlockConfigsRef.current.set(name, frozen);
+      registry.setToolConfig(name, frozen);
+    }
+  });
+
   // Reactive: readOnly (object form normalized so the effect dep is a stable boolean)
   const readOnlyEnabled = normalizeReadOnlyConfig(config.readOnly).enabled;
   useEffect(() => {

package/types/index.d.ts

@@ -39,7 +39,7 @@ export interface BlokContentProps extends React.HTMLAttributes<HTMLDivElement> {
  * React hook that creates and manages a Blok editor instance.
  *
  * @param config - Editor configuration (all BlokConfig props except `holder`)
- * @param deps - Optional dependency array. When any dep changes, the editor is destroyed and recreated. Keep each value referentially stable (primitives or useMemo-stable objects) so the editor isn't recreated every render.
+ * @param deps - Optional dependency array. When any dep changes, the editor is destroyed and recreated. Keep each value referentially stable (primitives or useMemo-stable objects) so the editor isn't recreated every render. Reserve it for true identity changes (e.g. the document id): tool-config functions are re-bound to the latest render's closure automatically, and non-function config values of `createReactBlock` tools are pushed to mounted blocks in place — neither belongs in deps.
  * @returns The Blok editor instance, or null during SSR / before initialization.
  *
  * @example
@@ -81,6 +81,8 @@ export interface BlokEditorProps
    * 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.
+   * Reserve it for true identity changes (e.g. the document id): tool-config
+   * functions and `createReactBlock` config values stay live without it.
    */
   deps?: React.DependencyList;
   /** Test id forwarded to the editor container element (via data-testid). */
@@ -555,10 +557,14 @@ export interface PropSchemaEntry {
 export type PropSchema = Record<string, PropSchemaEntry>;
 
 /** Props handed to a React block's `component` (the only data write path is `commit`). */
-export interface ReactBlockRenderProps<Data> {
+export interface ReactBlockRenderProps<Data, Config = Record<string, unknown>> {
   /** Frozen snapshot of the block data. Re-rendered with a new value on change; never mutate. */
   data: Readonly<Data>;
-  /** The ONLY data write path: merge a partial patch and sync once. */
+  /**
+   * The ONLY data write path: merge a partial patch and sync once. Idempotent —
+   * a patch that changes nothing is a full no-op (no re-render, no change
+   * event), so effects may safely echo current values without a guard.
+   */
   commit: (patch: Partial<Data>) => void;
   /** This block's per-block API. */
   block: BlockAPI;
@@ -568,16 +574,27 @@ export interface ReactBlockRenderProps<Data> {
    * interactive when the editor is read-only.
    */
   readOnly: boolean;
+  /**
+   * The tool's `config` from the consumer's `tools` map (adapter-internal keys
+   * stripped) — the first-class channel for host props (permissions, CDN/upload
+   * URLs, locale…). LIVE under `useBlok`/`BlokEditor`: functions always call
+   * the latest render's closure, and changed non-function values are pushed to
+   * mounted blocks in place — config values never belong in `deps`.
+   */
+  config: Readonly<Partial<Config>>;
   /** Engine-owned child slot — render `<BlockChildren />` for a container block. */
   BlockChildren: React.ComponentType;
 }
 
 /** Spec for {@link createReactBlock}. */
-export interface CreateReactBlockSpec<Data extends BlockToolData = BlockToolData> {
+export interface CreateReactBlockSpec<
+  Data extends BlockToolData = BlockToolData,
+  Config = Record<string, unknown>
+> {
   type: string;
   toolbox?: ToolboxConfig;
   propSchema: PropSchema;
-  component: React.ComponentType<ReactBlockRenderProps<Data>>;
+  component: React.ComponentType<ReactBlockRenderProps<Data, Config>>;
   onRendered?: (block: BlockAPI) => void;
   onMoved?: (block: BlockAPI) => void;
   onRemoved?: (block: BlockAPI) => void;
@@ -602,9 +619,10 @@ export interface CreateReactBlockSpec<Data extends BlockToolData = BlockToolData
  * });
  * ```
  */
-export declare function createReactBlock<Data extends BlockToolData = BlockToolData>(
-  spec: CreateReactBlockSpec<Data>
-): BlockToolConstructable;
+export declare function createReactBlock<
+  Data extends BlockToolData = BlockToolData,
+  Config = Record<string, unknown>
+>(spec: CreateReactBlockSpec<Data, Config>): BlockToolConstructable;
 
 /**
  * Tool-config key carrying the editor's portal registry into a
@@ -613,11 +631,20 @@ export declare function createReactBlock<Data extends BlockToolData = BlockToolD
  */
 export declare const BLOK_PORTAL_REGISTRY_CONFIG_KEY: '__blokPortalRegistry';
 
+/**
+ * Tool-config key carrying the name a react-block tool is registered under in
+ * the consumer's `tools` map. Injected automatically by `useBlok`; routes live
+ * tool-config updates to the tool's mounted blocks.
+ */
+export declare const BLOK_TOOL_NAME_CONFIG_KEY: '__blokToolName';
+
 /** One mounted React block in the portal registry. */
 export interface BlockPortalEntry {
   hostEl: HTMLElement;
   component: React.ComponentType<Record<string, unknown>>;
   props: Record<string, unknown>;
+  /** Name the tool is registered under — routes per-tool live config updates. */
+  toolName?: string;
 }
 
 /**
@@ -630,6 +657,11 @@ export interface BlockPortalRegistry {
   register(id: string, entry: BlockPortalEntry): void;
   unregister(id: string): void;
   setProps(id: string, props: Record<string, unknown>): void;
+  /**
+   * Replace the `config` prop of every entry registered under `toolName`, and
+   * remember it so entries registered later start from the latest config.
+   */
+  setToolConfig(toolName: string, config: Record<string, unknown>): void;
   subscribe(listener: () => void): () => void;
   getSnapshot(): ReadonlyMap<string, BlockPortalEntry>;
 }