@bloklabs/react 1.2.5 → 1.2.6

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=`__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)},onEnter:(...e)=>{var t,n;return(t=(n=u.current).onEnter)==null?void 0: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.onEnter.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;let p=(0,e.useRef)(null);(0,e.useEffect)(()=>{if(d!==null&&p.current!==d){var e;p.current=d,(e=f.current)==null||e.call(f,d)}},[d]);let h=(0,e.useRef)(o);h.current=o;let g=(0,e.useRef)(s);g.current=s;let _=!!o,v=!!s;return(0,e.useEffect)(()=>{if(d===null)return;let e=[];if(_){let t=e=>{var t;return(t=h.current)==null?void 0:t.call(h,e)};d.on(`blocks:rendered`,t),e.push([`blocks:rendered`,t])}if(v){let t=e=>{var t;return(t=g.current)==null?void 0:t.call(g,e)};d.on(`block:rendered`,t),e.push([`block:rendered`,t])}return()=>{for(let[t,n]of e)d.off(t,n)}},[d,_,v]),(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=_;
+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=>{let t=typeof e==`function`?e:e==null?void 0:e.class;return typeof t==`function`&&t.__isBlokReactInlineTool===!0},M=(e,t)=>{if(typeof e!=`object`||!e)return e;let n={};for(let[i,a]of Object.entries(e)){var r;if(!A(a)&&!j(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 N(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),()=>{P(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:M(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)},onEnter:(...e)=>{var t,n;return(t=(n=u.current).onEnter)==null?void 0: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)}}),()=>{P(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:j}=a;(0,e.useEffect)(()=>{s===null||!j||s.focus()},[s,j]);let{theme:N}=a;(0,e.useEffect)(()=>{s===null||N===void 0||s.theme.set(N)},[s,N]);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 P(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 F=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 I({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)(F,{children:(0,r.jsx)(n,m({},t.props))}),t.hostEl,e)})})}function L(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 R(e,t){if(e==null)return{};var n,r,i=L(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 z=[`editor`],B=(0,e.forwardRef)(function(t,n){let{editor:i}=t,a=R(t,z),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)(I,{registry:l})}))}),V=`autofocus.defaultBlock.dataModel.placeholder.sanitizer.hideToolbar.maxHistoryLength.historyDebounceTime.newGroupDelay.globalUndoRedo.tools.data.minHeight.logLevel.readOnly.i18n.link.linkPaste.onBeforePaste.onReady.onChange.onSave.onEnter.onBeforeRender.onAfterRender.inlineToolbar.tunes.style.theme.onThemeChange.scrollToBlock.user.resolveUser.notifierPosition.notifier.width`.split(`.`),H=[`deps`,`onReady`,`onBlocksRendered`,`onBlockRendered`],U=new Set(V),W=(0,e.forwardRef)(function(t,n){let{deps:i,onReady:a,onBlocksRendered:o,onBlockRendered:s}=t,c=R(t,H),l={},u={};for(let e of Object.keys(c)){let t=c[e];U.has(e)?l[e]=t:u[e]=t}let d=N(l,i);(0,e.useImperativeHandle)(n,()=>d,[d]);let f=(0,e.useRef)(a);f.current=a;let p=(0,e.useRef)(null);(0,e.useEffect)(()=>{if(d!==null&&p.current!==d){var e;p.current=d,(e=f.current)==null||e.call(f,d)}},[d]);let h=(0,e.useRef)(o);h.current=o;let g=(0,e.useRef)(s);g.current=s;let _=!!o,v=!!s;return(0,e.useEffect)(()=>{if(d===null)return;let e=[];if(_){let t=e=>{var t;return(t=h.current)==null?void 0:t.call(h,e)};d.on(`blocks:rendered`,t),e.push([`blocks:rendered`,t])}if(v){let t=e=>{var t;return(t=g.current)==null?void 0:t.call(g,e)};d.on(`block:rendered`,t),e.push([`block:rendered`,t])}return()=>{for(let[t,n]of e)d.off(t,n)}},[d,_,v]),(0,r.jsx)(B,m({editor:d},u))}),G=`block changed`;function K(t){let r=(0,e.useRef)(0),i=(0,e.useRef)(t);i.current!==t&&(i.current=t,r.current=0);let a=(0,e.useCallback)(e=>{if(t===null)return()=>void 0;let n=()=>{r.current+=1,e()};return t.on(G,n),()=>t.off(G,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 q=[y,b];function J(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))q.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}var Y=[y,b],X=e=>`__blok-inline-tool__:${e}:${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;function Z(e){var t;return t=class{static get title(){return e.title}static get shortcut(){return e.shortcut}static get sanitize(){return e.sanitize}static get isReadOnlySupported(){var t;return(t=e.isReadOnlySupported)==null?!1:t}constructor(t){var n;this.active=!1,this.registered=!1;let r=(n=t==null?void 0:t.config)==null?{}:n;this.registry=r[y];let i=r[b];this.toolName=typeof i==`string`?i:e.type,this.portalKey=X(this.toolName);let a={};for(let[e,t]of Object.entries(r))Y.includes(e)||(a[e]=t);this.toolConfig=Object.freeze(a)}render(){let t=document.createElement(`div`);return t.setAttribute(`data-blok-mutation-free`,`true`),this.registry!==void 0&&(this.registry.register(this.portalKey,{hostEl:t,component:e.component,props:{active:this.active,config:this.toolConfig},toolName:this.toolName}),this.registered=!0),{name:this.toolName,title:e.title,icon:t,onActivate:()=>{if(typeof e.surround!=`function`)return;let t=window.getSelection();!t||t.rangeCount===0||e.surround(t.getRangeAt(0))},isActive:()=>this.refreshActiveState()}}destroy(){var e;this.registered&&(this.registered=!1,(e=this.registry)==null||e.unregister(this.portalKey))}refreshActiveState(){let t=typeof e.checkState==`function`?!!e.checkState(window.getSelection()):!1;if(t!==this.active&&(this.active=t,this.registered)){var n;(n=this.registry)==null||n.setProps(this.portalKey,{active:t})}return t}},t.__isBlokReactInlineTool=!0,t.isInline=!0,t}exports.BLOK_PORTAL_REGISTRY_CONFIG_KEY=y,exports.BLOK_TOOL_NAME_CONFIG_KEY=b,exports.BlockPortalHost=I,exports.BlokContent=B,exports.BlokEditor=W,exports.BlokProvider=g,exports.createBlockPortalRegistry=x,exports.createReactBlock=J,exports.createReactInlineTool=Z,exports.useBlocks=K,exports.useBlok=N,exports.useBlokDefaults=_;

package/dist/index.mjs

@@ -5,47 +5,47 @@ 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 w = /* @__PURE__ */ new WeakMap();
-function T(e, t) {
+function ee(e, t) {
 	w.set(e, t);
 }
-function E(e) {
+function T(e) {
 	return w.get(e);
 }
-function D(e) {
+function E(e) {
 	w.delete(e);
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.126.0/helpers/typeof.js
-function O(e) {
+function D(e) {
 	"@babel/helpers - typeof";
-	return O = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(e) {
+	return D = 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;
-	}, O(e);
+	}, D(e);
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.126.0/helpers/toPrimitive.js
-function k(e, t) {
-	if (O(e) != "object" || !e) return e;
+function O(e, t) {
+	if (D(e) != "object" || !e) return e;
 	var n = e[Symbol.toPrimitive];
 	if (n !== void 0) {
 		var r = n.call(e, t || "default");
-		if (O(r) != "object") return r;
+		if (D(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 A(e) {
-	var t = k(e, "string");
-	return O(t) == "symbol" ? t : t + "";
+function k(e) {
+	var t = O(e, "string");
+	return D(t) == "symbol" ? t : t + "";
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.126.0/helpers/defineProperty.js
-function j(e, t, n) {
-	return (t = A(t)) in e ? Object.defineProperty(e, t, {
+function A(e, t, n) {
+	return (t = k(t)) in e ? Object.defineProperty(e, t, {
 		value: n,
 		enumerable: !0,
 		configurable: !0,
@@ -54,7 +54,7 @@ function j(e, t, n) {
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.126.0/helpers/objectSpread2.js
-function M(e, t) {
+function j(e, t) {
 	var n = Object.keys(e);
 	if (Object.getOwnPropertySymbols) {
 		var r = Object.getOwnPropertySymbols(e);
@@ -64,12 +64,12 @@ function M(e, t) {
 	}
 	return n;
 }
-function N(e) {
+function M(e) {
 	for (var t = 1; t < arguments.length; t++) {
 		var n = arguments[t] == null ? {} : arguments[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) {
+		t % 2 ? j(Object(n), !0).forEach(function(t) {
+			A(e, t, n[t]);
+		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : j(Object(n)).forEach(function(t) {
 			Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
 		});
 	}
@@ -77,35 +77,35 @@ function N(e) {
 }
 //#endregion
 //#region src/provide-blok.tsx
-var P = t({});
-function F({ defaults: e, children: t }) {
-	return /* @__PURE__ */ x(P.Provider, {
+var N = t({});
+function P({ defaults: e, children: t }) {
+	return /* @__PURE__ */ x(N.Provider, {
 		value: e,
 		children: t
 	});
 }
-function I() {
-	return i(P);
+function te() {
+	return i(N);
 }
-function ee(e, t) {
+function ne(e, t) {
 	if (Object.keys(e).length === 0) return t;
-	let n = N({}, e);
+	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 = N(N({}, e.tools), t.tools)), n;
+	return (e.tools !== void 0 || t.tools !== void 0) && (n.tools = M(M({}, e.tools), t.tools)), n;
 }
 //#endregion
 //#region src/block-portal-registry.ts
-var L = "__blokPortalRegistry", R = "__blokToolName", z = () => {
+var F = "__blokPortalRegistry", I = "__blokToolName", L = () => {
 	let e = { snapshot: /* @__PURE__ */ new Map() }, t = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Map(), r = (n) => {
 		e.snapshot = n, t.forEach((e) => e());
 	};
 	return {
 		register(t, i) {
 			let a = new Map(e.snapshot), o = i.toolName === void 0 ? void 0 : n.get(i.toolName);
-			a.set(t, o === void 0 ? i : N(N({}, i), {}, { props: N(N({}, i.props), {}, { config: o }) })), r(a);
+			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;
@@ -116,14 +116,14 @@ var L = "__blokPortalRegistry", R = "__blokToolName", z = () => {
 			let i = e.snapshot.get(t);
 			if (i === void 0) return;
 			let a = new Map(e.snapshot);
-			a.set(t, N(N({}, i), {}, { props: N(N({}, i.props), n) })), r(a);
+			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, N(N({}, t), {}, { props: N(N({}, t.props), {}, { config: i }) }));
+			for (let [e, t] of a) o.set(e, M(M({}, t), {}, { props: M(M({}, t.props), {}, { config: i }) }));
 			r(o);
 		},
 		subscribe(e) {
@@ -135,45 +135,45 @@ var L = "__blokPortalRegistry", R = "__blokToolName", z = () => {
 			return e.snapshot;
 		}
 	};
-}, B = /* @__PURE__ */ new WeakMap();
-function V(e, t) {
-	B.set(e, t);
+}, R = /* @__PURE__ */ new WeakMap();
+function z(e, t) {
+	R.set(e, t);
 }
-function H(e) {
-	return B.get(e);
+function B(e) {
+	return R.get(e);
 }
-function U(e) {
-	B.delete(e);
+function V(e) {
+	R.delete(e);
 }
 //#endregion
 //#region src/live-tool-config.ts
-var W = (e) => {
+var H = (e) => {
 	if (typeof e != "object" || !e) return !1;
 	let t = Object.getPrototypeOf(e);
 	return t === Object.prototype || t === null;
-}, G = (e, t) => t.reduce((e, t) => {
+}, re = (e, t) => t.reduce((e, t) => {
 	if (Array.isArray(e)) return typeof t == "number" ? e[t] : void 0;
-	if (W(e)) return e[t];
-}, e), K = (e, t) => {
+	if (H(e)) return e[t];
+}, e), ie = (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 = {};
+		if (H(e)) {
+			let r = H(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;
+	return H(r) ? r : {};
+}, U = (e, t) => {
+	if (!H(e)) return e;
 	let n = {};
 	for (let [r, i] of Object.entries(e)) {
-		if (!W(i) || !W(i.config)) {
+		if (!H(i) || !H(i.config)) {
 			n[r] = i;
 			continue;
 		}
@@ -181,12 +181,12 @@ var W = (e) => {
 			if (typeof n == "function") {
 				let e = n;
 				return function(...n) {
-					let a = t(), o = W(a) ? a[r] : void 0, s = G(W(o) ? o.config : void 0, i);
+					let a = t(), o = H(a) ? a[r] : void 0, s = re(H(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 (W(n)) {
+			if (H(n)) {
 				if (e.has(n)) return n;
 				e.add(n);
 				let t = {};
@@ -195,31 +195,34 @@ var W = (e) => {
 			}
 			return n;
 		};
-		n[r] = N(N({}, i), {}, { config: a(i.config, []) });
+		n[r] = M(M({}, i), {}, { config: a(i.config, []) });
 	}
 	return n;
-}, q = (e) => {
+}, W = (e) => {
 	let t = typeof e == "function" ? e : e == null ? void 0 : e.class;
 	return typeof t == "function" && t.__isBlokReactBlock === !0;
-}, ne = (e, t) => {
+}, G = (e) => {
+	let t = typeof e == "function" ? e : e == null ? void 0 : e.class;
+	return typeof t == "function" && t.__isBlokReactInlineTool === !0;
+}, K = (e, t) => {
 	if (typeof e != "object" || !e) return e;
 	let n = {};
 	for (let [i, a] of Object.entries(e)) {
 		var r;
-		if (!q(a)) {
+		if (!W(a) && !G(a)) {
 			n[i] = a;
 			continue;
 		}
-		let e = typeof a == "function" ? { class: a } : N({}, a);
-		e.config = N(N({}, (r = e.config) == null ? {} : r), {}, {
-			[L]: t,
-			[R]: i
+		let e = typeof a == "function" ? { class: a } : M({}, a);
+		e.config = M(M({}, (r = e.config) == null ? {} : r), {}, {
+			[F]: t,
+			[I]: i
 		}), n[i] = e;
 	}
 	return n;
 };
-function J(e, t) {
-	let n = ee(i(P), e), [r, o] = l(null), u = c(n);
+function q(e, t) {
+	let n = ne(i(N), e), [r, o] = l(null), u = c(n);
 	u.current = n;
 	let f = c({
 		editor: null,
@@ -233,10 +236,10 @@ function J(e, t) {
 		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), () => {
-			Y(e, o);
+			J(e, o);
 		};
 		if (e.editor !== null && !e.isDestroyed) {
-			D(e.editor), U(e.editor);
+			E(e.editor), V(e.editor);
 			try {
 				e.editor.destroy();
 			} catch (e) {}
@@ -244,9 +247,9 @@ function J(e, t) {
 		}
 		let t = document.createElement("div");
 		e.holder = t, e.isDestroyed = !1, e.isEditorReady = !1, e.depsToken = p;
-		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);
+		let n = u.current, r = L(), i = n.tools === void 0 ? void 0 : U(n.tools, () => u.current.tools), a = i === void 0 ? void 0 : K(i, r);
 		x.current = r, S.current = i, C.current = /* @__PURE__ */ new Map();
-		let s = N(N(N({}, n), a === void 0 ? {} : { tools: a }), {}, {
+		let s = M(M(M({}, n), a === void 0 ? {} : { tools: a }), {}, {
 			holder: t,
 			onReady: (...e) => {
 				var t, n;
@@ -272,18 +275,18 @@ function J(e, t) {
 			(t = (n = u.current).onAfterRender) == null || t.call(n, ...e);
 		});
 		let c = new d(s);
-		return e.editor = c, _.current = n.data, T(c, t), V(c, r), c.isReady.then(() => {
+		return e.editor = c, _.current = n.data, ee(c, t), z(c, r), c.isReady.then(() => {
 			e.editor === c && !e.isDestroyed && (e.isEditorReady = !0, o(c));
 		}).catch(() => {
 			if (e.editor === c && !e.isDestroyed) {
-				D(c), U(c);
+				E(c), V(c);
 				try {
 					c.destroy();
 				} catch (e) {}
 				e.editor = null, e.holder = null, e.isDestroyed = !0, e.isEditorReady = !1, o(null);
 			}
 		}), () => {
-			Y(e, o);
+			J(e, o);
 		};
 	}, [p]), a(() => {
 		let e = x.current, t = f.current;
@@ -293,8 +296,8 @@ function J(e, t) {
 		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 (!W(a)) continue;
+			let n = typeof a == "function" || (i = a.config) == null ? {} : i, o = r == null ? void 0 : r[t], s = ie(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);
@@ -304,43 +307,43 @@ function J(e, t) {
 	a(() => {
 		r !== null && r.readOnly.set(w);
 	}, [r, w]);
-	let { autofocus: E } = n;
+	let { autofocus: T } = n;
+	a(() => {
+		r === null || !T || r.focus();
+	}, [r, T]);
+	let { theme: D } = n;
 	a(() => {
-		r === null || !E || r.focus();
-	}, [r, E]);
-	let { theme: O } = n;
+		r === null || D === void 0 || r.theme.set(D);
+	}, [r, D]);
+	let { width: O } = n;
 	a(() => {
-		r === null || O === void 0 || r.theme.set(O);
+		r === null || O === void 0 || r.width.set(O);
 	}, [r, O]);
-	let { width: k } = n;
+	let { placeholder: k } = n;
 	a(() => {
-		r === null || k === void 0 || r.width.set(k);
+		r === null || k === void 0 || r.placeholder.set(k);
 	}, [r, k]);
-	let { placeholder: A } = n;
-	a(() => {
-		r === null || A === void 0 || r.placeholder.set(A);
-	}, [r, A]);
-	let { data: j } = n;
+	let { data: A } = n;
 	return a(() => {
-		if (r === null || j === void 0) return;
+		if (r === null || A === void 0) return;
 		let e = f.current;
 		if (!(e.editor !== r || e.isDestroyed)) {
-			if (h.current !== r && (h.current = r, b.current = void 0, g(j, _.current))) {
-				m.current = j;
+			if (h.current !== r && (h.current = r, b.current = void 0, g(A, _.current))) {
+				m.current = A;
 				return;
 			}
-			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;
+			g(A, m.current) || g(A, b.current) || (b.current = A, v.current = v.current.catch(() => void 0).then(() => r.render(A)).then(() => {
+				m.current = A;
 			}, () => {}).then(() => {
-				b.current === j && (b.current = void 0);
+				b.current === A && (b.current = void 0);
 			}));
 		}
-	}, [r, j]), r;
+	}, [r, A]), r;
 }
-function Y(e, t) {
+function J(e, t) {
 	e.destroyTimeout = setTimeout(() => {
 		if (e.editor !== null) {
-			D(e.editor), U(e.editor);
+			E(e.editor), V(e.editor);
 			try {
 				e.editor.destroy();
 			} catch (e) {}
@@ -350,7 +353,7 @@ function Y(e, t) {
 }
 //#endregion
 //#region src/BlockPortalHost.tsx
-var re = class extends e {
+var Y = class extends e {
 	constructor(...e) {
 		super(...e), this.state = { failed: !1 };
 	}
@@ -366,12 +369,12 @@ function X({ registry: e }) {
 	let t = u(e.subscribe, e.getSnapshot, e.getSnapshot);
 	return /* @__PURE__ */ x(b, { children: Array.from(t.entries()).map(([e, t]) => {
 		let n = t.component;
-		return S(/* @__PURE__ */ x(re, { children: /* @__PURE__ */ x(n, N({}, t.props)) }), t.hostEl, e);
+		return S(/* @__PURE__ */ x(Y, { children: /* @__PURE__ */ x(n, M({}, t.props)) }), t.hostEl, e);
 	}) });
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.126.0/helpers/objectWithoutPropertiesLoose.js
-function ie(e, t) {
+function ae(e, t) {
 	if (e == null) return {};
 	var n = {};
 	for (var r in e) if ({}.hasOwnProperty.call(e, r)) {
@@ -384,7 +387,7 @@ function ie(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 = ie(e, t);
+	var n, r, i = ae(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]);
@@ -393,8 +396,8 @@ function Z(e, t) {
 }
 //#endregion
 //#region src/BlokContent.tsx
-var ae = ["editor"], Q = n(function(e, t) {
-	let { editor: n } = e, r = Z(e, ae), i = c(null), o = (e) => {
+var oe = ["editor"], Q = n(function(e, t) {
+	let { editor: n } = e, r = Z(e, oe), i = c(null), o = (e) => {
 		if (i.current = e, typeof t == "function") t(e);
 		else if (t != null) {
 			let n = t;
@@ -403,25 +406,25 @@ var ae = ["editor"], Q = n(function(e, t) {
 	};
 	a(() => {
 		if (n === null || i.current === null) return;
-		let e = E(n);
+		let e = T(n);
 		if (e !== void 0) return i.current.appendChild(e), () => {
 			e.remove();
 		};
 	}, [n]);
-	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.onEnter.onBeforeRender.onAfterRender.inlineToolbar.tunes.style.theme.onThemeChange.scrollToBlock.user.resolveUser.notifierPosition.notifier.width".split("."), se = [
+	let s = n === null ? void 0 : B(n);
+	return /* @__PURE__ */ x("div", M(M({ ref: o }, r), {}, { children: s === void 0 ? null : /* @__PURE__ */ x(X, { registry: s }) }));
+}), se = /* @__PURE__ */ "autofocus.defaultBlock.dataModel.placeholder.sanitizer.hideToolbar.maxHistoryLength.historyDebounceTime.newGroupDelay.globalUndoRedo.tools.data.minHeight.logLevel.readOnly.i18n.link.linkPaste.onBeforePaste.onReady.onChange.onSave.onEnter.onBeforeRender.onAfterRender.inlineToolbar.tunes.style.theme.onThemeChange.scrollToBlock.user.resolveUser.notifierPosition.notifier.width".split("."), ce = [
 	"deps",
 	"onReady",
 	"onBlocksRendered",
 	"onBlockRendered"
-], 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 = {};
+], le = new Set(se), ue = n(function(e, t) {
+	let { deps: n, onReady: r, onBlocksRendered: i, onBlockRendered: s } = e, l = Z(e, ce), u = {}, d = {};
 	for (let e of Object.keys(l)) {
 		let t = l[e];
-		ce.has(e) ? u[e] = t : d[e] = t;
+		le.has(e) ? u[e] = t : d[e] = t;
 	}
-	let f = J(u, n);
+	let f = q(u, n);
 	o(t, () => f, [f]);
 	let p = c(r);
 	p.current = r;
@@ -461,9 +464,9 @@ var ae = ["editor"], Q = n(function(e, t) {
 		f,
 		_,
 		v
-	]), /* @__PURE__ */ x(Q, N({ editor: f }, d));
+	]), /* @__PURE__ */ x(Q, M({ editor: f }, d));
 }), $ = "block changed";
-function ue(e) {
+function de(e) {
 	let t = c(0), n = c(e);
 	n.current !== e && (n.current = e, t.current = 0);
 	let i = r((n) => {
@@ -477,8 +480,8 @@ function ue(e) {
 }
 //#endregion
 //#region src/createReactBlock.tsx
-var de = [L, R];
-function fe(e) {
+var fe = [F, I];
+function pe(e) {
 	var t;
 	return t = class {
 		static get toolbox() {
@@ -491,15 +494,15 @@ function fe(e) {
 			var n, r;
 			this.hostEl = null, this.pendingDispatch = !1, this.commit = (t) => {
 				var n;
-				let r = _(e.propSchema, N(N({}, this.mirror), t));
+				let r = _(e.propSchema, M(M({}, 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[L];
-			let o = i[R];
+			this.registry = i[F];
+			let o = i[I];
 			this.toolName = typeof o == "string" ? o : void 0;
 			let s = {};
-			for (let [e, t] of Object.entries(i)) de.includes(e) || (s[e] = t);
+			for (let [e, t] of Object.entries(i)) fe.includes(e) || (s[e] = t);
 			this.toolConfig = Object.freeze(s);
 			let l = t.api;
 			this.pointerDrag = () => {
@@ -589,4 +592,70 @@ function fe(e) {
 	}, t.__isBlokReactBlock = !0, t;
 }
 //#endregion
-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 };
+//#region src/createReactInlineTool.tsx
+var me = [F, I], he = (e) => `__blok-inline-tool__:${e}:${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+function ge(e) {
+	var t;
+	return t = class {
+		static get title() {
+			return e.title;
+		}
+		static get shortcut() {
+			return e.shortcut;
+		}
+		static get sanitize() {
+			return e.sanitize;
+		}
+		static get isReadOnlySupported() {
+			var t;
+			return (t = e.isReadOnlySupported) == null ? !1 : t;
+		}
+		constructor(t) {
+			var n;
+			this.active = !1, this.registered = !1;
+			let r = (n = t == null ? void 0 : t.config) == null ? {} : n;
+			this.registry = r[F];
+			let i = r[I];
+			this.toolName = typeof i == "string" ? i : e.type, this.portalKey = he(this.toolName);
+			let a = {};
+			for (let [e, t] of Object.entries(r)) me.includes(e) || (a[e] = t);
+			this.toolConfig = Object.freeze(a);
+		}
+		render() {
+			let t = document.createElement("div");
+			return t.setAttribute("data-blok-mutation-free", "true"), this.registry !== void 0 && (this.registry.register(this.portalKey, {
+				hostEl: t,
+				component: e.component,
+				props: {
+					active: this.active,
+					config: this.toolConfig
+				},
+				toolName: this.toolName
+			}), this.registered = !0), {
+				name: this.toolName,
+				title: e.title,
+				icon: t,
+				onActivate: () => {
+					if (typeof e.surround != "function") return;
+					let t = window.getSelection();
+					!t || t.rangeCount === 0 || e.surround(t.getRangeAt(0));
+				},
+				isActive: () => this.refreshActiveState()
+			};
+		}
+		destroy() {
+			var e;
+			this.registered && (this.registered = !1, (e = this.registry) == null || e.unregister(this.portalKey));
+		}
+		refreshActiveState() {
+			let t = typeof e.checkState == "function" ? !!e.checkState(window.getSelection()) : !1;
+			if (t !== this.active && (this.active = t, this.registered)) {
+				var n;
+				(n = this.registry) == null || n.setProps(this.portalKey, { active: t });
+			}
+			return t;
+		}
+	}, t.__isBlokReactInlineTool = !0, t.isInline = !0, t;
+}
+//#endregion
+export { F as BLOK_PORTAL_REGISTRY_CONFIG_KEY, I as BLOK_TOOL_NAME_CONFIG_KEY, X as BlockPortalHost, Q as BlokContent, ue as BlokEditor, P as BlokProvider, L as createBlockPortalRegistry, pe as createReactBlock, ge as createReactInlineTool, de as useBlocks, q as useBlok, te as useBlokDefaults };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloklabs/react",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "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.5",
+    "@bloklabs/core": "^1.2.6",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   }

package/src/createReactInlineTool.tsx

@@ -0,0 +1,214 @@
+import type { ComponentType } from 'react';
+import {
+  BLOK_PORTAL_REGISTRY_CONFIG_KEY,
+  BLOK_TOOL_NAME_CONFIG_KEY,
+  type BlockPortalRegistry,
+} from './block-portal-registry';
+import type { SanitizerConfig } from '@/types';
+import type { InlineTool, InlineToolConstructorOptions, MenuConfig } from '@/types/tools';
+
+/** 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,
+];
+
+/**
+ * Unique portal-registry key per tool instance (inline tools have no block id
+ * to key on, and multiple instances of the same tool can coexist — e.g. the
+ * visible toolbar's instance plus a shortcut render-probe).
+ * @param toolName - name the tool is registered under
+ */
+const generatePortalKey = (toolName: string): string =>
+  `__blok-inline-tool__:${toolName}:${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+
+/** Props handed to a React inline tool's `component` (its toolbar icon/UI). */
+export interface ReactInlineToolRenderProps<Config = Record<string, unknown>> {
+  /**
+   * Whether the tool's formatting is active for the current selection —
+   * derived from the spec's `checkState` every time the toolbar queries it.
+   * Pushed IN PLACE (no remount), so the icon restyles live.
+   */
+  active: boolean;
+  /**
+   * The tool's `config` from the consumer's `tools` map (adapter-internal
+   * keys stripped) — the channel for host props (palette, locale…).
+   */
+  config: Readonly<Partial<Config>>;
+}
+
+/** Spec for {@link createReactInlineTool}. */
+export interface CreateReactInlineToolSpec<Config = Record<string, unknown>> {
+  /** Tool type name — the MenuConfig item name (fallback when the tools-map key is unavailable). */
+  type: string;
+  /** Optional toolbar item title (shown in overflow/search contexts). */
+  title?: string;
+  /** The component rendered as the tool's toolbar icon/UI. */
+  component: ComponentType<ReactInlineToolRenderProps<Config>>;
+  /** Applies/removes the formatting on the LIVE selection's range (captured at activation time). */
+  surround?: (range: Range) => void;
+  /** Reports whether the formatting is active for the given selection. */
+  checkState?: (selection: Selection | null) => boolean;
+  /** Keyboard shortcut (e.g. `CMD+SHIFT+C`). */
+  shortcut?: string;
+  /** Inline sanitizer config declaring the markup this tool produces. */
+  sanitize?: SanitizerConfig;
+  /** Whether the tool stays available in read-only mode. */
+  isReadOnlySupported?: boolean;
+}
+
+/**
+ * Author a first-party React inline tool. Returns an inline-tool constructable
+ * registered exactly like a vanilla tool (`tools: { color: createReactInlineTool(...) }`).
+ *
+ * Mirrors the `createReactBlock` portal pattern: `render()` returns a
+ * `MenuConfig` whose `icon` is a Blok-owned host element
+ * (`data-blok-mutation-free`) the component is portaled into via the editor's
+ * shared `BlockPortalHost` tree — app-level context (themes, styled-components
+ * providers) reaches the icon with no consumer-managed `createRoot`, and
+ * `destroy()` (called by the inline toolbar on close/teardown) unregisters the
+ * portal so the component unmounts deterministically — no leaked React roots.
+ *
+ * Without an injected registry (vanilla core, no `useBlok`), the tool still
+ * renders a valid MenuConfig — the host element just stays empty.
+ */
+export function createReactInlineTool<Config = Record<string, unknown>>(
+  spec: CreateReactInlineToolSpec<Config>
+): (new (options: InlineToolConstructorOptions) => InlineTool) & {
+  readonly __isBlokReactInlineTool: true;
+  readonly isInline: true;
+  readonly title: string | undefined;
+  readonly shortcut: string | undefined;
+  readonly sanitize: SanitizerConfig | undefined;
+  readonly isReadOnlySupported: boolean;
+} {
+  return class ReactInlineTool implements InlineTool {
+    /** Marker so `useBlok` can detect react inline tools and inject the registry. */
+    public static readonly __isBlokReactInlineTool = true as const;
+    public static readonly isInline = true as const;
+
+    public static get title(): string | undefined {
+      return spec.title;
+    }
+
+    public static get shortcut(): string | undefined {
+      return spec.shortcut;
+    }
+
+    public static get sanitize(): SanitizerConfig | undefined {
+      return spec.sanitize;
+    }
+
+    public static get isReadOnlySupported(): boolean {
+      return spec.isReadOnlySupported ?? false;
+    }
+
+    private readonly registry: BlockPortalRegistry | undefined;
+    /** Name this tool is registered under in the consumer's `tools` map. */
+    private readonly toolName: string;
+    /** Unique portal-registry key — inline tools have no block id. */
+    private readonly portalKey: string;
+    /** The consumer's tool config with adapter-internal keys stripped. */
+    private readonly toolConfig: Readonly<Partial<Config>>;
+    /** Last active state pushed to the mounted component (change-dedup baseline). */
+    private active = false;
+    /** True while this instance owns a registered portal entry. */
+    private registered = false;
+
+    public constructor(options: InlineToolConstructorOptions) {
+      const config: Record<string, unknown> = options?.config ?? {};
+
+      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 : spec.type;
+      this.portalKey = generatePortalKey(this.toolName);
+
+      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>>;
+    }
+
+    public render(): MenuConfig {
+      // The Blok-owned host: React reconciles the icon portaled INTO it, and
+      // this attribute makes core's MutationObserver ignore those mutations.
+      const host = document.createElement('div');
+
+      host.setAttribute('data-blok-mutation-free', 'true');
+
+      if (this.registry !== undefined) {
+        this.registry.register(this.portalKey, {
+          hostEl: host,
+          component: spec.component as unknown as ComponentType<Record<string, unknown>>,
+          props: { active: this.active, config: this.toolConfig },
+          toolName: this.toolName,
+        });
+        this.registered = true;
+      }
+
+      return {
+        name: this.toolName,
+        title: spec.title,
+        icon: host,
+        onActivate: (): void => {
+          if (typeof spec.surround !== 'function') {
+            return;
+          }
+
+          // Capture the LIVE selection at activation time (matching
+          // wrapLegacyInlineTool) — never a range snapshotted at render.
+          const selection = window.getSelection();
+
+          if (!selection || selection.rangeCount === 0) {
+            return;
+          }
+
+          spec.surround(selection.getRangeAt(0));
+        },
+        isActive: (): boolean => this.refreshActiveState(),
+      };
+    }
+
+    /**
+     * Idempotent teardown, called by the inline toolbar when this instance is
+     * dropped (toolbar close, editor destroy, or a throwaway render probe).
+     * Unregisters the portal entry so React unmounts the icon component —
+     * the unmount signal consumer-managed `createRoot` hacks never had.
+     */
+    public destroy(): void {
+      if (!this.registered) {
+        return;
+      }
+
+      this.registered = false;
+      this.registry?.unregister(this.portalKey);
+    }
+
+    /**
+     * Recompute the active state from the live selection and push it to the
+     * mounted component ONLY when it actually changed (no redundant
+     * external-store notifications).
+     */
+    private refreshActiveState(): boolean {
+      const active = typeof spec.checkState === 'function'
+        ? Boolean(spec.checkState(window.getSelection()))
+        : false;
+
+      if (active !== this.active) {
+        this.active = active;
+
+        if (this.registered) {
+          this.registry?.setProps(this.portalKey, { active });
+        }
+      }
+
+      return active;
+    }
+  };
+}

package/src/index.ts

@@ -12,6 +12,11 @@ export type {
   PropSchema,
   PropSchemaEntry,
 } from './createReactBlock';
+export { createReactInlineTool } from './createReactInlineTool';
+export type {
+  CreateReactInlineToolSpec,
+  ReactInlineToolRenderProps,
+} from './createReactInlineTool';
 export {
   createBlockPortalRegistry,
   BLOK_PORTAL_REGISTRY_CONFIG_KEY,

package/src/useBlok.ts

@@ -42,6 +42,16 @@ const isReactBlockEntry = (entry: unknown): boolean => {
   );
 };
 
+/** React inline tools (createReactInlineTool) need the same registry bridge. */
+const isReactInlineToolEntry = (entry: unknown): boolean => {
+  const toolClass = typeof entry === 'function' ? entry : (entry as { class?: unknown })?.class;
+
+  return (
+    typeof toolClass === 'function' &&
+    (toolClass as { __isBlokReactInlineTool?: boolean }).__isBlokReactInlineTool === true
+  );
+};
+
 const injectPortalRegistry = (tools: unknown, registry: BlockPortalRegistry): unknown => {
   if (tools === null || typeof tools !== 'object') {
     return tools;
@@ -50,7 +60,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>)) {
-    if (!isReactBlockEntry(entry)) {
+    if (!isReactBlockEntry(entry) && !isReactInlineToolEntry(entry)) {
       result[name] = entry;
 
       continue;

package/types/index.d.ts

@@ -1,5 +1,6 @@
 import type { BlokConfig, BlockToolData, OutputBlockData, OutputData } from '@bloklabs/core';
 import type { BlockAPI, BlockToolConstructable, ToolboxConfig } from '@bloklabs/core';
+import type { InlineToolConstructable, SanitizerConfig } from '@bloklabs/core';
 import type { Blok, EditorWidth, BlockRenderedPayload, BlocksRenderedPayload } from '@bloklabs/core';
 import type { BlockTuneData } from '@bloklabs/core';
 import type { MarkdownImportConfig } from '@bloklabs/core/markdown';
@@ -624,6 +625,70 @@ export declare function createReactBlock<
   Config = Record<string, unknown>
 >(spec: CreateReactBlockSpec<Data, Config>): BlockToolConstructable;
 
+// ---------------------------------------------------------------------------
+// Inline-tool authoring (createReactInlineTool)
+// ---------------------------------------------------------------------------
+
+/** Props handed to a React inline tool's `component` (its toolbar icon/UI). */
+export interface ReactInlineToolRenderProps<Config = Record<string, unknown>> {
+  /**
+   * Whether the tool's formatting is active for the current selection —
+   * derived from the spec's `checkState` every time the toolbar queries it.
+   * Pushed IN PLACE (no remount), so the icon restyles live.
+   */
+  active: boolean;
+  /**
+   * The tool's `config` from the consumer's `tools` map (adapter-internal
+   * keys stripped) — the channel for host props (palette, locale…).
+   */
+  config: Readonly<Partial<Config>>;
+}
+
+/** Spec for {@link createReactInlineTool}. */
+export interface CreateReactInlineToolSpec<Config = Record<string, unknown>> {
+  /** Tool type name — the MenuConfig item name (fallback when the tools-map key is unavailable). */
+  type: string;
+  /** Optional toolbar item title (shown in overflow/search contexts). */
+  title?: string;
+  /** The component rendered as the tool's toolbar icon/UI. */
+  component: React.ComponentType<ReactInlineToolRenderProps<Config>>;
+  /** Applies/removes the formatting on the LIVE selection's range (captured at activation time). */
+  surround?: (range: Range) => void;
+  /** Reports whether the formatting is active for the given selection. */
+  checkState?: (selection: Selection | null) => boolean;
+  /** Keyboard shortcut (e.g. `CMD+SHIFT+C`). */
+  shortcut?: string;
+  /** Inline sanitizer config declaring the markup this tool produces. */
+  sanitize?: SanitizerConfig;
+  /** Whether the tool stays available in read-only mode. */
+  isReadOnlySupported?: boolean;
+}
+
+/**
+ * Author a first-party React inline tool: returns an inline-tool
+ * constructable registered exactly like a vanilla tool
+ * (`tools: { color: createReactInlineTool(...) }`). The tool's toolbar icon is
+ * a React component portaled through the editor's shared portal host INSIDE
+ * the React tree that renders `BlokContent`/`BlokEditor` — app-level context
+ * (themes, styled-components providers) reaches the icon with no
+ * consumer-managed `createRoot`, and the inline toolbar's teardown unmounts it
+ * deterministically (no leaked React roots).
+ *
+ * @example
+ * ```tsx
+ * const DescriptionColor = createReactInlineTool({
+ *   type: 'descriptionColor',
+ *   title: 'Text color',
+ *   component: ({ active }) => <FontColorIcon active={active} />,
+ *   surround: (range) => applyColor(range),
+ *   checkState: (selection) => hasColor(selection),
+ * });
+ * ```
+ */
+export declare function createReactInlineTool<Config = Record<string, unknown>>(
+  spec: CreateReactInlineToolSpec<Config>
+): InlineToolConstructable;
+
 /**
  * Tool-config key carrying the editor's portal registry into a
  * `createReactBlock` tool. Injected automatically by `useBlok`; exposed for