UNPKG

velaris-richtext-editor

Version:

A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React

2 lines (1 loc) 13.9 kB
"use strict";var ot=Object.create;var Y=Object.defineProperty;var at=Object.getOwnPropertyDescriptor;var st=Object.getOwnPropertyNames;var lt=Object.getPrototypeOf,ut=Object.prototype.hasOwnProperty;var ct=(o,c,x,w)=>{if(c&&typeof c=="object"||typeof c=="function")for(let u of st(c))!ut.call(o,u)&&u!==x&&Y(o,u,{get:()=>c[u],enumerable:!(w=at(c,u))||w.enumerable});return o};var J=(o,c,x)=>(x=o!=null?ot(lt(o)):{},ct(c||!o||!o.__esModule?Y(x,"default",{value:o,enumerable:!0}):x,o));const K=require("./index-COecBbaE.cjs"),W=require("./dom-dataset-CAXnsjYE.cjs"),p=require("react/jsx-runtime"),b=require("react"),O=require("./RichTextEditor-CWm5KSvH.cjs"),ft=require("./index-LbrE7K9i.cjs"),pt=require("re-resizable"),dt=require("react-dom");let q;function G(){try{return q||(q=ft.mitt()),q}catch{throw new Error("Error EventEmitter")}}const X="OPEN_EXCALIDRAW_SETTING_MODAL";function ht(o,c){G().on(o,c)}function bt(o,c){G().off(o,c)}function gt(o){G().emit(X,o)}const mt=({editor:o})=>{const[c,x]=b.useState(null),[w,u]=b.useState({}),[d,n]=b.useState({elements:[],appState:{isLoading:!1},files:null}),[e,r]=b.useState(!1),[g,l]=b.useState(!0),[y,i]=b.useState(null),R=b.useCallback(E=>{E&&import("@excalidraw/excalidraw").then(S=>{x(S.Excalidraw)}).catch(i).finally(()=>l(!1))},[l]),L=b.useCallback(E=>{setTimeout(()=>{E.refresh()})},[]),C=b.useCallback((E,S,M)=>{u({elements:E,appState:{isLoading:!1},files:M})},[]),V=b.useCallback(()=>{if(!c){r(!1);return}o.chain().focus().setExcalidraw({data:w}).run(),r(!1)},[c,o,w,r]);return b.useEffect(()=>{const E=S=>{r(!0),S&&n(S.data)};return ht(X,E),()=>{bt(X,E)}},[o,r]),p.jsxs(O.Dialog,{onOpenChange:r,open:e,children:[p.jsx(O.DialogTrigger,{asChild:!0,children:p.jsx(O.ActionButton,{action:()=>r(!0),icon:"Excalidraw",tooltip:"Excalidraw"})}),p.jsxs(O.DialogContent,{className:"richtext-z-[99999] !richtext-max-w-[1300px]",children:[p.jsx(O.DialogTitle,{children:"Excalidraw"}),p.jsxs("div",{style:{height:"100%",borderWidth:1},children:[g&&p.jsx("p",{children:"Loading..."}),y&&p.jsx("p",{children:y&&y.message||"Error"}),p.jsx("div",{ref:R,style:{width:"100%",height:600},children:!g&&!y&&c?p.jsx(c,{initialData:d,langCode:"en",onChange:C,ref:L}):null})]}),p.jsx(O.DialogFooter,{children:p.jsx(O.Button,{onClick:V,type:"button",children:"Save changes"})})]})]})};var H={exports:{}},yt=H.exports,Q;function vt(){return Q||(Q=1,function(o,c){(function(w,u){o.exports=u(b,dt)})(yt,function(x,w){return function(u){var d={};function n(e){if(d[e])return d[e].exports;var r=d[e]={i:e,l:!1,exports:{}};return u[e].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=u,n.c=d,n.d=function(e,r,g){n.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:g})},n.r=function(e){typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,r){if(r&1&&(e=n(e)),r&8||r&4&&typeof e=="object"&&e&&e.__esModule)return e;var g=Object.create(null);if(n.r(g),Object.defineProperty(g,"default",{enumerable:!0,value:e}),r&2&&typeof e!="string")for(var l in e)n.d(g,l,(function(y){return e[y]}).bind(null,l));return g},n.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(r,"a",r),r},n.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},n.p="",n(n.s=4)}([function(u,d,n){u.exports=n(5)()},function(u,d){u.exports=x},function(u,d){u.exports=w},function(u,d){u.exports=function(n,e,r){var g=n.direction,l=n.value;switch(g){case"top":return r.top+l<e.top&&r.bottom>e.bottom&&r.left<e.left&&r.right>e.right;case"left":return r.left+l<e.left&&r.bottom>e.bottom&&r.top<e.top&&r.right>e.right;case"bottom":return r.bottom-l>e.bottom&&r.left<e.left&&r.right>e.right&&r.top<e.top;case"right":return r.right-l>e.right&&r.left<e.left&&r.top<e.top&&r.bottom>e.bottom}}},function(u,d,n){n.r(d),n.d(d,"default",function(){return Z});var e=n(1),r=n.n(e),g=n(2),l=n.n(g),y=n(0),i=n.n(y),R=n(3),L=n.n(R);function C(a){return typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?C=function(f){return typeof f}:C=function(f){return f&&typeof Symbol=="function"&&f.constructor===Symbol&&f!==Symbol.prototype?"symbol":typeof f},C(a)}function V(a,s){if(!(a instanceof s))throw new TypeError("Cannot call a class as a function")}function E(a,s){for(var f=0;f<s.length;f++){var t=s[f];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(a,t.key,t)}}function S(a,s,f){return s&&E(a.prototype,s),a}function M(a,s){return s&&(C(s)==="object"||typeof s=="function")?s:h(a)}function N(a){return N=Object.setPrototypeOf?Object.getPrototypeOf:function(f){return f.__proto__||Object.getPrototypeOf(f)},N(a)}function h(a){if(a===void 0)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return a}function D(a,s){if(typeof s!="function"&&s!==null)throw new TypeError("Super expression must either be null or a function");a.prototype=Object.create(s&&s.prototype,{constructor:{value:a,writable:!0,configurable:!0}}),s&&j(a,s)}function j(a,s){return j=Object.setPrototypeOf||function(t,T){return t.__proto__=T,t},j(a,s)}function P(a,s,f){return s in a?Object.defineProperty(a,s,{value:f,enumerable:!0,configurable:!0,writable:!0}):a[s]=f,a}function it(a){return a.width===void 0&&(a.width=a.right-a.left),a.height===void 0&&(a.height=a.bottom-a.top),a}var Z=function(a){D(s,a);function s(f){var t;return V(this,s),t=M(this,N(s).call(this,f)),P(h(t),"getContainer",function(){return t.props.containment||window}),P(h(t),"addEventListener",function(T,m,v,I){t.debounceCheck||(t.debounceCheck={});var _,z,k=function(){_=null,t.check()};I>-1?z=function(){_||(_=setTimeout(k,I||0))}:z=function(){clearTimeout(_),_=setTimeout(k,v||0)};var U={target:T,fn:z,getLastTimeout:function(){return _}};T.addEventListener(m,U.fn),t.debounceCheck[m]=U}),P(h(t),"startWatching",function(){t.debounceCheck||t.interval||(t.props.intervalCheck&&(t.interval=setInterval(t.check,t.props.intervalDelay)),t.props.scrollCheck&&t.addEventListener(t.getContainer(),"scroll",t.props.scrollDelay,t.props.scrollThrottle),t.props.resizeCheck&&t.addEventListener(window,"resize",t.props.resizeDelay,t.props.resizeThrottle),!t.props.delayedCall&&t.check())}),P(h(t),"stopWatching",function(){if(t.debounceCheck){for(var T in t.debounceCheck)if(t.debounceCheck.hasOwnProperty(T)){var m=t.debounceCheck[T];clearTimeout(m.getLastTimeout()),m.target.removeEventListener(T,m.fn),t.debounceCheck[T]=null}}t.debounceCheck=null,t.interval&&(t.interval=clearInterval(t.interval))}),P(h(t),"check",function(){var T=t.node,m,v;if(!T)return t.state;if(m=it(t.roundRectDown(T.getBoundingClientRect())),t.props.containment){var I=t.props.containment.getBoundingClientRect();v={top:I.top,left:I.left,bottom:I.bottom,right:I.right}}else v={top:0,left:0,bottom:window.innerHeight||document.documentElement.clientHeight,right:window.innerWidth||document.documentElement.clientWidth};var _=t.props.offset||{},z=C(_)==="object";z&&(v.top+=_.top||0,v.left+=_.left||0,v.bottom-=_.bottom||0,v.right-=_.right||0);var k={top:m.top>=v.top,left:m.left>=v.left,bottom:m.bottom<=v.bottom,right:m.right<=v.right},U=m.height>0&&m.width>0,A=U&&k.top&&k.left&&k.bottom&&k.right;if(U&&t.props.partialVisibility){var $=m.top<=v.bottom&&m.bottom>=v.top&&m.left<=v.right&&m.right>=v.left;typeof t.props.partialVisibility=="string"&&($=k[t.props.partialVisibility]),A=t.props.minTopValue?$&&m.top<=v.bottom-t.props.minTopValue:$}typeof _.direction=="string"&&typeof _.value=="number"&&(console.warn("[notice] offset.direction and offset.value have been deprecated. They still work for now, but will be removed in next major version. Please upgrade to the new syntax: { %s: %d }",_.direction,_.value),A=L()(_,m,v));var F=t.state;return t.state.isVisible!==A&&(F={isVisible:A,visibilityRect:k},t.setState(F),t.props.onChange&&t.props.onChange(A)),F}),t.state={isVisible:null,visibilityRect:{}},t}return S(s,[{key:"componentDidMount",value:function(){this.node=l.a.findDOMNode(this),this.props.active&&this.startWatching()}},{key:"componentWillUnmount",value:function(){this.stopWatching()}},{key:"componentDidUpdate",value:function(t){this.node=l.a.findDOMNode(this),this.props.active&&!t.active?(this.setState({isVisible:null,visibilityRect:{}}),this.startWatching()):this.props.active||this.stopWatching()}},{key:"roundRectDown",value:function(t){return{top:Math.floor(t.top),left:Math.floor(t.left),bottom:Math.floor(t.bottom),right:Math.floor(t.right)}}},{key:"render",value:function(){return this.props.children instanceof Function?this.props.children({isVisible:this.state.isVisible,visibilityRect:this.state.visibilityRect}):r.a.Children.only(this.props.children)}}]),s}(r.a.Component);P(Z,"defaultProps",{active:!0,partialVisibility:!1,minTopValue:0,scrollCheck:!1,scrollDelay:250,scrollThrottle:-1,resizeCheck:!1,resizeDelay:250,resizeThrottle:-1,intervalCheck:!0,intervalDelay:100,delayedCall:!1,offset:{},containment:null,children:r.a.createElement("span",null)}),P(Z,"propTypes",{onChange:i.a.func,active:i.a.bool,partialVisibility:i.a.oneOfType([i.a.bool,i.a.oneOf(["top","right","bottom","left"])]),delayedCall:i.a.bool,offset:i.a.oneOfType([i.a.shape({top:i.a.number,left:i.a.number,bottom:i.a.number,right:i.a.number}),i.a.shape({direction:i.a.oneOf(["top","right","bottom","left"]),value:i.a.number})]),scrollCheck:i.a.bool,scrollDelay:i.a.number,scrollThrottle:i.a.number,resizeCheck:i.a.bool,resizeDelay:i.a.number,resizeThrottle:i.a.number,intervalCheck:i.a.bool,intervalDelay:i.a.number,containment:typeof window<"u"?i.a.instanceOf(window.Element):i.a.any,children:i.a.oneOfType([i.a.element,i.a.func]),minTopValue:i.a.number})},function(u,d,n){var e=n(6);function r(){}function g(){}g.resetWarningCache=r,u.exports=function(){function l(R,L,C,V,E,S){if(S!==e){var M=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw M.name="Invariant Violation",M}}l.isRequired=l;function y(){return l}var i={array:l,bool:l,func:l,number:l,object:l,string:l,symbol:l,any:l,arrayOf:y,element:l,elementType:l,instanceOf:y,node:l,objectOf:y,oneOf:y,oneOfType:y,shape:y,exact:y,checkPropTypes:g,resetWarningCache:r};return i.PropTypes=i,i}},function(u,d,n){var e="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";u.exports=e}])})}(H)),H.exports}var _t=vt();const xt=O.getDefaultExportFromCjs(_t),wt="_wrap_15k3c_1",Et="_renderWrap_15k3c_7",Tt="_title_15k3c_14",Ot="_handlerWrap_15k3c_30",B={wrap:wt,renderWrap:Et,title:Tt,handlerWrap:Ot},Ct=10,St=200,tt=15,et={width:"100%",height:"100%",maxWidth:"100%"};function Dt({editor:o,node:c,updateAttributes:x}){const w=b.useRef(null),u=o.isActive(nt.name),{data:d,width:n,height:e}=c.attrs,[r,g]=b.useState(null),[l,y]=b.useState(!0),[i,R]=b.useState(null),[L,C]=b.useState(!1),[V,E]=b.useState(100),S=b.useCallback(h=>{h&&C(!0)},[C]),M=b.useCallback(h=>()=>{E(D=>O.clamp(h==="minus"?D-tt:D+tt,Ct,St))},[]);b.useEffect(()=>{let h=!1;return import("@excalidraw/excalidraw").then(D=>{h||(w.current=D.exportToSvg)}).catch(D=>!h&&R(D)).finally(()=>!h&&y(!1)),()=>{h=!0}},[y,d]),b.useEffect(()=>{let h=!1;return(async()=>{if(h||l||i||!L||!d)return;const j=await w.current(d);h||(j.setAttribute("width","100%"),j.setAttribute("height","100%"),j.setAttribute("display","block"),g(j))})(),()=>{h=!0}},[d,l,i,L]);const N=h=>{x({width:h.width,height:h.height})};return p.jsx(W.NodeViewWrapper,{className:W.clsx(B.wrap,u&&B.isActive),children:p.jsx(xt,{onChange:S,children:p.jsx(pt.Resizable,{size:{width:Number.parseInt(n),height:Number.parseInt(e)},onResizeStop:(h,D,j,P)=>{N({width:Number.parseInt(n)+P.width,height:Number.parseInt(e)+P.height})},children:p.jsxs("div",{className:W.clsx(B.renderWrap,"render-wrapper"),style:{...et,overflow:"hidden"},children:[i&&p.jsx("div",{style:et,children:p.jsx("p",{children:i.message||i})}),l&&p.jsx("p",{children:"Loading..."}),!l&&!i&&L&&p.jsx("div",{dangerouslySetInnerHTML:{__html:(r==null?void 0:r.outerHTML)??""},style:{height:"100%",maxHeight:"100%",padding:24,overflow:"hidden",display:"flex",justifyContent:"center",alignItems:"center",transform:`scale(${V/100})`,transition:"all ease-in-out .3s"}}),p.jsx("div",{className:B.title}),p.jsxs("div",{className:B.handlerWrap,children:[p.jsx(O.ActionButton,{action:M("minus"),icon:"ZoomOut",tooltip:"Zoom Out"}),p.jsx(O.ActionButton,{action:M("plus"),icon:"ZoomIn",tooltip:"Zoom In"})]})]})})})})}const Pt=b.memo(Dt,(o,c)=>!!O.deepEqual(o.node.attrs,c.node.attrs)),rt={elements:[]},nt=K.Node.create({name:"excalidraw",group:"block",selectable:!0,atom:!0,draggable:!0,inline:!1,addAttributes(){return{defaultShowPicker:{default:!1},createUser:{default:null},width:{default:"100%",parseHTML:W.getDatasetAttribute("width")},height:{default:240,parseHTML:W.getDatasetAttribute("height")},data:{default:rt,parseHTML:W.getDatasetAttribute("data",!0)}}},addOptions(){var o;return{...(o=this.parent)==null?void 0:o.call(this),HTMLAttributes:{class:"excalidraw"},button:({editor:c})=>({component:mt,componentProps:{editor:c}})}},parseHTML(){return[{tag:"div[class=excalidraw]"}]},renderHTML({HTMLAttributes:o,node:c}){return["div",K.mergeAttributes(this.options.HTMLAttributes,o,W.nodeAttrsToDataset(c))]},addCommands(){return{setExcalidraw:o=>({tr:c,commands:x,chain:w})=>{var u,d,n;return o=o||{},o.data=o.data||rt,((n=(d=(u=c.selection)==null?void 0:u.node)==null?void 0:d.type)==null?void 0:n.name)==this.name?x.updateAttributes(this.name,o):w().insertContent({type:this.name,attrs:o}).run()}}},addNodeView(){return W.ReactNodeViewRenderer(Pt)},addInputRules(){return[K.nodeInputRule({find:/^\$excalidraw\$$/,type:this.type,getAttributes:()=>({width:"100%"})})]}});exports.Excalidraw=nt;exports.triggerOpenExcalidrawSettingModal=gt;