@bloklabs/vue 1.12.0 → 1.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @bloklabs/vue
2
2
 
3
- 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.
3
+ The Vue 3 block editor bindings for [Blok](https://blokeditor.com). Blok is a headless, Notion-like rich text editor whose content is JSON blocks, not HTML.
4
4
 
5
5
  ## Install
6
6
 
@@ -52,7 +52,7 @@ const data = ref<OutputData>();
52
52
 
53
53
  ## Also exported
54
54
 
55
- - `useBlok(config, recreateKey?)` — the composable behind the component, returns a `Ref<Blok | null>`.
55
+ - `useBlok(config, recreateKey?)` — the composable behind the component. Returns a `Ref<Blok | null>`.
56
56
  - `BlokContent` — the mount-point element, if you want to wire the composable yourself.
57
57
  - `useBlocks(editor)` — a reactive snapshot of the block tree plus a manipulation API.
58
58
  - `createVueBlock` — author block tools as Vue components.
package/dist/index.cjs CHANGED
@@ -1 +1 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("vue"),t=require("@bloklabs/core"),n=require("@bloklabs/core/adapters");var r=new WeakMap;function i(e,t){r.set(e,t)}function a(e){return r.get(e)}function o(e){r.delete(e)}var s=new WeakMap;function c(e,t){s.set(e,t)}function l(e){return s.get(e)}function u(e){s.delete(e)}function d(e){"@babel/helpers - typeof";return d=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},d(e)}function f(e,t){if(d(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(d(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function p(e){var t=f(e,`string`);return d(t)==`symbol`?t:t+``}function m(e,t,n){return(t=p(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function h(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function g(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?h(Object(n),!0).forEach(function(t){m(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):h(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}var _=Symbol(`BLOK_DEFAULT_CONFIG`);function v(t){(0,e.provide)(_,t)}function y(){return(0,e.inject)(_,{})}function b(e,t){if(Object.keys(e).length===0)return t;let n=g({},e);for(let e of Object.keys(t)){let r=t[e];r!==void 0&&(n[e]=r)}return(e.tools!==void 0||t.tools!==void 0)&&(n.tools=g(g({},e.tools),t.tools)),n}var x=`__blokPortalRegistry`,S=()=>{let t=(0,e.reactive)(new Map);return{entries:t,register(n,r){t.set(n,(0,e.markRaw)(r))},unregister(e,n){var r;n!==void 0&&((r=t.get(e))==null?void 0:r.hostEl)!==n||t.delete(e)},setProps(e,n){let r=t.get(e);r!==void 0&&Object.assign(r.props,n)}}},C=new WeakMap;function w(e,t){C.set(e,t)}function T(e){return C.get(e)}function E(e){C.delete(e)}var D=e=>({onChange:e.onChange!==void 0,onSave:e.onSave!==void 0,onEnter:e.onEnter!==void 0,onSubmit:e.onSubmit!==void 0,onBeforeRender:e.onBeforeRender!==void 0,onAfterRender:e.onAfterRender!==void 0}),O=(e,t)=>{if(typeof e!=`object`||!e)return e;let n={};for(let[i,a]of Object.entries(e)){var r;let e=typeof a==`function`?a:a==null?void 0:a.class;if(!(typeof e==`function`&&e.__isBlokVueBlock===!0)){n[i]=a;continue}let o=typeof a==`function`?{class:a}:g({},a);o.config=g(g({},(r=o.config)==null?{}:r),{},{[x]:t}),n[i]=o}return n};function k(r,a){let s=(0,e.shallowRef)(null),l=(0,e.inject)(_,{}),d=()=>b(l,(0,e.toValue)(r)),f={current:null,holder:null,lastRenderedData:d().data,seededEditor:null,renderChain:Promise.resolve(),appliedHandlerPresence:{onChange:!1,onSave:!1,onEnter:!1,onSubmit:!1,onBeforeRender:!1,onAfterRender:!1}},p={onChange:(...e)=>{var t,n;(t=(n=d()).onChange)==null||t.call(n,...e)},onSave:(...e)=>{var t,n;f.lastRenderedData=e[0],(t=(n=d()).onSave)==null||t.call(n,...e)},onEnter:(...e)=>{var t,n;return(t=(n=d()).onEnter)==null?void 0:t.call(n,...e)},onSubmit:(...e)=>{var t,n;(t=(n=d()).onSubmit)==null||t.call(n,...e)},onBeforeRender:(...e)=>{var t,n,r;return(t=(n=(r=d()).onBeforeRender)==null?void 0:n.call(r,...e))==null?e[0]:t},onAfterRender:(...e)=>{var t,n;(t=(n=d()).onAfterRender)==null||t.call(n,...e)}},m=()=>{let t=g({},b((0,e.toRaw)(l),(0,e.toRaw)((0,e.toValue)(r))));return delete t.holder,t.data!==void 0&&(t.data=(0,e.toRaw)(t.data)),t},h=()=>{if(f.current!==null){u(f.current),E(f.current),o(f.current);try{f.current.destroy()}catch(e){}}f.current=null,f.holder=null,s.value=null},v=()=>{let e=document.createElement(`div`);f.holder=e;let n=m(),r=S();n.tools!==void 0&&(n.tools=O(n.tools,r));let a=D(d());n.onChange=a.onChange?p.onChange:void 0,n.onSave=a.onSave?p.onSave:void 0,n.onEnter=a.onEnter?p.onEnter:void 0,n.onSubmit=a.onSubmit?p.onSubmit:void 0,n.onBeforeRender=a.onBeforeRender?p.onBeforeRender:void 0,n.onAfterRender=a.onAfterRender?p.onAfterRender:void 0,f.appliedHandlerPresence=a;let o=new t.Blok(g(g({},n),{},{holder:e}));f.current=o,c(o,e),w(o,r),i(o,{markRendered:e=>{f.lastRenderedData=e}}),o.isReady.then(()=>{f.current===o&&(s.value=o)}).catch(()=>{f.current===o&&h()})};(0,e.watch)([s,()=>(0,n.normalizeReadOnlyConfig)(d().readOnly).enabled,()=>(0,n.normalizeReadOnlyConfig)(d().readOnly).hideControls,()=>typeof d().readOnly==`object`],([e,t,n,r])=>{e&&(r?e.readOnly.set(t,{hideControls:n}):e.readOnly.set(t))},{immediate:!0}),(0,e.watch)([s,()=>d().hideToolbar],([e,t])=>{e&&e.toolbar.setHidden(!!t)},{immediate:!0}),(0,e.watch)([s,()=>d().toolbarPosition],([e,t])=>{e&&t!==void 0&&e.toolbar.setPosition(t)},{immediate:!0}),(0,e.watch)([s,()=>d().theme],([e,t])=>{e&&t!==void 0&&e.theme.set(t)},{immediate:!0}),(0,e.watch)([s,()=>d().width],([e,t])=>{e&&t!==void 0&&e.width.set(t)},{immediate:!0}),(0,e.watch)([s,()=>d().placeholder],([e,t])=>{e&&t!==void 0&&e.placeholder.set(t)},{immediate:!0});let y={value:void 0};(0,e.watch)([s,()=>{var e;return(e=d().style)==null?void 0:e.tokens}],([e,t])=>{!e||t===void 0||(0,n.deepEqual)(t,y.value)||(y.value=g({},t),e.tokens.set(t))},{immediate:!0,deep:!0});let x={value:d().i18n};(0,e.watch)([s,()=>d().i18n],([e,t])=>{if(!e||t===void 0||(0,n.deepEqual)(t,x.value))return;x.value=g({},t);let{locale:r,messages:i,direction:a}=t;e.i18n.update(g(g(g({},r===void 0?{}:{locale:r}),i===void 0?{}:{messages:i}),a===void 0?{}:{direction:a}))},{immediate:!0,deep:!0});let C={editor:null,value:void 0};return(0,e.watch)([s,()=>d().inlineToolbar],([e,t])=>{if(!e||t===void 0||C.editor===e&&(0,n.deepEqual)(t,C.value))return;let r=Array.isArray(t)?[...t]:t;C.editor=e,C.value=r,e.tools.setInlineToolbar(r)},{immediate:!0,deep:!0}),(0,e.watch)([s,()=>d().autofocus],([e,t])=>{e&&t&&e.focus()},{immediate:!0}),(0,e.watch)([s,()=>JSON.stringify(D(d()))],([e])=>{if(!e)return;let t=D(d()),n=f.appliedHandlerPresence,r={},i={value:!1},a=(e,r)=>{t[e]!==n[e]&&(n[e]=t[e],i.value=!0,r(t[e]?p[e]:void 0))};a(`onChange`,e=>{r.onChange=e}),a(`onSave`,e=>{r.onSave=e}),a(`onEnter`,e=>{r.onEnter=e}),a(`onSubmit`,e=>{r.onSubmit=e}),a(`onBeforeRender`,e=>{r.onBeforeRender=e}),a(`onAfterRender`,e=>{r.onAfterRender=e}),i.value&&e.handlers.set(r)},{immediate:!0}),(0,e.watch)([s,()=>d().data],([t,r])=>{if(!t||r===void 0)return;if(f.seededEditor!==t){f.seededEditor=t,f.lastRenderedData=r;return}let i=f.lastRenderedData;i!==void 0&&(0,n.equalsOutputData)(r,i)||(f.lastRenderedData=r,f.renderChain=f.renderChain.catch(()=>void 0).then(()=>t.render((0,n.toRenderableData)((0,e.toRaw)(r)))))},{immediate:!0}),a!==void 0&&(0,e.watch)(()=>(0,e.toValue)(a),()=>{h(),v()}),(0,e.onMounted)(v),(0,e.onBeforeUnmount)(h),s}var A=`block changed`;function j(t,r={}){let i=(0,e.shallowRef)(0),a=()=>{let n=(0,e.toValue)(t);return n===null?null:(0,e.toRaw)(n)},o=()=>{i.value},s=(0,e.shallowRef)(n.EMPTY_API),c={editor:null,handler:null},l=()=>{c.editor!==null&&c.handler!==null&&c.editor.off(A,c.handler),c.editor=null,c.handler=null};return(0,e.watch)(()=>a(),t=>{if(l(),i.value+=1,t===null){s.value=n.EMPTY_API;return}let a=a=>{var o;let s=(o=(0,e.toValue)(r.within))==null?null:o;s!==null&&!(0,n.changeTouchesSubtree)(t,a,s)||(i.value+=1)};t.on(A,a),c.editor=t,c.handler=a,s.value=(0,n.createBlocksApiForEditor)(t,o)},{immediate:!0}),(0,e.onScopeDispose)(l),{getById:e=>s.value.getById(e),getChildren:e=>s.value.getChildren(e),insert:e=>s.value.insert(e),insertMany:e=>s.value.insertMany(e),insertTree:e=>s.value.insertTree(e),insertMarkdown:(e,t)=>s.value.insertMarkdown(e,t),exportMarkdown:()=>s.value.exportMarkdown(),move:(e,t)=>s.value.move(e,t),nest:(e,t)=>s.value.nest(e,t),unnest:e=>s.value.unnest(e),remove:e=>s.value.remove(e),update:(e,t,n)=>s.value.update(e,t,n),convert:(e,t,n,r)=>s.value.convert(e,t,n,r),transact:e=>s.value.transact(e),transactWithoutCapture:e=>s.value.transactWithoutCapture(e),getBlocksCount:()=>s.value.getBlocksCount(),getCurrentBlockIndex:()=>s.value.getCurrentBlockIndex(),getBlockByIndex:e=>s.value.getBlockByIndex(e),getBlockByElement:e=>s.value.getBlockByElement(e),getBlockData:e=>s.value.getBlockData(e),getBlockIndex:e=>s.value.getBlockIndex(e),composeBlockData:e=>s.value.composeBlockData(e),renderFromHTML:e=>s.value.renderFromHTML(e),insertOutputData:(e,t)=>s.value.insertOutputData(e,t),splitBlock:(e,t,n,r,i)=>s.value.splitBlock(e,t,n,r,i),insertInsideParent:(e,t,n)=>s.value.insertInsideParent(e,t,n),render:e=>s.value.render(e),clear:()=>s.value.clear(),isSyncingFromYjs:()=>s.value.isSyncingFromYjs()}}function M(n={}){let{within:r,settleOn:i}=n,a=(0,e.shallowRef)(!1),o=()=>{var n;let o=r===void 0||(n=(0,e.toValue)(r))==null?null:n;a.value=r!==void 0&&o===null?!1:t.Blok.readyState({within:o,settleOn:i}).ready};return(0,e.onScopeDispose)(t.Blok.subscribeReady(o)),(0,e.onMounted)(o),a}var N=(0,e.defineComponent)({name:`BlockErrorBoundary`,setup(t,{slots:n}){return(0,e.onErrorCaptured)(()=>!1),()=>{var e;return(e=n.default)==null?void 0:e.call(n)}}}),P=(0,e.defineComponent)({name:`BlockPortalHost`,props:{registry:{type:Object,required:!0}},setup(t){return()=>(0,e.h)(e.Fragment,Array.from(t.registry.entries.entries()).map(([t,n])=>(0,e.h)(e.Teleport,{key:t,to:n.hostEl},[(0,e.h)(N,null,{default:()=>(0,e.h)(n.component,n.props)})])))}}),F=Symbol(`BLOK_EDITOR_INSTANCE`),I=(0,e.shallowRef)(null);function L(){return(0,e.inject)(F,I)}var R=(0,e.defineComponent)({name:`BlokContent`,props:{editor:{type:Object,default:null}},setup(t){let n=(0,e.ref)(null);(0,e.provide)(F,(0,e.computed)(()=>t.editor===null?null:(0,e.toRaw)(t.editor)));let r=t=>{if(n.value===null||t===null)return;let r=l((0,e.toRaw)(t));r!==void 0&&n.value.appendChild(r)},i=t=>{var n;t!==null&&((n=l((0,e.toRaw)(t)))==null||n.remove())};return(0,e.onMounted)(()=>{r(t.editor)}),(0,e.watch)(()=>t.editor,(e,t)=>{i(t==null?null:t),r(e)}),(0,e.onBeforeUnmount)(()=>{i(t.editor)}),()=>{let r=t.editor,i=r===null?void 0:T((0,e.toRaw)(r));return(0,e.h)(`div`,{ref:n},i===void 0?[]:[(0,e.h)(P,{registry:i})])}}}),z=`autofocus.defaultBlock.dataModel.placeholder.sanitizer.hideToolbar.toolbarPosition.maxHistoryLength.historyDebounceTime.newGroupDelay.globalUndoRedo.tools.data.minHeight.logLevel.readOnly.i18n.link.linkPaste.inlineToolbar.tunes.style.theme.scrollToBlock.user.resolveUser.notifierPosition.notifier.width.onBeforeRender.onBeforePaste.onEnter.onSubmit.onError.migrations.uploader.captureClicksBelowEditor`.split(`.`),B=(0,e.defineComponent)({name:`BlokEditor`,inheritAttrs:!1,props:{autofocus:{type:Boolean,default:void 0},defaultBlock:{type:String,default:void 0},dataModel:{type:String,default:void 0},placeholder:{type:[String,Boolean],default:void 0},sanitizer:{type:Object,default:void 0},hideToolbar:{type:Boolean,default:void 0},toolbarPosition:{type:String,default:void 0},maxHistoryLength:{type:Number,default:void 0},historyDebounceTime:{type:Number,default:void 0},newGroupDelay:{type:Number,default:void 0},globalUndoRedo:{type:Boolean,default:void 0},tools:{type:Object,default:void 0},data:{type:Object,default:void 0},minHeight:{type:Number,default:void 0},logLevel:{type:String,default:void 0},readOnly:{type:[Boolean,Object],default:void 0},i18n:{type:Object,default:void 0},link:{type:Object,default:void 0},linkPaste:{type:Object,default:void 0},inlineToolbar:{type:[Array,Boolean],default:void 0},tunes:{type:Array,default:void 0},style:{type:Object,default:void 0},theme:{type:String,default:void 0},scrollToBlock:{type:Object,default:void 0},user:{type:Object,default:void 0},resolveUser:{type:Function,default:void 0},notifierPosition:{type:String,default:void 0},notifier:{type:Function,default:void 0},width:{type:String,default:void 0},onBeforeRender:{type:Function,default:void 0},onBeforePaste:{type:Function,default:void 0},onEnter:{type:Function,default:void 0},onSubmit:{type:Function,default:void 0},onError:{type:Function,default:void 0},migrations:{type:Object,default:void 0},uploader:{type:Object,default:void 0},captureClicksBelowEditor:{type:Boolean,default:void 0},recreateKey:{type:null}},emits:{ready:e=>!0,change:e=>!0,save:e=>!0,"update:data":e=>!0,"after-render":e=>!0,"theme-change":e=>!0,"blocks-rendered":e=>!0,"block-rendered":e=>!0},setup(t,{emit:n,expose:r,attrs:i}){let o=(0,e.getCurrentInstance)(),s=()=>{let e=o==null?void 0:o.vnode.props;return e==null?``:Object.keys(e).filter(e=>e.startsWith(`on`)).sort().join(`|`)},c=(0,e.ref)(s());(0,e.onUpdated)(()=>{c.value=s()});let l=e=>c.value.split(`|`).includes(e),u=()=>{let e={};for(let n of z){let r=t[n];r!==void 0&&(e[n]=r)}return l(`onChange`)&&(e.onChange=(e,t)=>{n(`change`,{api:e,event:t})}),(l(`onSave`)||l(`onUpdate:data`))&&(e.onSave=e=>{n(`update:data`,e),n(`save`,e)}),l(`onAfterRender`)&&(e.onAfterRender=e=>{n(`after-render`,e)}),l(`onThemeChange`)&&(e.onThemeChange=e=>{n(`theme-change`,e)}),e},d=k(()=>u(),()=>t.recreateKey);(0,e.watch)([d,c],([e],t,r)=>{if(e===null)return;let i=[];if(l(`onBlocksRendered`)){let t=e=>n(`blocks-rendered`,e);e.on(`blocks:rendered`,t),i.push([`blocks:rendered`,t])}if(l(`onBlockRendered`)){let t=e=>n(`block-rendered`,e);e.on(`block:rendered`,t),i.push([`block:rendered`,t])}r(()=>{for(let[t,n]of i)e.off(t,n)})});let f={last:null};return(0,e.watch)(d,e=>{e!==null&&e!==f.last&&(f.last=e,n(`ready`,e))}),r({instance:(0,e.computed)(()=>d.value),save:()=>{var e;return(e=d.value)==null?void 0:e.save()},focus:e=>{var t;(t=d.value)==null||t.focus(e)},render:e=>{let t=d.value;if(t!==null)return t.render(e).then(()=>{var n;(n=a(t))==null||n.markRendered(e)})}}),()=>(0,e.h)(R,g({editor:d.value},i))}}),V=[`toolbox`,`isReadOnlySupported`,`__isBlokVueBlock`],H=new Set([void 0,`user`,`api`,`convert`]),U=(e,t,r)=>{var i;e==null||(i=e.events)==null||i.emit(n.BlockChildrenMounted,{blockId:t,childIds:r.map(e=>e.id)})};function W(t){var r,i;let a=()=>(0,e.defineComponent)({name:`VueBlock(${t.type})`,props:{ctx:{type:Object,required:!0},notifyMounted:{type:Function,default:void 0}},setup(n){return(0,e.onMounted)(()=>{var e;return(e=n.notifyMounted)==null?void 0:e.call(n)}),t.setup(n.ctx)}}),o=(r=class{static get toolbox(){return t.toolbox}static get isReadOnlySupported(){return!0}constructor(r){var i,o,s;this.wrappedComponent=a(),this.mountSignalled=!1,this.hostEl=null,this.pendingDispatch=!1,this.anchorEl=null,this.toolbarAnchorRef=e=>{let t=e===null||e instanceof Element?e:e.$el;this.anchorEl=t instanceof HTMLElement?t:null},this.notifyMounted=()=>{var e;if(this.mountSignalled)return;this.mountSignalled=!0;let n={origin:this.origin,api:this.api};if((e=t.onMounted)==null||e.call(t,this.blockApi,n),H.has(this.origin)){var r;(r=t.onCreated)==null||r.call(t,this.blockApi,n)}},this.commit=e=>{let r=(0,n.fillDefaults)(t.propSchema,g(g({},this.mirror),e));(0,n.deepEqual)(r,this.mirror)||(this.mirror=r,this.lastRendered=r,this.dataRef.value=r,this.flushDispatch())},this.blockApi=r.block;let c=(i=r.config)==null?{}:i;this.registry=c[x],this.api=r.api;let l=r.api;this.pointerDrag=()=>{var e;return(l==null||(e=l.blocks)==null?void 0:e.isPointerDragActive)===!0},this.mirror=(0,n.fillDefaults)(t.propSchema,(0,e.toRaw)((o=r.data)==null?{}:o)),this.lastRendered=this.mirror,this.dataRef=(0,e.shallowRef)(this.mirror),this.readOnlyRef=(0,e.shallowRef)(r.readOnly),this.origin=(s=r.origin)==null?`api`:s;let u=this.blockApi,d=this.api;this.childrenComponent=(0,e.defineComponent)({name:`VueBlockChildren(${t.type})`,props:{childAttributes:{type:Function,default:void 0},childContentAttributes:{type:Function,default:void 0}},setup(t){let r=(0,e.ref)(null),i=(0,n.createChildDecorationLedger)(),a=()=>{if(r.value===null)return;let e=u.getChildren();(0,n.mountChildBlocks)(r.value,e),(0,n.applyChildDecoration)(i,e,{childAttributes:t.childAttributes,childContentAttributes:t.childContentAttributes}),U(d,u.id,e)};return(0,e.onMounted)(a),(0,e.onUpdated)(a),()=>(0,e.h)(`div`,{ref:r,[n.DATA_ATTR.nestedBlocks]:``})}})}render(){var e;let t=document.createElement(`div`);t.setAttribute(`data-blok-mutation-free`,`true`),this.hostEl=t;let n={data:this.dataRef,commit:this.commit,block:this.blockApi,api:this.api,readOnly:this.readOnlyRef,BlockChildren:this.childrenComponent,toolbarAnchorRef:this.toolbarAnchorRef};return(e=this.registry)==null||e.register(this.blockApi.id,{hostEl:t,component:this.wrappedComponent,props:{ctx:n,notifyMounted:this.notifyMounted}}),t}rendered(){var e;(e=t.onRendered)==null||e.call(t,this.blockApi)}save(){return this.mirror}async setData(r){var i=this;let a=(0,n.fillDefaults)(t.propSchema,(0,e.toRaw)(r==null?{}:r));return(0,n.deepEqual)(a,i.lastRendered)?!0:(i.mirror=a,i.lastRendered=a,i.dataRef.value=a,await(0,e.nextTick)(),!0)}setReadOnly(e){this.readOnlyRef.value=e}getToolbarAnchorElement(){var e;let n=this.anchorEl;if(n!==null&&n.isConnected)return n;let r=this.hostEl;if(!(r===null||t.getToolbarAnchorElement===void 0))return(e=t.getToolbarAnchorElement(r,this.blockApi))==null?void 0:e}moved(){var e;(e=t.onMoved)==null||e.call(t,this.blockApi)}removed(){var e,n,r;(e=this.registry)==null||e.unregister(this.blockApi.id,(n=this.hostEl)==null?void 0:n),(r=t.onRemoved)==null||r.call(t,this.blockApi)}destroy(){var e,t;(e=this.registry)==null||e.unregister(this.blockApi.id,(t=this.hostEl)==null?void 0:t)}flushDispatch(){if(!this.pointerDrag()){this.pendingDispatch=!1,this.blockApi.dispatchChange();return}if(this.pendingDispatch)return;this.pendingDispatch=!0;let e=()=>{if(this.pointerDrag()){requestAnimationFrame(e);return}this.pendingDispatch=!1,this.blockApi.dispatchChange()};requestAnimationFrame(e)}},r.__isBlokVueBlock=!0,r);for(let[e,n]of Object.entries((i=t.statics)==null?{}:i))V.includes(e)||Object.defineProperty(o,e,{value:n,writable:!0,enumerable:!0,configurable:!0});return o}exports.BLOK_DEFAULT_CONFIG=_,exports.BLOK_EDITOR_INSTANCE=F,exports.BlokContent=R,exports.BlokEditor=B,exports.createVueBlock=W,exports.provideBlok=v,exports.useBlocks=j,exports.useBlok=k,exports.useBlokDefaults=y,exports.useBlokInstance=L,exports.useBlokReady=M;
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("vue"),t=require("@bloklabs/core"),n=require("@bloklabs/core/adapters");var r=new WeakMap;function i(e,t){r.set(e,t)}function a(e){return r.get(e)}function o(e){r.delete(e)}var s=new WeakMap;function c(e,t){s.set(e,t)}function l(e){return s.get(e)}function u(e){s.delete(e)}function d(e){"@babel/helpers - typeof";return d=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},d(e)}function f(e,t){if(d(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(d(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function p(e){var t=f(e,`string`);return d(t)==`symbol`?t:t+``}function m(e,t,n){return(t=p(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function h(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function g(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?h(Object(n),!0).forEach(function(t){m(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):h(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}var _=Symbol(`BLOK_DEFAULT_CONFIG`);function v(t){(0,e.provide)(_,t)}function y(){return(0,e.inject)(_,{})}function b(e,t){if(Object.keys(e).length===0)return t;let n=g({},e);for(let e of Object.keys(t)){let r=t[e];r!==void 0&&(n[e]=r)}return(e.tools!==void 0||t.tools!==void 0)&&(n.tools=g(g({},e.tools),t.tools)),n}var x=`__blokPortalRegistry`,S=()=>{let t=(0,e.reactive)(new Map);return{entries:t,register(n,r){t.set(n,(0,e.markRaw)(r))},unregister(e,n){var r;(n===void 0||((r=t.get(e))==null?void 0:r.hostEl)===n)&&t.delete(e)},setProps(e,n){let r=t.get(e);r!==void 0&&Object.assign(r.props,n)}}},C=new WeakMap;function w(e,t){C.set(e,t)}function T(e){return C.get(e)}function E(e){C.delete(e)}var D=e=>({onChange:e.onChange!==void 0,onSave:e.onSave!==void 0,onEnter:e.onEnter!==void 0,onSubmit:e.onSubmit!==void 0,onBeforeRender:e.onBeforeRender!==void 0,onAfterRender:e.onAfterRender!==void 0}),O=e=>`[Blok] \`data\` is ignored while collaboration is on: the document lives on the sync service and is shared with everyone editing it, so replacing it from this editor would overwrite their work. To replace the whole document, call POST /sync/${e==null?`{doc}`:e}/reset on your server — it reloads the document from your own document endpoint and every open editor picks it up. To change part of it, use the blocks API (insert/update/delete).`,k=(e,t)=>{if(typeof e!=`object`||!e)return e;let n={};for(let[i,a]of Object.entries(e)){var r;let e=typeof a==`function`?a:a==null?void 0:a.class;if(typeof e!=`function`||e.__isBlokVueBlock!==!0){n[i]=a;continue}let o=typeof a==`function`?{class:a}:g({},a);o.config=g(g({},(r=o.config)==null?{}:r),{},{[x]:t}),n[i]=o}return n};function A(r,a){let s=(0,e.shallowRef)(null),l=(0,e.inject)(_,{}),d=()=>b(l,(0,e.toValue)(r)),f={current:null,holder:null,lastRenderedData:d().data,seededEditor:null,renderChain:Promise.resolve(),collaborationWarned:!1,constructedCollaboration:void 0,appliedHandlerPresence:{onChange:!1,onSave:!1,onEnter:!1,onSubmit:!1,onBeforeRender:!1,onAfterRender:!1}},p={onChange:(...e)=>{var t,n;(t=(n=d()).onChange)==null||t.call(n,...e)},onSave:(...e)=>{var t,n;f.lastRenderedData=e[0],(t=(n=d()).onSave)==null||t.call(n,...e)},onEnter:(...e)=>{var t,n;return(t=(n=d()).onEnter)==null?void 0:t.call(n,...e)},onSubmit:(...e)=>{var t,n;(t=(n=d()).onSubmit)==null||t.call(n,...e)},onBeforeRender:(...e)=>{var t,n,r;return(t=(n=(r=d()).onBeforeRender)==null?void 0:n.call(r,...e))==null?e[0]:t},onAfterRender:(...e)=>{var t,n;(t=(n=d()).onAfterRender)==null||t.call(n,...e)}},m=()=>{let t=g({},b((0,e.toRaw)(l),(0,e.toRaw)((0,e.toValue)(r))));return delete t.holder,t.data!==void 0&&(t.data=(0,e.toRaw)(t.data)),t},h=()=>{if(f.current!==null){u(f.current),E(f.current),o(f.current);try{f.current.destroy()}catch(e){}}f.current=null,f.holder=null,s.value=null},v=()=>{let e=document.createElement(`div`);f.holder=e;let n=m(),r=S();n.tools!==void 0&&(n.tools=k(n.tools,r));let a=D(d());n.onChange=a.onChange?p.onChange:void 0,n.onSave=a.onSave?p.onSave:void 0,n.onEnter=a.onEnter?p.onEnter:void 0,n.onSubmit=a.onSubmit?p.onSubmit:void 0,n.onBeforeRender=a.onBeforeRender?p.onBeforeRender:void 0,n.onAfterRender=a.onAfterRender?p.onAfterRender:void 0,f.appliedHandlerPresence=a;let o=new t.Blok(g(g({},n),{},{holder:e}));f.current=o,f.constructedCollaboration=n.collaboration,c(o,e),w(o,r),i(o,{markRendered:e=>{f.lastRenderedData=e}}),o.isReady.then(()=>{f.current===o&&(s.value=o)}).catch(()=>{f.current===o&&h()})};(0,e.watch)([s,()=>(0,n.normalizeReadOnlyConfig)(d().readOnly).enabled,()=>(0,n.normalizeReadOnlyConfig)(d().readOnly).hideControls,()=>typeof d().readOnly==`object`],([e,t,n,r])=>{e&&(r?e.readOnly.set(t,{hideControls:n}):e.readOnly.set(t))},{immediate:!0}),(0,e.watch)([s,()=>d().hideToolbar],([e,t])=>{e&&e.toolbar.setHidden(!!t)},{immediate:!0}),(0,e.watch)([s,()=>d().toolbarPosition],([e,t])=>{e&&t!==void 0&&e.toolbar.setPosition(t)},{immediate:!0}),(0,e.watch)([s,()=>d().theme],([e,t])=>{e&&t!==void 0&&e.theme.set(t)},{immediate:!0}),(0,e.watch)([s,()=>d().width],([e,t])=>{e&&t!==void 0&&e.width.set(t)},{immediate:!0}),(0,e.watch)([s,()=>d().placeholder],([e,t])=>{e&&t!==void 0&&e.placeholder.set(t)},{immediate:!0});let y={value:void 0};(0,e.watch)([s,()=>{var e;return(e=d().style)==null?void 0:e.tokens}],([e,t])=>{!e||t===void 0||(0,n.deepEqual)(t,y.value)||(y.value=g({},t),e.tokens.set(t))},{immediate:!0,deep:!0});let x={value:d().i18n};(0,e.watch)([s,()=>d().i18n],([e,t])=>{if(!e||t===void 0||(0,n.deepEqual)(t,x.value))return;x.value=g({},t);let{locale:r,messages:i,direction:a}=t;e.i18n.update(g(g(g({},r===void 0?{}:{locale:r}),i===void 0?{}:{messages:i}),a===void 0?{}:{direction:a}))},{immediate:!0,deep:!0});let C={editor:null,value:void 0};return(0,e.watch)([s,()=>d().inlineToolbar],([e,t])=>{if(!e||t===void 0||C.editor===e&&(0,n.deepEqual)(t,C.value))return;let r=Array.isArray(t)?[...t]:t;C.editor=e,C.value=r,e.tools.setInlineToolbar(r)},{immediate:!0,deep:!0}),(0,e.watch)([s,()=>d().autofocus],([e,t])=>{e&&t&&e.focus()},{immediate:!0}),(0,e.watch)([s,()=>JSON.stringify(D(d()))],([e])=>{if(!e)return;let t=D(d()),n=f.appliedHandlerPresence,r={},i={value:!1},a=(e,r)=>{t[e]!==n[e]&&(n[e]=t[e],i.value=!0,r(t[e]?p[e]:void 0))};a(`onChange`,e=>{r.onChange=e}),a(`onSave`,e=>{r.onSave=e}),a(`onEnter`,e=>{r.onEnter=e}),a(`onSubmit`,e=>{r.onSubmit=e}),a(`onBeforeRender`,e=>{r.onBeforeRender=e}),a(`onAfterRender`,e=>{r.onAfterRender=e}),i.value&&e.handlers.set(r)},{immediate:!0}),(0,e.watch)([s,()=>d().data],([t,r])=>{if(!t||r===void 0)return;if(f.seededEditor!==t){f.seededEditor=t,f.lastRenderedData=r;return}let i=f.lastRenderedData;if(i!==void 0&&(0,n.equalsOutputData)(r,i))return;let a=f.constructedCollaboration;if(a!==void 0){f.collaborationWarned||(f.collaborationWarned=!0,console.warn(O(a.doc)));return}f.lastRenderedData=r,f.renderChain=f.renderChain.catch(()=>void 0).then(()=>t.render((0,n.toRenderableData)((0,e.toRaw)(r))))},{immediate:!0}),a!==void 0&&(0,e.watch)(()=>(0,e.toValue)(a),()=>{h(),v()}),(0,e.onMounted)(v),(0,e.onBeforeUnmount)(h),s}var j=`block changed`;function M(t,r={}){let i=(0,e.shallowRef)(0),a=()=>{let n=(0,e.toValue)(t);return n===null?null:(0,e.toRaw)(n)},o=()=>{i.value},s=(0,e.shallowRef)(n.EMPTY_API),c={editor:null,handler:null},l=()=>{c.editor!==null&&c.handler!==null&&c.editor.off(j,c.handler),c.editor=null,c.handler=null};return(0,e.watch)(()=>a(),t=>{if(l(),i.value+=1,t===null){s.value=n.EMPTY_API;return}let a=a=>{var o;let s=(o=(0,e.toValue)(r.within))==null?null:o;s!==null&&!(0,n.changeTouchesSubtree)(t,a,s)||(i.value+=1)};t.on(j,a),c.editor=t,c.handler=a,s.value=(0,n.createBlocksApiForEditor)(t,o)},{immediate:!0}),(0,e.onScopeDispose)(l),{getById:e=>s.value.getById(e),getChildren:e=>s.value.getChildren(e),insert:e=>s.value.insert(e),insertMany:e=>s.value.insertMany(e),insertTree:e=>s.value.insertTree(e),insertMarkdown:(e,t)=>s.value.insertMarkdown(e,t),exportMarkdown:()=>s.value.exportMarkdown(),move:(e,t)=>s.value.move(e,t),nest:(e,t)=>s.value.nest(e,t),unnest:e=>s.value.unnest(e),remove:e=>s.value.remove(e),update:(e,t,n)=>s.value.update(e,t,n),convert:(e,t,n,r)=>s.value.convert(e,t,n,r),transact:e=>s.value.transact(e),transactWithoutCapture:e=>s.value.transactWithoutCapture(e),getBlocksCount:()=>s.value.getBlocksCount(),getCurrentBlockIndex:()=>s.value.getCurrentBlockIndex(),getBlockByIndex:e=>s.value.getBlockByIndex(e),getBlockByElement:e=>s.value.getBlockByElement(e),getBlockData:e=>s.value.getBlockData(e),getBlockIndex:e=>s.value.getBlockIndex(e),composeBlockData:e=>s.value.composeBlockData(e),renderFromHTML:e=>s.value.renderFromHTML(e),insertOutputData:(e,t)=>s.value.insertOutputData(e,t),splitBlock:(e,t,n,r,i)=>s.value.splitBlock(e,t,n,r,i),insertInsideParent:(e,t,n)=>s.value.insertInsideParent(e,t,n),render:e=>s.value.render(e),clear:()=>s.value.clear(),isSyncingFromYjs:()=>s.value.isSyncingFromYjs()}}function N(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 P=(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)}}}),F=(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)(P,null,{default:()=>(0,e.h)(n.component,n.props)})])))}}),I=Symbol(`BLOK_EDITOR_INSTANCE`),L=(0,e.shallowRef)(null);function R(){return(0,e.inject)(I,L)}var z=(0,e.defineComponent)({name:`BlokContent`,props:{editor:{type:Object,default:null}},setup(t){let n=(0,e.ref)(null);(0,e.provide)(I,(0,e.computed)(()=>t.editor===null?null:(0,e.toRaw)(t.editor)));let r=t=>{if(n.value===null||t===null)return;let r=l((0,e.toRaw)(t));r!==void 0&&n.value.appendChild(r)},i=t=>{var n;t!==null&&((n=l((0,e.toRaw)(t)))==null||n.remove())};return(0,e.onMounted)(()=>{r(t.editor)}),(0,e.watch)(()=>t.editor,(e,t)=>{i(t==null?null:t),r(e)}),(0,e.onBeforeUnmount)(()=>{i(t.editor)}),()=>{let r=t.editor,i=r===null?void 0:T((0,e.toRaw)(r));return(0,e.h)(`div`,{ref:n},i===void 0?[]:[(0,e.h)(F,{registry:i})])}}}),B=`autofocus.defaultBlock.dataModel.placeholder.sanitizer.hideToolbar.toolbarPosition.maxHistoryLength.historyDebounceTime.newGroupDelay.globalUndoRedo.tools.data.minHeight.logLevel.readOnly.i18n.link.linkPaste.inlineToolbar.inlineEmoji.tunes.style.theme.scrollToBlock.user.resolveUser.notifierPosition.notifier.width.onBeforeRender.onBeforePaste.onEnter.onSubmit.onError.migrations.uploader.server.ticket.persistence.collaboration.captureClicksBelowEditor`.split(`.`),V=(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},toolbarPosition:{type:String,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},inlineEmoji:{type:Boolean,default:void 0},tunes:{type:Array,default:void 0},style:{type:Object,default:void 0},theme:{type:String,default:void 0},scrollToBlock:{type:Object,default:void 0},user:{type:Object,default:void 0},resolveUser:{type:Function,default:void 0},notifierPosition:{type:String,default:void 0},notifier:{type:Function,default:void 0},width:{type:String,default:void 0},onBeforeRender:{type:Function,default:void 0},onBeforePaste:{type:Function,default:void 0},onEnter:{type:Function,default:void 0},onSubmit:{type:Function,default:void 0},onError:{type:Function,default:void 0},migrations:{type:Object,default:void 0},uploader:{type:Object,default:void 0},server:{type:String,default:void 0},ticket:{type:String,default:void 0},persistence:{type:Object,default:void 0},collaboration:{type:Object,default:void 0},captureClicksBelowEditor:{type:Boolean,default:void 0},recreateKey:{type:null}},emits:{ready:e=>!0,change:e=>!0,save:e=>!0,"update:data":e=>!0,"after-render":e=>!0,"theme-change":e=>!0,"blocks-rendered":e=>!0,"block-rendered":e=>!0},setup(t,{emit:n,expose:r,attrs:i}){let o=(0,e.getCurrentInstance)(),s=()=>{let e=o==null?void 0:o.vnode.props;return e==null?``:Object.keys(e).filter(e=>e.startsWith(`on`)).sort().join(`|`)},c=(0,e.ref)(s());(0,e.onUpdated)(()=>{c.value=s()});let l=e=>c.value.split(`|`).includes(e),u=()=>{let e={};for(let n of B){let r=t[n];r!==void 0&&(e[n]=r)}return l(`onChange`)&&(e.onChange=(e,t)=>{n(`change`,{api:e,event:t})}),(l(`onSave`)||l(`onUpdate:data`))&&(e.onSave=e=>{n(`update:data`,e),n(`save`,e)}),l(`onAfterRender`)&&(e.onAfterRender=e=>{n(`after-render`,e)}),l(`onThemeChange`)&&(e.onThemeChange=e=>{n(`theme-change`,e)}),e},d=A(()=>u(),()=>t.recreateKey);(0,e.watch)([d,c],([e],t,r)=>{if(e===null)return;let i=[];if(l(`onBlocksRendered`)){let t=e=>n(`blocks-rendered`,e);e.on(`blocks:rendered`,t),i.push([`blocks:rendered`,t])}if(l(`onBlockRendered`)){let t=e=>n(`block-rendered`,e);e.on(`block:rendered`,t),i.push([`block:rendered`,t])}r(()=>{for(let[t,n]of i)e.off(t,n)})});let f={last:null};return(0,e.watch)(d,e=>{e!==null&&e!==f.last&&(f.last=e,n(`ready`,e))}),r({instance:(0,e.computed)(()=>d.value),save:()=>{var e;return(e=d.value)==null?void 0:e.save()},focus:e=>{var t;(t=d.value)==null||t.focus(e)},render:e=>{let t=d.value;if(t!==null)return t.render(e).then(()=>{var n;(n=a(t))==null||n.markRendered(e)})}}),()=>(0,e.h)(z,g({editor:d.value},i))}}),H=[`toolbox`,`isReadOnlySupported`,`__isBlokVueBlock`],U=new Set([void 0,`user`,`api`,`convert`]),W=(e,t,r)=>{var i;e==null||(i=e.events)==null||i.emit(n.BlockChildrenMounted,{blockId:t,childIds:r.map(e=>e.id)})};function G(t){var r,i;let a=()=>(0,e.defineComponent)({name:`VueBlock(${t.type})`,props:{ctx:{type:Object,required:!0},notifyMounted:{type:Function,default:void 0}},setup(n){return(0,e.onMounted)(()=>{var e;return(e=n.notifyMounted)==null?void 0:e.call(n)}),t.setup(n.ctx)}}),o=(r=class{static get toolbox(){return t.toolbox}static get isReadOnlySupported(){return!0}constructor(r){var i,o,s;this.wrappedComponent=a(),this.mountSignalled=!1,this.hostEl=null,this.pendingDispatch=!1,this.anchorEl=null,this.toolbarAnchorRef=e=>{let t=e===null||e instanceof Element?e:e.$el;this.anchorEl=t instanceof HTMLElement?t:null},this.notifyMounted=()=>{var e;if(this.mountSignalled)return;this.mountSignalled=!0;let n={origin:this.origin,api:this.api};if((e=t.onMounted)==null||e.call(t,this.blockApi,n),U.has(this.origin)){var r;(r=t.onCreated)==null||r.call(t,this.blockApi,n)}},this.commit=e=>{let r=(0,n.fillDefaults)(t.propSchema,g(g({},this.mirror),e));(0,n.deepEqual)(r,this.mirror)||(this.mirror=r,this.lastRendered=r,this.dataRef.value=r,this.flushDispatch())},this.blockApi=r.block;let c=(i=r.config)==null?{}:i;this.registry=c[x],this.api=r.api;let l=r.api;this.pointerDrag=()=>{var e;return(l==null||(e=l.blocks)==null?void 0:e.isPointerDragActive)===!0},this.mirror=(0,n.fillDefaults)(t.propSchema,(0,e.toRaw)((o=r.data)==null?{}:o)),this.lastRendered=this.mirror,this.dataRef=(0,e.shallowRef)(this.mirror),this.readOnlyRef=(0,e.shallowRef)(r.readOnly),this.origin=(s=r.origin)==null?`api`:s;let u=this.blockApi,d=this.api;this.childrenComponent=(0,e.defineComponent)({name:`VueBlockChildren(${t.type})`,props:{childAttributes:{type:Function,default:void 0},childContentAttributes:{type:Function,default:void 0}},setup(t){let r=(0,e.ref)(null),i=(0,n.createChildDecorationLedger)(),a=()=>{if(r.value===null)return;let e=u.getChildren();(0,n.mountChildBlocks)(r.value,e),(0,n.applyChildDecoration)(i,e,{childAttributes:t.childAttributes,childContentAttributes:t.childContentAttributes}),W(d,u.id,e)};return(0,e.onMounted)(a),(0,e.onUpdated)(a),()=>(0,e.h)(`div`,{ref:r,[n.DATA_ATTR.nestedBlocks]:``})}})}render(){var e;let t=document.createElement(`div`);t.setAttribute(`data-blok-mutation-free`,`true`),this.hostEl=t;let n={data:this.dataRef,commit:this.commit,block:this.blockApi,api:this.api,readOnly:this.readOnlyRef,BlockChildren:this.childrenComponent,toolbarAnchorRef:this.toolbarAnchorRef};return(e=this.registry)==null||e.register(this.blockApi.id,{hostEl:t,component:this.wrappedComponent,props:{ctx:n,notifyMounted:this.notifyMounted}}),t}rendered(){var e;(e=t.onRendered)==null||e.call(t,this.blockApi)}save(){return this.mirror}async setData(r){var i=this;let a=(0,n.fillDefaults)(t.propSchema,(0,e.toRaw)(r==null?{}:r));return(0,n.deepEqual)(a,i.lastRendered)?!0:(i.mirror=a,i.lastRendered=a,i.dataRef.value=a,await(0,e.nextTick)(),!0)}setReadOnly(e){this.readOnlyRef.value=e}getToolbarAnchorElement(){var e;let n=this.anchorEl;if(n!==null&&n.isConnected)return n;let r=this.hostEl;if(r!==null&&t.getToolbarAnchorElement!==void 0)return(e=t.getToolbarAnchorElement(r,this.blockApi))==null?void 0:e}moved(){var e;(e=t.onMoved)==null||e.call(t,this.blockApi)}removed(){var e,n,r;(e=this.registry)==null||e.unregister(this.blockApi.id,(n=this.hostEl)==null?void 0:n),(r=t.onRemoved)==null||r.call(t,this.blockApi)}destroy(){var e,t;(e=this.registry)==null||e.unregister(this.blockApi.id,(t=this.hostEl)==null?void 0:t)}flushDispatch(){if(!this.pointerDrag()){this.pendingDispatch=!1,this.blockApi.dispatchChange();return}if(this.pendingDispatch)return;this.pendingDispatch=!0;let e=()=>{if(this.pointerDrag()){requestAnimationFrame(e);return}this.pendingDispatch=!1,this.blockApi.dispatchChange()};requestAnimationFrame(e)}},r.__isBlokVueBlock=!0,r);for(let[e,n]of Object.entries((i=t.statics)==null?{}:i))H.includes(e)||Object.defineProperty(o,e,{value:n,writable:!0,enumerable:!0,configurable:!0});return o}exports.BLOK_DEFAULT_CONFIG=_,exports.BLOK_EDITOR_INSTANCE=I,exports.BlokContent=z,exports.BlokEditor=V,exports.createVueBlock=G,exports.provideBlok=v,exports.useBlocks=M,exports.useBlok=A,exports.useBlokDefaults=y,exports.useBlokInstance=R,exports.useBlokReady=N;
package/dist/index.mjs CHANGED
@@ -1,16 +1,16 @@
1
1
  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";
2
2
  import { Blok as x } from "@bloklabs/core";
3
- import { BlockChildrenMounted as ee, DATA_ATTR as te, EMPTY_API as S, applyChildDecoration as C, changeTouchesSubtree as w, createBlocksApiForEditor as T, createChildDecorationLedger as E, deepEqual as D, equalsOutputData as ne, fillDefaults as O, mountChildBlocks as re, normalizeReadOnlyConfig as k, toRenderableData as ie } from "@bloklabs/core/adapters";
3
+ import { BlockChildrenMounted as S, DATA_ATTR as C, EMPTY_API as w, applyChildDecoration as T, changeTouchesSubtree as ee, createBlocksApiForEditor as te, createChildDecorationLedger as ne, deepEqual as E, equalsOutputData as D, fillDefaults as O, mountChildBlocks as k, normalizeReadOnlyConfig as A, toRenderableData as j } from "@bloklabs/core/adapters";
4
4
  //#region src/content-baseline-map.ts
5
- var A = /* @__PURE__ */ new WeakMap();
6
- function ae(e, t) {
7
- A.set(e, t);
5
+ var M = /* @__PURE__ */ new WeakMap();
6
+ function re(e, t) {
7
+ M.set(e, t);
8
8
  }
9
- function j(e) {
10
- return A.get(e);
9
+ function ie(e) {
10
+ return M.get(e);
11
11
  }
12
- function M(e) {
13
- A.delete(e);
12
+ function ae(e) {
13
+ M.delete(e);
14
14
  }
15
15
  //#endregion
16
16
  //#region src/holder-map.ts
@@ -25,7 +25,7 @@ function se(e) {
25
25
  N.delete(e);
26
26
  }
27
27
  //#endregion
28
- //#region \0@oxc-project+runtime@0.139.0/helpers/esm/typeof.js
28
+ //#region \0@oxc-project+runtime@0.147.0/helpers/esm/typeof.js
29
29
  function F(e) {
30
30
  "@babel/helpers - typeof";
31
31
  return F = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(e) {
@@ -35,7 +35,7 @@ function F(e) {
35
35
  }, F(e);
36
36
  }
37
37
  //#endregion
38
- //#region \0@oxc-project+runtime@0.139.0/helpers/esm/toPrimitive.js
38
+ //#region \0@oxc-project+runtime@0.147.0/helpers/esm/toPrimitive.js
39
39
  function I(e, t) {
40
40
  if (F(e) != "object" || !e) return e;
41
41
  var n = e[Symbol.toPrimitive];
@@ -47,13 +47,13 @@ function I(e, t) {
47
47
  return (t === "string" ? String : Number)(e);
48
48
  }
49
49
  //#endregion
50
- //#region \0@oxc-project+runtime@0.139.0/helpers/esm/toPropertyKey.js
50
+ //#region \0@oxc-project+runtime@0.147.0/helpers/esm/toPropertyKey.js
51
51
  function L(e) {
52
52
  var t = I(e, "string");
53
53
  return F(t) == "symbol" ? t : t + "";
54
54
  }
55
55
  //#endregion
56
- //#region \0@oxc-project+runtime@0.139.0/helpers/esm/defineProperty.js
56
+ //#region \0@oxc-project+runtime@0.147.0/helpers/esm/defineProperty.js
57
57
  function R(e, t, n) {
58
58
  return (t = L(t)) in e ? Object.defineProperty(e, t, {
59
59
  value: n,
@@ -63,7 +63,7 @@ function R(e, t, n) {
63
63
  }) : e[t] = n, e;
64
64
  }
65
65
  //#endregion
66
- //#region \0@oxc-project+runtime@0.139.0/helpers/esm/objectSpread2.js
66
+ //#region \0@oxc-project+runtime@0.147.0/helpers/esm/objectSpread2.js
67
67
  function z(e, t) {
68
68
  var n = Object.keys(e);
69
69
  if (Object.getOwnPropertySymbols) {
@@ -114,7 +114,7 @@ var G = "__blokPortalRegistry", K = () => {
114
114
  },
115
115
  unregister(t, n) {
116
116
  var r;
117
- n !== void 0 && ((r = e.get(t)) == null ? void 0 : r.hostEl) !== n || e.delete(t);
117
+ (n === void 0 || ((r = e.get(t)) == null ? void 0 : r.hostEl) === n) && e.delete(t);
118
118
  },
119
119
  setProps(t, n) {
120
120
  let r = e.get(t);
@@ -125,28 +125,28 @@ var G = "__blokPortalRegistry", K = () => {
125
125
  function ce(e, t) {
126
126
  q.set(e, t);
127
127
  }
128
- function J(e) {
128
+ function le(e) {
129
129
  return q.get(e);
130
130
  }
131
- function le(e) {
131
+ function ue(e) {
132
132
  q.delete(e);
133
133
  }
134
134
  //#endregion
135
135
  //#region src/useBlok.ts
136
- var Y = (e) => ({
136
+ var J = (e) => ({
137
137
  onChange: e.onChange !== void 0,
138
138
  onSave: e.onSave !== void 0,
139
139
  onEnter: e.onEnter !== void 0,
140
140
  onSubmit: e.onSubmit !== void 0,
141
141
  onBeforeRender: e.onBeforeRender !== void 0,
142
142
  onAfterRender: e.onAfterRender !== void 0
143
- }), ue = (e, t) => {
143
+ }), de = (e) => `[Blok] \`data\` is ignored while collaboration is on: the document lives on the sync service and is shared with everyone editing it, so replacing it from this editor would overwrite their work. To replace the whole document, call POST /sync/${e == null ? "{doc}" : e}/reset on your server — it reloads the document from your own document endpoint and every open editor picks it up. To change part of it, use the blocks API (insert/update/delete).`, fe = (e, t) => {
144
144
  if (typeof e != "object" || !e) return e;
145
145
  let n = {};
146
146
  for (let [i, a] of Object.entries(e)) {
147
147
  var r;
148
148
  let e = typeof a == "function" ? a : a == null ? void 0 : a.class;
149
- if (!(typeof e == "function" && e.__isBlokVueBlock === !0)) {
149
+ if (typeof e != "function" || e.__isBlokVueBlock !== !0) {
150
150
  n[i] = a;
151
151
  continue;
152
152
  }
@@ -155,13 +155,15 @@ var Y = (e) => ({
155
155
  }
156
156
  return n;
157
157
  };
158
- function X(e, t) {
158
+ function Y(e, t) {
159
159
  let n = _(null), r = o(V, {}), i = () => W(r, y(e)), a = {
160
160
  current: null,
161
161
  holder: null,
162
162
  lastRenderedData: i().data,
163
163
  seededEditor: null,
164
164
  renderChain: Promise.resolve(),
165
+ collaborationWarned: !1,
166
+ constructedCollaboration: void 0,
165
167
  appliedHandlerPresence: {
166
168
  onChange: !1,
167
169
  onSave: !1,
@@ -200,7 +202,7 @@ function X(e, t) {
200
202
  return delete t.holder, t.data !== void 0 && (t.data = v(t.data)), t;
201
203
  }, u = () => {
202
204
  if (a.current !== null) {
203
- se(a.current), le(a.current), M(a.current);
205
+ se(a.current), ue(a.current), ae(a.current);
204
206
  try {
205
207
  a.current.destroy();
206
208
  } catch (e) {}
@@ -210,11 +212,11 @@ function X(e, t) {
210
212
  let e = document.createElement("div");
211
213
  a.holder = e;
212
214
  let t = c(), r = K();
213
- t.tools !== void 0 && (t.tools = ue(t.tools, r));
214
- let o = Y(i());
215
+ t.tools !== void 0 && (t.tools = fe(t.tools, r));
216
+ let o = J(i());
215
217
  t.onChange = o.onChange ? s.onChange : void 0, t.onSave = o.onSave ? s.onSave : void 0, t.onEnter = o.onEnter ? s.onEnter : void 0, t.onSubmit = o.onSubmit ? s.onSubmit : void 0, t.onBeforeRender = o.onBeforeRender ? s.onBeforeRender : void 0, t.onAfterRender = o.onAfterRender ? s.onAfterRender : void 0, a.appliedHandlerPresence = o;
216
218
  let l = new x(B(B({}, t), {}, { holder: e }));
217
- a.current = l, oe(l, e), ce(l, r), ae(l, { markRendered: (e) => {
219
+ a.current = l, a.constructedCollaboration = t.collaboration, oe(l, e), ce(l, r), re(l, { markRendered: (e) => {
218
220
  a.lastRenderedData = e;
219
221
  } }), l.isReady.then(() => {
220
222
  a.current === l && (n.value = l);
@@ -224,8 +226,8 @@ function X(e, t) {
224
226
  };
225
227
  b([
226
228
  n,
227
- () => k(i().readOnly).enabled,
228
- () => k(i().readOnly).hideControls,
229
+ () => A(i().readOnly).enabled,
230
+ () => A(i().readOnly).hideControls,
229
231
  () => typeof i().readOnly == "object"
230
232
  ], ([e, t, n, r]) => {
231
233
  e && (r ? e.readOnly.set(t, { hideControls: n }) : e.readOnly.set(t));
@@ -245,14 +247,14 @@ function X(e, t) {
245
247
  var e;
246
248
  return (e = i().style) == null ? void 0 : e.tokens;
247
249
  }], ([e, t]) => {
248
- !e || t === void 0 || D(t, p.value) || (p.value = B({}, t), e.tokens.set(t));
250
+ !e || t === void 0 || E(t, p.value) || (p.value = B({}, t), e.tokens.set(t));
249
251
  }, {
250
252
  immediate: !0,
251
253
  deep: !0
252
254
  });
253
255
  let m = { value: i().i18n };
254
256
  b([n, () => i().i18n], ([e, t]) => {
255
- if (!e || t === void 0 || D(t, m.value)) return;
257
+ if (!e || t === void 0 || E(t, m.value)) return;
256
258
  m.value = B({}, t);
257
259
  let { locale: n, messages: r, direction: i } = t;
258
260
  e.i18n.update(B(B(B({}, n === void 0 ? {} : { locale: n }), r === void 0 ? {} : { messages: r }), i === void 0 ? {} : { direction: i }));
@@ -265,7 +267,7 @@ function X(e, t) {
265
267
  value: void 0
266
268
  };
267
269
  return b([n, () => i().inlineToolbar], ([e, t]) => {
268
- if (!e || t === void 0 || h.editor === e && D(t, h.value)) return;
270
+ if (!e || t === void 0 || h.editor === e && E(t, h.value)) return;
269
271
  let n = Array.isArray(t) ? [...t] : t;
270
272
  h.editor = e, h.value = n, e.tools.setInlineToolbar(n);
271
273
  }, {
@@ -273,9 +275,9 @@ function X(e, t) {
273
275
  deep: !0
274
276
  }), b([n, () => i().autofocus], ([e, t]) => {
275
277
  e && t && e.focus();
276
- }, { immediate: !0 }), b([n, () => JSON.stringify(Y(i()))], ([e]) => {
278
+ }, { immediate: !0 }), b([n, () => JSON.stringify(J(i()))], ([e]) => {
277
279
  if (!e) return;
278
- let t = Y(i()), n = a.appliedHandlerPresence, r = {}, o = { value: !1 }, c = (e, r) => {
280
+ let t = J(i()), n = a.appliedHandlerPresence, r = {}, o = { value: !1 }, c = (e, r) => {
279
281
  t[e] !== n[e] && (n[e] = t[e], o.value = !0, r(t[e] ? s[e] : void 0));
280
282
  };
281
283
  c("onChange", (e) => {
@@ -298,37 +300,43 @@ function X(e, t) {
298
300
  return;
299
301
  }
300
302
  let n = a.lastRenderedData;
301
- n !== void 0 && ne(t, n) || (a.lastRenderedData = t, a.renderChain = a.renderChain.catch(() => void 0).then(() => e.render(ie(v(t)))));
303
+ if (n !== void 0 && D(t, n)) return;
304
+ let r = a.constructedCollaboration;
305
+ if (r !== void 0) {
306
+ a.collaborationWarned || (a.collaborationWarned = !0, console.warn(de(r.doc)));
307
+ return;
308
+ }
309
+ a.lastRenderedData = t, a.renderChain = a.renderChain.catch(() => void 0).then(() => e.render(j(v(t))));
302
310
  }, { immediate: !0 }), t !== void 0 && b(() => y(t), () => {
303
311
  u(), f();
304
312
  }), d(f), l(u), n;
305
313
  }
306
314
  //#endregion
307
315
  //#region src/useBlocks.ts
308
- var Z = "block changed";
309
- function de(e, t = {}) {
316
+ var X = "block changed";
317
+ function pe(e, t = {}) {
310
318
  let n = _(0), r = () => {
311
319
  let t = y(e);
312
320
  return t === null ? null : v(t);
313
321
  }, i = () => {
314
322
  n.value;
315
- }, a = _(S), o = {
323
+ }, a = _(w), o = {
316
324
  editor: null,
317
325
  handler: null
318
326
  }, s = () => {
319
- o.editor !== null && o.handler !== null && o.editor.off(Z, o.handler), o.editor = null, o.handler = null;
327
+ o.editor !== null && o.handler !== null && o.editor.off(X, o.handler), o.editor = null, o.handler = null;
320
328
  };
321
329
  return b(() => r(), (e) => {
322
330
  if (s(), n.value += 1, e === null) {
323
- a.value = S;
331
+ a.value = w;
324
332
  return;
325
333
  }
326
334
  let r = (r) => {
327
335
  var i;
328
336
  let a = (i = y(t.within)) == null ? null : i;
329
- a !== null && !w(e, r, a) || (n.value += 1);
337
+ a !== null && !ee(e, r, a) || (n.value += 1);
330
338
  };
331
- e.on(Z, r), o.editor = e, o.handler = r, a.value = T(e, i);
339
+ e.on(X, r), o.editor = e, o.handler = r, a.value = te(e, i);
332
340
  }, { immediate: !0 }), f(s), {
333
341
  getById: (e) => a.value.getById(e),
334
342
  getChildren: (e) => a.value.getChildren(e),
@@ -363,7 +371,7 @@ function de(e, t = {}) {
363
371
  }
364
372
  //#endregion
365
373
  //#region src/useBlokReady.ts
366
- function fe(e = {}) {
374
+ function me(e = {}) {
367
375
  let { within: t, settleOn: n } = e, r = _(!1), i = () => {
368
376
  var e;
369
377
  let i = t === void 0 || (e = y(t)) == null ? null : e;
@@ -376,7 +384,7 @@ function fe(e = {}) {
376
384
  }
377
385
  //#endregion
378
386
  //#region src/BlockPortalHost.ts
379
- var pe = r({
387
+ var he = r({
380
388
  name: "BlockErrorBoundary",
381
389
  setup(e, { slots: t }) {
382
390
  return u(() => !1), () => {
@@ -384,7 +392,7 @@ var pe = r({
384
392
  return (e = t.default) == null ? void 0 : e.call(t);
385
393
  };
386
394
  }
387
- }), me = r({
395
+ }), ge = r({
388
396
  name: "BlockPortalHost",
389
397
  props: { registry: {
390
398
  type: Object,
@@ -394,11 +402,11 @@ var pe = r({
394
402
  return () => a(e, Array.from(n.registry.entries.entries()).map(([e, n]) => a(t, {
395
403
  key: e,
396
404
  to: n.hostEl
397
- }, [a(pe, null, { default: () => a(n.component, n.props) })])));
405
+ }, [a(he, null, { default: () => a(n.component, n.props) })])));
398
406
  }
399
- }), Q = Symbol("BLOK_EDITOR_INSTANCE"), he = _(null);
400
- function ge() {
401
- return o(Q, he);
407
+ }), Z = Symbol("BLOK_EDITOR_INSTANCE"), _e = _(null);
408
+ function Q() {
409
+ return o(Z, _e);
402
410
  }
403
411
  //#endregion
404
412
  //#region src/BlokContent.ts
@@ -410,7 +418,7 @@ var $ = r({
410
418
  } },
411
419
  setup(e) {
412
420
  let t = g(null);
413
- m(Q, n(() => e.editor === null ? null : v(e.editor)));
421
+ m(Z, n(() => e.editor === null ? null : v(e.editor)));
414
422
  let r = (e) => {
415
423
  if (t.value === null || e === null) return;
416
424
  let n = P(v(e));
@@ -426,11 +434,11 @@ var $ = r({
426
434
  }), l(() => {
427
435
  i(e.editor);
428
436
  }), () => {
429
- let n = e.editor, r = n === null ? void 0 : J(v(n));
430
- return a("div", { ref: t }, r === void 0 ? [] : [a(me, { registry: r })]);
437
+ let n = e.editor, r = n === null ? void 0 : le(v(n));
438
+ return a("div", { ref: t }, r === void 0 ? [] : [a(ge, { registry: r })]);
431
439
  };
432
440
  }
433
- }), _e = /* @__PURE__ */ "autofocus.defaultBlock.dataModel.placeholder.sanitizer.hideToolbar.toolbarPosition.maxHistoryLength.historyDebounceTime.newGroupDelay.globalUndoRedo.tools.data.minHeight.logLevel.readOnly.i18n.link.linkPaste.inlineToolbar.tunes.style.theme.scrollToBlock.user.resolveUser.notifierPosition.notifier.width.onBeforeRender.onBeforePaste.onEnter.onSubmit.onError.migrations.uploader.captureClicksBelowEditor".split("."), ve = r({
441
+ }), ve = /* @__PURE__ */ "autofocus.defaultBlock.dataModel.placeholder.sanitizer.hideToolbar.toolbarPosition.maxHistoryLength.historyDebounceTime.newGroupDelay.globalUndoRedo.tools.data.minHeight.logLevel.readOnly.i18n.link.linkPaste.inlineToolbar.inlineEmoji.tunes.style.theme.scrollToBlock.user.resolveUser.notifierPosition.notifier.width.onBeforeRender.onBeforePaste.onEnter.onSubmit.onError.migrations.uploader.server.ticket.persistence.collaboration.captureClicksBelowEditor".split("."), ye = r({
434
442
  name: "BlokEditor",
435
443
  inheritAttrs: !1,
436
444
  props: {
@@ -514,6 +522,10 @@ var $ = r({
514
522
  type: [Array, Boolean],
515
523
  default: void 0
516
524
  },
525
+ inlineEmoji: {
526
+ type: Boolean,
527
+ default: void 0
528
+ },
517
529
  tunes: {
518
530
  type: Array,
519
531
  default: void 0
@@ -578,6 +590,22 @@ var $ = r({
578
590
  type: Object,
579
591
  default: void 0
580
592
  },
593
+ server: {
594
+ type: String,
595
+ default: void 0
596
+ },
597
+ ticket: {
598
+ type: String,
599
+ default: void 0
600
+ },
601
+ persistence: {
602
+ type: Object,
603
+ default: void 0
604
+ },
605
+ collaboration: {
606
+ type: Object,
607
+ default: void 0
608
+ },
581
609
  captureClicksBelowEditor: {
582
610
  type: Boolean,
583
611
  default: void 0
@@ -604,7 +632,7 @@ var $ = r({
604
632
  });
605
633
  let u = (e) => l.value.split("|").includes(e), d = () => {
606
634
  let n = {};
607
- for (let t of _e) {
635
+ for (let t of ve) {
608
636
  let r = e[t];
609
637
  r !== void 0 && (n[t] = r);
610
638
  }
@@ -620,7 +648,7 @@ var $ = r({
620
648
  }), u("onThemeChange") && (n.onThemeChange = (e) => {
621
649
  t("theme-change", e);
622
650
  }), n;
623
- }, f = X(() => d(), () => e.recreateKey);
651
+ }, f = Y(() => d(), () => e.recreateKey);
624
652
  b([f, l], ([e], n, r) => {
625
653
  if (e === null) return;
626
654
  let i = [];
@@ -653,28 +681,28 @@ var $ = r({
653
681
  let t = f.value;
654
682
  if (t !== null) return t.render(e).then(() => {
655
683
  var n;
656
- (n = j(t)) == null || n.markRendered(e);
684
+ (n = ie(t)) == null || n.markRendered(e);
657
685
  });
658
686
  }
659
687
  }), () => a($, B({ editor: f.value }, o));
660
688
  }
661
- }), ye = [
689
+ }), be = [
662
690
  "toolbox",
663
691
  "isReadOnlySupported",
664
692
  "__isBlokVueBlock"
665
- ], be = /* @__PURE__ */ new Set([
693
+ ], xe = /* @__PURE__ */ new Set([
666
694
  void 0,
667
695
  "user",
668
696
  "api",
669
697
  "convert"
670
- ]), xe = (e, t, n) => {
698
+ ]), Se = (e, t, n) => {
671
699
  var r;
672
- e == null || (r = e.events) == null || r.emit(ee, {
700
+ e == null || (r = e.events) == null || r.emit(S, {
673
701
  blockId: t,
674
702
  childIds: n.map((e) => e.id)
675
703
  });
676
704
  };
677
- function Se(e) {
705
+ function Ce(e) {
678
706
  var t, n;
679
707
  let i = () => r({
680
708
  name: `VueBlock(${e.type})`,
@@ -714,13 +742,13 @@ function Se(e) {
714
742
  origin: this.origin,
715
743
  api: this.api
716
744
  };
717
- if ((t = e.onMounted) == null || t.call(e, this.blockApi, n), be.has(this.origin)) {
745
+ if ((t = e.onMounted) == null || t.call(e, this.blockApi, n), xe.has(this.origin)) {
718
746
  var r;
719
747
  (r = e.onCreated) == null || r.call(e, this.blockApi, n);
720
748
  }
721
749
  }, this.commit = (t) => {
722
750
  let n = O(e.propSchema, B(B({}, this.mirror), t));
723
- D(n, this.mirror) || (this.mirror = n, this.lastRendered = n, this.dataRef.value = n, this.flushDispatch());
751
+ E(n, this.mirror) || (this.mirror = n, this.lastRendered = n, this.dataRef.value = n, this.flushDispatch());
724
752
  }, this.blockApi = t.block;
725
753
  let c = (n = t.config) == null ? {} : n;
726
754
  this.registry = c[G], this.api = t.api;
@@ -743,17 +771,17 @@ function Se(e) {
743
771
  }
744
772
  },
745
773
  setup(e) {
746
- let t = g(null), n = E(), r = () => {
774
+ let t = g(null), n = ne(), r = () => {
747
775
  if (t.value === null) return;
748
776
  let r = u.getChildren();
749
- re(t.value, r), C(n, r, {
777
+ k(t.value, r), T(n, r, {
750
778
  childAttributes: e.childAttributes,
751
779
  childContentAttributes: e.childContentAttributes
752
- }), xe(f, u.id, r);
780
+ }), Se(f, u.id, r);
753
781
  };
754
782
  return d(r), p(r), () => a("div", {
755
783
  ref: t,
756
- [te.nestedBlocks]: ""
784
+ [C.nestedBlocks]: ""
757
785
  });
758
786
  }
759
787
  });
@@ -790,7 +818,7 @@ function Se(e) {
790
818
  async setData(t) {
791
819
  var n = this;
792
820
  let r = O(e.propSchema, v(t == null ? {} : t));
793
- return D(r, n.lastRendered) ? !0 : (n.mirror = r, n.lastRendered = r, n.dataRef.value = r, await c(), !0);
821
+ return E(r, n.lastRendered) ? !0 : (n.mirror = r, n.lastRendered = r, n.dataRef.value = r, await c(), !0);
794
822
  }
795
823
  setReadOnly(e) {
796
824
  this.readOnlyRef.value = e;
@@ -800,7 +828,7 @@ function Se(e) {
800
828
  let n = this.anchorEl;
801
829
  if (n !== null && n.isConnected) return n;
802
830
  let r = this.hostEl;
803
- if (!(r === null || e.getToolbarAnchorElement === void 0)) return (t = e.getToolbarAnchorElement(r, this.blockApi)) == null ? void 0 : t;
831
+ if (r !== null && e.getToolbarAnchorElement !== void 0) return (t = e.getToolbarAnchorElement(r, this.blockApi)) == null ? void 0 : t;
804
832
  }
805
833
  moved() {
806
834
  var t;
@@ -831,7 +859,7 @@ function Se(e) {
831
859
  requestAnimationFrame(e);
832
860
  }
833
861
  }, t.__isBlokVueBlock = !0, t);
834
- for (let [t, r] of Object.entries((n = e.statics) == null ? {} : n)) ye.includes(t) || Object.defineProperty(o, t, {
862
+ for (let [t, r] of Object.entries((n = e.statics) == null ? {} : n)) be.includes(t) || Object.defineProperty(o, t, {
835
863
  value: r,
836
864
  writable: !0,
837
865
  enumerable: !0,
@@ -840,4 +868,4 @@ function Se(e) {
840
868
  return o;
841
869
  }
842
870
  //#endregion
843
- export { V as BLOK_DEFAULT_CONFIG, Q as BLOK_EDITOR_INSTANCE, $ as BlokContent, ve as BlokEditor, Se as createVueBlock, H as provideBlok, de as useBlocks, X as useBlok, U as useBlokDefaults, ge as useBlokInstance, fe as useBlokReady };
871
+ export { V as BLOK_DEFAULT_CONFIG, Z as BLOK_EDITOR_INSTANCE, $ as BlokContent, ye as BlokEditor, Ce as createVueBlock, H as provideBlok, pe as useBlocks, Y as useBlok, U as useBlokDefaults, Q as useBlokInstance, me as useBlokReady };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bloklabs/vue",
3
- "version": "1.12.0",
3
+ "version": "1.14.0",
4
4
  "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.",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JackUait",
@@ -54,7 +54,7 @@
54
54
  "build": "yarn run -T vite build --mode production"
55
55
  },
56
56
  "peerDependencies": {
57
- "@bloklabs/core": "^1.12.0",
57
+ "@bloklabs/core": "^1.14.0",
58
58
  "vue": "^3.5.0"
59
59
  }
60
60
  }
package/src/BlokEditor.ts CHANGED
@@ -54,6 +54,7 @@ export const BlokEditor = defineComponent({
54
54
  link: { type: Object as PropType<BlokConfig['link']>, default: undefined },
55
55
  linkPaste: { type: Object as PropType<BlokConfig['linkPaste']>, default: undefined },
56
56
  inlineToolbar: { type: [Array, Boolean] as PropType<string[] | boolean>, default: undefined },
57
+ inlineEmoji: { type: Boolean as PropType<boolean | undefined>, default: undefined },
57
58
  tunes: { type: Array as PropType<string[]>, default: undefined },
58
59
  style: { type: Object as PropType<BlokConfig['style']>, default: undefined },
59
60
  theme: { type: String as PropType<ThemeMode>, default: undefined },
@@ -77,6 +78,14 @@ export const BlokEditor = defineComponent({
77
78
  migrations: { type: Object as PropType<BlokConfig['migrations']>, default: undefined },
78
79
  /** Editor-level uploader, routed by asset kind (images, video, audio, files). */
79
80
  uploader: { type: Object as PropType<BlokConfig['uploader']>, default: undefined },
81
+ /** Base URL of a service speaking Blok's upload and unfurl contracts. */
82
+ server: { type: String as PropType<BlokConfig['server']>, default: undefined },
83
+ /** Endpoint in your app that mints a short-lived access pass for the current user. */
84
+ ticket: { type: String as PropType<BlokConfig['ticket']>, default: undefined },
85
+ /** Load on mount and save on change, against your own endpoint. */
86
+ persistence: { type: Object as PropType<BlokConfig['persistence']>, default: undefined },
87
+ /** Real-time multiplayer against the server's sync service. Mutually exclusive with persistence. */
88
+ collaboration: { type: Object as PropType<BlokConfig['collaboration']>, default: undefined },
80
89
  /** Opt-in: clicks on the host page below the editor append a block. */
81
90
  captureClicksBelowEditor: { type: Boolean as PropType<boolean | undefined>, default: undefined },
82
91
  /** Changing this prop's identity destroys and recreates the editor. */
@@ -34,6 +34,7 @@ export const BLOK_EDITOR_CONFIG_KEYS = [
34
34
  'link',
35
35
  'linkPaste',
36
36
  'inlineToolbar',
37
+ 'inlineEmoji',
37
38
  'tunes',
38
39
  'style',
39
40
  'theme',
@@ -50,6 +51,10 @@ export const BLOK_EDITOR_CONFIG_KEYS = [
50
51
  'onError',
51
52
  'migrations',
52
53
  'uploader',
54
+ 'server',
55
+ 'ticket',
56
+ 'persistence',
57
+ 'collaboration',
53
58
  'captureClicksBelowEditor',
54
59
  ] as const satisfies readonly (keyof UseBlokConfig)[];
55
60
 
package/src/useBlok.ts CHANGED
@@ -43,6 +43,19 @@ const readHandlerPresence = (config: UseBlokConfig): HandlerPresence => ({
43
43
  onAfterRender: config.onAfterRender !== undefined,
44
44
  });
45
45
 
46
+ /**
47
+ * Warning text for a controlled `data` change the adapter refuses to render
48
+ * under collaboration. Kept verbatim in all three adapters (they share no code).
49
+ * @param doc - the collaboration document id, for the reset endpoint in the text
50
+ * @returns the message to warn with, once per adapter instance
51
+ */
52
+ const collaborationDataIgnoredMessage = (doc?: string): string =>
53
+ '[Blok] `data` is ignored while collaboration is on: the document lives on the sync service ' +
54
+ 'and is shared with everyone editing it, so replacing it from this editor would overwrite their work. ' +
55
+ `To replace the whole document, call POST /sync/${doc ?? '{doc}'}/reset on your server — ` +
56
+ 'it reloads the document from your own document endpoint and every open editor picks it up. ' +
57
+ 'To change part of it, use the blocks API (insert/update/delete).';
58
+
46
59
  /**
47
60
  * Inject the editor's portal registry into every `createVueBlock` tool's config
48
61
  * (vanilla tools are left untouched), returning a NEW tools object so the
@@ -126,6 +139,14 @@ export function useBlok(
126
139
  lastRenderedData: OutputData | LooseOutputData | null | undefined;
127
140
  seededEditor: Blok | null;
128
141
  renderChain: Promise<void>;
142
+ collaborationWarned: boolean;
143
+ // The `collaboration` the live editor was CONSTRUCTED with. The key is
144
+ // mount-fixed, so dropping it from the config (`collaboration: on ? {...} :
145
+ // undefined`) cannot turn a live session into a single-player editor —
146
+ // reading the current config instead would let that change fall through
147
+ // into render(), which refuses under collaboration and rejects with
148
+ // nothing surfaced anywhere.
149
+ constructedCollaboration: UseBlokConfig['collaboration'];
129
150
  appliedHandlerPresence: HandlerPresence;
130
151
  } = {
131
152
  current: null,
@@ -133,6 +154,8 @@ export function useBlok(
133
154
  lastRenderedData: mergedConfig().data,
134
155
  seededEditor: null,
135
156
  renderChain: Promise.resolve(),
157
+ collaborationWarned: false,
158
+ constructedCollaboration: undefined,
136
159
  appliedHandlerPresence: {
137
160
  onChange: false,
138
161
  onSave: false,
@@ -246,6 +269,7 @@ export function useBlok(
246
269
  const blok = new BlokRuntime({ ...snapshot, holder });
247
270
 
248
271
  state.current = blok;
272
+ state.constructedCollaboration = snapshot.collaboration as UseBlokConfig['collaboration'];
249
273
  setHolder(blok, holder);
250
274
  setRegistry(blok, registry);
251
275
  // The out-of-band content channel: `<BlokEditor>`'s exposed `render()`
@@ -531,6 +555,24 @@ export function useBlok(
531
555
  return;
532
556
  }
533
557
 
558
+ // Under collaboration the document belongs to the sync service, and
559
+ // render() refuses a wholesale replace — so don't attempt one. The prop's
560
+ // premise ("this value IS the document") does not hold here. Decided
561
+ // against the MOUNTED config, never the current one: `collaboration` is
562
+ // mount-fixed, so a host that drops the key is still driving a
563
+ // collaboration session and deserves the warning rather than a silently
564
+ // rejected render.
565
+ const collaboration = state.constructedCollaboration;
566
+
567
+ if (collaboration !== undefined) {
568
+ if (!state.collaborationWarned) {
569
+ state.collaborationWarned = true;
570
+ console.warn(collaborationDataIgnoredMessage(collaboration.doc));
571
+ }
572
+
573
+ return;
574
+ }
575
+
534
576
  state.lastRenderedData = data;
535
577
  // `data` may be null (a controlled "clear to empty"); render() throws on
536
578
  // null, so normalize null → { blocks: [] } at the boundary. toRaw(null)