@pdfme/ui 5.1.6-dev.2 → 5.1.7-dev.2

package/dist/types/class.d.ts

@@ -12,7 +12,7 @@ export declare abstract class BaseUIClass {
     constructor(props: UIProps);
     protected getLang(): "en" | "th" | "pl" | "zh" | "ja" | "ko" | "ar" | "it" | "de" | "es" | "fr";
     protected getFont(): Record<string, {
-        data: (string | ArrayBuffer | Uint8Array) & (string | ArrayBuffer | Uint8Array | undefined);
+        data: string | ArrayBuffer | Uint8Array;
         fallback?: boolean | undefined;
         subset?: boolean | undefined;
     }>;
@@ -117,14 +117,172 @@ export declare abstract class BaseUIClass {
             width: import("zod").ZodNumber;
             height: import("zod").ZodNumber;
             padding: import("zod").ZodTuple<[import("zod").ZodNumber, import("zod").ZodNumber, import("zod").ZodNumber, import("zod").ZodNumber], null>;
+            staticSchema: import("zod").ZodOptional<import("zod").ZodArray<import("zod").ZodObject<{
+                name: import("zod").ZodString;
+                type: import("zod").ZodString;
+                content: import("zod").ZodOptional<import("zod").ZodString>;
+                position: import("zod").ZodObject<{
+                    x: import("zod").ZodNumber;
+                    y: import("zod").ZodNumber;
+                }, "strip", import("zod").ZodTypeAny, {
+                    x: number;
+                    y: number;
+                }, {
+                    x: number;
+                    y: number;
+                }>;
+                width: import("zod").ZodNumber;
+                height: import("zod").ZodNumber;
+                rotate: import("zod").ZodOptional<import("zod").ZodNumber>;
+                opacity: import("zod").ZodOptional<import("zod").ZodNumber>;
+                readOnly: import("zod").ZodOptional<import("zod").ZodBoolean>;
+                required: import("zod").ZodOptional<import("zod").ZodBoolean>;
+                __bodyRange: import("zod").ZodOptional<import("zod").ZodObject<{
+                    start: import("zod").ZodNumber;
+                    end: import("zod").ZodOptional<import("zod").ZodNumber>;
+                }, "strip", import("zod").ZodTypeAny, {
+                    start: number;
+                    end?: number | undefined;
+                }, {
+                    start: number;
+                    end?: number | undefined;
+                }>>;
+                __isSplit: import("zod").ZodOptional<import("zod").ZodBoolean>;
+            }, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{
+                name: import("zod").ZodString;
+                type: import("zod").ZodString;
+                content: import("zod").ZodOptional<import("zod").ZodString>;
+                position: import("zod").ZodObject<{
+                    x: import("zod").ZodNumber;
+                    y: import("zod").ZodNumber;
+                }, "strip", import("zod").ZodTypeAny, {
+                    x: number;
+                    y: number;
+                }, {
+                    x: number;
+                    y: number;
+                }>;
+                width: import("zod").ZodNumber;
+                height: import("zod").ZodNumber;
+                rotate: import("zod").ZodOptional<import("zod").ZodNumber>;
+                opacity: import("zod").ZodOptional<import("zod").ZodNumber>;
+                readOnly: import("zod").ZodOptional<import("zod").ZodBoolean>;
+                required: import("zod").ZodOptional<import("zod").ZodBoolean>;
+                __bodyRange: import("zod").ZodOptional<import("zod").ZodObject<{
+                    start: import("zod").ZodNumber;
+                    end: import("zod").ZodOptional<import("zod").ZodNumber>;
+                }, "strip", import("zod").ZodTypeAny, {
+                    start: number;
+                    end?: number | undefined;
+                }, {
+                    start: number;
+                    end?: number | undefined;
+                }>>;
+                __isSplit: import("zod").ZodOptional<import("zod").ZodBoolean>;
+            }, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{
+                name: import("zod").ZodString;
+                type: import("zod").ZodString;
+                content: import("zod").ZodOptional<import("zod").ZodString>;
+                position: import("zod").ZodObject<{
+                    x: import("zod").ZodNumber;
+                    y: import("zod").ZodNumber;
+                }, "strip", import("zod").ZodTypeAny, {
+                    x: number;
+                    y: number;
+                }, {
+                    x: number;
+                    y: number;
+                }>;
+                width: import("zod").ZodNumber;
+                height: import("zod").ZodNumber;
+                rotate: import("zod").ZodOptional<import("zod").ZodNumber>;
+                opacity: import("zod").ZodOptional<import("zod").ZodNumber>;
+                readOnly: import("zod").ZodOptional<import("zod").ZodBoolean>;
+                required: import("zod").ZodOptional<import("zod").ZodBoolean>;
+                __bodyRange: import("zod").ZodOptional<import("zod").ZodObject<{
+                    start: import("zod").ZodNumber;
+                    end: import("zod").ZodOptional<import("zod").ZodNumber>;
+                }, "strip", import("zod").ZodTypeAny, {
+                    start: number;
+                    end?: number | undefined;
+                }, {
+                    start: number;
+                    end?: number | undefined;
+                }>>;
+                __isSplit: import("zod").ZodOptional<import("zod").ZodBoolean>;
+            }, import("zod").ZodTypeAny, "passthrough">>, "many">>;
         }, "strip", import("zod").ZodTypeAny, {
             width: number;
             height: number;
             padding: [number, number, number, number];
+            staticSchema?: import("zod").objectOutputType<{
+                name: import("zod").ZodString;
+                type: import("zod").ZodString;
+                content: import("zod").ZodOptional<import("zod").ZodString>;
+                position: import("zod").ZodObject<{
+                    x: import("zod").ZodNumber;
+                    y: import("zod").ZodNumber;
+                }, "strip", import("zod").ZodTypeAny, {
+                    x: number;
+                    y: number;
+                }, {
+                    x: number;
+                    y: number;
+                }>;
+                width: import("zod").ZodNumber;
+                height: import("zod").ZodNumber;
+                rotate: import("zod").ZodOptional<import("zod").ZodNumber>;
+                opacity: import("zod").ZodOptional<import("zod").ZodNumber>;
+                readOnly: import("zod").ZodOptional<import("zod").ZodBoolean>;
+                required: import("zod").ZodOptional<import("zod").ZodBoolean>;
+                __bodyRange: import("zod").ZodOptional<import("zod").ZodObject<{
+                    start: import("zod").ZodNumber;
+                    end: import("zod").ZodOptional<import("zod").ZodNumber>;
+                }, "strip", import("zod").ZodTypeAny, {
+                    start: number;
+                    end?: number | undefined;
+                }, {
+                    start: number;
+                    end?: number | undefined;
+                }>>;
+                __isSplit: import("zod").ZodOptional<import("zod").ZodBoolean>;
+            }, import("zod").ZodTypeAny, "passthrough">[] | undefined;
         }, {
             width: number;
             height: number;
             padding: [number, number, number, number];
+            staticSchema?: import("zod").objectInputType<{
+                name: import("zod").ZodString;
+                type: import("zod").ZodString;
+                content: import("zod").ZodOptional<import("zod").ZodString>;
+                position: import("zod").ZodObject<{
+                    x: import("zod").ZodNumber;
+                    y: import("zod").ZodNumber;
+                }, "strip", import("zod").ZodTypeAny, {
+                    x: number;
+                    y: number;
+                }, {
+                    x: number;
+                    y: number;
+                }>;
+                width: import("zod").ZodNumber;
+                height: import("zod").ZodNumber;
+                rotate: import("zod").ZodOptional<import("zod").ZodNumber>;
+                opacity: import("zod").ZodOptional<import("zod").ZodNumber>;
+                readOnly: import("zod").ZodOptional<import("zod").ZodBoolean>;
+                required: import("zod").ZodOptional<import("zod").ZodBoolean>;
+                __bodyRange: import("zod").ZodOptional<import("zod").ZodObject<{
+                    start: import("zod").ZodNumber;
+                    end: import("zod").ZodOptional<import("zod").ZodNumber>;
+                }, "strip", import("zod").ZodTypeAny, {
+                    start: number;
+                    end?: number | undefined;
+                }, {
+                    start: number;
+                    end?: number | undefined;
+                }>>;
+                __isSplit: import("zod").ZodOptional<import("zod").ZodBoolean>;
+            }, import("zod").ZodTypeAny, "passthrough">[] | undefined;
         }>]>;
         pdfmeVersion: import("zod").ZodOptional<import("zod").ZodString>;
     }, import("zod").ZodTypeAny, "passthrough">;

package/dist/types/components/Paper.d.ts

@@ -7,10 +7,10 @@ declare const Paper: (props: {
     schemasList: SchemaForUI[][];
     pageSizes: Size[];
     backgrounds: string[];
-    renderPaper?: ((arg: {
+    renderPaper: (arg: {
         index: number;
         paperSize: Size;
-    }) => ReactNode) | undefined;
+    }) => ReactNode;
     renderSchema: (arg: {
         index: number;
         schema: SchemaForUI;

package/dist/types/components/Renderer.d.ts

@@ -7,6 +7,7 @@ type RendererProps = Omit<UIRenderProps<Schema>, 'schema' | 'rootElement' | 'opt
     outline: string;
     onChangeHoveringSchemaId?: (id: string | null) => void;
     scale: number;
+    selectable?: boolean;
 };
 declare const Renderer: (props: RendererProps) => React.JSX.Element;
 export default Renderer;

package/dist/types/components/StaticSchema.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Template } from '@pdfme/common';
+declare const StaticSchema: (props: {
+    template: Template;
+    input: Record<string, string>;
+    scale: number;
+    totalPages: number;
+    currentPage: number;
+}) => React.JSX.Element | null;
+export default StaticSchema;

package/dist/types/contexts.d.ts

@@ -70,7 +70,7 @@ export declare const I18nContext: import("react").Context<(key: "type" | "width"
     'schemas.select.optionPlaceholder': string;
 } | undefined) => string>;
 export declare const FontContext: import("react").Context<Record<string, {
-    data: (string | ArrayBuffer | Uint8Array) & (string | ArrayBuffer | Uint8Array | undefined);
+    data: string | ArrayBuffer | Uint8Array;
     fallback?: boolean | undefined;
     subset?: boolean | undefined;
 }>>;

package/package.json

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

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

@@ -11,7 +11,7 @@ import React, {
 } from 'react';
 import { theme, Button } from 'antd';
 import { OnDrag, OnResize, OnClick, OnRotate } from 'react-moveable';
-import { ZOOM, SchemaForUI, Size, ChangeSchemas, BasePdf, isBlankPdf } from '@pdfme/common';
+import { ZOOM, SchemaForUI, Size, ChangeSchemas, BasePdf, isBlankPdf, replacePlaceholders } from '@pdfme/common';
 import { PluginsRegistry } from '../../../contexts';
 import { CloseOutlined } from '@ant-design/icons';
 import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH } from '../../../constants';
@@ -24,6 +24,7 @@ import Moveable from './Moveable';
 import Guides from './Guides';
 import Mask from './Mask';
 import Padding from './Padding';
+import StaticSchema from '../../StaticSchema';
 
 
 const mm2px = (mm: number) => mm * 3.7795275591;
@@ -394,6 +395,15 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
               <DeleteButton activeElements={activeElements} />
             )}
             <Padding basePdf={basePdf} />
+            <StaticSchema
+              template={{ schemas: schemasList, basePdf }}
+              input={Object.fromEntries(
+                schemasList.flat().map(({ name, content = '' }) => [name, content])
+              )}
+              scale={scale}
+              totalPages={schemasList.length}
+              currentPage={index + 1}
+            />
             <Guides
               paperSize={paperSize}
               horizontalRef={(e) => {
@@ -433,28 +443,47 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
             )}
           </>
         )}
-        renderSchema={({ schema }) => (
-          <Renderer
-            key={schema.id}
-            schema={schema}
-            basePdf={basePdf}
-            value={schema.content || ''}
-            onChangeHoveringSchemaId={onChangeHoveringSchemaId}
-            mode={
-              editing && activeElements.map((ae) => ae.id).includes(schema.id)
-                ? 'designer'
-                : 'viewer'
-            }
-            onChange={(arg) => {
-              const args = Array.isArray(arg) ? arg : [arg];
-              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
-              }`}
-            scale={scale}
-          />
-        )}
+        renderSchema={({ schema, index }) => {
+          const mode =
+            editing && activeElements.map((ae) => ae.id).includes(schema.id)
+              ? 'designer'
+              : '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>),
+              totalPages: schemasList.length,
+              currentPage: index + 1,
+            };
+
+            value = replacePlaceholders({ content, variables, schemas: schemasList });
+          }
+
+          return (
+            <Renderer
+              key={schema.id}
+              schema={schema}
+              basePdf={basePdf}
+              value={value}
+              onChangeHoveringSchemaId={onChangeHoveringSchemaId}
+              mode={mode}
+              onChange={(arg) => {
+                const args = Array.isArray(arg) ? arg : [arg];
+                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
+                }`}
+              scale={scale}
+            />
+          )
+        }}
       />
     </div>
   );

package/src/components/Designer/LeftSidebar.tsx

@@ -24,7 +24,6 @@ const Draggable = (props: { plugin: Plugin<any>, scale: number, basePdf: BasePdf
       {isDragging &&
         <div style={{ transform: `scale(${scale})` }}>
           <Renderer
-            key={defaultSchema.type}
             schema={{ ...defaultSchema, id: defaultSchema.type }}
             basePdf={basePdf}
             value={defaultSchema.content || ''}

package/src/components/Paper.tsx

@@ -10,7 +10,7 @@ const Paper = (props: {
   schemasList: SchemaForUI[][];
   pageSizes: Size[];
   backgrounds: string[];
-  renderPaper?: (arg: { index: number; paperSize: Size }) => ReactNode;
+  renderPaper: (arg: { index: number; paperSize: Size }) => ReactNode;
   renderSchema: (arg: { index: number; schema: SchemaForUI }) => ReactNode;
   hasRulers?: boolean;
 }) => {
@@ -93,7 +93,7 @@ const Paper = (props: {
               ...paperSize,
             }}
           >
-            {renderPaper && renderPaper({ paperSize, index: paperIndex })}
+            {renderPaper({ paperSize, index: paperIndex })}
             {schemasList[paperIndex].map((schema, schemaIndex) => {
               return (
                 <div key={schema.id}>

package/src/components/Preview.tsx

@@ -1,8 +1,9 @@
 import React, { useRef, useState, useEffect, useContext } from 'react';
-import { Template, SchemaForUI, PreviewProps, Size, getDynamicTemplate } 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';
@@ -85,6 +86,32 @@ 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) => {
+    let isNeedInit = false;
+    args.forEach(({ key: _key, value }) => {
+      if (_key === 'content') {
+        const newValue = value as string;
+        const oldValue = (input?.[schema.name] as string) || '';
+        if (newValue === oldValue) return;
+        handleChangeInput({ name: schema.name, value: newValue });
+        // 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;
+        if (!targetSchema) return;
+
+        // @ts-ignore
+        targetSchema[_key] = value as string;
+      }
+    });
+    if (isNeedInit) {
+      init(template);
+    }
+    setSchemasList([...schemasList])
+  }
+
   if (error) {
     return <ErrorScreen size={size} error={error} />;
   }
@@ -118,42 +145,23 @@ const Preview = ({
           pageSizes={pageSizes}
           backgrounds={backgrounds}
           renderSchema={({ schema, index }) => {
-            const { name, readOnly } = schema;
-            const content = readOnly ? String(schema.content) || '' : String(input && input[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}
                 schema={schema}
                 basePdf={template.basePdf}
-                value={content}
+                value={value}
                 mode={isForm ? 'form' : 'viewer'}
                 placeholder={schema.content}
                 tabIndex={index + 100}
                 onChange={(arg) => {
                   const args = Array.isArray(arg) ? arg : [arg];
-                  let isNeedInit = false;
-                  args.forEach(({ key: _key, value }) => {
-                    if (_key === 'content') {
-                      const newValue = value as string;
-                      const oldValue = (input?.[name] as string) || '';
-                      if (newValue === oldValue) return;
-                      handleChangeInput({ name, value: newValue });
-                      // 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;
-                      if (!targetSchema) return;
-
-                      // @ts-ignore
-                      targetSchema[_key] = value as string;
-                    }
-                  });
-                  if (isNeedInit) {
-                    init(template);
-                  }
-                  setSchemasList([...schemasList])
+                  handleOnChangeRenderer(args, schema);
                 }}
                 outline={
                   isForm && !schema.readOnly ? `1px dashed ${token.colorPrimary}` : 'transparent'
@@ -162,6 +170,15 @@ const Preview = ({
               />
             );
           }}
+          renderPaper={({ index }) => (
+            <StaticSchema
+              template={template}
+              scale={scale}
+              input={input}
+              totalPages={schemasList.length}
+              currentPage={index + 1}
+            />
+          )}
         />
       </div>
     </Root>

package/src/components/Renderer.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useContext, ReactNode, useRef } from 'react';
-import {Dict, Mode, ZOOM, UIRenderProps, SchemaForUI, BasePdf, Schema, Plugin, UIOptions} from '@pdfme/common';
+import { Dict, Mode, ZOOM, UIRenderProps, SchemaForUI, BasePdf, Schema, Plugin, UIOptions } from '@pdfme/common';
 import { theme as antdTheme } from 'antd';
 import { SELECTABLE_CLASSNAME } from '../constants';
 import { PluginsRegistry, OptionsContext, I18nContext } from '../contexts';
@@ -15,6 +15,7 @@ type RendererProps = Omit<
   outline: string;
   onChangeHoveringSchemaId?: (id: string | null) => void;
   scale: number;
+  selectable?: boolean;
 };
 
 type ReRenderCheckProps = {
@@ -43,12 +44,13 @@ const Wrapper = ({
   outline,
   onChangeHoveringSchemaId,
   schema,
+  selectable = true
 }: RendererProps & { children: ReactNode }) => (
   <div
     title={schema.name}
     onMouseEnter={() => onChangeHoveringSchemaId && onChangeHoveringSchemaId(schema.id)}
     onMouseLeave={() => onChangeHoveringSchemaId && onChangeHoveringSchemaId(null)}
-    className={SELECTABLE_CLASSNAME}
+    className={selectable ? SELECTABLE_CLASSNAME : ''}
     id={schema.id}
     style={{
       position: 'absolute',
@@ -97,7 +99,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
     return <></>;
   }
 
-  const reRenderDependencies = useRerenderDependencies({plugin, value, mode, scale, schema, options});
+  const reRenderDependencies = useRerenderDependencies({ plugin, value, mode, scale, schema, options });
 
   useEffect(() => {
     if (ref.current && schema.type) {

package/src/components/StaticSchema.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { isBlankPdf, replacePlaceholders, Template } from '@pdfme/common';
+import Renderer from './Renderer';
+import { uuid } from '../helper'
+
+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}
+    />
+  ))}</>
+}
+
+export default StaticSchema;