@pdfme/ui 1.0.0-beta.8 → 1.0.1

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" | "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/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/index.d.ts

@@ -0,0 +1,3 @@
+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

@@ -1,18 +1,13 @@
 import { SchemaForUI, Size } from '@pdfme/common';
 export declare type SidebarProps = {
-    scale: number;
     height: number;
     hoveringSchemaId: string | null;
     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/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" | "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,13 +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,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.1",
   "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!",
@@ -29,7 +29,9 @@
     "prune": "ts-prune src"
   },
   "dependencies": {
-    "@pdfme/common": "^1.0.0-beta.8",
+    "@dnd-kit/core": "^5.0.1",
+    "@dnd-kit/sortable": "^6.0.0",
+    "@pdfme/common": "^1.0.0",
     "@scena/react-guides": "^0.16.0",
     "hotkeys-js": "^3.8.7",
     "pdfjs-dist": "^2.12.313",
@@ -37,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": {

package/src/Designer.tsx

@@ -1,6 +1,6 @@
 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';
@@ -26,6 +26,7 @@ class Designer extends BaseUIClass {
   }
 
   public updateTemplate(template: Template) {
+    checkTemplate(template);
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
     this.template = cloneDeep(template);
     if (this.onChangeTemplateCallback) {

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/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

@@ -8,9 +8,13 @@ import {
   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);
@@ -106,11 +110,26 @@ export abstract class BaseUIClass {
   }
 
   public updateTemplate(template: Template) {
+    checkTemplate(template);
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+
     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();
+  }
+
   public destroy() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
     ReactDOM.unmountComponentAtNode(this.domContainer);
@@ -138,6 +157,7 @@ export abstract class PreviewUI extends BaseUIClass {
 
   public setInputs(inputs: { [key: string]: string }[]) {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    checkInputs(inputs);
     this.inputs = cloneDeep(inputs);
     this.render();
   }

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

@@ -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]);
@@ -239,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
@@ -301,7 +309,7 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
             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,10 +1,13 @@
 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);
 

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

@@ -1,13 +1,19 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
+import { SchemaForUI } from '@pdfme/common';
+import { round } from '../../../../helper';
 import { SidebarProps } from '..';
+import alignVerticalTop from '../../../../assets/icons/align-vertical-top.svg';
+import alignVerticalMiddle from '../../../../assets/icons/align-vertical-middle.svg';
+import alignVerticalBottom from '../../../../assets/icons/align-vertical-bottom.svg';
+import alignHorizontalRight from '../../../../assets/icons/align-horizontal-right.svg';
+import alignHorizontalLeft from '../../../../assets/icons/align-horizontal-left.svg';
+import alignHorizontalCenter from '../../../../assets/icons/align-horizontal-center.svg';
+import verticalDistribute from '../../../../assets/icons/vertical-distribute.svg';
+import horizontalDistribute from '../../../../assets/icons/horizontal-distribute.svg';
 
-const inputSetStyle: React.CSSProperties = {
-  marginRight: '1rem',
-  display: 'flex',
-  alignItems: 'center',
-};
+const inputSetStyle: CSSProperties = { marginRight: '1rem', display: 'flex', alignItems: 'center' };
 
-const inputStyle: React.CSSProperties = {
+const inputStyle: CSSProperties = {
   width: 70,
   border: '1px solid #767676',
   borderRadius: 2,
@@ -15,20 +21,104 @@ const inputStyle: React.CSSProperties = {
   background: 'none',
 };
 
+const buttonStyle: CSSProperties = {
+  display: 'flex',
+  background: 'none',
+  alignItems: 'center',
+  borderRadius: 2,
+  border: '1px solid rgb(118, 118, 118)',
+  cursor: 'pointer',
+};
+
 const PositionAndSizeEditor = (
-  props: Pick<SidebarProps, 'pageSize' | 'changeSchemas' | 'activeSchema'>
+  props: Pick<SidebarProps, 'pageSize' | 'schemas' | 'changeSchemas' | 'activeElements'> & {
+    activeSchema: SchemaForUI;
+  }
 ) => {
-  const { changeSchemas, activeSchema, pageSize } = props;
+  const { changeSchemas, schemas, activeSchema, activeElements, pageSize } = props;
+
+  const align = (type: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom') => {
+    const ids = activeElements.map((ae) => ae.id);
+    const ass = schemas.filter((s) => ids.includes(s.id));
+
+    const isVertical = ['left', 'center', 'right'].includes(type);
+    const tgtPos = isVertical ? 'x' : 'y';
+    const tgtSize = isVertical ? 'width' : 'height';
+    const isSingle = ass.length === 1;
+    const root = pageSize[tgtSize];
+
+    const min = isSingle ? 0 : Math.min(...ass.map((as) => as.position[tgtPos]));
+    const max = isSingle ? root : Math.max(...ass.map((as) => as.position[tgtPos] + as[tgtSize]));
+
+    let basePos = min;
+    let adjust = (_: number) => 0;
+
+    if (['center', 'middle'].includes(type)) {
+      basePos = (min + max) / 2;
+      adjust = (num: number) => num / 2;
+    } else if (['right', 'bottom'].includes(type)) {
+      basePos = max;
+      adjust = (num: number) => num;
+    }
+
+    changeSchemas(
+      ass.map((as) => ({
+        key: `position.${tgtPos}`,
+        value: round(basePos - adjust(as[tgtSize]), 2),
+        schemaId: as.id,
+      }))
+    );
+  };
+
+  const distribute = (type: 'vertical' | 'horizontal') => {
+    const ids = activeElements.map((ae) => ae.id);
+    const ass = schemas.filter((s) => ids.includes(s.id));
+
+    const isVertical = type === 'vertical';
+    const tgtPos = isVertical ? 'y' : 'x';
+    const tgtSize = isVertical ? 'height' : 'width';
+    const min = Math.min(...ass.map((as) => as.position[tgtPos]));
+    const max = Math.max(...ass.map((as) => as.position[tgtPos] + as[tgtSize]));
+
+    if (ass.length < 3) return;
+
+    const boxPos = min;
+    const boxSize = max - min;
+    const sum = ass.reduce((acc, cur) => acc + cur[tgtSize], 0);
+    const remain = boxSize - sum;
+    const unit = remain / (ass.length - 1);
+
+    let prev = 0;
+    changeSchemas(
+      ass.map((as, index) => {
+        prev += index === 0 ? 0 : ass[index - 1][tgtSize] + unit;
+        const value = round(boxPos + prev, 2);
+        return { key: `position.${tgtPos}`, value, schemaId: as.id };
+      })
+    );
+  };
+
+  const layoutBtns: { id: string; icon: any; action: () => void }[] = [
+    { id: 'left', icon: alignHorizontalLeft, action: () => align('left') },
+    { id: 'center', icon: alignHorizontalCenter, action: () => align('center') },
+    { id: 'right', icon: alignHorizontalRight, action: () => align('right') },
+    { id: 'top', icon: alignVerticalTop, action: () => align('top') },
+    { id: 'middle', icon: alignVerticalMiddle, action: () => align('middle') },
+    { id: 'bottom', icon: alignVerticalBottom, action: () => align('bottom') },
+    { id: 'vertical', icon: verticalDistribute, action: () => distribute('vertical') },
+    { id: 'horizontal', icon: horizontalDistribute, action: () => distribute('horizontal') },
+  ];
 
   return (
     <div>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
-      >
+      <div style={{ display: 'flex', alignItems: 'center', marginBottom: '0.5rem' }}>
+        {layoutBtns.map((b) => (
+          <button key={b.id} title={b.id} onClick={b.action} style={buttonStyle}>
+            <img width={15} src={b.icon} />
+          </button>
+        ))}
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
         <div style={inputSetStyle}>
           <label style={{ width: 17 }}>X</label>
           <input
@@ -60,14 +150,7 @@ const PositionAndSizeEditor = (
           <span style={{ fontSize: '0.6rem' }}>mm</span>
         </div>
       </div>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          marginTop: '0.25rem',
-        }}
-      >
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
         <div style={inputSetStyle}>
           <label style={{ width: 17 }}>W</label>
           <input

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

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import {
+  SchemaForUI,
   getFallbackFontName,
   DEFAULT_FONT_SIZE,
   DEFAULT_LINE_HEIGHT,
@@ -88,7 +89,9 @@ const SelectSet = (props: {
   );
 };
 
-const TextPropEditor = (props: Pick<SidebarProps, 'changeSchemas' | 'activeSchema'>) => {
+const TextPropEditor = (
+  props: Pick<SidebarProps, 'changeSchemas'> & { activeSchema: SchemaForUI }
+) => {
   const { changeSchemas, activeSchema } = props;
   const alignments = ['left', 'center', 'right'];
   const font = useContext(FontContext);

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

@@ -1,5 +1,5 @@
 import React, { useContext, useRef, useCallback } from 'react';
-import { schemaTypes } from '@pdfme/common';
+import { schemaTypes, SchemaForUI } from '@pdfme/common';
 import { SidebarProps } from '..';
 import { I18nContext } from '../../../../contexts';
 
@@ -12,7 +12,7 @@ const ErrorLabel = ({ isError, msg }: { isError: boolean; msg: string }) => (
 );
 
 const TypeAndKeyEditor = (
-  props: Pick<SidebarProps, 'schemas' | 'changeSchemas' | 'activeSchema'>
+  props: Pick<SidebarProps, 'schemas' | 'changeSchemas'> & { activeSchema: SchemaForUI }
 ) => {
   const { changeSchemas, activeSchema, schemas } = props;
   const i18n = useContext(I18nContext);

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

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { SchemaForUI } from '@pdfme/common';
 import { I18nContext } from '../../../../contexts';
 import Divider from '../../../Divider';
 import { SidebarProps } from '..';
@@ -8,7 +9,9 @@ import PositionAndSizeEditor from './PositionAndSizeEditor';
 import TypeAndKeyEditor from './TypeAndKeyEditor';
 
 const DetailView = (
-  props: Pick<SidebarProps, 'schemas' | 'pageSize' | 'changeSchemas' | 'activeSchema'>
+  props: Pick<SidebarProps, 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements'> & {
+    activeSchema: SchemaForUI;
+  }
 ) => {
   const { activeSchema } = props;
   const i18n = useContext(I18nContext);
@@ -16,9 +19,9 @@ const DetailView = (
   return (
     <div>
       <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
-        <p style={{ textAlign: 'center', width: '100%', fontWeight: 'bold' }}>
+        <span style={{ textAlign: 'center', width: '100%', fontWeight: 'bold' }}>
           {i18n('editField')}
-        </p>
+        </span>
       </div>
       <Divider />
       <div style={{ fontSize: '0.9rem' }}>