@pdfme/ui 5.3.11-dev.9 → 5.3.12-dev.1

package/dist/types/src/contexts.d.ts

@@ -7,4 +7,4 @@ export declare const FontContext: import("react").Context<Record<string, {
 }>>;
 export declare const PluginsRegistry: import("react").Context<Plugins>;
 export declare const OptionsContext: import("react").Context<UIOptions>;
-export declare const CacheContext: import("react").Context<Map<unknown, unknown>>;
+export declare const CacheContext: import("react").Context<Map<string | number, unknown>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "5.3.11-dev.9",
+  "version": "5.3.12-dev.1",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "devBuildType:watch": "tsc --emitDeclarationOnly --watch",
     "build": "vite build && tsc --emitDeclarationOnly",
     "clean": "rimraf dist",
-    "lint": "eslint --ext .ts,.tsx src --config eslint.config.mjs --no-error-on-unmatched-pattern",
+    "lint": "eslint --ext .ts,.tsx src --config eslint.config.mjs",
     "test": "jest",
     "prune": "ts-prune src",
     "prettier": "prettier --write 'src/**/*.{ts,tsx}'"
@@ -38,7 +38,7 @@
   "dependencies": {
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^10.0.0",
-    "@pdfme/converter": "*",
+    "@pdfme/converter": "file:../converter",
     "@scena/react-guides": "^0.28.2",
     "antd": "^5.24.2",
     "form-render": "^2.2.16",

package/src/components/AppContextProvider.tsx

@@ -48,12 +48,18 @@ const deepMerge = <T extends Record<string, unknown>, U extends Record<string, u
 const AppContextProvider = ({ children, lang, font, plugins, options }: Props) => {
   let theme = defaultTheme;
   if (options.theme) {
-    theme = deepMerge(theme as unknown as Record<string, unknown>, options.theme as unknown as Record<string, unknown>) as typeof theme;
+    theme = deepMerge(
+      theme as unknown as Record<string, unknown>,
+      options.theme as unknown as Record<string, unknown>,
+    ) as typeof theme;
   }
 
   let dict = getDict(lang);
   if (options.labels) {
-    dict = deepMerge(dict as unknown as Record<string, unknown>, options.labels as unknown as Record<string, unknown>) as typeof dict;
+    dict = deepMerge(
+      dict as unknown as Record<string, unknown>,
+      options.labels as unknown as Record<string, unknown>,
+    ) as typeof dict;
   }
 
   return (

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

@@ -1,5 +1,11 @@
 import React, { useEffect, forwardRef, Ref } from 'react';
-import MoveableComponent, { OnDrag, OnRotate, OnRotateEnd, OnClick, OnResize } from 'react-moveable';
+import MoveableComponent, {
+  OnDrag,
+  OnRotate,
+  OnRotateEnd,
+  OnClick,
+  OnResize,
+} from 'react-moveable';
 import { theme } from 'antd';
 
 type Props = {
@@ -27,9 +33,7 @@ const Moveable = (props: Props, ref: Ref<MoveableComponent>) => {
   const { token } = theme.useToken();
   useEffect(() => {
     const containerElement = document.querySelector(`.${className}`);
-    const containerElement2 = document.querySelectorAll(
-      `.${className} .moveable-line`,
-    );
+    const containerElement2 = document.querySelectorAll(`.${className} .moveable-line`);
     if (containerElement instanceof HTMLElement) {
       containerElement.style.setProperty('--moveable-color', token.colorPrimary);
       Array.from(containerElement2).forEach((e) => {

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

@@ -1,5 +1,8 @@
 import React, { useEffect } from 'react';
-import SelectoComponent, { OnSelect as SelectoOnSelect, OnDragStart as SelectoOnDragStart } from 'react-selecto';
+import SelectoComponent, {
+  OnSelect as SelectoOnSelect,
+  OnDragStart as SelectoOnDragStart,
+} from 'react-selecto';
 import { SELECTABLE_CLASSNAME } from '../../../constants.js';
 import { theme } from 'antd';
 

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

@@ -10,7 +10,7 @@ import React, {
   useCallback,
 } from 'react';
 import { theme, Button } from 'antd';
-import MoveableComponent, { OnDrag, OnRotate, OnRotateEnd, OnClick, OnResize } from 'react-moveable';
+import MoveableComponent, { OnDrag, OnRotate, OnResize } from 'react-moveable';
 import {
   ZOOM,
   SchemaForUI,
@@ -320,8 +320,8 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
   const getGuideLines = (guides: GuidesInterface[], index: number) =>
     guides[index] && guides[index].getGuides().map((g) => g * ZOOM);
 
-  const onClickMoveable = (e: OnClick) => {
-    e.inputEvent.stopPropagation();
+  const onClickMoveable = () => {
+    // Just set editing to true without trying to access event properties
     setEditing(true);
   };
 
@@ -331,13 +331,30 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
     );
     const schemaTypes = selectedSchemas.map((s) => s.type);
     const uniqueSchemaTypes = [...new Set(schemaTypes)];
-    const defaultSchemas = Object.values(pluginsRegistry).map(
-      (plugin) => plugin?.propPanel.defaultSchema,
-    );
 
-    return uniqueSchemaTypes.every(
-      (type) => defaultSchemas.find((ds) => ds.type === type)?.rotate !== undefined,
-    );
+    // Create a type-safe array of default schemas
+    const defaultSchemas: Record<string, unknown>[] = [];
+
+    // Safely iterate through plugins registry
+    Object.values(pluginsRegistry).forEach((plugin) => {
+      if (
+        plugin &&
+        typeof plugin === 'object' &&
+        'propPanel' in plugin &&
+        plugin.propPanel &&
+        typeof plugin.propPanel === 'object' &&
+        'defaultSchema' in plugin.propPanel &&
+        plugin.propPanel.defaultSchema
+      ) {
+        defaultSchemas.push(plugin.propPanel.defaultSchema as Record<string, unknown>);
+      }
+    });
+
+    // Check if all schema types have rotate property
+    return uniqueSchemaTypes.every((type) => {
+      const matchingSchema = defaultSchemas.find((ds) => ds && 'type' in ds && ds.type === type);
+      return matchingSchema && 'rotate' in matchingSchema;
+    });
   }, [activeElements, pageCursor, schemasList, pluginsRegistry]);
 
   return (
@@ -354,26 +371,37 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
         container={paperRefs.current[pageCursor]}
         continueSelect={isPressShiftKey}
         onDragStart={(e) => {
-          const { inputEvent } = e;
-          const isMoveableElement = moveable.current?.isMoveableElement(inputEvent.target as Element);
+          // Use type assertion to safely access inputEvent properties
+          const inputEvent = e.inputEvent as MouseEvent | TouchEvent;
+          const target = inputEvent.target as Element | null;
+          const isMoveableElement = moveable.current?.isMoveableElement(target as Element);
+
           if ((inputEvent.type === 'touchstart' && e.isTrusted) || isMoveableElement) {
             e.stop();
           }
 
-          if (paperRefs.current[pageCursor] === inputEvent.target) {
+          if (paperRefs.current[pageCursor] === target) {
             onEdit([]);
           }
+
           // Check if the target is an HTMLElement and has an id property
-          const targetElement = inputEvent.target as HTMLElement;
+          const targetElement = target as HTMLElement | null;
           if (targetElement && targetElement.id === DELETE_BTN_ID) {
             removeSchemas(activeElements.map((ae) => ae.id));
           }
         }}
-        onSelect={({ added, removed, selected, inputEvent }) => {
+        onSelect={(e) => {
+          // Use type assertions to safely access properties
+          const inputEvent = e.inputEvent as MouseEvent | TouchEvent;
+          const added = e.added as HTMLElement[];
+          const removed = e.removed as HTMLElement[];
+          const selected = e.selected as HTMLElement[];
+
           const isClick = inputEvent.type === 'mousedown';
-          let newActiveElements: HTMLElement[] = isClick ? (selected as HTMLElement[]) : [];
+          let newActiveElements: HTMLElement[] = isClick ? selected : [];
+
           if (!isClick && added.length > 0) {
-            newActiveElements = activeElements.concat(added as HTMLElement[]);
+            newActiveElements = activeElements.concat(added);
           }
           if (!isClick && removed.length > 0) {
             newActiveElements = activeElements.filter((ae) => !removed.includes(ae));
@@ -383,8 +411,10 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
           if (newActiveElements != activeElements) {
             setEditing(false);
           }
+
           // For MacOS CMD+SHIFT+3/4 screenshots where the keydown event is never received, check mouse too
-          if (!inputEvent.shiftKey) {
+          const mouseEvent = inputEvent as MouseEvent;
+          if (mouseEvent && typeof mouseEvent.shiftKey === 'boolean' && !mouseEvent.shiftKey) {
             setIsPressShiftKey(false);
           }
         }}
@@ -485,7 +515,9 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
               onChangeHoveringSchemaId={onChangeHoveringSchemaId}
               mode={mode}
               onChange={(arg) => {
-                const args = Array.isArray(arg) ? arg : [arg];
+                // Use type assertion to safely handle the argument
+                type ChangeArg = { key: string; value: unknown };
+                const args = Array.isArray(arg) ? (arg as ChangeArg[]) : [arg as ChangeArg];
                 changeSchemas(args.map(({ key, value }) => ({ key, value, schemaId: schema.id })));
               }}
               stopEditing={() => setEditing(false)}

package/src/components/Designer/PluginIcon.tsx

@@ -38,17 +38,18 @@ const PluginIcon = (props: PluginIconProps) => {
   const { plugin, label, size, styles } = props;
   const { token } = theme.useToken();
   const options = useContext(OptionsContext);
-  
+
   // Safely access plugin properties with proper type checking
-  const defaultSchemaType = plugin.propPanel && 
-    typeof plugin.propPanel === 'object' && 
-    plugin.propPanel.defaultSchema && 
-    typeof plugin.propPanel.defaultSchema === 'object' && 
-    'type' in plugin.propPanel.defaultSchema && 
-    typeof plugin.propPanel.defaultSchema.type === 'string' 
-      ? plugin.propPanel.defaultSchema.type 
+  const defaultSchemaType =
+    plugin.propPanel &&
+    typeof plugin.propPanel === 'object' &&
+    plugin.propPanel.defaultSchema &&
+    typeof plugin.propPanel.defaultSchema === 'object' &&
+    'type' in plugin.propPanel.defaultSchema &&
+    typeof plugin.propPanel.defaultSchema.type === 'string'
+      ? plugin.propPanel.defaultSchema.type
       : '';
-  
+
   const icon = options.icons?.[defaultSchemaType] ?? plugin.icon;
   const iconStyles = {
     ...styles,

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

@@ -1,4 +1,4 @@
-import { Button, Form } from 'antd';
+import { Space, Button, Form } from 'antd';
 import React from 'react';
 import type { PropPanelWidgetProps } from '@pdfme/common';
 import {
@@ -24,34 +24,44 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
     const tgtSize = isVertical ? 'width' : 'height';
     const isSingle = ass.length === 1;
     // Access pageSize property safely with proper type assertion
-    const root = pageSize && typeof pageSize === 'object' ? 
-      (tgtSize === 'width' ? 
-        (pageSize as unknown as { width: number }).width : 
-        (pageSize as unknown as { height: number }).height) : 0;
+    const root =
+      pageSize && typeof pageSize === 'object'
+        ? tgtSize === 'width'
+          ? (pageSize as unknown as { width: number }).width
+          : (pageSize as unknown as { height: number }).height
+        : 0;
 
     // Access position properties safely with proper type assertion
-    const min = isSingle ? 0 : Math.min(...ass.map((as) => {
-      // Safely access position property with proper type assertion
-      const position = as.position && typeof as.position === 'object' ? 
-        (as.position as unknown as { x: number; y: number }) : 
-        { x: 0, y: 0 };
-      return tgtPos === 'x' ? position.x : position.y;
-    }));
-    const max = isSingle ? root : Math.max(...ass.map((as) => {
-      // Safely access position and size properties with proper type assertion
-      const position = as.position && typeof as.position === 'object' ? 
-        (as.position as unknown as { x: number; y: number }) : 
-        { x: 0, y: 0 };
-      const posValue = tgtPos === 'x' ? position.x : position.y;
-      
-      // Safely access width/height with proper type assertion
-      const asWithSize = as as unknown as { width?: number; height?: number };
-      const sizeValue = tgtSize === 'width' ? 
-        (asWithSize.width || 0) : 
-        (asWithSize.height || 0);
-      
-      return posValue + sizeValue;
-    }));
+    const min = isSingle
+      ? 0
+      : Math.min(
+          ...ass.map((as) => {
+            // Safely access position property with proper type assertion
+            const position =
+              as.position && typeof as.position === 'object'
+                ? (as.position as unknown as { x: number; y: number })
+                : { x: 0, y: 0 };
+            return tgtPos === 'x' ? position.x : position.y;
+          }),
+        );
+    const max = isSingle
+      ? root
+      : Math.max(
+          ...ass.map((as) => {
+            // Safely access position and size properties with proper type assertion
+            const position =
+              as.position && typeof as.position === 'object'
+                ? (as.position as unknown as { x: number; y: number })
+                : { x: 0, y: 0 };
+            const posValue = tgtPos === 'x' ? position.x : position.y;
+
+            // Safely access width/height with proper type assertion
+            const asWithSize = as as unknown as { width?: number; height?: number };
+            const sizeValue = tgtSize === 'width' ? asWithSize.width || 0 : asWithSize.height || 0;
+
+            return posValue + sizeValue;
+          }),
+        );
 
     let basePos = min;
     // Define adjust function with consistent parameter usage
@@ -70,10 +80,8 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
       ass.map((as) => {
         // Safely access size property with proper type assertion
         const asWithSize = as as unknown as { width?: number; height?: number; id: string };
-        const sizeValue = tgtSize === 'width' ? 
-          (asWithSize.width || 0) : 
-          (asWithSize.height || 0);
-        
+        const sizeValue = tgtSize === 'width' ? asWithSize.width || 0 : asWithSize.height || 0;
+
         return {
           key: `position.${tgtPos}`,
           value: round(basePos - adjust(sizeValue), 2),
@@ -90,30 +98,34 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
     const isVertical = type === 'vertical';
     const tgtPos = isVertical ? 'y' : 'x';
     const tgtSize = isVertical ? 'height' : 'width';
-    
+
     // Safely access position property with proper type assertion
-    const min = Math.min(...ass.map((as) => {
-      const position = as.position && typeof as.position === 'object' ? 
-        (as.position as unknown as { x: number; y: number }) : 
-        { x: 0, y: 0 };
-      return tgtPos === 'x' ? position.x : position.y;
-    }));
-    
+    const min = Math.min(
+      ...ass.map((as) => {
+        const position =
+          as.position && typeof as.position === 'object'
+            ? (as.position as unknown as { x: number; y: number })
+            : { x: 0, y: 0 };
+        return tgtPos === 'x' ? position.x : position.y;
+      }),
+    );
+
     // Safely access position and size properties with proper type assertion
-    const max = Math.max(...ass.map((as) => {
-      const position = as.position && typeof as.position === 'object' ? 
-        (as.position as unknown as { x: number; y: number }) : 
-        { x: 0, y: 0 };
-      const posValue = tgtPos === 'x' ? position.x : position.y;
-      
-      // Safely access width/height with proper type assertion
-      const asWithSize = as as unknown as { width?: number; height?: number };
-      const sizeValue = tgtSize === 'width' ? 
-        (asWithSize.width || 0) : 
-        (asWithSize.height || 0);
-      
-      return posValue + sizeValue;
-    }));
+    const max = Math.max(
+      ...ass.map((as) => {
+        const position =
+          as.position && typeof as.position === 'object'
+            ? (as.position as unknown as { x: number; y: number })
+            : { x: 0, y: 0 };
+        const posValue = tgtPos === 'x' ? position.x : position.y;
+
+        // Safely access width/height with proper type assertion
+        const asWithSize = as as unknown as { width?: number; height?: number };
+        const sizeValue = tgtSize === 'width' ? asWithSize.width || 0 : asWithSize.height || 0;
+
+        return posValue + sizeValue;
+      }),
+    );
 
     if (ass.length < 3) return;
 
@@ -122,9 +134,7 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
     // Safely access size property with proper type assertion
     const sum = ass.reduce((acc, cur) => {
       const curWithSize = cur as unknown as { width?: number; height?: number };
-      const sizeValue = tgtSize === 'width' ? 
-        (curWithSize.width || 0) : 
-        (curWithSize.height || 0);
+      const sizeValue = tgtSize === 'width' ? curWithSize.width || 0 : curWithSize.height || 0;
       return acc + sizeValue;
     }, 0);
     const remain = boxSize - sum;
@@ -134,16 +144,17 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
     changeSchemas(
       ass.map((as, index) => {
         // Safely access size property of previous element with proper type assertion
-        const prevSize = index === 0 ? 0 : (() => {
-          const prevAs = ass[index - 1] as unknown as { width?: number; height?: number };
-          return tgtSize === 'width' ? 
-            (prevAs.width || 0) : 
-            (prevAs.height || 0);
-        })();
-        
+        const prevSize =
+          index === 0
+            ? 0
+            : (() => {
+                const prevAs = ass[index - 1] as unknown as { width?: number; height?: number };
+                return tgtSize === 'width' ? prevAs.width || 0 : prevAs.height || 0;
+              })();
+
         prev += index === 0 ? 0 : prevSize + unit;
         const value = round(boxPos + prev, 2);
-        
+
         // Safely access id with proper type assertion
         const asWithId = as as unknown as { id: string };
         return { key: `position.${tgtPos}`, value, schemaId: asWithId.id };
@@ -199,7 +210,7 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
 
   return (
     <Form.Item label={schema.title}>
-      <Button.Group>
+      <Space.Compact>
         {layoutBtns.map((btn) => (
           <Button
             key={btn.id}
@@ -208,7 +219,7 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
             {...btn}
           />
         ))}
-      </Button.Group>
+      </Space.Compact>
     </Form.Item>
   );
 };

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

@@ -1,4 +1,4 @@
-import { Button, Form, theme } from 'antd';
+import { Space, Button, Form, theme } from 'antd';
 import React from 'react';
 import type { PropPanelWidgetProps, SchemaForUI } from '@pdfme/common';
 interface ButtonConfig {
@@ -35,9 +35,8 @@ const ButtonGroupWidget = (props: PropPanelWidgetProps) => {
     ass.forEach((s: SchemaForUI) => {
       // Cast schema to Record to safely access dynamic properties
       const schemaRecord = s as Record<string, unknown>;
-      active = type === 'boolean' 
-        ? Boolean(schemaRecord[key] ?? false) 
-        : schemaRecord[key] === btn.value;
+      active =
+        type === 'boolean' ? Boolean(schemaRecord[key] ?? false) : schemaRecord[key] === btn.value;
     });
     return active;
   };
@@ -54,7 +53,7 @@ const ButtonGroupWidget = (props: PropPanelWidgetProps) => {
 
   return (
     <Form.Item>
-      <Button.Group>
+      <Space.Compact>
         {(schema.buttons as ButtonConfig[]).map((btn: ButtonConfig, index: number) => {
           const active = isActive(btn);
           return (
@@ -71,7 +70,7 @@ const ButtonGroupWidget = (props: PropPanelWidgetProps) => {
             />
           );
         })}
-      </Button.Group>
+      </Space.Compact>
     </Form.Item>
   );
 };