@pdfme/ui 5.3.8-dev.57 → 5.3.8-dev.59

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BasePdf } from '@pdfme/common';
-declare const LeftSidebar: ({ height, scale, basePdf }: {
+declare const LeftSidebar: ({ height, scale, basePdf, }: {
     height: number;
     scale: number;
     basePdf: BasePdf;

package/dist/types/src/components/Designer/PluginIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Plugin } from "@pdfme/common";
+import { Plugin } from '@pdfme/common';
 interface PluginIconProps {
     plugin: Plugin<any>;
     label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "5.3.8-dev.57",
+  "version": "5.3.8-dev.59",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
@@ -46,7 +46,7 @@
     "lucide-react": "^0.460.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "react-moveable": "^0.30.3",
+    "react-moveable": "^0.56.0",
     "react-selecto": "^1.12.0"
   },
   "devDependencies": {

package/src/Designer.tsx

@@ -47,9 +47,9 @@ class Designer extends BaseUIClass {
   public onChangeTemplate(cb: (template: Template) => void) {
     this.onChangeTemplateCallback = cb;
   }
-  
+
   public getPageCursor() {
-    return this.pageCursor
+    return this.pageCursor;
   }
 
   protected render() {
@@ -78,12 +78,12 @@ class Designer extends BaseUIClass {
             }
           }}
           onPageCursorChange={(newPageCursor: number) => {
-            this.pageCursor = newPageCursor
+            this.pageCursor = newPageCursor;
           }}
           size={this.size}
         />
       </AppContextProvider>,
-      this.domContainer
+      this.domContainer,
     );
   }
 }

package/src/Form.tsx

@@ -46,8 +46,6 @@ class Form extends PreviewUI {
     });
   }
 
-
-
   protected render() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
     ReactDOM.render(
@@ -75,7 +73,7 @@ class Form extends PreviewUI {
           }}
         />
       </AppContextProvider>,
-      this.domContainer
+      this.domContainer,
     );
   }
 }

package/src/Viewer.tsx

@@ -22,7 +22,7 @@ class Viewer extends PreviewUI {
       >
         <Preview template={this.template} size={this.size} inputs={this.inputs} />
       </AppContextProvider>,
-      this.domContainer
+      this.domContainer,
     );
   }
 }

package/src/components/AppContextProvider.tsx

@@ -18,7 +18,7 @@ const isObject = (item: any): item is Record<string, any> =>
 
 const deepMerge = <T extends Record<string, any>, U extends Record<string, any>>(
   target: T,
-  source: U
+  source: U,
 ): T & U => {
   let output = { ...target } as T & U;
 

package/src/components/CtlBar.tsx

@@ -7,7 +7,7 @@ import { Plus, Minus, ChevronLeft, ChevronRight, Ellipsis } from 'lucide-react';
 import type { MenuProps } from 'antd';
 import { theme, Typography, Button, Dropdown } from 'antd';
 import { I18nContext } from '../contexts.js';
-import { getMaxZoom } from "../helper.js";
+import { getMaxZoom } from '../helper.js';
 
 const { Text } = Typography;
 

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

@@ -7,7 +7,7 @@ const guideStyle = (
   top: number,
   left: number,
   height: number,
-  width: number
+  width: number,
 ): React.CSSProperties => ({
   position: 'absolute',
   top,

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

@@ -86,12 +86,12 @@ const _Moveable = (props: Props, ref: Ref<any>) => {
   useEffect(() => {
     const containerElement = document.querySelector(`.${className}`) as HTMLElement | null;
     const containerElement2 = document.querySelectorAll(
-      `.${className} .moveable-line`
+      `.${className} .moveable-line`,
     ) as NodeListOf<HTMLElement>;
     if (containerElement) {
       containerElement.style.setProperty('--moveable-color', token.colorPrimary);
       Array.from(containerElement2).map((e) =>
-        e.style.setProperty('--moveable-color', token.colorPrimary)
+        e.style.setProperty('--moveable-color', token.colorPrimary),
       );
     }
   }, [props.target]);

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

@@ -43,12 +43,14 @@ const getPaddingStyle = (i: number, p: number, color: string): CSS.Properties =>
 };
 
 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)} />
-      ))}
-  </>
-}
+  return (
+    <>
+      {isBlankPdf(basePdf) &&
+        basePdf.padding.map((p, i) => (
+          <div key={String(i)} style={getPaddingStyle(i, p, theme.useToken().token.colorError)} />
+        ))}
+    </>
+  );
+};
 
-export default Padding;
+export default Padding;

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

@@ -10,7 +10,15 @@ import React, {
   useCallback,
 } from 'react';
 import { theme, Button } from 'antd';
-import { ZOOM, SchemaForUI, Size, ChangeSchemas, BasePdf, isBlankPdf, replacePlaceholders } from '@pdfme/common';
+import {
+  ZOOM,
+  SchemaForUI,
+  Size,
+  ChangeSchemas,
+  BasePdf,
+  isBlankPdf,
+  replacePlaceholders,
+} from '@pdfme/common';
 import { PluginsRegistry } from '../../../contexts.js';
 import { X } from 'lucide-react';
 import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH } from '../../../constants.js';
@@ -81,7 +89,6 @@ interface OnClick {
 
 const mm2px = (mm: number) => mm * 3.7795275591;
 
-
 const DELETE_BTN_ID = uuid();
 const fmt4Num = (prop: string) => Number(prop.replace('px', ''));
 const fmt = (prop: string) => round(fmt4Num(prop) / ZOOM, 2);
@@ -373,16 +380,16 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
 
   const rotatable = useMemo(() => {
     const selectedSchemas = (schemasList[pageCursor] || []).filter((s) =>
-      activeElements.map((ae) => ae.id).includes(s.id)
+      activeElements.map((ae) => ae.id).includes(s.id),
     );
     const schemaTypes = selectedSchemas.map((s) => s.type);
     const uniqueSchemaTypes = [...new Set(schemaTypes)];
     const defaultSchemas = Object.values(pluginsRegistry).map(
-      (plugin) => plugin?.propPanel.defaultSchema
+      (plugin) => plugin?.propPanel.defaultSchema,
     );
 
     return uniqueSchemaTypes.every(
-      (type) => defaultSchemas.find((ds) => ds.type === type)?.rotate !== undefined
+      (type) => defaultSchemas.find((ds) => ds.type === type)?.rotate !== undefined,
     );
   }, [activeElements, pageCursor, schemasList, pluginsRegistry]);
 
@@ -452,7 +459,7 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
             <StaticSchema
               template={{ schemas: schemasList, basePdf }}
               input={Object.fromEntries(
-                schemasList.flat().map(({ name, content = '' }) => [name, content])
+                schemasList.flat().map(({ name, content = '' }) => [name, content]),
               )}
               scale={scale}
               totalPages={schemasList.length}
@@ -501,17 +508,20 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
           const mode =
             editing && activeElements.map((ae) => ae.id).includes(schema.id)
               ? 'designer'
-              : 'viewer'
+              : 'viewer';
 
           const content = schema.content || '';
           let value = content;
 
           if (mode !== 'designer' && schema.readOnly) {
             const variables = {
-              ...schemasList.flat().reduce((acc, currSchema) => {
-                acc[currSchema.name] = currSchema.content || '';
-                return acc;
-              }, {} as Record<string, string>),
+              ...schemasList.flat().reduce(
+                (acc, currSchema) => {
+                  acc[currSchema.name] = currSchema.content || '';
+                  return acc;
+                },
+                {} as Record<string, string>,
+              ),
               totalPages: schemasList.length,
               currentPage: index + 1,
             };
@@ -532,11 +542,14 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
                 changeSchemas(args.map(({ key, value }) => ({ key, value, schemaId: schema.id })));
               }}
               stopEditing={() => setEditing(false)}
-              outline={`1px ${hoveringSchemaId === schema.id ? 'solid' : 'dashed'} ${schema.readOnly && hoveringSchemaId !== schema.id ? 'transparent' : token.colorPrimary
-                }`}
+              outline={`1px ${hoveringSchemaId === schema.id ? 'solid' : 'dashed'} ${
+                schema.readOnly && hoveringSchemaId !== schema.id
+                  ? 'transparent'
+                  : token.colorPrimary
+              }`}
               scale={scale}
             />
-          )
+          );
         }}
       />
     </div>

package/src/components/Designer/LeftSidebar.tsx

@@ -1,49 +1,57 @@
 import React, { useContext, useState, useEffect } from 'react';
-import {
-  Schema,
-  Plugin,
-  BasePdf,
-} from '@pdfme/common';
+import { Schema, Plugin, BasePdf } from '@pdfme/common';
 import { theme, Button } from 'antd';
 import { useDraggable } from '@dnd-kit/core';
-import { CSS } from "@dnd-kit/utilities";
+import { CSS } from '@dnd-kit/utilities';
 import Renderer from '../Renderer.js';
 import { LEFT_SIDEBAR_WIDTH } from '../../constants.js';
 import { PluginsRegistry } from '../../contexts.js';
-import PluginIcon from "./PluginIcon.js";
+import PluginIcon from './PluginIcon.js';
 
-
-const Draggable = (props: { plugin: Plugin<any>, scale: number, basePdf: BasePdf, children: React.ReactNode }) => {
+const Draggable = (props: {
+  plugin: Plugin<any>;
+  scale: number;
+  basePdf: BasePdf;
+  children: React.ReactNode;
+}) => {
   const { scale, basePdf, plugin } = props;
   const { token } = theme.useToken();
   const defaultSchema = plugin.propPanel.defaultSchema as Schema;
   const draggable = useDraggable({ id: defaultSchema.type, data: defaultSchema });
   const { listeners, setNodeRef, attributes, transform, isDragging } = draggable;
-  const style = { transform: CSS.Translate.toString(transform) }
+  const style = { transform: CSS.Translate.toString(transform) };
 
   return (
     <div ref={setNodeRef} style={style} {...listeners} {...attributes}>
-      {isDragging &&
+      {isDragging && (
         <div style={{ transform: `scale(${scale})` }}>
           <Renderer
             schema={{ ...defaultSchema, id: defaultSchema.type }}
             basePdf={basePdf}
             value={defaultSchema.content || ''}
-            onChangeHoveringSchemaId={() => { void 0 }}
+            onChangeHoveringSchemaId={() => {
+              void 0;
+            }}
             mode={'viewer'}
             outline={`1px solid ${token.colorPrimary}`}
             scale={scale}
           />
         </div>
-      }
-      <div style={{ visibility: isDragging ? 'hidden' : 'visible' }}>
-        {props.children}
-      </div>
+      )}
+      <div style={{ visibility: isDragging ? 'hidden' : 'visible' }}>{props.children}</div>
     </div>
   );
-}
+};
 
-const LeftSidebar = ({ height, scale, basePdf }: { height: number, scale: number, basePdf: BasePdf }) => {
+const LeftSidebar = ({
+  height,
+  scale,
+  basePdf,
+}: {
+  height: number;
+  scale: number;
+  basePdf: BasePdf;
+}) => {
   const { token } = theme.useToken();
   const pluginsRegistry = useContext(PluginsRegistry);
   const [isDragging, setIsDragging] = useState(false);
@@ -62,36 +70,36 @@ const LeftSidebar = ({ height, scale, basePdf }: { height: number, scale: number
     };
   }, [isDragging]);
 
-  return <div
-    style={{
-      left: 0,
-      right: 0,
-      position: 'absolute',
-      zIndex: 1,
-      height,
-      width: LEFT_SIDEBAR_WIDTH,
-      background: token.colorBgLayout,
-      textAlign: 'center',
-      overflow: isDragging ? 'visible' : 'auto',
-    }}
-  >
-    {Object.entries(pluginsRegistry).map(([label, plugin]) => {
-      if (!plugin?.propPanel.defaultSchema) return null;
+  return (
+    <div
+      style={{
+        left: 0,
+        right: 0,
+        position: 'absolute',
+        zIndex: 1,
+        height,
+        width: LEFT_SIDEBAR_WIDTH,
+        background: token.colorBgLayout,
+        textAlign: 'center',
+        overflow: isDragging ? 'visible' : 'auto',
+      }}
+    >
+      {Object.entries(pluginsRegistry).map(([label, plugin]) => {
+        if (!plugin?.propPanel.defaultSchema) return null;
 
-      return <Draggable
-        key={label}
-        scale={scale}
-        basePdf={basePdf}
-        plugin={plugin}>
-        <Button
-          onMouseDown={() => setIsDragging(true)}
-          style={{ width: 35, height: 35, marginTop: '0.25rem', padding: '0.25rem' }}
-        >
-          <PluginIcon plugin={plugin} label={label} />
-        </Button>
-      </Draggable>
-    })}
-  </div>
-}
+        return (
+          <Draggable key={label} scale={scale} basePdf={basePdf} plugin={plugin}>
+            <Button
+              onMouseDown={() => setIsDragging(true)}
+              style={{ width: 35, height: 35, marginTop: '0.25rem', padding: '0.25rem' }}
+            >
+              <PluginIcon plugin={plugin} label={label} />
+            </Button>
+          </Draggable>
+        );
+      })}
+    </div>
+  );
+};
 
-export default LeftSidebar
+export default LeftSidebar;

package/src/components/Designer/PluginIcon.tsx

@@ -1,9 +1,8 @@
 import React, { useContext } from 'react';
-import { Plugin } from "@pdfme/common";
+import { Plugin } from '@pdfme/common';
 import { OptionsContext } from '../../contexts.js';
 import { theme } from 'antd';
 
-
 interface PluginIconProps {
   plugin: Plugin<any>;
   label: string;
@@ -11,7 +10,12 @@ interface PluginIconProps {
   styles?: React.CSSProperties;
 }
 
-const getWithModifiedSize = (htmlString: string, label: string, size: number, styles?: React.CSSProperties) => {
+const getWithModifiedSize = (
+  htmlString: string,
+  label: string,
+  size: number,
+  styles?: React.CSSProperties,
+) => {
   const parser = new DOMParser();
   const doc = parser.parseFromString(htmlString, 'text/html');
 
@@ -20,10 +24,10 @@ const getWithModifiedSize = (htmlString: string, label: string, size: number, st
       node.setAttribute('width', size.toString());
       node.setAttribute('height', size.toString());
     }
-    Array.from(node.children).forEach(child => modifyNode(child as HTMLElement));
+    Array.from(node.children).forEach((child) => modifyNode(child as HTMLElement));
   };
 
-  Array.from(doc.body.children).forEach(child => modifyNode(child as HTMLElement));
+  Array.from(doc.body.children).forEach((child) => modifyNode(child as HTMLElement));
 
   return (
     <div style={styles} title={label} dangerouslySetInnerHTML={{ __html: doc.body.innerHTML }} />
@@ -35,16 +39,25 @@ const PluginIcon = (props: PluginIconProps) => {
   const { token } = theme.useToken();
   const options = useContext(OptionsContext);
   const icon = options.icons?.[plugin.propPanel.defaultSchema.type] ?? plugin.icon;
-  const iconStyles = { ...styles, color: token.colorText, display: 'flex', justifyContent: 'center' };
+  const iconStyles = {
+    ...styles,
+    color: token.colorText,
+    display: 'flex',
+    justifyContent: 'center',
+  };
 
   if (icon) {
     if (size) {
       return getWithModifiedSize(icon, label, size, iconStyles);
     }
-    return <div style={iconStyles} title={label} dangerouslySetInnerHTML={{ __html: icon }} />
+    return <div style={iconStyles} title={label} dangerouslySetInnerHTML={{ __html: icon }} />;
   }
 
-  return <div style={{ ...styles, overflow: 'hidden', fontSize: 10, }} title={label} >{label}</div>
+  return (
+    <div style={{ ...styles, overflow: 'hidden', fontSize: 10 }} title={label}>
+      {label}
+    </div>
+  );
 };
 
 export default PluginIcon;

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

@@ -10,7 +10,7 @@ import {
   AlignEndHorizontal,
   AlignVerticalSpaceAround,
   AlignHorizontalSpaceAround,
-} from 'lucide-react'
+} from 'lucide-react';
 import { round } from '../../../../helper.js';
 
 const AlignWidget = (props: PropPanelWidgetProps) => {
@@ -44,7 +44,7 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
         key: `position.${tgtPos}`,
         value: round(basePos - adjust(as[tgtSize]), 2),
         schemaId: as.id,
-      }))
+      })),
     );
   };
 
@@ -72,7 +72,7 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
         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: {
@@ -80,47 +80,47 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
     icon: React.JSX.Element;
     onClick: () => void;
   }[] = [
-      {
-        id: 'left',
-        icon: <AlignStartVertical size={15} />,
-        onClick: () => align('left')
-      },
-      {
-        id: 'center',
-        icon: <AlignCenterVertical size={15} />,
-        onClick: () => align('center')
-      },
-      {
-        id: 'right',
-        icon: <AlignEndVertical size={15} />,
-        onClick: () => align('right')
-      },
-      {
-        id: 'top',
-        icon: <AlignStartHorizontal size={15} />,
-        onClick: () => align('top')
-      },
-      {
-        id: 'middle',
-        icon: <AlignCenterHorizontal size={15} />,
-        onClick: () => align('middle')
-      },
-      {
-        id: 'bottom',
-        icon: <AlignEndHorizontal size={15} />,
-        onClick: () => align('bottom')
-      },
-      {
-        id: 'vertical',
-        icon: <AlignVerticalSpaceAround size={15} />,
-        onClick: () => distribute('vertical')
-      },
-      {
-        id: 'horizontal',
-        icon: <AlignHorizontalSpaceAround size={15} />,
-        onClick: () => distribute('horizontal')
-      },
-    ];
+    {
+      id: 'left',
+      icon: <AlignStartVertical size={15} />,
+      onClick: () => align('left'),
+    },
+    {
+      id: 'center',
+      icon: <AlignCenterVertical size={15} />,
+      onClick: () => align('center'),
+    },
+    {
+      id: 'right',
+      icon: <AlignEndVertical size={15} />,
+      onClick: () => align('right'),
+    },
+    {
+      id: 'top',
+      icon: <AlignStartHorizontal size={15} />,
+      onClick: () => align('top'),
+    },
+    {
+      id: 'middle',
+      icon: <AlignCenterHorizontal size={15} />,
+      onClick: () => align('middle'),
+    },
+    {
+      id: 'bottom',
+      icon: <AlignEndHorizontal size={15} />,
+      onClick: () => align('bottom'),
+    },
+    {
+      id: 'vertical',
+      icon: <AlignVerticalSpaceAround size={15} />,
+      onClick: () => distribute('vertical'),
+    },
+    {
+      id: 'horizontal',
+      icon: <AlignHorizontalSpaceAround size={15} />,
+      onClick: () => distribute('horizontal'),
+    },
+  ];
 
   return (
     <Form.Item label={schema.title}>

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

@@ -22,7 +22,7 @@ const ButtonGroupWidget = (props: PropPanelWidgetProps) => {
         const oldValue = s[key] ?? false;
         const newValue = type === 'boolean' ? !oldValue : btn.value;
         return { key, value: newValue, schemaId: s.id };
-      })
+      }),
     );
   };
 
@@ -33,7 +33,7 @@ const ButtonGroupWidget = (props: PropPanelWidgetProps) => {
     const ids = activeElements.map((ae) => ae.id);
     const ass = schemas.filter((s) => ids.includes(s.id)) as SchemaForUI[];
     ass.forEach((s: Record<string, any>) => {
-      active = type === 'boolean' ? s[key] ?? false : s[key] === btn.value;
+      active = type === 'boolean' ? (s[key] ?? false) : s[key] === btn.value;
     });
     return active;
   };
@@ -43,7 +43,7 @@ const ButtonGroupWidget = (props: PropPanelWidgetProps) => {
 
   const svgIcon = (svgString: string) => {
     const svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(
-      replaceCurrentColor(svgString, token.colorText)
+      replaceCurrentColor(svgString, token.colorText),
     )}`;
     return <img width={17} height={17} src={svgDataUrl} />;
   };