@bloklabs/vue 1.2.6 → 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()})};return(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}),(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

@@ -9,41 +9,41 @@ function A(e, t) {
 function j(e) {
 	return k.get(e);
 }
-function ee(e) {
+function M(e) {
 	k.delete(e);
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.126.0/helpers/typeof.js
-function M(e) {
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/typeof.js
+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.126.0/helpers/toPrimitive.js
-function N(e, t) {
-	if (M(e) != "object" || !e) return e;
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/toPrimitive.js
+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.126.0/helpers/toPropertyKey.js
-function P(e) {
-	var t = N(e, "string");
-	return M(t) == "symbol" ? t : t + "";
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/toPropertyKey.js
+function F(e) {
+	var t = P(e, "string");
+	return N(t) == "symbol" ? t : t + "";
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.126.0/helpers/defineProperty.js
-function F(e, t, n) {
-	return (t = P(t)) in e ? Object.defineProperty(e, t, {
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/defineProperty.js
+function I(e, t, n) {
+	return (t = F(t)) in e ? Object.defineProperty(e, t, {
 		value: n,
 		enumerable: !0,
 		configurable: !0,
@@ -51,8 +51,8 @@ function F(e, t, n) {
 	}) : e[t] = n, e;
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.126.0/helpers/objectSpread2.js
-function I(e, t) {
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/objectSpread2.js
+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,25 +75,25 @@ 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 = () => {
+var U = "__blokPortalRegistry", W = () => {
 	let e = h(/* @__PURE__ */ new Map());
 	return {
 		entries: e,
@@ -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 = _(null), r = o(R, {}), i = () => V(r, y(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(v(r), v(y(e))));
+		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) {
-			ee(a.current), q(a.current);
+			M(a.current), J(a.current);
 			try {
 				a.current.destroy();
 			} catch (e) {}
@@ -156,27 +156,66 @@ 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 x(L(L({}, t), {}, { holder: e }));
-		a.current = o, A(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();
 		});
 	};
-	return b([n, () => O(i().readOnly).enabled], ([e, t]) => {
-		e && e.readOnly.set(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 }), b([n, () => i().width], ([e, t]) => {
 		e && t !== void 0 && e.width.set(t);
 	}, { immediate: !0 }), b([n, () => i().placeholder], ([e, t]) => {
 		e && t !== void 0 && e.placeholder.set(t);
-	}, { immediate: !0 }), b([n, () => i().autofocus], ([e, t]) => {
+	}, { immediate: !0 });
+	let f = { value: void 0 };
+	b([n, () => {
+		var e;
+		return (e = i().style) == null ? void 0 : e.tokens;
+	}], ([e, t]) => {
+		!e || t === void 0 || T(t, f.value) || (f.value = R({}, t), e.tokens.set(t));
+	}, {
+		immediate: !0,
+		deep: !0
+	});
+	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 }), b([n, () => i().data], ([e, t]) => {
 		if (!(!e || t === void 0)) {
@@ -192,8 +231,8 @@ function Y(e, t) {
 }
 //#endregion
 //#region src/useBlocks.ts
-var X = "block changed";
-function Z(e) {
+var Z = "block changed";
+function Q(e) {
 	let t = _(0), n = () => {
 		let t = y(e);
 		return t === null ? null : v(t);
@@ -203,7 +242,7 @@ function Z(e) {
 		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 b(() => n(), (e) => {
 		if (o(), t.value += 1, e === null) {
@@ -213,7 +252,7 @@ function Z(e) {
 		let n = () => {
 			t.value += 1;
 		};
-		e.on(X, n), a.editor = e, a.handler = n, i.value = w(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),
@@ -247,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), () => {
@@ -256,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,
@@ -266,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",
@@ -290,11 +342,11 @@ var Q = r({
 		}), l(() => {
 			r(e.editor);
 		}), () => {
-			let n = e.editor, r = n === null ? void 0 : K(v(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: {
@@ -355,7 +407,7 @@ var Q = r({
 			default: void 0
 		},
 		readOnly: {
-			type: Boolean,
+			type: [Boolean, Object],
 			default: void 0
 		},
 		i18n: {
@@ -440,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);
 			}
@@ -456,7 +508,7 @@ var Q = r({
 			}), c("onThemeChange") && (n.onThemeChange = (e) => {
 				t("theme-change", e);
 			}), n;
-		}, u = Y(() => l(), () => e.recreateKey);
+		}, u = X(() => l(), () => e.recreateKey);
 		b(u, (e, n, r) => {
 			if (e === null) return;
 			let i = [];
@@ -489,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})`,
@@ -516,11 +568,11 @@ function ie(e) {
 		constructor(t) {
 			var n, i;
 			this.hostEl = null, this.pendingDispatch = !1, this.commit = (t) => {
-				let n = E(e.propSchema, L(L({}, this.mirror), t));
+				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;
@@ -603,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.2.6",
-  "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.2.6",
+    "@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 },
@@ -131,7 +133,7 @@ export const BlokEditor = defineComponent({
         };
       }
 
-      return config as UseBlokConfig;
+      return config;
     };
 
     const editor = useBlok(

package/src/block-portal-registry.ts

@@ -52,7 +52,7 @@ export const createBlockPortalRegistry = (): BlockPortalRegistry => {
   const entries = reactive(new Map<string, BlockPortalEntry>());
 
   return {
-    entries: entries as ReadonlyMap<string, BlockPortalEntry>,
+    entries: entries,
     register(id: string, entry: BlockPortalEntry): void {
       // markRaw so the reactive Map (which must still track add/delete) does NOT
       // deep-proxy the entry — a proxied component DEFINITION or DOM host would

package/src/createVueBlock.ts

@@ -218,7 +218,7 @@ export function createVueBlock<Data = BlockToolData>(
 
     public save(): BlockToolData {
       // The complete, frozen, toRaw-clean mirror — never the DOM, never partial.
-      return this.mirror as BlockToolData;
+      return this.mirror;
     }
 
     public async setData(newData: BlockToolData): Promise<boolean> {

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/provide-blok.ts

@@ -61,5 +61,5 @@ export function mergeBlokDefaults(
     merged.tools = { ...defaults.tools, ...config.tools };
   }
 
-  return merged as UseBlokConfig;
+  return merged;
 }

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';
 
 /**
@@ -51,7 +51,7 @@ const injectPortalRegistry = (tools: unknown, registry: BlockPortalRegistry): un
       typeof entry === 'function' ? { class: entry } : { ...(entry as Record<string, unknown>) };
 
     base.config = {
-      ...((base.config as Record<string, unknown> | undefined) ?? {}),
+      ...((base.config) ?? {}),
       [BLOK_PORTAL_REGISTRY_CONFIG_KEY]: registry,
     };
     result[name] = base;
@@ -176,7 +176,7 @@ export function useBlok(
       };
     }
 
-    const blok = new BlokRuntime({ ...snapshot, holder }) as unknown as Blok;
+    const blok = new BlokRuntime({ ...snapshot, holder });
 
     state.current = blok;
     setHolder(blok, holder);
@@ -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 }
@@ -239,6 +259,88 @@ export function useBlok(
     { immediate: true }
   );
 
+  // Theme tokens were construction-only, so a host with a live light/dark
+  // toggle had to recreate the editor or hand-write the global stylesheet Blok
+  // already injects. Deep-equal-deduped because `tokens` is typically a fresh
+  // object literal; `deep: true` so mutating the same object still propagates.
+  const appliedTokens: { value: Record<string, string> | undefined } = { value: undefined };
+
+  watch(
+    [editor, () => mergedConfig().style?.tokens],
+    ([ed, tokens]) => {
+      if (!ed || tokens === undefined || deepEqual(tokens, appliedTokens.value)) {
+        return;
+      }
+
+      appliedTokens.value = { ...tokens };
+      ed.tokens.set(tokens);
+    },
+    { 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;