@pdfme/ui 5.3.11 → 5.3.12-dev.1

package/src/components/Designer/index.tsx

@@ -24,7 +24,7 @@ import {
   template2SchemasList,
   getPagesScrollTopByIndex,
   changeSchemas as _changeSchemas,
-  getMaxZoom,
+  useMaxZoom,
 } from '../../helper.js';
 import { useUIPreProcessor, useScrollPageCursor, useInitEvents } from '../../hooks.js';
 import Root from '../Root.js';
@@ -64,7 +64,7 @@ const TemplateEditor = ({
   const i18n = useContext(I18nContext);
   const pluginsRegistry = useContext(PluginsRegistry);
   const options = useContext(OptionsContext);
-  const maxZoom = getMaxZoom();
+  const maxZoom = useMaxZoom();
 
   const [hoveringSchemaId, setHoveringSchemaId] = useState<string | null>(null);
   const [activeElements, setActiveElements] = useState<HTMLElement[]>([]);
@@ -227,12 +227,13 @@ const TemplateEditor = ({
     onChangeTemplate(newTemplate);
     await updateTemplate(newTemplate);
     void refresh(newTemplate);
-    setTimeout(
-      () =>
-        canvasRef.current &&
-        ((canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, newPageCursor, scale)),
-        0),
-    );
+
+    // Use setTimeout to update scroll position after render
+    setTimeout(() => {
+      if (canvasRef.current) {
+        canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, newPageCursor, scale);
+      }
+    }, 0);
   };
 
   const handleRemovePage = () => {
@@ -262,6 +263,7 @@ const TemplateEditor = ({
   };
 
   if (error) {
+    // Pass the error directly to ErrorScreen
     return <ErrorScreen size={size} error={error} />;
   }
   const pageManipulation = isBlankPdf(template.basePdf)
@@ -309,6 +311,7 @@ const TemplateEditor = ({
             pageNum={schemasList.length}
             setPageCursor={(p) => {
               if (!canvasRef.current) return;
+              // Update scroll position and state
               canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
               setPageCursor(p);
               onEditEnd();
@@ -331,7 +334,9 @@ const TemplateEditor = ({
             onSortEnd={onSortEnd}
             onEdit={(id) => {
               const editingElem = document.getElementById(id);
-              editingElem && onEdit([editingElem]);
+              if (editingElem) {
+                onEdit([editingElem]);
+              }
             }}
             onEditEnd={onEditEnd}
             deselectSchema={onEditEnd}

package/src/components/Preview.tsx

@@ -17,10 +17,10 @@ import Paper from './Paper.js';
 import Renderer from './Renderer.js';
 import { useUIPreProcessor, useScrollPageCursor } from '../hooks.js';
 import { FontContext } from '../contexts.js';
-import { template2SchemasList, getPagesScrollTopByIndex, getMaxZoom } from '../helper.js';
+import { template2SchemasList, getPagesScrollTopByIndex, useMaxZoom } from '../helper.js';
 import { theme } from 'antd';
 
-const _cache = new Map();
+const _cache = new Map<string | number, unknown>();
 
 const Preview = ({
   template,
@@ -34,7 +34,7 @@ const Preview = ({
   const { token } = theme.useToken();
 
   const font = useContext(FontContext);
-  const maxZoom = getMaxZoom();
+  const maxZoom = useMaxZoom();
 
   const containerRef = useRef<HTMLDivElement>(null);
   const paperRefs = useRef<HTMLDivElement[]>([]);
@@ -98,7 +98,7 @@ const Preview = ({
   const handleChangeInput = ({ name, value }: { name: string; value: string }) =>
     onChangeInput && onChangeInput({ index: unitCursor, name, value });
 
-  const handleOnChangeRenderer = (args: { key: string; value: any }[], schema: SchemaForUI) => {
+  const handleOnChangeRenderer = (args: { key: string; value: unknown }[], schema: SchemaForUI) => {
     let isNeedInit = false;
     args.forEach(({ key: _key, value }) => {
       if (_key === 'content') {
@@ -112,7 +112,7 @@ const Preview = ({
         const targetSchema = schemasList[pageCursor].find((s) => s.id === schema.id) as SchemaForUI;
         if (!targetSchema) return;
 
-        // @ts-ignore
+        // @ts-expect-error Dynamic property assignment
         targetSchema[_key] = value as string;
       }
     });

package/src/components/Renderer.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useContext, ReactNode, useRef, useMemo } from 'react';
 import {
-  Dict,
   Mode,
   ZOOM,
   UIRenderProps,
@@ -29,7 +28,7 @@ type RendererProps = Omit<
 };
 
 type ReRenderCheckProps = {
-  plugin: Plugin<any>;
+  plugin?: Plugin<Schema>;
   value: string;
   mode: Mode;
   scale: number;
@@ -37,7 +36,7 @@ type ReRenderCheckProps = {
   options: UIOptions;
 };
 
-export const useRerenderDependencies = (arg: ReRenderCheckProps) => {
+const useRerenderDependencies = (arg: ReRenderCheckProps) => {
   const { plugin, value, mode, scale, schema, options } = arg;
   const _options = cloneDeep(options);
   if (_options.font) {
@@ -48,12 +47,12 @@ export const useRerenderDependencies = (arg: ReRenderCheckProps) => {
   const optionStr = JSON.stringify(_options);
 
   return useMemo(() => {
-    if (plugin.uninterruptedEditMode && mode === 'designer') {
+    if (plugin?.uninterruptedEditMode && mode === 'designer') {
       return [mode];
     } else {
       return [value, mode, scale, JSON.stringify(schema), optionStr];
     }
-  }, [plugin.uninterruptedEditMode, value, mode, scale, schema, optionStr]);
+  }, [plugin?.uninterruptedEditMode, value, mode, scale, schema, optionStr, plugin]);
 };
 
 const Wrapper = ({
@@ -105,56 +104,63 @@ const Renderer = (props: RendererProps) => {
 
   const pluginsRegistry = useContext(PluginsRegistry);
   const options = useContext(OptionsContext);
-  const i18n = useContext(I18nContext) as (key: keyof Dict | string) => string;
+  const i18n = useContext(I18nContext) as (key: string) => string;
   const { token: theme } = antdTheme.useToken();
 
   const ref = useRef<HTMLDivElement>(null);
   const _cache = useContext(CacheContext);
-  const plugin = Object.values(pluginsRegistry || {}).find(
-    (plugin) => plugin?.propPanel.defaultSchema.type === schema.type,
-  ) as Plugin<any> | undefined;
+  // Safely extract schema type
+  const schemaType = typeof schema.type === 'string' ? schema.type : '';
+
+  // Find plugin with matching schema type using a type-safe approach
+  const plugin = Object.values(pluginsRegistry || {}).find((plugin) => {
+    const defaultSchema = plugin?.propPanel?.defaultSchema as Record<string, unknown> | undefined;
+    return defaultSchema?.type === schemaType;
+  });
 
-  if (!plugin || !plugin.ui) {
-    console.error(`[@pdfme/ui] Renderer for type ${schema.type} not found. 
-Check this document: https://pdfme.com/docs/custom-schemas`);
-    return <></>;
-  }
   const reRenderDependencies = useRerenderDependencies({
-    plugin,
+    plugin: plugin || ({} as Plugin<Schema>),
     value,
     mode,
     scale,
     schema,
-    options: options as UIOptions,
+    options,
   });
 
   useEffect(() => {
-    if (ref.current && schema.type) {
-      ref.current.innerHTML = '';
-      const render = plugin.ui;
-
-      void render({
-        value,
-        schema,
-        basePdf,
-        rootElement: ref.current,
-        mode,
-        onChange,
-        stopEditing,
-        tabIndex,
-        placeholder,
-        options: options as UIOptions,
-        theme,
-        i18n,
-        _cache: _cache as Map<any, any>,
-      });
-    }
+    if (!plugin?.ui || !ref.current || !schema.type) return;
+
+    ref.current.innerHTML = '';
+    const render = plugin.ui;
+
+    void render({
+      value,
+      schema,
+      basePdf,
+      rootElement: ref.current,
+      mode,
+      onChange,
+      stopEditing,
+      tabIndex,
+      placeholder,
+      options,
+      theme,
+      i18n,
+      _cache,
+    });
+
     return () => {
       if (ref.current) {
         ref.current.innerHTML = '';
       }
     };
-  }, reRenderDependencies);
+  }, [plugin?.ui, schema.type, reRenderDependencies]);
+
+  if (!plugin || !plugin.ui) {
+    console.error(`[@pdfme/ui] Renderer for type ${schema.type} not found. 
+Check this document: https://pdfme.com/docs/custom-schemas`);
+    return <></>;
+  }
 
   return (
     <Wrapper {...props}>

package/src/components/Root.tsx

@@ -19,7 +19,7 @@ const Root = ({ size, scale, children }: Props, ref: Ref<HTMLDivElement>) => {
     );
     const newFontFaces = fontFaces.filter((fontFace) => !document.fonts.has(fontFace));
 
-    Promise.allSettled(newFontFaces.map((f) => f.load())).then((loadedFontFaces) => {
+    void Promise.allSettled(newFontFaces.map((f) => f.load())).then((loadedFontFaces) => {
       loadedFontFaces.forEach((loadedFontFace) => {
         if (loadedFontFace.status === 'fulfilled') {
           document.fonts.add(loadedFontFace.value);

package/src/constants.ts

@@ -1,4 +1,4 @@
-export const DEFAULT_LANG = 'en' as const;
+export const DEFAULT_LANG = 'en';
 
 export const DESTROYED_ERR_MSG = '[@pdfme/ui] this instance is already destroyed';
 

package/src/contexts.ts

@@ -11,4 +11,4 @@ export const PluginsRegistry = createContext<Plugins>(builtInPlugins);
 
 export const OptionsContext = createContext<UIOptions>({});
 
-export const CacheContext = createContext<Map<any, any>>(new Map());
+export const CacheContext = createContext<Map<string | number, unknown>>(new Map());

package/src/helper.ts

@@ -16,20 +16,28 @@ import { pdf2size } from '@pdfme/converter';
 import { DEFAULT_MAX_ZOOM, RULER_HEIGHT } from './constants.js';
 import { OptionsContext } from './contexts.js';
 
+// Define a type for the hotkeys function with additional properties
+type HotkeysFunction = {
+  (keys: string, callback: (e: KeyboardEvent, handler: { shortcut: string }) => void): unknown;
+  shift: boolean;
+  unbind: (keys: string) => void;
+};
+
 // Create a simple mock for hotkeys to avoid TypeScript errors
 const hotkeys = function (
   keys: string,
   callback: (e: KeyboardEvent, handler: { shortcut: string }) => void,
 ) {
-  return (hotkeysJs as any)(keys, callback);
-};
+  return hotkeysJs(keys, callback);
+} as HotkeysFunction;
 
 // Add properties to the hotkeys function
-(hotkeys as any).shift = false;
-(hotkeys as any).unbind = function (keys: string) {
+hotkeys.shift = false;
+hotkeys.unbind = function (keys: string) {
   // Do nothing if hotkeysJs doesn't have unbind
-  if (typeof (hotkeysJs as any).unbind === 'function') {
-    (hotkeysJs as any).unbind(keys);
+  const hotkeysFn = hotkeysJs as unknown as { unbind?: (keys: string) => void };
+  if (typeof hotkeysFn.unbind === 'function') {
+    hotkeysFn.unbind(keys);
   }
 };
 
@@ -40,29 +48,29 @@ export const uuid = () =>
     return v.toString(16);
   });
 
-export const set = <T extends object>(obj: T, path: string | string[], value: any) => {
+const set = <T extends object>(obj: T, path: string | string[], value: unknown) => {
   path = Array.isArray(path) ? path : path.replace('[', '.').replace(']', '').split('.');
-  let src: any = obj;
+  let src: Record<string, unknown> = obj as Record<string, unknown>;
   path.forEach((key, index, array) => {
     if (index == path.length - 1) {
       src[key] = value;
     } else {
-      if (!src.hasOwnProperty(key)) {
+      if (!Object.prototype.hasOwnProperty.call(src, key)) {
         const next = array[index + 1];
         src[key] = String(Number(next)) === next ? [] : {};
       }
-      src = src[key];
+      src = src[key] as Record<string, unknown>;
     }
   });
 };
 
-export const debounce = <T extends Function>(cb: T, wait = 20) => {
+export const debounce = <T extends (...args: unknown[]) => unknown>(cb: T, wait = 20) => {
   let h: null | ReturnType<typeof setTimeout> = null;
-  const callable = (...args: any) => {
+  const callable = (...args: Parameters<T>) => {
     if (h) clearTimeout(h);
     h = setTimeout(() => cb(...args), wait);
   };
-  return <T>(<any>callable);
+  return callable as T;
 };
 
 const shift = (number: number, precision: number, reverseShift: boolean) => {
@@ -147,22 +155,22 @@ export const initShortCuts = (arg: {
       case up:
       case shiftUp:
         e.preventDefault();
-        arg.move('up', (hotkeys as any).shift);
+        arg.move('up', hotkeys.shift);
         break;
       case down:
       case shiftDown:
         e.preventDefault();
-        arg.move('down', (hotkeys as any).shift);
+        arg.move('down', hotkeys.shift);
         break;
       case left:
       case shiftLeft:
         e.preventDefault();
-        arg.move('left', (hotkeys as any).shift);
+        arg.move('left', hotkeys.shift);
         break;
       case right:
       case shiftRight:
         e.preventDefault();
-        arg.move('right', (hotkeys as any).shift);
+        arg.move('right', hotkeys.shift);
         break;
       case rmWin:
       case rmMac:
@@ -204,7 +212,7 @@ export const initShortCuts = (arg: {
 };
 
 export const destroyShortCuts = () => {
-  (hotkeys as any).unbind(keys.join());
+  hotkeys.unbind(keys.join());
 };
 
 /**
@@ -259,10 +267,10 @@ export const arrayBufferToBase64 = (arrayBuffer: ArrayBuffer): string => {
 };
 
 const convertSchemasForUI = (template: Template): SchemaForUI[][] => {
-  template.schemas.forEach((page: any[]) => {
-    page.forEach((schema: any) => {
-      schema.id = uuid();
-      schema.content = schema.content || '';
+  template.schemas.forEach((page) => {
+    page.forEach((schema) => {
+      (schema as SchemaForUI).id = uuid();
+      (schema as SchemaForUI).content = schema.content || '';
     });
   });
 
@@ -282,8 +290,8 @@ export const template2SchemasList = async (_template: Template) => {
     }));
   } else {
     const b64BasePdf = await getB64BasePdf(basePdf);
-    // @ts-expect-error
-    const pdfArrayBuffer = b64toUint8Array(b64BasePdf) as ArrayBuffer;
+    // pdf2size accepts both ArrayBuffer and Uint8Array
+    const pdfArrayBuffer = b64toUint8Array(b64BasePdf);
 
     pageSizes = await pdf2size(pdfArrayBuffer);
   }
@@ -317,7 +325,7 @@ export const template2SchemasList = async (_template: Template) => {
 export const schemasList2template = (schemasList: SchemaForUI[][], basePdf: BasePdf): Template => ({
   schemas: cloneDeep(schemasList).map((page) =>
     page.map((schema) => {
-      // @ts-ignore
+      // @ts-expect-error Property 'id' is used only in UI
       delete schema.id;
       return schema;
     }),
@@ -420,14 +428,15 @@ export const getSidebarContentHeight = (sidebarHeight: number) =>
 const handlePositionSizeChange = (
   schema: SchemaForUI,
   key: string,
-  value: any,
+  value: unknown,
   basePdf: BasePdf,
   pageSize: Size,
 ) => {
   const padding = isBlankPdf(basePdf) ? basePdf.padding : [0, 0, 0, 0];
   const [pt, pr, pb, pl] = padding;
   const { width: pw, height: ph } = pageSize;
-  const calcBounds = (v: any, min: number, max: number) => Math.min(Math.max(Number(v), min), max);
+  const calcBounds = (v: unknown, min: number, max: number) =>
+    Math.min(Math.max(Number(v), min), max);
   if (key === 'position.x') {
     schema.position.x = calcBounds(value, pl, pw - schema.width - pr);
   } else if (key === 'position.y') {
@@ -442,7 +451,7 @@ const handlePositionSizeChange = (
 const handleTypeChange = (
   schema: SchemaForUI,
   key: string,
-  value: any,
+  value: unknown,
   pluginsRegistry: Plugins,
 ) => {
   if (key !== 'type') return;
@@ -453,21 +462,110 @@ const handleTypeChange = (
     }
   });
   // Apply attributes from new defaultSchema
-  const propPanel = Object.values(pluginsRegistry).find(
-    (plugin) => plugin?.propPanel.defaultSchema.type === value,
-  )?.propPanel;
-  Object.keys(propPanel?.defaultSchema || {}).forEach((key) => {
-    if (!schema.hasOwnProperty(key)) {
-      (schema as any)[key] = propPanel?.defaultSchema[key];
+  // Find the plugin with matching type
+  const pluginValue = value as string;
+
+  // Define a type-safe approach to find the matching plugin
+  interface PluginSchema {
+    type: string;
+    [key: string]: unknown;
+  }
+
+  interface PluginType {
+    propPanel: {
+      defaultSchema: PluginSchema;
+    };
+  }
+
+  // Initialize plugin as undefined
+  let plugin: PluginType | undefined;
+
+  // Safely iterate through plugins to find one with matching type
+  const pluginEntries = Object.entries(pluginsRegistry);
+  for (let i = 0; i < pluginEntries.length; i++) {
+    const [, pluginObj] = pluginEntries[i];
+
+    // Skip invalid plugins
+    if (!pluginObj || typeof pluginObj !== 'object') continue;
+
+    // Check if propPanel exists and is an object
+    if (
+      !('propPanel' in pluginObj) ||
+      !pluginObj.propPanel ||
+      typeof pluginObj.propPanel !== 'object'
+    )
+      continue;
+
+    // Check if defaultSchema exists and is an object
+    const propPanel = pluginObj.propPanel as { defaultSchema?: unknown };
+    if (
+      !('defaultSchema' in propPanel) ||
+      !propPanel.defaultSchema ||
+      typeof propPanel.defaultSchema !== 'object'
+    )
+      continue;
+
+    // Safely check if type property exists and matches
+    const defaultSchema = propPanel.defaultSchema as Record<string, unknown>;
+    if (!('type' in defaultSchema) || typeof defaultSchema.type !== 'string') continue;
+
+    // Check if the type matches
+    const schemaType = defaultSchema.type;
+    if (schemaType === pluginValue) {
+      // Create a type-safe copy of the plugin
+      const safeSchema: PluginSchema = {
+        type: schemaType,
+      };
+
+      // Copy other properties safely
+      Object.keys(defaultSchema).forEach((key) => {
+        if (key !== 'type' && Object.prototype.hasOwnProperty.call(defaultSchema, key)) {
+          safeSchema[key] = defaultSchema[key];
+        }
+      });
+
+      // Found matching plugin with proper typing
+      plugin = {
+        propPanel: {
+          defaultSchema: safeSchema,
+        },
+      };
+      break;
     }
-  });
+  }
+
+  const propPanel = plugin?.propPanel;
+
+  // Apply default schema properties if available
+  if (propPanel?.defaultSchema) {
+    // Create a type-safe copy of the default schema
+    const defaultSchema = propPanel.defaultSchema;
+    const schemaRecord = schema as Record<string, unknown>;
+
+    // Use a type-safe approach to copy properties
+    for (const key of Object.keys(defaultSchema)) {
+      // Only add properties that don't already exist in the schema
+      if (!Object.prototype.hasOwnProperty.call(schema, key)) {
+        // Create a safe copy of the property
+        if (Object.prototype.hasOwnProperty.call(defaultSchema, key)) {
+          // Get the property value safely
+          const propertyValue = defaultSchema[key];
+
+          // Only assign if the value is defined
+          if (propertyValue !== undefined) {
+            schemaRecord[key] = propertyValue;
+          }
+        }
+      }
+    }
+  }
   if (schema.readOnly) {
     schema.required = false;
   }
 };
 
 export const changeSchemas = (args: {
-  objs: { key: string; value: any; schemaId: string }[];
+  objs: { key: string; value: unknown; schemaId: string }[];
   schemas: SchemaForUI[];
   basePdf: BasePdf;
   pluginsRegistry: Plugins;
@@ -492,8 +590,8 @@ export const changeSchemas = (args: {
   commitSchemas(newSchemas);
 };
 
-export const getMaxZoom = () => {
+export const useMaxZoom = () => {
   const options = useContext(OptionsContext);
 
-  return options.maxZoom ? (options.maxZoom as number) / 100 : DEFAULT_MAX_ZOOM;
+  return options.maxZoom ? options.maxZoom / 100 : DEFAULT_MAX_ZOOM;
 };

package/src/types/react-guides.d.ts

@@ -1,22 +0,0 @@
-declare module '@scena/react-guides' {
-  import { Component, ForwardRefExoticComponent, RefAttributes } from 'react';
-
-  interface GuidesInterface {
-    getGuides(): number[];
-    scroll(pos: number): void;
-    scrollGuides(pos: number): void;
-    loadGuides(guides: number[]): void;
-    resize(): void;
-  }
-
-  interface GuidesProps {
-    zoom?: number;
-    style?: React.CSSProperties;
-    type?: 'horizontal' | 'vertical';
-  }
-
-  // Define the component as a ForwardRefExoticComponent to support refs
-  const GuidesComponent: ForwardRefExoticComponent<GuidesProps & RefAttributes<GuidesInterface>>;
-
-  export default GuidesComponent;
-}

package/src/types/react-selecto.d.ts

@@ -1,35 +0,0 @@
-declare module 'react-selecto' {
-  import { ForwardRefExoticComponent, RefAttributes } from 'react';
-
-  interface OnDragStart {
-    inputEvent: MouseEvent;
-    stop: () => void;
-    isTrusted: boolean;
-  }
-
-  interface OnSelect {
-    selected: Element[];
-    added: Element[];
-    removed: Element[];
-    inputEvent: MouseEvent;
-    rect: DOMRect;
-  }
-
-  interface SelectoProps {
-    className?: string;
-    selectFromInside?: boolean;
-    selectByClick?: boolean;
-    preventDefault?: boolean;
-    hitRate?: number;
-    selectableTargets?: string[];
-    container?: HTMLElement | null;
-    continueSelect?: boolean;
-    onDragStart?: (e: OnDragStart) => void;
-    onSelect?: (e: OnSelect) => void;
-  }
-
-  // Define the component as a ForwardRefExoticComponent
-  const SelectoComponent: ForwardRefExoticComponent<SelectoProps & RefAttributes<any>>;
-
-  export default SelectoComponent;
-}