@pdfme/ui 4.5.2 → 5.0.0-dev.1

package/dist/types/Form.d.ts

@@ -6,7 +6,7 @@ declare class Form extends PreviewUI {
     onChangeInput(cb: (arg: {
         index: number;
         value: string;
-        key: string;
+        name: string;
     }) => void): void;
     protected render(): void;
 }

package/dist/types/class.d.ts

@@ -19,7 +19,8 @@ export declare abstract class BaseUIClass {
     protected getPluginsRegistry(): Plugins;
     protected getOptions(): {};
     getTemplate(): import("zod").objectOutputType<{
-        schemas: import("zod").ZodArray<import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodObject<{
+        schemas: import("zod").ZodArray<import("zod").ZodArray<import("zod").ZodObject<{
+            name: import("zod").ZodString;
             type: import("zod").ZodString;
             content: import("zod").ZodOptional<import("zod").ZodString>;
             position: import("zod").ZodObject<{
@@ -50,6 +51,7 @@ export declare abstract class BaseUIClass {
             }>>;
             __isSplit: import("zod").ZodOptional<import("zod").ZodBoolean>;
         }, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{
+            name: import("zod").ZodString;
             type: import("zod").ZodString;
             content: import("zod").ZodOptional<import("zod").ZodString>;
             position: import("zod").ZodObject<{
@@ -80,6 +82,7 @@ export declare abstract class BaseUIClass {
             }>>;
             __isSplit: import("zod").ZodOptional<import("zod").ZodBoolean>;
         }, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{
+            name: import("zod").ZodString;
             type: import("zod").ZodString;
             content: import("zod").ZodOptional<import("zod").ZodString>;
             position: import("zod").ZodObject<{
@@ -109,7 +112,7 @@ export declare abstract class BaseUIClass {
                 end?: number | undefined;
             }>>;
             __isSplit: import("zod").ZodOptional<import("zod").ZodBoolean>;
-        }, import("zod").ZodTypeAny, "passthrough">>>, "many">;
+        }, import("zod").ZodTypeAny, "passthrough">>, "many">, "many">;
         basePdf: import("zod").ZodUnion<[import("zod").ZodUnion<[import("zod").ZodString, import("zod").ZodType<ArrayBuffer, import("zod").ZodTypeDef, ArrayBuffer>, import("zod").ZodType<Uint8Array, import("zod").ZodTypeDef, Uint8Array>]>, import("zod").ZodObject<{
             width: import("zod").ZodNumber;
             height: import("zod").ZodNumber;

package/dist/types/components/Preview.d.ts

@@ -4,7 +4,7 @@ declare const Preview: ({ template, inputs, size, onChangeInput, }: Omit<Preview
     onChangeInput?: ((args: {
         index: number;
         value: string;
-        key: string;
+        name: string;
     }) => void) | undefined;
     size: Size;
 }) => React.JSX.Element;

package/dist/types/helper.d.ts

@@ -27,12 +27,12 @@ export declare const template2SchemasList: (_template: Template) => Promise<{
     width: number;
     height: number;
     type: string;
+    name: string;
     position: {
         x: number;
         y: number;
     };
     id: string;
-    key: string;
     opacity?: number | undefined;
     rotate?: number | undefined;
     required?: boolean | undefined;
@@ -45,10 +45,10 @@ export declare const template2SchemasList: (_template: Template) => Promise<{
     __isSplit?: boolean | undefined;
 }[][]>;
 export declare const schemasList2template: (schemasList: SchemaForUI[][], basePdf: BasePdf) => Template;
-export declare const getUniqSchemaKey: (arg: {
-    copiedSchemaKey: string;
+export declare const getUniqueSchemaName: (arg: {
+    copiedSchemaName: string;
     schema: SchemaForUI[];
-    stackUniqSchemaKeys: string[];
+    stackUniqueSchemaNames: string[];
 }) => string;
 export declare const moveCommandToChangeSchemasArg: (props: {
     command: 'up' | 'down' | 'left' | 'right';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "4.5.2",
+  "version": "5.0.0-dev.1",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
@@ -81,6 +81,7 @@
     ],
     "moduleNameMapper": {
       "\\.(png|css)$": "<rootDir>/__mocks__/assetsTransformer.js",
+      "^@pdfme/schemas/utils$": "<rootDir>/../schemas/src/utils.ts",
       "^antd/es/": "antd/lib/",
       "^form-render/es/": "form-render/lib/",
       "^rc-picker/es/": "rc-picker/lib/",

package/src/Form.tsx

@@ -7,13 +7,13 @@ import AppContextProvider from './components/AppContextProvider';
 import Preview from './components/Preview';
 
 class Form extends PreviewUI {
-  private onChangeInputCallback?: (arg: { index: number; value: string; key: string }) => void;
+  private onChangeInputCallback?: (arg: { index: number; value: string; name: string }) => void;
 
   constructor(props: PreviewProps) {
     super(props);
   }
 
-  public onChangeInput(cb: (arg: { index: number; value: string; key: string }) => void) {
+  public onChangeInput(cb: (arg: { index: number; value: string; name: string }) => void) {
     this.onChangeInputCallback = cb;
   }
 
@@ -30,14 +30,14 @@ class Form extends PreviewUI {
           template={this.template}
           size={this.size}
           inputs={this.inputs}
-          onChangeInput={(arg: { index: number; value: string; key: string }) => {
-            const { index, value, key } = arg;
+          onChangeInput={(arg: { index: number; value: string; name: string }) => {
+            const { index, value, name } = arg;
             if (this.onChangeInputCallback) {
-              this.onChangeInputCallback({ index, value, key });
+              this.onChangeInputCallback({ index, value, name });
             }
             if (this.inputs && this.inputs[index]) {
-              if (this.inputs[index][key] !== value) {
-                this.inputs[index][key] = value;
+              if (this.inputs[index][name] !== value) {
+                this.inputs[index][name] = value;
                 this.render();
               }
             }

package/src/components/Designer/LeftSidebar.tsx

@@ -25,7 +25,7 @@ const Draggable = (props: { plugin: Plugin<any>, scale: number, basePdf: BasePdf
         <div style={{ transform: `scale(${scale})` }}>
           <Renderer
             key={defaultSchema.type}
-            schema={{ ...defaultSchema, id: defaultSchema.type, key: defaultSchema.type }}
+            schema={{ ...defaultSchema, id: defaultSchema.type }}
             basePdf={basePdf}
             value={defaultSchema.content || ''}
             onChangeHoveringSchemaId={() => { void 0 }}

package/src/components/Designer/RightSidebar/DetailView/index.tsx

@@ -68,10 +68,10 @@ const DetailView = (props: DetailViewProps) => {
   useEffect(() => form.resetFields(), [activeSchema.id])
 
   useEffect(() => {
-    uniqueSchemaKey.current = (value: string): boolean => {
+    uniqueSchemaName.current = (value: string): boolean => {
       for (const page of schemasList) {
         for (const s of Object.values(page)) {
-          if (s.key === value && s.id !== activeSchema.id) {
+          if (s.name === value && s.id !== activeSchema.id) {
             return false;
           }
         }
@@ -80,9 +80,9 @@ const DetailView = (props: DetailViewProps) => {
     };
   }, [schemasList, activeSchema]);
 
-  const uniqueSchemaKey = useRef((value: string): boolean => true);
+  const uniqueSchemaName = useRef((value: string): boolean => true);
 
-  const validateUniqueSchemaKey = (_: any, value: string): boolean => uniqueSchemaKey.current(value)
+  const validateUniqueSchemaName = (_: any, value: string): boolean => uniqueSchemaName.current(value)
 
   const handleWatch = debounce((formSchema: any) => {
     const formAndSchemaValuesDiffer = (formValue: any, schemaValue: any): boolean => {
@@ -163,13 +163,13 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         required: true,
         span: 12,
       },
-      key: {
+      name: {
         title: i18n('fieldName'),
         type: 'string',
         required: true,
         span: 12,
         rules: [{
-          validator: validateUniqueSchemaKey,
+          validator: validateUniqueSchemaName,
           message: i18n('validation.uniqueName'),
         }],
         props: { autoComplete: "off" }

package/src/components/Designer/RightSidebar/ListView/SelectableSortableContainer.tsx

@@ -159,7 +159,7 @@ const SelectableSortableContainer = (
                     <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
                       <Item
                         icon={getPluginIcon(activeId)}
-                        value={activeSchema.key}
+                        value={activeSchema.name}
                         required={activeSchema.required}
                         readOnly={activeSchema.readOnly}
                         style={{ background: token.colorPrimary }}
@@ -173,7 +173,7 @@ const SelectableSortableContainer = (
                           <Item
                             icon={getPluginIcon(item)}
                             key={item.id}
-                            value={item.key}
+                            value={item.name}
                             required={item.required}
                             readOnly={item.readOnly}
                             style={{ background: token.colorPrimary }}

package/src/components/Designer/RightSidebar/ListView/SelectableSortableItem.tsx

@@ -49,9 +49,9 @@ const SelectableSortableItem = ({
   const iconStyles = { width: 20, marginRight: '0.5rem' };
 
   let status: undefined | 'is-warning' | 'is-danger';
-  if (!schema.key) {
+  if (!schema.name) {
     status = 'is-warning';
-  } else if (schemas.find((s) => schema.key && s.key === schema.key && s.id !== schema.id)) {
+  } else if (schemas.find((s) => schema.name && s.name === schema.name && s.id !== schema.id)) {
     status = 'is-danger';
   }
 
@@ -73,7 +73,7 @@ const SelectableSortableItem = ({
       onMouseLeave={onMouseLeave}
       onClick={() => onEdit(schema.id)}
       icon={thisPlugin && <PluginIcon plugin={thisPlugin} label={pluginLabel} size={20} styles={iconStyles}/>}
-      value={schema.key}
+      value={schema.name}
       status={status}
       title={title}
       required={schema.required}

package/src/components/Designer/RightSidebar/ListView/index.tsx

@@ -45,7 +45,7 @@ const ListView = (
     } else {
       changeSchemas(
         names.map((value, index) => ({
-          key: 'key',
+          key: 'name',
           value,
           schemaId: schemas[index].id,
         }))
@@ -55,7 +55,7 @@ const ListView = (
   };
 
   const startBulk = () => {
-    setFieldNamesValue(schemas.map((s) => s.key).join('\n'));
+    setFieldNamesValue(schemas.map((s) => s.name).join('\n'));
     setIsBulkUpdateFieldNamesMode(true);
   };
 

package/src/components/Designer/index.tsx

@@ -162,21 +162,21 @@ const TemplateEditor = ({
     const [paddingTop, paddingRight, paddingBottom, paddingLeft] = isBlankPdf(template.basePdf) ? template.basePdf.padding : [0, 0, 0, 0];
     const pageSize = pageSizes[pageCursor];
 
-    const newSchemaKey = (prefix: string) => {
-      let keyNum = schemasList.reduce((acc, page) => acc + page.length, 1);
-      let newKey = prefix + keyNum;
-      while (schemasList.some(page => page.find((s) => s.key === newKey))) {
-        keyNum++;
-        newKey = prefix + keyNum;
+    const newSchemaName = (prefix: string) => {
+      let index = schemasList.reduce((acc, page) => acc + page.length, 1);
+      let newName = prefix + index;
+      while (schemasList.some(page => page.find((s) => s.name === newName))) {
+        index++;
+        newName = prefix + index;
       }
-      return newKey;
+      return newName;
     };
     const ensureMiddleValue = (min: number, value: number, max: number) => Math.min(Math.max(min, value), max)
 
     const s = {
       id: uuid(),
-      key: newSchemaKey(i18n('field')),
       ...defaultSchema,
+      name: newSchemaName(i18n('field')),
       position: {
         x: ensureMiddleValue(paddingLeft, defaultSchema.position.x, pageSize.width - paddingRight - defaultSchema.width),
         y: ensureMiddleValue(paddingTop, defaultSchema.position.y, pageSize.height - paddingBottom - defaultSchema.height),

package/src/components/Preview.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState, useEffect, useContext } from 'react';
 import { Template, SchemaForUI, PreviewProps, Size, getDynamicTemplate } from '@pdfme/common';
-import { getDynamicHeightsForTable } from '@pdfme/schemas';
+import { getDynamicHeightsForTable } from '@pdfme/schemas/utils';
 import UnitPager from './UnitPager';
 import Root from './Root';
 import ErrorScreen from './ErrorScreen';
@@ -20,7 +20,7 @@ const Preview = ({
   size,
   onChangeInput,
 }: Omit<PreviewProps, 'domContainer'> & {
-  onChangeInput?: (args: { index: number; value: string; key: string }) => void;
+  onChangeInput?: (args: { index: number; value: string; name: string }) => void;
   size: Size;
 }) => {
   const { token } = theme.useToken();
@@ -50,9 +50,13 @@ const Preview = ({
       options,
       _cache,
       getDynamicHeights: (value, args) => {
-        if (args.schema.type !== 'table') return Promise.resolve([args.schema.height]);
-        return getDynamicHeightsForTable(value, args);
-      }
+        switch (args.schema.type) {
+          case 'table':
+            return getDynamicHeightsForTable(value, args);
+          default:
+            return Promise.resolve([args.schema.height]);
+        }
+      },
     })
       .then(async (dynamicTemplate) => {
         const sl = await template2SchemasList(dynamicTemplate);
@@ -78,8 +82,8 @@ const Preview = ({
     onChangePageCursor: setPageCursor,
   });
 
-  const handleChangeInput = ({ key, value }: { key: string; value: string }) =>
-    onChangeInput && onChangeInput({ index: unitCursor, key, value });
+  const handleChangeInput = ({ name, value }: { name: string; value: string }) =>
+    onChangeInput && onChangeInput({ index: unitCursor, name, value });
 
   if (error) {
     return <ErrorScreen size={size} error={error} />;
@@ -114,8 +118,8 @@ const Preview = ({
           pageSizes={pageSizes}
           backgrounds={backgrounds}
           renderSchema={({ schema, index }) => {
-            const { key, readOnly } = schema;
-            const content = readOnly ? String(schema.content) || '' : String(input && input[key] || '');
+            const { name, readOnly } = schema;
+            const content = readOnly ? String(schema.content) || '' : String(input && input[name] || '');
             return (
               <Renderer
                 key={schema.id}
@@ -131,9 +135,9 @@ const Preview = ({
                   args.forEach(({ key: _key, value }) => {
                     if (_key === 'content') {
                       const newValue = value as string;
-                      const oldValue = (input?.[key] as string) || '';
+                      const oldValue = (input?.[name] as string) || '';
                       if (newValue === oldValue) return;
-                      handleChangeInput({ key, value: newValue });
+                      handleChangeInput({ name, value: newValue });
                       // TODO Improve this to allow schema types to determine whether the execution of getDynamicTemplate is required.
                       if (schema.type === 'table') isNeedInit = true;
                     } else {

package/src/components/Renderer.tsx

@@ -45,7 +45,7 @@ const Wrapper = ({
   schema,
 }: RendererProps & { children: ReactNode }) => (
   <div
-    title={schema.key}
+    title={schema.name}
     onMouseEnter={() => onChangeHoveringSchemaId && onChangeHoveringSchemaId(schema.id)}
     onMouseLeave={() => onChangeHoveringSchemaId && onChangeHoveringSchemaId(null)}
     className={SELECTABLE_CLASSNAME}
@@ -105,7 +105,6 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
       const render = plugin.ui;
 
       void render({
-        key: schema.key,
         value,
         schema,
         basePdf,

package/src/helper.ts

@@ -2,8 +2,6 @@
 // @ts-ignore
 import PDFJSWorker from 'pdfjs-dist/legacy/build/pdf.worker.entry.js';
 import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist/legacy/build/pdf.js';
-GlobalWorkerOptions.workerSrc = PDFJSWorker;
-
 import hotkeys from 'hotkeys-js';
 import {
   cloneDeep,
@@ -14,13 +12,14 @@ import {
   Template,
   BasePdf,
   SchemaForUI,
-  Schema,
   Size,
   isBlankPdf,
   Plugins,
 } from '@pdfme/common';
 import { RULER_HEIGHT } from './constants.js';
 
+GlobalWorkerOptions.workerSrc = PDFJSWorker;
+
 export const uuid = () =>
   'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
     const r = (Math.random() * 16) | 0;
@@ -201,13 +200,11 @@ export const getPdfPageSizes = async (pdfBlob: Blob) => {
 
   const promises = Promise.all(
     new Array(pdfDoc.numPages).fill('').map(async (_, i) => {
-      const pageSize = await pdfDoc.getPage(i + 1).then((page) => {
-        const { height, width } = page.getViewport({ scale: 1 });
+      return await pdfDoc.getPage(i + 1).then((page) => {
+        const { height, width } = page.getViewport({ scale: 1, rotation: 0 });
 
         return { height: pt2mm(height), width: pt2mm(width) };
       });
-
-      return pageSize;
     })
   );
 
@@ -222,20 +219,18 @@ const pdf2Images = async (pdfBlob: Blob, width: number, imageType: 'png' | 'jpeg
 
   const promises = Promise.all(
     new Array(pdfDoc.numPages).fill('').map(async (_, i) => {
-      const image = await pdfDoc.getPage(i + 1).then((page) => {
+      return await pdfDoc.getPage(i + 1).then((page) => {
         const canvas = document.createElement('canvas');
         canvas.width = width * 2;
         const canvasContext = canvas.getContext('2d')!;
-        const scaleRequired = canvas.width / page.getViewport({ scale: 1 }).width;
-        const viewport = page.getViewport({ scale: scaleRequired });
+        const scaleRequired = canvas.width / page.getViewport({ scale: 1, rotation: 0 }).width;
+        const viewport = page.getViewport({ scale: scaleRequired, rotation: 0 });
         canvas.height = viewport.height;
 
         return page
           .render({ canvasContext, viewport })
           .promise.then(() => canvas.toDataURL(`image/${imageType}`));
       });
-
-      return image;
     })
   );
   URL.revokeObjectURL(url);
@@ -246,31 +241,27 @@ const pdf2Images = async (pdfBlob: Blob, width: number, imageType: 'png' | 'jpeg
 export const pdf2Pngs = (pdfBlob: Blob, width: number) => pdf2Images(pdfBlob, width, 'png');
 
 export const b64toBlob = (base64: string) => {
-  const uniy8Array = b64toUint8Array(base64);
+  const uint8Array = b64toUint8Array(base64);
   const [, , mimeType] = base64.match(/(:)([a-z/]+)(;)/)!;
 
-  return new Blob([uniy8Array.buffer], { type: mimeType });
+  return new Blob([uint8Array.buffer], { type: mimeType });
 };
 
-const sortSchemasList = (template: Template): SchemaForUI[][] => {
-  const { schemas } = template;
-  const pageNum = schemas.length;
-  const arr = new Array(pageNum).fill('') as SchemaForUI[][];
-  return arr.reduce((acc, _, i) => {
-    acc.push(
-      schemas[i]
-        ? Object.entries(schemas[i]).map(([key, schema]) =>
-            Object.assign(schema, { key, content: schema.content, id: uuid() })
-          )
-        : []
-    );
-    return acc;
-  }, [] as SchemaForUI[][]);
+const convertSchemasForUI = (template: Template): SchemaForUI[][] => {
+  template.schemas.forEach((page, i) => {
+    page.forEach((schema) => {
+      schema.id = uuid();
+      schema.content = schema.content || '';
+    });
+  });
+
+  return template.schemas as SchemaForUI[][];
 };
+
 export const template2SchemasList = async (_template: Template) => {
   const template = cloneDeep(_template);
   const { basePdf, schemas } = template;
-  const sortedSchemasList = sortSchemasList(template);
+  const schemasForUI = convertSchemasForUI(template);
 
   let pageSizes: Size[] = [];
   if (isBlankPdf(basePdf)) {
@@ -284,12 +275,13 @@ export const template2SchemasList = async (_template: Template) => {
     pageSizes = await getPdfPageSizes(pdfBlob);
   }
 
-  const ssl = sortedSchemasList.length;
+  const ssl = schemasForUI.length;
   const psl = pageSizes.length;
-  const schemasList = (
+
+  return (
     ssl < psl
-      ? sortedSchemasList.concat(new Array(psl - ssl).fill(cloneDeep([])))
-      : sortedSchemasList.slice(0, pageSizes.length)
+      ? schemasForUI.concat(new Array(psl - ssl).fill(cloneDeep([])))
+      : schemasForUI.slice(0, pageSizes.length)
   ).map((schema, i) => {
     Object.values(schema).forEach((value) => {
       const { width, height } = pageSizes[i];
@@ -307,60 +299,54 @@ export const template2SchemasList = async (_template: Template) => {
 
     return schema;
   });
-  return schemasList;
 };
 
 export const schemasList2template = (schemasList: SchemaForUI[][], basePdf: BasePdf): Template => ({
-  schemas: cloneDeep(schemasList).map((schema) =>
-    schema.reduce((acc, cur) => {
-      const k = cur.key;
+  schemas: cloneDeep(schemasList).map((page) =>
+    page.map((schema) => {
       // @ts-ignore
-      delete cur.id;
-      // @ts-ignore
-      delete cur.key;
-      acc[k] = cur;
-
-      return acc;
-    }, {} as { [key: string]: Schema })
+      delete schema.id;
+      return schema;
+    })
   ),
   basePdf,
 });
 
-export const getUniqSchemaKey = (arg: {
-  copiedSchemaKey: string;
+export const getUniqueSchemaName = (arg: {
+  copiedSchemaName: string;
   schema: SchemaForUI[];
-  stackUniqSchemaKeys: string[];
+  stackUniqueSchemaNames: string[];
 }) => {
-  const { copiedSchemaKey, schema, stackUniqSchemaKeys } = arg;
-  const schemaKeys = schema.map((s) => s.key).concat(stackUniqSchemaKeys);
-  const tmp: { [originalKey: string]: number } = schemaKeys.reduce(
-    (acc, cur) => Object.assign(acc, { originalKey: cur, copiedNum: 0 }),
+  const { copiedSchemaName, schema, stackUniqueSchemaNames } = arg;
+  const schemaNames = schema.map((s) => s.name).concat(stackUniqueSchemaNames);
+  const tmp: { [originalName: string]: number } = schemaNames.reduce(
+    (acc, cur) => Object.assign(acc, { originalName: cur, copiedNum: 0 }),
     {}
   );
-  const extractOriginalKey = (key: string) => key.replace(/ copy$| copy [0-9]*$/, '');
-  schemaKeys
-    .filter((key) => / copy$| copy [0-9]*$/.test(key))
-    .forEach((key) => {
-      const originalKey = extractOriginalKey(key);
-      const match = key.match(/[0-9]*$/);
+  const extractOriginalName = (name: string) => name.replace(/ copy$| copy [0-9]*$/, '');
+  schemaNames
+    .filter((name) => / copy$| copy [0-9]*$/.test(name))
+    .forEach((name) => {
+      const originalName = extractOriginalName(name);
+      const match = name.match(/[0-9]*$/);
       const copiedNum = match && match[0] ? Number(match[0]) : 1;
-      if ((tmp[originalKey] ?? 0) < copiedNum) {
-        tmp[originalKey] = copiedNum;
+      if ((tmp[originalName] ?? 0) < copiedNum) {
+        tmp[originalName] = copiedNum;
       }
     });
 
-  const originalKey = extractOriginalKey(copiedSchemaKey);
-  if (tmp[originalKey]) {
-    const copiedNum = tmp[originalKey];
-    const uniqKey = `${originalKey} copy ${copiedNum + 1}`;
-    stackUniqSchemaKeys.push(uniqKey);
+  const originalName = extractOriginalName(copiedSchemaName);
+  if (tmp[originalName]) {
+    const copiedNum = tmp[originalName];
+    const uniqueName = `${originalName} copy ${copiedNum + 1}`;
+    stackUniqueSchemaNames.push(uniqueName);
 
-    return uniqKey;
+    return uniqueName;
   }
-  const uniqKey = `${copiedSchemaKey} copy`;
-  stackUniqSchemaKeys.push(uniqKey);
+  const uniqueName = `${copiedSchemaName} copy`;
+  stackUniqueSchemaNames.push(uniqueName);
 
-  return uniqKey;
+  return uniqueName;
 };
 
 export const moveCommandToChangeSchemasArg = (props: {
@@ -447,7 +433,7 @@ const handleTypeChange = (
   pluginsRegistry: Plugins
 ) => {
   if (key !== 'type') return;
-  const keysToKeep = ['id', 'key', 'type', 'position', 'required'];
+  const keysToKeep = ['id', 'name', 'type', 'position', 'required'];
   Object.keys(schema).forEach((key) => {
     if (!keysToKeep.includes(key)) {
       delete schema[key as keyof typeof schema];
@@ -491,4 +477,4 @@ export const changeSchemas = (args: {
     return acc;
   }, cloneDeep(schemas));
   commitSchemas(newSchemas);
-};
+};

package/src/hooks.ts

@@ -13,7 +13,7 @@ import {
 import {
   schemasList2template,
   uuid,
-  getUniqSchemaKey,
+  getUniqueSchemaName,
   moveCommandToChangeSchemasArg,
   pdf2Pngs,
   getPdfPageSizes,
@@ -227,10 +227,10 @@ export const useInitEvents = ({
       paste: () => {
         if (!copiedSchemas.current || copiedSchemas.current.length === 0) return;
         const schema = schemasList[pageCursor];
-        const stackUniqSchemaKeys: string[] = [];
+        const stackUniqueSchemaNames: string[] = [];
         const pasteSchemas = copiedSchemas.current.map((cs) => {
           const id = uuid();
-          const key = getUniqSchemaKey({ copiedSchemaKey: cs.key, schema, stackUniqSchemaKeys });
+          const name = getUniqueSchemaName({ copiedSchemaName: cs.name, schema, stackUniqueSchemaNames });
           const { height, width, position: p } = cs;
           const ps = pageSizes[pageCursor];
           const position = {
@@ -238,7 +238,7 @@ export const useInitEvents = ({
             y: p.y + 10 > ps.height - height ? ps.height - height : p.y + 10,
           };
 
-          return Object.assign(cloneDeep(cs), { id, key, position });
+          return Object.assign(cloneDeep(cs), { id, name, position });
         });
         commitSchemas(schemasList[pageCursor].concat(pasteSchemas));
         onEdit(pasteSchemas.map((s) => document.getElementById(s.id)!));

package/tsconfig.json

@@ -13,7 +13,7 @@
       "DOM",
       "DOM.Iterable"
     ],
-    "moduleResolution": "node",
+    "moduleResolution": "node16",
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "types": [