UNPKG

@dialpad/dialtone

Version:

Dialpad's Dialtone design system monorepo

3 lines (2 loc) 8.6 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("@tiptap/extension-bubble-menu"),o=require("vue"),u=require("@tiptap/core"),f=require("@tiptap/extension-floating-menu"),v=o.defineComponent({name:"BubbleMenu",props:{pluginKey:{type:[String,Object],default:"bubbleMenu"},editor:{type:Object,required:!0},updateDelay:{type:Number,default:void 0},tippyOptions:{type:Object,default:()=>({})},shouldShow:{type:Function,default:null}},setup(r,{slots:t}){const n=o.ref(null);return o.onMounted(()=>{const{updateDelay:e,editor:i,pluginKey:s,shouldShow:d,tippyOptions:l}=r;i.registerPlugin(h.BubbleMenuPlugin({updateDelay:e,editor:i,element:n.value,pluginKey:s,shouldShow:d,tippyOptions:l}))}),o.onBeforeUnmount(()=>{const{pluginKey:e,editor:i}=r;i.unregisterPlugin(e)}),()=>{var e;return o.h("div",{ref:n},(e=t.default)===null||e===void 0?void 0:e.call(t))}}});function a(r){return o.customRef((t,n)=>({get(){return t(),r},set(e){r=e,requestAnimationFrame(()=>{requestAnimationFrame(()=>{n()})})}}))}class p extends u.Editor{constructor(t={}){return super(t),this.contentComponent=null,this.appContext=null,this.reactiveState=a(this.view.state),this.reactiveExtensionStorage=a(this.extensionStorage),this.on("beforeTransaction",({nextState:n})=>{this.reactiveState.value=n,this.reactiveExtensionStorage.value=this.extensionStorage}),o.markRaw(this)}get state(){return this.reactiveState?this.reactiveState.value:this.view.state}get storage(){return this.reactiveExtensionStorage?this.reactiveExtensionStorage.value:super.storage}registerPlugin(t,n){const e=super.registerPlugin(t,n);return this.reactiveState&&(this.reactiveState.value=e),e}unregisterPlugin(t){const n=super.unregisterPlugin(t);return this.reactiveState&&n&&(this.reactiveState.value=n),n}}const m=o.defineComponent({name:"EditorContent",props:{editor:{default:null,type:Object}},setup(r){const t=o.ref(),n=o.getCurrentInstance();return o.watchEffect(()=>{const e=r.editor;e&&e.options.element&&t.value&&o.nextTick(()=>{if(!t.value||!e.options.element.firstChild)return;const i=o.unref(t.value);t.value.append(...e.options.element.childNodes),e.contentComponent=n.ctx._,n&&(e.appContext={...n.appContext,provides:n.provides}),e.setOptions({element:i}),e.createNodeViews()})}),o.onBeforeUnmount(()=>{const e=r.editor;e&&(e.contentComponent=null,e.appContext=null)}),{rootEl:t}},render(){return o.h("div",{ref:r=>{this.rootEl=r}})}}),g=o.defineComponent({name:"FloatingMenu",props:{pluginKey:{type:null,default:"floatingMenu"},editor:{type:Object,required:!0},tippyOptions:{type:Object,default:()=>({})},shouldShow:{type:Function,default:null}},setup(r,{slots:t}){const n=o.ref(null);return o.onMounted(()=>{const{pluginKey:e,editor:i,tippyOptions:s,shouldShow:d}=r;i.registerPlugin(f.FloatingMenuPlugin({pluginKey:e,editor:i,element:n.value,tippyOptions:s,shouldShow:d}))}),o.onBeforeUnmount(()=>{const{pluginKey:e,editor:i}=r;i.unregisterPlugin(e)}),()=>{var e;return o.h("div",{ref:n},(e=t.default)===null||e===void 0?void 0:e.call(t))}}}),y=o.defineComponent({name:"NodeViewContent",props:{as:{type:String,default:"div"}},render(){return o.h(this.as,{style:{whiteSpace:"pre-wrap"},"data-node-view-content":""})}}),b=o.defineComponent({name:"NodeViewWrapper",props:{as:{type:String,default:"div"}},inject:["onDragStart","decorationClasses"],render(){var r,t;return o.h(this.as,{class:this.decorationClasses,style:{whiteSpace:"normal"},"data-node-view-wrapper":"",onDragstart:this.onDragStart},(t=(r=this.$slots).default)===null||t===void 0?void 0:t.call(r))}}),C=(r={})=>{const t=o.shallowRef();return o.onMounted(()=>{t.value=new p(r)}),o.onBeforeUnmount(()=>{var n,e,i;const s=(n=t.value)===null||n===void 0?void 0:n.options.element,d=s==null?void 0:s.cloneNode(!0);(e=s==null?void 0:s.parentNode)===null||e===void 0||e.replaceChild(d,s),(i=t.value)===null||i===void 0||i.destroy()}),t};class c{constructor(t,{props:n={},editor:e}){this.editor=e,this.component=o.markRaw(t),this.el=document.createElement("div"),this.props=o.reactive(n),this.renderedComponent=this.renderComponent()}get element(){return this.renderedComponent.el}get ref(){var t,n,e,i;return!((n=(t=this.renderedComponent.vNode)===null||t===void 0?void 0:t.component)===null||n===void 0)&&n.exposed?this.renderedComponent.vNode.component.exposed:(i=(e=this.renderedComponent.vNode)===null||e===void 0?void 0:e.component)===null||i===void 0?void 0:i.proxy}renderComponent(){let t=o.h(this.component,this.props);return this.editor.appContext&&(t.appContext=this.editor.appContext),typeof document<"u"&&this.el&&o.render(t,this.el),{vNode:t,destroy:()=>{this.el&&o.render(null,this.el),this.el=null,t=null},el:this.el?this.el.firstElementChild:null}}updateProps(t={}){Object.entries(t).forEach(([n,e])=>{this.props[n]=e}),this.renderComponent()}destroy(){this.renderedComponent.destroy()}}const w={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}};class S extends u.NodeView{mount(){const t={editor:this.editor,node:this.node,decorations:this.decorations,innerDecorations:this.innerDecorations,view:this.view,selected:!1,extension:this.extension,HTMLAttributes:this.HTMLAttributes,getPos:()=>this.getPos(),updateAttributes:(i={})=>this.updateAttributes(i),deleteNode:()=>this.deleteNode()},n=this.onDragStart.bind(this);this.decorationClasses=o.ref(this.getDecorationClasses());const e=o.defineComponent({extends:{...this.component},props:Object.keys(t),template:this.component.template,setup:i=>{var s,d;return o.provide("onDragStart",n),o.provide("decorationClasses",this.decorationClasses),(d=(s=this.component).setup)===null||d===void 0?void 0:d.call(s,i,{expose:()=>{}})},__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(e,{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(){const{from:t,to:n}=this.editor.state.selection,e=this.getPos();if(typeof e=="number")if(t<=e&&n>=e+this.node.nodeSize){if(this.renderer.props.selected)return;this.selectNode()}else{if(!this.renderer.props.selected)return;this.deselectNode()}}update(t,n,e){const i=s=>{this.decorationClasses.value=this.getDecorationClasses(),this.renderer.updateProps(s)};if(typeof this.options.update=="function"){const s=this.node,d=this.decorations,l=this.innerDecorations;return this.node=t,this.decorations=n,this.innerDecorations=e,this.options.update({oldNode:s,oldDecorations:d,newNode:t,newDecorations:n,oldInnerDecorations:l,innerDecorations:e,updateProps:()=>i({node:t,decorations:n,innerDecorations:e})})}return t.type!==this.node.type?!1:(t===this.node&&this.decorations===n&&this.innerDecorations===e||(this.node=t,this.decorations=n,this.innerDecorations=e,i({node:t,decorations:n,innerDecorations:e})),!0)}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.map(t=>t.type.attrs.class).flat().join(" ")}destroy(){this.renderer.destroy(),this.editor.off("selectionUpdate",this.handleSelectionUpdate)}}function _(r,t){return n=>{if(!n.editor.contentComponent)return{};const e=typeof r=="function"&&"__vccOpts"in r?r.__vccOpts:r;return new S(e,n,t)}}exports.BubbleMenu=v;exports.Editor=p;exports.EditorContent=m;exports.FloatingMenu=g;exports.NodeViewContent=y;exports.NodeViewWrapper=b;exports.VueNodeViewRenderer=_;exports.VueRenderer=c;exports.nodeViewProps=w;exports.useEditor=C;Object.keys(u).forEach(r=>{r!=="default"&&!Object.prototype.hasOwnProperty.call(exports,r)&&Object.defineProperty(exports,r,{enumerable:!0,get:()=>u[r]})}); //# sourceMappingURL=vue-3.cjs.map