@bloklabs/vue 1.3.0 → 1.4.0

package/README.md

@@ -0,0 +1,67 @@
+# @bloklabs/vue
+
+The Vue 3 block editor bindings for [Blok](https://blokeditor.com) — a headless, Notion-like rich text editor whose content is JSON blocks, not HTML.
+
+## Install
+
+```bash
+npm install @bloklabs/vue @bloklabs/core
+```
+
+`@bloklabs/core` and `vue` are peer dependencies.
+
+## Usage
+
+`<BlokEditor>` is the all-in-one component: it mounts the editor, manages its lifecycle, and takes every editor config option as a prop.
+
+```vue
+<script setup lang="ts">
+import { BlokEditor } from '@bloklabs/vue';
+import { Header, Paragraph, List } from '@bloklabs/core/tools';
+
+const tools = {
+  paragraph: Paragraph,
+  header: { class: Header, placeholder: 'Enter a heading' },
+  list: List,
+};
+</script>
+
+<template>
+  <BlokEditor :tools="tools" />
+</template>
+```
+
+## Saving
+
+The `save` emit fires with the latest content on every change, so you never have to call `save()` by hand.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { BlokEditor } from '@bloklabs/vue';
+import type { OutputData } from '@bloklabs/core';
+
+const data = ref<OutputData>();
+</script>
+
+<template>
+  <BlokEditor @save="(d: OutputData) => (data = d)" />
+  <pre>{{ data?.blocks }}</pre>
+</template>
+```
+
+## Also exported
+
+- `useBlok(config, recreateKey?)` — the composable behind the component, returns a `Ref<Blok | null>`.
+- `BlokContent` — the mount-point element, if you want to wire the composable yourself.
+- `useBlocks(editor)` — a reactive snapshot of the block tree plus a manipulation API.
+- `createVueBlock` — author block tools as Vue components.
+- `provideBlok` / `useBlokDefaults` — share default editor config through provide/inject.
+
+## Docs
+
+- [Quick start](https://blokeditor.com/docs/quick-start?framework=vue)
+- [`BlokEditor` reference](https://blokeditor.com/docs/blok-editor?framework=vue)
+- [`useBlocks` reference](https://blokeditor.com/docs/use-blocks?framework=vue)
+
+Licensed under Apache-2.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)}function s(e){"@babel/helpers - typeof";return s=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},s(e)}function c(e,t){if(s(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(s(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function l(e){var t=c(e,`string`);return s(t)==`symbol`?t:t+``}function u(e,t,n){return(t=l(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function d(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 f(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?d(Object(n),!0).forEach(function(t){u(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):d(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}var p=Symbol(`BLOK_DEFAULT_CONFIG`);function m(t){(0,e.provide)(p,t)}function h(){return(0,e.inject)(p,{})}function g(e,t){if(Object.keys(e).length===0)return t;let n=f({},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=f(f({},e.tools),t.tools)),n}var _=`__blokPortalRegistry`,v=()=>{let t=(0,e.reactive)(new Map);return{entries:t,register(n,r){t.set(n,(0,e.markRaw)(r))},unregister(e){t.delete(e)},setProps(e,n){let r=t.get(e);r!==void 0&&Object.assign(r.props,n)}}},y=new WeakMap;function b(e,t){y.set(e,t)}function x(e){return y.get(e)}function S(e){y.delete(e)}var C=(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}:f({},a);o.config=f(f({},(r=o.config)==null?{}:r),{},{[_]:t}),n[i]=o}return n};function w(r,a){let s=(0,e.shallowRef)(null),c=(0,e.inject)(p,{}),l=()=>g(c,(0,e.toValue)(r)),u={current:null,holder:null,lastRenderedData:l().data,seededEditor:null,renderChain:Promise.resolve()},d=()=>{let t=f({},g((0,e.toRaw)(c),(0,e.toRaw)((0,e.toValue)(r))));return delete t.holder,t.data!==void 0&&(t.data=(0,e.toRaw)(t.data)),t},m=()=>{if(u.current!==null){o(u.current),S(u.current);try{u.current.destroy()}catch(e){}}u.current=null,u.holder=null,s.value=null},h=()=>{let e=document.createElement(`div`);u.holder=e;let n=d(),r=v();n.tools!==void 0&&(n.tools=C(n.tools,r)),typeof n.onSave==`function`&&(n.onSave=(...e)=>{var t,n;u.lastRenderedData=e[0],(t=(n=l()).onSave)==null||t.call(n,...e)});let a=new t.Blok(f(f({},n),{},{holder:e}));u.current=a,i(a,e),b(a,r),a.isReady.then(()=>{u.current===a&&(s.value=a)}).catch(()=>{u.current===a&&m()})};(0,e.watch)([s,()=>(0,n.normalizeReadOnlyConfig)(l().readOnly).enabled],([e,t])=>{e&&e.readOnly.set(t)},{immediate:!0}),(0,e.watch)([s,()=>l().theme],([e,t])=>{e&&t!==void 0&&e.theme.set(t)},{immediate:!0}),(0,e.watch)([s,()=>l().width],([e,t])=>{e&&t!==void 0&&e.width.set(t)},{immediate:!0}),(0,e.watch)([s,()=>l().placeholder],([e,t])=>{e&&t!==void 0&&e.placeholder.set(t)},{immediate:!0});let _={value:void 0};return(0,e.watch)([s,()=>{var e;return(e=l().style)==null?void 0:e.tokens}],([e,t])=>{!e||t===void 0||(0,n.deepEqual)(t,_.value)||(_.value=f({},t),e.tokens.set(t))},{immediate:!0,deep:!0}),(0,e.watch)([s,()=>l().autofocus],([e,t])=>{e&&t&&e.focus()},{immediate:!0}),(0,e.watch)([s,()=>l().data],([t,r])=>{if(!(!t||r===void 0)){if(u.seededEditor!==t){u.seededEditor=t,u.lastRenderedData=r;return}(0,n.deepEqual)(r,u.lastRenderedData)||(u.lastRenderedData=r,u.renderChain=u.renderChain.catch(()=>void 0).then(()=>t.render((0,e.toRaw)(r))))}},{immediate:!0}),a!==void 0&&(0,e.watch)(()=>(0,e.toValue)(a),()=>{m(),h()}),(0,e.onMounted)(h),(0,e.onBeforeUnmount)(m),s}var T=`block changed`;function E(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(T,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(T,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()}}var D=(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)}}}),O=(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)(D,null,{default:()=>(0,e.h)(n.component,n.props)})])))}}),k=(0,e.defineComponent)({name:`BlokContent`,props:{editor:{type:Object,default:null}},setup(t){let n=(0,e.ref)(null),r=t=>{if(n.value===null||t===null)return;let r=a((0,e.toRaw)(t));r!==void 0&&n.value.appendChild(r)},i=t=>{var n;t!==null&&((n=a((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:x((0,e.toRaw)(r));return(0,e.h)(`div`,{ref:n},i===void 0?[]:[(0,e.h)(O,{registry:i})])}}}),A=`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`.split(`.`),j=(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,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},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 a=(0,e.getCurrentInstance)(),o=e=>{let t=a==null?void 0:a.vnode.props;return t!=null&&e in t},s=()=>{let e={};for(let n of A){let r=t[n];r!==void 0&&(e[n]=r)}return o(`onChange`)&&(e.onChange=(e,t)=>{n(`change`,{api:e,event:t})}),(o(`onSave`)||o(`onUpdate:data`))&&(e.onSave=e=>{n(`update:data`,e),n(`save`,e)}),o(`onAfterRender`)&&(e.onAfterRender=e=>{n(`after-render`,e)}),o(`onThemeChange`)&&(e.onThemeChange=e=>{n(`theme-change`,e)}),e},c=w(()=>s(),()=>t.recreateKey);(0,e.watch)(c,(e,t,r)=>{if(e===null)return;let i=[];if(o(`onBlocksRendered`)){let t=e=>n(`blocks-rendered`,e);e.on(`blocks:rendered`,t),i.push([`blocks:rendered`,t])}if(o(`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 l={last:null};return(0,e.watch)(c,e=>{e!==null&&e!==l.last&&(l.last=e,n(`ready`,e))}),r({instance:(0,e.computed)(()=>c.value),save:()=>{var e;return(e=c.value)==null?void 0:e.save()},focus:e=>{var t;(t=c.value)==null||t.focus(e)},render:e=>{var t;return(t=c.value)==null?void 0:t.render(e)}}),()=>(0,e.h)(k,f({editor:c.value},i))}});function M(t){var r;let i=(0,e.defineComponent)({name:`VueBlock(${t.type})`,props:{ctx:{type:Object,required:!0}},setup(e){return t.setup(e.ctx)}});return r=class{static get toolbox(){return t.toolbox}static get isReadOnlySupported(){return!0}constructor(r){var i,a;this.hostEl=null,this.pendingDispatch=!1,this.commit=e=>{let r=(0,n.fillDefaults)(t.propSchema,f(f({},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 o=(i=r.config)==null?{}:i;this.registry=o[_];let s=r.api;this.pointerDrag=()=>{var e;return(s==null||(e=s.blocks)==null?void 0:e.isPointerDragActive)===!0},this.mirror=(0,n.fillDefaults)(t.propSchema,(0,e.toRaw)((a=r.data)==null?{}:a)),this.lastRendered=this.mirror,this.dataRef=(0,e.shallowRef)(this.mirror),this.readOnlyRef=(0,e.shallowRef)(r.readOnly);let c=this.blockApi;this.childrenComponent=(0,e.defineComponent)({name:`VueBlockChildren(${t.type})`,setup(){let t=(0,e.ref)(null),r=()=>{t.value!==null&&(0,n.mountChildBlocks)(t.value,c.getChildren())};return(0,e.onMounted)(r),(0,e.onUpdated)(r),()=>(0,e.h)(`div`,{ref:t,[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,readOnly:this.readOnlyRef,BlockChildren:this.childrenComponent};return(e=this.registry)==null||e.register(this.blockApi.id,{hostEl:t,component:i,props:{ctx:n}}),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}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)}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}exports.BLOK_DEFAULT_CONFIG=p,exports.BlokContent=k,exports.BlokEditor=j,exports.createVueBlock=M,exports.provideBlok=m,exports.useBlocks=E,exports.useBlok=w,exports.useBlokDefaults=h;
+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)}function s(e){"@babel/helpers - typeof";return s=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},s(e)}function c(e,t){if(s(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(s(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function l(e){var t=c(e,`string`);return s(t)==`symbol`?t:t+``}function u(e,t,n){return(t=l(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function d(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 f(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?d(Object(n),!0).forEach(function(t){u(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):d(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}var p=Symbol(`BLOK_DEFAULT_CONFIG`);function m(t){(0,e.provide)(p,t)}function h(){return(0,e.inject)(p,{})}function g(e,t){if(Object.keys(e).length===0)return t;let n=f({},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=f(f({},e.tools),t.tools)),n}var _=`__blokPortalRegistry`,v=()=>{let t=(0,e.reactive)(new Map);return{entries:t,register(n,r){t.set(n,(0,e.markRaw)(r))},unregister(e){t.delete(e)},setProps(e,n){let r=t.get(e);r!==void 0&&Object.assign(r.props,n)}}},y=new WeakMap;function b(e,t){y.set(e,t)}function x(e){return y.get(e)}function S(e){y.delete(e)}var C=(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}:f({},a);o.config=f(f({},(r=o.config)==null?{}:r),{},{[_]:t}),n[i]=o}return n};function w(r,a){let s=(0,e.shallowRef)(null),c=(0,e.inject)(p,{}),l=()=>g(c,(0,e.toValue)(r)),u={current:null,holder:null,lastRenderedData:l().data,seededEditor:null,renderChain:Promise.resolve()},d=()=>{let t=f({},g((0,e.toRaw)(c),(0,e.toRaw)((0,e.toValue)(r))));return delete t.holder,t.data!==void 0&&(t.data=(0,e.toRaw)(t.data)),t},m=()=>{if(u.current!==null){o(u.current),S(u.current);try{u.current.destroy()}catch(e){}}u.current=null,u.holder=null,s.value=null},h=()=>{let e=document.createElement(`div`);u.holder=e;let n=d(),r=v();n.tools!==void 0&&(n.tools=C(n.tools,r)),typeof n.onSave==`function`&&(n.onSave=(...e)=>{var t,n;u.lastRenderedData=e[0],(t=(n=l()).onSave)==null||t.call(n,...e)});let a=new t.Blok(f(f({},n),{},{holder:e}));u.current=a,i(a,e),b(a,r),a.isReady.then(()=>{u.current===a&&(s.value=a)}).catch(()=>{u.current===a&&m()})};(0,e.watch)([s,()=>(0,n.normalizeReadOnlyConfig)(l().readOnly).enabled,()=>(0,n.normalizeReadOnlyConfig)(l().readOnly).hideControls,()=>typeof l().readOnly==`object`],([e,t,n,r])=>{e&&(r?e.readOnly.set(t,{hideControls:n}):e.readOnly.set(t))},{immediate:!0}),(0,e.watch)([s,()=>l().hideToolbar],([e,t])=>{e&&e.toolbar.setHidden(!!t)},{immediate:!0}),(0,e.watch)([s,()=>l().theme],([e,t])=>{e&&t!==void 0&&e.theme.set(t)},{immediate:!0}),(0,e.watch)([s,()=>l().width],([e,t])=>{e&&t!==void 0&&e.width.set(t)},{immediate:!0}),(0,e.watch)([s,()=>l().placeholder],([e,t])=>{e&&t!==void 0&&e.placeholder.set(t)},{immediate:!0});let _={value:void 0};(0,e.watch)([s,()=>{var e;return(e=l().style)==null?void 0:e.tokens}],([e,t])=>{!e||t===void 0||(0,n.deepEqual)(t,_.value)||(_.value=f({},t),e.tokens.set(t))},{immediate:!0,deep:!0});let y={value:l().i18n};(0,e.watch)([s,()=>l().i18n],([e,t])=>{if(!e||t===void 0||(0,n.deepEqual)(t,y.value))return;y.value=f({},t);let{locale:r,messages:i,direction:a}=t;e.i18n.update(f(f(f({},r===void 0?{}:{locale:r}),i===void 0?{}:{messages:i}),a===void 0?{}:{direction:a}))},{immediate:!0,deep:!0});let x={editor:null,value:void 0};return(0,e.watch)([s,()=>l().inlineToolbar],([e,t])=>{if(!e||t===void 0||x.editor===e&&(0,n.deepEqual)(t,x.value))return;let r=Array.isArray(t)?[...t]:t;x.editor=e,x.value=r,e.tools.setInlineToolbar(r)},{immediate:!0,deep:!0}),(0,e.watch)([s,()=>l().autofocus],([e,t])=>{e&&t&&e.focus()},{immediate:!0}),(0,e.watch)([s,()=>l().data],([t,r])=>{if(!(!t||r===void 0)){if(u.seededEditor!==t){u.seededEditor=t,u.lastRenderedData=r;return}(0,n.deepEqual)(r,u.lastRenderedData)||(u.lastRenderedData=r,u.renderChain=u.renderChain.catch(()=>void 0).then(()=>t.render((0,e.toRaw)(r))))}},{immediate:!0}),a!==void 0&&(0,e.watch)(()=>(0,e.toValue)(a),()=>{m(),h()}),(0,e.onMounted)(h),(0,e.onBeforeUnmount)(m),s}var T=`block changed`;function E(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(T,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(T,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 D(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 O=(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)}}}),k=(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)(O,null,{default:()=>(0,e.h)(n.component,n.props)})])))}}),A=(0,e.defineComponent)({name:`BlokContent`,props:{editor:{type:Object,default:null}},setup(t){let n=(0,e.ref)(null),r=t=>{if(n.value===null||t===null)return;let r=a((0,e.toRaw)(t));r!==void 0&&n.value.appendChild(r)},i=t=>{var n;t!==null&&((n=a((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:x((0,e.toRaw)(r));return(0,e.h)(`div`,{ref:n},i===void 0?[]:[(0,e.h)(k,{registry:i})])}}}),j=`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`.split(`.`),M=(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},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 a=(0,e.getCurrentInstance)(),o=e=>{let t=a==null?void 0:a.vnode.props;return t!=null&&e in t},s=()=>{let e={};for(let n of j){let r=t[n];r!==void 0&&(e[n]=r)}return o(`onChange`)&&(e.onChange=(e,t)=>{n(`change`,{api:e,event:t})}),(o(`onSave`)||o(`onUpdate:data`))&&(e.onSave=e=>{n(`update:data`,e),n(`save`,e)}),o(`onAfterRender`)&&(e.onAfterRender=e=>{n(`after-render`,e)}),o(`onThemeChange`)&&(e.onThemeChange=e=>{n(`theme-change`,e)}),e},c=w(()=>s(),()=>t.recreateKey);(0,e.watch)(c,(e,t,r)=>{if(e===null)return;let i=[];if(o(`onBlocksRendered`)){let t=e=>n(`blocks-rendered`,e);e.on(`blocks:rendered`,t),i.push([`blocks:rendered`,t])}if(o(`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 l={last:null};return(0,e.watch)(c,e=>{e!==null&&e!==l.last&&(l.last=e,n(`ready`,e))}),r({instance:(0,e.computed)(()=>c.value),save:()=>{var e;return(e=c.value)==null?void 0:e.save()},focus:e=>{var t;(t=c.value)==null||t.focus(e)},render:e=>{var t;return(t=c.value)==null?void 0:t.render(e)}}),()=>(0,e.h)(A,f({editor:c.value},i))}});function N(t){var r;let i=(0,e.defineComponent)({name:`VueBlock(${t.type})`,props:{ctx:{type:Object,required:!0}},setup(e){return t.setup(e.ctx)}});return r=class{static get toolbox(){return t.toolbox}static get isReadOnlySupported(){return!0}constructor(r){var i,a;this.hostEl=null,this.pendingDispatch=!1,this.commit=e=>{let r=(0,n.fillDefaults)(t.propSchema,f(f({},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 o=(i=r.config)==null?{}:i;this.registry=o[_];let s=r.api;this.pointerDrag=()=>{var e;return(s==null||(e=s.blocks)==null?void 0:e.isPointerDragActive)===!0},this.mirror=(0,n.fillDefaults)(t.propSchema,(0,e.toRaw)((a=r.data)==null?{}:a)),this.lastRendered=this.mirror,this.dataRef=(0,e.shallowRef)(this.mirror),this.readOnlyRef=(0,e.shallowRef)(r.readOnly);let c=this.blockApi;this.childrenComponent=(0,e.defineComponent)({name:`VueBlockChildren(${t.type})`,setup(){let t=(0,e.ref)(null),r=()=>{t.value!==null&&(0,n.mountChildBlocks)(t.value,c.getChildren())};return(0,e.onMounted)(r),(0,e.onUpdated)(r),()=>(0,e.h)(`div`,{ref:t,[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,readOnly:this.readOnlyRef,BlockChildren:this.childrenComponent};return(e=this.registry)==null||e.register(this.blockApi.id,{hostEl:t,component:i,props:{ctx:n}}),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}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)}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}exports.BLOK_DEFAULT_CONFIG=p,exports.BlokContent=A,exports.BlokEditor=M,exports.createVueBlock=N,exports.provideBlok=m,exports.useBlocks=E,exports.useBlok=w,exports.useBlokDefaults=h,exports.useBlokReady=D;

package/dist/index.mjs

@@ -1,49 +1,49 @@
-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 ee, ref as h, shallowRef as g, toRaw as _, toValue as v, watch as y } from "vue";
-import { Blok as b } from "@bloklabs/core";
-import { DATA_ATTR as x, EMPTY_API as S, createBlocksApiForEditor as C, deepEqual as w, fillDefaults as T, mountChildBlocks as E, normalizeReadOnlyConfig as D } from "@bloklabs/core/adapters";
+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 { DATA_ATTR as S, EMPTY_API as C, createBlocksApiForEditor as w, deepEqual as T, fillDefaults as E, mountChildBlocks as D, normalizeReadOnlyConfig as O } from "@bloklabs/core/adapters";
 //#region src/holder-map.ts
-var O = /* @__PURE__ */ new WeakMap();
-function k(e, t) {
-	O.set(e, t);
-}
-function A(e) {
-	return O.get(e);
+var k = /* @__PURE__ */ new WeakMap();
+function A(e, t) {
+	k.set(e, t);
 }
 function j(e) {
-	O.delete(e);
+	return k.get(e);
+}
+function M(e) {
+	k.delete(e);
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.139.0/helpers/esm/typeof.js
-function M(e) {
+function N(e) {
 	"@babel/helpers - typeof";
-	return M = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(e) {
+	return N = 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;
-	}, M(e);
+	}, N(e);
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.139.0/helpers/esm/toPrimitive.js
-function N(e, t) {
-	if (M(e) != "object" || !e) return e;
+function P(e, t) {
+	if (N(e) != "object" || !e) return e;
 	var n = e[Symbol.toPrimitive];
 	if (n !== void 0) {
 		var r = n.call(e, t || "default");
-		if (M(r) != "object") return r;
+		if (N(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 P(e) {
-	var t = N(e, "string");
-	return M(t) == "symbol" ? t : t + "";
+function F(e) {
+	var t = P(e, "string");
+	return N(t) == "symbol" ? t : t + "";
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.139.0/helpers/esm/defineProperty.js
-function F(e, t, n) {
-	return (t = P(t)) in e ? Object.defineProperty(e, t, {
+function I(e, t, n) {
+	return (t = F(t)) in e ? Object.defineProperty(e, t, {
 		value: n,
 		enumerable: !0,
 		configurable: !0,
@@ -52,7 +52,7 @@ function F(e, t, n) {
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.139.0/helpers/esm/objectSpread2.js
-function I(e, t) {
+function L(e, t) {
 	var n = Object.keys(e);
 	if (Object.getOwnPropertySymbols) {
 		var r = Object.getOwnPropertySymbols(e);
@@ -62,12 +62,12 @@ function I(e, t) {
 	}
 	return n;
 }
-function L(e) {
+function R(e) {
 	for (var t = 1; t < arguments.length; t++) {
 		var n = arguments[t] == null ? {} : arguments[t];
-		t % 2 ? I(Object(n), !0).forEach(function(t) {
-			F(e, t, n[t]);
-		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : I(Object(n)).forEach(function(t) {
+		t % 2 ? L(Object(n), !0).forEach(function(t) {
+			I(e, t, n[t]);
+		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : L(Object(n)).forEach(function(t) {
 			Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
 		});
 	}
@@ -75,26 +75,26 @@ function L(e) {
 }
 //#endregion
 //#region src/provide-blok.ts
-var R = Symbol("BLOK_DEFAULT_CONFIG");
-function z(e) {
-	m(R, e);
+var z = Symbol("BLOK_DEFAULT_CONFIG");
+function B(e) {
+	m(z, e);
 }
-function B() {
-	return o(R, {});
+function V() {
+	return o(z, {});
 }
-function V(e, t) {
+function H(e, t) {
 	if (Object.keys(e).length === 0) return t;
-	let n = L({}, e);
+	let n = R({}, 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 = L(L({}, e.tools), t.tools)), n;
+	return (e.tools !== void 0 || t.tools !== void 0) && (n.tools = R(R({}, e.tools), t.tools)), n;
 }
 //#endregion
 //#region src/block-portal-registry.ts
-var H = "__blokPortalRegistry", U = () => {
-	let e = ee(/* @__PURE__ */ new Map());
+var U = "__blokPortalRegistry", W = () => {
+	let e = h(/* @__PURE__ */ new Map());
 	return {
 		entries: e,
 		register(t, n) {
@@ -108,19 +108,19 @@ var H = "__blokPortalRegistry", U = () => {
 			r !== void 0 && Object.assign(r.props, n);
 		}
 	};
-}, W = /* @__PURE__ */ new WeakMap();
-function G(e, t) {
-	W.set(e, t);
-}
-function K(e) {
-	return W.get(e);
+}, G = /* @__PURE__ */ new WeakMap();
+function K(e, t) {
+	G.set(e, t);
 }
 function q(e) {
-	W.delete(e);
+	return G.get(e);
+}
+function J(e) {
+	G.delete(e);
 }
 //#endregion
 //#region src/useBlok.ts
-var J = (e, t) => {
+var Y = (e, t) => {
 	if (typeof e != "object" || !e) return e;
 	let n = {};
 	for (let [i, a] of Object.entries(e)) {
@@ -130,24 +130,24 @@ var J = (e, t) => {
 			n[i] = a;
 			continue;
 		}
-		let o = typeof a == "function" ? { class: a } : L({}, a);
-		o.config = L(L({}, (r = o.config) == null ? {} : r), {}, { [H]: t }), n[i] = o;
+		let o = typeof a == "function" ? { class: a } : R({}, a);
+		o.config = R(R({}, (r = o.config) == null ? {} : r), {}, { [U]: t }), n[i] = o;
 	}
 	return n;
 };
-function Y(e, t) {
-	let n = g(null), r = o(R, {}), i = () => V(r, v(e)), a = {
+function X(e, t) {
+	let n = _(null), r = o(z, {}), i = () => H(r, y(e)), a = {
 		current: null,
 		holder: null,
 		lastRenderedData: i().data,
 		seededEditor: null,
 		renderChain: Promise.resolve()
 	}, s = () => {
-		let t = L({}, V(_(r), _(v(e))));
-		return delete t.holder, t.data !== void 0 && (t.data = _(t.data)), t;
+		let t = R({}, H(v(r), v(y(e))));
+		return delete t.holder, t.data !== void 0 && (t.data = v(t.data)), t;
 	}, c = () => {
 		if (a.current !== null) {
-			j(a.current), q(a.current);
+			M(a.current), J(a.current);
 			try {
 				a.current.destroy();
 			} catch (e) {}
@@ -156,74 +156,103 @@ function Y(e, t) {
 	}, u = () => {
 		let e = document.createElement("div");
 		a.holder = e;
-		let t = s(), r = U();
-		t.tools !== void 0 && (t.tools = J(t.tools, r)), typeof t.onSave == "function" && (t.onSave = (...e) => {
+		let t = s(), r = W();
+		t.tools !== void 0 && (t.tools = Y(t.tools, r)), typeof t.onSave == "function" && (t.onSave = (...e) => {
 			var t, n;
 			a.lastRenderedData = e[0], (t = (n = i()).onSave) == null || t.call(n, ...e);
 		});
-		let o = new b(L(L({}, t), {}, { holder: e }));
-		a.current = o, k(o, e), G(o, r), o.isReady.then(() => {
+		let o = new x(R(R({}, t), {}, { holder: e }));
+		a.current = o, A(o, e), K(o, r), o.isReady.then(() => {
 			a.current === o && (n.value = o);
 		}).catch(() => {
 			a.current === o && c();
 		});
 	};
-	y([n, () => D(i().readOnly).enabled], ([e, t]) => {
-		e && e.readOnly.set(t);
-	}, { immediate: !0 }), y([n, () => i().theme], ([e, t]) => {
+	b([
+		n,
+		() => O(i().readOnly).enabled,
+		() => O(i().readOnly).hideControls,
+		() => typeof i().readOnly == "object"
+	], ([e, t, n, r]) => {
+		e && (r ? e.readOnly.set(t, { hideControls: n }) : e.readOnly.set(t));
+	}, { immediate: !0 }), b([n, () => i().hideToolbar], ([e, t]) => {
+		e && e.toolbar.setHidden(!!t);
+	}, { immediate: !0 }), b([n, () => i().theme], ([e, t]) => {
 		e && t !== void 0 && e.theme.set(t);
-	}, { immediate: !0 }), y([n, () => i().width], ([e, t]) => {
+	}, { immediate: !0 }), b([n, () => i().width], ([e, t]) => {
 		e && t !== void 0 && e.width.set(t);
-	}, { immediate: !0 }), y([n, () => i().placeholder], ([e, t]) => {
+	}, { immediate: !0 }), b([n, () => i().placeholder], ([e, t]) => {
 		e && t !== void 0 && e.placeholder.set(t);
 	}, { immediate: !0 });
 	let f = { value: void 0 };
-	return y([n, () => {
+	b([n, () => {
 		var e;
 		return (e = i().style) == null ? void 0 : e.tokens;
 	}], ([e, t]) => {
-		!e || t === void 0 || w(t, f.value) || (f.value = L({}, t), e.tokens.set(t));
+		!e || t === void 0 || T(t, f.value) || (f.value = R({}, t), e.tokens.set(t));
 	}, {
 		immediate: !0,
 		deep: !0
-	}), y([n, () => i().autofocus], ([e, t]) => {
+	});
+	let p = { value: i().i18n };
+	b([n, () => i().i18n], ([e, t]) => {
+		if (!e || t === void 0 || T(t, p.value)) return;
+		p.value = R({}, t);
+		let { locale: n, messages: r, direction: i } = t;
+		e.i18n.update(R(R(R({}, n === void 0 ? {} : { locale: n }), r === void 0 ? {} : { messages: r }), i === void 0 ? {} : { direction: i }));
+	}, {
+		immediate: !0,
+		deep: !0
+	});
+	let m = {
+		editor: null,
+		value: void 0
+	};
+	return b([n, () => i().inlineToolbar], ([e, t]) => {
+		if (!e || t === void 0 || m.editor === e && T(t, m.value)) return;
+		let n = Array.isArray(t) ? [...t] : t;
+		m.editor = e, m.value = n, e.tools.setInlineToolbar(n);
+	}, {
+		immediate: !0,
+		deep: !0
+	}), b([n, () => i().autofocus], ([e, t]) => {
 		e && t && e.focus();
-	}, { immediate: !0 }), y([n, () => i().data], ([e, t]) => {
+	}, { immediate: !0 }), b([n, () => i().data], ([e, t]) => {
 		if (!(!e || t === void 0)) {
 			if (a.seededEditor !== e) {
 				a.seededEditor = e, a.lastRenderedData = t;
 				return;
 			}
-			w(t, a.lastRenderedData) || (a.lastRenderedData = t, a.renderChain = a.renderChain.catch(() => void 0).then(() => e.render(_(t))));
+			T(t, a.lastRenderedData) || (a.lastRenderedData = t, a.renderChain = a.renderChain.catch(() => void 0).then(() => e.render(v(t))));
 		}
-	}, { immediate: !0 }), t !== void 0 && y(() => v(t), () => {
+	}, { immediate: !0 }), t !== void 0 && b(() => y(t), () => {
 		c(), u();
 	}), d(u), l(c), n;
 }
 //#endregion
 //#region src/useBlocks.ts
-var X = "block changed";
-function Z(e) {
-	let t = g(0), n = () => {
-		let t = v(e);
-		return t === null ? null : _(t);
+var Z = "block changed";
+function Q(e) {
+	let t = _(0), n = () => {
+		let t = y(e);
+		return t === null ? null : v(t);
 	}, r = () => {
 		t.value;
-	}, i = g(S), a = {
+	}, i = _(C), a = {
 		editor: null,
 		handler: null
 	}, o = () => {
-		a.editor !== null && a.handler !== null && a.editor.off(X, a.handler), a.editor = null, a.handler = null;
+		a.editor !== null && a.handler !== null && a.editor.off(Z, a.handler), a.editor = null, a.handler = null;
 	};
-	return y(() => n(), (e) => {
+	return b(() => n(), (e) => {
 		if (o(), t.value += 1, e === null) {
-			i.value = S;
+			i.value = C;
 			return;
 		}
 		let n = () => {
 			t.value += 1;
 		};
-		e.on(X, n), a.editor = e, a.handler = n, i.value = C(e, r);
+		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),
@@ -257,8 +286,21 @@ function Z(e) {
 	};
 }
 //#endregion
+//#region src/useBlokReady.ts
+function ee(e = {}) {
+	let { within: t, settleOn: n } = e, r = _(!1), i = () => {
+		var e;
+		let i = t === void 0 || (e = y(t)) == null ? null : e;
+		r.value = t !== void 0 && i === null ? !1 : x.readyState({
+			within: i,
+			settleOn: n
+		}).ready;
+	};
+	return f(x.subscribeReady(i)), d(i), r;
+}
+//#endregion
 //#region src/BlockPortalHost.ts
-var Q = r({
+var te = r({
 	name: "BlockErrorBoundary",
 	setup(e, { slots: t }) {
 		return u(() => !1), () => {
@@ -266,7 +308,7 @@ var Q = r({
 			return (e = t.default) == null ? void 0 : e.call(t);
 		};
 	}
-}), te = r({
+}), ne = r({
 	name: "BlockPortalHost",
 	props: { registry: {
 		type: Object,
@@ -276,7 +318,7 @@ var Q = r({
 		return () => a(e, Array.from(n.registry.entries.entries()).map(([e, n]) => a(t, {
 			key: e,
 			to: n.hostEl
-		}, [a(Q, null, { default: () => a(n.component, n.props) })])));
+		}, [a(te, null, { default: () => a(n.component, n.props) })])));
 	}
 }), $ = r({
 	name: "BlokContent",
@@ -285,26 +327,26 @@ var Q = r({
 		default: null
 	} },
 	setup(e) {
-		let t = h(null), n = (e) => {
+		let t = g(null), n = (e) => {
 			if (t.value === null || e === null) return;
-			let n = A(_(e));
+			let n = j(v(e));
 			n !== void 0 && t.value.appendChild(n);
 		}, r = (e) => {
 			var t;
-			e !== null && ((t = A(_(e))) == null || t.remove());
+			e !== null && ((t = j(v(e))) == null || t.remove());
 		};
 		return d(() => {
 			n(e.editor);
-		}), y(() => e.editor, (e, t) => {
+		}), b(() => e.editor, (e, t) => {
 			r(t == null ? null : t), n(e);
 		}), l(() => {
 			r(e.editor);
 		}), () => {
-			let n = e.editor, r = n === null ? void 0 : K(_(n));
-			return a("div", { ref: t }, r === void 0 ? [] : [a(te, { registry: r })]);
+			let n = e.editor, r = n === null ? void 0 : q(v(n));
+			return a("div", { ref: t }, r === void 0 ? [] : [a(ne, { registry: r })]);
 		};
 	}
-}), ne = /* @__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".split("."), re = r({
+}), re = /* @__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".split("."), ie = r({
 	name: "BlokEditor",
 	inheritAttrs: !1,
 	props: {
@@ -365,7 +407,7 @@ var Q = r({
 			default: void 0
 		},
 		readOnly: {
-			type: Boolean,
+			type: [Boolean, Object],
 			default: void 0
 		},
 		i18n: {
@@ -450,7 +492,7 @@ var Q = r({
 			return t != null && e in t;
 		}, l = () => {
 			let n = {};
-			for (let t of ne) {
+			for (let t of re) {
 				let r = e[t];
 				r !== void 0 && (n[t] = r);
 			}
@@ -466,8 +508,8 @@ var Q = r({
 			}), c("onThemeChange") && (n.onThemeChange = (e) => {
 				t("theme-change", e);
 			}), n;
-		}, u = Y(() => l(), () => e.recreateKey);
-		y(u, (e, n, r) => {
+		}, u = X(() => l(), () => e.recreateKey);
+		b(u, (e, n, r) => {
 			if (e === null) return;
 			let i = [];
 			if (c("onBlocksRendered")) {
@@ -483,7 +525,7 @@ var Q = r({
 			});
 		});
 		let d = { last: null };
-		return y(u, (e) => {
+		return b(u, (e) => {
 			e !== null && e !== d.last && (d.last = e, t("ready", e));
 		}), r({
 			instance: n(() => u.value),
@@ -499,12 +541,12 @@ var Q = r({
 				var t;
 				return (t = u.value) == null ? void 0 : t.render(e);
 			}
-		}), () => a($, L({ editor: u.value }, o));
+		}), () => a($, R({ editor: u.value }, o));
 	}
 });
 //#endregion
 //#region src/createVueBlock.ts
-function ie(e) {
+function ae(e) {
 	var t;
 	let n = r({
 		name: `VueBlock(${e.type})`,
@@ -526,26 +568,26 @@ function ie(e) {
 		constructor(t) {
 			var n, i;
 			this.hostEl = null, this.pendingDispatch = !1, this.commit = (t) => {
-				let n = T(e.propSchema, L(L({}, this.mirror), t));
-				w(n, this.mirror) || (this.mirror = n, this.lastRendered = n, this.dataRef.value = n, this.flushDispatch());
+				let n = E(e.propSchema, R(R({}, this.mirror), t));
+				T(n, this.mirror) || (this.mirror = n, this.lastRendered = n, this.dataRef.value = n, this.flushDispatch());
 			}, this.blockApi = t.block;
 			let o = (n = t.config) == null ? {} : n;
-			this.registry = o[H];
+			this.registry = o[U];
 			let s = t.api;
 			this.pointerDrag = () => {
 				var e;
 				return (s == null || (e = s.blocks) == null ? void 0 : e.isPointerDragActive) === !0;
-			}, this.mirror = T(e.propSchema, _((i = t.data) == null ? {} : i)), this.lastRendered = this.mirror, this.dataRef = g(this.mirror), this.readOnlyRef = g(t.readOnly);
+			}, this.mirror = E(e.propSchema, v((i = t.data) == null ? {} : i)), this.lastRendered = this.mirror, this.dataRef = _(this.mirror), this.readOnlyRef = _(t.readOnly);
 			let c = this.blockApi;
 			this.childrenComponent = r({
 				name: `VueBlockChildren(${e.type})`,
 				setup() {
-					let e = h(null), t = () => {
-						e.value !== null && E(e.value, c.getChildren());
+					let e = g(null), t = () => {
+						e.value !== null && D(e.value, c.getChildren());
 					};
 					return d(t), p(t), () => a("div", {
 						ref: e,
-						[x.nestedBlocks]: ""
+						[S.nestedBlocks]: ""
 					});
 				}
 			});
@@ -576,8 +618,8 @@ function ie(e) {
 		}
 		async setData(t) {
 			var n = this;
-			let r = T(e.propSchema, _(t == null ? {} : t));
-			return w(r, n.lastRendered) ? !0 : (n.mirror = r, n.lastRendered = r, n.dataRef.value = r, await c(), !0);
+			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);
 		}
 		setReadOnly(e) {
 			this.readOnlyRef.value = e;
@@ -613,4 +655,4 @@ function ie(e) {
 	}, t.__isBlokVueBlock = !0, t;
 }
 //#endregion
-export { R as BLOK_DEFAULT_CONFIG, $ as BlokContent, re as BlokEditor, ie as createVueBlock, z as provideBlok, Z as useBlocks, Y as useBlok, B as useBlokDefaults };
+export { z as BLOK_DEFAULT_CONFIG, $ as BlokContent, ie as BlokEditor, ae as createVueBlock, B as provideBlok, Q as useBlocks, X as useBlok, V as useBlokDefaults, ee as useBlokReady };

package/package.json

@@ -1,14 +1,35 @@
 {
   "name": "@bloklabs/vue",
-  "version": "1.3.0",
-  "description": "Vue 3 bindings for the Blok editor",
+  "version": "1.4.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",
+  "homepage": "https://blokeditor.com",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/JackUait/blok.git",
     "directory": "packages/vue"
   },
+  "bugs": {
+    "url": "https://github.com/JackUait/blok/issues"
+  },
+  "keywords": [
+    "blok",
+    "vue",
+    "vue3",
+    "vue-component",
+    "block-editor",
+    "rich-text-editor",
+    "wysiwyg",
+    "editor",
+    "notion",
+    "notion-like",
+    "headless",
+    "block-based",
+    "contenteditable",
+    "json",
+    "typescript"
+  ],
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.cjs",
@@ -33,7 +54,7 @@
     "build": "yarn run -T vite build --mode production"
   },
   "peerDependencies": {
-    "@bloklabs/core": "^1.3.0",
+    "@bloklabs/core": "^1.4.0",
     "vue": "^3.5.0"
   }
 }

package/src/BlokEditor.ts

@@ -45,7 +45,9 @@ export const BlokEditor = defineComponent({
     data: { type: Object as PropType<OutputData>, default: undefined },
     minHeight: { type: Number, default: undefined },
     logLevel: { type: String as PropType<BlokConfig['logLevel']>, default: undefined },
-    readOnly: { type: Boolean as PropType<boolean | undefined>, default: undefined },
+    // [Boolean, Object]: the object form ({ hideControls }) must not be dropped
+    // or dev-warned — it always means read-only enabled (reactive contract).
+    readOnly: { type: [Boolean, Object] as PropType<BlokConfig['readOnly']>, default: undefined },
     i18n: { type: Object as PropType<BlokConfig['i18n']>, default: undefined },
     link: { type: Object as PropType<BlokConfig['link']>, default: undefined },
     linkPaste: { type: Object as PropType<BlokConfig['linkPaste']>, default: undefined },

package/src/index.ts

@@ -1,10 +1,12 @@
 export { useBlok } from './useBlok';
 export { useBlocks } from './useBlocks';
+export { useBlokReady } from './useBlokReady';
 export { BlokContent } from './BlokContent';
 export { BlokEditor } from './BlokEditor';
 export { provideBlok, useBlokDefaults, BLOK_DEFAULT_CONFIG } from './provide-blok';
 export { createVueBlock } from './createVueBlock';
 export type { UseBlokConfig, BlokContentProps } from './types';
+export type { UseBlokReadyOptions } from './useBlokReady';
 export type {
   UseBlocksApi,
   BlockNode,

package/src/types.ts

@@ -6,7 +6,12 @@ import type { BlokConfig, Blok, EditorWidth } from '@/types';
  * reactive `width` prop.
  *
  * Reactive props (sync after mount without recreation):
- * - `readOnly` — calls `editor.readOnly.set(value)`
+ * - `readOnly` — calls `editor.readOnly.set(enabled, { hideControls })`; the
+ *   object form's `hideControls` is live too (toggles in place — see
+ *   `editor.readOnly.togglesInPlace`)
+ * - `hideToolbar` — calls `editor.toolbar.setHidden(value)` (undefined → false)
+ * - `inlineToolbar` — calls `editor.tools.setInlineToolbar(value)`
+ *   (content-compared, so a fresh array with the same names is a no-op)
  * - `autofocus` — calls `editor.focus()` when changed to true
  * - `theme` — calls `editor.theme.set(value)`
  * - `width` — calls `editor.width.set(value)`

package/src/useBlok.ts

@@ -19,7 +19,7 @@ import {
   type BlockPortalRegistry,
 } from './block-portal-registry';
 import { setRegistry, removeRegistry } from './registry-map';
-import type { Blok, LooseOutputData, OutputData } from '@/types';
+import type { Blok, BlokConfig, LooseOutputData, OutputData } from '@/types';
 import type { UseBlokConfig } from './types';
 
 /**
@@ -199,11 +199,31 @@ export function useBlok(
   // once the instance appears (the Vue analog of React's `editor` effect-dep).
   // `theme`/`width`/`placeholder` guard on `=== undefined` (NOT falsiness) so a
   // real `placeholder: false` (clear) still propagates.
+  // readOnly syncs the full normalized pair: `enabled` always, `hideControls`
+  // only for the object form (`readOnly.set` toggles IN PLACE — see
+  // `readOnly.togglesInPlace` — so no recreation is ever needed).
   watch(
-    [editor, () => normalizeReadOnlyConfig(mergedConfig().readOnly).enabled],
-    ([ed, readOnlyEnabled]) => {
+    [
+      editor,
+      () => normalizeReadOnlyConfig(mergedConfig().readOnly).enabled,
+      () => normalizeReadOnlyConfig(mergedConfig().readOnly).hideControls,
+      () => typeof mergedConfig().readOnly === 'object',
+    ],
+    ([ed, readOnlyEnabled, hideControls, isObjectForm]) => {
       if (ed) {
-        void ed.readOnly.set(readOnlyEnabled);
+        void (isObjectForm ? ed.readOnly.set(readOnlyEnabled, { hideControls }) : ed.readOnly.set(readOnlyEnabled));
+      }
+    },
+    { immediate: true }
+  );
+
+  // hideToolbar toggles the hover toolbar and its gutter in place. Coerces
+  // undefined to false (like readOnly) so clearing the option propagates.
+  watch(
+    [editor, () => mergedConfig().hideToolbar],
+    ([ed, hideToolbar]) => {
+      if (ed) {
+        ed.toolbar.setHidden(Boolean(hideToolbar));
       }
     },
     { immediate: true }
@@ -258,6 +278,69 @@ export function useBlok(
     { immediate: true, deep: true }
   );
 
+  // `config.i18n` was consumed once during boot, so a host driving a language
+  // switcher had to recreate the editor (losing caret, focus and undo stack)
+  // to relabel the UI. This drives the runtime `i18n.update` API instead.
+  // Deep-equal-deduped and `deep: true` for the same reasons as tokens.
+  // `defaultLocale` is not forwarded: it only affects the INITIAL locale
+  // resolution, so it is inert after mount.
+  /*
+   * Seeded with the mount-time value: construction already applied it, so the
+   * immediate run is a no-op and only genuine changes push.
+   */
+  const appliedI18n: { value: BlokConfig['i18n'] | undefined } = { value: mergedConfig().i18n };
+
+  watch(
+    [editor, () => mergedConfig().i18n],
+    ([ed, i18n]) => {
+      if (!ed || i18n === undefined || deepEqual(i18n, appliedI18n.value)) {
+        return;
+      }
+
+      appliedI18n.value = { ...i18n };
+
+      const { locale, messages, direction } = i18n;
+
+      void ed.i18n.update({
+        ...(locale === undefined ? {} : { locale }),
+        ...(messages === undefined ? {} : { messages }),
+        ...(direction === undefined ? {} : { direction }),
+      });
+    },
+    { immediate: true, deep: true }
+  );
+
+  // inlineToolbar re-assigns inline tools in place. Content-compared (not
+  // identity-compared) because `boolean | string[]` configs are typically fresh
+  // array literals; the baseline is tracked per editor instance so a recreated
+  // editor gets the current value applied again. `deep: true` so mutating the
+  // same array still propagates (mirrors the tokens watch).
+  const appliedInlineToolbar: { editor: Blok | null; value: boolean | string[] | undefined } = {
+    editor: null,
+    value: undefined,
+  };
+
+  watch(
+    [editor, () => mergedConfig().inlineToolbar],
+    ([ed, inlineToolbar]) => {
+      if (!ed || inlineToolbar === undefined) {
+        return;
+      }
+
+      if (appliedInlineToolbar.editor === ed && deepEqual(inlineToolbar, appliedInlineToolbar.value)) {
+        return;
+      }
+
+      // De-proxy: copy an array so no Vue reactive proxy reaches core.
+      const plain = Array.isArray(inlineToolbar) ? [...inlineToolbar] : inlineToolbar;
+
+      appliedInlineToolbar.editor = ed;
+      appliedInlineToolbar.value = plain;
+      ed.tools.setInlineToolbar(plain);
+    },
+    { immediate: true, deep: true }
+  );
+
   watch(
     [editor, () => mergedConfig().autofocus],
     ([ed, autofocus]) => {

package/src/useBlokReady.ts

@@ -0,0 +1,70 @@
+// packages/vue/src/useBlokReady.ts
+import {
+  onMounted,
+  onScopeDispose,
+  shallowRef,
+  toValue,
+  type MaybeRefOrGetter,
+  type ShallowRef,
+} from 'vue';
+
+import { Blok as BlokRuntime } from '@bloklabs/core';
+
+/** Options accepted by {@link useBlokReady}. */
+export interface UseBlokReadyOptions {
+  /**
+   * Restrict the wait to editors mounted inside this element. Accepts the
+   * template ref you already hold on the container (or a getter); it is
+   * re-read on every readiness change, so a ref that fills in on mount is
+   * picked up.
+   *
+   * Omit it to observe every editor on the page. Passing it while it still
+   * resolves to null reports NOT ready — an unresolved scope must never fall
+   * back to the page-global one.
+   */
+  within?: MaybeRefOrGetter<Element | null | undefined>;
+  /**
+   * `'ready'` (default) settles when each editor has finished booting.
+   * `'rendered'` also waits for its content to be in the DOM and re-arms on
+   * every post-boot re-render.
+   */
+  settleOn?: 'ready' | 'rendered';
+}
+
+/**
+ * Vue composable exposing the live readiness of the Blok editors in a DOM
+ * scope as a boolean ref.
+ *
+ * The readiness logic itself is framework-agnostic and lives in core
+ * (`Blok.readyState` / `Blok.subscribeReady`) — the SAME implementation behind
+ * React's `useBlokReady` and Angular's `injectBlokReady`, so the three adapters
+ * cannot drift. This composable supplies only Vue's reactivity wrapper: a
+ * `shallowRef` re-read on every registry change, with the subscription
+ * disposed by the surrounding effect scope.
+ *
+ * The ref starts `false` and takes its first real reading on mount, once the
+ * template ref has filled in. Over-waiting is safe; under-waiting is a bug.
+ * @param options - scope and readiness depth
+ */
+export function useBlokReady(options: UseBlokReadyOptions = {}): Readonly<ShallowRef<boolean>> {
+  const { within, settleOn } = options;
+  const ready = shallowRef(false);
+
+  const read = (): void => {
+    const scope = within === undefined ? null : (toValue(within) ?? null);
+
+    // A scope that was asked for but has not resolved yet is NOT the global
+    // scope — reporting ready here would gate on the wrong set of editors.
+    ready.value = within !== undefined && scope === null
+      ? false
+      : BlokRuntime.readyState({
+        within: scope,
+        settleOn,
+      }).ready;
+  };
+
+  onScopeDispose(BlokRuntime.subscribeReady(read));
+  onMounted(read);
+
+  return ready;
+}

package/types/index.d.ts

@@ -22,11 +22,22 @@ import type { MarkdownImportConfig } from '@bloklabs/core/markdown';
  * plus a reactive `width` prop.
  *
  * Reactive props (sync after mount without recreation):
- * - `readOnly` — calls `editor.readOnly.set(value)`
+ * - `readOnly` — calls `editor.readOnly.set(enabled, { hideControls })`; the
+ *   object form's `hideControls` is live too (toggles in place — see
+ *   `editor.readOnly.togglesInPlace`)
+ * - `hideToolbar` — calls `editor.toolbar.setHidden(value)` (undefined → false)
+ * - `inlineToolbar` — calls `editor.tools.setInlineToolbar(value)`
+ *   (content-compared, so a fresh array with the same names is a no-op)
  * - `autofocus` — calls `editor.focus()` when changed to true
  * - `theme` — calls `editor.theme.set(value)`
  * - `width` — calls `editor.width.set(value)`
  * - `placeholder` — calls `editor.placeholder.set(value)`
+ * - `style.tokens` — calls `editor.tokens.set(value)` (deep-equal–deduped;
+ *   replace semantics, so pass the complete token set on each change)
+ * - `i18n` — calls `editor.i18n.update({ locale, messages, direction })`
+ *   (deep-equal–deduped; relabels the editor chrome in place, so caret, focus
+ *   and undo history survive a language switch). `defaultLocale` is not
+ *   forwarded — it only affects the initial locale resolution.
  * - `data` — re-renders via `editor.render(value)` when content changes
  *   (deep-equal–deduped and serialized; seeds the initial content at creation)
  *
@@ -437,6 +448,48 @@ export interface UseBlocksApi {
  */
 export declare function useBlocks(editor: MaybeRefOrGetter<Blok | null>): UseBlocksApi;
 
+/** Options accepted by {@link useBlokReady}. */
+export interface UseBlokReadyOptions {
+  /**
+   * Restrict the wait to editors mounted inside this element. Accepts the
+   * template ref you already hold on the container (or a getter); it is
+   * re-read on every readiness change, so a ref that fills in on mount is
+   * picked up.
+   *
+   * Omit it to observe every editor on the page. Passing it while it still
+   * resolves to null reports NOT ready — an unresolved scope must never fall
+   * back to the page-global one.
+   */
+  within?: MaybeRefOrGetter<Element | null | undefined>;
+  /**
+   * `'ready'` (default) settles when each editor has finished booting.
+   * `'rendered'` also waits for its content to be in the DOM and re-arms on
+   * every post-boot re-render.
+   */
+  settleOn?: 'ready' | 'rendered';
+}
+
+/**
+ * Composable exposing the live readiness of the Blok editors in a DOM scope as
+ * a boolean ref. Mirrors React's `useBlokReady` and Angular's
+ * `injectBlokReady` — all three wrap the same core registry, so they cannot
+ * drift.
+ *
+ * The ref starts `false` and takes its first real reading on mount, once the
+ * template ref has filled in. Editors mounted later re-close the gate, and with
+ * `settleOn: 'rendered'` so does every re-render. A scope holding no editors is
+ * ready.
+ *
+ * @param options - scope and readiness depth
+ *
+ * @example
+ * ```ts
+ * const list = ref<HTMLElement | null>(null);
+ * const ready = useBlokReady({ within: list, settleOn: 'rendered' });
+ * ```
+ */
+export declare function useBlokReady(options?: UseBlokReadyOptions): Readonly<ShallowRef<boolean>>;
+
 /** One field of a {@link CreateVueBlockSpec.propSchema}. */
 export interface PropSchemaEntry {
   default: unknown;