@pdfme/ui 5.3.18-dev.1 → 5.3.18

package/dist/index.es.js

@@ -164727,11 +164727,11 @@ const guideStyle = (a, s, c, u) => ({
     {
       schema: { ...A, id: uuid$6() },
       basePdf: c,
-      value: A.readOnly ? replacePlaceholders({
+      value: replacePlaceholders({
         content: A.content || "",
         variables: { ...u, totalPages: p, currentPage: v },
         schemas: s
-      }) : A.content || "",
+      }),
       onChangeHoveringSchemaId: () => {
       },
       mode: "viewer",

package/dist/index.umd.js

@@ -1349,7 +1349,7 @@ canvas {
 .adder.dragging {
     display: block;
 }
-`);__spreadArray(["className","rulerStyle","snapThreshold","snaps","displayDragPos","cspNonce","dragPosFormat","defaultGuides","showGuides","scrollOptions","guideStyle","guidesOffset","digit","defaultGuidesPos","dragGuideStyle","displayGuidePos","guidePosFormat","guidePosStyle","lockGuides","guidesZoom"],PROPERTIES,!0);var GuidesElement=styled("div",GUIDES_CSS),Guides=function(a){__extends(s,a);function s(u){var d=a.call(this,u)||this;return d.state={guides:[]},d.scrollPos=0,d.managerRef=reactExports.createRef(),d.guideElements=[],d._isFirstMove=!1,d._zoom=1,d._guidesZoom=1,d._observer=null,d.onDragStart=function(p){var v=p.datas,A=p.inputEvent;d._isFirstMove=!0,d.movePos(p),d.props.onDragStart(__assign(__assign({},p),{dragElement:v.target})),d.gesto.isFlag()&&(A.stopPropagation(),A.preventDefault(),d._startDragScroll(p))},d._onDrag=function(p){d._isFirstMove&&(d._isFirstMove=!1,addClass(p.datas.target,DRAGGING));var v=d.movePos(p);if(d.props.onDrag(__assign(__assign({},p),{dragElement:p.datas.target})),!d.gesto.isFlag()){d._endDragScroll(p);return}return d._dragScroll(p),v},d.onDragEnd=function(p){var v=p.datas,A=p.isDouble,b=p.distX,g=p.distY,x=d.movePos(p),y=d.state.guides,f=d.props,m=f.onChangeGuides,C=f.displayDragPos,S=f.digit,w=f.lockGuides,_=f.guidesOffset,I=d._guidesZoom,$=parseFloat((x/I).toFixed(S||0)),P=d.scrollPos-(_||0);if(C&&(d.displayElement.style.cssText+="display: none;"),removeClass(v.target,DRAGGING),d.props.onDragEnd(__assign(__assign({},p),{dragElement:v.target})),d._endDragScroll(p),v.fromRuler)d._isFirstMove&&d.props.onClickRuler(__assign(__assign({},p),{pos:0})),$>=P&&y.indexOf($)<0&&d.setState({guides:__spreadArray(__spreadArray([],y,!0),[$],!1)},function(){m({guides:d.state.guides,distX:b,distY:g,index:y.length,isAdd:!0,isRemove:!1,isChange:!1})});else{var E=parseFloat(v.target.getAttribute("data-index")),R=!1,T=!1;y=__spreadArray([],y,!0);var B=y.indexOf($);if(A||$<P||B>-1&&B!==E){if(w&&(w===!0||w.indexOf("remove")>-1))return;y.splice(E,1),R=!0}else{if(B>-1)return;if(w&&(w===!0||w.indexOf("change")>-1))return;y[E]=$,T=!0}d.setState({guides:y},function(){var M=d.state.guides;m({distX:b,distY:g,guides:M,isAdd:!1,index:E,isChange:T,isRemove:R})})}},d._onCheck=function(){d.resize()},d.state.guides=u.defaultGuides||[],d.scrollPos=u.defaultGuidesPos||0,d}var c=s.prototype;return c.render=function(){var u=this.props,d=u.className,p=u.type,v=u.zoom,A=u.guidesZoom,b=u.style,g=u.rulerStyle,x=u.displayDragPos,y=u.cspNonce,f=u.dragGuideStyle,m=u.guidePosStyle,C=m===void 0?{}:m,S=this.props,w=this.getTranslateName(),_={};return PROPERTIES.forEach(function(I){I==="style"||I==="warpSelf"||I==="useResizeObserver"||(_[I]=S[I])}),this._zoom=v,this._guidesZoom=A||v,reactExports.createElement(GuidesElement,{ref:this.managerRef,cspNonce:y,className:"".concat(prefix("manager",p)," ").concat(d),style:b},reactExports.createElement("div",{className:prefix("guide-origin"),ref:ref(this,"originElement")}),reactExports.createElement(Ruler,__assign({ref:ref(this,"ruler"),style:g},_)),reactExports.createElement("div",{className:GUIDES,ref:ref(this,"guidesElement"),style:{transform:"".concat(w,"(").concat(-this.scrollPos*this._guidesZoom,"px)")}},x&&reactExports.createElement("div",{className:DISPLAY_DRAG,ref:ref(this,"displayElement"),style:C||{}}),reactExports.createElement("div",{className:ADDER,ref:ref(this,"adderElement"),style:f}),this.renderGuides()))},c.drawRuler=function(u){this.ruler.draw(u)},c.renderGuides=function(){var u=this,d=this.props,p=d,v=p.type,A=p.showGuides,b=p.guideStyle,g=p.displayGuidePos,x=p.guidePosStyle,y=x===void 0?{}:x,f=p.guidesOffset,m=this._guidesZoom,C=this.getTranslateName(),S=this.state.guides,w=d.guidePosFormat||d.dragPosFormat||function(_){return _};if(this.guideElements=[],A)return S.map(function(_,I){var $=_+(f||0);return reactExports.createElement("div",{className:prefix("guide",v),ref:refs(u,"guideElements",I),key:I,"data-index":I,"data-pos":_,style:__assign(__assign({},b),{transform:"".concat(C,"(").concat($*m,"px) translateZ(0px)")})},g&&reactExports.createElement("div",{className:prefix("guide-pos"),style:y||{}},w(_)))})},c.componentDidMount=function(){var u=this;this.gesto=new Gesto(this.managerRef.current,{container:document.body}).on("dragStart",function(d){var p=u.props,v=p.type,A=p.lockGuides,b=u._guidesZoom;if(A===!0){d.stop();return}var g=d.inputEvent,x=g.target,y=d.datas,f=u.ruler.canvasElement,m=u.guidesElement,C=v==="horizontal",S=u.originElement.getBoundingClientRect(),w=getDistElementMatrix(u.managerRef.current),_=calculateMatrixDist(w,[d.clientX-S.left,d.clientY-S.top]);_[0]-=m.offsetLeft,_[1]-=m.offsetTop,_[C?1:0]+=u.scrollPos*b,y.offsetPos=_,y.matrix=w;var I=A&&A.indexOf("add")>-1,$=A&&A.indexOf("remove")>-1,P=A&&A.indexOf("change")>-1;if(x===f){if(I){d.stop();return}y.fromRuler=!0,y.target=u.adderElement}else if(hasClass(x,GUIDE)){if($&&P){d.stop();return}y.target=x}else return d.stop(),!1;u.onDragStart(d)}).on("drag",this._onDrag).on("dragEnd",this.onDragEnd),this.props.useResizeObserver?(this._observer=new ResizeObserver(this._onCheck),this._observer.observe(this.guidesElement,{box:"border-box"}),this._observer.observe(this.getRulerElement(),{box:"border-box"})):this._onCheck()},c.componentWillUnmount=function(){var u;this.gesto.unset(),(u=this._observer)===null||u===void 0||u.disconnect()},c.componentDidUpdate=function(u){var d=this.props.defaultGuides;u.defaultGuides!==d&&this.setState({guides:d||[]})},c.loadGuides=function(u){this.setState({guides:u})},c.getGuides=function(){return this.state.guides},c.scrollGuides=function(u,d){d===void 0&&(d=this._guidesZoom),this._setZoom({guidesZoom:d});var p=this.getTranslateName(),v=this.guidesElement;this.scrollPos=u,v.style.transform="".concat(p,"(").concat(-u*d,"px)");var A=this.state.guides,b=this.props.guidesOffset||0;this.guideElements.forEach(function(g,x){if(g){var y=A[x]+(b||0);g.style.transform="".concat(p,"(").concat(y*d,"px) translateZ(0px)"),g.style.display=-u+y<0?"none":"block"}})},c.zoomTo=function(u,d){d===void 0&&(d=u),this.scroll(this.getRulerScrollPos(),u),this.scrollGuides(this.getGuideScrollPos(),d)},c.getElement=function(){return this.managerRef.current},c.getRulerElement=function(){return this.ruler.canvasElement},c.getGuideScrollPos=function(){return this.scrollPos},c.getRulerScrollPos=function(){return this.ruler.getScrollPos()},c.scroll=function(u,d){d===void 0&&(d=this._zoom),this._setZoom({zoom:d}),this.ruler.scroll(u,d)},c.resize=function(u){u===void 0&&(u=this._zoom),this._setZoom({zoom:u}),this.ruler.resize(u)},c.movePos=function(u){var d=u.datas,p=u.distX,v=u.distY,A=this.props,b=A.type,g=A.snaps,x=A.snapThreshold,y=A.displayDragPos,f=A.digit,m=A.guidesOffset||0,C=this._guidesZoom,S=A.dragPosFormat||function(O){return O},w=b==="horizontal",_=calculateMatrixDist(d.matrix,[p,v]),I=d.offsetPos,$=_[0]+I[0],P=_[1]+I[1],E=m*C,R=Math.round(w?P:$)-m,T=parseFloat((R/C).toFixed(f||0)),B=g.slice().sort(function(O,H){return Math.abs(T-O)-Math.abs(T-H)});if(B.length&&Math.abs(B[0]*C-R)<x&&(T=B[0],R=T*C),!d.fromRuler||!this._isFirstMove){if(y){var M=b==="horizontal"?[$,R+E]:[R+E,P];this.displayElement.style.cssText+="display: block;transform: translate(-50%, -50%) "+"translate(".concat(M.map(function(O){return"".concat(O,"px")}).join(", "),")"),this.displayElement.innerHTML="".concat(S(T))}var k=d.target;k.setAttribute("data-pos",T),k.style.transform="".concat(this.getTranslateName(),"(").concat(R+m*C,"px)")}return R},c.getTranslateName=function(){return this.props.type==="horizontal"?"translateY":"translateX"},c._startDragScroll=function(u){var d=this,p=this.props.scrollOptions;if(p){var v=u.datas,A=new DragScroll;v.dragScroll=A,A.on("scroll",function(b){var g,x,y=b.container,f=b.direction;(x=(g=d.props).onRequestScroll)===null||x===void 0||x.call(g,{container:y,direction:f})}).on("move",function(b){var g=b.offsetX,x=b.offsetY,y=b.inputEvent;d.gesto.scrollBy(g,x,y.inputEvent,!0)}),A.dragStart(u,{container:p.container})}},c._dragScroll=function(u){var d=this.props.scrollOptions;if(d){var p=u.datas.dragScroll;p.drag(u,d)}},c._endDragScroll=function(u){var d;(d=u.datas.dragScroll)===null||d===void 0||d.dragEnd(),u.datas.dragScroll=null},c._setZoom=function(u){var d=u.zoom,p=u.guidesZoom;this.props.zoom;var v=!!this.props.guidesZoom;v?p&&(this._guidesZoom=p):(p&&(this._zoom=p,this._guidesZoom=p),d&&(this._guidesZoom=d)),d&&(this._zoom=d)},s.defaultProps={className:"",type:"horizontal",zoom:1,guidesZoom:0,style:{},snapThreshold:5,snaps:[],digit:0,onClickRuler:function(){},onChangeGuides:function(){},onRequestScroll:function(){},onDragStart:function(){},onDrag:function(){},onDragEnd:function(){},displayDragPos:!1,dragPosFormat:function(u){return u},defaultGuides:[],lockGuides:!1,showGuides:!0,guideStyle:{},dragGuideStyle:{},guidePosStyle:{},defaultGuidesPos:0},s}(reactExports.PureComponent);const guideStyle=(a,s,c,u)=>({position:"absolute",top:a,left:s,height:c,width:u,background:"#333333"}),_Guides=({paperSize:a,horizontalRef:s,verticalRef:c})=>jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx("div",{className:"ruler-container",style:guideStyle(-30,-30,RULER_HEIGHT,RULER_HEIGHT)}),jsxRuntimeExports.jsx(Guides,{zoom:ZOOM,style:guideStyle(-30,0,RULER_HEIGHT,a.width),type:"horizontal",ref:s}),jsxRuntimeExports.jsx(Guides,{zoom:ZOOM,style:guideStyle(0,-30,a.height,RULER_HEIGHT),type:"vertical",ref:c})]}),Mask=({width:a,height:s})=>jsxRuntimeExports.jsx("div",{style:{position:"absolute",top:-30,left:-30,zIndex:100,width:a,height:s,background:theme.useToken().token.colorBgMask}}),getPaddingStyle=(a,s,c)=>{const u={position:"absolute",background:c,opacity:.25,pointerEvents:"none"};switch(a){case 0:u.top=0,u.height=`${s*ZOOM}px`,u.left=0,u.right=0;break;case 1:u.right=0,u.width=`${s*ZOOM}px`,u.top=0,u.bottom=0;break;case 2:u.bottom=0,u.height=`${s*ZOOM}px`,u.left=0,u.right=0;break;case 3:u.left=0,u.width=`${s*ZOOM}px`,u.top=0,u.bottom=0;break}return u},Padding=({basePdf:a})=>jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment,{children:isBlankPdf(a)&&a.padding.map((s,c)=>jsxRuntimeExports.jsx("div",{style:getPaddingStyle(c,s,theme.useToken().token.colorError)},String(c)))}),StaticSchema=a=>{const{template:{schemas:s,basePdf:c},input:u,scale:d,totalPages:p,currentPage:v}=a;return!isBlankPdf(c)||!c.staticSchema?null:jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment,{children:c.staticSchema.map(A=>jsxRuntimeExports.jsx(Renderer,{schema:{...A,id:uuid$6()},basePdf:c,value:A.readOnly?replacePlaceholders({content:A.content||"",variables:{...u,totalPages:p,currentPage:v},schemas:s}):A.content||"",onChangeHoveringSchemaId:()=>{},mode:"viewer",outline:"none",scale:d,selectable:!1},A.name))})},mm2px=a=>a*3.7795275591,DELETE_BTN_ID=uuid$6(),fmt4Num=a=>Number(a.replace("px","")),fmt=a=>round$1(fmt4Num(a)/ZOOM,2),isTopLeftResize=a=>a==="-1,-1"||a==="-1,0"||a==="0,-1",normalizeRotate=a=>(a%360+360)%360,DeleteButton=({activeElements:a})=>{const{token:s}=theme.useToken(),c=26,u=Math.min(...a.map(({style:p})=>fmt4Num(p.top))),d=Math.max(...a.map(({style:p})=>fmt4Num(p.left)+fmt4Num(p.width)))+10;return jsxRuntimeExports.jsx(Button$1,{id:DELETE_BTN_ID,style:{position:"absolute",zIndex:1,top:u,left:d,width:c,height:c,padding:2,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:s.borderRadius,color:s.colorWhite,background:s.colorPrimary},children:jsxRuntimeExports.jsx(X,{style:{pointerEvents:"none"}})})},Canvas=(a,s)=>{const{basePdf:c,pageCursor:u,scale:d,backgrounds:p,pageSizes:v,size:A,activeElements:b,schemasList:g,hoveringSchemaId:x,onEdit:y,changeSchemas:f,removeSchemas:m,onChangeHoveringSchemaId:C,paperRefs:S,sidebarOpen:w}=a,{token:_}=theme.useToken(),I=reactExports.useContext(PluginsRegistry),$=reactExports.useRef([]),P=reactExports.useRef([]),E=reactExports.useRef(null),[R,T]=reactExports.useState(!1),[B,M]=reactExports.useState(!1),k=usePrevious(g[u]),O=ae=>{ae.shiftKey&&T(!0)},H=ae=>{(ae.key==="Shift"||!ae.shiftKey)&&T(!1),(ae.key==="Escape"||ae.key==="Esc")&&M(!1)},j=reactExports.useCallback(()=>{window.addEventListener("keydown",O),window.addEventListener("keyup",H)},[]),q=reactExports.useCallback(()=>{window.removeEventListener("keydown",O),window.removeEventListener("keyup",H)},[]);reactExports.useEffect(()=>(j(),q),[j,q]),reactExports.useEffect(()=>{var K,te;if((K=E.current)==null||K.updateRect(),!k)return;const ae=JSON.stringify(k[u]||{}),V=JSON.stringify(g[u]||{});ae===V&&((te=E.current)==null||te.updateRect())},[u,g,k]);const L=({target:ae,top:V,left:K})=>{const{width:te,height:ie}=ae.style,ce=fmt(te),me=fmt(ie),we=V/ZOOM,ve=K/ZOOM,{width:ge,height:ue}=v[u];let se=0,oe=0,de=0,le=0;if(isBlankPdf(c)){const[xe,Ce,$e,Se]=c.padding;se=xe*ZOOM,oe=Ce,de=$e,le=Se*ZOOM}we+me>ue-de?ae.style.top=`${(ue-me-de)*ZOOM}px`:ae.style.top=`${V<se?se:V}px`,ve+ce>ge-oe?ae.style.left=`${(ge-ce-oe)*ZOOM}px`:ae.style.left=`${K<le?le:K}px`},F=({target:ae})=>{const{top:V,left:K}=ae.style;f([{key:"position.y",value:fmt(V),schemaId:ae.id},{key:"position.x",value:fmt(K),schemaId:ae.id}])},U=({targets:ae})=>{const V=ae.map(({style:{top:K,left:te},id:ie})=>[{key:"position.y",value:fmt(K),schemaId:ie},{key:"position.x",value:fmt(te),schemaId:ie}]);f(flatten(V))},N=({target:ae,rotate:V})=>{ae.style.transform=`rotate(${V}deg)`},D=({target:ae})=>{const{transform:V}=ae.style,K=Number(V.replace("rotate(","").replace("deg)","")),te=normalizeRotate(K);f([{key:"rotate",value:te,schemaId:ae.id}])},W=({targets:ae})=>{const V=ae.map(({style:{transform:K},id:te})=>{const ie=Number(K.replace("rotate(","").replace("deg)",""));return[{key:"rotate",value:normalizeRotate(ie),schemaId:te}]});f(flatten(V))},Z=({target:ae})=>{const{id:V,style:K}=ae,{width:te,height:ie,top:ce,left:me}=K;f([{key:"position.x",value:fmt(me),schemaId:V},{key:"position.y",value:fmt(ce),schemaId:V},{key:"width",value:fmt(te),schemaId:V},{key:"height",value:fmt(ie),schemaId:V}]);const we=g[u].find(ve=>ve.id===V);we&&(we.position.x=fmt(me),we.position.y=fmt(ce),we.width=fmt(te),we.height=fmt(ie))},Q=({targets:ae})=>{const V=ae.map(({style:{width:K,height:te,top:ie,left:ce},id:me})=>[{key:"width",value:fmt(K),schemaId:me},{key:"height",value:fmt(te),schemaId:me},{key:"position.y",value:fmt(ie),schemaId:me},{key:"position.x",value:fmt(ce),schemaId:me}]);f(flatten(V))},Y=({target:ae,width:V,height:K,direction:te})=>{if(!ae)return;let ie=0,ce=0,me=0,we=0;if(isBlankPdf(c)){const[xe,Ce,$e,Se]=c.padding;ie=xe*ZOOM,ce=mm2px(Ce),me=mm2px($e),we=Se*ZOOM}const ve=mm2px(v[u].width),ge=mm2px(v[u].height),ue={width:`${V}px`,height:`${K}px`},se=ae.style;let oe=fmt4Num(se.left)+(fmt4Num(se.width)-V),de=fmt4Num(se.top)+(fmt4Num(se.height)-K);oe<we&&(oe=we),de<ie&&(de=ie),oe+V>ve-ce&&(ue.width=`${ve-ce-oe}px`),de+K>ge-me&&(ue.height=`${ge-me-de}px`);const le=te.toString();isTopLeftResize(le)?(ue.top=`${de}px`,ue.left=`${oe}px`):le==="1,-1"?ue.top=`${de}px`:le==="-1,1"&&(ue.left=`${oe}px`),Object.assign(se,ue)},J=(ae,V)=>ae[V]&&ae[V].getGuides().map(K=>K*ZOOM),ee=()=>{M(!0)},re=reactExports.useMemo(()=>{const V=(g[u]||[]).filter(ie=>b.map(ce=>ce.id).includes(ie.id)).map(ie=>ie.type),K=[...new Set(V)],te=[];return I.entries().forEach(([,ie])=>{ie.propPanel.defaultSchema&&te.push(ie.propPanel.defaultSchema)}),K.every(ie=>{const ce=te.find(me=>me&&"type"in me&&me.type===ie);return ce&&"rotate"in ce})},[b,u,g,I]);return jsxRuntimeExports.jsxs("div",{style:{position:"relative",overflow:"auto",marginRight:w?RIGHT_SIDEBAR_WIDTH:0,...A},ref:s,children:[jsxRuntimeExports.jsx(Selecto,{container:S.current[u],continueSelect:R,onDragStart:ae=>{var ce;const V=ae.inputEvent,K=V.target,te=(ce=E.current)==null?void 0:ce.isMoveableElement(K);(V.type==="touchstart"&&ae.isTrusted||te)&&ae.stop(),S.current[u]===K&&y([]);const ie=K;ie&&ie.id===DELETE_BTN_ID&&m(b.map(me=>me.id))},onSelect:ae=>{const V=ae.inputEvent,K=ae.added,te=ae.removed,ie=ae.selected,ce=V.type==="mousedown";let me=ce?ie:[];!ce&&K.length>0&&(me=b.concat(K)),!ce&&te.length>0&&(me=b.filter(ve=>!te.includes(ve))),y(me),me!=b&&M(!1);const we=V;we&&typeof we.shiftKey=="boolean"&&!we.shiftKey&&T(!1)}}),jsxRuntimeExports.jsx(Paper,{paperRefs:S,scale:d,size:A,schemasList:g,pageSizes:v,backgrounds:p,hasRulers:!0,renderPaper:({index:ae,paperSize:V})=>jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[!B&&b.length>0&&u===ae&&jsxRuntimeExports.jsx(DeleteButton,{activeElements:b}),jsxRuntimeExports.jsx(Padding,{basePdf:c}),jsxRuntimeExports.jsx(StaticSchema,{template:{schemas:g,basePdf:c},input:Object.fromEntries(g.flat().map(({name:K,content:te=""})=>[K,te])),scale:d,totalPages:g.length,currentPage:ae+1}),jsxRuntimeExports.jsx(_Guides,{paperSize:V,horizontalRef:K=>{K&&(P.current[ae]=K)},verticalRef:K=>{K&&($.current[ae]=K)}}),u!==ae?jsxRuntimeExports.jsx(Mask,{width:V.width+RULER_HEIGHT,height:V.height+RULER_HEIGHT}):!B&&jsxRuntimeExports.jsx(Moveable$1,{ref:E,target:b,bounds:{left:0,top:0,bottom:V.height,right:V.width},horizontalGuidelines:J(P.current,ae),verticalGuidelines:J($.current,ae),keepRatio:R,rotatable:re,onDrag:L,onDragEnd:F,onDragGroupEnd:U,onRotate:N,onRotateEnd:D,onRotateGroupEnd:W,onResize:Y,onResizeEnd:Z,onResizeGroupEnd:Q,onClick:ee})]}),renderSchema:({schema:ae,index:V})=>{const K=B&&b.map(ce=>ce.id).includes(ae.id)?"designer":"viewer",te=ae.content||"";let ie=te;if(K!=="designer"&&ae.readOnly){const ce={...g.flat().reduce((me,we)=>(me[we.name]=we.content||"",me),{}),totalPages:g.length,currentPage:V+1};ie=replacePlaceholders({content:te,variables:ce,schemas:g})}return jsxRuntimeExports.jsx(Renderer,{schema:ae,basePdf:c,value:ie,onChangeHoveringSchemaId:C,mode:K,onChange:(g[u]||[]).some(ce=>ce.id===ae.id)?ce=>{const me=Array.isArray(ce)?ce:[ce];f(me.map(({key:we,value:ve})=>({key:we,value:ve,schemaId:ae.id})))}:void 0,stopEditing:()=>M(!1),outline:`1px ${x===ae.id?"solid":"dashed"} ${ae.readOnly&&x!==ae.id?"transparent":_.colorPrimary}`,scale:d},ae.id)}})]})},Canvas$1=reactExports.forwardRef(Canvas),Spinner=()=>{const{token:a}=theme.useToken(),s={position:"relative",width:"100%",height:"100%",overflow:"hidden",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"50%",color:a.colorPrimary},c={animation:"spin 1s linear infinite"};return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx("style",{children:`
+`);__spreadArray(["className","rulerStyle","snapThreshold","snaps","displayDragPos","cspNonce","dragPosFormat","defaultGuides","showGuides","scrollOptions","guideStyle","guidesOffset","digit","defaultGuidesPos","dragGuideStyle","displayGuidePos","guidePosFormat","guidePosStyle","lockGuides","guidesZoom"],PROPERTIES,!0);var GuidesElement=styled("div",GUIDES_CSS),Guides=function(a){__extends(s,a);function s(u){var d=a.call(this,u)||this;return d.state={guides:[]},d.scrollPos=0,d.managerRef=reactExports.createRef(),d.guideElements=[],d._isFirstMove=!1,d._zoom=1,d._guidesZoom=1,d._observer=null,d.onDragStart=function(p){var v=p.datas,A=p.inputEvent;d._isFirstMove=!0,d.movePos(p),d.props.onDragStart(__assign(__assign({},p),{dragElement:v.target})),d.gesto.isFlag()&&(A.stopPropagation(),A.preventDefault(),d._startDragScroll(p))},d._onDrag=function(p){d._isFirstMove&&(d._isFirstMove=!1,addClass(p.datas.target,DRAGGING));var v=d.movePos(p);if(d.props.onDrag(__assign(__assign({},p),{dragElement:p.datas.target})),!d.gesto.isFlag()){d._endDragScroll(p);return}return d._dragScroll(p),v},d.onDragEnd=function(p){var v=p.datas,A=p.isDouble,b=p.distX,g=p.distY,x=d.movePos(p),y=d.state.guides,f=d.props,m=f.onChangeGuides,C=f.displayDragPos,S=f.digit,w=f.lockGuides,_=f.guidesOffset,I=d._guidesZoom,$=parseFloat((x/I).toFixed(S||0)),P=d.scrollPos-(_||0);if(C&&(d.displayElement.style.cssText+="display: none;"),removeClass(v.target,DRAGGING),d.props.onDragEnd(__assign(__assign({},p),{dragElement:v.target})),d._endDragScroll(p),v.fromRuler)d._isFirstMove&&d.props.onClickRuler(__assign(__assign({},p),{pos:0})),$>=P&&y.indexOf($)<0&&d.setState({guides:__spreadArray(__spreadArray([],y,!0),[$],!1)},function(){m({guides:d.state.guides,distX:b,distY:g,index:y.length,isAdd:!0,isRemove:!1,isChange:!1})});else{var E=parseFloat(v.target.getAttribute("data-index")),R=!1,T=!1;y=__spreadArray([],y,!0);var B=y.indexOf($);if(A||$<P||B>-1&&B!==E){if(w&&(w===!0||w.indexOf("remove")>-1))return;y.splice(E,1),R=!0}else{if(B>-1)return;if(w&&(w===!0||w.indexOf("change")>-1))return;y[E]=$,T=!0}d.setState({guides:y},function(){var M=d.state.guides;m({distX:b,distY:g,guides:M,isAdd:!1,index:E,isChange:T,isRemove:R})})}},d._onCheck=function(){d.resize()},d.state.guides=u.defaultGuides||[],d.scrollPos=u.defaultGuidesPos||0,d}var c=s.prototype;return c.render=function(){var u=this.props,d=u.className,p=u.type,v=u.zoom,A=u.guidesZoom,b=u.style,g=u.rulerStyle,x=u.displayDragPos,y=u.cspNonce,f=u.dragGuideStyle,m=u.guidePosStyle,C=m===void 0?{}:m,S=this.props,w=this.getTranslateName(),_={};return PROPERTIES.forEach(function(I){I==="style"||I==="warpSelf"||I==="useResizeObserver"||(_[I]=S[I])}),this._zoom=v,this._guidesZoom=A||v,reactExports.createElement(GuidesElement,{ref:this.managerRef,cspNonce:y,className:"".concat(prefix("manager",p)," ").concat(d),style:b},reactExports.createElement("div",{className:prefix("guide-origin"),ref:ref(this,"originElement")}),reactExports.createElement(Ruler,__assign({ref:ref(this,"ruler"),style:g},_)),reactExports.createElement("div",{className:GUIDES,ref:ref(this,"guidesElement"),style:{transform:"".concat(w,"(").concat(-this.scrollPos*this._guidesZoom,"px)")}},x&&reactExports.createElement("div",{className:DISPLAY_DRAG,ref:ref(this,"displayElement"),style:C||{}}),reactExports.createElement("div",{className:ADDER,ref:ref(this,"adderElement"),style:f}),this.renderGuides()))},c.drawRuler=function(u){this.ruler.draw(u)},c.renderGuides=function(){var u=this,d=this.props,p=d,v=p.type,A=p.showGuides,b=p.guideStyle,g=p.displayGuidePos,x=p.guidePosStyle,y=x===void 0?{}:x,f=p.guidesOffset,m=this._guidesZoom,C=this.getTranslateName(),S=this.state.guides,w=d.guidePosFormat||d.dragPosFormat||function(_){return _};if(this.guideElements=[],A)return S.map(function(_,I){var $=_+(f||0);return reactExports.createElement("div",{className:prefix("guide",v),ref:refs(u,"guideElements",I),key:I,"data-index":I,"data-pos":_,style:__assign(__assign({},b),{transform:"".concat(C,"(").concat($*m,"px) translateZ(0px)")})},g&&reactExports.createElement("div",{className:prefix("guide-pos"),style:y||{}},w(_)))})},c.componentDidMount=function(){var u=this;this.gesto=new Gesto(this.managerRef.current,{container:document.body}).on("dragStart",function(d){var p=u.props,v=p.type,A=p.lockGuides,b=u._guidesZoom;if(A===!0){d.stop();return}var g=d.inputEvent,x=g.target,y=d.datas,f=u.ruler.canvasElement,m=u.guidesElement,C=v==="horizontal",S=u.originElement.getBoundingClientRect(),w=getDistElementMatrix(u.managerRef.current),_=calculateMatrixDist(w,[d.clientX-S.left,d.clientY-S.top]);_[0]-=m.offsetLeft,_[1]-=m.offsetTop,_[C?1:0]+=u.scrollPos*b,y.offsetPos=_,y.matrix=w;var I=A&&A.indexOf("add")>-1,$=A&&A.indexOf("remove")>-1,P=A&&A.indexOf("change")>-1;if(x===f){if(I){d.stop();return}y.fromRuler=!0,y.target=u.adderElement}else if(hasClass(x,GUIDE)){if($&&P){d.stop();return}y.target=x}else return d.stop(),!1;u.onDragStart(d)}).on("drag",this._onDrag).on("dragEnd",this.onDragEnd),this.props.useResizeObserver?(this._observer=new ResizeObserver(this._onCheck),this._observer.observe(this.guidesElement,{box:"border-box"}),this._observer.observe(this.getRulerElement(),{box:"border-box"})):this._onCheck()},c.componentWillUnmount=function(){var u;this.gesto.unset(),(u=this._observer)===null||u===void 0||u.disconnect()},c.componentDidUpdate=function(u){var d=this.props.defaultGuides;u.defaultGuides!==d&&this.setState({guides:d||[]})},c.loadGuides=function(u){this.setState({guides:u})},c.getGuides=function(){return this.state.guides},c.scrollGuides=function(u,d){d===void 0&&(d=this._guidesZoom),this._setZoom({guidesZoom:d});var p=this.getTranslateName(),v=this.guidesElement;this.scrollPos=u,v.style.transform="".concat(p,"(").concat(-u*d,"px)");var A=this.state.guides,b=this.props.guidesOffset||0;this.guideElements.forEach(function(g,x){if(g){var y=A[x]+(b||0);g.style.transform="".concat(p,"(").concat(y*d,"px) translateZ(0px)"),g.style.display=-u+y<0?"none":"block"}})},c.zoomTo=function(u,d){d===void 0&&(d=u),this.scroll(this.getRulerScrollPos(),u),this.scrollGuides(this.getGuideScrollPos(),d)},c.getElement=function(){return this.managerRef.current},c.getRulerElement=function(){return this.ruler.canvasElement},c.getGuideScrollPos=function(){return this.scrollPos},c.getRulerScrollPos=function(){return this.ruler.getScrollPos()},c.scroll=function(u,d){d===void 0&&(d=this._zoom),this._setZoom({zoom:d}),this.ruler.scroll(u,d)},c.resize=function(u){u===void 0&&(u=this._zoom),this._setZoom({zoom:u}),this.ruler.resize(u)},c.movePos=function(u){var d=u.datas,p=u.distX,v=u.distY,A=this.props,b=A.type,g=A.snaps,x=A.snapThreshold,y=A.displayDragPos,f=A.digit,m=A.guidesOffset||0,C=this._guidesZoom,S=A.dragPosFormat||function(O){return O},w=b==="horizontal",_=calculateMatrixDist(d.matrix,[p,v]),I=d.offsetPos,$=_[0]+I[0],P=_[1]+I[1],E=m*C,R=Math.round(w?P:$)-m,T=parseFloat((R/C).toFixed(f||0)),B=g.slice().sort(function(O,H){return Math.abs(T-O)-Math.abs(T-H)});if(B.length&&Math.abs(B[0]*C-R)<x&&(T=B[0],R=T*C),!d.fromRuler||!this._isFirstMove){if(y){var M=b==="horizontal"?[$,R+E]:[R+E,P];this.displayElement.style.cssText+="display: block;transform: translate(-50%, -50%) "+"translate(".concat(M.map(function(O){return"".concat(O,"px")}).join(", "),")"),this.displayElement.innerHTML="".concat(S(T))}var k=d.target;k.setAttribute("data-pos",T),k.style.transform="".concat(this.getTranslateName(),"(").concat(R+m*C,"px)")}return R},c.getTranslateName=function(){return this.props.type==="horizontal"?"translateY":"translateX"},c._startDragScroll=function(u){var d=this,p=this.props.scrollOptions;if(p){var v=u.datas,A=new DragScroll;v.dragScroll=A,A.on("scroll",function(b){var g,x,y=b.container,f=b.direction;(x=(g=d.props).onRequestScroll)===null||x===void 0||x.call(g,{container:y,direction:f})}).on("move",function(b){var g=b.offsetX,x=b.offsetY,y=b.inputEvent;d.gesto.scrollBy(g,x,y.inputEvent,!0)}),A.dragStart(u,{container:p.container})}},c._dragScroll=function(u){var d=this.props.scrollOptions;if(d){var p=u.datas.dragScroll;p.drag(u,d)}},c._endDragScroll=function(u){var d;(d=u.datas.dragScroll)===null||d===void 0||d.dragEnd(),u.datas.dragScroll=null},c._setZoom=function(u){var d=u.zoom,p=u.guidesZoom;this.props.zoom;var v=!!this.props.guidesZoom;v?p&&(this._guidesZoom=p):(p&&(this._zoom=p,this._guidesZoom=p),d&&(this._guidesZoom=d)),d&&(this._zoom=d)},s.defaultProps={className:"",type:"horizontal",zoom:1,guidesZoom:0,style:{},snapThreshold:5,snaps:[],digit:0,onClickRuler:function(){},onChangeGuides:function(){},onRequestScroll:function(){},onDragStart:function(){},onDrag:function(){},onDragEnd:function(){},displayDragPos:!1,dragPosFormat:function(u){return u},defaultGuides:[],lockGuides:!1,showGuides:!0,guideStyle:{},dragGuideStyle:{},guidePosStyle:{},defaultGuidesPos:0},s}(reactExports.PureComponent);const guideStyle=(a,s,c,u)=>({position:"absolute",top:a,left:s,height:c,width:u,background:"#333333"}),_Guides=({paperSize:a,horizontalRef:s,verticalRef:c})=>jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx("div",{className:"ruler-container",style:guideStyle(-30,-30,RULER_HEIGHT,RULER_HEIGHT)}),jsxRuntimeExports.jsx(Guides,{zoom:ZOOM,style:guideStyle(-30,0,RULER_HEIGHT,a.width),type:"horizontal",ref:s}),jsxRuntimeExports.jsx(Guides,{zoom:ZOOM,style:guideStyle(0,-30,a.height,RULER_HEIGHT),type:"vertical",ref:c})]}),Mask=({width:a,height:s})=>jsxRuntimeExports.jsx("div",{style:{position:"absolute",top:-30,left:-30,zIndex:100,width:a,height:s,background:theme.useToken().token.colorBgMask}}),getPaddingStyle=(a,s,c)=>{const u={position:"absolute",background:c,opacity:.25,pointerEvents:"none"};switch(a){case 0:u.top=0,u.height=`${s*ZOOM}px`,u.left=0,u.right=0;break;case 1:u.right=0,u.width=`${s*ZOOM}px`,u.top=0,u.bottom=0;break;case 2:u.bottom=0,u.height=`${s*ZOOM}px`,u.left=0,u.right=0;break;case 3:u.left=0,u.width=`${s*ZOOM}px`,u.top=0,u.bottom=0;break}return u},Padding=({basePdf:a})=>jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment,{children:isBlankPdf(a)&&a.padding.map((s,c)=>jsxRuntimeExports.jsx("div",{style:getPaddingStyle(c,s,theme.useToken().token.colorError)},String(c)))}),StaticSchema=a=>{const{template:{schemas:s,basePdf:c},input:u,scale:d,totalPages:p,currentPage:v}=a;return!isBlankPdf(c)||!c.staticSchema?null:jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment,{children:c.staticSchema.map(A=>jsxRuntimeExports.jsx(Renderer,{schema:{...A,id:uuid$6()},basePdf:c,value:replacePlaceholders({content:A.content||"",variables:{...u,totalPages:p,currentPage:v},schemas:s}),onChangeHoveringSchemaId:()=>{},mode:"viewer",outline:"none",scale:d,selectable:!1},A.name))})},mm2px=a=>a*3.7795275591,DELETE_BTN_ID=uuid$6(),fmt4Num=a=>Number(a.replace("px","")),fmt=a=>round$1(fmt4Num(a)/ZOOM,2),isTopLeftResize=a=>a==="-1,-1"||a==="-1,0"||a==="0,-1",normalizeRotate=a=>(a%360+360)%360,DeleteButton=({activeElements:a})=>{const{token:s}=theme.useToken(),c=26,u=Math.min(...a.map(({style:p})=>fmt4Num(p.top))),d=Math.max(...a.map(({style:p})=>fmt4Num(p.left)+fmt4Num(p.width)))+10;return jsxRuntimeExports.jsx(Button$1,{id:DELETE_BTN_ID,style:{position:"absolute",zIndex:1,top:u,left:d,width:c,height:c,padding:2,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:s.borderRadius,color:s.colorWhite,background:s.colorPrimary},children:jsxRuntimeExports.jsx(X,{style:{pointerEvents:"none"}})})},Canvas=(a,s)=>{const{basePdf:c,pageCursor:u,scale:d,backgrounds:p,pageSizes:v,size:A,activeElements:b,schemasList:g,hoveringSchemaId:x,onEdit:y,changeSchemas:f,removeSchemas:m,onChangeHoveringSchemaId:C,paperRefs:S,sidebarOpen:w}=a,{token:_}=theme.useToken(),I=reactExports.useContext(PluginsRegistry),$=reactExports.useRef([]),P=reactExports.useRef([]),E=reactExports.useRef(null),[R,T]=reactExports.useState(!1),[B,M]=reactExports.useState(!1),k=usePrevious(g[u]),O=ae=>{ae.shiftKey&&T(!0)},H=ae=>{(ae.key==="Shift"||!ae.shiftKey)&&T(!1),(ae.key==="Escape"||ae.key==="Esc")&&M(!1)},j=reactExports.useCallback(()=>{window.addEventListener("keydown",O),window.addEventListener("keyup",H)},[]),q=reactExports.useCallback(()=>{window.removeEventListener("keydown",O),window.removeEventListener("keyup",H)},[]);reactExports.useEffect(()=>(j(),q),[j,q]),reactExports.useEffect(()=>{var K,te;if((K=E.current)==null||K.updateRect(),!k)return;const ae=JSON.stringify(k[u]||{}),V=JSON.stringify(g[u]||{});ae===V&&((te=E.current)==null||te.updateRect())},[u,g,k]);const L=({target:ae,top:V,left:K})=>{const{width:te,height:ie}=ae.style,ce=fmt(te),me=fmt(ie),we=V/ZOOM,ve=K/ZOOM,{width:ge,height:ue}=v[u];let se=0,oe=0,de=0,le=0;if(isBlankPdf(c)){const[xe,Ce,$e,Se]=c.padding;se=xe*ZOOM,oe=Ce,de=$e,le=Se*ZOOM}we+me>ue-de?ae.style.top=`${(ue-me-de)*ZOOM}px`:ae.style.top=`${V<se?se:V}px`,ve+ce>ge-oe?ae.style.left=`${(ge-ce-oe)*ZOOM}px`:ae.style.left=`${K<le?le:K}px`},F=({target:ae})=>{const{top:V,left:K}=ae.style;f([{key:"position.y",value:fmt(V),schemaId:ae.id},{key:"position.x",value:fmt(K),schemaId:ae.id}])},U=({targets:ae})=>{const V=ae.map(({style:{top:K,left:te},id:ie})=>[{key:"position.y",value:fmt(K),schemaId:ie},{key:"position.x",value:fmt(te),schemaId:ie}]);f(flatten(V))},N=({target:ae,rotate:V})=>{ae.style.transform=`rotate(${V}deg)`},D=({target:ae})=>{const{transform:V}=ae.style,K=Number(V.replace("rotate(","").replace("deg)","")),te=normalizeRotate(K);f([{key:"rotate",value:te,schemaId:ae.id}])},W=({targets:ae})=>{const V=ae.map(({style:{transform:K},id:te})=>{const ie=Number(K.replace("rotate(","").replace("deg)",""));return[{key:"rotate",value:normalizeRotate(ie),schemaId:te}]});f(flatten(V))},Z=({target:ae})=>{const{id:V,style:K}=ae,{width:te,height:ie,top:ce,left:me}=K;f([{key:"position.x",value:fmt(me),schemaId:V},{key:"position.y",value:fmt(ce),schemaId:V},{key:"width",value:fmt(te),schemaId:V},{key:"height",value:fmt(ie),schemaId:V}]);const we=g[u].find(ve=>ve.id===V);we&&(we.position.x=fmt(me),we.position.y=fmt(ce),we.width=fmt(te),we.height=fmt(ie))},Q=({targets:ae})=>{const V=ae.map(({style:{width:K,height:te,top:ie,left:ce},id:me})=>[{key:"width",value:fmt(K),schemaId:me},{key:"height",value:fmt(te),schemaId:me},{key:"position.y",value:fmt(ie),schemaId:me},{key:"position.x",value:fmt(ce),schemaId:me}]);f(flatten(V))},Y=({target:ae,width:V,height:K,direction:te})=>{if(!ae)return;let ie=0,ce=0,me=0,we=0;if(isBlankPdf(c)){const[xe,Ce,$e,Se]=c.padding;ie=xe*ZOOM,ce=mm2px(Ce),me=mm2px($e),we=Se*ZOOM}const ve=mm2px(v[u].width),ge=mm2px(v[u].height),ue={width:`${V}px`,height:`${K}px`},se=ae.style;let oe=fmt4Num(se.left)+(fmt4Num(se.width)-V),de=fmt4Num(se.top)+(fmt4Num(se.height)-K);oe<we&&(oe=we),de<ie&&(de=ie),oe+V>ve-ce&&(ue.width=`${ve-ce-oe}px`),de+K>ge-me&&(ue.height=`${ge-me-de}px`);const le=te.toString();isTopLeftResize(le)?(ue.top=`${de}px`,ue.left=`${oe}px`):le==="1,-1"?ue.top=`${de}px`:le==="-1,1"&&(ue.left=`${oe}px`),Object.assign(se,ue)},J=(ae,V)=>ae[V]&&ae[V].getGuides().map(K=>K*ZOOM),ee=()=>{M(!0)},re=reactExports.useMemo(()=>{const V=(g[u]||[]).filter(ie=>b.map(ce=>ce.id).includes(ie.id)).map(ie=>ie.type),K=[...new Set(V)],te=[];return I.entries().forEach(([,ie])=>{ie.propPanel.defaultSchema&&te.push(ie.propPanel.defaultSchema)}),K.every(ie=>{const ce=te.find(me=>me&&"type"in me&&me.type===ie);return ce&&"rotate"in ce})},[b,u,g,I]);return jsxRuntimeExports.jsxs("div",{style:{position:"relative",overflow:"auto",marginRight:w?RIGHT_SIDEBAR_WIDTH:0,...A},ref:s,children:[jsxRuntimeExports.jsx(Selecto,{container:S.current[u],continueSelect:R,onDragStart:ae=>{var ce;const V=ae.inputEvent,K=V.target,te=(ce=E.current)==null?void 0:ce.isMoveableElement(K);(V.type==="touchstart"&&ae.isTrusted||te)&&ae.stop(),S.current[u]===K&&y([]);const ie=K;ie&&ie.id===DELETE_BTN_ID&&m(b.map(me=>me.id))},onSelect:ae=>{const V=ae.inputEvent,K=ae.added,te=ae.removed,ie=ae.selected,ce=V.type==="mousedown";let me=ce?ie:[];!ce&&K.length>0&&(me=b.concat(K)),!ce&&te.length>0&&(me=b.filter(ve=>!te.includes(ve))),y(me),me!=b&&M(!1);const we=V;we&&typeof we.shiftKey=="boolean"&&!we.shiftKey&&T(!1)}}),jsxRuntimeExports.jsx(Paper,{paperRefs:S,scale:d,size:A,schemasList:g,pageSizes:v,backgrounds:p,hasRulers:!0,renderPaper:({index:ae,paperSize:V})=>jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[!B&&b.length>0&&u===ae&&jsxRuntimeExports.jsx(DeleteButton,{activeElements:b}),jsxRuntimeExports.jsx(Padding,{basePdf:c}),jsxRuntimeExports.jsx(StaticSchema,{template:{schemas:g,basePdf:c},input:Object.fromEntries(g.flat().map(({name:K,content:te=""})=>[K,te])),scale:d,totalPages:g.length,currentPage:ae+1}),jsxRuntimeExports.jsx(_Guides,{paperSize:V,horizontalRef:K=>{K&&(P.current[ae]=K)},verticalRef:K=>{K&&($.current[ae]=K)}}),u!==ae?jsxRuntimeExports.jsx(Mask,{width:V.width+RULER_HEIGHT,height:V.height+RULER_HEIGHT}):!B&&jsxRuntimeExports.jsx(Moveable$1,{ref:E,target:b,bounds:{left:0,top:0,bottom:V.height,right:V.width},horizontalGuidelines:J(P.current,ae),verticalGuidelines:J($.current,ae),keepRatio:R,rotatable:re,onDrag:L,onDragEnd:F,onDragGroupEnd:U,onRotate:N,onRotateEnd:D,onRotateGroupEnd:W,onResize:Y,onResizeEnd:Z,onResizeGroupEnd:Q,onClick:ee})]}),renderSchema:({schema:ae,index:V})=>{const K=B&&b.map(ce=>ce.id).includes(ae.id)?"designer":"viewer",te=ae.content||"";let ie=te;if(K!=="designer"&&ae.readOnly){const ce={...g.flat().reduce((me,we)=>(me[we.name]=we.content||"",me),{}),totalPages:g.length,currentPage:V+1};ie=replacePlaceholders({content:te,variables:ce,schemas:g})}return jsxRuntimeExports.jsx(Renderer,{schema:ae,basePdf:c,value:ie,onChangeHoveringSchemaId:C,mode:K,onChange:(g[u]||[]).some(ce=>ce.id===ae.id)?ce=>{const me=Array.isArray(ce)?ce:[ce];f(me.map(({key:we,value:ve})=>({key:we,value:ve,schemaId:ae.id})))}:void 0,stopEditing:()=>M(!1),outline:`1px ${x===ae.id?"solid":"dashed"} ${ae.readOnly&&x!==ae.id?"transparent":_.colorPrimary}`,scale:d},ae.id)}})]})},Canvas$1=reactExports.forwardRef(Canvas),Spinner=()=>{const{token:a}=theme.useToken(),s={position:"relative",width:"100%",height:"100%",overflow:"hidden",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"50%",color:a.colorPrimary},c={animation:"spin 1s linear infinite"};return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx("style",{children:`
     @keyframes spin {
       0% {
         transform: rotate(0deg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "5.3.18-dev.1",
+  "version": "5.3.18",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/components/StaticSchema.tsx

@@ -25,11 +25,11 @@ const StaticSchema = (props: {
           key={schema.name}
           schema={{ ...schema, id: uuid() }}
           basePdf={basePdf}
-          value={schema.readOnly ? replacePlaceholders({
+          value={replacePlaceholders({
             content: schema.content || '',
             variables: { ...input, totalPages, currentPage },
             schemas,
-          }) : schema.content || ''}
+          })}
           onChangeHoveringSchemaId={() => {
             void 0;
           }}