@pdfme/ui 5.3.17 → 5.3.18-dev.1

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

@@ -1,4 +1,4 @@
-import { Template, Size, Plugins, UIProps, UIOptions, PreviewProps } from '@pdfme/common';
+import { Template, Size, UIProps, UIOptions, PluginRegistry, PreviewProps } from '@pdfme/common';
 export declare abstract class BaseUIClass {
     protected domContainer: HTMLElement | null;
     protected template: Template;
@@ -16,7 +16,7 @@ export declare abstract class BaseUIClass {
         fallback?: boolean | undefined;
         subset?: boolean | undefined;
     }>;
-    protected getPluginsRegistry(): Plugins;
+    protected getPluginsRegistry(): PluginRegistry;
     getOptions(): UIOptions;
     getTemplate(): import("zod").objectOutputType<{
         schemas: import("zod").ZodArray<import("zod").ZodArray<import("zod").ZodObject<{

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import type { Plugins, Font, Lang, UIOptions } from '@pdfme/common';
+import type { Font, Lang, UIOptions, PluginRegistry } from '@pdfme/common';
 type Props = {
     children: React.ReactNode;
     lang: Lang;
     font: Font;
-    plugins: Plugins;
+    plugins: PluginRegistry;
     options: UIOptions;
 };
 declare const AppContextProvider: ({ children, lang, font, plugins, options }: Props) => React.JSX.Element;

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

@@ -1,10 +1,10 @@
-import { Plugins, UIOptions } from '@pdfme/common';
+import { PluginRegistry, UIOptions } from '@pdfme/common';
 export declare const I18nContext: import("react").Context<(key: keyof import("@pdfme/common").Dict, dict?: import("@pdfme/common").Dict) => string>;
 export declare const FontContext: import("react").Context<Record<string, {
     data: string | ArrayBuffer | Uint8Array<ArrayBufferLike>;
     fallback?: boolean | undefined;
     subset?: boolean | undefined;
 }>>;
-export declare const PluginsRegistry: import("react").Context<Plugins>;
+export declare const PluginsRegistry: import("react").Context<PluginRegistry>;
 export declare const OptionsContext: import("react").Context<UIOptions>;
 export declare const CacheContext: import("react").Context<Map<string | number, unknown>>;

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

@@ -1,4 +1,4 @@
-import { Template, BasePdf, SchemaForUI, Size, Plugins } from '@pdfme/common';
+import { Template, BasePdf, SchemaForUI, Size, PluginRegistry } from '@pdfme/common';
 export declare const uuid: () => string;
 export declare const debounce: <T extends (...args: unknown[]) => unknown>(cb: T, wait?: number) => T;
 export declare const round: (number: number, precision: number) => number;
@@ -63,7 +63,7 @@ export declare const changeSchemas: (args: {
     }[];
     schemas: SchemaForUI[];
     basePdf: BasePdf;
-    pluginsRegistry: Plugins;
+    pluginsRegistry: PluginRegistry;
     pageSize: {
         width: number;
         height: number;
@@ -71,3 +71,4 @@ export declare const changeSchemas: (args: {
     commitSchemas: (newSchemas: SchemaForUI[]) => void;
 }) => void;
 export declare const useMaxZoom: () => number;
+export declare const setFontNameRecursively: (obj: Record<string, unknown>, fontName: string, seen?: WeakSet<WeakKey>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "5.3.17",
+  "version": "5.3.18-dev.1",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/class.ts

@@ -7,9 +7,9 @@ import {
   Size,
   Lang,
   Font,
-  Plugins,
   UIProps,
   UIOptions,
+  PluginRegistry,
   PreviewProps,
   getDefaultFont,
   checkUIProps,
@@ -17,6 +17,7 @@ import {
   checkInputs,
   checkUIOptions,
   checkPreviewProps,
+  pluginRegistry,
 } from '@pdfme/common';
 import { builtInPlugins } from '@pdfme/schemas';
 
@@ -31,7 +32,7 @@ export abstract class BaseUIClass {
 
   private font: Font = getDefaultFont();
 
-  private pluginsRegistry: Plugins = builtInPlugins;
+  private pluginsRegistry: PluginRegistry = pluginRegistry(builtInPlugins);
 
   private options: UIOptions = {};
 
@@ -70,7 +71,7 @@ export abstract class BaseUIClass {
     }
 
     if (Object.values(plugins).length > 0) {
-      this.pluginsRegistry = plugins;
+      this.pluginsRegistry = pluginRegistry(plugins);
     }
   }
 

package/src/components/AppContextProvider.tsx

@@ -3,13 +3,13 @@ import { ConfigProvider as ThemeConfigProvider } from 'antd';
 import { I18nContext, FontContext, PluginsRegistry, OptionsContext } from '../contexts.js';
 import { i18n, getDict } from '../i18n.js';
 import { defaultTheme } from '../theme.js';
-import type { Dict, Plugins, Font, Lang, UIOptions } from '@pdfme/common';
+import type { Dict, Font, Lang, UIOptions, PluginRegistry } from '@pdfme/common';
 
 type Props = {
   children: React.ReactNode;
   lang: Lang;
   font: Font;
-  plugins: Plugins;
+  plugins: PluginRegistry;
   options: UIOptions;
 };
 

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

@@ -335,17 +335,8 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
     // 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
-      ) {
+    pluginsRegistry.entries().forEach(([, plugin]) => {
+      if (plugin.propPanel.defaultSchema) {
         defaultSchemas.push(plugin.propPanel.defaultSchema as Record<string, unknown>);
       }
     });

package/src/components/Designer/LeftSidebar.tsx

@@ -1,11 +1,12 @@
 import React, { useContext, useState, useEffect } from 'react';
-import { Schema, Plugin, BasePdf } from '@pdfme/common';
+import { Schema, Plugin, BasePdf, getFallbackFontName } from '@pdfme/common';
 import { theme, Button } from 'antd';
 import { useDraggable } from '@dnd-kit/core';
 import { CSS } from '@dnd-kit/utilities';
 import Renderer from '../Renderer.js';
 import { LEFT_SIDEBAR_WIDTH } from '../../constants.js';
-import { PluginsRegistry } from '../../contexts.js';
+import { setFontNameRecursively } from '../../helper';
+import { OptionsContext, PluginsRegistry } from '../../contexts.js';
 import PluginIcon from './PluginIcon.js';
 
 const Draggable = (props: {
@@ -16,7 +17,12 @@ const Draggable = (props: {
 }) => {
   const { scale, basePdf, plugin } = props;
   const { token } = theme.useToken();
+  const options = useContext(OptionsContext);
   const defaultSchema = plugin.propPanel.defaultSchema;
+  if (options.font) {
+    const fontName = getFallbackFontName(options.font);
+    setFontNameRecursively(defaultSchema, fontName);
+  }
   const draggable = useDraggable({ id: defaultSchema.type, data: defaultSchema });
   const { listeners, setNodeRef, attributes, transform, isDragging } = draggable;
   const style = { transform: CSS.Translate.toString(transform) };
@@ -86,7 +92,7 @@ const LeftSidebar = ({
         overflow: isDragging ? 'visible' : 'auto',
       }}
     >
-      {Object.entries(pluginsRegistry).map(([label, plugin]) => {
+      {pluginsRegistry.entries().map(([label, plugin]) => {
         if (!plugin?.propPanel.defaultSchema) return null;
 
         return (

package/src/components/Designer/PluginIcon.tsx

@@ -39,18 +39,9 @@ const PluginIcon = (props: PluginIconProps) => {
   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 schemaType = plugin.propPanel.defaultSchema?.type ?? '';
 
-  const icon = options.icons?.[defaultSchemaType] ?? plugin.icon;
+  const icon = options.icons?.[schemaType] ?? plugin.icon;
   const iconStyles = {
     ...styles,
     color: token.colorText,

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

@@ -64,8 +64,8 @@ const DetailView = (props: DetailViewProps) => {
       ),
       ButtonGroup: (p) => <ButtonGroupWidget {...p} {...props} options={options} />,
     };
-    for (const plugin of Object.values(pluginsRegistry)) {
-      const widgets = plugin?.propPanel.widgets || {};
+    for (const plugin of pluginsRegistry.values()) {
+      const widgets = plugin.propPanel.widgets || {};
       Object.entries(widgets).forEach(([widgetKey, widgetValue]) => {
         newWidgets[widgetKey] = (p) => (
           <WidgetRenderer
@@ -171,64 +171,18 @@ const DetailView = (props: DetailViewProps) => {
     }
   }, 100);
 
-  // Find the active plugin with proper type safety
-  const activePlugin = Object.values(pluginsRegistry).find((plugin) => {
-    if (!plugin || typeof plugin !== 'object') return false;
-    if (!plugin.propPanel || typeof plugin.propPanel !== 'object') return false;
-    if (!plugin.propPanel.defaultSchema || typeof plugin.propPanel.defaultSchema !== 'object')
-      return false;
-
-    const defaultSchema = plugin.propPanel.defaultSchema as Record<string, unknown>;
-    return (
-      'type' in defaultSchema &&
-      typeof defaultSchema.type === 'string' &&
-      defaultSchema.type === activeSchema.type
-    );
-  });
-
-  // Safely access the propPanel schema
-  const activePropPanelSchema = activePlugin?.propPanel?.schema;
-  if (!activePropPanelSchema) {
-    console.error(`[@pdfme/ui] No propPanel.schema for ${activeSchema.type}.
-Check this document: https://pdfme.com/docs/custom-schemas`);
+  const activePlugin = pluginsRegistry.findByType(activeSchema.type);
+  if (!activePlugin) {
+    throw Error(`[@pdfme/ui] Failed to find plugin used for ${activeSchema.type}`);
   }
 
-  // Create type-safe options for the type dropdown
-  // Create a type-safe options array for the dropdown
+  const activePropPanelSchema = activePlugin.propPanel.schema;
   const typeOptions: Array<{ label: string; value: string | undefined }> = [];
 
-  // Safely populate the options array
-  Object.entries(pluginsRegistry).forEach(([label, value]) => {
-    // Skip invalid plugins
-    if (!value || typeof value !== 'object') {
-      typeOptions.push({ label, value: undefined });
-      return;
-    }
-
-    if (!('propPanel' in value) || !value.propPanel || typeof value.propPanel !== 'object') {
-      typeOptions.push({ label, value: undefined });
-      return;
-    }
-
-    if (
-      !('defaultSchema' in value.propPanel) ||
-      !value.propPanel.defaultSchema ||
-      typeof value.propPanel.defaultSchema !== 'object'
-    ) {
-      typeOptions.push({ label, value: undefined });
-      return;
-    }
-
-    // Safely extract the type
-    const defaultSchema = value.propPanel.defaultSchema as Record<string, unknown>;
-    let schemaType: string | undefined = undefined;
-
-    if ('type' in defaultSchema && typeof defaultSchema.type === 'string') {
-      schemaType = defaultSchema.type;
-    }
-
-    typeOptions.push({ label, value: schemaType });
+  pluginsRegistry.entries().forEach(([label, plugin]) => {
+    typeOptions.push({ label, value: plugin.propPanel.defaultSchema?.type ?? undefined });
   });
+
   // Create a safe empty schema as fallback
   const emptySchema: Record<string, unknown> = {};
 
@@ -236,15 +190,6 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
   const defaultSchema: Record<string, unknown> = activePlugin?.propPanel?.defaultSchema
     ? // Create a safe copy of the schema
       (() => {
-        // First check if the defaultSchema is an object
-        if (
-          typeof activePlugin.propPanel.defaultSchema !== 'object' ||
-          activePlugin.propPanel.defaultSchema === null
-        ) {
-          return emptySchema;
-        }
-
-        // Create a safe copy
         const result: Record<string, unknown> = {};
 
         // Only copy properties that exist on the object

package/src/components/Designer/RightSidebar/ListView/SelectableSortableContainer.tsx

@@ -65,26 +65,7 @@ const SelectableSortableContainer = (
 
     if (!thisSchema) return <></>;
 
-    // Safely extract schema type
-    const schemaType = typeof thisSchema.type === 'string' ? thisSchema.type : '';
-
-    // Find matching plugin with type-safe approach
-    const pluginEntry = Object.entries(pluginsRegistry).find(([, plugin]) => {
-      if (!plugin || typeof plugin !== 'object') return false;
-      if (!plugin.propPanel || typeof plugin.propPanel !== 'object') return false;
-      if (!plugin.propPanel.defaultSchema || typeof plugin.propPanel.defaultSchema !== 'object')
-        return false;
-
-      // Use Record<string, unknown> to safely access properties
-      const defaultSchema = plugin.propPanel.defaultSchema as Record<string, unknown>;
-      return (
-        'type' in defaultSchema &&
-        typeof defaultSchema.type === 'string' &&
-        defaultSchema.type === schemaType
-      );
-    });
-
-    const [pluginLabel, activePlugin] = pluginEntry || ['', undefined];
+    const [pluginLabel, activePlugin] = pluginsRegistry.findWithLabelByType(thisSchema.type);
 
     if (!activePlugin) {
       return <></>;

package/src/components/Designer/RightSidebar/ListView/SelectableSortableItem.tsx

@@ -42,26 +42,7 @@ const SelectableSortableItem = ({
     onClick: (event: React.MouseEvent) => onSelect(schema.id, event.shiftKey),
   };
 
-  // Safely extract schema type
-  const schemaType = typeof schema.type === 'string' ? schema.type : '';
-
-  // Find matching plugin with type-safe approach
-  const pluginEntry = Object.entries(pluginsRegistry).find(([, plugin]) => {
-    if (!plugin || typeof plugin !== 'object') return false;
-    if (!plugin.propPanel || typeof plugin.propPanel !== 'object') return false;
-    if (!plugin.propPanel.defaultSchema || typeof plugin.propPanel.defaultSchema !== 'object')
-      return false;
-
-    // Use Record<string, unknown> to safely access properties
-    const defaultSchema = plugin.propPanel.defaultSchema as Record<string, unknown>;
-    return (
-      'type' in defaultSchema &&
-      typeof defaultSchema.type === 'string' &&
-      defaultSchema.type === schemaType
-    );
-  });
-
-  const [pluginLabel, thisPlugin] = pluginEntry || ['', undefined];
+  const [pluginLabel, thisPlugin] = pluginsRegistry.findWithLabelByType(schema.type);
 
   let status: undefined | 'is-warning' | 'is-danger';
   if (!schema.name) {

package/src/components/Renderer.tsx

@@ -52,7 +52,7 @@ const useRerenderDependencies = (arg: ReRenderCheckProps) => {
     } else {
       return [value, mode, scale, JSON.stringify(schema), optionStr];
     }
-  }, [plugin?.uninterruptedEditMode, value, mode, scale, schema, optionStr, plugin]);
+  }, [value, mode, scale, schema, optionStr, plugin]);
 };
 
 const Wrapper = ({
@@ -109,17 +109,10 @@ const Renderer = (props: RendererProps) => {
 
   const ref = useRef<HTMLDivElement>(null);
   const _cache = useContext(CacheContext);
-  // 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;
-  });
+  const plugin = pluginsRegistry.findByType(schema.type);
 
   const reRenderDependencies = useRerenderDependencies({
-    plugin: plugin || ({} as Plugin<Schema>),
+    plugin,
     value,
     mode,
     scale,
@@ -154,9 +147,9 @@ const Renderer = (props: RendererProps) => {
         ref.current.innerHTML = '';
       }
     };
-  }, [plugin?.ui, schema.type, reRenderDependencies]);
+  }, reRenderDependencies);
 
-  if (!plugin || !plugin.ui) {
+  if (!plugin) {
     console.error(`[@pdfme/ui] Renderer for type ${schema.type} not found. 
 Check this document: https://pdfme.com/docs/custom-schemas`);
     return <></>;

package/src/components/StaticSchema.tsx

@@ -25,11 +25,11 @@ const StaticSchema = (props: {
           key={schema.name}
           schema={{ ...schema, id: uuid() }}
           basePdf={basePdf}
-          value={replacePlaceholders({
+          value={schema.readOnly ? replacePlaceholders({
             content: schema.content || '',
             variables: { ...input, totalPages, currentPage },
             schemas,
-          })}
+          }) : schema.content || ''}
           onChangeHoveringSchemaId={() => {
             void 0;
           }}

package/src/contexts.ts

@@ -1,13 +1,13 @@
 import { createContext } from 'react';
 import { i18n } from './i18n.js';
-import { getDefaultFont, Plugins, UIOptions } from '@pdfme/common';
+import { getDefaultFont, PluginRegistry, pluginRegistry, UIOptions } from '@pdfme/common';
 import { builtInPlugins } from '@pdfme/schemas';
 
 export const I18nContext = createContext(i18n);
 
 export const FontContext = createContext(getDefaultFont());
 
-export const PluginsRegistry = createContext<Plugins>(builtInPlugins);
+export const PluginsRegistry = createContext<PluginRegistry>(pluginRegistry(builtInPlugins));
 
 export const OptionsContext = createContext<UIOptions>({});
 

package/src/helper.ts

@@ -10,7 +10,7 @@ import {
   SchemaForUI,
   Size,
   isBlankPdf,
-  Plugins,
+  PluginRegistry,
 } from '@pdfme/common';
 import { pdf2size } from '@pdfme/converter';
 import { DEFAULT_MAX_ZOOM, RULER_HEIGHT } from './constants.js';
@@ -452,7 +452,7 @@ const handleTypeChange = (
   schema: SchemaForUI,
   key: string,
   value: unknown,
-  pluginsRegistry: Plugins,
+  pluginsRegistry: PluginRegistry,
 ) => {
   if (key !== 'type') return;
   const keysToKeep = ['id', 'name', 'type', 'position', 'required'];
@@ -461,100 +461,21 @@ const handleTypeChange = (
       delete schema[key as keyof typeof schema];
     }
   });
-  // Apply attributes from new defaultSchema
-  // 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;
+  const plugin = pluginsRegistry.findByType(value as string);
 
   // Apply default schema properties if available
-  if (propPanel?.defaultSchema) {
-    // Create a type-safe copy of the default schema
-    const defaultSchema = propPanel.defaultSchema;
+  if (plugin?.propPanel.defaultSchema) {
+    const defaultSchema = plugin.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;
-          }
+        const propertyValue = defaultSchema[key];
+        if (propertyValue !== undefined) {
+          schemaRecord[key] = propertyValue;
         }
       }
     }
@@ -568,7 +489,7 @@ export const changeSchemas = (args: {
   objs: { key: string; value: unknown; schemaId: string }[];
   schemas: SchemaForUI[];
   basePdf: BasePdf;
-  pluginsRegistry: Plugins;
+  pluginsRegistry: PluginRegistry;
   pageSize: { width: number; height: number };
   commitSchemas: (newSchemas: SchemaForUI[]) => void;
 }) => {
@@ -595,3 +516,20 @@ export const useMaxZoom = () => {
 
   return options.maxZoom ? options.maxZoom / 100 : DEFAULT_MAX_ZOOM;
 };
+
+export const setFontNameRecursively = (
+  obj: Record<string, unknown>,
+  fontName: string,
+  seen = new WeakSet(),
+): void => {
+  if (!obj || typeof obj !== 'object' || seen.has(obj)) return;
+  seen.add(obj);
+
+  for (const key in obj) {
+    if (key === 'fontName' && Object.prototype.hasOwnProperty.call(obj, key) && obj[key] === undefined) {
+      obj[key] = fontName;
+    } else if (typeof obj[key] === 'object' && obj[key] !== null) {
+      setFontNameRecursively(obj[key] as Record<string, unknown>, fontName, seen);
+    }
+  }
+};