@pdfme/ui 1.0.0-beta.7 → 1.0.0

package/dist/types/class.d.ts

@@ -1,13 +1,13 @@
-import { Template, Size, UIProps, PreviewProps } from '@pdfme/common';
+import { Template, Size, UIProps, UIOptions, PreviewProps } from '@pdfme/common';
 export declare abstract class BaseUIClass {
     protected domContainer: HTMLElement | null;
     protected template: Template;
     protected size: Size;
-    private readonly lang;
-    private readonly font;
+    private lang;
+    private font;
     private readonly setSize;
     constructor(props: UIProps);
-    protected getI18n(): (key: "type" | "field" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsSelect" | "plsInputName" | "plsAddNewField" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "previewWarnMsg" | "previewErrMsg" | "goToFirst" | "goToPrevious" | "goToNext" | "goToEnd" | "select" | "errorOccurred") => string;
+    protected getI18n(): (key: "type" | "field" | "cancel" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsSelect" | "plsInputName" | "plsAddNewField" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "goToFirst" | "goToPrevious" | "goToNext" | "goToEnd" | "select" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string;
     protected getFont(): Record<string, {
         fallback?: boolean | undefined;
         subset?: boolean | undefined;
@@ -54,6 +54,7 @@ export declare abstract class BaseUIClass {
         basePdf: string | ArrayBuffer | Uint8Array;
     };
     updateTemplate(template: Template): void;
+    updateOptions(options: UIOptions): void;
     destroy(): void;
     protected abstract render(): void;
 }

package/dist/types/components/Designer/Main/Moveable.d.ts

@@ -25,7 +25,7 @@ declare type Props = {
     onResizeGroupEnd: ((e: OnResizeGroupEnd) => void) & (({ targets }: {
         targets: (HTMLElement | SVGElement)[];
     }) => void);
-    onClick: ((e: OnClick) => void) & (() => void);
+    onClick: (e: OnClick) => void;
 };
 declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
 export default _default;

package/dist/types/components/Designer/Sidebar/DetailView/ExampleInputEditor.d.ts

@@ -1,3 +1,6 @@
+import { SchemaForUI } from '@pdfme/common';
 import { SidebarProps } from '..';
-declare const ExampleInputEditor: (props: Pick<SidebarProps, 'changeSchemas' | 'activeSchema'>) => JSX.Element;
+declare const ExampleInputEditor: (props: Pick<SidebarProps, 'changeSchemas'> & {
+    activeSchema: SchemaForUI;
+}) => JSX.Element;
 export default ExampleInputEditor;

package/dist/types/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.d.ts

@@ -1,3 +1,6 @@
+import { SchemaForUI } from '@pdfme/common';
 import { SidebarProps } from '..';
-declare const PositionAndSizeEditor: (props: Pick<SidebarProps, 'pageSize' | 'changeSchemas' | 'activeSchema'>) => JSX.Element;
+declare const PositionAndSizeEditor: (props: Pick<SidebarProps, 'pageSize' | 'schemas' | 'changeSchemas' | 'activeElements'> & {
+    activeSchema: SchemaForUI;
+}) => JSX.Element;
 export default PositionAndSizeEditor;

package/dist/types/components/Designer/Sidebar/DetailView/TextPropEditor.d.ts

@@ -1,3 +1,6 @@
+import { SchemaForUI } from '@pdfme/common';
 import { SidebarProps } from '..';
-declare const TextPropEditor: (props: Pick<SidebarProps, 'changeSchemas' | 'activeSchema'>) => JSX.Element;
+declare const TextPropEditor: (props: Pick<SidebarProps, 'changeSchemas'> & {
+    activeSchema: SchemaForUI;
+}) => JSX.Element;
 export default TextPropEditor;

package/dist/types/components/Designer/Sidebar/DetailView/TypeAndKeyEditor.d.ts

@@ -1,3 +1,6 @@
+import { SchemaForUI } from '@pdfme/common';
 import { SidebarProps } from '..';
-declare const TypeAndKeyEditor: (props: Pick<SidebarProps, 'schemas' | 'changeSchemas' | 'activeSchema'>) => JSX.Element;
+declare const TypeAndKeyEditor: (props: Pick<SidebarProps, 'schemas' | 'changeSchemas'> & {
+    activeSchema: SchemaForUI;
+}) => JSX.Element;
 export default TypeAndKeyEditor;

package/dist/types/components/Designer/Sidebar/DetailView/index.d.ts

@@ -1,3 +1,6 @@
+import { SchemaForUI } from '@pdfme/common';
 import { SidebarProps } from '..';
-declare const DetailView: (props: Pick<SidebarProps, 'schemas' | 'pageSize' | 'changeSchemas' | 'activeSchema'>) => JSX.Element;
+declare const DetailView: (props: Pick<SidebarProps, 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements'> & {
+    activeSchema: SchemaForUI;
+}) => JSX.Element;
 export default DetailView;

package/dist/types/components/Designer/Sidebar/ListView/Item.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { DraggableSyntheticListeners } from '@dnd-kit/core';
+interface Props {
+    value: React.ReactNode;
+    style?: React.CSSProperties;
+    status?: 'is-warning' | 'is-danger';
+    title?: string;
+    dragOverlay?: boolean;
+    onClick?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    dragging?: boolean;
+    sorting?: boolean;
+    transition?: string;
+    transform?: {
+        x: number;
+        y: number;
+        scaleX: number;
+        scaleY: number;
+    } | null;
+    fadeIn?: boolean;
+    listeners?: DraggableSyntheticListeners;
+}
+declare const Item: React.MemoExoticComponent<React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>>;
+export default Item;

package/dist/types/components/Designer/Sidebar/ListView/SelectableSortableContainer.d.ts

@@ -0,0 +1,3 @@
+import { SidebarProps } from '../';
+declare const SelectableSortableContainer: (props: Pick<SidebarProps, 'schemas' | 'onEdit' | 'onSortEnd' | 'height' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId'>) => JSX.Element;
+export default SelectableSortableContainer;

package/dist/types/components/Designer/Sidebar/ListView/SelectableSortableItem.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SchemaForUI } from '@pdfme/common';
+interface Props {
+    isSelected: boolean;
+    style?: React.CSSProperties;
+    onSelect: (id: string, isShiftSelect: boolean) => void;
+    onEdit: (id: string) => void;
+    schema: SchemaForUI;
+    schemas: SchemaForUI[];
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+}
+declare const SelectableSortableItem: ({ isSelected, style, onSelect, onEdit, schema, schemas, onMouseEnter, onMouseLeave, }: Props) => JSX.Element;
+export default SelectableSortableItem;

package/dist/types/components/Designer/Sidebar/{ListView.d.ts → ListView/index.d.ts}

@@ -1,3 +1,3 @@
-import { SidebarProps } from '.';
-declare const ListView: (props: Pick<SidebarProps, 'schemas' | 'onSortEnd' | 'onEdit' | 'size' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId'>) => JSX.Element;
+import { SidebarProps } from '..';
+declare const ListView: (props: Pick<SidebarProps, 'schemas' | 'onSortEnd' | 'onEdit' | 'size' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId' | 'changeSchemas'>) => JSX.Element;
 export default ListView;

package/dist/types/components/Designer/Sidebar/index.d.ts

@@ -5,13 +5,9 @@ export declare type SidebarProps = {
     onChangeHoveringSchemaId: (id: string | null) => void;
     size: Size;
     pageSize: Size;
-    activeElement: HTMLElement | null;
-    activeSchema: SchemaForUI;
+    activeElements: HTMLElement[];
     schemas: SchemaForUI[];
-    onSortEnd: ({ oldIndex, newIndex }: {
-        oldIndex: number;
-        newIndex: number;
-    }) => void;
+    onSortEnd: (sortedSchemas: SchemaForUI[]) => void;
     onEdit: (id: string) => void;
     onEditEnd: () => void;
     changeSchemas: (objs: {

package/dist/types/constants.d.ts

@@ -3,3 +3,4 @@ export declare const DESTROYED_ERR_MSG = "this instance is already destroyed";
 export declare const ZOOM = 3.7795275591;
 export declare const SELECTABLE_CLASSNAME = "selectable";
 export declare const RULER_HEIGHT = 30;
+export declare const SIDEBAR_WIDTH = 300;

package/dist/types/contexts.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const I18nContext: import("react").Context<(key: "type" | "field" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsSelect" | "plsInputName" | "plsAddNewField" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "previewWarnMsg" | "previewErrMsg" | "goToFirst" | "goToPrevious" | "goToNext" | "goToEnd" | "select" | "errorOccurred") => string>;
+export declare const I18nContext: import("react").Context<(key: "type" | "field" | "cancel" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsSelect" | "plsInputName" | "plsAddNewField" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "goToFirst" | "goToPrevious" | "goToNext" | "goToEnd" | "select" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string>;
 export declare const FontContext: import("react").Context<Record<string, {
     fallback?: boolean | undefined;
     subset?: boolean | undefined;

package/dist/types/helper.d.ts

@@ -3,7 +3,6 @@ export declare const uuid: () => string;
 export declare const set: <T extends object>(obj: T, path: string | string[], value: any) => void;
 export declare const debounce: <T extends Function>(cb: T, wait?: number) => T;
 export declare const round: (number: number, precision: number) => number;
-export declare const arrayMove: <T>(array: T[], from: number, to: number) => T[];
 export declare const cloneDeep: <T>(value: T) => T;
 export declare const flatten: <T>(arr: T[][]) => T[];
 declare const esc = "esc";
@@ -16,6 +15,7 @@ export declare const initShortCuts: (arg: {
     redo: () => void;
     undo: () => void;
     save: () => void;
+    selectAll: () => void;
 }) => void;
 export declare const destroyShortCuts: () => void;
 export declare const readFiles: (files: FileList | null, type: 'text' | 'dataURL' | 'arrayBuffer') => Promise<string | ArrayBuffer>;

package/dist/types/hooks.d.ts

@@ -23,4 +23,5 @@ declare type ScrollPageCursorProps = {
     onChangePageCursor: (page: number) => void;
 };
 export declare const useScrollPageCursor: ({ rootRef, pageSizes, scale, pageCursor, onChangePageCursor, }: ScrollPageCursorProps) => void;
+export declare const useMountStatus: () => boolean;
 export {};

package/dist/types/i18n.d.ts

@@ -1,6 +1,7 @@
 import { Lang } from '@pdfme/common';
 declare type DictEn = typeof dictEn;
 declare const dictEn: {
+    cancel: string;
     field: string;
     fieldName: string;
     require: string;
@@ -17,14 +18,15 @@ declare const dictEn: {
     addNewField: string;
     editField: string;
     type: string;
-    previewWarnMsg: string;
-    previewErrMsg: string;
     goToFirst: string;
     goToPrevious: string;
     goToNext: string;
     goToEnd: string;
     select: string;
     errorOccurred: string;
+    errorBulkUpdateFieldName: string;
+    commitBulkUpdateFieldName: string;
+    bulkUpdateFieldName: string;
 };
 export declare const curriedI18n: (lang: Lang) => (key: keyof DictEn) => string;
 export {};

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@pdfme/ui",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0",
   "author": "hand-dot",
   "license": "MIT",
   "description": "TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!",
   "homepage": "https://pdfme.com",
-  "repository": "git@github.com:pdfme/pdfme.git",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:pdfme/pdfme.git"
+  },
   "bugs": {
     "url": "https://github.com/pdfme/pdfme/issues"
   },
@@ -16,7 +19,7 @@
     "node": ">=14"
   },
   "scripts": {
-    "develop": "webpack-dev-server --mode development",
+    "develop": "webpack --watch --mode development",
     "build": "NODE_ENV=production webpack --mode production",
     "clean": "rimraf dist",
     "lint": "tsc --noEmit",
@@ -26,7 +29,9 @@
     "prune": "ts-prune src"
   },
   "dependencies": {
-    "@pdfme/common": "^1.0.0-beta.7",
+    "@dnd-kit/core": "^5.0.1",
+    "@dnd-kit/sortable": "^6.0.0",
+    "@pdfme/common": "^1.0.0-beta.11",
     "@scena/react-guides": "^0.16.0",
     "hotkeys-js": "^3.8.7",
     "pdfjs-dist": "^2.12.313",
@@ -34,7 +39,6 @@
     "react-dom": "^17.0.2",
     "react-moveable": "^0.30.3",
     "react-selecto": "^1.12.0",
-    "react-sortable-hoc": "^2.0.0",
     "worker-loader": "^3.0.8"
   },
   "devDependencies": {
@@ -46,7 +50,6 @@
     "@types/react-dom": "^17.0.9",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "html-webpack-plugin": "^5.3.2",
     "jest-canvas-mock": "^2.3.1",
     "process": "^0.11.10"
   },
@@ -80,4 +83,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/Designer.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Template, DesignerProps, checkDesignerProps } from '@pdfme/common';
+import { Template, DesignerProps, checkDesignerProps, checkTemplate } from '@pdfme/common';
 import { BaseUIClass } from './class';
 import { DESTROYED_ERR_MSG } from './constants';
 import { I18nContext, FontContext } from './contexts';
 import DesignerComponent from './components/Designer';
+import { cloneDeep } from './helper';
 
 class Designer extends BaseUIClass {
   private onSaveTemplateCallback?: (template: Template) => void;
@@ -25,8 +26,9 @@ class Designer extends BaseUIClass {
   }
 
   public updateTemplate(template: Template) {
+    checkTemplate(template);
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
-    this.template = template;
+    this.template = cloneDeep(template);
     if (this.onChangeTemplateCallback) {
       this.onChangeTemplateCallback(template);
     }

package/src/Form.tsx

@@ -11,6 +11,7 @@ class Form extends PreviewUI {
 
   constructor(props: PreviewProps) {
     super(props);
+    this.render();
   }
 
   public onChangeInput(cb: (arg: { index: number; value: string; key: string }) => void) {

package/src/Viewer.tsx

@@ -9,6 +9,7 @@ import Preview from './components/Preview';
 class Viewer extends PreviewUI {
   constructor(props: PreviewProps) {
     super(props);
+    this.render();
   }
 
   protected render() {

package/src/assets/icons/align-horizontal-center.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><polygon points="11,2 13,2 13,7 21,7 21,10 13,10 13,14 18,14 18,17 13,17 13,22 11,22 11,17 6,17 6,14 11,14 11,10 3,10 3,7 11,7"/></svg>

package/src/assets/icons/align-horizontal-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M4,22H2V2h2V22z M22,7H6v3h16V7z M16,14H6v3h10V14z"/></svg>

package/src/assets/icons/align-horizontal-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M20,2h2v20h-2V2z M2,10h16V7H2V10z M8,17h10v-3H8V17z"/></svg>

package/src/assets/icons/align-vertical-bottom.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M22,22H2v-2h20V22z M10,2H7v16h3V2z M17,8h-3v10h3V8z"/></svg>

package/src/assets/icons/align-vertical-middle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><polygon points="22,11 17,11 17,6 14,6 14,11 10,11 10,3 7,3 7,11 1.84,11 1.84,13 7,13 7,21 10,21 10,13 14,13 14,18 17,18 17,13 22,13"/></svg>

package/src/assets/icons/align-vertical-top.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M22,2v2H2V2H22z M7,22h3V6H7V22z M14,16h3V6h-3V16z"/></svg>

package/src/assets/icons/close.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+    <path d="M0 0h24v24H0V0z" fill="none" />
+    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+</svg>

package/src/assets/icons/horizontal-distribute.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M4,22H2V2h2V22z M22,2h-2v20h2V2z M13.5,7h-3v10h3V7z"/></svg>

package/src/assets/icons/vertical-distribute.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M22,2v2H2V2H22z M7,10.5v3h10v-3H7z M2,20v2h20v-2H2z"/></svg>

package/src/class.ts

@@ -1,16 +1,20 @@
 import ReactDOM from 'react-dom';
 import { curriedI18n } from './i18n';
 import { DESTROYED_ERR_MSG, DEFAULT_LANG } from './constants';
-import { debounce, flatten } from './helper';
+import { debounce, flatten, cloneDeep } from './helper';
 import {
   Template,
   Size,
   Lang,
   Font,
   UIProps,
+  UIOptions,
   PreviewProps,
   getDefaultFont,
   checkUIProps,
+  checkTemplate,
+  checkInputs,
+  checkUIOptions,
   checkPreviewProps,
 } from '@pdfme/common';
 
@@ -57,9 +61,9 @@ export abstract class BaseUIClass {
 
   protected size!: Size;
 
-  private readonly lang: Lang = DEFAULT_LANG;
+  private lang: Lang = DEFAULT_LANG;
 
-  private readonly font: Font = getDefaultFont();
+  private font: Font = getDefaultFont();
 
   private readonly setSize = debounce(() => {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
@@ -76,7 +80,7 @@ export abstract class BaseUIClass {
     const { domContainer, template, options } = props;
     const { lang, font } = options || {};
     this.domContainer = domContainer;
-    this.template = generateColumnsAndSampledataIfNeeded(template);
+    this.template = generateColumnsAndSampledataIfNeeded(cloneDeep(template));
     this.size = {
       height: this.domContainer.clientHeight || window.innerHeight,
       width: this.domContainer.clientWidth || window.innerWidth,
@@ -106,8 +110,23 @@ export abstract class BaseUIClass {
   }
 
   public updateTemplate(template: Template) {
+    checkTemplate(template);
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
-    this.template = template;
+
+    this.template = cloneDeep(template);
+    this.render();
+  }
+
+  public updateOptions(options: UIOptions) {
+    checkUIOptions(options);
+    const { lang, font } = options || {};
+
+    if (lang) {
+      this.lang = lang;
+    }
+    if (font) {
+      this.font = font;
+    }
     this.render();
   }
 
@@ -127,8 +146,7 @@ export abstract class PreviewUI extends BaseUIClass {
     super(props);
     checkPreviewProps(props);
 
-    this.inputs = props.inputs;
-    this.render();
+    this.inputs = cloneDeep(props.inputs);
   }
 
   public getInputs() {
@@ -139,7 +157,8 @@ export abstract class PreviewUI extends BaseUIClass {
 
   public setInputs(inputs: { [key: string]: string }[]) {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
-    this.inputs = inputs;
+    checkInputs(inputs);
+    this.inputs = cloneDeep(inputs);
     this.render();
   }
 

package/src/components/Designer/Main/Moveable.tsx

@@ -25,7 +25,7 @@ type Props = {
     (({ target }: { target: HTMLElement | SVGElement }) => void);
   onResizeGroupEnd: ((e: OnResizeGroupEnd) => void) &
     (({ targets }: { targets: (HTMLElement | SVGElement)[] }) => void);
-  onClick: ((e: OnClick) => void) & (() => void);
+  onClick: (e: OnClick) => void;
 };
 
 const _Moveable = (

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

@@ -7,7 +7,7 @@ import React, {
   forwardRef,
   useCallback,
 } from 'react';
-import { OnDrag, OnResize } from 'react-moveable';
+import { OnDrag, OnResize, OnClick } from 'react-moveable';
 import { SchemaForUI, Size } from '@pdfme/common';
 import { ZOOM, RULER_HEIGHT } from '../../../constants';
 import { usePrevious } from '../../../hooks';
@@ -39,7 +39,7 @@ const DeleteButton = ({ activeElements: aes }: { activeElements: HTMLElement[] }
         color: 'white',
         border: 'none',
         fontWeight: 'bold',
-        borderRadius: 3,
+        borderRadius: 2,
         background: 'rgb(68, 170, 255)',
       }}
     >
@@ -121,16 +121,15 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
   }, [initEvents, destroyEvents]);
 
   useEffect(() => {
+    moveable.current?.updateRect();
     if (prevSchemas === null) {
-      moveable.current?.updateRect();
-
       return;
     }
 
-    const prevSchemaKeys = Object.keys(prevSchemas[pageCursor] || {});
-    const schemaKeys = Object.keys(schemasList[pageCursor] || {});
+    const prevSchemaKeys = JSON.stringify(prevSchemas[pageCursor] || {});
+    const schemaKeys = JSON.stringify(schemasList[pageCursor] || {});
 
-    if (prevSchemaKeys.join() === schemaKeys.join()) {
+    if (prevSchemaKeys === schemaKeys) {
       moveable.current?.updateRect();
     }
   }, [pageCursor, schemasList, prevSchemas]);
@@ -201,15 +200,13 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
   const getGuideLines = (guides: GuidesInterface[], index: number) =>
     guides[index] && guides[index].getGuides().map((g) => g * ZOOM);
 
-  const onClickMoveable = () => {
+  const onClickMoveable = (e: OnClick) => {
+    e.inputEvent.stopPropagation();
     setEditing(true);
     const ic = inputRef.current;
     if (!ic) return;
-    ic.disabled = false;
     ic.focus();
-    if (ic.type === 'file') {
-      ic.click();
-    } else {
+    if (ic.type !== 'file') {
       ic.setSelectionRange(ic.value.length, ic.value.length);
     }
   };
@@ -241,8 +238,17 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
             removeSchemas(activeElements.map((ae) => ae.id));
           }
         }}
-        onSelect={(e) => {
-          onEdit(e.selected as HTMLElement[]);
+        onSelect={({ added, removed, selected, inputEvent }) => {
+          const isClick = inputEvent.type === 'mousedown';
+          let newActiveElements: HTMLElement[] = isClick ? (selected as HTMLElement[]) : [];
+          if (!isClick && added.length > 0) {
+            newActiveElements = activeElements.concat(added as HTMLElement[]);
+          }
+          if (!isClick && removed.length > 0) {
+            newActiveElements = activeElements.filter((ae) => !removed.includes(ae));
+          }
+
+          onEdit(newActiveElements);
         }}
       />
       <Paper
@@ -298,12 +304,12 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
         )}
         renderSchema={({ schema }) => (
           <SchemaUI
-            key={schema.key}
+            key={schema.id}
             schema={schema}
             onChangeHoveringSchemaId={onChangeHoveringSchemaId}
             editable={editing && activeElements.map((ae) => ae.id).includes(schema.id)}
             onChange={(value) => changeSchemas([{ key: 'data', value, schemaId: schema.id }])}
-            border={hoveringSchemaId === schema.id ? '2px solid #18a0fb' : '1px dashed #4af'}
+            border={hoveringSchemaId === schema.id ? '1px solid #18a0fb' : '1px dashed #4af'}
             ref={inputRef}
           />
         )}

package/src/components/Designer/Sidebar/DetailView/ExampleInputEditor.tsx

@@ -1,33 +1,52 @@
 import React, { useContext } from 'react';
+import { SchemaForUI } from '@pdfme/common';
 import { readFiles } from '../../../../helper';
 import { I18nContext } from '../../../../contexts';
 import { SidebarProps } from '..';
+import closeIcon from '../../../../assets/icons/close.svg';
 
-const ExampleInputEditor = (props: Pick<SidebarProps, 'changeSchemas' | 'activeSchema'>) => {
+const ExampleInputEditor = (
+  props: Pick<SidebarProps, 'changeSchemas'> & { activeSchema: SchemaForUI }
+) => {
   const { changeSchemas, activeSchema } = props;
   const i18n = useContext(I18nContext);
 
   return (
     <div>
-      <label style={{ marginBottom: 0 }}>{i18n('inputExample')}</label>
+      <label>{i18n('inputExample')}</label>
       {activeSchema.type === 'image' ? (
-        <div style={{ position: 'relative', textAlign: 'center' }}>
+        <div style={{ position: 'relative' }}>
           {activeSchema.data ? (
             <div style={{ margin: '0 auto' }}>
               <button
-                style={{ position: 'absolute', top: 0, left: 0 }}
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  color: '#333',
+                  background: '#f2f2f2',
+                  cursor: 'pointer',
+                  borderRadius: 2,
+                  border: '1px solid #767676',
+                  height: 20,
+                  width: 20,
+                }}
                 aria-label="close"
                 onClick={() =>
                   changeSchemas([{ key: 'data', value: '', schemaId: activeSchema.id }])
                 }
               >
-                x
+                <img src={closeIcon} alt="Close icon" width={10} />
               </button>
               <img style={{ maxHeight: 180 }} src={activeSchema.data} alt="Input Example" />
             </div>
           ) : (
             <label>
               <input
+                style={{ color: '#333', background: 'none' }}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                   const { files } = e.target;
                   readFiles(files, 'dataURL').then((result) => {
@@ -50,7 +69,10 @@ const ExampleInputEditor = (props: Pick<SidebarProps, 'changeSchemas' | 'activeS
           }
           style={{
             width: '100%',
-            backgroundColor: activeSchema.data ? '#fff' : '#ffa19b',
+            border: '1px solid #767676',
+            borderRadius: 2,
+            color: '#333',
+            background: activeSchema.data ? 'none' : '#ffa19b',
           }}
           value={activeSchema.data}
         />