@pdfme/ui 3.1.5-dev.15 → 3.1.5-dev.17

package/dist/path2d-polyfill.esm-yIGK7UQJ.js

@@ -1,214 +1 @@
-function F(n, a, r) {
-  if (r || arguments.length === 2)
-    for (var t = 0, o = a.length, l; t < o; t++)
-      (l || !(t in a)) && (l || (l = Array.prototype.slice.call(a, 0, t)), l[t] = a[t]);
-  return n.concat(l || Array.prototype.slice.call(a));
-}
-var q = {
-  a: 7,
-  c: 6,
-  h: 1,
-  l: 2,
-  m: 2,
-  q: 4,
-  s: 4,
-  t: 2,
-  v: 1,
-  z: 0
-}, Z = /([astvzqmhlc])([^astvzqmhlc]*)/gi, _ = /-?[0-9]*\.?[0-9]+(?:e[-+]?\d+)?/gi;
-function U(n) {
-  var a = n.match(_);
-  return a ? a.map(Number) : [];
-}
-function j(n) {
-  var a = [], r = String(n).trim();
-  return r[0] !== "M" && r[0] !== "m" || r.replace(Z, function(t, o, l) {
-    var s = U(l), u = o.toLowerCase(), h = o;
-    if (u === "m" && s.length > 2 && (a.push(F([h], s.splice(0, 2), !0)), u = "l", h = h === "m" ? "l" : "L"), s.length < q[u])
-      return "";
-    for (a.push(F([h], s.splice(0, q[u]), !0)); s.length >= q[u] && s.length && q[u]; )
-      a.push(F([h], s.splice(0, q[u]), !0));
-    return "";
-  }), a;
-}
-function B(n, a) {
-  var r = n.x * Math.cos(a) - n.y * Math.sin(a), t = n.y * Math.cos(a) + n.x * Math.sin(a);
-  n.x = r, n.y = t;
-}
-function J(n, a, r) {
-  n.x += a, n.y += r;
-}
-function H(n, a) {
-  n.x *= a, n.y *= a;
-}
-var L = (
-  /** @class */
-  function() {
-    function n(a) {
-      var r;
-      this.commands = [], a && a instanceof n ? (r = this.commands).push.apply(r, a.commands) : a && (this.commands = j(a));
-    }
-    return n.prototype.addPath = function(a) {
-      var r;
-      a && a instanceof n && (r = this.commands).push.apply(r, a.commands);
-    }, n.prototype.moveTo = function(a, r) {
-      this.commands.push(["M", a, r]);
-    }, n.prototype.lineTo = function(a, r) {
-      this.commands.push(["L", a, r]);
-    }, n.prototype.arc = function(a, r, t, o, l, s) {
-      this.commands.push(["AC", a, r, t, o, l, !!s]);
-    }, n.prototype.arcTo = function(a, r, t, o, l) {
-      this.commands.push(["AT", a, r, t, o, l]);
-    }, n.prototype.ellipse = function(a, r, t, o, l, s, u, h) {
-      this.commands.push(["E", a, r, t, o, l, s, u, !!h]);
-    }, n.prototype.closePath = function() {
-      this.commands.push(["Z"]);
-    }, n.prototype.bezierCurveTo = function(a, r, t, o, l, s) {
-      this.commands.push(["C", a, r, t, o, l, s]);
-    }, n.prototype.quadraticCurveTo = function(a, r, t, o) {
-      this.commands.push(["Q", a, r, t, o]);
-    }, n.prototype.rect = function(a, r, t, o) {
-      this.commands.push(["R", a, r, t, o]);
-    }, n.prototype.roundRect = function(a, r, t, o, l) {
-      typeof l > "u" ? this.commands.push(["RR", a, r, t, o, 0]) : this.commands.push(["RR", a, r, t, o, l]);
-    }, n;
-  }()
-);
-function N(n, a) {
-  var r = 0, t = 0, o, l, s, u, h, v, P, C, I, A, S, G, D, p, f, z, d, b, m, E, Q, g = null, R = null, y = null, T = null, M = null, k = null;
-  n.beginPath();
-  for (var i = 0; i < a.length; ++i) {
-    b = a[i][0], b !== "S" && b !== "s" && b !== "C" && b !== "c" && (g = null, R = null), b !== "T" && b !== "t" && b !== "Q" && b !== "q" && (y = null, T = null);
-    var e = void 0;
-    switch (b) {
-      case "m":
-      case "M":
-        e = a[i], b === "m" ? (r += e[1], t += e[2]) : (r = e[1], t = e[2]), (b === "M" || !M) && (M = { x: r, y: t }), n.moveTo(r, t);
-        break;
-      case "l":
-        e = a[i], r += e[1], t += e[2], n.lineTo(r, t);
-        break;
-      case "L":
-        e = a[i], r = e[1], t = e[2], n.lineTo(r, t);
-        break;
-      case "H":
-        e = a[i], r = e[1], n.lineTo(r, t);
-        break;
-      case "h":
-        e = a[i], r += e[1], n.lineTo(r, t);
-        break;
-      case "V":
-        e = a[i], t = e[1], n.lineTo(r, t);
-        break;
-      case "v":
-        e = a[i], t += e[1], n.lineTo(r, t);
-        break;
-      case "a":
-      case "A":
-        if (e = a[i], k === null)
-          throw new Error("This should never happen");
-        b === "a" ? (r += e[6], t += e[7]) : (r = e[6], t = e[7]), p = e[1], f = e[2], P = e[3] * Math.PI / 180, s = !!e[4], u = !!e[5], h = { x: r, y: t }, v = {
-          x: (k.x - h.x) / 2,
-          y: (k.y - h.y) / 2
-        }, B(v, -P), C = v.x * v.x / (p * p) + v.y * v.y / (f * f), C > 1 && (C = Math.sqrt(C), p *= C, f *= C), m = {
-          x: p * v.y / f,
-          y: -(f * v.x) / p
-        }, I = p * p * f * f, A = p * p * v.y * v.y + f * f * v.x * v.x, u !== s ? H(m, Math.sqrt((I - A) / A) || 0) : H(m, -Math.sqrt((I - A) / A) || 0), l = Math.atan2((v.y - m.y) / f, (v.x - m.x) / p), o = Math.atan2(-(v.y + m.y) / f, -(v.x + m.x) / p), B(m, P), J(m, (h.x + k.x) / 2, (h.y + k.y) / 2), n.save(), n.translate(m.x, m.y), n.rotate(P), n.scale(p, f), n.arc(0, 0, 1, l, o, !u), n.restore();
-        break;
-      case "C":
-        e = a[i], g = e[3], R = e[4], r = e[5], t = e[6], n.bezierCurveTo(e[1], e[2], g, R, r, t);
-        break;
-      case "c":
-        e = a[i], n.bezierCurveTo(e[1] + r, e[2] + t, e[3] + r, e[4] + t, e[5] + r, e[6] + t), g = e[3] + r, R = e[4] + t, r += e[5], t += e[6];
-        break;
-      case "S":
-        e = a[i], (g === null || R === null) && (g = r, R = t), n.bezierCurveTo(2 * r - g, 2 * t - R, e[1], e[2], e[3], e[4]), g = e[1], R = e[2], r = e[3], t = e[4];
-        break;
-      case "s":
-        e = a[i], (g === null || R === null) && (g = r, R = t), n.bezierCurveTo(2 * r - g, 2 * t - R, e[1] + r, e[2] + t, e[3] + r, e[4] + t), g = e[1] + r, R = e[2] + t, r += e[3], t += e[4];
-        break;
-      case "Q":
-        e = a[i], y = e[1], T = e[2], r = e[3], t = e[4], n.quadraticCurveTo(y, T, r, t);
-        break;
-      case "q":
-        e = a[i], y = e[1] + r, T = e[2] + t, r += e[3], t += e[4], n.quadraticCurveTo(y, T, r, t);
-        break;
-      case "T":
-        e = a[i], (y === null || T === null) && (y = r, T = t), y = 2 * r - y, T = 2 * t - T, r = e[1], t = e[2], n.quadraticCurveTo(y, T, r, t);
-        break;
-      case "t":
-        e = a[i], (y === null || T === null) && (y = r, T = t), y = 2 * r - y, T = 2 * t - T, r += e[1], t += e[2], n.quadraticCurveTo(y, T, r, t);
-        break;
-      case "z":
-      case "Z":
-        M && (r = M.x, t = M.y), M = null, n.closePath();
-        break;
-      case "AC":
-        e = a[i], r = e[1], t = e[2], D = e[3], l = e[4], o = e[5], E = e[6], n.arc(r, t, D, l, o, E);
-        break;
-      case "AT":
-        e = a[i], S = e[1], G = e[2], r = e[3], t = e[4], D = e[5], n.arcTo(S, G, r, t, D);
-        break;
-      case "E":
-        e = a[i], r = e[1], t = e[2], p = e[3], f = e[4], P = e[5], l = e[6], o = e[7], E = e[8], n.save(), n.translate(r, t), n.rotate(P), n.scale(p, f), n.arc(0, 0, 1, l, o, E), n.restore();
-        break;
-      case "R":
-        e = a[i], r = e[1], t = e[2], z = e[3], d = e[4], M = { x: r, y: t }, n.rect(r, t, z, d);
-        break;
-      case "RR":
-        e = a[i], r = e[1], t = e[2], z = e[3], d = e[4], Q = e[5], M = { x: r, y: t }, n.roundRect(r, t, z, d, Q);
-        break;
-    }
-    k ? (k.x = r, k.y = t) : k = { x: r, y: t };
-  }
-}
-function K(n) {
-  if (!(!n || !n.CanvasRenderingContext2D || n.Path2D)) {
-    var a = n.CanvasRenderingContext2D, r = a.prototype.fill, t = a.prototype.stroke, o = a.prototype.isPointInPath;
-    a.prototype.fill = function() {
-      for (var s = [], u = 0; u < arguments.length; u++)
-        s[u] = arguments[u];
-      if (s[0] instanceof L) {
-        var h = s[0], v = s[1] || "nonzero";
-        N(this, h.commands), r.apply(this, [v]);
-      } else {
-        var v = s[0] || "nonzero";
-        return r.apply(this, [v]);
-      }
-    }, a.prototype.stroke = function(s) {
-      s && N(this, s.commands), t.apply(this);
-    }, a.prototype.isPointInPath = function() {
-      for (var s = [], u = 0; u < arguments.length; u++)
-        s[u] = arguments[u];
-      if (s[0] instanceof L) {
-        var h = s[0], v = s[1], P = s[2], C = s[3] || "nonzero";
-        return N(this, h.commands), o.apply(this, [v, P, C]);
-      } else
-        return o.apply(this, s);
-    }, n.Path2D = L;
-  }
-}
-function V(n, a, r, t, o) {
-  var l = this;
-  if (o === void 0 && (o = 0), typeof o == "number" && (o = [o]), Array.isArray(o)) {
-    if (o.length === 0 || o.length > 4)
-      throw new RangeError("Failed to execute 'roundRect' on '".concat(this.constructor.name, "': ").concat(o.length, " radii provided. Between one and four radii are necessary."));
-    o.forEach(function(C) {
-      if (C < 0)
-        throw new RangeError("Failed to execute 'roundRect' on '".concat(l.constructor.name, "': Radius value ").concat(C, " is negative."));
-    });
-  } else
-    return;
-  if (o.length === 1 && o[0] === 0)
-    return this.rect(n, a, r, t);
-  var s = Math.min(r, t) / 2, u, h, v, P = u = h = v = Math.min(s, o[0]);
-  o.length === 2 && (u = v = Math.min(s, o[1])), o.length === 3 && (u = v = Math.min(s, o[1]), h = Math.min(s, o[2])), o.length === 4 && (u = Math.min(s, o[1]), h = Math.min(s, o[2]), v = Math.min(s, o[3])), this.moveTo(n, a + t - v), this.arcTo(n, a, n + P, a, P), this.arcTo(n + r, a, n + r, a + u, u), this.arcTo(n + r, a + t, n + r - h, a + t, h), this.arcTo(n, a + t, n, a + t - v, v), this.moveTo(n, a);
-}
-function O(n) {
-  if (!(!n || !n.CanvasRenderingContext2D)) {
-    var a = n.CanvasRenderingContext2D, r = n.Path2D;
-    a && !a.prototype.roundRect && (a.prototype.roundRect = V), r && !r.prototype.roundRect && (r.prototype.roundRect = V);
-  }
-}
-K(window);
-O(window);
+function D(a,o,r){if(r||arguments.length===2)for(var n=0,s=o.length,c;n<s;n++)(c||!(n in o))&&(c||(c=Array.prototype.slice.call(o,0,n)),c[n]=o[n]);return a.concat(c||Array.prototype.slice.call(o))}var M={a:7,c:6,h:1,l:2,m:2,q:4,s:4,t:2,v:1,z:0},H=/([astvzqmhlc])([^astvzqmhlc]*)/gi,N=/-?[0-9]*\.?[0-9]+(?:e[-+]?\d+)?/gi;function V(a){var o=a.match(N);return o?o.map(Number):[]}function j(a){var o=[],r=String(a).trim();return r[0]!=="M"&&r[0]!=="m"||r.replace(H,function(n,s,c){var e=V(c),h=s.toLowerCase(),u=s;if(h==="m"&&e.length>2&&(o.push(D([u],e.splice(0,2),!0)),h="l",u=u==="m"?"l":"L"),e.length<M[h])return"";for(o.push(D([u],e.splice(0,M[h]),!0));e.length>=M[h]&&e.length&&M[h];)o.push(D([u],e.splice(0,M[h]),!0));return""}),o}function F(a,o){var r=a.x*Math.cos(o)-a.y*Math.sin(o),n=a.y*Math.cos(o)+a.x*Math.sin(o);a.x=r,a.y=n}function G(a,o,r){a.x+=o,a.y+=r}function Z(a,o){a.x*=o,a.y*=o}var E=function(){function a(o){var r;this.commands=[],o&&o instanceof a?(r=this.commands).push.apply(r,o.commands):o&&(this.commands=j(o))}return a.prototype.addPath=function(o){var r;o&&o instanceof a&&(r=this.commands).push.apply(r,o.commands)},a.prototype.moveTo=function(o,r){this.commands.push(["M",o,r])},a.prototype.lineTo=function(o,r){this.commands.push(["L",o,r])},a.prototype.arc=function(o,r,n,s,c,e){this.commands.push(["AC",o,r,n,s,c,!!e])},a.prototype.arcTo=function(o,r,n,s,c){this.commands.push(["AT",o,r,n,s,c])},a.prototype.ellipse=function(o,r,n,s,c,e,h,u){this.commands.push(["E",o,r,n,s,c,e,h,!!u])},a.prototype.closePath=function(){this.commands.push(["Z"])},a.prototype.bezierCurveTo=function(o,r,n,s,c,e){this.commands.push(["C",o,r,n,s,c,e])},a.prototype.quadraticCurveTo=function(o,r,n,s){this.commands.push(["Q",o,r,n,s])},a.prototype.rect=function(o,r,n,s){this.commands.push(["R",o,r,n,s])},a.prototype.roundRect=function(o,r,n,s,c){typeof c>"u"?this.commands.push(["RR",o,r,n,s,0]):this.commands.push(["RR",o,r,n,s,c])},a}();function L(a,o){var r=0,n=0,s,c,e,h,u,i,g,b,A,R,I,Q,q,p,m,P,w,d,T,z,S,v=null,x=null,y=null,f=null,C=null,k=null;a.beginPath();for(var l=0;l<o.length;++l){d=o[l][0],d!=="S"&&d!=="s"&&d!=="C"&&d!=="c"&&(v=null,x=null),d!=="T"&&d!=="t"&&d!=="Q"&&d!=="q"&&(y=null,f=null);var t=void 0;switch(d){case"m":case"M":t=o[l],d==="m"?(r+=t[1],n+=t[2]):(r=t[1],n=t[2]),(d==="M"||!C)&&(C={x:r,y:n}),a.moveTo(r,n);break;case"l":t=o[l],r+=t[1],n+=t[2],a.lineTo(r,n);break;case"L":t=o[l],r=t[1],n=t[2],a.lineTo(r,n);break;case"H":t=o[l],r=t[1],a.lineTo(r,n);break;case"h":t=o[l],r+=t[1],a.lineTo(r,n);break;case"V":t=o[l],n=t[1],a.lineTo(r,n);break;case"v":t=o[l],n+=t[1],a.lineTo(r,n);break;case"a":case"A":if(t=o[l],k===null)throw new Error("This should never happen");d==="a"?(r+=t[6],n+=t[7]):(r=t[6],n=t[7]),p=t[1],m=t[2],g=t[3]*Math.PI/180,e=!!t[4],h=!!t[5],u={x:r,y:n},i={x:(k.x-u.x)/2,y:(k.y-u.y)/2},F(i,-g),b=i.x*i.x/(p*p)+i.y*i.y/(m*m),b>1&&(b=Math.sqrt(b),p*=b,m*=b),T={x:p*i.y/m,y:-(m*i.x)/p},A=p*p*m*m,R=p*p*i.y*i.y+m*m*i.x*i.x,h!==e?Z(T,Math.sqrt((A-R)/R)||0):Z(T,-Math.sqrt((A-R)/R)||0),c=Math.atan2((i.y-T.y)/m,(i.x-T.x)/p),s=Math.atan2(-(i.y+T.y)/m,-(i.x+T.x)/p),F(T,g),G(T,(u.x+k.x)/2,(u.y+k.y)/2),a.save(),a.translate(T.x,T.y),a.rotate(g),a.scale(p,m),a.arc(0,0,1,c,s,!h),a.restore();break;case"C":t=o[l],v=t[3],x=t[4],r=t[5],n=t[6],a.bezierCurveTo(t[1],t[2],v,x,r,n);break;case"c":t=o[l],a.bezierCurveTo(t[1]+r,t[2]+n,t[3]+r,t[4]+n,t[5]+r,t[6]+n),v=t[3]+r,x=t[4]+n,r+=t[5],n+=t[6];break;case"S":t=o[l],(v===null||x===null)&&(v=r,x=n),a.bezierCurveTo(2*r-v,2*n-x,t[1],t[2],t[3],t[4]),v=t[1],x=t[2],r=t[3],n=t[4];break;case"s":t=o[l],(v===null||x===null)&&(v=r,x=n),a.bezierCurveTo(2*r-v,2*n-x,t[1]+r,t[2]+n,t[3]+r,t[4]+n),v=t[1]+r,x=t[2]+n,r+=t[3],n+=t[4];break;case"Q":t=o[l],y=t[1],f=t[2],r=t[3],n=t[4],a.quadraticCurveTo(y,f,r,n);break;case"q":t=o[l],y=t[1]+r,f=t[2]+n,r+=t[3],n+=t[4],a.quadraticCurveTo(y,f,r,n);break;case"T":t=o[l],(y===null||f===null)&&(y=r,f=n),y=2*r-y,f=2*n-f,r=t[1],n=t[2],a.quadraticCurveTo(y,f,r,n);break;case"t":t=o[l],(y===null||f===null)&&(y=r,f=n),y=2*r-y,f=2*n-f,r+=t[1],n+=t[2],a.quadraticCurveTo(y,f,r,n);break;case"z":case"Z":C&&(r=C.x,n=C.y),C=null,a.closePath();break;case"AC":t=o[l],r=t[1],n=t[2],q=t[3],c=t[4],s=t[5],z=t[6],a.arc(r,n,q,c,s,z);break;case"AT":t=o[l],I=t[1],Q=t[2],r=t[3],n=t[4],q=t[5],a.arcTo(I,Q,r,n,q);break;case"E":t=o[l],r=t[1],n=t[2],p=t[3],m=t[4],g=t[5],c=t[6],s=t[7],z=t[8],a.save(),a.translate(r,n),a.rotate(g),a.scale(p,m),a.arc(0,0,1,c,s,z),a.restore();break;case"R":t=o[l],r=t[1],n=t[2],P=t[3],w=t[4],C={x:r,y:n},a.rect(r,n,P,w);break;case"RR":t=o[l],r=t[1],n=t[2],P=t[3],w=t[4],S=t[5],C={x:r,y:n},a.roundRect(r,n,P,w,S);break}k?(k.x=r,k.y=n):k={x:r,y:n}}}function J(a){if(!(!a||!a.CanvasRenderingContext2D||a.Path2D)){var o=a.CanvasRenderingContext2D,r=o.prototype.fill,n=o.prototype.stroke,s=o.prototype.isPointInPath;o.prototype.fill=function(){for(var c=[],e=0;e<arguments.length;e++)c[e]=arguments[e];if(c[0]instanceof E){var h=c[0],u=c[1]||"nonzero";L(this,h.commands),r.apply(this,[u])}else{var u=c[0]||"nonzero";return r.apply(this,[u])}},o.prototype.stroke=function(c){c&&L(this,c.commands),n.apply(this)},o.prototype.isPointInPath=function(){for(var c=[],e=0;e<arguments.length;e++)c[e]=arguments[e];if(c[0]instanceof E){var h=c[0],u=c[1],i=c[2],g=c[3]||"nonzero";return L(this,h.commands),s.apply(this,[u,i,g])}else return s.apply(this,c)},a.Path2D=E}}function B(a,o,r,n,s){var c=this;if(s===void 0&&(s=0),typeof s=="number"&&(s=[s]),Array.isArray(s)){if(s.length===0||s.length>4)throw new RangeError("Failed to execute 'roundRect' on '".concat(this.constructor.name,"': ").concat(s.length," radii provided. Between one and four radii are necessary."));s.forEach(function(b){if(b<0)throw new RangeError("Failed to execute 'roundRect' on '".concat(c.constructor.name,"': Radius value ").concat(b," is negative."))})}else return;if(s.length===1&&s[0]===0)return this.rect(a,o,r,n);var e=Math.min(r,n)/2,h,u,i,g=h=u=i=Math.min(e,s[0]);s.length===2&&(h=i=Math.min(e,s[1])),s.length===3&&(h=i=Math.min(e,s[1]),u=Math.min(e,s[2])),s.length===4&&(h=Math.min(e,s[1]),u=Math.min(e,s[2]),i=Math.min(e,s[3])),this.moveTo(a,o+n-i),this.arcTo(a,o,a+g,o,g),this.arcTo(a+r,o,a+r,o+h,h),this.arcTo(a+r,o+n,a+r-u,o+n,u),this.arcTo(a,o+n,a,o+n-i,i),this.moveTo(a,o)}function K(a){if(!(!a||!a.CanvasRenderingContext2D)){var o=a.CanvasRenderingContext2D,r=a.Path2D;o&&!o.prototype.roundRect&&(o.prototype.roundRect=B),r&&!r.prototype.roundRect&&(r.prototype.roundRect=B)}}J(window),K(window);

package/dist/types/class.d.ts

@@ -22,6 +22,7 @@ export declare abstract class BaseUIClass {
         schemas: Record<string, import("zod").objectOutputType<{
             type: import("zod").ZodString;
             readOnly: import("zod").ZodOptional<import("zod").ZodBoolean>;
+            readOnlyValue: import("zod").ZodOptional<import("zod").ZodString>;
             position: import("zod").ZodObject<{
                 x: import("zod").ZodNumber;
                 y: import("zod").ZodNumber;

package/dist/types/helper.d.ts

@@ -38,11 +38,13 @@ export declare const templateSchemas2SchemasList: (_template: Template) => Promi
     opacity?: number | undefined;
     rotate?: number | undefined;
     readOnly?: boolean | undefined;
+    readOnlyValue?: string | undefined;
 }[][]>;
 export declare const generateColumnsAndSampledataIfNeeded: (template: Template) => {
     schemas: Record<string, import("zod").objectOutputType<{
         type: import("zod").ZodString;
         readOnly: import("zod").ZodOptional<import("zod").ZodBoolean>;
+        readOnlyValue: import("zod").ZodOptional<import("zod").ZodString>;
         position: import("zod").ZodObject<{
             x: import("zod").ZodNumber;
             y: import("zod").ZodNumber;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "3.1.5-dev.15",
+  "version": "3.1.5-dev.17",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
@@ -27,7 +27,7 @@
   "types": "dist/types/index.d.ts",
   "scripts": {
     "dev": "npm-run-all --parallel devBuild:watch devBuildType:watch",
-    "devBuild:watch": "esbuild src/index.ts --bundle --outfile=dist/index.js --format=esm --watch --platform=node --loader:.node=file",
+    "devBuild:watch": "esbuild src/index.ts --bundle --outfile=dist/index.js --format=esm --watch",
     "devBuildType:watch": "tsc --emitDeclarationOnly --watch",
     "build": "vite build && tsc --emitDeclarationOnly",
     "clean": "rimraf dist",

package/src/components/Designer/Canvas/index.tsx

@@ -382,9 +382,7 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
               changeSchemas([{ key: 'data', value, schemaId: schema.id }]);
             }}
             stopEditing={() => setEditing(false)}
-            outline={`1px ${hoveringSchemaId === schema.id ? 'solid' : 'dashed'} ${
-              token.colorPrimary
-            }`}
+            outline={`1px ${hoveringSchemaId === schema.id ? 'solid' : 'dashed'} ${schema.readOnly ? 'transparent' : token.colorPrimary}`}
             scale={scale}
           />
         )}

package/src/components/Designer/index.tsx

@@ -97,7 +97,7 @@ const TemplateEditor = ({
   const changeSchemas: ChangeSchemas = useCallback(
     (objs) => {
       const newSchemas = objs.reduce((acc, { key, value, schemaId }) => {
-        const tgt = acc.find((s) => s.id === schemaId)! as SchemaForUI;
+        const tgt = acc.find((s) => s.id === schemaId)! as SchemaForUI;        
         // Assign to reference
         set(tgt, key, value);
 
@@ -113,6 +113,8 @@ const TemplateEditor = ({
           )?.propPanel;
           set(tgt, 'data', propPanel?.defaultValue || '');
           Object.assign(tgt, propPanel?.defaultSchema || {});
+        } else if (key === 'data' && tgt.readOnly) {
+          set(tgt, 'readOnlyValue', value);
         }
 
         return acc;

package/src/components/Renderer.tsx

@@ -72,7 +72,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
 
       render({
         key: schema.key,
-        value: schema.data,
+        value: schema.readOnly ? schema.readOnlyValue || '' : schema.data,
         schema,
         rootElement: ref.current,
         mode,