@pdfme/ui 3.4.3 → 4.0.0

package/dist/types/class.d.ts

@@ -10,19 +10,57 @@ export declare abstract class BaseUIClass {
     private readonly setSize;
     resizeObserver: ResizeObserver;
     constructor(props: UIProps);
-    protected getLang(): "en" | "th" | "ja" | "ar" | "pl" | "it" | "de";
+    protected getLang(): "en" | "th" | "pl" | "ja" | "ar" | "it" | "de" | "es" | "fr";
     protected getFont(): Record<string, {
-        data: (string | Uint8Array | ArrayBuffer) & (string | Uint8Array | ArrayBuffer | undefined);
+        data: (string | ArrayBuffer | Uint8Array) & (string | ArrayBuffer | Uint8Array | undefined);
         fallback?: boolean | undefined;
         subset?: boolean | undefined;
     }>;
     protected getPluginsRegistry(): Plugins;
     protected getOptions(): {};
-    getTemplate(): {
-        schemas: Record<string, import("zod").objectOutputType<{
+    getTemplate(): import("zod").objectOutputType<{
+        schemas: import("zod").ZodArray<import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodObject<{
             type: import("zod").ZodString;
+            icon: import("zod").ZodOptional<import("zod").ZodString>;
+            content: import("zod").ZodOptional<import("zod").ZodString>;
+            position: import("zod").ZodObject<{
+                x: import("zod").ZodNumber;
+                y: import("zod").ZodNumber;
+            }, "strip", import("zod").ZodTypeAny, {
+                x: number;
+                y: number;
+            }, {
+                x: number;
+                y: number;
+            }>;
+            width: import("zod").ZodNumber;
+            height: import("zod").ZodNumber;
+            rotate: import("zod").ZodOptional<import("zod").ZodNumber>;
+            opacity: import("zod").ZodOptional<import("zod").ZodNumber>;
+            readOnly: import("zod").ZodOptional<import("zod").ZodBoolean>;
+        }, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{
+            type: import("zod").ZodString;
+            icon: import("zod").ZodOptional<import("zod").ZodString>;
+            content: import("zod").ZodOptional<import("zod").ZodString>;
+            position: import("zod").ZodObject<{
+                x: import("zod").ZodNumber;
+                y: import("zod").ZodNumber;
+            }, "strip", import("zod").ZodTypeAny, {
+                x: number;
+                y: number;
+            }, {
+                x: number;
+                y: number;
+            }>;
+            width: import("zod").ZodNumber;
+            height: import("zod").ZodNumber;
+            rotate: import("zod").ZodOptional<import("zod").ZodNumber>;
+            opacity: import("zod").ZodOptional<import("zod").ZodNumber>;
             readOnly: import("zod").ZodOptional<import("zod").ZodBoolean>;
-            readOnlyValue: import("zod").ZodOptional<import("zod").ZodString>;
+        }, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{
+            type: import("zod").ZodString;
+            icon: import("zod").ZodOptional<import("zod").ZodString>;
+            content: import("zod").ZodOptional<import("zod").ZodString>;
             position: import("zod").ZodObject<{
                 x: import("zod").ZodNumber;
                 y: import("zod").ZodNumber;
@@ -37,11 +75,23 @@ export declare abstract class BaseUIClass {
             height: import("zod").ZodNumber;
             rotate: import("zod").ZodOptional<import("zod").ZodNumber>;
             opacity: import("zod").ZodOptional<import("zod").ZodNumber>;
-        }, import("zod").ZodTypeAny, "passthrough">>[];
-        basePdf: (string | Uint8Array | ArrayBuffer) & (string | Uint8Array | ArrayBuffer | undefined);
-        sampledata?: Record<string, string>[] | undefined;
-        columns?: string[] | undefined;
-    };
+            readOnly: import("zod").ZodOptional<import("zod").ZodBoolean>;
+        }, import("zod").ZodTypeAny, "passthrough">>>, "many">;
+        basePdf: 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;
+            padding: import("zod").ZodTuple<[import("zod").ZodNumber, import("zod").ZodNumber, import("zod").ZodNumber, import("zod").ZodNumber], null>;
+        }, "strip", import("zod").ZodTypeAny, {
+            width: number;
+            height: number;
+            padding: [number, number, number, number];
+        }, {
+            width: number;
+            height: number;
+            padding: [number, number, number, number];
+        }>]>;
+        pdfmeVersion: import("zod").ZodOptional<import("zod").ZodString>;
+    }, import("zod").ZodTypeAny, "passthrough">;
     updateTemplate(template: Template): void;
     updateOptions(options: UIOptions): void;
     destroy(): void;

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

@@ -7,5 +7,5 @@ type Props = {
     plugins: Plugins;
     options: UIOptions;
 };
-declare const _default: ({ children, lang, font, plugins, options }: Props) => React.JSX.Element;
-export default _default;
+declare const AppContextProvider: ({ children, lang, font, plugins, options }: Props) => React.JSX.Element;
+export default AppContextProvider;

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

@@ -7,6 +7,8 @@ type CtlBarProps = {
     setPageCursor: (page: number) => void;
     zoomLevel: number;
     setZoomLevel: (zoom: number) => void;
+    addPageAfter?: () => void;
+    removePage?: () => void;
 };
 declare const CtlBar: (props: CtlBarProps) => React.JSX.Element;
 export default CtlBar;

package/dist/types/components/Designer/Canvas/Padding.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { BasePdf } from '@pdfme/common';
+declare const Padding: ({ basePdf }: {
+    basePdf: BasePdf;
+}) => React.JSX.Element;
+export default Padding;

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

@@ -1,6 +1,7 @@
 import React, { MutableRefObject } from 'react';
-import { SchemaForUI, Size, ChangeSchemas } from '@pdfme/common';
+import { SchemaForUI, Size, ChangeSchemas, BasePdf } from '@pdfme/common';
 interface Props {
+    basePdf: BasePdf;
     height: number;
     hoveringSchemaId: string | null;
     onChangeHoveringSchemaId: (id: string | null) => void;

package/dist/types/components/Designer/LeftSidebar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { BasePdf } from '@pdfme/common';
+declare const LeftSidebar: ({ height, scale, basePdf }: {
+    height: number;
+    scale: number;
+    basePdf: BasePdf;
+}) => React.JSX.Element;
+export default LeftSidebar;

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Template, DesignerProps, Size } from '@pdfme/common';
 declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplate, onPageCursorChange, }: Omit<DesignerProps, "domContainer"> & {
-    onSaveTemplate: (t: Template) => void;
     size: Size;
+    onSaveTemplate: (t: Template) => void;
+    onChangeTemplate: (t: Template) => void;
 } & {
     onChangeTemplate: (t: Template) => void;
     onPageCursorChange: (newPageCursor: number) => void;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { PreviewProps, Size } from '@pdfme/common';
+import { PreviewProps, Size } from '@pdfme/common';
 declare const Preview: ({ template, inputs, size, onChangeInput, }: Omit<PreviewProps, "domContainer"> & {
     onChangeInput?: ((args: {
         index: number;

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

@@ -1,8 +1,9 @@
 import React from 'react';
-import { UIRenderProps, SchemaForUI, Schema } from '@pdfme/common';
-type RendererProps = Omit<UIRenderProps<Schema>, 'value' | 'schema' | 'onChange' | 'rootElement' | 'options' | 'theme' | 'i18n' | 'pdfJs' | '_cache'> & {
+import { UIRenderProps, SchemaForUI, BasePdf, Schema } from '@pdfme/common';
+type RendererProps = Omit<UIRenderProps<Schema>, 'schema' | 'rootElement' | 'options' | 'theme' | 'i18n' | 'pdfJs' | '_cache'> & {
+    basePdf: BasePdf;
     schema: SchemaForUI;
-    onChange: (value: string) => void;
+    value: string;
     outline: string;
     onChangeHoveringSchemaId?: (id: string | null) => void;
     scale: number;

package/dist/types/constants.d.ts

@@ -3,5 +3,5 @@ export declare const DESTROYED_ERR_MSG = "[@pdfme/ui] this instance is already d
 export declare const SELECTABLE_CLASSNAME = "selectable";
 export declare const RULER_HEIGHT = 30;
 export declare const PAGE_GAP = 10;
-export declare const SIDEBAR_WIDTH = 350;
+export declare const RIGHT_SIDEBAR_WIDTH = 400;
 export declare const BACKGROUND_COLOR = "rgb(74, 74, 74)";

package/dist/types/contexts.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Plugins, UIOptions } from '@pdfme/common';
-export declare const I18nContext: import("react").Context<(key: "height" | "width" | "type" | "rotate" | "opacity" | "cancel" | "field" | "fieldName" | "align" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "hexColorPrompt" | "schemas.color" | "schemas.borderWidth" | "schemas.borderColor" | "schemas.textColor" | "schemas.bgColor" | "schemas.horizontal" | "schemas.vertical" | "schemas.left" | "schemas.center" | "schemas.right" | "schemas.top" | "schemas.middle" | "schemas.bottom" | "schemas.text.fontName" | "schemas.text.size" | "schemas.text.spacing" | "schemas.text.textAlign" | "schemas.text.verticalAlign" | "schemas.text.lineHeight" | "schemas.text.min" | "schemas.text.max" | "schemas.text.fit" | "schemas.text.dynamicFontSize" | "schemas.barcodes.barColor" | "schemas.barcodes.includetext", dict?: {
+export declare const I18nContext: import("react").Context<(key: "type" | "width" | "height" | "rotate" | "opacity" | "cancel" | "field" | "fieldName" | "align" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "addPageAfter" | "removePage" | "removePageConfirm" | "hexColorPrompt" | "schemas.color" | "schemas.borderWidth" | "schemas.borderColor" | "schemas.backgroundColor" | "schemas.textColor" | "schemas.bgColor" | "schemas.horizontal" | "schemas.vertical" | "schemas.left" | "schemas.center" | "schemas.right" | "schemas.top" | "schemas.middle" | "schemas.bottom" | "schemas.padding" | "schemas.text.fontName" | "schemas.text.size" | "schemas.text.spacing" | "schemas.text.textAlign" | "schemas.text.verticalAlign" | "schemas.text.lineHeight" | "schemas.text.min" | "schemas.text.max" | "schemas.text.fit" | "schemas.text.dynamicFontSize" | "schemas.barcodes.barColor" | "schemas.barcodes.includetext" | "schemas.table.alternateBackgroundColor" | "schemas.table.tableStyle" | "schemas.table.headStyle" | "schemas.table.bodyStyle" | "schemas.table.columnStyle", dict?: {
     cancel: string;
     field: string;
     fieldName: string;
@@ -15,17 +15,20 @@ export declare const I18nContext: import("react").Context<(key: "height" | "widt
     notUniq: string;
     noKeyName: string;
     fieldsList: string;
-    addNewField: string;
     editField: string;
     type: string;
     errorOccurred: string;
     errorBulkUpdateFieldName: string;
     commitBulkUpdateFieldName: string;
     bulkUpdateFieldName: string;
+    addPageAfter: string;
+    removePage: string;
+    removePageConfirm: string;
     hexColorPrompt: string;
     'schemas.color': string;
     'schemas.borderWidth': string;
     'schemas.borderColor': string;
+    'schemas.backgroundColor': string;
     'schemas.textColor': string;
     'schemas.bgColor': string;
     'schemas.horizontal': string;
@@ -36,6 +39,7 @@ export declare const I18nContext: import("react").Context<(key: "height" | "widt
     'schemas.top': string;
     'schemas.middle': string;
     'schemas.bottom': string;
+    'schemas.padding': string;
     'schemas.text.fontName': string;
     'schemas.text.size': string;
     'schemas.text.spacing': string;
@@ -48,9 +52,14 @@ export declare const I18nContext: import("react").Context<(key: "height" | "widt
     'schemas.text.dynamicFontSize': string;
     'schemas.barcodes.barColor': string;
     'schemas.barcodes.includetext': string;
+    'schemas.table.alternateBackgroundColor': string;
+    'schemas.table.tableStyle': string;
+    'schemas.table.headStyle': string;
+    'schemas.table.bodyStyle': string;
+    'schemas.table.columnStyle': string;
 } | undefined) => string>;
 export declare const FontContext: import("react").Context<Record<string, {
-    data: (string | Uint8Array | ArrayBuffer) & (string | Uint8Array | ArrayBuffer | undefined);
+    data: (string | ArrayBuffer | Uint8Array) & (string | ArrayBuffer | Uint8Array | undefined);
     fallback?: boolean | undefined;
     subset?: boolean | undefined;
 }>>;

package/dist/types/helper.d.ts

@@ -1,4 +1,4 @@
-import { Template, SchemaForUI, Size } from '@pdfme/common';
+import { Template, BasePdf, SchemaForUI, Size, Plugins } from '@pdfme/common';
 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;
@@ -24,7 +24,7 @@ export declare const getPdfPageSizes: (pdfBlob: Blob) => Promise<{
 }[]>;
 export declare const pdf2Pngs: (pdfBlob: Blob, width: number) => Promise<string[]>;
 export declare const b64toBlob: (base64: string) => Blob;
-export declare const templateSchemas2SchemasList: (_template: Template) => Promise<{
+export declare const template2SchemasList: (_template: Template) => Promise<{
     width: number;
     height: number;
     type: string;
@@ -32,39 +32,15 @@ export declare const templateSchemas2SchemasList: (_template: Template) => Promi
         x: number;
         y: number;
     };
-    data: string;
     id: string;
     key: string;
     opacity?: number | undefined;
     rotate?: number | undefined;
+    icon?: string | undefined;
+    content?: string | undefined;
     readOnly?: boolean | undefined;
-    readOnlyValue?: string | undefined;
 }[][]>;
-export declare const generateColumnsAndSampledataIfNeeded: (template: Template) => {
-    schemas: Record<string, import("zod").objectOutputType<{
-        type: import("zod").ZodString;
-        readOnly: import("zod").ZodOptional<import("zod").ZodBoolean>;
-        readOnlyValue: import("zod").ZodOptional<import("zod").ZodString>;
-        position: import("zod").ZodObject<{
-            x: import("zod").ZodNumber;
-            y: import("zod").ZodNumber;
-        }, "strip", import("zod").ZodTypeAny, {
-            x: number;
-            y: number;
-        }, {
-            x: number;
-            y: number;
-        }>;
-        width: import("zod").ZodNumber;
-        height: import("zod").ZodNumber;
-        rotate: import("zod").ZodOptional<import("zod").ZodNumber>;
-        opacity: import("zod").ZodOptional<import("zod").ZodNumber>;
-    }, import("zod").ZodTypeAny, "passthrough">>[];
-    basePdf: (string | Uint8Array | ArrayBuffer) & (string | Uint8Array | ArrayBuffer | undefined);
-    sampledata?: Record<string, string>[] | undefined;
-    columns?: string[] | undefined;
-};
-export declare const fmtTemplate: (template: Template, schemasList: SchemaForUI[][]) => Template;
+export declare const schemasList2template: (schemasList: SchemaForUI[][], basePdf: BasePdf) => Template;
 export declare const getUniqSchemaKey: (arg: {
     copiedSchemaKey: string;
     schema: SchemaForUI[];
@@ -80,9 +56,21 @@ export declare const moveCommandToChangeSchemasArg: (props: {
     value: number;
     schemaId: string;
 }[];
-export declare const getPagesScrollTopByIndex: (pageSizes: {
-    width: number;
-    height: number;
-}[], index: number, scale: number) => number;
+export declare const getPagesScrollTopByIndex: (pageSizes: Size[], index: number, scale: number) => number;
 export declare const getSidebarContentHeight: (sidebarHeight: number) => number;
+export declare const changeSchemas: (args: {
+    objs: {
+        key: string;
+        value: any;
+        schemaId: string;
+    }[];
+    schemas: SchemaForUI[];
+    basePdf: BasePdf;
+    pluginsRegistry: Plugins;
+    pageSize: {
+        width: number;
+        height: number;
+    };
+    commitSchemas: (newSchemas: SchemaForUI[]) => void;
+}) => void;
 export {};

package/dist/types/hooks.d.ts

@@ -14,6 +14,7 @@ export declare const useUIPreProcessor: ({ template, size, zoomLevel }: UIPrePro
     }[];
     scale: number;
     error: Error | null;
+    refresh: (template: Template) => Promise<void>;
 };
 type ScrollPageCursorProps = {
     ref: RefObject<HTMLDivElement>;

package/dist/types/types.d.ts

@@ -11,7 +11,6 @@ export type SidebarProps = {
     onEdit: (id: string) => void;
     onEditEnd: () => void;
     changeSchemas: ChangeSchemas;
-    addSchema: () => void;
     deselectSchema: () => void;
     sidebarOpen: boolean;
     setSidebarOpen: (sidebarOpen: boolean) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "3.4.3",
+  "version": "4.0.0",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/Designer.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Template, DesignerProps, checkDesignerProps, checkTemplate } from '@pdfme/common';
+import {
+  Template,
+  DesignerProps,
+  checkDesignerProps,
+  checkTemplate,
+  PDFME_VERSION,
+} from '@pdfme/common';
 import { BaseUIClass } from './class';
 import { DESTROYED_ERR_MSG } from './constants.js';
 import DesignerComponent from './components/Designer/index';
@@ -15,8 +21,6 @@ class Designer extends BaseUIClass {
   constructor(props: DesignerProps) {
     super(props);
     checkDesignerProps(props);
-
-    this.render();
   }
 
   public saveTemplate() {
@@ -67,6 +71,7 @@ class Designer extends BaseUIClass {
           }}
           onChangeTemplate={(template) => {
             this.template = template;
+            this.template.pdfmeVersion = PDFME_VERSION;
             if (this.onChangeTemplateCallback) {
               this.onChangeTemplateCallback(template);
             }

package/src/Form.tsx

@@ -11,7 +11,6 @@ class Form extends PreviewUI {
 
   constructor(props: PreviewProps) {
     super(props);
-    this.render();
   }
 
   public onChangeInput(cb: (arg: { index: number; value: string; key: string }) => void) {
@@ -36,8 +35,12 @@ class Form extends PreviewUI {
             if (this.onChangeInputCallback) {
               this.onChangeInputCallback({ index, value, key });
             }
-            this.inputs[index][key] = value;
-            this.render();
+            if (this.inputs && this.inputs[index]) {
+              if (this.inputs[index][key] !== value) {
+                this.inputs[index][key] = value;
+                this.render();
+              }
+            }
           }}
         />
       </AppContextProvider>,

package/src/Viewer.tsx

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

package/src/class.ts

@@ -1,6 +1,6 @@
 import ReactDOM from 'react-dom';
 import { DESTROYED_ERR_MSG, DEFAULT_LANG } from './constants.js';
-import { debounce, generateColumnsAndSampledataIfNeeded, cloneDeep } from './helper.js';
+import { debounce, cloneDeep } from './helper.js';
 import {
   Template,
   Size,
@@ -50,7 +50,7 @@ export abstract class BaseUIClass {
 
     const { domContainer, template, options = {}, plugins = {} } = props;
     this.domContainer = domContainer;
-    this.template = generateColumnsAndSampledataIfNeeded(cloneDeep(template));
+    this.template = cloneDeep(template);
     this.options = options;
     this.size = {
       height: this.domContainer.clientHeight || window.innerHeight,
@@ -131,8 +131,7 @@ export abstract class PreviewUI extends BaseUIClass {
   constructor(props: PreviewProps) {
     super(props);
     checkPreviewProps(props);
-
-    this.inputs = cloneDeep(props.inputs);
+    this.inputs = convertToStingObjectArray(cloneDeep(props.inputs));
   }
 
   public getInputs() {
@@ -144,9 +143,33 @@ 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.inputs = convertToStingObjectArray(inputs);
     this.render();
   }
 
   protected abstract render(): void;
 }
+
+type DataItem = {
+  [key: string]: string | string[][];
+};
+
+type StringifiedDataItem = {
+  [key: string]: string;
+};
+
+function convertToStingObjectArray(data: DataItem[]): StringifiedDataItem[] {
+  return data.map((item) => {
+    const stringifiedItem: StringifiedDataItem = {};
+    Object.keys(item).forEach((key) => {
+      const value = item[key];
+      if (Array.isArray(value)) {
+        stringifiedItem[key] = JSON.stringify(value);
+      } else {
+        stringifiedItem[key] = value;
+      }
+    });
+    return stringifiedItem;
+  });
+}

package/src/components/AppContextProvider.tsx

@@ -38,7 +38,7 @@ const deepMerge = <T extends Record<string, any>, U extends Record<string, any>>
   return output;
 };
 
-export default ({ children, lang, font, plugins, options }: Props) => {
+const AppContextProvider = ({ children, lang, font, plugins, options }: Props) => {
   let theme = defaultTheme;
   if (options.theme) {
     theme = deepMerge(theme, options.theme);
@@ -61,3 +61,5 @@ export default ({ children, lang, font, plugins, options }: Props) => {
     </ThemeConfigProvider>
   );
 };
+
+export default AppContextProvider;

package/src/components/CtlBar.tsx

@@ -1,7 +1,15 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Size } from '@pdfme/common';
-import { MinusOutlined, PlusOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
-import { theme, Typography, Button } from 'antd';
+import {
+  MinusOutlined,
+  PlusOutlined,
+  LeftOutlined,
+  RightOutlined,
+  EllipsisOutlined,
+} from '@ant-design/icons';
+import type { MenuProps } from 'antd';
+import { theme, Typography, Button, Dropdown } from 'antd';
+import { I18nContext } from '../contexts';
 
 const { Text } = Typography;
 
@@ -68,6 +76,18 @@ const Pager = ({ pageCursor, pageNum, setPageCursor, style }: PagerProps) => {
   );
 };
 
+type ContextMenuProps = {
+  items: MenuProps['items'];
+  style: { textStyle: TextStyle };
+};
+const ContextMenu = ({ items, style }: ContextMenuProps) => (
+  <Dropdown menu={{ items }} placement="top" arrow trigger={['click']}>
+    <Button type="text">
+      <EllipsisOutlined style={{ color: style.textStyle.color }} />
+    </Button>
+  </Dropdown>
+);
+
 type CtlBarProps = {
   size: Size;
   pageCursor: number;
@@ -75,14 +95,42 @@ type CtlBarProps = {
   setPageCursor: (page: number) => void;
   zoomLevel: number;
   setZoomLevel: (zoom: number) => void;
+  addPageAfter?: () => void;
+  removePage?: () => void;
 };
 
 const CtlBar = (props: CtlBarProps) => {
   const { token } = theme.useToken();
+  const i18n = useContext(I18nContext);
+
+  const {
+    size,
+    pageCursor,
+    pageNum,
+    setPageCursor,
+    zoomLevel,
+    setZoomLevel,
+    addPageAfter,
+    removePage,
+  } = props;
+
+  const contextMenuItems: MenuProps['items'] = [];
+  if (addPageAfter) {
+    contextMenuItems.push({
+      key: '1',
+      label: <div onClick={addPageAfter}>{i18n('addPageAfter')}</div>,
+    });
+  }
+  if (removePage && pageNum > 1 && pageCursor !== 0) {
+    contextMenuItems.push({
+      key: '2',
+      label: <div onClick={removePage}>{i18n('removePage')}</div>,
+    });
+  }
 
   const barWidth = 300;
-  const { size, pageCursor, pageNum, setPageCursor, zoomLevel, setZoomLevel } = props;
-  const width = pageNum > 1 ? barWidth : barWidth / 2;
+  const contextMenuWidth = contextMenuItems.length > 0 ? 50 : 0;
+  const width = (pageNum > 1 ? barWidth : barWidth / 2) + contextMenuWidth;
 
   const textStyle = {
     color: token.colorWhite,
@@ -96,7 +144,7 @@ const CtlBar = (props: CtlBarProps) => {
         style={{
           display: 'flex',
           alignItems: 'center',
-          justifyContent: 'center',
+          justifyContent: 'space-evenly',
           position: 'relative',
           zIndex: 1,
           left: `calc(50% - ${width / 2}px)`,
@@ -117,6 +165,9 @@ const CtlBar = (props: CtlBarProps) => {
           />
         )}
         <Zoom style={{ textStyle }} zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} />
+        {contextMenuItems.length > 0 && (
+          <ContextMenu items={contextMenuItems} style={{ textStyle }} />
+        )}
       </div>
     </div>
   );

package/src/components/Designer/Canvas/Padding.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import type * as CSS from 'csstype';
+import { ZOOM, BasePdf, isBlankPdf } from '@pdfme/common';
+import { theme } from 'antd';
+
+const getPaddingStyle = (i: number, p: number, color: string): CSS.Properties => {
+  const style: CSS.Properties = {
+    position: 'absolute',
+    background: color,
+    opacity: 0.25,
+    pointerEvents: 'none',
+  };
+  switch (i) {
+    case 0:
+      style.top = 0;
+      style.height = `${p * ZOOM}px`;
+      style.left = 0;
+      style.right = 0;
+      break;
+    case 1:
+      style.right = 0;
+      style.width = `${p * ZOOM}px`;
+      style.top = 0;
+      style.bottom = 0;
+      break;
+    case 2:
+      style.bottom = 0;
+      style.height = `${p * ZOOM}px`;
+      style.left = 0;
+      style.right = 0;
+      break;
+    case 3:
+      style.left = 0;
+      style.width = `${p * ZOOM}px`;
+      style.top = 0;
+      style.bottom = 0;
+      break;
+    default:
+      break;
+  }
+
+  return style;
+};
+
+const Padding = ({ basePdf }: { basePdf: BasePdf }) => {
+  return <>
+    {isBlankPdf(basePdf) &&
+      basePdf.padding.map((p, i) => (
+        <div key={String(i)} style={getPaddingStyle(i, p, theme.useToken().token.colorError)} />
+      ))}
+  </>
+}
+
+export default Padding;