@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 +2 -2
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +96 -68
- package/package.json +2 -2
- package/src/BlokEditor.ts +9 -0
- package/src/config-keys.ts +5 -0
- package/src/useBlok.ts +42 -0
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)
|
|
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
|
|
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
|
|
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
|
|
6
|
-
function
|
|
7
|
-
|
|
5
|
+
var M = /* @__PURE__ */ new WeakMap();
|
|
6
|
+
function re(e, t) {
|
|
7
|
+
M.set(e, t);
|
|
8
8
|
}
|
|
9
|
-
function
|
|
10
|
-
return
|
|
9
|
+
function ie(e) {
|
|
10
|
+
return M.get(e);
|
|
11
11
|
}
|
|
12
|
-
function
|
|
13
|
-
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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
|
|
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
|
|
128
|
+
function le(e) {
|
|
129
129
|
return q.get(e);
|
|
130
130
|
}
|
|
131
|
-
function
|
|
131
|
+
function ue(e) {
|
|
132
132
|
q.delete(e);
|
|
133
133
|
}
|
|
134
134
|
//#endregion
|
|
135
135
|
//#region src/useBlok.ts
|
|
136
|
-
var
|
|
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
|
-
}),
|
|
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 (
|
|
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
|
|
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),
|
|
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 =
|
|
214
|
-
let o =
|
|
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),
|
|
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
|
-
() =>
|
|
228
|
-
() =>
|
|
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 ||
|
|
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 ||
|
|
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 &&
|
|
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(
|
|
278
|
+
}, { immediate: !0 }), b([n, () => JSON.stringify(J(i()))], ([e]) => {
|
|
277
279
|
if (!e) return;
|
|
278
|
-
let t =
|
|
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 &&
|
|
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
|
|
309
|
-
function
|
|
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 = _(
|
|
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(
|
|
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 =
|
|
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 && !
|
|
337
|
+
a !== null && !ee(e, r, a) || (n.value += 1);
|
|
330
338
|
};
|
|
331
|
-
e.on(
|
|
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
|
|
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
|
|
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
|
-
}),
|
|
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(
|
|
405
|
+
}, [a(he, null, { default: () => a(n.component, n.props) })])));
|
|
398
406
|
}
|
|
399
|
-
}),
|
|
400
|
-
function
|
|
401
|
-
return o(
|
|
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(
|
|
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 :
|
|
430
|
-
return a("div", { ref: t }, r === void 0 ? [] : [a(
|
|
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
|
-
}),
|
|
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
|
|
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 =
|
|
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 =
|
|
684
|
+
(n = ie(t)) == null || n.markRendered(e);
|
|
657
685
|
});
|
|
658
686
|
}
|
|
659
687
|
}), () => a($, B({ editor: f.value }, o));
|
|
660
688
|
}
|
|
661
|
-
}),
|
|
689
|
+
}), be = [
|
|
662
690
|
"toolbox",
|
|
663
691
|
"isReadOnlySupported",
|
|
664
692
|
"__isBlokVueBlock"
|
|
665
|
-
],
|
|
693
|
+
], xe = /* @__PURE__ */ new Set([
|
|
666
694
|
void 0,
|
|
667
695
|
"user",
|
|
668
696
|
"api",
|
|
669
697
|
"convert"
|
|
670
|
-
]),
|
|
698
|
+
]), Se = (e, t, n) => {
|
|
671
699
|
var r;
|
|
672
|
-
e == null || (r = e.events) == null || r.emit(
|
|
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
|
|
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),
|
|
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
|
-
|
|
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 =
|
|
774
|
+
let t = g(null), n = ne(), r = () => {
|
|
747
775
|
if (t.value === null) return;
|
|
748
776
|
let r = u.getChildren();
|
|
749
|
-
|
|
777
|
+
k(t.value, r), T(n, r, {
|
|
750
778
|
childAttributes: e.childAttributes,
|
|
751
779
|
childContentAttributes: e.childContentAttributes
|
|
752
|
-
}),
|
|
780
|
+
}), Se(f, u.id, r);
|
|
753
781
|
};
|
|
754
782
|
return d(r), p(r), () => a("div", {
|
|
755
783
|
ref: t,
|
|
756
|
-
[
|
|
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
|
|
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 (
|
|
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))
|
|
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,
|
|
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.
|
|
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.
|
|
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. */
|
package/src/config-keys.ts
CHANGED
|
@@ -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)
|