@pdfme/ui 4.5.2-dev.1 → 4.5.2-dev.3

package/README.md

@@ -27,6 +27,7 @@
 
 <p align="center">TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!</p>
 
+
 ## Features
 
 | Fast PDF Generator                                                                           | Easy PDF template design                              | Simple JSON template                                           |
@@ -70,6 +71,9 @@ npm i @pdfme/ui @pdfme/common
 
 \*You must install `@pdfme/common` regardless of which package you use.
 
+On NPM stable releases are published to the `latest` tag, and pre-releases are published to the `next` tag.
+On the `dev` tag you can find releases for every commit to the `main` branch.
+
 The following type, function and classes are available in pdfme.
 
 `@pdfme/common`
@@ -117,9 +121,8 @@ The following image is a good illustration of a template.
 **basePdf** can be given a `string`(base64), `ArrayBuffer`, or `Uint8Array`.  
 A blank A4 PDF can be imported with `BLANK_PDF`. You can use it to check how it works.
 
-**schemas** can only utilize text by default, but you can load images and various barcodes like QR codes as plugins from the `@pdfme/schemas` package.  
-Additionally, you can create your own schemas, allowing you to render types other than the ones mentioned above.  
-Check detail about [Custom Schemas](https://pdfme.com/docs/custom-schemas) from here
+**Schemas** can only utilize text by default, but you can load images and various barcodes like QR codes as plugins from the `@pdfme/schemas` package.  
+Additionally, you can create your own schemas, allowing you to render types other than the ones mentioned above. Check detail about [Custom Schemas](https://pdfme.com/docs/custom-schemas) from here.
 
 Let's take a look at some specific data.  
 (If you are using TypeScript, you can import the Template type.)
@@ -132,26 +135,29 @@ import { Template, BLANK_PDF } from '@pdfme/common';
 const template: Template = {
   basePdf: BLANK_PDF,
   schemas: [
-    {
-      a: {
+    [
+      {
+        name: 'a',
         type: 'text',
         position: { x: 0, y: 0 },
         width: 10,
         height: 10,
       },
-      b: {
+      {
+        name: 'a',
         type: 'text',
         position: { x: 10, y: 10 },
         width: 10,
         height: 10,
       },
-      c: {
+      {
+        name: 'c',
         type: 'text',
         position: { x: 20, y: 20 },
         width: 10,
         height: 10,
       },
-    },
+    ],
   ],
 };
 ```
@@ -193,7 +199,7 @@ Also, each element in the inputs array corresponds to a page in the PDF, you can
 
 ## UI
 
-The UI is composed of the Designer, Form, and Viewer classes.
+The UI is composed of the [Designer](https://pdfme.com/docs/getting-started#designer), [Form](https://pdfme.com/docs/getting-started#form), and [Viewer](https://pdfme.com/docs/getting-started#viewer) classes.
 
 ### Designer
 
@@ -225,7 +231,6 @@ The designer instance can be manipulated with the following methods.
 - `saveTemplate`
 - `updateTemplate`
 - `getTemplate`
-- `getPageCursor`
 - `onChangeTemplate`
 - `onSaveTemplate`
 - `destroy`
@@ -286,6 +291,72 @@ const viewer = new Viewer({ domContainer, template, inputs });
 
 ![](https://raw.githubusercontent.com/pdfme/pdfme/main/website/static/img/viewer.png)
 
+### Using additional schemas and custom plugins
+
+The examples so far use only the `text` schema type. There are many others built-in within the `@pdfme/schemas` package, and you can use your own:
+
+Here's an example using additional schemas from built-in and custom plugins:
+
+```ts
+import { Template, BLANK_PDF } from '@pdfme/common';
+import { text, barcodes, image } from '@pdfme/schemas';
+import myPlugin from './custom-plugins';
+
+const template: Template = {
+  basePdf: BLANK_PDF,
+  schemas: [
+    [
+      {
+        name: 'example_text',
+        type: 'text',
+        position: { x: 0, y: 0 },
+        width: 40,
+        height: 10,
+      },
+      {
+        name: 'example_image',
+        type: 'image',
+        position: { x: 200, y: 200 },
+        width: 60,
+        height: 40,
+      },
+      {
+        name: 'example_qr_code',
+        type: 'qrcode',
+        position: { x: 100, y: 100 },
+        width: 50,
+        height: 50,
+      },
+    ],
+  ],
+};
+
+const plugins = {
+  Text: multiVariableText,
+  'QR Code': barcodes.qrcode,
+  Image: image,
+  MyPlugin: myPlugin
+}
+
+const inputs = [{ 
+  example_text: 'a1', 
+  example_image: 'data:image/png;base64,iVBORw0KG....', 
+  example_qr_code: 'https://pdfme.com/' 
+}];
+
+generate({ template, inputs, plugins }).then((pdf) => {
+    console.log(pdf);
+});
+
+```
+
+
+
+## Examples using pdfme
+
+If you are looking for code examples using pdfme to get started, please check out the [pdfme-playground](https://github.com/pdfme/pdfme-playground) repository
+or look at the examples in the `websit/src/pages/` folder of this repository. Settings these up is covered in the [DEVELOPMENT.md](DEVELOPMENT.md) file.
+
 ## Special Thanks
 
 - [pdf-lib](https://pdf-lib.js.org/): Used in PDF generation.
@@ -297,7 +368,7 @@ const viewer = new Viewer({ domContainer, template, inputs });
 - [react-moveable](https://daybrush.com/moveable/), [react-selecto](https://github.com/daybrush/selecto), [@scena/react-guides](https://daybrush.com/guides/): Used in Designer UI.
 - [dnd-kit](https://github.com/clauderic/dnd-kit): Used in Designer UI.
 
-  I definitely could not have created pdfme without these libraries. I am grateful to the developers of these libraries.
+I definitely could not have created pdfme without these libraries. I am grateful to the developers of these libraries.
 
 If you want to contribute to pdfme, please check the [Development Guide](https://pdfme.com/docs/development-guide) page.  
 We look forward to your contribution!

package/dist/index.es.js

@@ -9310,6 +9310,7 @@ z.enum(["viewer", "form", "designer"]);
 const ColorType = z.enum(["rgb", "cmyk"]).optional();
 z.object({ height: z.number(), width: z.number() });
 const Schema$1 = z.object({
+  name: z.string(),
   type: z.string(),
   content: z.string().optional(),
   position: z.object({ x: z.number(), y: z.number() }),
@@ -9321,17 +9322,16 @@ const Schema$1 = z.object({
   required: z.boolean().optional(),
   __bodyRange: z.object({ start: z.number(), end: z.number().optional() }).optional(),
   __isSplit: z.boolean().optional()
-}).passthrough(), SchemaForUIAdditionalInfo = z.object({
-  id: z.string(),
-  key: z.string()
-});
+}).passthrough(), SchemaForUIAdditionalInfo = z.object({ id: z.string() });
 Schema$1.merge(SchemaForUIAdditionalInfo);
 const ArrayBufferSchema = z.any().refine((a) => a instanceof ArrayBuffer), Uint8ArraySchema = z.any().refine((a) => a instanceof Uint8Array), BlankPdf = z.object({
   width: z.number(),
   height: z.number(),
   padding: z.tuple([z.number(), z.number(), z.number(), z.number()])
-}), CustomPdf = z.union([z.string(), ArrayBufferSchema, Uint8ArraySchema]), BasePdf = z.union([CustomPdf, BlankPdf]), Template = z.object({
-  schemas: z.array(z.record(Schema$1)),
+}), CustomPdf = z.union([z.string(), ArrayBufferSchema, Uint8ArraySchema]), BasePdf = z.union([CustomPdf, BlankPdf]);
+z.array(z.record(Schema$1));
+const SchemaPageArray = z.array(z.array(Schema$1)), Template = z.object({
+  schemas: SchemaPageArray,
   basePdf: BasePdf,
   pdfmeVersion: z.string().optional()
 }).passthrough(), Inputs = z.array(z.record(z.any())).min(1), Font = z.record(z.object({
@@ -9385,14 +9385,19 @@ const UIOptions = CommonOptions.extend({
   _.onloadend = () => {
     _.result.startsWith("data:application/pdf;") ? s(_.result) : $(Error("[@pdfme/common] template.basePdf must be pdf data."));
   }, _.readAsDataURL(a);
-}), isHexValid = (a) => /^#(?:[A-Fa-f0-9]{3,4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/i.test(a), getB64BasePdf = (a) => typeof a == "string" && !a.startsWith("data:application/pdf;") && typeof window < "u" ? fetch(a).then(($) => $.blob()).then(blob2Base64Pdf).catch(($) => {
+}), isHexValid = (a) => /^#(?:[A-Fa-f0-9]{3,4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/i.test(a), migrateTemplate = (a) => {
+  a.schemas && Array.isArray(a.schemas) && a.schemas.length > 0 && !Array.isArray(a.schemas[0]) && (a.schemas = a.schemas.map((s) => Object.entries(s).map(([$, _]) => ({
+    ..._,
+    name: $
+  }))));
+}, getB64BasePdf = (a) => typeof a == "string" && !a.startsWith("data:application/pdf;") && typeof window < "u" ? fetch(a).then(($) => $.blob()).then(blob2Base64Pdf).catch(($) => {
   throw $;
 }) : a, isBlankPdf = (a) => BlankPdf.safeParse(a).success, getByteString = (a) => buffer$1.Buffer.from(a, "base64").toString("binary"), b64toUint8Array = (a) => {
   const s = a.split(";base64,")[1] ? a.split(";base64,")[1] : a, $ = getByteString(s), _ = new Uint8Array($.length);
   for (let _e = 0; _e < $.length; _e += 1)
     _[_e] = $.charCodeAt(_e);
   return _;
-}, getFontNamesInSchemas = (a) => uniq(a.map((s) => Object.values(s).map(($) => $.fontName ?? "")).reduce((s, $) => s.concat($), []).filter(Boolean)), checkFont = (a) => {
+}, getFontNamesInSchemas = (a) => uniq(a.map((s) => s.map(($) => $.fontName ?? "")).reduce((s, $) => s.concat($), []).filter(Boolean)), checkFont = (a) => {
   const { font: s, template: { schemas: $ } } = a, _e = Object.values(s).reduce((at, ot) => ot.fallback ? at + 1 : at, 0);
   if (_e === 0)
     throw Error(`[@pdfme/common] fallback flag is not found in font. true fallback flag must be only one.
@@ -9405,7 +9410,7 @@ Check this document: https://pdfme.com/docs/custom-fonts#about-font-type`);
     throw Error(`[@pdfme/common] ${tt.filter((at) => !nt.includes(at)).join()} of template.schemas is not found in font.
 Check this document: https://pdfme.com/docs/custom-fonts`);
 }, checkPlugins = (a) => {
-  const { plugins: s, template: { schemas: $ } } = a, _ = uniq($.map((tt) => Object.values(tt).map((nt) => nt.type)).flat()), _e = Object.values(s).map((tt) => tt == null ? void 0 : tt.propPanel.defaultSchema.type);
+  const { plugins: s, template: { schemas: $ } } = a, _ = uniq($.map((tt) => tt.map((nt) => nt.type)).flat()), _e = Object.values(s).map((tt) => tt == null ? void 0 : tt.propPanel.defaultSchema.type);
   if (_.some((tt) => !_e.includes(tt)))
     throw Error(`[@pdfme/common] ${_.filter((tt) => !_e.includes(tt)).join()} of template.schemas is not found in plugins.`);
 }, checkProps = (a, s) => {
@@ -9430,7 +9435,11 @@ ${_e}`);
     const { template: $, plugins: _ } = a;
     _ && checkPlugins({ plugins: _, template: $ });
   }
-}, checkInputs = (a) => checkProps(a, Inputs), checkUIOptions = (a) => checkProps(a, UIOptions), checkTemplate = (a) => checkProps(a, Template), checkUIProps = (a) => checkProps(a, UIProps), checkPreviewProps = (a) => checkProps(a, PreviewProps), checkDesignerProps = (a) => checkProps(a, DesignerProps);
+}, checkInputs = (a) => checkProps(a, Inputs), checkUIOptions = (a) => checkProps(a, UIOptions), checkPreviewProps = (a) => checkProps(a, PreviewProps), checkDesignerProps = (a) => checkProps(a, DesignerProps), checkUIProps = (a) => {
+  typeof a == "object" && a !== null && "template" in a && migrateTemplate(a.template), checkProps(a, UIProps);
+}, checkTemplate = (a) => {
+  migrateTemplate(a), checkProps(a, Template);
+};
 class Node {
   constructor({ width: s = 0, height: $ = 0 } = {}) {
     Object.defineProperty(this, "index", {
@@ -9438,11 +9447,6 @@ class Node {
       configurable: !0,
       writable: !0,
       value: 0
-    }), Object.defineProperty(this, "key", {
-      enumerable: !0,
-      configurable: !0,
-      writable: !0,
-      value: void 0
     }), Object.defineProperty(this, "schema", {
       enumerable: !0,
       configurable: !0,
@@ -9478,8 +9482,8 @@ class Node {
   setIndex(s) {
     this.index = s;
   }
-  setKeyAndSchema(s, $) {
-    this.key = s, this.schema = $;
+  setSchema(s) {
+    this.schema = s;
   }
   setWidth(s) {
     this.width = s;
@@ -9509,27 +9513,28 @@ function createPage(a) {
   return s.setPadding(a.padding), s;
 }
 function createNode(a) {
-  const { position: s, width: $, height: _, key: _e, schema: tt } = a, nt = new Node({ width: $, height: _ });
-  return nt.setPosition(s), nt.setKeyAndSchema(_e, tt), nt;
+  const { position: s, width: $, height: _, schema: _e } = a, tt = new Node({ width: $, height: _ });
+  return tt.setPosition(s), tt.setSchema(_e), tt;
 }
 function resortChildren(a, s) {
   a.children = a.children.sort(($, _) => {
-    const _e = s.get($.key), tt = s.get(_.key);
+    var nt, at;
+    const _e = s.get((nt = $.schema) == null ? void 0 : nt.name), tt = s.get((at = _.schema) == null ? void 0 : at.name);
     if (_e === void 0 || tt === void 0)
       throw new Error("[@pdfme/common] order is not defined");
     return _e - tt;
   }).map(($, _) => ($.setIndex(_), $));
 }
 async function createOnePage(a) {
-  const { basePdf: s, schemaObj: $, orderMap: _, input: _e, options: tt, _cache: nt, getDynamicHeights: at } = a, ot = createPage(s), rt = [], st = Object.entries($).sort((it, ut) => it[1].position.y - ut[1].position.y), lt = /* @__PURE__ */ new Map();
-  for (const [it, ut] of st) {
-    const { position: ft, width: ht } = ut, dt = { schema: ut, basePdf: s, options: tt, _cache: nt }, gt = (ut.readOnly ? ut.content : _e == null ? void 0 : _e[it]) || "", pt = await at(gt, dt), mt = pt.reduce((vt, At) => vt + At, 0), ct = ut.height;
-    mt !== ct && lt.set(ft.y + ct, mt - ct), pt.forEach((vt, At) => {
-      let xt = ut.position.y + pt.reduce((Et, St, Bt) => Bt < At ? Et + St : Et, 0);
-      for (const [Et, St] of lt.entries())
-        Et <= ut.position.y && (xt += St);
-      const bt = createNode({ key: it, schema: ut, position: { ...ft, y: xt }, width: ht, height: vt });
-      rt.push(xt + vt + s.padding[2]), ot.insertChild(bt);
+  const { basePdf: s, schemaPage: $, orderMap: _, input: _e, options: tt, _cache: nt, getDynamicHeights: at } = a, ot = createPage(s), rt = [], st = cloneDeep$1($).sort((it, ut) => it.position.y - ut.position.y), lt = /* @__PURE__ */ new Map();
+  for (const it of st) {
+    const { position: ut, width: ft } = it, ht = { schema: it, basePdf: s, options: tt, _cache: nt }, dt = (it.readOnly ? it.content : _e == null ? void 0 : _e[it.name]) || "", gt = await at(dt, ht), pt = gt.reduce((ct, vt) => ct + vt, 0), mt = it.height;
+    pt !== mt && lt.set(ut.y + mt, pt - mt), gt.forEach((ct, vt) => {
+      let At = it.position.y + gt.reduce((bt, Et, St) => St < vt ? bt + Et : bt, 0);
+      for (const [bt, Et] of lt.entries())
+        bt <= it.position.y && (At += Et);
+      const xt = createNode({ schema: it, position: { ...ut, y: At }, width: ft, height: ct });
+      rt.push(At + ct + s.padding[2]), ot.insertChild(xt);
     });
   }
   const et = Math.max(...rt, s.height - s.padding[2]);
@@ -9544,35 +9549,41 @@ function breakIntoPages(a) {
     return it + (((ut = at.find((ft) => ft.page === et)) == null ? void 0 : ut.value) || 0);
   }, st = s.children.sort((lt, et) => lt.position.y - et.position.y);
   for (let lt = 0; lt < st.length; lt++) {
-    const { key: et, schema: it, position: ut, height: ft, width: ht } = st[lt], { y: dt, x: gt } = ut;
-    let pt = Math.floor(dt / ot(_e.length - 1)), mt = rt(dt, pt);
-    if (mt + ft > _.height - nt && (pt++, mt = rt(dt, pt)), !et || !it)
-      throw new Error("[@pdfme/common] key or schema is undefined");
-    const ct = createNode({ key: et, schema: it, position: { x: gt, y: mt }, width: ht, height: ft });
-    _e[pt].insertChild(ct);
+    const { schema: et, position: it, height: ut, width: ft } = st[lt], { y: ht, x: dt } = it;
+    let gt = Math.floor(ht / ot(_e.length - 1)), pt = rt(ht, gt);
+    if (pt + ut > _.height - nt && (gt++, pt = rt(ht, gt)), !et)
+      throw new Error("[@pdfme/common] schema is undefined");
+    const mt = createNode({ schema: et, position: { x: dt, y: pt }, width: ft, height: ut });
+    _e[gt].insertChild(mt);
   }
   return _e.forEach((lt) => resortChildren(lt, $)), _e;
 }
 function createNewTemplate(a, s) {
   const $ = {
-    schemas: Array.from({ length: a.length }, () => ({})),
+    schemas: Array.from({ length: a.length }, () => []),
     basePdf: s
   }, _ = /* @__PURE__ */ new Map();
   return cloneDeep$1(a).forEach((_e, tt) => {
     _e.children.forEach((nt) => {
-      const { key: at, schema: ot } = nt;
-      if (!at || !ot)
-        throw new Error("[@pdfme/common] key or schema is undefined");
-      _.has(at) || _.set(at, []), _.get(at).push(nt);
-      const rt = _e.children.filter((lt) => lt.key === at), st = _.get(at).length - rt.length;
+      const { schema: at } = nt;
+      if (!at)
+        throw new Error("[@pdfme/common] schema is undefined");
+      const ot = at.name;
+      _.has(ot) || _.set(ot, []), _.get(ot).push(nt);
+      const rt = _e.children.filter((lt) => {
+        var et;
+        return ((et = lt.schema) == null ? void 0 : et.name) === ot;
+      }), st = _.get(ot).length - rt.length;
       if (rt.length > 0) {
         if (!rt[0].schema)
           throw new Error("[@pdfme/common] schema is undefined");
-        const lt = rt[0].schema, et = rt.reduce((ut, ft) => ut + ft.height, 0), it = rt[0].position;
+        const lt = rt[0].schema, et = rt.reduce((ht, dt) => ht + dt.height, 0), it = rt[0].position;
         lt.__bodyRange = {
           start: Math.max(st - 1, 0),
           end: st + rt.length - 1
-        }, lt.__isSplit = st > 0, $.schemas[tt][at] = Object.assign({}, lt, { position: it, height: et });
+        }, lt.__isSplit = st > 0;
+        const ut = Object.assign({}, lt, { position: it, height: et }), ft = $.schemas[tt].findIndex((ht) => ht.name === ot);
+        ft !== -1 ? $.schemas[tt][ft] = ut : $.schemas[tt].push(ut);
       }
     });
   }), $;
@@ -9583,7 +9594,7 @@ const getDynamicTemplate = async (a) => {
     return s;
   const $ = s.basePdf, _ = [];
   for (const _e of s.schemas) {
-    const tt = new Map(Object.keys(_e).map((ot, rt) => [ot, rt])), nt = await createOnePage({ basePdf: $, schemaObj: _e, orderMap: tt, ...a }), at = breakIntoPages({ longPage: nt, basePdf: $, orderMap: tt });
+    const tt = new Map(_e.map((ot, rt) => [ot.name, rt])), nt = await createOnePage({ basePdf: $, schemaPage: _e, orderMap: tt, ...a }), at = breakIntoPages({ longPage: nt, basePdf: $, orderMap: tt });
     _.push(...at);
   }
   return createNewTemplate(_, s.basePdf);
@@ -60278,34 +60289,31 @@ const uuid$6 = () => "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (a)
   hotkeys.unbind(keys$2.join());
 }, getPdfPageSizes = async (a) => {
   const s = URL.createObjectURL(a), $ = await pdfExports.getDocument({ url: s }).promise, _ = Promise.all(
-    new Array($.numPages).fill("").map(async (_e, tt) => await $.getPage(tt + 1).then((at) => {
-      const { height: ot, width: rt } = at.getViewport({ scale: 1 });
-      return { height: pt2mm(ot), width: pt2mm(rt) };
+    new Array($.numPages).fill("").map(async (_e, tt) => await $.getPage(tt + 1).then((nt) => {
+      const { height: at, width: ot } = nt.getViewport({ scale: 1 });
+      return { height: pt2mm(at), width: pt2mm(ot) };
     }))
   );
   return URL.revokeObjectURL(s), _;
 }, pdf2Images = async (a, s, $) => {
   const _ = URL.createObjectURL(a), _e = await pdfExports.getDocument({ url: _ }).promise, tt = Promise.all(
-    new Array(_e.numPages).fill("").map(async (nt, at) => await _e.getPage(at + 1).then((rt) => {
-      const st = document.createElement("canvas");
-      st.width = s * 2;
-      const lt = st.getContext("2d"), et = st.width / rt.getViewport({ scale: 1 }).width, it = rt.getViewport({ scale: et });
-      return st.height = it.height, rt.render({ canvasContext: lt, viewport: it }).promise.then(() => st.toDataURL(`image/${$}`));
+    new Array(_e.numPages).fill("").map(async (nt, at) => await _e.getPage(at + 1).then((ot) => {
+      const rt = document.createElement("canvas");
+      rt.width = s * 2;
+      const st = rt.getContext("2d"), lt = rt.width / ot.getViewport({ scale: 1 }).width, et = ot.getViewport({ scale: lt });
+      return rt.height = et.height, ot.render({ canvasContext: st, viewport: et }).promise.then(() => rt.toDataURL(`image/${$}`));
     }))
   );
   return URL.revokeObjectURL(_), tt;
 }, pdf2Pngs = (a, s) => pdf2Images(a, s, "png"), b64toBlob = (a) => {
   const s = b64toUint8Array(a), [, , $] = a.match(/(:)([a-z/]+)(;)/);
   return new Blob([s.buffer], { type: $ });
-}, sortSchemasList = (a) => {
-  const { schemas: s } = a, $ = s.length;
-  return new Array($).fill("").reduce((_e, tt, nt) => (_e.push(
-    s[nt] ? Object.entries(s[nt]).map(
-      ([at, ot]) => Object.assign(ot, { key: at, content: ot.content, id: uuid$6() })
-    ) : []
-  ), _e), []);
-}, template2SchemasList = async (a) => {
-  const s = cloneDeep$1(a), { basePdf: $, schemas: _ } = s, _e = sortSchemasList(s);
+}, convertSchemasForUI = (a) => (a.schemas.forEach((s, $) => {
+  s.forEach((_) => {
+    _.id = uuid$6(), _.content = _.content || "";
+  });
+}), a.schemas), template2SchemasList = async (a) => {
+  const s = cloneDeep$1(a), { basePdf: $, schemas: _ } = s, _e = convertSchemasForUI(s);
   let tt = [];
   if (isBlankPdf($))
     tt = _.map(() => ({
@@ -60313,32 +60321,29 @@ const uuid$6 = () => "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (a)
       height: $.height
     }));
   else {
-    const rt = await getB64BasePdf($), st = b64toBlob(rt);
-    tt = await getPdfPageSizes(st);
+    const ot = await getB64BasePdf($), rt = b64toBlob(ot);
+    tt = await getPdfPageSizes(rt);
   }
   const nt = _e.length, at = tt.length;
-  return (nt < at ? _e.concat(new Array(at - nt).fill(cloneDeep$1([]))) : _e.slice(0, tt.length)).map((rt, st) => (Object.values(rt).forEach((lt) => {
-    const { width: et, height: it } = tt[st], ut = lt.position.x + lt.width, ft = lt.position.y + lt.height;
-    if (et < ut) {
-      const ht = ut - et;
-      lt.position.x += ht;
+  return (nt < at ? _e.concat(new Array(at - nt).fill(cloneDeep$1([]))) : _e.slice(0, tt.length)).map((ot, rt) => (Object.values(ot).forEach((st) => {
+    const { width: lt, height: et } = tt[rt], it = st.position.x + st.width, ut = st.position.y + st.height;
+    if (lt < it) {
+      const ft = it - lt;
+      st.position.x += ft;
     }
-    if (it < ft) {
-      const ht = ft - it;
-      lt.position.y += ht;
+    if (et < ut) {
+      const ft = ut - et;
+      st.position.y += ft;
     }
-  }), rt));
+  }), ot));
 }, schemasList2template = (a, s) => ({
   schemas: cloneDeep$1(a).map(
-    ($) => $.reduce((_, _e) => {
-      const tt = _e.key;
-      return delete _e.id, delete _e.key, _[tt] = _e, _;
-    }, {})
+    ($) => $.map((_) => (delete _.id, _))
   ),
   basePdf: s
-}), getUniqSchemaKey = (a) => {
-  const { copiedSchemaKey: s, schema: $, stackUniqSchemaKeys: _ } = a, _e = $.map((rt) => rt.key).concat(_), tt = _e.reduce(
-    (rt, st) => Object.assign(rt, { originalKey: st, copiedNum: 0 }),
+}), getUniqueSchemaName = (a) => {
+  const { copiedSchemaName: s, schema: $, stackUniqueSchemaNames: _ } = a, _e = $.map((rt) => rt.name).concat(_), tt = _e.reduce(
+    (rt, st) => Object.assign(rt, { originalName: st, copiedNum: 0 }),
     {}
   ), nt = (rt) => rt.replace(/ copy$| copy [0-9]*$/, "");
   _e.filter((rt) => / copy$| copy [0-9]*$/.test(rt)).forEach((rt) => {
@@ -60384,7 +60389,7 @@ const uuid$6 = () => "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (a)
   var nt;
   if (s !== "type")
     return;
-  const _e = ["id", "key", "type", "position", "required"];
+  const _e = ["id", "name", "type", "position", "required"];
   Object.keys(a).forEach((at) => {
     _e.includes(at) || delete a[at];
   });
@@ -81960,6 +81965,7 @@ const UseDynamicFontSize = (a) => {
   },
   widgets: { UseDynamicFontSize },
   defaultSchema: {
+    name: "",
     type: "text",
     content: "Type Something...",
     position: { x: 0, y: 0 },
@@ -136559,11 +136565,11 @@ const { Text: Text$4 } = Typography$1, Item = React$a.memo(
         if (!ut.current || ut.current.length === 0)
           return;
         const pt = _e[a], mt = [], ct = ut.current.map((vt) => {
-          const At = uuid$6(), xt = getUniqSchemaKey({ copiedSchemaKey: vt.key, schema: pt, stackUniqSchemaKeys: mt }), { height: bt, width: Et, position: St } = vt, Bt = s[a], Ot = {
+          const At = uuid$6(), xt = getUniqueSchemaName({ copiedSchemaName: vt.name, schema: pt, stackUniqueSchemaNames: mt }), { height: bt, width: Et, position: St } = vt, Bt = s[a], Ot = {
             x: St.x + 10 > Bt.width - Et ? Bt.width - Et : St.x + 10,
             y: St.y + 10 > Bt.height - bt ? Bt.height - bt : St.y + 10
           };
-          return Object.assign(cloneDeep$1(vt), { id: At, key: xt, position: Ot });
+          return Object.assign(cloneDeep$1(vt), { id: At, name: xt, position: Ot });
         });
         nt(_e[a].concat(ct)), et(ct.map((vt) => document.getElementById(vt.id))), ut.current = ct;
       },
@@ -136622,7 +136628,7 @@ const { Text: Text$4 } = Typography$1, Item = React$a.memo(
     ([Et, St]) => (St == null ? void 0 : St.propPanel.defaultSchema.type) === _e.type
   ), vt = { width: 20, marginRight: "0.5rem" };
   let At;
-  _e.key ? tt.find((Et) => _e.key && Et.key === _e.key && Et.id !== _e.id) && (At = "is-danger") : At = "is-warning";
+  _e.name ? tt.find((Et) => _e.name && Et.name === _e.name && Et.id !== _e.id) && (At = "is-danger") : At = "is-warning";
   let xt = rt("edit");
   At === "is-warning" ? xt = rt("plsInputName") : At === "is-danger" && (xt = rt("fieldMustUniq"));
   const bt = a ? { background: ot.colorPrimary, opacity: ut || it ? 0.5 : 1 } : {};
@@ -136634,7 +136640,7 @@ const { Text: Text$4 } = Typography$1, Item = React$a.memo(
       onMouseLeave: at,
       onClick: () => _(_e.id),
       icon: ct && /* @__PURE__ */ jsxRuntimeExports.jsx(PluginIcon$1, { plugin: ct, label: mt, size: 20, styles: vt }),
-      value: _e.key,
+      value: _e.name,
       status: At,
       title: xt,
       required: _e.required,
@@ -136720,7 +136726,7 @@ const { Text: Text$4 } = Typography$1, Item = React$a.memo(
                 Item$1,
                 {
                   icon: dt(lt),
-                  value: gt.key,
+                  value: gt.name,
                   required: gt.required,
                   readOnly: gt.readOnly,
                   style: { background: s.colorPrimary },
@@ -136731,7 +136737,7 @@ const { Text: Text$4 } = Typography$1, Item = React$a.memo(
                 Item$1,
                 {
                   icon: dt(pt),
-                  value: pt.key,
+                  value: pt.name,
                   required: pt.required,
                   readOnly: pt.readOnly,
                   style: { background: s.colorPrimary },
@@ -136760,13 +136766,13 @@ const { Text: Text$4 } = Typography$1, Item = React$a.memo(
 `);
     dt.length !== s.length ? alert(rt("errorBulkUpdateFieldName")) : (at(
       dt.map((gt, pt) => ({
-        key: "key",
+        key: "name",
         value: gt,
         schemaId: s[pt].id
       }))
     ), lt(!1));
   }, ht = () => {
-    it(s.map((dt) => dt.key).join(`
+    it(s.map((dt) => dt.name).join(`
 `)), lt(!0);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
@@ -152036,7 +152042,7 @@ const FormRender = withProvider(FormCore, defaultWidgets), svgBaseProp = {
     it.current = (ct) => {
       for (const vt of _)
         for (const At of Object.values(vt))
-          if (At.key === ct && At.id !== nt.id)
+          if (At.name === ct && At.id !== nt.id)
             return !1;
       return !0;
     };
@@ -152082,7 +152088,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         required: !0,
         span: 12
       },
-      key: {
+      name: {
         title: ot("fieldName"),
         type: "string",
         required: !0,
@@ -152262,7 +152268,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
 }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
   "div",
   {
-    title: _.key,
+    title: _.name,
     onMouseEnter: () => $ && $(_.id),
     onMouseLeave: () => $ && $(null),
     className: SELECTABLE_CLASSNAME,
@@ -152303,7 +152309,6 @@ Check this document: https://pdfme.com/docs/custom-schemas`), /* @__PURE__ */ js
       ut.current.innerHTML = "";
       const gt = ht.ui;
       gt({
-        key: tt.key,
         value: at,
         schema: tt,
         basePdf: nt,
@@ -152330,7 +152335,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`), /* @__PURE__ */ js
     lt && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { transform: `scale(${s})` }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       Renderer$1,
       {
-        schema: { ...tt, id: tt.type, key: tt.type },
+        schema: { ...tt, id: tt.type },
         basePdf: $,
         value: tt.content || "",
         onChangeHoveringSchemaId: () => {
@@ -162510,13 +162515,13 @@ const Guides$2 = Guides$1, guideStyle = (a, s, $, _) => ({
   }, []), jt = (Tt) => {
     const [Dt, Ut, Vt, Qt] = isBlankPdf(a.basePdf) ? a.basePdf.padding : [0, 0, 0, 0], qt = St[gt], Zt = (rr) => {
       let Yt = ht.reduce((nr, tr) => nr + tr.length, 1), Kt = rr + Yt;
-      for (; ht.some((nr) => nr.find((tr) => tr.key === Kt)); )
+      for (; ht.some((nr) => nr.find((tr) => tr.name === Kt)); )
         Yt++, Kt = rr + Yt;
       return Kt;
     }, ar = (rr, Yt, Kt) => Math.min(Math.max(rr, Yt), Kt), Jt = {
       id: uuid$6(),
-      key: Zt(rt("field")),
       ...Tt,
+      name: Zt(rt("field")),
       position: {
         x: ar(Qt, Tt.position.x, qt.width - Ut - Tt.width),
         y: ar(Dt, Tt.position.y, qt.height - Vt - Tt.height)
@@ -162846,7 +162851,7 @@ const Designer$1 = Designer, { Text } = Typography$1, icons = {
     pageCursor: st,
     onChangePageCursor: lt
   });
-  const xt = ({ key: bt, value: Et }) => _ && _({ index: ot, key: bt, value: Et });
+  const xt = ({ name: bt, value: Et }) => _ && _({ index: ot, name: bt, value: Et });
   return pt ? /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorScreen$1, { size: $, error: pt }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(Root$1, { size: $, scale: gt, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       CtlBar$1,
@@ -162880,7 +162885,7 @@ const Designer$1 = Designer, { Text } = Typography$1, icons = {
         pageSizes: dt,
         backgrounds: ht,
         renderSchema: ({ schema: bt, index: Et }) => {
-          const { key: St, readOnly: Bt } = bt, Ot = Bt ? String(bt.content) || "" : String(vt && vt[St] || "");
+          const { name: St, readOnly: Bt } = bt, Ot = Bt ? String(bt.content) || "" : String(vt && vt[St] || "");
           return /* @__PURE__ */ jsxRuntimeExports.jsx(
             Renderer$1,
             {
@@ -162898,7 +162903,7 @@ const Designer$1 = Designer, { Text } = Typography$1, icons = {
                     const Rt = yt, kt = (vt == null ? void 0 : vt[St]) || "";
                     if (Rt === kt)
                       return;
-                    xt({ key: St, value: Rt }), bt.type === "table" && (Ct = !0);
+                    xt({ name: St, value: Rt }), bt.type === "table" && (Ct = !0);
                   } else {
                     const Rt = ut[st].find(
                       (kt) => kt.id === bt.id
@@ -162944,8 +162949,8 @@ class Form extends PreviewUI {
               size: this.size,
               inputs: this.inputs,
               onChangeInput: (s) => {
-                const { index: $, value: _, key: _e } = s;
-                this.onChangeInputCallback && this.onChangeInputCallback({ index: $, value: _, key: _e }), this.inputs && this.inputs[$] && this.inputs[$][_e] !== _ && (this.inputs[$][_e] = _, this.render());
+                const { index: $, value: _, name: _e } = s;
+                this.onChangeInputCallback && this.onChangeInputCallback({ index: $, value: _, name: _e }), this.inputs && this.inputs[$] && this.inputs[$][_e] !== _ && (this.inputs[$][_e] = _, this.render());
               }
             }
           )