@pdfme/ui 4.1.0-dev.6 → 4.1.1-dev.2

package/dist/index.es.js

@@ -9291,6 +9291,9 @@ z.object({
   "schemas.text.fit": z.string(),
   "schemas.text.dynamicFontSize": z.string(),
   "schemas.text.format": z.string(),
+  "schemas.mvt.typingInstructions": z.string(),
+  "schemas.mvt.sampleField": z.string(),
+  "schemas.mvt.variablesSampleData": z.string(),
   "schemas.barcodes.barColor": z.string(),
   "schemas.barcodes.includetext": z.string(),
   "schemas.table.alternateBackgroundColor": z.string(),
@@ -81694,7 +81697,7 @@ const convertForPdfLayoutProps = ({ schema: a, pageHeight: s, applyRotateTransla
       opacity: St
     });
   });
-}, DEFAULT_OPACITY = 1, HEX_COLOR_PATTERN = "^#(?:[A-Fa-f0-9]{3,4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$", TextStrikethroughIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M6.85 7.08C6.85 4.37 9.45 3 12.24 3c1.64 0 3 .49 3.9 1.28c.77.65 1.46 1.73 1.46 3.24h-3.01c0-.31-.05-.59-.15-.85c-.29-.86-1.2-1.28-2.25-1.28c-1.86 0-2.34 1.02-2.34 1.7c0 .48.25.88.74 1.21c.38.25.77.48 1.41.7H7.39c-.21-.34-.54-.89-.54-1.92zM21 12v-2H3v2h9.62c1.15.45 1.96.75 1.96 1.97c0 1-.81 1.67-2.28 1.67c-1.54 0-2.93-.54-2.93-2.51H6.4c0 .55.08 1.13.24 1.58c.81 2.29 3.29 3.3 5.67 3.3c2.27 0 5.3-.89 5.3-4.05c0-.3-.01-1.16-.48-1.94H21V12z" fill="currentColor"></path></svg>', TextUnderlineIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z" fill="currentColor"></path></svg>', TextAlignLeftIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" fill="currentColor"></path></svg>', TextAlignCenterIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" fill="currentColor"></path></svg>', TextAlignRightIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" fill="currentColor"></path></svg>', TextVerticalAlignTopIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M8 11h3v10h2V11h3l-4-4l-4 4zM4 3v2h16V3H4z" fill="currentColor"></path></svg>', TextVerticalAlignMiddleIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M8 19h3v4h2v-4h3l-4-4l-4 4zm8-14h-3V1h-2v4H8l4 4l4-4zM4 11v2h16v-2H4z" fill="currentColor"></path></svg>', TextVerticalAlignBottomIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M16 13h-3V3h-2v10H8l4 4l4-4zM4 19v2h16v-2H4z" fill="currentColor"></path></svg>';
+}, DEFAULT_OPACITY = 1, HEX_COLOR_PATTERN = "^#(?:[A-Fa-f0-9]{6})$", TextStrikethroughIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M6.85 7.08C6.85 4.37 9.45 3 12.24 3c1.64 0 3 .49 3.9 1.28c.77.65 1.46 1.73 1.46 3.24h-3.01c0-.31-.05-.59-.15-.85c-.29-.86-1.2-1.28-2.25-1.28c-1.86 0-2.34 1.02-2.34 1.7c0 .48.25.88.74 1.21c.38.25.77.48 1.41.7H7.39c-.21-.34-.54-.89-.54-1.92zM21 12v-2H3v2h9.62c1.15.45 1.96.75 1.96 1.97c0 1-.81 1.67-2.28 1.67c-1.54 0-2.93-.54-2.93-2.51H6.4c0 .55.08 1.13.24 1.58c.81 2.29 3.29 3.3 5.67 3.3c2.27 0 5.3-.89 5.3-4.05c0-.3-.01-1.16-.48-1.94H21V12z" fill="currentColor"></path></svg>', TextUnderlineIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z" fill="currentColor"></path></svg>', TextAlignLeftIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" fill="currentColor"></path></svg>', TextAlignCenterIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" fill="currentColor"></path></svg>', TextAlignRightIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" fill="currentColor"></path></svg>', TextVerticalAlignTopIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M8 11h3v10h2V11h3l-4-4l-4 4zM4 3v2h16V3H4z" fill="currentColor"></path></svg>', TextVerticalAlignMiddleIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M8 19h3v4h2v-4h3l-4-4l-4 4zm8-14h-3V1h-2v4H8l4 4l4-4zM4 11v2h16v-2H4z" fill="currentColor"></path></svg>', TextVerticalAlignBottomIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M16 13h-3V3h-2v10H8l4 4l4-4zM4 19v2h16v-2H4z" fill="currentColor"></path></svg>';
 var Formatter;
 (function(a) {
   a.STRIKETHROUGH = "strikethrough", a.UNDERLINE = "underline", a.ALIGNMENT = "alignment", a.VERTICAL_ALIGNMENT = "verticalAlignment";
@@ -81861,28 +81864,53 @@ const UseDynamicFontSize = (a) => {
     strikethrough: !1,
     underline: !1
   }
-}, mapVerticalAlignToFlex = (a) => {
-  switch (a) {
-    case VERTICAL_ALIGN_TOP:
-      return "flex-start";
-    case VERTICAL_ALIGN_MIDDLE:
-      return "center";
-    case VERTICAL_ALIGN_BOTTOM:
-      return "flex-end";
+}, uiRender = async (a) => {
+  const { value: s, schema: $, mode: _, onChange: _e, stopEditing: tt, tabIndex: nt, placeholder: at, options: ot, _cache: rt } = a, st = isEditable(_, $) && at && !s, lt = await buildStyledTextContainer(a, st ? at : s);
+  if (!isEditable(_, $)) {
+    lt.innerHTML = s.split("").map((et, it) => `<span style="letter-spacing:${String(s).length === it + 1 ? 0 : "inherit"};">${et}</span>`).join("");
+    return;
   }
-  return "flex-start";
-}, getBackgroundColor = (a, s) => !a || !s.backgroundColor ? "transparent" : s.backgroundColor, uiRender = async (a) => {
-  const { value: s, schema: $, rootElement: _, mode: _e, onChange: tt, stopEditing: nt, tabIndex: at, placeholder: ot, options: rt, _cache: st } = a, lt = (rt == null ? void 0 : rt.font) || getDefaultFont();
-  let et;
-  const it = (xt) => ({
-    textSchema: $,
-    font: lt,
-    value: xt,
-    startingFontSize: et,
-    _cache: st
+  if (makeElementPlainTextContentEditable(lt), lt.tabIndex = nt || 0, lt.innerText = s, lt.addEventListener("blur", (et) => {
+    _e && _e({ key: "content", value: et.target.innerText }), tt && tt();
+  }), $.dynamicFontSize) {
+    let et;
+    const it = (ot == null ? void 0 : ot.font) || getDefaultFont(), ut = await getFontKitFont($.fontName, it, rt);
+    lt.addEventListener("keyup", () => {
+      setTimeout(() => {
+        (async () => {
+          if (!lt.textContent)
+            return;
+          et = await calculateDynamicFontSize({
+            textSchema: $,
+            font: it,
+            value: lt.textContent,
+            startingFontSize: et,
+            _cache: rt
+          }), lt.style.fontSize = `${et}pt`;
+          const { topAdj: ft, bottomAdj: ht } = getBrowserVerticalFontAdjustments(ut, et ?? $.fontSize ?? DEFAULT_FONT_SIZE, $.lineHeight ?? DEFAULT_LINE_HEIGHT, $.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT);
+          lt.style.paddingTop = `${ft}px`, lt.style.marginBottom = `${ht}px`;
+        })();
+      }, 0);
+    });
+  }
+  st && (lt.style.color = PLACEHOLDER_FONT_COLOR, lt.addEventListener("focus", () => {
+    lt.innerText === at && (lt.innerText = "", lt.style.color = $.fontColor ?? DEFAULT_FONT_COLOR);
+  })), _ === "designer" && setTimeout(() => {
+    lt.focus();
+    const et = window.getSelection(), it = document.createRange();
+    et && it && (it.selectNodeContents(lt), it.collapse(!1), et == null || et.removeAllRanges(), et == null || et.addRange(it));
   });
-  $.dynamicFontSize && s && (et = await calculateDynamicFontSize(it(s)));
-  const ut = await getFontKitFont($.fontName, lt, st), { topAdj: ft, bottomAdj: ht } = getBrowserVerticalFontAdjustments(ut, et ?? $.fontSize ?? DEFAULT_FONT_SIZE, $.lineHeight ?? DEFAULT_LINE_HEIGHT, $.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT), dt = ft.toString(), gt = ht.toString(), pt = document.createElement("div"), mt = {
+}, buildStyledTextContainer = async (a, s) => {
+  const { schema: $, rootElement: _, mode: _e, options: tt, _cache: nt } = a, at = (tt == null ? void 0 : tt.font) || getDefaultFont();
+  let ot;
+  $.dynamicFontSize && s && (ot = await calculateDynamicFontSize({
+    textSchema: $,
+    font: at,
+    value: s,
+    startingFontSize: ot,
+    _cache: nt
+  }));
+  const rt = await getFontKitFont($.fontName, at, nt), { topAdj: st, bottomAdj: lt } = getBrowserVerticalFontAdjustments(rt, ot ?? $.fontSize ?? DEFAULT_FONT_SIZE, $.lineHeight ?? DEFAULT_LINE_HEIGHT, $.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT), et = st.toString(), it = lt.toString(), ut = document.createElement("div"), ft = {
     padding: 0,
     resize: "none",
     backgroundColor: getBackgroundColor(s, $),
@@ -81894,14 +81922,14 @@ const UseDynamicFontSize = (a) => {
     height: "100%",
     cursor: isEditable(_e, $) ? "text" : "default"
   };
-  Object.assign(pt.style, mt), _.innerHTML = "", _.appendChild(pt);
-  const ct = [];
-  $.strikethrough && ct.push("line-through"), $.underline && ct.push("underline");
-  const vt = {
+  Object.assign(ut.style, ft), _.innerHTML = "", _.appendChild(ut);
+  const ht = [];
+  $.strikethrough && ht.push("line-through"), $.underline && ht.push("underline");
+  const dt = {
     // Font formatting styles
     fontFamily: $.fontName ? `'${$.fontName}'` : "inherit",
     color: $.fontColor ? $.fontColor : DEFAULT_FONT_COLOR,
-    fontSize: `${et ?? $.fontSize ?? DEFAULT_FONT_SIZE}pt`,
+    fontSize: `${ot ?? $.fontSize ?? DEFAULT_FONT_SIZE}pt`,
     letterSpacing: `${$.characterSpacing ?? DEFAULT_CHARACTER_SPACING}pt`,
     lineHeight: `${$.lineHeight ?? DEFAULT_LINE_HEIGHT}em`,
     textAlign: $.alignment ?? DEFAULT_ALIGNMENT,
@@ -81911,48 +81939,36 @@ const UseDynamicFontSize = (a) => {
     resize: "none",
     border: "none",
     outline: "none",
-    marginBottom: `${gt}px`,
-    paddingTop: `${dt}px`,
+    marginBottom: `${it}px`,
+    paddingTop: `${et}px`,
     backgroundColor: "transparent",
-    textDecoration: ct.join(" ")
-  }, At = document.createElement("div");
-  if (Object.assign(At.style, vt), isEditable(_e, $)) {
-    if (isFirefox() ? (At.contentEditable = "true", At.addEventListener("keydown", (xt) => {
-      xt.key === "Enter" && !xt.shiftKey && (xt.preventDefault(), document.execCommand("insertLineBreak", !1, void 0));
-    }), At.addEventListener("paste", (xt) => {
-      var St;
-      xt.preventDefault();
-      const bt = (St = xt.clipboardData) == null ? void 0 : St.getData("text"), Et = window.getSelection();
-      Et != null && Et.rangeCount && (Et.deleteFromDocument(), Et.getRangeAt(0).insertNode(document.createTextNode(bt || "")), Et.collapseToEnd());
-    })) : At.contentEditable = "plaintext-only", At.tabIndex = at || 0, At.innerText = s, At.addEventListener("blur", (xt) => {
-      tt && tt({ key: "content", value: xt.target.innerText }), nt && nt();
-    }), $.dynamicFontSize && At.addEventListener("keyup", () => {
-      setTimeout(() => {
-        (async () => {
-          if (!At.textContent)
-            return;
-          et = await calculateDynamicFontSize(it(At.textContent)), At.style.fontSize = `${et}pt`;
-          const { topAdj: xt, bottomAdj: bt } = getBrowserVerticalFontAdjustments(ut, et ?? $.fontSize ?? DEFAULT_FONT_SIZE, $.lineHeight ?? DEFAULT_LINE_HEIGHT, $.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT);
-          At.style.paddingTop = `${xt}px`, At.style.marginBottom = `${bt}px`;
-        })();
-      }, 0);
-    }), ot && !s) {
-      if (At.innerText = ot, At.style.color = PLACEHOLDER_FONT_COLOR, $.dynamicFontSize) {
-        const xt = await calculateDynamicFontSize(it(ot));
-        At.style.fontSize = `${xt}pt`;
-      }
-      At.addEventListener("focus", () => {
-        At.innerText === ot && (At.innerText = "", At.style.color = $.fontColor ?? DEFAULT_FONT_COLOR);
-      });
-    }
-    pt.appendChild(At), _e === "designer" && setTimeout(() => {
-      At.focus();
-      const xt = window.getSelection(), bt = document.createRange();
-      bt.selectNodeContents(At), bt.collapse(!1), xt == null || xt.removeAllRanges(), xt == null || xt.addRange(bt);
-    });
-  } else
-    At.innerHTML = s.split("").map((xt, bt) => `<span style="letter-spacing:${String(s).length === bt + 1 ? 0 : "inherit"};">${xt}</span>`).join(""), pt.appendChild(At);
-}, textSchema = { pdf: pdfRender, ui: uiRender, propPanel }, text = textSchema;
+    textDecoration: ht.join(" ")
+  }, gt = document.createElement("div");
+  return gt.id = "text-" + $.id, Object.assign(gt.style, dt), ut.appendChild(gt), gt;
+}, makeElementPlainTextContentEditable = (a) => {
+  if (!isFirefox()) {
+    a.contentEditable = "plaintext-only";
+    return;
+  }
+  a.contentEditable = "true", a.addEventListener("keydown", (s) => {
+    s.key === "Enter" && !s.shiftKey && (s.preventDefault(), document.execCommand("insertLineBreak", !1, void 0));
+  }), a.addEventListener("paste", (s) => {
+    var _e;
+    s.preventDefault();
+    const $ = (_e = s.clipboardData) == null ? void 0 : _e.getData("text"), _ = window.getSelection();
+    _ != null && _.rangeCount && (_.deleteFromDocument(), _.getRangeAt(0).insertNode(document.createTextNode($ || "")), _.collapseToEnd());
+  });
+}, mapVerticalAlignToFlex = (a) => {
+  switch (a) {
+    case VERTICAL_ALIGN_TOP:
+      return "flex-start";
+    case VERTICAL_ALIGN_MIDDLE:
+      return "center";
+    case VERTICAL_ALIGN_BOTTOM:
+      return "flex-end";
+  }
+  return "flex-start";
+}, getBackgroundColor = (a, s) => !a || !s.backgroundColor ? "transparent" : s.backgroundColor, textSchema = { pdf: pdfRender, ui: uiRender, propPanel }, text = textSchema;
 textSchema.pdf, textSchema.ui, {
   ...textSchema.propPanel,
   defaultSchema: {
@@ -135160,6 +135176,9 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   "schemas.text.fit": "Fit",
   "schemas.text.dynamicFontSize": "Dynamic Font Size",
   "schemas.text.format": "Format",
+  "schemas.mvt.typingInstructions": "Add variables by typing words surrounded by curly brackets, e.g.",
+  "schemas.mvt.sampleField": "name",
+  "schemas.mvt.variablesSampleData": "Variables Sample Data",
   "schemas.barcodes.barColor": "Bar Color",
   "schemas.barcodes.includetext": "Include Text",
   "schemas.table.alternateBackgroundColor": "Alternate Background Color",
@@ -135218,6 +135237,9 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   "schemas.text.fit": "适应",
   "schemas.text.dynamicFontSize": "动态字体大小",
   "schemas.text.format": "格式",
+  "schemas.mvt.typingInstructions": "通过输入用花括号括起来的单词来添加变量，例如",
+  "schemas.mvt.sampleField": "姓名",
+  "schemas.mvt.variablesSampleData": "变量样本数据",
   "schemas.barcodes.barColor": "条码颜色",
   "schemas.barcodes.includetext": "包括文本",
   "schemas.table.alternateBackgroundColor": "交替背景颜色",
@@ -135276,6 +135298,9 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   "schemas.text.fit": "フィット",
   "schemas.text.dynamicFontSize": "動的フォントサイズ",
   "schemas.text.format": "書式",
+  "schemas.mvt.typingInstructions": "中括弧で囲まれた単語を入力して変数を追加します。例:",
+  "schemas.mvt.sampleField": "名前",
+  "schemas.mvt.variablesSampleData": "変数サンプルデータ",
   "schemas.barcodes.barColor": "バーの色",
   "schemas.barcodes.includetext": "テキストを含める",
   "schemas.table.alternateBackgroundColor": "交互の背景色",
@@ -135334,6 +135359,9 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   "schemas.text.fit": "맞춤",
   "schemas.text.dynamicFontSize": "동적 폰트 크기",
   "schemas.text.format": "형식",
+  "schemas.mvt.typingInstructions": "중괄호로 묶인 단어를 입력하여 변수를 추가하세요.",
+  "schemas.mvt.sampleField": "이름",
+  "schemas.mvt.variablesSampleData": "변수 샘플 데이터",
   "schemas.barcodes.barColor": "바코드 색상",
   "schemas.barcodes.includetext": "텍스트 포함",
   "schemas.table.alternateBackgroundColor": "대체 배경색",
@@ -135392,6 +135420,9 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   "schemas.text.fit": "ملاءمة",
   "schemas.text.dynamicFontSize": "حجم الخط الديناميكي",
   "schemas.text.format": "تنسيق",
+  "schemas.mvt.typingInstructions": "قم بإضافة المتغيرات عن طريق كتابة الكلمات المحاطة بأقواس متعرجة، على سبيل المثال:",
+  "schemas.mvt.sampleField": "اسم",
+  "schemas.mvt.variablesSampleData": "بيانات عينة المتغيرات",
   "schemas.barcodes.barColor": "لون الشريط",
   "schemas.barcodes.includetext": "تضمين النص",
   "schemas.table.alternateBackgroundColor": "لون الخلفية البديل",
@@ -135450,6 +135481,9 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   "schemas.text.fit": "พอดี",
   "schemas.text.dynamicFontSize": "ขนาดตัวอักษรแบบไดนามิก",
   "schemas.text.format": "รูปแบบ",
+  "schemas.mvt.typingInstructions": "เพิ่มตัวแปรโดยพิมพ์คำที่ล้อมรอบด้วยวงเล็บปีกกา เช่น",
+  "schemas.mvt.sampleField": "ชื่อ",
+  "schemas.mvt.variablesSampleData": "ข้อมูลตัวอย่างตัวแปร",
   "schemas.barcodes.barColor": "สีบาร์",
   "schemas.barcodes.includetext": "รวมข้อความ",
   "schemas.table.alternateBackgroundColor": "สีพื้นหลังสลับกัน",
@@ -135508,6 +135542,9 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   "schemas.text.fit": "Adatta",
   "schemas.text.dynamicFontSize": "Dimensione font dinamica",
   "schemas.text.format": "Formato",
+  "schemas.mvt.typingInstructions": "Aggiungi variabili digitando parole circondate da parentesi graffe, ad es.",
+  "schemas.mvt.sampleField": "nome",
+  "schemas.mvt.variablesSampleData": "Dati di esempio variabili",
   "schemas.barcodes.barColor": "Colore barra",
   "schemas.barcodes.includetext": "Includi testo",
   "schemas.table.alternateBackgroundColor": "Colore di Sfondo Alternato",
@@ -135566,6 +135603,9 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   "schemas.text.fit": "Dopasowanie",
   "schemas.text.dynamicFontSize": "Dynamiczny rozmiar czcionki",
   "schemas.text.format": "Format",
+  "schemas.mvt.typingInstructions": "Dodaj zmienne, wpisując słowa ujęte w nawiasy klamrowe, np.",
+  "schemas.mvt.sampleField": "nazwa",
+  "schemas.mvt.variablesSampleData": "Zmienne Przykładowe dane",
   "schemas.barcodes.barColor": "Kolor paska",
   "schemas.barcodes.includetext": "Dołącz tekst",
   "schemas.table.alternateBackgroundColor": "Alternatywny kolor tła",
@@ -135624,6 +135664,9 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   "schemas.text.fit": "Anpassen",
   "schemas.text.dynamicFontSize": "Dynamische Schriftgröße",
   "schemas.text.format": "Format",
+  "schemas.mvt.typingInstructions": "Fügen Sie Variablen hinzu, indem Sie Wörter in geschweiften Klammern eingeben, z. B.",
+  "schemas.mvt.sampleField": "Name",
+  "schemas.mvt.variablesSampleData": "Variablen Beispieldaten",
   "schemas.barcodes.barColor": "Strichcodefarbe",
   "schemas.barcodes.includetext": "Text anzeigen",
   "schemas.table.alternateBackgroundColor": "Wechselnde Hintergrundfarbe",
@@ -135682,6 +135725,9 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   "schemas.text.fit": "Ajustar",
   "schemas.text.dynamicFontSize": "Tamaño de fuente dinámico",
   "schemas.text.format": "Formato",
+  "schemas.mvt.typingInstructions": "Agregue variables escribiendo palabras entre llaves, p.",
+  "schemas.mvt.sampleField": "nombre",
+  "schemas.mvt.variablesSampleData": "Variables Datos de muestra",
   "schemas.barcodes.barColor": "Color de la barra",
   "schemas.barcodes.includetext": "Incluir texto",
   "schemas.table.alternateBackgroundColor": "Color de fondo alternativo",
@@ -135740,6 +135786,9 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   "schemas.text.fit": "Ajustement",
   "schemas.text.dynamicFontSize": "Taille de police dynamique",
   "schemas.text.format": "Format",
+  "schemas.mvt.typingInstructions": "Ajoutez des variables en tapant des mots entourés d'accolades, par ex.",
+  "schemas.mvt.sampleField": "nom",
+  "schemas.mvt.variablesSampleData": "Variables Exemples de données",
   "schemas.barcodes.barColor": "Couleur de la barre",
   "schemas.barcodes.includetext": "Inclure le texte",
   "schemas.table.alternateBackgroundColor": "Couleur de fond alternative",
@@ -151838,13 +151887,17 @@ const FormRender = withProvider(FormCore, defaultWidgets), svgBaseProp = {
     pt.x = pt.position.x, pt.y = pt.position.y, delete pt.position, pt.key !== (at.getValues() || {}).key && at.resetFields(), at.setValues(pt);
   }, [at, tt]);
   const it = (pt) => {
-    const mt = [];
+    let mt = [];
     for (let ct in pt)
-      if (!["id", "content"].includes(ct) && pt[ct] !== tt[ct]) {
+      if (!["id", "content"].includes(ct) && (ct === "x" && (ct = "position.x"), ct === "y" && (ct = "position.y"), pt[ct] !== tt[ct])) {
         let vt = pt[ct];
-        vt === null && ["rotate", "opacity"].includes(ct) && (vt = void 0), ct === "x" && (ct = "position.x"), ct === "y" && (ct = "position.y"), mt.push({ key: ct, value: vt, schemaId: tt.id });
+        vt === null && ["rotate", "opacity"].includes(ct) && (vt = void 0), mt.push({ key: ct, value: vt, schemaId: tt.id });
       }
-    mt.length && _(mt);
+    mt.length && at.validateFields().then(() => _(mt)).catch((ct) => {
+      ct.errorFields.length && (mt = mt.filter((vt) => !ct.errorFields.find(
+        (At) => At.name.includes(vt.key)
+      ))), mt.length && _(mt);
+    });
   }, ut = Object.values(rt).find(
     (pt) => (pt == null ? void 0 : pt.propPanel.defaultSchema.type) === tt.type
   ), ft = ut == null ? void 0 : ut.propPanel.schema;
@@ -151863,9 +151916,9 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         widget: "select",
         props: { options: ht },
         required: !0,
-        span: 10
+        span: 12
       },
-      key: { title: ot("fieldName"), type: "string", required: !0, span: 14 },
+      key: { title: ot("fieldName"), type: "string", required: !0, span: 12 },
       "-": { type: "void", widget: "Divider" },
       align: { title: ot("align"), type: "void", widget: "AlignWidget" },
       x: { title: "X", type: "number", widget: "inputNumber", required: !0, span: 8, min: 0 },
@@ -152019,7 +152072,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
       ] })
     }
   );
-}, RightSidebar = Sidebar, Wrapper = ({
+}, RightSidebar = Sidebar, useRerenderDependencies = ({ plugin: a, value: s, mode: $, scale: _, schema: _e, options: tt }) => reactExports.useMemo(() => a.uninterruptedEditMode && $ === "designer" ? [$] : [s, $, _, JSON.stringify(_e), JSON.stringify(tt)], [s, $, _, _e, tt]), Wrapper = ({
   children: a,
   outline: s,
   onChangeHoveringSchemaId: $,
@@ -152046,19 +152099,18 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
     children: a
   }
 ), Renderer = (a) => {
-  const s = reactExports.useContext(PluginsRegistry), $ = reactExports.useContext(OptionsContext), _ = reactExports.useContext(I18nContext), { token: _e } = theme.useToken(), { schema: tt, basePdf: nt, value: at, mode: ot, onChange: rt, stopEditing: st, tabIndex: lt, placeholder: et, scale: it } = a, ut = reactExports.useRef(null), ft = reactExports.useRef(/* @__PURE__ */ new Map());
+  const s = reactExports.useContext(PluginsRegistry), $ = reactExports.useContext(OptionsContext), _ = reactExports.useContext(I18nContext), { token: _e } = theme.useToken(), { schema: tt, basePdf: nt, value: at, mode: ot, onChange: rt, stopEditing: st, tabIndex: lt, placeholder: et, scale: it } = a, ut = reactExports.useRef(null), ft = reactExports.useRef(/* @__PURE__ */ new Map()), ht = Object.values(s).find(
+    (gt) => (gt == null ? void 0 : gt.propPanel.defaultSchema.type) === tt.type
+  );
+  if (!ht || !ht.ui)
+    return console.error(`[@pdfme/ui] Renderer for type ${tt.type} not found. 
+Check this document: https://pdfme.com/docs/custom-schemas`), /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
+  const dt = useRerenderDependencies({ plugin: ht, value: at, mode: ot, scale: it, schema: tt, options: $ });
   return reactExports.useEffect(() => {
-    var ht;
     if (ut.current && tt.type) {
-      const dt = (ht = Object.values(s).find(
-        (gt) => (gt == null ? void 0 : gt.propPanel.defaultSchema.type) === tt.type
-      )) == null ? void 0 : ht.ui;
-      if (!dt) {
-        console.error(`[@pdfme/ui] Renderer for type ${tt.type} not found.
-Check this document: https://pdfme.com/docs/custom-schemas`);
-        return;
-      }
-      ut.current.innerHTML = "", dt({
+      ut.current.innerHTML = "";
+      const gt = ht.ui;
+      gt({
         key: tt.key,
         value: at,
         schema: tt,
@@ -152079,7 +152131,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
     return () => {
       ut.current && (ut.current.innerHTML = "");
     };
-  }, [at, JSON.stringify(tt), JSON.stringify($), ot, it]), /* @__PURE__ */ jsxRuntimeExports.jsx(Wrapper, { ...a, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { height: "100%", width: "100%" }, ref: ut }) });
+  }, dt), /* @__PURE__ */ jsxRuntimeExports.jsx(Wrapper, { ...a, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { height: "100%", width: "100%" }, ref: ut }) });
 }, Renderer$1 = Renderer, Draggable$1 = (a) => {
   const { scale: s, basePdf: $, plugin: _ } = a, { token: _e } = theme.useToken(), tt = _.propPanel.defaultSchema, nt = useDraggable({ id: tt.type, data: tt }), { listeners: at, setNodeRef: ot, attributes: rt, transform: st, isDragging: lt } = nt, et = { transform: CSS$1.Translate.toString(st) };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: ot, style: et, ...at, ...rt, children: [