@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
2 lines • 8.79 kB
JavaScript
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../../chunk-Bmb41Sf3.cjs`);let e=require(`vue`),t=require(`/core`);function n(t){return(0,e.customRef)((e,n)=>({get(){return e(),t},set(e){t=e,requestAnimationFrame(()=>{requestAnimationFrame(()=>{n()})})}}))}var r=class extends t.Editor{constructor(t={}){return super(t),this.contentComponent=null,this.appContext=null,this.reactiveState=n(this.view.state),this.reactiveExtensionStorage=n(this.extensionStorage),this.on(`beforeTransaction`,({nextState:e})=>{this.reactiveState.value=e,this.reactiveExtensionStorage.value=this.extensionStorage}),(0,e.markRaw)(this)}get state(){return this.reactiveState?this.reactiveState.value:this.view.state}get storage(){return this.reactiveExtensionStorage?this.reactiveExtensionStorage.value:super.storage}registerPlugin(e,t){let n=super.registerPlugin(e,t);return this.reactiveState&&(this.reactiveState.value=n),n}unregisterPlugin(e){let t=super.unregisterPlugin(e);return this.reactiveState&&t&&(this.reactiveState.value=t),t}},i=(0,e.defineComponent)({name:`EditorContent`,props:{editor:{default:null,type:Object}},setup(t){let n=(0,e.ref)(),r=(0,e.getCurrentInstance)();return(0,e.watchEffect)(()=>{let i=t.editor;i&&i.options.element&&n.value&&(0,e.nextTick)(()=>{if(!n.value||!i.view.dom?.parentNode)return;let t=(0,e.unref)(n.value);n.value.append(...i.view.dom.parentNode.childNodes),i.contentComponent=r.ctx._,r&&(i.appContext={...r.appContext,provides:r.provides}),i.setOptions({element:t}),i.createNodeViews()})}),(0,e.onBeforeUnmount)(()=>{let e=t.editor;e&&(e.contentComponent=null,e.appContext=null)}),{rootEl:n}},render(){return(0,e.h)(`div`,{ref:e=>{this.rootEl=e}})}}),a=(0,e.defineComponent)({name:`NodeViewContent`,props:{as:{type:String,default:`div`}},render(){return(0,e.h)(this.as,{style:{whiteSpace:`pre-wrap`},"data-node-view-content":``})}}),o=(0,e.defineComponent)({name:`NodeViewWrapper`,props:{as:{type:String,default:`div`}},inject:[`onDragStart`,`decorationClasses`],render(){var t;return(0,e.h)(this.as,{class:this.decorationClasses,style:{whiteSpace:`normal`},"data-node-view-wrapper":``,onDragstart:this.onDragStart},(t=this.$slots).default?.call(t))}}),s=(t={})=>{let n=(0,e.shallowRef)();return(0,e.onMounted)(()=>{n.value=new r(t)}),(0,e.onBeforeUnmount)(()=>{var e,t;let r=n.value?.view.dom?.parentNode,i=r?.cloneNode(!0);(e=r?.parentNode)==null||e.replaceChild(i,r),(t=n.value)==null||t.destroy()}),n},c=class{constructor(t,{props:n={},editor:r}){this.destroyed=!1,this.editor=r,this.component=(0,e.markRaw)(t),this.el=document.createElement(`div`),this.props=(0,e.reactive)(n),this.renderedComponent=this.renderComponent()}get element(){return this.renderedComponent.el}get ref(){return this.renderedComponent.vNode?.component?.exposed?this.renderedComponent.vNode.component.exposed:this.renderedComponent.vNode?.component?.proxy}renderComponent(){if(this.destroyed)return this.renderedComponent;let t=(0,e.h)(this.component,this.props);return this.editor.appContext&&(t.appContext=this.editor.appContext),typeof document<`u`&&this.el&&(0,e.render)(t,this.el),{vNode:t,destroy:()=>{this.el&&(0,e.render)(null,this.el),this.el=null,t=null},el:this.el?this.el.firstElementChild:null}}updateProps(e={}){this.destroyed||(Object.entries(e).forEach(([e,t])=>{this.props[e]=t}),this.renderComponent())}destroy(){this.destroyed||(this.destroyed=!0,this.renderedComponent.destroy())}},l={editor:{type:Object,required:!0},mark:{type:Object,required:!0},extension:{type:Object,required:!0},inline:{type:Boolean,required:!0},view:{type:Object,required:!0},updateAttributes:{type:Function,required:!0},HTMLAttributes:{type:Object,required:!0}},u=(0,e.defineComponent)({name:`MarkViewContent`,props:{as:{type:String,default:`span`}},render(){return(0,e.h)(this.as,{style:{whiteSpace:`inherit`},"data-mark-view-content":``})}}),d=class extends t.MarkView{constructor(t,n,r){super(t,n,r);let i={...n,updateAttributes:this.updateAttributes.bind(this)};this.renderer=new c((0,e.defineComponent)({extends:{...t},props:Object.keys(i),template:this.component.template,setup:e=>t.setup?.call(t,e,{expose:()=>void 0}),__scopeId:t.__scopeId,__cssModules:t.__cssModules,__name:t.__name,__file:t.__file}),{editor:this.editor,props:i})}get dom(){return this.renderer.element}get contentDOM(){return this.dom.querySelector(`[data-mark-view-content]`)}updateAttributes(t){let n=(0,e.toRaw)(this.mark);super.updateAttributes(t,n)}destroy(){this.renderer.destroy()}};function f(e,t={}){return n=>n.editor.contentComponent?new d(e,n,t):{}}var p={editor:{type:Object,required:!0},node:{type:Object,required:!0},decorations:{type:Object,required:!0},selected:{type:Boolean,required:!0},extension:{type:Object,required:!0},getPos:{type:Function,required:!0},updateAttributes:{type:Function,required:!0},deleteNode:{type:Function,required:!0},view:{type:Object,required:!0},innerDecorations:{type:Object,required:!0},HTMLAttributes:{type:Object,required:!0}},m=class extends t.NodeView{constructor(){super(...arguments),this.cachedExtensionWithSyncedStorage=null}get extensionWithSyncedStorage(){if(!this.cachedExtensionWithSyncedStorage){let e=this.editor,t=this.extension;this.cachedExtensionWithSyncedStorage=new Proxy(t,{get(n,r,i){return r===`storage`?e.storage[t.name]??{}:Reflect.get(n,r,i)}})}return this.cachedExtensionWithSyncedStorage}mount(){let t={editor:this.editor,node:this.node,decorations:this.decorations,innerDecorations:this.innerDecorations,view:this.view,selected:!1,extension:this.extensionWithSyncedStorage,HTMLAttributes:this.HTMLAttributes,getPos:()=>this.getPos(),updateAttributes:(e={})=>this.updateAttributes(e),deleteNode:()=>this.deleteNode()},n=this.onDragStart.bind(this);this.decorationClasses=(0,e.ref)(this.getDecorationClasses());let r=(0,e.defineComponent)({extends:{...this.component},props:Object.keys(t),template:this.component.template,setup:t=>{var r;return(0,e.provide)(`onDragStart`,n),(0,e.provide)(`decorationClasses`,this.decorationClasses),(r=this.component).setup?.call(r,t,{expose:()=>void 0})},__scopeId:this.component.__scopeId,__cssModules:this.component.__cssModules,__name:this.component.__name,__file:this.component.__file});this.handleSelectionUpdate=this.handleSelectionUpdate.bind(this),this.editor.on(`selectionUpdate`,this.handleSelectionUpdate),this.renderer=new c(r,{editor:this.editor,props:t})}get dom(){if(!this.renderer.element||!this.renderer.element.hasAttribute(`data-node-view-wrapper`))throw Error(`Please use the NodeViewWrapper component for your node view.`);return this.renderer.element}get contentDOM(){return this.node.isLeaf?null:this.dom.querySelector(`[data-node-view-content]`)}handleSelectionUpdate(){let{from:e,to:t}=this.editor.state.selection,n=this.getPos();if(typeof n==`number`)if(e<=n&&t>=n+this.node.nodeSize){if(this.renderer.props.selected)return;this.selectNode()}else{if(!this.renderer.props.selected)return;this.deselectNode()}}update(e,t,n){let r=e=>{this.decorationClasses.value=this.getDecorationClasses(),this.renderer.updateProps(e)};if(typeof this.options.update==`function`){let i=this.node,a=this.decorations,o=this.innerDecorations;return this.node=e,this.decorations=t,this.innerDecorations=n,this.options.update({oldNode:i,oldDecorations:a,newNode:e,newDecorations:t,oldInnerDecorations:o,innerDecorations:n,updateProps:()=>r({node:e,decorations:t,innerDecorations:n,extension:this.extensionWithSyncedStorage})})}return e.type===this.node.type?e===this.node&&this.decorations===t&&this.innerDecorations===n?!0:(this.node=e,this.decorations=t,this.innerDecorations=n,r({node:e,decorations:t,innerDecorations:n,extension:this.extensionWithSyncedStorage}),!0):!1}selectNode(){this.renderer.updateProps({selected:!0}),this.renderer.element&&this.renderer.element.classList.add(`ProseMirror-selectednode`)}deselectNode(){this.renderer.updateProps({selected:!1}),this.renderer.element&&this.renderer.element.classList.remove(`ProseMirror-selectednode`)}getDecorationClasses(){return this.decorations.flatMap(e=>e.type.attrs.class).join(` `)}destroy(){this.renderer.destroy(),this.editor.off(`selectionUpdate`,this.handleSelectionUpdate)}};function h(e,t){return n=>n.editor.contentComponent?new m(typeof e==`function`&&`__vccOpts`in e?e.__vccOpts:e,n,t):{}}exports.Editor=r,exports.EditorContent=i,exports.MarkViewContent=u,exports.NodeViewContent=a,exports.NodeViewWrapper=o,exports.VueMarkView=d,exports.VueMarkViewRenderer=f,exports.VueNodeViewRenderer=h,exports.VueRenderer=c,exports.markViewProps=l,exports.nodeViewProps=p,exports.useEditor=s,Object.keys(t).forEach(function(e){e!==`default`&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return t[e]}})});
//# sourceMappingURL=vue-3.cjs.map