@pdfme/ui 5.3.8 → 5.3.9-dev.1

package/src/components/Designer/index.tsx

@@ -12,11 +12,11 @@ import {
   px2mm,
 } from '@pdfme/common';
 import { DndContext } from '@dnd-kit/core';
-import RightSidebar from './RightSidebar/index';
-import LeftSidebar from './LeftSidebar';
-import Canvas from './Canvas/index';
-import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH, LEFT_SIDEBAR_WIDTH } from '../../constants';
-import { I18nContext, OptionsContext, PluginsRegistry } from '../../contexts';
+import RightSidebar from './RightSidebar/index.js';
+import LeftSidebar from './LeftSidebar.js';
+import Canvas from './Canvas/index.js';
+import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH, LEFT_SIDEBAR_WIDTH } from '../../constants.js';
+import { I18nContext, OptionsContext, PluginsRegistry } from '../../contexts.js';
 import {
   schemasList2template,
   uuid,
@@ -25,11 +25,11 @@ import {
   getPagesScrollTopByIndex,
   changeSchemas as _changeSchemas,
   getMaxZoom,
-} from '../../helper';
-import { useUIPreProcessor, useScrollPageCursor, useInitEvents } from '../../hooks';
-import Root from '../Root';
-import ErrorScreen from '../ErrorScreen';
-import CtlBar from '../CtlBar';
+} from '../../helper.js';
+import { useUIPreProcessor, useScrollPageCursor, useInitEvents } from '../../hooks.js';
+import Root from '../Root.js';
+import ErrorScreen from '../ErrorScreen.js';
+import CtlBar from '../CtlBar.js';
 
 /**
  * When the canvas scales there is a displacement of the starting position of the dragged schema.
@@ -40,7 +40,7 @@ const scaleDragPosAdjustment = (adjustment: number, scale: number): number => {
   if (scale > 1) return adjustment * (scale - 1);
   if (scale < 1) return adjustment * -(1 - scale);
   return 0;
-}
+};
 
 const TemplateEditor = ({
   template,
@@ -53,8 +53,8 @@ const TemplateEditor = ({
   onSaveTemplate: (t: Template) => void;
   onChangeTemplate: (t: Template) => void;
 } & {
-  onChangeTemplate: (t: Template) => void
-  onPageCursorChange: (newPageCursor: number) => void
+  onChangeTemplate: (t: Template) => void;
+  onPageCursorChange: (newPageCursor: number) => void;
 }) => {
   const past = useRef<SchemaForUI[][]>([]);
   const future = useRef<SchemaForUI[][]>([]);
@@ -74,8 +74,12 @@ const TemplateEditor = ({
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const [prevTemplate, setPrevTemplate] = useState<Template | null>(null);
 
-  const { backgrounds, pageSizes, scale, error, refresh } =
-    useUIPreProcessor({ template, size, zoomLevel, maxZoom });
+  const { backgrounds, pageSizes, scale, error, refresh } = useUIPreProcessor({
+    template,
+    size,
+    zoomLevel,
+    maxZoom,
+  });
 
   const onEdit = (targets: HTMLElement[]) => {
     setActiveElements(targets);
@@ -94,7 +98,7 @@ const TemplateEditor = ({
     pageCursor,
     onChangePageCursor: (p) => {
       setPageCursor(p);
-      onPageCursorChange(p)
+      onPageCursorChange(p);
       onEditEnd();
     },
   });
@@ -108,7 +112,7 @@ const TemplateEditor = ({
       setSchemasList(_schemasList);
       onChangeTemplate(schemasList2template(_schemasList, template.basePdf));
     },
-    [template, schemasList, pageCursor, onChangeTemplate]
+    [template, schemasList, pageCursor, onChangeTemplate],
   );
 
   const removeSchemas = useCallback(
@@ -116,7 +120,7 @@ const TemplateEditor = ({
       commitSchemas(schemasList[pageCursor].filter((schema) => !ids.includes(schema.id)));
       onEditEnd();
     },
-    [schemasList, pageCursor, commitSchemas]
+    [schemasList, pageCursor, commitSchemas],
   );
 
   const changeSchemas: ChangeSchemas = useCallback(
@@ -130,7 +134,7 @@ const TemplateEditor = ({
         commitSchemas,
       });
     },
-    [commitSchemas, pageCursor, schemasList, pluginsRegistry, pageSizes, template.basePdf]
+    [commitSchemas, pageCursor, schemasList, pluginsRegistry, pageSizes, template.basePdf],
   );
 
   useInitEvents({
@@ -161,29 +165,42 @@ const TemplateEditor = ({
   }, []);
 
   const addSchema = (defaultSchema: Schema) => {
-    const [paddingTop, paddingRight, paddingBottom, paddingLeft] = isBlankPdf(template.basePdf) ? template.basePdf.padding : [0, 0, 0, 0];
+    const [paddingTop, paddingRight, paddingBottom, paddingLeft] = isBlankPdf(template.basePdf)
+      ? template.basePdf.padding
+      : [0, 0, 0, 0];
     const pageSize = pageSizes[pageCursor];
 
     const newSchemaName = (prefix: string) => {
       let index = schemasList.reduce((acc, page) => acc + page.length, 1);
       let newName = prefix + index;
-      while (schemasList.some(page => page.find((s) => s.name === newName))) {
+      while (schemasList.some((page) => page.find((s) => s.name === newName))) {
         index++;
         newName = prefix + index;
       }
       return newName;
     };
-    const ensureMiddleValue = (min: number, value: number, max: number) => Math.min(Math.max(min, value), max)
+    const ensureMiddleValue = (min: number, value: number, max: number) =>
+      Math.min(Math.max(min, value), max);
 
     const s = {
       id: uuid(),
       ...defaultSchema,
       name: newSchemaName(i18n('field')),
       position: {
-        x: ensureMiddleValue(paddingLeft, defaultSchema.position.x, pageSize.width - paddingRight - defaultSchema.width),
-        y: ensureMiddleValue(paddingTop, defaultSchema.position.y, pageSize.height - paddingBottom - defaultSchema.height),
+        x: ensureMiddleValue(
+          paddingLeft,
+          defaultSchema.position.x,
+          pageSize.width - paddingRight - defaultSchema.width,
+        ),
+        y: ensureMiddleValue(
+          paddingTop,
+          defaultSchema.position.y,
+          pageSize.height - paddingBottom - defaultSchema.height,
+        ),
       },
-      required: defaultSchema.readOnly ? false : options.requiredByDefault || defaultSchema.required || false,
+      required: defaultSchema.readOnly
+        ? false
+        : options.requiredByDefault || defaultSchema.required || false,
     } as SchemaForUI;
 
     if (defaultSchema.position.y === 0) {
@@ -213,7 +230,8 @@ const TemplateEditor = ({
     setTimeout(
       () =>
         canvasRef.current &&
-        ((canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, newPageCursor, scale)), 0)
+        ((canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, newPageCursor, scale)),
+        0),
     );
   };
 
@@ -262,13 +280,17 @@ const TemplateEditor = ({
           const dragStartLeft = active.rect.current.initial?.left || 0;
           const dragStartTop = active.rect.current.initial?.top || 0;
 
-          const canvasLeftOffsetFromPageCorner = pageRect.left - dragStartLeft + scaleDragPosAdjustment(20, scale);
+          const canvasLeftOffsetFromPageCorner =
+            pageRect.left - dragStartLeft + scaleDragPosAdjustment(20, scale);
           const canvasTopOffsetFromPageCorner = pageRect.top - dragStartTop;
 
           const moveY = (event.delta.y - canvasTopOffsetFromPageCorner) / scale;
           const moveX = (event.delta.x - canvasLeftOffsetFromPageCorner) / scale;
 
-          const position = { x: round(px2mm(Math.max(0, moveX)), 2), y: round(px2mm(Math.max(0, moveY)), 2) }
+          const position = {
+            x: round(px2mm(Math.max(0, moveX)), 2),
+            y: round(px2mm(Math.max(0, moveY)), 2),
+          };
 
           addSchema({ ...(active.data.current as Schema), position });
         }}
@@ -307,7 +329,7 @@ const TemplateEditor = ({
             schemas={schemasList[pageCursor] ?? []}
             changeSchemas={changeSchemas}
             onSortEnd={onSortEnd}
-            onEdit={id => {
+            onEdit={(id) => {
               const editingElem = document.getElementById(id);
               editingElem && onEdit([editingElem]);
             }}

package/src/components/ErrorScreen.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { Size } from '@pdfme/common';
-import { I18nContext } from '../contexts';
-import { BACKGROUND_COLOR } from '../constants';
+import { I18nContext } from '../contexts.js';
+import { BACKGROUND_COLOR } from '../constants.js';
 import { theme, Result } from 'antd';
 
 const ErrorScreen = ({ size, error }: { size: Size; error: Error }) => {

package/src/components/Paper.tsx

@@ -1,7 +1,7 @@
 import React, { MutableRefObject, ReactNode, useContext } from 'react';
 import { ZOOM, SchemaForUI, Size, getFallbackFontName } from '@pdfme/common';
-import { FontContext } from '../contexts';
-import { RULER_HEIGHT, PAGE_GAP } from '../constants';
+import { FontContext } from '../contexts.js';
+import { RULER_HEIGHT, PAGE_GAP } from '../constants.js';
 
 const Paper = (props: {
   paperRefs: MutableRefObject<HTMLDivElement[]>;

package/src/components/Preview.tsx

@@ -1,16 +1,23 @@
 import React, { useRef, useState, useEffect, useContext } from 'react';
-import { Template, SchemaForUI, PreviewProps, Size, getDynamicTemplate, replacePlaceholders } from '@pdfme/common';
+import {
+  Template,
+  SchemaForUI,
+  PreviewProps,
+  Size,
+  getDynamicTemplate,
+  replacePlaceholders,
+} from '@pdfme/common';
 import { getDynamicHeightsForTable } from '@pdfme/schemas/utils';
-import UnitPager from './UnitPager';
-import Root from './Root';
-import StaticSchema from './StaticSchema';
-import ErrorScreen from './ErrorScreen';
-import CtlBar from './CtlBar';
-import Paper from './Paper';
-import Renderer from './Renderer';
-import { useUIPreProcessor, useScrollPageCursor } from '../hooks';
-import { FontContext } from '../contexts';
-import { template2SchemasList, getPagesScrollTopByIndex, getMaxZoom } from '../helper';
+import UnitPager from './UnitPager.js';
+import Root from './Root.js';
+import StaticSchema from './StaticSchema.js';
+import ErrorScreen from './ErrorScreen.js';
+import CtlBar from './CtlBar.js';
+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 { theme } from 'antd';
 
 const _cache = new Map();
@@ -37,8 +44,12 @@ const Preview = ({
   const [zoomLevel, setZoomLevel] = useState(1);
   const [schemasList, setSchemasList] = useState<SchemaForUI[][]>([[]] as SchemaForUI[][]);
 
-  const { backgrounds, pageSizes, scale, error, refresh } =
-    useUIPreProcessor({ template, size, zoomLevel, maxZoom });
+  const { backgrounds, pageSizes, scale, error, refresh } = useUIPreProcessor({
+    template,
+    size,
+    zoomLevel,
+    maxZoom,
+  });
 
   const isForm = Boolean(onChangeInput);
 
@@ -87,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: any }[], schema: SchemaForUI) => {
     let isNeedInit = false;
     args.forEach(({ key: _key, value }) => {
       if (_key === 'content') {
@@ -98,9 +109,7 @@ const Preview = ({
         // TODO Improve this to allow schema types to determine whether the execution of getDynamicTemplate is required.
         if (schema.type === 'table') isNeedInit = true;
       } else {
-        const targetSchema = schemasList[pageCursor].find(
-          (s) => s.id === schema.id
-        ) as SchemaForUI;
+        const targetSchema = schemasList[pageCursor].find((s) => s.id === schema.id) as SchemaForUI;
         if (!targetSchema) return;
 
         // @ts-ignore
@@ -110,8 +119,8 @@ const Preview = ({
     if (isNeedInit) {
       init(template);
     }
-    setSchemasList([...schemasList])
-  }
+    setSchemasList([...schemasList]);
+  };
 
   if (error) {
     return <ErrorScreen size={size} error={error} />;
@@ -146,11 +155,13 @@ const Preview = ({
           pageSizes={pageSizes}
           backgrounds={backgrounds}
           renderSchema={({ schema, index }) => {
-            const value = schema.readOnly ? replacePlaceholders({
-              content: schema.content || '',
-              variables: { ...input, totalPages: schemasList.length, currentPage: index + 1, },
-              schemas: schemasList
-            }) : String(input && input[schema.name] || '');
+            const value = schema.readOnly
+              ? replacePlaceholders({
+                  content: schema.content || '',
+                  variables: { ...input, totalPages: schemasList.length, currentPage: index + 1 },
+                  schemas: schemasList,
+                })
+              : String((input && input[schema.name]) || '');
             return (
               <Renderer
                 key={schema.id}

package/src/components/Renderer.tsx

@@ -1,8 +1,19 @@
 import React, { useEffect, useContext, ReactNode, useRef, useMemo } from 'react';
-import { Dict, Mode, ZOOM, UIRenderProps, SchemaForUI, BasePdf, Schema, Plugin, UIOptions, cloneDeep } from '@pdfme/common';
+import {
+  Dict,
+  Mode,
+  ZOOM,
+  UIRenderProps,
+  SchemaForUI,
+  BasePdf,
+  Schema,
+  Plugin,
+  UIOptions,
+  cloneDeep,
+} from '@pdfme/common';
 import { theme as antdTheme } from 'antd';
-import { SELECTABLE_CLASSNAME } from '../constants';
-import { PluginsRegistry, OptionsContext, I18nContext, CacheContext } from '../contexts';
+import { SELECTABLE_CLASSNAME } from '../constants.js';
+import { PluginsRegistry, OptionsContext, I18nContext, CacheContext } from '../contexts.js';
 
 type RendererProps = Omit<
   UIRenderProps<Schema>,
@@ -18,13 +29,13 @@ type RendererProps = Omit<
 };
 
 type ReRenderCheckProps = {
-  plugin: Plugin<any>,
-  value: string,
-  mode: Mode,
-  scale: number,
-  schema: SchemaForUI,
-  options: UIOptions,
-}
+  plugin: Plugin<any>;
+  value: string;
+  mode: Mode;
+  scale: number;
+  schema: SchemaForUI;
+  options: UIOptions;
+};
 
 export const useRerenderDependencies = (arg: ReRenderCheckProps) => {
   const { plugin, value, mode, scale, schema, options } = arg;
@@ -45,13 +56,12 @@ export const useRerenderDependencies = (arg: ReRenderCheckProps) => {
   }, [plugin.uninterruptedEditMode, value, mode, scale, schema, optionStr]);
 };
 
-
 const Wrapper = ({
   children,
   outline,
   onChangeHoveringSchemaId,
   schema,
-  selectable = true
+  selectable = true,
 }: RendererProps & { children: ReactNode }) => (
   <div
     title={schema.name}
@@ -71,16 +81,20 @@ const Wrapper = ({
       outline,
     }}
   >
-    {schema.required &&
-      <span style={{
-        color: 'red',
-        position: 'absolute',
-        top: -12,
-        left: -12,
-        fontSize: 18,
-        fontWeight: 700,
-      }}>*</span>
-    }
+    {schema.required && (
+      <span
+        style={{
+          color: 'red',
+          position: 'absolute',
+          top: -12,
+          left: -12,
+          fontSize: 18,
+          fontWeight: 700,
+        }}
+      >
+        *
+      </span>
+    )}
     {children}
   </div>
 );
@@ -94,12 +108,11 @@ const Renderer = (props: RendererProps) => {
   const i18n = useContext(I18nContext) as (key: keyof Dict | 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>;
+  const plugin = Object.values(pluginsRegistry || {}).find(
+    (plugin) => plugin?.propPanel.defaultSchema.type === schema.type,
+  ) as Plugin<any> | undefined;
 
   if (!plugin || !plugin.ui) {
     console.error(`[@pdfme/ui] Renderer for type ${schema.type} not found. 
@@ -112,7 +125,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
     mode,
     scale,
     schema,
-    options,
+    options: options as UIOptions,
   });
 
   useEffect(() => {
@@ -130,10 +143,10 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         stopEditing,
         tabIndex,
         placeholder,
-        options,
+        options: options as UIOptions,
         theme,
         i18n,
-        _cache,
+        _cache: _cache as Map<any, any>,
       });
     }
     return () => {

package/src/components/Root.tsx

@@ -1,8 +1,8 @@
 import React, { useContext, forwardRef, ReactNode, Ref, useEffect } from 'react';
 import { Size } from '@pdfme/common';
-import { FontContext } from '../contexts';
-import { BACKGROUND_COLOR } from '../constants';
-import Spinner from './Spinner';
+import { FontContext } from '../contexts.js';
+import { BACKGROUND_COLOR } from '../constants.js';
+import Spinner from './Spinner.js';
 
 type Props = { size: Size; scale: number; children: ReactNode };
 
@@ -15,15 +15,13 @@ const Root = ({ size, scale, children }: Props, ref: Ref<HTMLDivElement>) => {
       ([key, { data }]) =>
         new FontFace(key, typeof data === 'string' ? `url(${data})` : data, {
           display: 'swap',
-        })
+        }),
     );
-    // @ts-ignore
     const newFontFaces = fontFaces.filter((fontFace) => !document.fonts.has(fontFace));
 
     Promise.allSettled(newFontFaces.map((f) => f.load())).then((loadedFontFaces) => {
       loadedFontFaces.forEach((loadedFontFace) => {
         if (loadedFontFace.status === 'fulfilled') {
-          // @ts-ignore
           document.fonts.add(loadedFontFace.value);
         }
       });

package/src/components/Spinner.tsx

@@ -14,7 +14,7 @@ const Spinner: React.FC = () => {
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: '50%',
-    color: token.colorPrimary
+    color: token.colorPrimary,
   };
 
   const loaderStyle: React.CSSProperties = {

package/src/components/StaticSchema.tsx

@@ -1,28 +1,46 @@
 import React from 'react';
 import { isBlankPdf, replacePlaceholders, Template } from '@pdfme/common';
-import Renderer from './Renderer';
-import { uuid } from '../helper'
+import Renderer from './Renderer.js';
+import { uuid } from '../helper.js';
 
-const StaticSchema = (props: { template: Template, input: Record<string, string>, scale: number, totalPages: number, currentPage: number }) => {
-  const { template: { schemas, basePdf }, input, scale, totalPages, currentPage } = props;
+const StaticSchema = (props: {
+  template: Template;
+  input: Record<string, string>;
+  scale: number;
+  totalPages: number;
+  currentPage: number;
+}) => {
+  const {
+    template: { schemas, basePdf },
+    input,
+    scale,
+    totalPages,
+    currentPage,
+  } = props;
   if (!isBlankPdf(basePdf) || !basePdf.staticSchema) return null;
-  return <>{basePdf.staticSchema.map((schema) => (
-    <Renderer
-      key={schema.name}
-      schema={{ ...schema, id: uuid() }}
-      basePdf={basePdf}
-      value={replacePlaceholders({
-        content: schema.content || '',
-        variables: { ...input, totalPages, currentPage },
-        schemas
-      })}
-      onChangeHoveringSchemaId={() => { void 0 }}
-      mode={'viewer'}
-      outline={`none`}
-      scale={scale}
-      selectable={false}
-    />
-  ))}</>
-}
+  return (
+    <>
+      {basePdf.staticSchema.map((schema) => (
+        <Renderer
+          key={schema.name}
+          schema={{ ...schema, id: uuid() }}
+          basePdf={basePdf}
+          value={replacePlaceholders({
+            content: schema.content || '',
+            variables: { ...input, totalPages, currentPage },
+            schemas,
+          })}
+          onChangeHoveringSchemaId={() => {
+            void 0;
+          }}
+          mode={'viewer'}
+          outline={`none`}
+          scale={scale}
+          selectable={false}
+        />
+      ))}
+    </>
+  );
+};
 
-export default StaticSchema;
+export default StaticSchema;

package/src/constants.ts

@@ -14,4 +14,4 @@ export const RIGHT_SIDEBAR_WIDTH = 400;
 
 export const BACKGROUND_COLOR = 'rgb(74, 74, 74)';
 
-export const DEFAULT_MAX_ZOOM = 2;
+export const DEFAULT_MAX_ZOOM = 2;

package/src/contexts.ts

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import { i18n } from './i18n';
+import { i18n } from './i18n.js';
 import { getDefaultFont, Plugins, UIOptions } from '@pdfme/common';
 import { builtInPlugins } from '@pdfme/schemas';
 
@@ -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<any, any>>(new Map());