@pdfme/ui 5.1.7 → 5.2.0-dev.1

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/constants.d.ts

@@ -3,5 +3,6 @@ export declare const DESTROYED_ERR_MSG = "[@pdfme/ui] this instance is already d
 export declare const SELECTABLE_CLASSNAME = "selectable";
 export declare const RULER_HEIGHT = 30;
 export declare const PAGE_GAP = 10;
+export declare const LEFT_SIDEBAR_WIDTH = 45;
 export declare const RIGHT_SIDEBAR_WIDTH = 400;
 export declare const BACKGROUND_COLOR = "rgb(74, 74, 74)";

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.7",
+  "version": "5.2.0-dev.1",
   "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

@@ -8,9 +8,11 @@ import { theme, Button } from 'antd';
 import { useDraggable } from '@dnd-kit/core';
 import { CSS } from "@dnd-kit/utilities";
 import Renderer from '../Renderer';
+import { LEFT_SIDEBAR_WIDTH } from '../../constants';
 import { PluginsRegistry } from '../../contexts';
 import PluginIcon from "./PluginIcon";
 
+
 const Draggable = (props: { plugin: Plugin<any>, scale: number, basePdf: BasePdf, children: React.ReactNode }) => {
   const { scale, basePdf, plugin } = props;
   const { token } = theme.useToken();
@@ -24,7 +26,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 || ''}
@@ -68,7 +69,7 @@ const LeftSidebar = ({ height, scale, basePdf }: { height: number, scale: number
       position: 'absolute',
       zIndex: 1,
       height,
-      width: 45,
+      width: LEFT_SIDEBAR_WIDTH,
       background: token.colorBgLayout,
       textAlign: 'center',
       overflow: isDragging ? 'visible' : 'auto',

package/src/components/Designer/index.tsx

@@ -15,7 +15,7 @@ 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 } from '../../constants';
+import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH, LEFT_SIDEBAR_WIDTH } from '../../constants';
 import { I18nContext, OptionsContext, PluginsRegistry } from '../../contexts';
 import {
   schemasList2template,
@@ -235,8 +235,9 @@ const TemplateEditor = ({
     void updateTemplate(template);
   }
 
-  const sizeExcSidebar = {
-    width: sidebarOpen ? size.width - RIGHT_SIDEBAR_WIDTH : size.width,
+  const canvasWidth = size.width - LEFT_SIDEBAR_WIDTH;
+  const sizeExcSidebars = {
+    width: sidebarOpen ? canvasWidth - RIGHT_SIDEBAR_WIDTH : canvasWidth,
     height: size.height,
   };
 
@@ -271,66 +272,69 @@ const TemplateEditor = ({
         }}
         onDragStart={onEditEnd}
       >
-        <CtlBar
-          size={sizeExcSidebar}
-          pageCursor={pageCursor}
-          pageNum={schemasList.length}
-          setPageCursor={(p) => {
-            if (!canvasRef.current) return;
-            canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
-            setPageCursor(p);
-            onEditEnd();
-          }}
-          zoomLevel={zoomLevel}
-          setZoomLevel={setZoomLevel}
-          {...pageManipulation}
-        />
         <LeftSidebar
           height={canvasRef.current ? canvasRef.current.clientHeight : 0}
           scale={scale}
           basePdf={template.basePdf}
         />
 
-        <RightSidebar
-          hoveringSchemaId={hoveringSchemaId}
-          onChangeHoveringSchemaId={onChangeHoveringSchemaId}
-          height={canvasRef.current ? canvasRef.current.clientHeight : 0}
-          size={size}
-          pageSize={pageSizes[pageCursor] ?? []}
-          activeElements={activeElements}
-          schemasList={schemasList}
-          schemas={schemasList[pageCursor] ?? []}
-          changeSchemas={changeSchemas}
-          onSortEnd={onSortEnd}
-          onEdit={id => {
-            const editingElem = document.getElementById(id);
-            editingElem && onEdit([editingElem]);
-          }}
-          onEditEnd={onEditEnd}
-          deselectSchema={onEditEnd}
-          sidebarOpen={sidebarOpen}
-          setSidebarOpen={setSidebarOpen}
-        />
-
-        <Canvas
-          ref={canvasRef}
-          paperRefs={paperRefs}
-          basePdf={template.basePdf}
-          hoveringSchemaId={hoveringSchemaId}
-          onChangeHoveringSchemaId={onChangeHoveringSchemaId}
-          height={size.height - RULER_HEIGHT * ZOOM}
-          pageCursor={pageCursor}
-          scale={scale}
-          size={sizeExcSidebar}
-          pageSizes={pageSizes}
-          backgrounds={backgrounds}
-          activeElements={activeElements}
-          schemasList={schemasList}
-          changeSchemas={changeSchemas}
-          removeSchemas={removeSchemas}
-          sidebarOpen={sidebarOpen}
-          onEdit={onEdit}
-        />
+        <div style={{ position: 'absolute', width: canvasWidth, marginLeft: LEFT_SIDEBAR_WIDTH }}>
+          <CtlBar
+            size={sizeExcSidebars}
+            pageCursor={pageCursor}
+            pageNum={schemasList.length}
+            setPageCursor={(p) => {
+              if (!canvasRef.current) return;
+              canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
+              setPageCursor(p);
+              onEditEnd();
+            }}
+            zoomLevel={zoomLevel}
+            setZoomLevel={setZoomLevel}
+            {...pageManipulation}
+          />
+
+          <RightSidebar
+            hoveringSchemaId={hoveringSchemaId}
+            onChangeHoveringSchemaId={onChangeHoveringSchemaId}
+            height={canvasRef.current ? canvasRef.current.clientHeight : 0}
+            size={size}
+            pageSize={pageSizes[pageCursor] ?? []}
+            activeElements={activeElements}
+            schemasList={schemasList}
+            schemas={schemasList[pageCursor] ?? []}
+            changeSchemas={changeSchemas}
+            onSortEnd={onSortEnd}
+            onEdit={id => {
+              const editingElem = document.getElementById(id);
+              editingElem && onEdit([editingElem]);
+            }}
+            onEditEnd={onEditEnd}
+            deselectSchema={onEditEnd}
+            sidebarOpen={sidebarOpen}
+            setSidebarOpen={setSidebarOpen}
+          />
+
+          <Canvas
+            ref={canvasRef}
+            paperRefs={paperRefs}
+            basePdf={template.basePdf}
+            hoveringSchemaId={hoveringSchemaId}
+            onChangeHoveringSchemaId={onChangeHoveringSchemaId}
+            height={size.height - RULER_HEIGHT * ZOOM}
+            pageCursor={pageCursor}
+            scale={scale}
+            size={sizeExcSidebars}
+            pageSizes={pageSizes}
+            backgrounds={backgrounds}
+            activeElements={activeElements}
+            schemasList={schemasList}
+            changeSchemas={changeSchemas}
+            removeSchemas={removeSchemas}
+            sidebarOpen={sidebarOpen}
+            onEdit={onEdit}
+          />
+        </div>
       </DndContext>
     </Root>
   );

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>