velaris-richtext-editor/lib/Mermaid.cjs

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

"use strict";var W=Object.create;var G=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var J=(t,e,r,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of U(e))!Y.call(t,l)&&l!==r&&G(t,l,{get:()=>e[l],enumerable:!(a=X(e,l))||a.enumerable});return t};var K=(t,e,r)=>(r=t!=null?W(Z(t)):{},J(e||!t||!t.__esModule?G(r,"default",{value:t,enumerable:!0}):r,t));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("./index-COecBbaE.cjs"),u=require("./RichTextEditor-CWm5KSvH.cjs"),F=require("./dom-dataset-CAXnsjYE.cjs"),o=require("react/jsx-runtime"),s=require("react"),P=require("./shortId-Bfj8TyNr.cjs"),Q=require("./textarea-DlDPW06T.cjs"),S=require("./index-LbrE7K9i.cjs"),$=`graph TB
a-->b`,ee=({editor:t,upload:e})=>{const[r,a]=s.useState($),[l,v]=s.useState(""),[T,y]=s.useState(!1),A=s.useRef(null),[d,h]=s.useState(null),E=s.useCallback(c=>{c&&import("mermaid").then(x=>{h(x.default)})},[]),I=async c=>{try{const{svg:x}=await d.render("mermaid-svg",c);v(x)}catch{v("")}},L=()=>{d.initialize({darkMode:!1,startOnLoad:!1,fontSize:12,theme:"base"}),I(r)};s.useEffect(()=>{d&&T&&L()},[d,T]),s.useEffect(()=>{d&&T&&I(r)},[d&&r]);const R=async()=>{if(r!==""){if(r){const c=A.current.querySelector("svg"),{width:x,height:j}=c.getBoundingClientRect(),_=`mermaid-${P.shortId()}.svg`;let M=P.i(c.outerHTML);if(e){console.log({src:M});const H=u.dataURLtoFile(M,_);M=await e(H)}t==null||t.chain().focus().setMermaid({type:"mermaid",src:M,alt:encodeURIComponent(r),width:x,height:j},!!r).run()}y(!1)}};return o.jsxs(u.Dialog,{onOpenChange:y,open:T,children:[o.jsx(u.DialogTrigger,{asChild:!0,children:o.jsx(u.ActionButton,{action:()=>y(!0),icon:"Mermaid",tooltip:"Mermaid"})}),o.jsxs(u.DialogContent,{className:"richtext-z-[99999] !richtext-max-w-[1300px]",children:[o.jsx(u.DialogTitle,{children:"Mermaid"}),o.jsx("div",{ref:E,style:{height:"100%",border:"1px solid hsl(var(--border))"},children:o.jsxs("div",{className:"richtext-flex richtext-gap-[10px] richtext-rounded-[10px] richtext-p-[10px]",children:[o.jsx(Q.Textarea,{autoFocus:!0,className:"richtext-flex-1",defaultValue:$,onChange:c=>a(c.target.value),placeholder:"Text",required:!0,rows:10,value:r,style:{color:"hsl(var(--richtext-foreground))"}}),o.jsx("div",{className:"richtext-flex richtext-flex-1 richtext-items-center richtext-justify-center richtext-rounded-[10px] richtext-p-[10px]",dangerouslySetInnerHTML:{__html:l},ref:A,style:{height:"100%",borderWidth:1,minHeight:500,background:"#fff"}})]})}),o.jsx(u.DialogFooter,{children:o.jsx(u.Button,{onClick:R,type:"button",children:"Save changes"})})]})]})},O={TOP_LEFT:"tl",TOP_RIGHT:"tr",BOTTOM_LEFT:"bl",BOTTOM_RIGHT:"br"};function te({editor:t,node:e,updateAttributes:r,getPos:a,selected:l}){const[v,T]=s.useState({width:S.IMAGE_MAX_SIZE,height:S.IMAGE_MAX_SIZE}),[y,A]=s.useState({width:0,height:0}),[d]=s.useState([O.TOP_LEFT,O.TOP_RIGHT,O.BOTTOM_LEFT,O.BOTTOM_RIGHT]),[h,E]=s.useState(!1),[I,L]=s.useState({x:0,y:0,w:0,h:0,dir:""}),{align:R}=e==null?void 0:e.attrs,c=s.useMemo(()=>{const{src:i,alt:m,width:f,height:b}=e==null?void 0:e.attrs,w=q.isNumber(f)?`${f}px`:f,n=q.isNumber(b)?`${b}px`:b;return{src:i||void 0,alt:m||void 0,style:{width:w||void 0,height:n||void 0}}},[e==null?void 0:e.attrs]),x=s.useMemo(()=>{const{style:{width:i}}=c;return{width:i==="100%"?i:void 0}},[c]);function j(i){A({width:i.target.width,height:i.target.height})}function _(){t.commands.setNodeSelection(a())}const M=s.useCallback(u.throttle(()=>{const{width:i}=getComputedStyle(t.view.dom);T(m=>({...m,width:Number.parseInt(i,10)}))},S.IMAGE_THROTTLE_WAIT_TIME),[t]);function H(i,m){i.preventDefault(),i.stopPropagation();const f=y.width,b=y.height,w=f/b;let n=Number(e.attrs.width),p=Number(e.attrs.height);const g=v.width;n&&!p?(n=n>g?g:n,p=Math.round(n/w)):p&&!n?(n=Math.round(p*w),n=n>g?g:n):!n&&!p?(n=f>g?g:f,p=Math.round(n/w)):n=n>g?g:n,E(!0),L({x:i.clientX,y:i.clientY,w:n,h:p,dir:m})}const N=s.useCallback(u.throttle(i=>{if(i.preventDefault(),i.stopPropagation(),!h)return;const{x:m,w:f,dir:b}=I,w=(i.clientX-m)*(/l/.test(b)?-1:1),{width:n,height:p}=e==null?void 0:e.attrs,g=n/p,B=u.clamp(f+w,S.IMAGE_MIN_SIZE,v.width),V=Math.round(B/g);r({width:B,height:V})},S.IMAGE_THROTTLE_WAIT_TIME),[h,I,v,r,e==null?void 0:e.attrs]),C=s.useCallback(i=>{i.preventDefault(),i.stopPropagation(),h&&(L({x:0,y:0,w:0,h:0,dir:""}),E(!1),_())},[h,_]),D=s.useCallback(()=>{document==null||document.addEventListener("mousemove",N,!0),document==null||document.addEventListener("mouseup",C,!0)},[N,C]),z=s.useCallback(()=>{document==null||document.removeEventListener("mousemove",N,!0),document==null||document.removeEventListener("mouseup",C,!0)},[N,C]);s.useEffect(()=>(h?D():z(),()=>{z()}),[h,D,z]);const k=s.useMemo(()=>new ResizeObserver(()=>M()),[M]);return s.useEffect(()=>(k.observe(t.view.dom),()=>{k.disconnect()}),[t.view.dom,k]),o.jsx(F.NodeViewWrapper,{className:"image-view",style:{...x,width:"100%",textAlign:R},children:o.jsxs("div",{"data-drag-handle":!0,draggable:"true",style:{...x,background:"#fff"},className:`image-view__body ${l?"image-view__body--focused":""} ${h?"image-view__body--resizing":""}`,children:[o.jsx("img",{alt:c.alt,className:"image-view__body__image block",height:"auto",onClick:_,onLoad:j,src:c.src,style:c.style}),t.view.editable&&(l||h)&&o.jsx("div",{className:"image-resizer",children:d==null?void 0:d.map(i=>o.jsx("span",{className:`image-resizer__handler image-resizer__handler--${i}`,onMouseDown:m=>H(m,i)},`image-dir-${i}`))})]})})}const re=u.Image.extend({name:"mermaid",addOptions(){var t;return{...(t=this.parent)==null?void 0:t.call(this),inline:!1,content:"",marks:"",group:"block",draggable:!1,selectable:!0,atom:!0,HTMLAttributes:{class:"mermaid"},button:({editor:e,t:r,extension:a})=>{var l;return{component:ee,componentProps:{action:()=>!0,isActive:()=>!1,disabled:!1,editor:e,icon:"Mermaid",tooltip:r("editor.mermaid.tooltip"),upload:(l=a==null?void 0:a.options)==null?void 0:l.upload}}}}},addAttributes(){var t;return{...(t=this.parent)==null?void 0:t.call(this),width:{default:null,parseHTML:e=>{const r=e.querySelector("img"),a=r==null?void 0:r.getAttribute("width");return a?Number.parseInt(a,10):320},renderHTML:e=>({width:e.width})},height:{default:null,parseHTML:e=>{const r=e.querySelector("img"),a=r==null?void 0:r.getAttribute("height");return a?Number.parseInt(a,10):212},renderHTML:e=>({height:e.height})},align:{default:"center",parseHTML:e=>e.getAttribute("align"),renderHTML:e=>({align:e.align})}}},addNodeView(){return F.ReactNodeViewRenderer(te)},addCommands(){return{setMermaid:(t,e)=>({commands:r,editor:a})=>e?r.insertContent({type:this.name,attrs:t}):r.insertContentAt(a.state.selection.anchor,{type:this.name,attrs:t}),setAlignImageMermaid:t=>({commands:e})=>e.updateAttributes(this.name,{align:t})}},renderHTML({HTMLAttributes:t}){const{align:e}=t;return["div",{style:e?`text-align: ${e};`:"",class:"imageMermaid"},["img",q.mergeAttributes(this.options.HTMLAttributes,t)]]},parseHTML(){return[{tag:"div[class=imageMermaid]",getAttrs:t=>{const e=t.querySelector("img"),r=e==null?void 0:e.getAttribute("width"),a=e==null?void 0:e.getAttribute("height");return{src:e==null?void 0:e.getAttribute("src"),alt:e==null?void 0:e.getAttribute("alt"),width:r?Number.parseInt(r,10):null,height:a?Number.parseInt(a,10):null,align:(e==null?void 0:e.getAttribute("align"))||t.style.textAlign||null}}}]}});exports.Mermaid=re;