@bloklabs/vue 1.8.0 → 1.10.0

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("vue"),t=require("@bloklabs/core"),n=require("@bloklabs/core/adapters");var r=new WeakMap;function i(e,t){r.set(e,t)}function a(e){return r.get(e)}function o(e){r.delete(e)}var s=new WeakMap;function c(e,t){s.set(e,t)}function l(e){return s.get(e)}function u(e){s.delete(e)}function d(e){"@babel/helpers - typeof";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},d(e)}function f(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(d(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function p(e){var t=f(e,`string`);return d(t)==`symbol`?t:t+``}function m(e,t,n){return(t=p(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function h(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 g(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?h(Object(n),!0).forEach(function(t){m(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):h(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}var _=Symbol(`BLOK_DEFAULT_CONFIG`);function v(t){(0,e.provide)(_,t)}function y(){return(0,e.inject)(_,{})}function b(e,t){if(Object.keys(e).length===0)return t;let n=g({},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=g(g({},e.tools),t.tools)),n}var x=`__blokPortalRegistry`,S=()=>{let t=(0,e.reactive)(new Map);return{entries:t,register(n,r){t.set(n,(0,e.markRaw)(r))},unregister(e,n){var r;n!==void 0&&((r=t.get(e))==null?void 0:r.hostEl)!==n||t.delete(e)},setProps(e,n){let r=t.get(e);r!==void 0&&Object.assign(r.props,n)}}},C=new WeakMap;function w(e,t){C.set(e,t)}function T(e){return C.get(e)}function E(e){C.delete(e)}var D=e=>({onChange:e.onChange!==void 0,onSave:e.onSave!==void 0,onEnter:e.onEnter!==void 0,onSubmit:e.onSubmit!==void 0,onBeforeRender:e.onBeforeRender!==void 0,onAfterRender:e.onAfterRender!==void 0}),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.__isBlokVueBlock===!0)){n[i]=a;continue}let o=typeof a==`function`?{class:a}:g({},a);o.config=g(g({},(r=o.config)==null?{}:r),{},{[x]:t}),n[i]=o}return n};function k(r,a){let s=(0,e.shallowRef)(null),l=(0,e.inject)(_,{}),d=()=>b(l,(0,e.toValue)(r)),f={current:null,holder:null,lastRenderedData:d().data,seededEditor:null,renderChain:Promise.resolve(),appliedHandlerPresence:{onChange:!1,onSave:!1,onEnter:!1,onSubmit:!1,onBeforeRender:!1,onAfterRender:!1}},p={onChange:(...e)=>{var t,n;(t=(n=d()).onChange)==null||t.call(n,...e)},onSave:(...e)=>{var t,n;f.lastRenderedData=e[0],(t=(n=d()).onSave)==null||t.call(n,...e)},onEnter:(...e)=>{var t,n;return(t=(n=d()).onEnter)==null?void 0:t.call(n,...e)},onSubmit:(...e)=>{var t,n;(t=(n=d()).onSubmit)==null||t.call(n,...e)},onBeforeRender:(...e)=>{var t,n,r;return(t=(n=(r=d()).onBeforeRender)==null?void 0:n.call(r,...e))==null?e[0]:t},onAfterRender:(...e)=>{var t,n;(t=(n=d()).onAfterRender)==null||t.call(n,...e)}},m=()=>{let t=g({},b((0,e.toRaw)(l),(0,e.toRaw)((0,e.toValue)(r))));return delete t.holder,t.data!==void 0&&(t.data=(0,e.toRaw)(t.data)),t},h=()=>{if(f.current!==null){u(f.current),E(f.current),o(f.current);try{f.current.destroy()}catch(e){}}f.current=null,f.holder=null,s.value=null},v=()=>{let e=document.createElement(`div`);f.holder=e;let n=m(),r=S();n.tools!==void 0&&(n.tools=O(n.tools,r));let a=D(d());n.onChange=a.onChange?p.onChange:void 0,n.onSave=a.onSave?p.onSave:void 0,n.onEnter=a.onEnter?p.onEnter:void 0,n.onSubmit=a.onSubmit?p.onSubmit:void 0,n.onBeforeRender=a.onBeforeRender?p.onBeforeRender:void 0,n.onAfterRender=a.onAfterRender?p.onAfterRender:void 0,f.appliedHandlerPresence=a;let o=new t.Blok(g(g({},n),{},{holder:e}));f.current=o,c(o,e),w(o,r),i(o,{markRendered:e=>{f.lastRenderedData=e}}),o.isReady.then(()=>{f.current===o&&(s.value=o)}).catch(()=>{f.current===o&&h()})};(0,e.watch)([s,()=>(0,n.normalizeReadOnlyConfig)(d().readOnly).enabled,()=>(0,n.normalizeReadOnlyConfig)(d().readOnly).hideControls,()=>typeof d().readOnly==`object`],([e,t,n,r])=>{e&&(r?e.readOnly.set(t,{hideControls:n}):e.readOnly.set(t))},{immediate:!0}),(0,e.watch)([s,()=>d().hideToolbar],([e,t])=>{e&&e.toolbar.setHidden(!!t)},{immediate:!0}),(0,e.watch)([s,()=>d().theme],([e,t])=>{e&&t!==void 0&&e.theme.set(t)},{immediate:!0}),(0,e.watch)([s,()=>d().width],([e,t])=>{e&&t!==void 0&&e.width.set(t)},{immediate:!0}),(0,e.watch)([s,()=>d().placeholder],([e,t])=>{e&&t!==void 0&&e.placeholder.set(t)},{immediate:!0});let y={value:void 0};(0,e.watch)([s,()=>{var e;return(e=d().style)==null?void 0:e.tokens}],([e,t])=>{!e||t===void 0||(0,n.deepEqual)(t,y.value)||(y.value=g({},t),e.tokens.set(t))},{immediate:!0,deep:!0});let x={value:d().i18n};(0,e.watch)([s,()=>d().i18n],([e,t])=>{if(!e||t===void 0||(0,n.deepEqual)(t,x.value))return;x.value=g({},t);let{locale:r,messages:i,direction:a}=t;e.i18n.update(g(g(g({},r===void 0?{}:{locale:r}),i===void 0?{}:{messages:i}),a===void 0?{}:{direction:a}))},{immediate:!0,deep:!0});let C={editor:null,value:void 0};return(0,e.watch)([s,()=>d().inlineToolbar],([e,t])=>{if(!e||t===void 0||C.editor===e&&(0,n.deepEqual)(t,C.value))return;let r=Array.isArray(t)?[...t]:t;C.editor=e,C.value=r,e.tools.setInlineToolbar(r)},{immediate:!0,deep:!0}),(0,e.watch)([s,()=>d().autofocus],([e,t])=>{e&&t&&e.focus()},{immediate:!0}),(0,e.watch)([s,()=>JSON.stringify(D(d()))],([e])=>{if(!e)return;let t=D(d()),n=f.appliedHandlerPresence,r={},i={value:!1},a=(e,r)=>{t[e]!==n[e]&&(n[e]=t[e],i.value=!0,r(t[e]?p[e]:void 0))};a(`onChange`,e=>{r.onChange=e}),a(`onSave`,e=>{r.onSave=e}),a(`onEnter`,e=>{r.onEnter=e}),a(`onSubmit`,e=>{r.onSubmit=e}),a(`onBeforeRender`,e=>{r.onBeforeRender=e}),a(`onAfterRender`,e=>{r.onAfterRender=e}),i.value&&e.handlers.set(r)},{immediate:!0}),(0,e.watch)([s,()=>d().data],([t,r])=>{if(!t||r===void 0)return;if(f.seededEditor!==t){f.seededEditor=t,f.lastRenderedData=r;return}let i=f.lastRenderedData;i!==void 0&&(0,n.equalsOutputData)(r,i)||(f.lastRenderedData=r,f.renderChain=f.renderChain.catch(()=>void 0).then(()=>t.render((0,n.toRenderableData)((0,e.toRaw)(r)))))},{immediate:!0}),a!==void 0&&(0,e.watch)(()=>(0,e.toValue)(a),()=>{h(),v()}),(0,e.onMounted)(v),(0,e.onBeforeUnmount)(h),s}var A=`block changed`;function j(t){let r=(0,e.shallowRef)(0),i=()=>{let n=(0,e.toValue)(t);return n===null?null:(0,e.toRaw)(n)},a=()=>{r.value},o=(0,e.shallowRef)(n.EMPTY_API),s={editor:null,handler:null},c=()=>{s.editor!==null&&s.handler!==null&&s.editor.off(A,s.handler),s.editor=null,s.handler=null};return(0,e.watch)(()=>i(),e=>{if(c(),r.value+=1,e===null){o.value=n.EMPTY_API;return}let t=()=>{r.value+=1};e.on(A,t),s.editor=e,s.handler=t,o.value=(0,n.createBlocksApiForEditor)(e,a)},{immediate:!0}),(0,e.onScopeDispose)(c),{getById:e=>o.value.getById(e),getChildren:e=>o.value.getChildren(e),insert:e=>o.value.insert(e),insertMany:e=>o.value.insertMany(e),insertTree:e=>o.value.insertTree(e),insertMarkdown:(e,t)=>o.value.insertMarkdown(e,t),exportMarkdown:()=>o.value.exportMarkdown(),move:(e,t)=>o.value.move(e,t),nest:(e,t)=>o.value.nest(e,t),unnest:e=>o.value.unnest(e),remove:e=>o.value.remove(e),update:(e,t,n)=>o.value.update(e,t,n),convert:(e,t,n,r)=>o.value.convert(e,t,n,r),transact:e=>o.value.transact(e),transactWithoutCapture:e=>o.value.transactWithoutCapture(e),getBlocksCount:()=>o.value.getBlocksCount(),getCurrentBlockIndex:()=>o.value.getCurrentBlockIndex(),getBlockByIndex:e=>o.value.getBlockByIndex(e),getBlockByElement:e=>o.value.getBlockByElement(e),getBlockData:e=>o.value.getBlockData(e),getBlockIndex:e=>o.value.getBlockIndex(e),composeBlockData:e=>o.value.composeBlockData(e),renderFromHTML:e=>o.value.renderFromHTML(e),insertOutputData:(e,t)=>o.value.insertOutputData(e,t),splitBlock:(e,t,n,r,i)=>o.value.splitBlock(e,t,n,r,i),insertInsideParent:(e,t,n)=>o.value.insertInsideParent(e,t,n),render:e=>o.value.render(e),clear:()=>o.value.clear(),isSyncingFromYjs:()=>o.value.isSyncingFromYjs()}}function M(n={}){let{within:r,settleOn:i}=n,a=(0,e.shallowRef)(!1),o=()=>{var n;let o=r===void 0||(n=(0,e.toValue)(r))==null?null:n;a.value=r!==void 0&&o===null?!1:t.Blok.readyState({within:o,settleOn:i}).ready};return(0,e.onScopeDispose)(t.Blok.subscribeReady(o)),(0,e.onMounted)(o),a}var N=(0,e.defineComponent)({name:`BlockErrorBoundary`,setup(t,{slots:n}){return(0,e.onErrorCaptured)(()=>!1),()=>{var e;return(e=n.default)==null?void 0:e.call(n)}}}),P=(0,e.defineComponent)({name:`BlockPortalHost`,props:{registry:{type:Object,required:!0}},setup(t){return()=>(0,e.h)(e.Fragment,Array.from(t.registry.entries.entries()).map(([t,n])=>(0,e.h)(e.Teleport,{key:t,to:n.hostEl},[(0,e.h)(N,null,{default:()=>(0,e.h)(n.component,n.props)})])))}}),F=Symbol(`BLOK_EDITOR_INSTANCE`),I=(0,e.shallowRef)(null);function L(){return(0,e.inject)(F,I)}var R=(0,e.defineComponent)({name:`BlokContent`,props:{editor:{type:Object,default:null}},setup(t){let n=(0,e.ref)(null);(0,e.provide)(F,(0,e.computed)(()=>t.editor===null?null:(0,e.toRaw)(t.editor)));let r=t=>{if(n.value===null||t===null)return;let r=l((0,e.toRaw)(t));r!==void 0&&n.value.appendChild(r)},i=t=>{var n;t!==null&&((n=l((0,e.toRaw)(t)))==null||n.remove())};return(0,e.onMounted)(()=>{r(t.editor)}),(0,e.watch)(()=>t.editor,(e,t)=>{i(t==null?null:t),r(e)}),(0,e.onBeforeUnmount)(()=>{i(t.editor)}),()=>{let r=t.editor,i=r===null?void 0:T((0,e.toRaw)(r));return(0,e.h)(`div`,{ref:n},i===void 0?[]:[(0,e.h)(P,{registry:i})])}}}),z=`autofocus.defaultBlock.dataModel.placeholder.sanitizer.hideToolbar.maxHistoryLength.historyDebounceTime.newGroupDelay.globalUndoRedo.tools.data.minHeight.logLevel.readOnly.i18n.link.linkPaste.inlineToolbar.tunes.style.theme.scrollToBlock.user.resolveUser.notifierPosition.notifier.width.onBeforeRender.onBeforePaste.onEnter.onSubmit.onError.migrations.uploader.captureClicksBelowEditor`.split(`.`),B=(0,e.defineComponent)({name:`BlokEditor`,inheritAttrs:!1,props:{autofocus:{type:Boolean,default:void 0},defaultBlock:{type:String,default:void 0},dataModel:{type:String,default:void 0},placeholder:{type:[String,Boolean],default:void 0},sanitizer:{type:Object,default:void 0},hideToolbar:{type:Boolean,default:void 0},maxHistoryLength:{type:Number,default:void 0},historyDebounceTime:{type:Number,default:void 0},newGroupDelay:{type:Number,default:void 0},globalUndoRedo:{type:Boolean,default:void 0},tools:{type:Object,default:void 0},data:{type:Object,default:void 0},minHeight:{type:Number,default:void 0},logLevel:{type:String,default:void 0},readOnly:{type:[Boolean,Object],default:void 0},i18n:{type:Object,default:void 0},link:{type:Object,default:void 0},linkPaste:{type:Object,default:void 0},inlineToolbar:{type:[Array,Boolean],default:void 0},tunes:{type:Array,default:void 0},style:{type:Object,default:void 0},theme:{type:String,default:void 0},scrollToBlock:{type:Object,default:void 0},user:{type:Object,default:void 0},resolveUser:{type:Function,default:void 0},notifierPosition:{type:String,default:void 0},notifier:{type:Function,default:void 0},width:{type:String,default:void 0},onBeforeRender:{type:Function,default:void 0},onBeforePaste:{type:Function,default:void 0},onEnter:{type:Function,default:void 0},onSubmit:{type:Function,default:void 0},onError:{type:Function,default:void 0},migrations:{type:Object,default:void 0},uploader:{type:Object,default:void 0},captureClicksBelowEditor:{type:Boolean,default:void 0},recreateKey:{type:null}},emits:{ready:e=>!0,change:e=>!0,save:e=>!0,"update:data":e=>!0,"after-render":e=>!0,"theme-change":e=>!0,"blocks-rendered":e=>!0,"block-rendered":e=>!0},setup(t,{emit:n,expose:r,attrs:i}){let o=(0,e.getCurrentInstance)(),s=()=>{let e=o==null?void 0:o.vnode.props;return e==null?``:Object.keys(e).filter(e=>e.startsWith(`on`)).sort().join(`|`)},c=(0,e.ref)(s());(0,e.onUpdated)(()=>{c.value=s()});let l=e=>c.value.split(`|`).includes(e),u=()=>{let e={};for(let n of z){let r=t[n];r!==void 0&&(e[n]=r)}return l(`onChange`)&&(e.onChange=(e,t)=>{n(`change`,{api:e,event:t})}),(l(`onSave`)||l(`onUpdate:data`))&&(e.onSave=e=>{n(`update:data`,e),n(`save`,e)}),l(`onAfterRender`)&&(e.onAfterRender=e=>{n(`after-render`,e)}),l(`onThemeChange`)&&(e.onThemeChange=e=>{n(`theme-change`,e)}),e},d=k(()=>u(),()=>t.recreateKey);(0,e.watch)([d,c],([e],t,r)=>{if(e===null)return;let i=[];if(l(`onBlocksRendered`)){let t=e=>n(`blocks-rendered`,e);e.on(`blocks:rendered`,t),i.push([`blocks:rendered`,t])}if(l(`onBlockRendered`)){let t=e=>n(`block-rendered`,e);e.on(`block:rendered`,t),i.push([`block:rendered`,t])}r(()=>{for(let[t,n]of i)e.off(t,n)})});let f={last:null};return(0,e.watch)(d,e=>{e!==null&&e!==f.last&&(f.last=e,n(`ready`,e))}),r({instance:(0,e.computed)(()=>d.value),save:()=>{var e;return(e=d.value)==null?void 0:e.save()},focus:e=>{var t;(t=d.value)==null||t.focus(e)},render:e=>{let t=d.value;if(t!==null)return t.render(e).then(()=>{var n;(n=a(t))==null||n.markRendered(e)})}}),()=>(0,e.h)(R,g({editor:d.value},i))}}),V=[`toolbox`,`isReadOnlySupported`,`__isBlokVueBlock`],H=new Set([void 0,`user`,`api`,`convert`]),U=(e,t,n)=>{let r=new Map;t.forEach((e,t)=>{var i;let a=[];for(let[r,o]of Object.entries((i=n==null?void 0:n(e,t))==null?{}:i)){if(o==null){e.holder.removeAttribute(r);continue}e.holder.setAttribute(r,String(o)),a.push(r)}r.set(e.id,{holder:e.holder,names:a})});for(let[t,n]of e){let e=r.get(t);n.names.filter(t=>e===void 0||!e.names.includes(t)).forEach(e=>n.holder.removeAttribute(e))}e.clear(),r.forEach((t,n)=>e.set(n,t))},W=(e,t,r)=>{var i;e==null||(i=e.events)==null||i.emit(n.BlockChildrenMounted,{blockId:t,childIds:r.map(e=>e.id)})};function G(t){var r,i;let a=()=>(0,e.defineComponent)({name:`VueBlock(${t.type})`,props:{ctx:{type:Object,required:!0},notifyMounted:{type:Function,default:void 0}},setup(n){return(0,e.onMounted)(()=>{var e;return(e=n.notifyMounted)==null?void 0:e.call(n)}),t.setup(n.ctx)}}),o=(r=class{static get toolbox(){return t.toolbox}static get isReadOnlySupported(){return!0}constructor(r){var i,o,s;this.wrappedComponent=a(),this.mountSignalled=!1,this.hostEl=null,this.pendingDispatch=!1,this.notifyMounted=()=>{var e;if(this.mountSignalled)return;this.mountSignalled=!0;let n={origin:this.origin,api:this.api};if((e=t.onMounted)==null||e.call(t,this.blockApi,n),H.has(this.origin)){var r;(r=t.onCreated)==null||r.call(t,this.blockApi,n)}},this.commit=e=>{let r=(0,n.fillDefaults)(t.propSchema,g(g({},this.mirror),e));(0,n.deepEqual)(r,this.mirror)||(this.mirror=r,this.lastRendered=r,this.dataRef.value=r,this.flushDispatch())},this.blockApi=r.block;let c=(i=r.config)==null?{}:i;this.registry=c[x],this.api=r.api;let l=r.api;this.pointerDrag=()=>{var e;return(l==null||(e=l.blocks)==null?void 0:e.isPointerDragActive)===!0},this.mirror=(0,n.fillDefaults)(t.propSchema,(0,e.toRaw)((o=r.data)==null?{}:o)),this.lastRendered=this.mirror,this.dataRef=(0,e.shallowRef)(this.mirror),this.readOnlyRef=(0,e.shallowRef)(r.readOnly),this.origin=(s=r.origin)==null?`api`:s;let u=this.blockApi,d=this.api;this.childrenComponent=(0,e.defineComponent)({name:`VueBlockChildren(${t.type})`,props:{childAttributes:{type:Function,default:void 0}},setup(t){let r=(0,e.ref)(null),i=new Map,a=()=>{if(r.value===null)return;let e=u.getChildren();(0,n.mountChildBlocks)(r.value,e),U(i,e,t.childAttributes),W(d,u.id,e)};return(0,e.onMounted)(a),(0,e.onUpdated)(a),()=>(0,e.h)(`div`,{ref:r,[n.DATA_ATTR.nestedBlocks]:``})}})}render(){var e;let t=document.createElement(`div`);t.setAttribute(`data-blok-mutation-free`,`true`),this.hostEl=t;let n={data:this.dataRef,commit:this.commit,block:this.blockApi,api:this.api,readOnly:this.readOnlyRef,BlockChildren:this.childrenComponent};return(e=this.registry)==null||e.register(this.blockApi.id,{hostEl:t,component:this.wrappedComponent,props:{ctx:n,notifyMounted:this.notifyMounted}}),t}rendered(){var e;(e=t.onRendered)==null||e.call(t,this.blockApi)}save(){return this.mirror}async setData(r){var i=this;let a=(0,n.fillDefaults)(t.propSchema,(0,e.toRaw)(r==null?{}:r));return(0,n.deepEqual)(a,i.lastRendered)?!0:(i.mirror=a,i.lastRendered=a,i.dataRef.value=a,await(0,e.nextTick)(),!0)}setReadOnly(e){this.readOnlyRef.value=e}getToolbarAnchorElement(){var e;let n=this.hostEl;if(!(n===null||t.getToolbarAnchorElement===void 0))return(e=t.getToolbarAnchorElement(n,this.blockApi))==null?void 0:e}moved(){var e;(e=t.onMoved)==null||e.call(t,this.blockApi)}removed(){var e,n,r;(e=this.registry)==null||e.unregister(this.blockApi.id,(n=this.hostEl)==null?void 0:n),(r=t.onRemoved)==null||r.call(t,this.blockApi)}destroy(){var e,t;(e=this.registry)==null||e.unregister(this.blockApi.id,(t=this.hostEl)==null?void 0:t)}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)}},r.__isBlokVueBlock=!0,r);for(let[e,n]of Object.entries((i=t.statics)==null?{}:i))V.includes(e)||Object.defineProperty(o,e,{value:n,writable:!0,enumerable:!0,configurable:!0});return o}exports.BLOK_DEFAULT_CONFIG=_,exports.BLOK_EDITOR_INSTANCE=F,exports.BlokContent=R,exports.BlokEditor=B,exports.createVueBlock=G,exports.provideBlok=v,exports.useBlocks=j,exports.useBlok=k,exports.useBlokDefaults=y,exports.useBlokInstance=L,exports.useBlokReady=M;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("vue"),t=require("@bloklabs/core"),n=require("@bloklabs/core/adapters");var r=new WeakMap;function i(e,t){r.set(e,t)}function a(e){return r.get(e)}function o(e){r.delete(e)}var s=new WeakMap;function c(e,t){s.set(e,t)}function l(e){return s.get(e)}function u(e){s.delete(e)}function d(e){"@babel/helpers - typeof";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},d(e)}function f(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(d(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function p(e){var t=f(e,`string`);return d(t)==`symbol`?t:t+``}function m(e,t,n){return(t=p(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function h(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 g(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?h(Object(n),!0).forEach(function(t){m(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):h(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}var _=Symbol(`BLOK_DEFAULT_CONFIG`);function v(t){(0,e.provide)(_,t)}function y(){return(0,e.inject)(_,{})}function b(e,t){if(Object.keys(e).length===0)return t;let n=g({},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=g(g({},e.tools),t.tools)),n}var x=`__blokPortalRegistry`,S=()=>{let t=(0,e.reactive)(new Map);return{entries:t,register(n,r){t.set(n,(0,e.markRaw)(r))},unregister(e,n){var r;n!==void 0&&((r=t.get(e))==null?void 0:r.hostEl)!==n||t.delete(e)},setProps(e,n){let r=t.get(e);r!==void 0&&Object.assign(r.props,n)}}},C=new WeakMap;function w(e,t){C.set(e,t)}function T(e){return C.get(e)}function E(e){C.delete(e)}var D=e=>({onChange:e.onChange!==void 0,onSave:e.onSave!==void 0,onEnter:e.onEnter!==void 0,onSubmit:e.onSubmit!==void 0,onBeforeRender:e.onBeforeRender!==void 0,onAfterRender:e.onAfterRender!==void 0}),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.__isBlokVueBlock===!0)){n[i]=a;continue}let o=typeof a==`function`?{class:a}:g({},a);o.config=g(g({},(r=o.config)==null?{}:r),{},{[x]:t}),n[i]=o}return n};function k(r,a){let s=(0,e.shallowRef)(null),l=(0,e.inject)(_,{}),d=()=>b(l,(0,e.toValue)(r)),f={current:null,holder:null,lastRenderedData:d().data,seededEditor:null,renderChain:Promise.resolve(),appliedHandlerPresence:{onChange:!1,onSave:!1,onEnter:!1,onSubmit:!1,onBeforeRender:!1,onAfterRender:!1}},p={onChange:(...e)=>{var t,n;(t=(n=d()).onChange)==null||t.call(n,...e)},onSave:(...e)=>{var t,n;f.lastRenderedData=e[0],(t=(n=d()).onSave)==null||t.call(n,...e)},onEnter:(...e)=>{var t,n;return(t=(n=d()).onEnter)==null?void 0:t.call(n,...e)},onSubmit:(...e)=>{var t,n;(t=(n=d()).onSubmit)==null||t.call(n,...e)},onBeforeRender:(...e)=>{var t,n,r;return(t=(n=(r=d()).onBeforeRender)==null?void 0:n.call(r,...e))==null?e[0]:t},onAfterRender:(...e)=>{var t,n;(t=(n=d()).onAfterRender)==null||t.call(n,...e)}},m=()=>{let t=g({},b((0,e.toRaw)(l),(0,e.toRaw)((0,e.toValue)(r))));return delete t.holder,t.data!==void 0&&(t.data=(0,e.toRaw)(t.data)),t},h=()=>{if(f.current!==null){u(f.current),E(f.current),o(f.current);try{f.current.destroy()}catch(e){}}f.current=null,f.holder=null,s.value=null},v=()=>{let e=document.createElement(`div`);f.holder=e;let n=m(),r=S();n.tools!==void 0&&(n.tools=O(n.tools,r));let a=D(d());n.onChange=a.onChange?p.onChange:void 0,n.onSave=a.onSave?p.onSave:void 0,n.onEnter=a.onEnter?p.onEnter:void 0,n.onSubmit=a.onSubmit?p.onSubmit:void 0,n.onBeforeRender=a.onBeforeRender?p.onBeforeRender:void 0,n.onAfterRender=a.onAfterRender?p.onAfterRender:void 0,f.appliedHandlerPresence=a;let o=new t.Blok(g(g({},n),{},{holder:e}));f.current=o,c(o,e),w(o,r),i(o,{markRendered:e=>{f.lastRenderedData=e}}),o.isReady.then(()=>{f.current===o&&(s.value=o)}).catch(()=>{f.current===o&&h()})};(0,e.watch)([s,()=>(0,n.normalizeReadOnlyConfig)(d().readOnly).enabled,()=>(0,n.normalizeReadOnlyConfig)(d().readOnly).hideControls,()=>typeof d().readOnly==`object`],([e,t,n,r])=>{e&&(r?e.readOnly.set(t,{hideControls:n}):e.readOnly.set(t))},{immediate:!0}),(0,e.watch)([s,()=>d().hideToolbar],([e,t])=>{e&&e.toolbar.setHidden(!!t)},{immediate:!0}),(0,e.watch)([s,()=>d().theme],([e,t])=>{e&&t!==void 0&&e.theme.set(t)},{immediate:!0}),(0,e.watch)([s,()=>d().width],([e,t])=>{e&&t!==void 0&&e.width.set(t)},{immediate:!0}),(0,e.watch)([s,()=>d().placeholder],([e,t])=>{e&&t!==void 0&&e.placeholder.set(t)},{immediate:!0});let y={value:void 0};(0,e.watch)([s,()=>{var e;return(e=d().style)==null?void 0:e.tokens}],([e,t])=>{!e||t===void 0||(0,n.deepEqual)(t,y.value)||(y.value=g({},t),e.tokens.set(t))},{immediate:!0,deep:!0});let x={value:d().i18n};(0,e.watch)([s,()=>d().i18n],([e,t])=>{if(!e||t===void 0||(0,n.deepEqual)(t,x.value))return;x.value=g({},t);let{locale:r,messages:i,direction:a}=t;e.i18n.update(g(g(g({},r===void 0?{}:{locale:r}),i===void 0?{}:{messages:i}),a===void 0?{}:{direction:a}))},{immediate:!0,deep:!0});let C={editor:null,value:void 0};return(0,e.watch)([s,()=>d().inlineToolbar],([e,t])=>{if(!e||t===void 0||C.editor===e&&(0,n.deepEqual)(t,C.value))return;let r=Array.isArray(t)?[...t]:t;C.editor=e,C.value=r,e.tools.setInlineToolbar(r)},{immediate:!0,deep:!0}),(0,e.watch)([s,()=>d().autofocus],([e,t])=>{e&&t&&e.focus()},{immediate:!0}),(0,e.watch)([s,()=>JSON.stringify(D(d()))],([e])=>{if(!e)return;let t=D(d()),n=f.appliedHandlerPresence,r={},i={value:!1},a=(e,r)=>{t[e]!==n[e]&&(n[e]=t[e],i.value=!0,r(t[e]?p[e]:void 0))};a(`onChange`,e=>{r.onChange=e}),a(`onSave`,e=>{r.onSave=e}),a(`onEnter`,e=>{r.onEnter=e}),a(`onSubmit`,e=>{r.onSubmit=e}),a(`onBeforeRender`,e=>{r.onBeforeRender=e}),a(`onAfterRender`,e=>{r.onAfterRender=e}),i.value&&e.handlers.set(r)},{immediate:!0}),(0,e.watch)([s,()=>d().data],([t,r])=>{if(!t||r===void 0)return;if(f.seededEditor!==t){f.seededEditor=t,f.lastRenderedData=r;return}let i=f.lastRenderedData;i!==void 0&&(0,n.equalsOutputData)(r,i)||(f.lastRenderedData=r,f.renderChain=f.renderChain.catch(()=>void 0).then(()=>t.render((0,n.toRenderableData)((0,e.toRaw)(r)))))},{immediate:!0}),a!==void 0&&(0,e.watch)(()=>(0,e.toValue)(a),()=>{h(),v()}),(0,e.onMounted)(v),(0,e.onBeforeUnmount)(h),s}var A=`block changed`;function j(t,r={}){let i=(0,e.shallowRef)(0),a=()=>{let n=(0,e.toValue)(t);return n===null?null:(0,e.toRaw)(n)},o=()=>{i.value},s=(0,e.shallowRef)(n.EMPTY_API),c={editor:null,handler:null},l=()=>{c.editor!==null&&c.handler!==null&&c.editor.off(A,c.handler),c.editor=null,c.handler=null};return(0,e.watch)(()=>a(),t=>{if(l(),i.value+=1,t===null){s.value=n.EMPTY_API;return}let a=a=>{var o;let s=(o=(0,e.toValue)(r.within))==null?null:o;s!==null&&!(0,n.changeTouchesSubtree)(t,a,s)||(i.value+=1)};t.on(A,a),c.editor=t,c.handler=a,s.value=(0,n.createBlocksApiForEditor)(t,o)},{immediate:!0}),(0,e.onScopeDispose)(l),{getById:e=>s.value.getById(e),getChildren:e=>s.value.getChildren(e),insert:e=>s.value.insert(e),insertMany:e=>s.value.insertMany(e),insertTree:e=>s.value.insertTree(e),insertMarkdown:(e,t)=>s.value.insertMarkdown(e,t),exportMarkdown:()=>s.value.exportMarkdown(),move:(e,t)=>s.value.move(e,t),nest:(e,t)=>s.value.nest(e,t),unnest:e=>s.value.unnest(e),remove:e=>s.value.remove(e),update:(e,t,n)=>s.value.update(e,t,n),convert:(e,t,n,r)=>s.value.convert(e,t,n,r),transact:e=>s.value.transact(e),transactWithoutCapture:e=>s.value.transactWithoutCapture(e),getBlocksCount:()=>s.value.getBlocksCount(),getCurrentBlockIndex:()=>s.value.getCurrentBlockIndex(),getBlockByIndex:e=>s.value.getBlockByIndex(e),getBlockByElement:e=>s.value.getBlockByElement(e),getBlockData:e=>s.value.getBlockData(e),getBlockIndex:e=>s.value.getBlockIndex(e),composeBlockData:e=>s.value.composeBlockData(e),renderFromHTML:e=>s.value.renderFromHTML(e),insertOutputData:(e,t)=>s.value.insertOutputData(e,t),splitBlock:(e,t,n,r,i)=>s.value.splitBlock(e,t,n,r,i),insertInsideParent:(e,t,n)=>s.value.insertInsideParent(e,t,n),render:e=>s.value.render(e),clear:()=>s.value.clear(),isSyncingFromYjs:()=>s.value.isSyncingFromYjs()}}function M(n={}){let{within:r,settleOn:i}=n,a=(0,e.shallowRef)(!1),o=()=>{var n;let o=r===void 0||(n=(0,e.toValue)(r))==null?null:n;a.value=r!==void 0&&o===null?!1:t.Blok.readyState({within:o,settleOn:i}).ready};return(0,e.onScopeDispose)(t.Blok.subscribeReady(o)),(0,e.onMounted)(o),a}var N=(0,e.defineComponent)({name:`BlockErrorBoundary`,setup(t,{slots:n}){return(0,e.onErrorCaptured)(()=>!1),()=>{var e;return(e=n.default)==null?void 0:e.call(n)}}}),P=(0,e.defineComponent)({name:`BlockPortalHost`,props:{registry:{type:Object,required:!0}},setup(t){return()=>(0,e.h)(e.Fragment,Array.from(t.registry.entries.entries()).map(([t,n])=>(0,e.h)(e.Teleport,{key:t,to:n.hostEl},[(0,e.h)(N,null,{default:()=>(0,e.h)(n.component,n.props)})])))}}),F=Symbol(`BLOK_EDITOR_INSTANCE`),I=(0,e.shallowRef)(null);function L(){return(0,e.inject)(F,I)}var R=(0,e.defineComponent)({name:`BlokContent`,props:{editor:{type:Object,default:null}},setup(t){let n=(0,e.ref)(null);(0,e.provide)(F,(0,e.computed)(()=>t.editor===null?null:(0,e.toRaw)(t.editor)));let r=t=>{if(n.value===null||t===null)return;let r=l((0,e.toRaw)(t));r!==void 0&&n.value.appendChild(r)},i=t=>{var n;t!==null&&((n=l((0,e.toRaw)(t)))==null||n.remove())};return(0,e.onMounted)(()=>{r(t.editor)}),(0,e.watch)(()=>t.editor,(e,t)=>{i(t==null?null:t),r(e)}),(0,e.onBeforeUnmount)(()=>{i(t.editor)}),()=>{let r=t.editor,i=r===null?void 0:T((0,e.toRaw)(r));return(0,e.h)(`div`,{ref:n},i===void 0?[]:[(0,e.h)(P,{registry:i})])}}}),z=`autofocus.defaultBlock.dataModel.placeholder.sanitizer.hideToolbar.maxHistoryLength.historyDebounceTime.newGroupDelay.globalUndoRedo.tools.data.minHeight.logLevel.readOnly.i18n.link.linkPaste.inlineToolbar.tunes.style.theme.scrollToBlock.user.resolveUser.notifierPosition.notifier.width.onBeforeRender.onBeforePaste.onEnter.onSubmit.onError.migrations.uploader.captureClicksBelowEditor`.split(`.`),B=(0,e.defineComponent)({name:`BlokEditor`,inheritAttrs:!1,props:{autofocus:{type:Boolean,default:void 0},defaultBlock:{type:String,default:void 0},dataModel:{type:String,default:void 0},placeholder:{type:[String,Boolean],default:void 0},sanitizer:{type:Object,default:void 0},hideToolbar:{type:Boolean,default:void 0},maxHistoryLength:{type:Number,default:void 0},historyDebounceTime:{type:Number,default:void 0},newGroupDelay:{type:Number,default:void 0},globalUndoRedo:{type:Boolean,default:void 0},tools:{type:Object,default:void 0},data:{type:Object,default:void 0},minHeight:{type:Number,default:void 0},logLevel:{type:String,default:void 0},readOnly:{type:[Boolean,Object],default:void 0},i18n:{type:Object,default:void 0},link:{type:Object,default:void 0},linkPaste:{type:Object,default:void 0},inlineToolbar:{type:[Array,Boolean],default:void 0},tunes:{type:Array,default:void 0},style:{type:Object,default:void 0},theme:{type:String,default:void 0},scrollToBlock:{type:Object,default:void 0},user:{type:Object,default:void 0},resolveUser:{type:Function,default:void 0},notifierPosition:{type:String,default:void 0},notifier:{type:Function,default:void 0},width:{type:String,default:void 0},onBeforeRender:{type:Function,default:void 0},onBeforePaste:{type:Function,default:void 0},onEnter:{type:Function,default:void 0},onSubmit:{type:Function,default:void 0},onError:{type:Function,default:void 0},migrations:{type:Object,default:void 0},uploader:{type:Object,default:void 0},captureClicksBelowEditor:{type:Boolean,default:void 0},recreateKey:{type:null}},emits:{ready:e=>!0,change:e=>!0,save:e=>!0,"update:data":e=>!0,"after-render":e=>!0,"theme-change":e=>!0,"blocks-rendered":e=>!0,"block-rendered":e=>!0},setup(t,{emit:n,expose:r,attrs:i}){let o=(0,e.getCurrentInstance)(),s=()=>{let e=o==null?void 0:o.vnode.props;return e==null?``:Object.keys(e).filter(e=>e.startsWith(`on`)).sort().join(`|`)},c=(0,e.ref)(s());(0,e.onUpdated)(()=>{c.value=s()});let l=e=>c.value.split(`|`).includes(e),u=()=>{let e={};for(let n of z){let r=t[n];r!==void 0&&(e[n]=r)}return l(`onChange`)&&(e.onChange=(e,t)=>{n(`change`,{api:e,event:t})}),(l(`onSave`)||l(`onUpdate:data`))&&(e.onSave=e=>{n(`update:data`,e),n(`save`,e)}),l(`onAfterRender`)&&(e.onAfterRender=e=>{n(`after-render`,e)}),l(`onThemeChange`)&&(e.onThemeChange=e=>{n(`theme-change`,e)}),e},d=k(()=>u(),()=>t.recreateKey);(0,e.watch)([d,c],([e],t,r)=>{if(e===null)return;let i=[];if(l(`onBlocksRendered`)){let t=e=>n(`blocks-rendered`,e);e.on(`blocks:rendered`,t),i.push([`blocks:rendered`,t])}if(l(`onBlockRendered`)){let t=e=>n(`block-rendered`,e);e.on(`block:rendered`,t),i.push([`block:rendered`,t])}r(()=>{for(let[t,n]of i)e.off(t,n)})});let f={last:null};return(0,e.watch)(d,e=>{e!==null&&e!==f.last&&(f.last=e,n(`ready`,e))}),r({instance:(0,e.computed)(()=>d.value),save:()=>{var e;return(e=d.value)==null?void 0:e.save()},focus:e=>{var t;(t=d.value)==null||t.focus(e)},render:e=>{let t=d.value;if(t!==null)return t.render(e).then(()=>{var n;(n=a(t))==null||n.markRendered(e)})}}),()=>(0,e.h)(R,g({editor:d.value},i))}}),V=[`toolbox`,`isReadOnlySupported`,`__isBlokVueBlock`],H=new Set([void 0,`user`,`api`,`convert`]),U=(e,t,r)=>{var i;e==null||(i=e.events)==null||i.emit(n.BlockChildrenMounted,{blockId:t,childIds:r.map(e=>e.id)})};function W(t){var r,i;let a=()=>(0,e.defineComponent)({name:`VueBlock(${t.type})`,props:{ctx:{type:Object,required:!0},notifyMounted:{type:Function,default:void 0}},setup(n){return(0,e.onMounted)(()=>{var e;return(e=n.notifyMounted)==null?void 0:e.call(n)}),t.setup(n.ctx)}}),o=(r=class{static get toolbox(){return t.toolbox}static get isReadOnlySupported(){return!0}constructor(r){var i,o,s;this.wrappedComponent=a(),this.mountSignalled=!1,this.hostEl=null,this.pendingDispatch=!1,this.anchorEl=null,this.toolbarAnchorRef=e=>{let t=e===null||e instanceof Element?e:e.$el;this.anchorEl=t instanceof HTMLElement?t:null},this.notifyMounted=()=>{var e;if(this.mountSignalled)return;this.mountSignalled=!0;let n={origin:this.origin,api:this.api};if((e=t.onMounted)==null||e.call(t,this.blockApi,n),H.has(this.origin)){var r;(r=t.onCreated)==null||r.call(t,this.blockApi,n)}},this.commit=e=>{let r=(0,n.fillDefaults)(t.propSchema,g(g({},this.mirror),e));(0,n.deepEqual)(r,this.mirror)||(this.mirror=r,this.lastRendered=r,this.dataRef.value=r,this.flushDispatch())},this.blockApi=r.block;let c=(i=r.config)==null?{}:i;this.registry=c[x],this.api=r.api;let l=r.api;this.pointerDrag=()=>{var e;return(l==null||(e=l.blocks)==null?void 0:e.isPointerDragActive)===!0},this.mirror=(0,n.fillDefaults)(t.propSchema,(0,e.toRaw)((o=r.data)==null?{}:o)),this.lastRendered=this.mirror,this.dataRef=(0,e.shallowRef)(this.mirror),this.readOnlyRef=(0,e.shallowRef)(r.readOnly),this.origin=(s=r.origin)==null?`api`:s;let u=this.blockApi,d=this.api;this.childrenComponent=(0,e.defineComponent)({name:`VueBlockChildren(${t.type})`,props:{childAttributes:{type:Function,default:void 0},childContentAttributes:{type:Function,default:void 0}},setup(t){let r=(0,e.ref)(null),i=(0,n.createChildDecorationLedger)(),a=()=>{if(r.value===null)return;let e=u.getChildren();(0,n.mountChildBlocks)(r.value,e),(0,n.applyChildDecoration)(i,e,{childAttributes:t.childAttributes,childContentAttributes:t.childContentAttributes}),U(d,u.id,e)};return(0,e.onMounted)(a),(0,e.onUpdated)(a),()=>(0,e.h)(`div`,{ref:r,[n.DATA_ATTR.nestedBlocks]:``})}})}render(){var e;let t=document.createElement(`div`);t.setAttribute(`data-blok-mutation-free`,`true`),this.hostEl=t;let n={data:this.dataRef,commit:this.commit,block:this.blockApi,api:this.api,readOnly:this.readOnlyRef,BlockChildren:this.childrenComponent,toolbarAnchorRef:this.toolbarAnchorRef};return(e=this.registry)==null||e.register(this.blockApi.id,{hostEl:t,component:this.wrappedComponent,props:{ctx:n,notifyMounted:this.notifyMounted}}),t}rendered(){var e;(e=t.onRendered)==null||e.call(t,this.blockApi)}save(){return this.mirror}async setData(r){var i=this;let a=(0,n.fillDefaults)(t.propSchema,(0,e.toRaw)(r==null?{}:r));return(0,n.deepEqual)(a,i.lastRendered)?!0:(i.mirror=a,i.lastRendered=a,i.dataRef.value=a,await(0,e.nextTick)(),!0)}setReadOnly(e){this.readOnlyRef.value=e}getToolbarAnchorElement(){var e;let n=this.anchorEl;if(n!==null&&n.isConnected)return n;let r=this.hostEl;if(!(r===null||t.getToolbarAnchorElement===void 0))return(e=t.getToolbarAnchorElement(r,this.blockApi))==null?void 0:e}moved(){var e;(e=t.onMoved)==null||e.call(t,this.blockApi)}removed(){var e,n,r;(e=this.registry)==null||e.unregister(this.blockApi.id,(n=this.hostEl)==null?void 0:n),(r=t.onRemoved)==null||r.call(t,this.blockApi)}destroy(){var e,t;(e=this.registry)==null||e.unregister(this.blockApi.id,(t=this.hostEl)==null?void 0:t)}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)}},r.__isBlokVueBlock=!0,r);for(let[e,n]of Object.entries((i=t.statics)==null?{}:i))V.includes(e)||Object.defineProperty(o,e,{value:n,writable:!0,enumerable:!0,configurable:!0});return o}exports.BLOK_DEFAULT_CONFIG=_,exports.BLOK_EDITOR_INSTANCE=F,exports.BlokContent=R,exports.BlokEditor=B,exports.createVueBlock=W,exports.provideBlok=v,exports.useBlocks=j,exports.useBlok=k,exports.useBlokDefaults=y,exports.useBlokInstance=L,exports.useBlokReady=M;

package/dist/index.mjs

@@ -1,61 +1,61 @@
 import { Fragment as e, Teleport as t, computed as n, defineComponent as r, getCurrentInstance as i, h as a, inject as o, markRaw as s, nextTick as c, onBeforeUnmount as l, onErrorCaptured as u, onMounted as d, onScopeDispose as f, onUpdated as p, provide as m, reactive as h, ref as g, shallowRef as _, toRaw as v, toValue as y, watch as b } from "vue";
 import { Blok as x } from "@bloklabs/core";
-import { BlockChildrenMounted as ee, DATA_ATTR as S, EMPTY_API as C, createBlocksApiForEditor as w, deepEqual as T, equalsOutputData as te, fillDefaults as E, mountChildBlocks as D, normalizeReadOnlyConfig as O, toRenderableData as ne } from "@bloklabs/core/adapters";
+import { BlockChildrenMounted as ee, DATA_ATTR as te, EMPTY_API as S, applyChildDecoration as C, changeTouchesSubtree as w, createBlocksApiForEditor as T, createChildDecorationLedger as E, deepEqual as D, equalsOutputData as ne, fillDefaults as O, mountChildBlocks as re, normalizeReadOnlyConfig as k, toRenderableData as ie } from "@bloklabs/core/adapters";
 //#region src/content-baseline-map.ts
-var k = /* @__PURE__ */ new WeakMap();
-function A(e, t) {
-	k.set(e, t);
-}
-function re(e) {
-	return k.get(e);
+var A = /* @__PURE__ */ new WeakMap();
+function ae(e, t) {
+	A.set(e, t);
 }
 function j(e) {
-	k.delete(e);
+	return A.get(e);
+}
+function M(e) {
+	A.delete(e);
 }
 //#endregion
 //#region src/holder-map.ts
-var M = /* @__PURE__ */ new WeakMap();
-function N(e, t) {
-	M.set(e, t);
+var N = /* @__PURE__ */ new WeakMap();
+function oe(e, t) {
+	N.set(e, t);
 }
 function P(e) {
-	return M.get(e);
+	return N.get(e);
 }
-function F(e) {
-	M.delete(e);
+function se(e) {
+	N.delete(e);
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.139.0/helpers/esm/typeof.js
-function I(e) {
+function F(e) {
 	"@babel/helpers - typeof";
-	return I = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(e) {
+	return F = 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;
-	}, I(e);
+	}, F(e);
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.139.0/helpers/esm/toPrimitive.js
-function ie(e, t) {
-	if (I(e) != "object" || !e) return e;
+function I(e, t) {
+	if (F(e) != "object" || !e) return e;
 	var n = e[Symbol.toPrimitive];
 	if (n !== void 0) {
 		var r = n.call(e, t || "default");
-		if (I(r) != "object") return r;
+		if (F(r) != "object") return r;
 		throw TypeError("@@toPrimitive must return a primitive value.");
 	}
 	return (t === "string" ? String : Number)(e);
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.139.0/helpers/esm/toPropertyKey.js
-function ae(e) {
-	var t = ie(e, "string");
-	return I(t) == "symbol" ? t : t + "";
+function L(e) {
+	var t = I(e, "string");
+	return F(t) == "symbol" ? t : t + "";
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.139.0/helpers/esm/defineProperty.js
-function L(e, t, n) {
-	return (t = ae(t)) in e ? Object.defineProperty(e, t, {
+function R(e, t, n) {
+	return (t = L(t)) in e ? Object.defineProperty(e, t, {
 		value: n,
 		enumerable: !0,
 		configurable: !0,
@@ -64,7 +64,7 @@ function L(e, t, n) {
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.139.0/helpers/esm/objectSpread2.js
-function R(e, t) {
+function z(e, t) {
 	var n = Object.keys(e);
 	if (Object.getOwnPropertySymbols) {
 		var r = Object.getOwnPropertySymbols(e);
@@ -74,12 +74,12 @@ function R(e, t) {
 	}
 	return n;
 }
-function z(e) {
+function B(e) {
 	for (var t = 1; t < arguments.length; t++) {
 		var n = arguments[t] == null ? {} : arguments[t];
-		t % 2 ? R(Object(n), !0).forEach(function(t) {
-			L(e, t, n[t]);
-		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : R(Object(n)).forEach(function(t) {
+		t % 2 ? z(Object(n), !0).forEach(function(t) {
+			R(e, t, n[t]);
+		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : z(Object(n)).forEach(function(t) {
 			Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
 		});
 	}
@@ -87,25 +87,25 @@ function z(e) {
 }
 //#endregion
 //#region src/provide-blok.ts
-var B = Symbol("BLOK_DEFAULT_CONFIG");
-function V(e) {
-	m(B, e);
+var V = Symbol("BLOK_DEFAULT_CONFIG");
+function H(e) {
+	m(V, e);
 }
-function H() {
-	return o(B, {});
+function U() {
+	return o(V, {});
 }
-function U(e, t) {
+function W(e, t) {
 	if (Object.keys(e).length === 0) return t;
-	let n = z({}, e);
+	let n = B({}, 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 = z(z({}, e.tools), t.tools)), n;
+	return (e.tools !== void 0 || t.tools !== void 0) && (n.tools = B(B({}, e.tools), t.tools)), n;
 }
 //#endregion
 //#region src/block-portal-registry.ts
-var W = "__blokPortalRegistry", G = () => {
+var G = "__blokPortalRegistry", K = () => {
 	let e = h(/* @__PURE__ */ new Map());
 	return {
 		entries: e,
@@ -121,15 +121,15 @@ var W = "__blokPortalRegistry", G = () => {
 			r !== void 0 && Object.assign(r.props, n);
 		}
 	};
-}, K = /* @__PURE__ */ new WeakMap();
-function q(e, t) {
-	K.set(e, t);
+}, q = /* @__PURE__ */ new WeakMap();
+function ce(e, t) {
+	q.set(e, t);
 }
 function J(e) {
-	return K.get(e);
+	return q.get(e);
 }
-function oe(e) {
-	K.delete(e);
+function le(e) {
+	q.delete(e);
 }
 //#endregion
 //#region src/useBlok.ts
@@ -140,7 +140,7 @@ var Y = (e) => ({
 	onSubmit: e.onSubmit !== void 0,
 	onBeforeRender: e.onBeforeRender !== void 0,
 	onAfterRender: e.onAfterRender !== void 0
-}), se = (e, t) => {
+}), ue = (e, t) => {
 	if (typeof e != "object" || !e) return e;
 	let n = {};
 	for (let [i, a] of Object.entries(e)) {
@@ -150,13 +150,13 @@ var Y = (e) => ({
 			n[i] = a;
 			continue;
 		}
-		let o = typeof a == "function" ? { class: a } : z({}, a);
-		o.config = z(z({}, (r = o.config) == null ? {} : r), {}, { [W]: t }), n[i] = o;
+		let o = typeof a == "function" ? { class: a } : B({}, a);
+		o.config = B(B({}, (r = o.config) == null ? {} : r), {}, { [G]: t }), n[i] = o;
 	}
 	return n;
 };
 function X(e, t) {
-	let n = _(null), r = o(B, {}), i = () => U(r, y(e)), a = {
+	let n = _(null), r = o(V, {}), i = () => W(r, y(e)), a = {
 		current: null,
 		holder: null,
 		lastRenderedData: i().data,
@@ -196,11 +196,11 @@ function X(e, t) {
 			(t = (n = i()).onAfterRender) == null || t.call(n, ...e);
 		}
 	}, c = () => {
-		let t = z({}, U(v(r), v(y(e))));
+		let t = B({}, W(v(r), v(y(e))));
 		return delete t.holder, t.data !== void 0 && (t.data = v(t.data)), t;
 	}, u = () => {
 		if (a.current !== null) {
-			F(a.current), oe(a.current), j(a.current);
+			se(a.current), le(a.current), M(a.current);
 			try {
 				a.current.destroy();
 			} catch (e) {}
@@ -209,12 +209,12 @@ function X(e, t) {
 	}, f = () => {
 		let e = document.createElement("div");
 		a.holder = e;
-		let t = c(), r = G();
-		t.tools !== void 0 && (t.tools = se(t.tools, r));
+		let t = c(), r = K();
+		t.tools !== void 0 && (t.tools = ue(t.tools, r));
 		let o = Y(i());
 		t.onChange = o.onChange ? s.onChange : void 0, t.onSave = o.onSave ? s.onSave : void 0, t.onEnter = o.onEnter ? s.onEnter : void 0, t.onSubmit = o.onSubmit ? s.onSubmit : void 0, t.onBeforeRender = o.onBeforeRender ? s.onBeforeRender : void 0, t.onAfterRender = o.onAfterRender ? s.onAfterRender : void 0, a.appliedHandlerPresence = o;
-		let l = new x(z(z({}, t), {}, { holder: e }));
-		a.current = l, N(l, e), q(l, r), A(l, { markRendered: (e) => {
+		let l = new x(B(B({}, t), {}, { holder: e }));
+		a.current = l, oe(l, e), ce(l, r), ae(l, { markRendered: (e) => {
 			a.lastRenderedData = e;
 		} }), l.isReady.then(() => {
 			a.current === l && (n.value = l);
@@ -224,8 +224,8 @@ function X(e, t) {
 	};
 	b([
 		n,
-		() => O(i().readOnly).enabled,
-		() => O(i().readOnly).hideControls,
+		() => k(i().readOnly).enabled,
+		() => k(i().readOnly).hideControls,
 		() => typeof i().readOnly == "object"
 	], ([e, t, n, r]) => {
 		e && (r ? e.readOnly.set(t, { hideControls: n }) : e.readOnly.set(t));
@@ -243,17 +243,17 @@ function X(e, t) {
 		var e;
 		return (e = i().style) == null ? void 0 : e.tokens;
 	}], ([e, t]) => {
-		!e || t === void 0 || T(t, p.value) || (p.value = z({}, t), e.tokens.set(t));
+		!e || t === void 0 || D(t, p.value) || (p.value = B({}, t), e.tokens.set(t));
 	}, {
 		immediate: !0,
 		deep: !0
 	});
 	let m = { value: i().i18n };
 	b([n, () => i().i18n], ([e, t]) => {
-		if (!e || t === void 0 || T(t, m.value)) return;
-		m.value = z({}, t);
+		if (!e || t === void 0 || D(t, m.value)) return;
+		m.value = B({}, t);
 		let { locale: n, messages: r, direction: i } = t;
-		e.i18n.update(z(z(z({}, n === void 0 ? {} : { locale: n }), r === void 0 ? {} : { messages: r }), i === void 0 ? {} : { direction: i }));
+		e.i18n.update(B(B(B({}, n === void 0 ? {} : { locale: n }), r === void 0 ? {} : { messages: r }), i === void 0 ? {} : { direction: i }));
 	}, {
 		immediate: !0,
 		deep: !0
@@ -263,7 +263,7 @@ function X(e, t) {
 		value: void 0
 	};
 	return b([n, () => i().inlineToolbar], ([e, t]) => {
-		if (!e || t === void 0 || h.editor === e && T(t, h.value)) return;
+		if (!e || t === void 0 || h.editor === e && D(t, h.value)) return;
 		let n = Array.isArray(t) ? [...t] : t;
 		h.editor = e, h.value = n, e.tools.setInlineToolbar(n);
 	}, {
@@ -296,7 +296,7 @@ function X(e, t) {
 			return;
 		}
 		let n = a.lastRenderedData;
-		n !== void 0 && te(t, n) || (a.lastRenderedData = t, a.renderChain = a.renderChain.catch(() => void 0).then(() => e.render(ne(v(t)))));
+		n !== void 0 && ne(t, n) || (a.lastRenderedData = t, a.renderChain = a.renderChain.catch(() => void 0).then(() => e.render(ie(v(t)))));
 	}, { immediate: !0 }), t !== void 0 && b(() => y(t), () => {
 		u(), f();
 	}), d(f), l(u), n;
@@ -304,62 +304,64 @@ function X(e, t) {
 //#endregion
 //#region src/useBlocks.ts
 var Z = "block changed";
-function ce(e) {
-	let t = _(0), n = () => {
+function de(e, t = {}) {
+	let n = _(0), r = () => {
 		let t = y(e);
 		return t === null ? null : v(t);
-	}, r = () => {
-		t.value;
-	}, i = _(C), a = {
+	}, i = () => {
+		n.value;
+	}, a = _(S), o = {
 		editor: null,
 		handler: null
-	}, o = () => {
-		a.editor !== null && a.handler !== null && a.editor.off(Z, a.handler), a.editor = null, a.handler = null;
+	}, s = () => {
+		o.editor !== null && o.handler !== null && o.editor.off(Z, o.handler), o.editor = null, o.handler = null;
 	};
-	return b(() => n(), (e) => {
-		if (o(), t.value += 1, e === null) {
-			i.value = C;
+	return b(() => r(), (e) => {
+		if (s(), n.value += 1, e === null) {
+			a.value = S;
 			return;
 		}
-		let n = () => {
-			t.value += 1;
+		let r = (r) => {
+			var i;
+			let a = (i = y(t.within)) == null ? null : i;
+			a !== null && !w(e, r, a) || (n.value += 1);
 		};
-		e.on(Z, n), a.editor = e, a.handler = n, i.value = w(e, r);
-	}, { immediate: !0 }), f(o), {
-		getById: (e) => i.value.getById(e),
-		getChildren: (e) => i.value.getChildren(e),
-		insert: (e) => i.value.insert(e),
-		insertMany: (e) => i.value.insertMany(e),
-		insertTree: (e) => i.value.insertTree(e),
-		insertMarkdown: (e, t) => i.value.insertMarkdown(e, t),
-		exportMarkdown: () => i.value.exportMarkdown(),
-		move: (e, t) => i.value.move(e, t),
-		nest: (e, t) => i.value.nest(e, t),
-		unnest: (e) => i.value.unnest(e),
-		remove: (e) => i.value.remove(e),
-		update: (e, t, n) => i.value.update(e, t, n),
-		convert: (e, t, n, r) => i.value.convert(e, t, n, r),
-		transact: (e) => i.value.transact(e),
-		transactWithoutCapture: (e) => i.value.transactWithoutCapture(e),
-		getBlocksCount: () => i.value.getBlocksCount(),
-		getCurrentBlockIndex: () => i.value.getCurrentBlockIndex(),
-		getBlockByIndex: (e) => i.value.getBlockByIndex(e),
-		getBlockByElement: (e) => i.value.getBlockByElement(e),
-		getBlockData: (e) => i.value.getBlockData(e),
-		getBlockIndex: (e) => i.value.getBlockIndex(e),
-		composeBlockData: (e) => i.value.composeBlockData(e),
-		renderFromHTML: (e) => i.value.renderFromHTML(e),
-		insertOutputData: (e, t) => i.value.insertOutputData(e, t),
-		splitBlock: (e, t, n, r, a) => i.value.splitBlock(e, t, n, r, a),
-		insertInsideParent: (e, t, n) => i.value.insertInsideParent(e, t, n),
-		render: (e) => i.value.render(e),
-		clear: () => i.value.clear(),
-		isSyncingFromYjs: () => i.value.isSyncingFromYjs()
+		e.on(Z, r), o.editor = e, o.handler = r, a.value = T(e, i);
+	}, { immediate: !0 }), f(s), {
+		getById: (e) => a.value.getById(e),
+		getChildren: (e) => a.value.getChildren(e),
+		insert: (e) => a.value.insert(e),
+		insertMany: (e) => a.value.insertMany(e),
+		insertTree: (e) => a.value.insertTree(e),
+		insertMarkdown: (e, t) => a.value.insertMarkdown(e, t),
+		exportMarkdown: () => a.value.exportMarkdown(),
+		move: (e, t) => a.value.move(e, t),
+		nest: (e, t) => a.value.nest(e, t),
+		unnest: (e) => a.value.unnest(e),
+		remove: (e) => a.value.remove(e),
+		update: (e, t, n) => a.value.update(e, t, n),
+		convert: (e, t, n, r) => a.value.convert(e, t, n, r),
+		transact: (e) => a.value.transact(e),
+		transactWithoutCapture: (e) => a.value.transactWithoutCapture(e),
+		getBlocksCount: () => a.value.getBlocksCount(),
+		getCurrentBlockIndex: () => a.value.getCurrentBlockIndex(),
+		getBlockByIndex: (e) => a.value.getBlockByIndex(e),
+		getBlockByElement: (e) => a.value.getBlockByElement(e),
+		getBlockData: (e) => a.value.getBlockData(e),
+		getBlockIndex: (e) => a.value.getBlockIndex(e),
+		composeBlockData: (e) => a.value.composeBlockData(e),
+		renderFromHTML: (e) => a.value.renderFromHTML(e),
+		insertOutputData: (e, t) => a.value.insertOutputData(e, t),
+		splitBlock: (e, t, n, r, i) => a.value.splitBlock(e, t, n, r, i),
+		insertInsideParent: (e, t, n) => a.value.insertInsideParent(e, t, n),
+		render: (e) => a.value.render(e),
+		clear: () => a.value.clear(),
+		isSyncingFromYjs: () => a.value.isSyncingFromYjs()
 	};
 }
 //#endregion
 //#region src/useBlokReady.ts
-function le(e = {}) {
+function fe(e = {}) {
 	let { within: t, settleOn: n } = e, r = _(!1), i = () => {
 		var e;
 		let i = t === void 0 || (e = y(t)) == null ? null : e;
@@ -372,7 +374,7 @@ function le(e = {}) {
 }
 //#endregion
 //#region src/BlockPortalHost.ts
-var ue = r({
+var pe = r({
 	name: "BlockErrorBoundary",
 	setup(e, { slots: t }) {
 		return u(() => !1), () => {
@@ -380,7 +382,7 @@ var ue = r({
 			return (e = t.default) == null ? void 0 : e.call(t);
 		};
 	}
-}), de = r({
+}), me = r({
 	name: "BlockPortalHost",
 	props: { registry: {
 		type: Object,
@@ -390,11 +392,11 @@ var ue = r({
 		return () => a(e, Array.from(n.registry.entries.entries()).map(([e, n]) => a(t, {
 			key: e,
 			to: n.hostEl
-		}, [a(ue, null, { default: () => a(n.component, n.props) })])));
+		}, [a(pe, null, { default: () => a(n.component, n.props) })])));
 	}
-}), Q = Symbol("BLOK_EDITOR_INSTANCE"), fe = _(null);
-function pe() {
-	return o(Q, fe);
+}), Q = Symbol("BLOK_EDITOR_INSTANCE"), he = _(null);
+function ge() {
+	return o(Q, he);
 }
 //#endregion
 //#region src/BlokContent.ts
@@ -423,10 +425,10 @@ var $ = r({
 			i(e.editor);
 		}), () => {
 			let n = e.editor, r = n === null ? void 0 : J(v(n));
-			return a("div", { ref: t }, r === void 0 ? [] : [a(de, { registry: r })]);
+			return a("div", { ref: t }, r === void 0 ? [] : [a(me, { registry: r })]);
 		};
 	}
-}), me = /* @__PURE__ */ "autofocus.defaultBlock.dataModel.placeholder.sanitizer.hideToolbar.maxHistoryLength.historyDebounceTime.newGroupDelay.globalUndoRedo.tools.data.minHeight.logLevel.readOnly.i18n.link.linkPaste.inlineToolbar.tunes.style.theme.scrollToBlock.user.resolveUser.notifierPosition.notifier.width.onBeforeRender.onBeforePaste.onEnter.onSubmit.onError.migrations.uploader.captureClicksBelowEditor".split("."), he = r({
+}), _e = /* @__PURE__ */ "autofocus.defaultBlock.dataModel.placeholder.sanitizer.hideToolbar.maxHistoryLength.historyDebounceTime.newGroupDelay.globalUndoRedo.tools.data.minHeight.logLevel.readOnly.i18n.link.linkPaste.inlineToolbar.tunes.style.theme.scrollToBlock.user.resolveUser.notifierPosition.notifier.width.onBeforeRender.onBeforePaste.onEnter.onSubmit.onError.migrations.uploader.captureClicksBelowEditor".split("."), ve = r({
 	name: "BlokEditor",
 	inheritAttrs: !1,
 	props: {
@@ -596,7 +598,7 @@ var $ = r({
 		});
 		let u = (e) => l.value.split("|").includes(e), d = () => {
 			let n = {};
-			for (let t of me) {
+			for (let t of _e) {
 				let r = e[t];
 				r !== void 0 && (n[t] = r);
 			}
@@ -645,50 +647,28 @@ var $ = r({
 				let t = f.value;
 				if (t !== null) return t.render(e).then(() => {
 					var n;
-					(n = re(t)) == null || n.markRendered(e);
+					(n = j(t)) == null || n.markRendered(e);
 				});
 			}
-		}), () => a($, z({ editor: f.value }, o));
+		}), () => a($, B({ editor: f.value }, o));
 	}
-}), ge = [
+}), ye = [
 	"toolbox",
 	"isReadOnlySupported",
 	"__isBlokVueBlock"
-], _e = /* @__PURE__ */ new Set([
+], be = /* @__PURE__ */ new Set([
 	void 0,
 	"user",
 	"api",
 	"convert"
-]), ve = (e, t, n) => {
-	let r = /* @__PURE__ */ new Map();
-	t.forEach((e, t) => {
-		var i;
-		let a = [];
-		for (let [r, o] of Object.entries((i = n == null ? void 0 : n(e, t)) == null ? {} : i)) {
-			if (o == null) {
-				e.holder.removeAttribute(r);
-				continue;
-			}
-			e.holder.setAttribute(r, String(o)), a.push(r);
-		}
-		r.set(e.id, {
-			holder: e.holder,
-			names: a
-		});
-	});
-	for (let [t, n] of e) {
-		let e = r.get(t);
-		n.names.filter((t) => e === void 0 || !e.names.includes(t)).forEach((e) => n.holder.removeAttribute(e));
-	}
-	e.clear(), r.forEach((t, n) => e.set(n, t));
-}, ye = (e, t, n) => {
+]), xe = (e, t, n) => {
 	var r;
 	e == null || (r = e.events) == null || r.emit(ee, {
 		blockId: t,
 		childIds: n.map((e) => e.id)
 	});
 };
-function be(e) {
+function Se(e) {
 	var t, n;
 	let i = () => r({
 		name: `VueBlock(${e.type})`,
@@ -717,7 +697,10 @@ function be(e) {
 		}
 		constructor(t) {
 			var n, o, s;
-			this.wrappedComponent = i(), this.mountSignalled = !1, this.hostEl = null, this.pendingDispatch = !1, this.notifyMounted = () => {
+			this.wrappedComponent = i(), this.mountSignalled = !1, this.hostEl = null, this.pendingDispatch = !1, this.anchorEl = null, this.toolbarAnchorRef = (e) => {
+				let t = e === null || e instanceof Element ? e : e.$el;
+				this.anchorEl = t instanceof HTMLElement ? t : null;
+			}, this.notifyMounted = () => {
 				var t;
 				if (this.mountSignalled) return;
 				this.mountSignalled = !0;
@@ -725,37 +708,46 @@ function be(e) {
 					origin: this.origin,
 					api: this.api
 				};
-				if ((t = e.onMounted) == null || t.call(e, this.blockApi, n), _e.has(this.origin)) {
+				if ((t = e.onMounted) == null || t.call(e, this.blockApi, n), be.has(this.origin)) {
 					var r;
 					(r = e.onCreated) == null || r.call(e, this.blockApi, n);
 				}
 			}, this.commit = (t) => {
-				let n = E(e.propSchema, z(z({}, this.mirror), t));
-				T(n, this.mirror) || (this.mirror = n, this.lastRendered = n, this.dataRef.value = n, this.flushDispatch());
+				let n = O(e.propSchema, B(B({}, this.mirror), t));
+				D(n, this.mirror) || (this.mirror = n, this.lastRendered = n, this.dataRef.value = n, this.flushDispatch());
 			}, this.blockApi = t.block;
 			let c = (n = t.config) == null ? {} : n;
-			this.registry = c[W], this.api = t.api;
+			this.registry = c[G], this.api = t.api;
 			let l = t.api;
 			this.pointerDrag = () => {
 				var e;
 				return (l == null || (e = l.blocks) == null ? void 0 : e.isPointerDragActive) === !0;
-			}, this.mirror = E(e.propSchema, v((o = t.data) == null ? {} : o)), this.lastRendered = this.mirror, this.dataRef = _(this.mirror), this.readOnlyRef = _(t.readOnly), this.origin = (s = t.origin) == null ? "api" : s;
+			}, this.mirror = O(e.propSchema, v((o = t.data) == null ? {} : o)), this.lastRendered = this.mirror, this.dataRef = _(this.mirror), this.readOnlyRef = _(t.readOnly), this.origin = (s = t.origin) == null ? "api" : s;
 			let u = this.blockApi, f = this.api;
 			this.childrenComponent = r({
 				name: `VueBlockChildren(${e.type})`,
-				props: { childAttributes: {
-					type: Function,
-					default: void 0
-				} },
+				props: {
+					childAttributes: {
+						type: Function,
+						default: void 0
+					},
+					childContentAttributes: {
+						type: Function,
+						default: void 0
+					}
+				},
 				setup(e) {
-					let t = g(null), n = /* @__PURE__ */ new Map(), r = () => {
+					let t = g(null), n = E(), r = () => {
 						if (t.value === null) return;
 						let r = u.getChildren();
-						D(t.value, r), ve(n, r, e.childAttributes), ye(f, u.id, r);
+						re(t.value, r), C(n, r, {
+							childAttributes: e.childAttributes,
+							childContentAttributes: e.childContentAttributes
+						}), xe(f, u.id, r);
 					};
 					return d(r), p(r), () => a("div", {
 						ref: t,
-						[S.nestedBlocks]: ""
+						[te.nestedBlocks]: ""
 					});
 				}
 			});
@@ -770,7 +762,8 @@ function be(e) {
 				block: this.blockApi,
 				api: this.api,
 				readOnly: this.readOnlyRef,
-				BlockChildren: this.childrenComponent
+				BlockChildren: this.childrenComponent,
+				toolbarAnchorRef: this.toolbarAnchorRef
 			};
 			return (e = this.registry) == null || e.register(this.blockApi.id, {
 				hostEl: t,
@@ -790,16 +783,18 @@ function be(e) {
 		}
 		async setData(t) {
 			var n = this;
-			let r = E(e.propSchema, v(t == null ? {} : t));
-			return T(r, n.lastRendered) ? !0 : (n.mirror = r, n.lastRendered = r, n.dataRef.value = r, await c(), !0);
+			let r = O(e.propSchema, v(t == null ? {} : t));
+			return D(r, n.lastRendered) ? !0 : (n.mirror = r, n.lastRendered = r, n.dataRef.value = r, await c(), !0);
 		}
 		setReadOnly(e) {
 			this.readOnlyRef.value = e;
 		}
 		getToolbarAnchorElement() {
 			var t;
-			let n = this.hostEl;
-			if (!(n === null || e.getToolbarAnchorElement === void 0)) return (t = e.getToolbarAnchorElement(n, this.blockApi)) == null ? void 0 : t;
+			let n = this.anchorEl;
+			if (n !== null && n.isConnected) return n;
+			let r = this.hostEl;
+			if (!(r === null || e.getToolbarAnchorElement === void 0)) return (t = e.getToolbarAnchorElement(r, this.blockApi)) == null ? void 0 : t;
 		}
 		moved() {
 			var t;
@@ -830,7 +825,7 @@ function be(e) {
 			requestAnimationFrame(e);
 		}
 	}, t.__isBlokVueBlock = !0, t);
-	for (let [t, r] of Object.entries((n = e.statics) == null ? {} : n)) ge.includes(t) || Object.defineProperty(o, t, {
+	for (let [t, r] of Object.entries((n = e.statics) == null ? {} : n)) ye.includes(t) || Object.defineProperty(o, t, {
 		value: r,
 		writable: !0,
 		enumerable: !0,
@@ -839,4 +834,4 @@ function be(e) {
 	return o;
 }
 //#endregion
-export { B as BLOK_DEFAULT_CONFIG, Q as BLOK_EDITOR_INSTANCE, $ as BlokContent, he as BlokEditor, be as createVueBlock, V as provideBlok, ce as useBlocks, X as useBlok, H as useBlokDefaults, pe as useBlokInstance, le as useBlokReady };
+export { V as BLOK_DEFAULT_CONFIG, Q as BLOK_EDITOR_INSTANCE, $ as BlokContent, ve as BlokEditor, Se as createVueBlock, H as provideBlok, de as useBlocks, X as useBlok, U as useBlokDefaults, ge as useBlokInstance, fe as useBlokReady };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloklabs/vue",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "Vue block editor — official Vue 3 bindings for Blok, the headless Notion-like rich text editor. Composables and components that render blocks and save to JSON.",
   "license": "Apache-2.0",
   "author": "JackUait",
@@ -54,7 +54,7 @@
     "build": "yarn run -T vite build --mode production"
   },
   "peerDependencies": {
-    "@bloklabs/core": "^1.8.0",
+    "@bloklabs/core": "^1.10.0",
     "vue": "^3.5.0"
   }
 }

package/src/createVueBlock.ts

@@ -9,6 +9,7 @@ import {
   shallowRef,
   toRaw,
   type Component,
+  type ComponentPublicInstance,
   type PropType,
   type ShallowRef,
   type VNodeChild,
@@ -23,7 +24,14 @@ import type {
   BlockToolData,
   ToolboxConfig,
 } from '@/types/tools';
-import { BlockChildrenMounted, DATA_ATTR , deepEqual , mountChildBlocks } from '@bloklabs/core/adapters';
+import {
+  applyChildDecoration,
+  BlockChildrenMounted,
+  createChildDecorationLedger,
+  DATA_ATTR,
+  deepEqual,
+  mountChildBlocks,
+} from '@bloklabs/core/adapters';
 import { fillDefaults, type PropSchema } from '@bloklabs/core/adapters';
 
 import {
@@ -80,55 +88,6 @@ export type ChildAttributes = Record<string, string | number | boolean | null |
 /** The `BlockChildren` per-child decorator (see {@link VueBlockRenderProps.BlockChildren}). */
 export type ChildAttributesFn = (child: BlockAPI, index: number) => ChildAttributes;
 
-/** What the previous decoration pass wrote for one child, so it can be undone. */
-interface StampedChild {
-  holder: HTMLElement;
-  names: string[];
-}
-
-/**
- * Apply one pass of per-child holder attributes and clear the previous pass's
- * leftovers — including on a child that has since left the container, which
- * would otherwise keep a dead index forever.
- * @param stamped - the slot's ledger of what the last pass wrote (mutated)
- * @param children - the container's model children, in model order
- * @param decorate - the authored per-child decorator, if any
- */
-const applyChildAttributes = (
-  stamped: Map<string, StampedChild>,
-  children: BlockAPI[],
-  decorate: ChildAttributesFn | undefined
-): void => {
-  const next = new Map<string, StampedChild>();
-
-  children.forEach((child, index) => {
-    const names: string[] = [];
-
-    for (const [name, value] of Object.entries(decorate?.(child, index) ?? {})) {
-      if (value === null || value === undefined) {
-        child.holder.removeAttribute(name);
-        continue;
-      }
-
-      child.holder.setAttribute(name, String(value));
-      names.push(name);
-    }
-
-    next.set(child.id, { holder: child.holder, names });
-  });
-
-  for (const [id, previous] of stamped) {
-    const current = next.get(id);
-
-    previous.names
-      .filter(name => current === undefined || !current.names.includes(name))
-      .forEach(name => previous.holder.removeAttribute(name));
-  }
-
-  stamped.clear();
-  next.forEach((entry, id) => stamped.set(id, entry));
-};
-
 /**
  * Announce that a container's child holders have settled in its slot — the
  * signal a host waits on before putting the caret into a freshly inserted
@@ -187,6 +146,17 @@ export interface VueBlockRenderProps<Data> {
    * by identity), so decoration is attributes, never wrapper elements. Attributes
    * the callback stops producing are removed on the next pass.
    *
+   * A second prop, `childContentAttributes`, is the same decoration applied one
+   * level IN — on each child's `[data-blok-element-content]` wrapper instead of
+   * its holder. Core's decoration law blesses both, and a container needs both:
+   * the holder is the child's outer box (rails, indices, hover states), the
+   * content wrapper is where the child's own text box begins, which is what a
+   * numbered rail or a connector line has to align to. Reach for it instead of
+   * walking core's wrapper chain from a holder hook (`[data-step] >
+   * [data-blok-element-content] > …`) — those selectors encode engine DOM in host
+   * CSS and break when that structure changes. A child whose DOM has not
+   * committed yet has no wrapper to write to and is stamped on the next pass.
+   *
    * Writing on a child's holder is inert by design: core's mutation filter drops
    * a holder-targeted attribute record for the child block and suppresses it for
    * the container. The guarantee stops at the holder and its
@@ -194,6 +164,27 @@ export interface VueBlockRenderProps<Data> {
    * root DOES score as that child's edit.
    */
   BlockChildren: Component;
+  /**
+   * Attach this to the element the +/drag toolbar should vertically center on:
+   * `h('div', { ref: ctx.toolbarAnchorRef })`, or `:ref="ctx.toolbarAnchorRef"`
+   * in a template. The Vue-native way to answer core's
+   * `getToolbarAnchorElement`, which is otherwise a `(host, block) => Element`
+   * hook resolved OUTSIDE the render tree — so pointing at an element you render
+   * meant inventing a data attribute and `querySelector`-ing for it from
+   * {@link CreateVueBlockSpec.getToolbarAnchorElement}.
+   *
+   * A container block whose own chrome is not editable needs an anchor: with
+   * none, core centers the toolbar on the first `[contenteditable]` under the
+   * host, which for a container is its FIRST CHILD BLOCK — parking the +/drag
+   * handles halfway down, beside content that has a toolbar of its own.
+   *
+   * The ref is stable across renders and outranks
+   * {@link CreateVueBlockSpec.getToolbarAnchorElement} while it holds a MOUNTED
+   * element; when the element unmounts (Vue calls the ref with null, or it is
+   * detached) the declared hook takes over again, so the toolbar is never
+   * positioned against a stale node. Leave it unattached to keep core's default.
+   */
+  toolbarAnchorRef: (element: Element | ComponentPublicInstance | null) => void;
 }
 
 /**
@@ -421,6 +412,25 @@ export function createVueBlock<Data = BlockToolData>(
     private hostEl: HTMLElement | null = null;
     /** Latest patch queued while a pointer drag suppresses dispatchChange. */
     private pendingDispatch = false;
+    /** Element the block pointed `toolbarAnchorRef` at, if any. */
+    private anchorEl: HTMLElement | null = null;
+    /**
+     * The `toolbarAnchorRef` context member. A bound field so its identity is
+     * STABLE across renders — a fresh function ref each render would make Vue
+     * detach (null) and re-attach it on every patch.
+     * @param element - what Vue attached: an element, a component instance, or
+     *   null on detach
+     */
+    private readonly toolbarAnchorRef = (
+      element: Element | ComponentPublicInstance | null
+    ): void => {
+      // A ref placed on a child COMPONENT hands over its instance, not its DOM.
+      const resolved = element === null || element instanceof Element
+        ? element
+        : (element.$el as unknown);
+
+      this.anchorEl = resolved instanceof HTMLElement ? resolved : null;
+    };
 
     public constructor(options: BlockToolConstructorOptions) {
       this.blockApi = options.block;
@@ -457,11 +467,15 @@ export function createVueBlock<Data = BlockToolData>(
             type: Function as PropType<ChildAttributesFn>,
             default: undefined,
           },
+          childContentAttributes: {
+            type: Function as PropType<ChildAttributesFn>,
+            default: undefined,
+          },
         },
         setup(props) {
           const slot = ref<HTMLElement | null>(null);
           // What the last decoration pass wrote, so a dropped key is cleaned up.
-          const stamped = new Map<string, StampedChild>();
+          const ledger = createChildDecorationLedger();
           const mountKids = (): void => {
             if (slot.value === null) {
               return;
@@ -470,7 +484,10 @@ export function createVueBlock<Data = BlockToolData>(
             const children = blockApi.getChildren();
 
             mountChildBlocks(slot.value, children);
-            applyChildAttributes(stamped, children, props.childAttributes);
+            applyChildDecoration(ledger, children, {
+              childAttributes: props.childAttributes,
+              childContentAttributes: props.childContentAttributes,
+            });
             emitChildrenMounted(api, blockApi.id, children);
           };
 
@@ -498,6 +515,7 @@ export function createVueBlock<Data = BlockToolData>(
         api: this.api,
         readOnly: this.readOnlyRef,
         BlockChildren: this.childrenComponent,
+        toolbarAnchorRef: this.toolbarAnchorRef,
       };
 
       this.registry?.register(this.blockApi.id, {
@@ -584,6 +602,19 @@ export function createVueBlock<Data = BlockToolData>(
      * default positioning already assumes.
      */
     public getToolbarAnchorElement(): HTMLElement | undefined {
+      /**
+       * A ref the block attached wins — it names the exact element, chosen from
+       * inside the render tree. `isConnected` is the guard that matters: Vue
+       * nulls the ref on unmount, but a block that re-parents its anchor can
+       * leave a detached node here, and positioning the toolbar against one
+       * silently parks it at 0,0.
+       */
+      const fromRef = this.anchorEl;
+
+      if (fromRef !== null && fromRef.isConnected) {
+        return fromRef;
+      }
+
       const host = this.hostEl;
 
       if (host === null || spec.getToolbarAnchorElement === undefined) {

package/src/index.ts

@@ -1,5 +1,6 @@
 export { useBlok } from './useBlok';
 export { useBlocks } from './useBlocks';
+export type { UseBlocksOptions } from './useBlocks';
 export { useBlokReady } from './useBlokReady';
 export { BlokContent } from './BlokContent';
 export { BlokEditor } from './BlokEditor';

package/src/useBlocks.ts

@@ -9,12 +9,35 @@ import {
 } from 'vue';
 
 import type { Blok } from '@/types';
-import { createBlocksApiForEditor, EMPTY_API } from '@bloklabs/core/adapters';
+import { changeTouchesSubtree, createBlocksApiForEditor, EMPTY_API } from '@bloklabs/core/adapters';
 
 import type { UseBlocksApi } from './blocks-snapshot';
 
 const BLOCK_CHANGED_EVENT = 'block changed';
 
+/** Options for {@link useBlocks}. */
+export interface UseBlocksOptions {
+  /**
+   * Re-render only for changes inside the subtree rooted at this block id (the
+   * block itself or any descendant). Omit — or pass `null` — for the
+   * document-wide default.
+   *
+   * This bounds REACTIVITY, not reads: the returned API still sees the whole
+   * tree, so a scoped consumer can still `getById` anything. Reach for it in a
+   * container block that renders only its own children — unscoped, such a block
+   * invalidates on every keystroke anywhere in the document, and a page of N
+   * containers turns one keystroke into N re-renders.
+   *
+   * Accepted as a value, ref or getter (like `editor`) and read at EMIT time, so
+   * changing it takes effect immediately with no re-subscription.
+   *
+   * A change whose block cannot be placed in the tree (a removal that emits
+   * after the block is gone) counts as in-scope: skipping it would leave a
+   * container rendering a child that no longer exists.
+   */
+  within?: MaybeRefOrGetter<string | null>;
+}
+
 /**
  * Vue composable exposing an id/parentId-relative, reactive view of the block
  * tree. Reads refresh whenever the editor emits `block changed`; mutators route
@@ -43,8 +66,13 @@ const BLOCK_CHANGED_EVENT = 'block changed';
  * `transact`/`transactWithoutCapture`, which still run their callback.
  *
  * @param editor - the Blok instance (or ref/getter of it), or null pre-ready
+ * @param options - reactivity options; see {@link UseBlocksOptions.within} to
+ *   scope invalidation to one block's subtree
  */
-export function useBlocks(editor: MaybeRefOrGetter<Blok | null>): UseBlocksApi {
+export function useBlocks(
+  editor: MaybeRefOrGetter<Blok | null>,
+  options: UseBlocksOptions = {}
+): UseBlocksApi {
   // Bumped on every `block changed`; the shared API's read methods touch it
   // (via the onRead seam below) so template/computed reads stay reactive.
   const version = shallowRef(0);
@@ -68,7 +96,7 @@ export function useBlocks(editor: MaybeRefOrGetter<Blok | null>): UseBlocksApi {
 
   // Manage the `block changed` subscription, re-binding when the editor changes.
   // Held in one object (no `let` reassignment) — the same pattern useBlok uses.
-  const sub: { editor: Blok | null; handler: (() => void) | null } = { editor: null, handler: null };
+  const sub: { editor: Blok | null; handler: ((payload?: unknown) => void) | null } = { editor: null, handler: null };
 
   const unsubscribe = (): void => {
     if (sub.editor !== null && sub.handler !== null) {
@@ -91,7 +119,14 @@ export function useBlocks(editor: MaybeRefOrGetter<Blok | null>): UseBlocksApi {
         return;
       }
 
-      const handler = (): void => {
+      const handler = (payload?: unknown): void => {
+        // Resolved per emission, so a reactive `within` needs no re-subscription.
+        const within = toValue(options.within) ?? null;
+
+        if (within !== null && !changeTouchesSubtree(ed, payload, within)) {
+          return;
+        }
+
         version.value += 1;
       };
 

package/types/index.d.ts

@@ -1,4 +1,4 @@
-import type { Component, DefineComponent, InjectionKey, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';
+import type { Component, ComponentPublicInstance, DefineComponent, InjectionKey, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';
 import type {
   API,
   Blok,
@@ -467,6 +467,7 @@ export interface UseBlocksApi {
  * block" tree, manipulated without flat-index math. Mirrors React's `useBlocks`.
  *
  * @param editor - the Blok instance (value/ref/getter), or null before ready
+ * @param options - reactivity options; see {@link UseBlocksOptions.within}
  *
  * @example
  * ```ts
@@ -478,7 +479,39 @@ export interface UseBlocksApi {
  * });
  * ```
  */
-export declare function useBlocks(editor: MaybeRefOrGetter<Blok | null>): UseBlocksApi;
+export declare function useBlocks(
+  editor: MaybeRefOrGetter<Blok | null>,
+  options?: UseBlocksOptions
+): UseBlocksApi;
+
+/** Options for {@link useBlocks}. */
+export interface UseBlocksOptions {
+  /**
+   * Invalidate reads only for changes inside the subtree rooted at this block id
+   * (the block itself or any descendant). Omit — or pass `null` — for the
+   * document-wide default.
+   *
+   * This bounds REACTIVITY, not reads: the returned API still sees the whole
+   * tree, so a scoped consumer can still `getById` anything. Reach for it in a
+   * container block that renders only its own children — unscoped, such a block
+   * invalidates on every keystroke anywhere in the document, and a page of N
+   * containers turns one keystroke into N re-renders.
+   *
+   * Accepted as a value, ref or getter (like `editor`) and read at EMIT time, so
+   * changing it takes effect immediately with no re-subscription.
+   *
+   * A change whose block cannot be placed in the tree (a removal that emits
+   * after the block is gone) counts as in-scope: skipping it would leave a
+   * container rendering a child that no longer exists.
+   *
+   * @example
+   * ```ts
+   * // A container block invalidating only for its own subtree.
+   * const blocks = useBlocks(useBlokInstance(), { within: () => block.id });
+   * ```
+   */
+  within?: MaybeRefOrGetter<string | null>;
+}
 
 /** Options accepted by {@link useBlokReady}. */
 export interface UseBlokReadyOptions {
@@ -578,8 +611,40 @@ export interface VueBlockRenderProps<Data> {
    * each child's HOLDER after mounting (named hooks instead of positional
    * `:nth-child()` CSS). Holders stay DIRECT children of the slot; attributes
    * the callback stops producing are removed on the next pass.
+   *
+   * A second prop, `childContentAttributes: ChildAttributesFn`, is the same
+   * decoration applied one level IN — on each child's
+   * `[data-blok-element-content]` wrapper instead of its holder. Blok's
+   * decoration law blesses both, and a container needs both: the holder is the
+   * child's outer box (rails, indices, hover states), the content wrapper is
+   * where the child's own text box begins, which is what a numbered rail or a
+   * connector line has to align to. Reach for it instead of walking Blok's
+   * wrapper chain from a holder hook (`[data-step] >
+   * [data-blok-element-content] > …`) — those selectors encode engine DOM in host
+   * CSS and break when that structure changes. A child whose DOM has not
+   * committed yet is stamped on the next pass.
    */
   BlockChildren: Component;
+  /**
+   * Attach this to the element the +/drag toolbar should vertically center on:
+   * `h('div', { ref: ctx.toolbarAnchorRef })`. The Vue-native way to answer
+   * core's `getToolbarAnchorElement`, which is otherwise a
+   * `(host, block) => Element` hook resolved OUTSIDE the render tree — so
+   * pointing at an element you render meant inventing a data attribute and
+   * `querySelector`-ing for it.
+   *
+   * A container block whose own chrome is not editable needs an anchor: with
+   * none, core centers the toolbar on the first `[contenteditable]` under the
+   * host, which for a container is its FIRST CHILD BLOCK — parking the +/drag
+   * handles halfway down, beside content that has a toolbar of its own.
+   *
+   * The ref is stable across renders and outranks the spec's
+   * `getToolbarAnchorElement` while it holds a MOUNTED element; once the element
+   * unmounts or detaches, the declared hook takes over again, so the toolbar is
+   * never positioned against a stale node. A ref placed on a child COMPONENT is
+   * resolved through its `$el`. Leave it unattached to keep core's default.
+   */
+  toolbarAnchorRef: (element: Element | ComponentPublicInstance | null) => void;
 }
 
 /** Spec for {@link createVueBlock}. Authored as a `.ts` render function (no SFC). */