@servicetitan/dte-pdf-editor 1.2.0 → 1.3.0

package/dist/utils/generate-fillable-path.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-fillable-path.d.ts","sourceRoot":"","sources":["../../src/utils/generate-fillable-path.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,GAAI,WAAW,MAAM,EAAE,MAAM,MAAM,KAAG,MAEtE,CAAC"}

package/dist/utils/generate-fillable-path.js

@@ -0,0 +1,4 @@
+export const generateFillablePath = (recipient, name) => {
+    return `fillable_${recipient}_${name}`;
+};
+//# sourceMappingURL=generate-fillable-path.js.map

package/dist/utils/generate-fillable-path.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-fillable-path.js","sourceRoot":"","sources":["../../src/utils/generate-fillable-path.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,SAAiB,EAAE,IAAY,EAAU,EAAE;IAC5E,OAAO,YAAY,SAAS,IAAI,IAAI,EAAE,CAAC;AAC3C,CAAC,CAAC"}

package/dist/utils/get-field-background-color.d.ts

@@ -0,0 +1,2 @@
+export declare const getFieldBackgroundColor: (recipient: string | undefined, recipientsColors: Record<string, string>) => string;
+//# sourceMappingURL=get-field-background-color.d.ts.map

package/dist/utils/get-field-background-color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-field-background-color.d.ts","sourceRoot":"","sources":["../../src/utils/get-field-background-color.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB,GAChC,WAAW,MAAM,GAAG,SAAS,EAC7B,kBAAkB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KACzC,MAEF,CAAC"}

package/dist/utils/get-field-background-color.js

@@ -0,0 +1,4 @@
+export const getFieldBackgroundColor = (recipient, recipientsColors) => {
+    return recipient && recipientsColors[recipient] ? recipientsColors[recipient] : 'none';
+};
+//# sourceMappingURL=get-field-background-color.js.map

package/dist/utils/get-field-background-color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-field-background-color.js","sourceRoot":"","sources":["../../src/utils/get-field-background-color.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACnC,SAA6B,EAC7B,gBAAwC,EAClC,EAAE;IACR,OAAO,SAAS,IAAI,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;AAC3F,CAAC,CAAC"}

package/dist/utils/get-field-placeholder-text.d.ts

@@ -0,0 +1,3 @@
+import { PdfField } from '../interface/pdf-editor';
+export declare const getFieldPlaceholderText: (field: PdfField, prefix?: string) => string;
+//# sourceMappingURL=get-field-placeholder-text.d.ts.map

package/dist/utils/get-field-placeholder-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-field-placeholder-text.d.ts","sourceRoot":"","sources":["../../src/utils/get-field-placeholder-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,eAAO,MAAM,uBAAuB,GAAI,OAAO,QAAQ,EAAE,SAAS,MAAM,KAAG,MAK1E,CAAC"}

package/dist/utils/get-field-placeholder-text.js

@@ -0,0 +1,7 @@
+export const getFieldPlaceholderText = (field, prefix) => {
+    const requiredIndicator = field.required ? '*' : '';
+    const label = field.label || '';
+    const parts = [prefix, label, requiredIndicator].filter(Boolean);
+    return parts.join(' ');
+};
+//# sourceMappingURL=get-field-placeholder-text.js.map

package/dist/utils/get-field-placeholder-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-field-placeholder-text.js","sourceRoot":"","sources":["../../src/utils/get-field-placeholder-text.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAe,EAAE,MAAe,EAAU,EAAE;IAChF,MAAM,iBAAiB,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACpD,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;IAChC,MAAM,KAAK,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACjE,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC3B,CAAC,CAAC"}

package/dist/utils/index.d.ts

@@ -10,4 +10,9 @@ export * from './is-drag-over-canvas.utils';
 export * from './map-colors-to-recipients';
 export * from './pdfjs-init';
 export * from './generate-e-sign-path';
+export * from './resolve-pdf-data-values';
+export * from './generate-fillable-path';
+export * from './get-field-background-color';
+export * from './get-field-placeholder-text';
+export * from './parse-fillable-path';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uCAAuC,CAAC;AACtD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uCAAuC,CAAC;AACtD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC"}

package/dist/utils/index.js

@@ -10,4 +10,9 @@ export * from './is-drag-over-canvas.utils';
 export * from './map-colors-to-recipients';
 export * from './pdfjs-init';
 export * from './generate-e-sign-path';
+export * from './resolve-pdf-data-values';
+export * from './generate-fillable-path';
+export * from './get-field-background-color';
+export * from './get-field-placeholder-text';
+export * from './parse-fillable-path';
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uCAAuC,CAAC;AACtD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uCAAuC,CAAC;AACtD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC"}

package/dist/utils/parse-fillable-path.d.ts

@@ -0,0 +1,2 @@
+export declare const parseFillablePathName: (path: string | undefined) => string;
+//# sourceMappingURL=parse-fillable-path.d.ts.map

package/dist/utils/parse-fillable-path.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse-fillable-path.d.ts","sourceRoot":"","sources":["../../src/utils/parse-fillable-path.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB,GAAI,MAAM,MAAM,GAAG,SAAS,KAAG,MAOhE,CAAC"}

package/dist/utils/parse-fillable-path.js

@@ -0,0 +1,9 @@
+export const parseFillablePathName = (path) => {
+    if (!path) {
+        return '';
+    }
+    const parts = path.split('_');
+    // Path format: fillable_{recipient}_{name}
+    return parts.length >= 3 ? parts[2] : '';
+};
+//# sourceMappingURL=parse-fillable-path.js.map

package/dist/utils/parse-fillable-path.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse-fillable-path.js","sourceRoot":"","sources":["../../src/utils/parse-fillable-path.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,IAAwB,EAAU,EAAE;IACtE,IAAI,CAAC,IAAI,EAAE,CAAC;QACR,OAAO,EAAE,CAAC;IACd,CAAC;IACD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC9B,2CAA2C;IAC3C,OAAO,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAC7C,CAAC,CAAC"}

package/dist/utils/resolve-pdf-data-values.d.ts

@@ -0,0 +1,2 @@
+export declare const resolvePdfDataValues: (data: Record<string, any> | undefined, path: string | undefined) => string;
+//# sourceMappingURL=resolve-pdf-data-values.d.ts.map

package/dist/utils/resolve-pdf-data-values.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-pdf-data-values.d.ts","sourceRoot":"","sources":["../../src/utils/resolve-pdf-data-values.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,GAC7B,MAAM,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,EACrC,MAAM,MAAM,GAAG,SAAS,KACzB,MA8BF,CAAC"}

package/dist/utils/resolve-pdf-data-values.js

@@ -0,0 +1,27 @@
+export const resolvePdfDataValues = (data, path) => {
+    if (!data || !path) {
+        return '';
+    }
+    const keys = path.split('.');
+    let value = data;
+    for (const key of keys) {
+        if (value === null || value === undefined || typeof value !== 'object') {
+            return '';
+        }
+        value = value[key];
+    }
+    if (value === null || value === undefined) {
+        return '';
+    }
+    if (typeof value === 'object') {
+        if ('Amount' in value && 'Currency' in value) {
+            return `${value.Currency} ${value.Amount}`;
+        }
+        if ('Value' in value) {
+            return String(value.Value);
+        }
+        return JSON.stringify(value);
+    }
+    return String(value);
+};
+//# sourceMappingURL=resolve-pdf-data-values.js.map

package/dist/utils/resolve-pdf-data-values.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-pdf-data-values.js","sourceRoot":"","sources":["../../src/utils/resolve-pdf-data-values.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAChC,IAAqC,EACrC,IAAwB,EAClB,EAAE;IACR,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;QACjB,OAAO,EAAE,CAAC;IACd,CAAC;IAED,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC7B,IAAI,KAAK,GAAQ,IAAI,CAAC;IAEtB,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;QACrB,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YACrE,OAAO,EAAE,CAAC;QACd,CAAC;QACD,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IACvB,CAAC;IAED,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACxC,OAAO,EAAE,CAAC;IACd,CAAC;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC5B,IAAI,QAAQ,IAAI,KAAK,IAAI,UAAU,IAAI,KAAK,EAAE,CAAC;YAC3C,OAAO,GAAG,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;QAC/C,CAAC;QACD,IAAI,OAAO,IAAI,KAAK,EAAE,CAAC;YACnB,OAAO,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC;QACD,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC;IAED,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;AACzB,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicetitan/dte-pdf-editor",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "",
   "main": "./dist/index.js",
   "typings": "./dist/index.d.ts",

package/src/components/field-config-panel.tsx

@@ -2,7 +2,7 @@ import { Button, Checkbox, Combobox, Flex, TextField } from '@servicetitan/anvil
 import { FC, useMemo } from 'react';
 import { E_SIGN_FIELD_TYPE_OPTIONS } from '../constants';
 import { ESignFieldType, FieldTypeEnum, PdfField } from '../interface/pdf-editor';
-import { generateESignPath } from '../utils';
+import { generateESignPath, generateFillablePath, parseFillablePathName } from '../utils';
 import { RecipientInfo } from './pdf-editor';
 
 interface FieldConfigPanelProps {
@@ -123,6 +123,17 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
             {field.type === FieldTypeEnum.dataModel && field.path && (
                 <TextField label="Data Path" value={field.path} disabled />
             )}
+            {field.type === FieldTypeEnum.fillable && (
+                <TextField
+                    label="Input Name"
+                    value={parseFillablePathName(field.path)}
+                    onChange={e =>
+                        onFieldConfigChange({
+                            path: generateFillablePath(field.recipient!, e.target.value),
+                        })
+                    }
+                />
+            )}
             {field.type === FieldTypeEnum.fillable && (
                 <Checkbox
                     label="Required"
@@ -134,6 +145,7 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
                     }
                 />
             )}
+
             <Button className="full-width" onClick={onDeleteField}>
                 Delete Field
             </Button>

package/src/components/fillable-field-type-list.tsx

@@ -33,7 +33,12 @@ export const FillableFieldTypeList: FC<FillableFieldTypeListProps> = ({
                         key={fieldOption.subType}
                         label={fieldOption.label}
                         onDragEnd={onDragEnd}
-                        onDragStart={() => onDragStart(fieldOption)}
+                        onDragStart={() =>
+                            onDragStart({
+                                ...fieldOption,
+                                label: '',
+                            })
+                        }
                     />
                 );
             })}

package/src/components/pdf-editor.tsx

@@ -1,7 +1,7 @@
 import { Flex } from '@servicetitan/anvil2';
 import { DragEvent, FC, MouseEvent, ReactNode, useMemo, useRef, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
-import { FIELD_CONSTANTS } from '../constants';
+import { FIELD_CONSTANTS, FILLABLE_FIELD_DEFAULT_SIZES } from '../constants';
 
 import {
     ESignFieldType,
@@ -15,6 +15,7 @@ import {
     calculateDropCoordinates,
     extractGroupedFieldsFromDataModel,
     generateESignPath,
+    generateFillablePath,
     initializePdfJsWorker,
     isDragOverCanvas,
     mapColorsToRecipients,
@@ -104,8 +105,14 @@ export const PdfEditor: FC<PdfEditorProps> = ({
             );
         }
         if (draggedFieldOption.type === FieldTypeEnum.fillable) {
+            const defaultFieldSizes = FILLABLE_FIELD_DEFAULT_SIZES[newField.subType!];
             newField.recipient = recipients[0]?.name ?? '';
             newField.required = false;
+            newField.path = generateFillablePath(recipients[0]?.name ?? '', uuidv4());
+            if (defaultFieldSizes) {
+                newField.width = defaultFieldSizes.width;
+                newField.height = defaultFieldSizes.height;
+            }
         }
 
         onFieldsChange([...fields, newField]);

package/src/components/pdf-field-overlay.tsx

@@ -1,7 +1,8 @@
-import { FC, MouseEvent, RefObject } from 'react';
-import { useFieldDrag, useFieldResize } from '../hooks';
+import { FC, Fragment, MouseEvent, RefObject, useMemo } from 'react';
+import { useFieldDrag, useFieldResize, UseFieldResizeReturn } from '../hooks';
 import { FieldTypeEnum, PdfField } from '../interface/pdf-editor';
-import { getPagePosition } from '../utils';
+import { getFieldBackgroundColor, getFieldPlaceholderText, getPagePosition } from '../utils';
+import { ResizeHandle } from './resize-handle';
 
 interface PdfFieldOverlayProps {
     fields: PdfField[];
@@ -21,63 +22,161 @@ export const PdfFieldOverlay: FC<PdfFieldOverlayProps> = ({
     pdfWrapperRef,
     recipientsColors,
     selectedField,
+}) => {
+    return (
+        <div className="dte-pdf-field-overlay skeleton-item">
+            {fields.map(field => (
+                <PdfFieldOverlayField
+                    key={field.id}
+                    field={field}
+                    onFieldMove={onFieldMove}
+                    onFieldClick={onFieldClick}
+                    pdfWrapperRef={pdfWrapperRef}
+                    onFieldResize={onFieldResize}
+                    isSelected={selectedField === field.id}
+                    recipientsColors={recipientsColors}
+                />
+            ))}
+        </div>
+    );
+};
+
+interface PdfFieldOverlayFieldProps {
+    field: PdfField;
+    isSelected: boolean;
+    recipientsColors: Record<string, string>;
+    pdfWrapperRef: RefObject<HTMLDivElement>;
+    onFieldClick(fieldId: string, e: MouseEvent): void;
+    onFieldMove(fieldId: string, newX: number, newY: number, pageNumber: number): void;
+    onFieldResize(fieldId: string, newWidth: number, newHeight: number, pageNumber: number): void;
+}
+
+export const PdfFieldOverlayField: FC<PdfFieldOverlayFieldProps> = ({
+    field,
+    isSelected,
+    onFieldClick,
+    onFieldMove,
+    onFieldResize,
+    pdfWrapperRef,
+    recipientsColors,
 }) => {
     const { draggingFieldIdRef, handleDrag, handleDragEnd, handleDragStart } = useFieldDrag({
         pdfWrapperRef,
         onFieldMove,
     });
+    const isDragging = draggingFieldIdRef.current === field.id;
 
     const { handleResizeStart } = useFieldResize({
         pdfWrapperRef,
         onFieldResize,
     });
 
+    const pagePos = useMemo(() => {
+        return getPagePosition(field.page, pdfWrapperRef);
+    }, [field.page, pdfWrapperRef]);
+
+    const style = useMemo(() => {
+        const bgColor = getFieldBackgroundColor(field.recipient, recipientsColors);
+        return {
+            left: pagePos.left + field.x,
+            top: pagePos.top + field.y,
+            width: field.width,
+            height: field.height,
+            backgroundColor: bgColor,
+        };
+    }, [
+        field.recipient,
+        field.x,
+        field.y,
+        field.width,
+        field.height,
+        recipientsColors,
+        pagePos.left,
+        pagePos.top,
+    ]);
+
     return (
-        <div className="dte-pdf-field-overlay skeleton-item">
-            {fields.map(field => {
-                const isSelected = selectedField === field.id;
-                const isDragging = draggingFieldIdRef.current === field.id;
-                const pagePos = getPagePosition(field.page, pdfWrapperRef);
-                const bgColor =
-                    field.recipient && recipientsColors[field.recipient]
-                        ? recipientsColors[field.recipient]
-                        : 'rgba(255, 255, 255, 0.8)';
-
-                return (
-                    <div
-                        key={field.id}
-                        onClick={e => onFieldClick(field.id, e)}
-                        draggable
-                        onDragStart={e => handleDragStart(e, field)}
-                        onDrag={e => handleDrag(e, field)}
-                        onDragEnd={handleDragEnd}
-                        className={`dte-pdf-field ${isSelected ? 'dte-pdf-field-selected' : 'dte-pdf-field-unselected'} ${isDragging ? 'dte-pdf-field-dragging' : ''}`}
-                        style={{
-                            left: `${pagePos.left + field.x}px`,
-                            top: `${pagePos.top + field.y}px`,
-                            width: `${field.width}px`,
-                            height: `${field.height}px`,
-                            backgroundColor: bgColor,
-                        }}
-                    >
-                        <span>
-                            {(field.type === FieldTypeEnum.eSign ||
-                                field.type === FieldTypeEnum.fillable) &&
-                                `${field.label} ${field.required ? '*' : ''}`}
-
-                            {field.path && (
-                                <div className="dte-pdf-field-path">{`{{${field.path}}}`}</div>
-                            )}
-                        </span>
-                        {isSelected && (
-                            <div
-                                className="dte-pdf-field-resize-handle"
-                                onMouseDown={e => handleResizeStart(e, field)}
-                            />
-                        )}
-                    </div>
-                );
-            })}
+        <div
+            onClick={e => onFieldClick(field.id, e)}
+            draggable
+            onDragStart={e => handleDragStart(e, field)}
+            onDrag={e => handleDrag(e, field)}
+            onDragEnd={handleDragEnd}
+            className={`dte-pdf-field ${isSelected ? 'dte-pdf-field-selected' : 'dte-pdf-field-unselected'} ${isDragging ? 'dte-pdf-field-dragging' : ''}`}
+            style={style}
+        >
+            {field.type === FieldTypeEnum.eSign && <FieldEsign field={field} />}
+            {field.type === FieldTypeEnum.dataModel && <FieldDataModel field={field} />}
+            {field.type === FieldTypeEnum.fillable && (
+                <FieldFillable
+                    field={field}
+                    handleResizeStart={handleResizeStart}
+                    isSelected={isSelected}
+                />
+            )}
         </div>
     );
 };
+
+interface FieldProps {
+    field: PdfField;
+}
+
+const FieldEsign: FC<FieldProps> = ({ field }) => {
+    return (
+        <span>
+            {field.label} {field.required ? '*' : ''}
+            <div className="dte-pdf-field-value">{field.path}</div>
+        </span>
+    );
+};
+
+const FieldDataModel: FC<FieldProps> = ({ field }) => {
+    return (
+        <span>
+            {field.label ? field.label : field.path}
+            {field.required ? '*' : ''}
+        </span>
+    );
+};
+
+interface FieldFillableProps extends FieldProps {
+    isSelected: boolean;
+    handleResizeStart: UseFieldResizeReturn['handleResizeStart'];
+}
+
+const FieldFillable: FC<FieldFillableProps> = ({ field, handleResizeStart, isSelected }) => {
+    const placeholderText = getFieldPlaceholderText(field);
+
+    if (field.subType === 'checkbox' || field.subType === 'radio') {
+        return <input type={field.subType} readOnly className="dte-pdf-field-fillable" />;
+    }
+
+    if (field.subType === 'date') {
+        return (
+            <Fragment>
+                <input
+                    type="date"
+                    readOnly
+                    className="dte-pdf-field-fillable"
+                    placeholder={placeholderText}
+                />
+                {isSelected && (
+                    <ResizeHandle handleResizeStart={e => handleResizeStart(e, field)} />
+                )}
+            </Fragment>
+        );
+    }
+
+    return (
+        <Fragment>
+            <input
+                type="text"
+                readOnly
+                placeholder={placeholderText}
+                className="dte-pdf-field-fillable"
+            />
+            {isSelected && <ResizeHandle handleResizeStart={e => handleResizeStart(e, field)} />}
+        </Fragment>
+    );
+};

package/src/components/pdf-view-fields.tsx

@@ -0,0 +1,138 @@
+import { FC } from 'react';
+import { PdfField } from '../interface/pdf-editor';
+import { getFieldPlaceholderText, resolvePdfDataValues } from '../utils';
+
+interface BaseFieldViewProps {
+    field: PdfField;
+    data?: Record<string, any>;
+}
+
+export const ViewDataModel: FC<BaseFieldViewProps> = ({ data, field }) => {
+    const resolvedValue = field.path ? resolvePdfDataValues(data, field.path) : '';
+    return <div className="dte-pdf-field-value">{resolvedValue ?? ''}</div>;
+};
+
+export const ViewEsign: FC<BaseFieldViewProps> = ({ data, field }) => {
+    const resolvedValue = field.path ? resolvePdfDataValues(data, field.path) : '';
+
+    return (
+        <span>
+            {field.label} {field.required ? '*' : ''}
+            <div className="dte-pdf-field-value">{resolvedValue}</div>
+        </span>
+    );
+};
+
+interface FillableFieldViewProps extends BaseFieldViewProps {
+    fillingBy?: string[];
+    onDataChange?(changedData: { [path: string]: string | boolean }): void;
+}
+
+export const FillableFieldView: FC<FillableFieldViewProps> = ({
+    data,
+    field,
+    fillingBy,
+    onDataChange,
+}) => {
+    const resolvedValue = data?.[field.path!];
+    const isViewByCurrentRecipient = fillingBy?.includes(field.recipient!);
+    if (field.subType === 'checkbox') {
+        return (
+            <div
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    background: 'inherit',
+                    width: 'inherit',
+                    height: 'inherit',
+                }}
+            >
+                <input
+                    style={{ width: 'inherit', height: 'inherit', margin: 0 }}
+                    type="checkbox"
+                    checked={resolvedValue ?? false}
+                    disabled={!isViewByCurrentRecipient}
+                    name={field.path}
+                    onChange={e =>
+                        onDataChange?.({
+                            [field.path!]: e!.target.checked,
+                        })
+                    }
+                />
+                {field.label}
+            </div>
+        );
+    }
+
+    if (field.subType === 'radio') {
+        return (
+            <div
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    background: 'inherit',
+                    width: 'inherit',
+                    height: 'inherit',
+                }}
+            >
+                <input
+                    style={{ width: 'inherit', height: 'inherit', margin: 0 }}
+                    type="radio"
+                    checked={resolvedValue ?? false}
+                    disabled={!isViewByCurrentRecipient}
+                    name={field.path}
+                    onChange={e =>
+                        onDataChange?.({
+                            [field.path!]: e!.target.value,
+                        })
+                    }
+                />
+                {field.label}
+            </div>
+        );
+    }
+
+    if (field.subType === 'date') {
+        return (
+            <input
+                type="date"
+                style={{
+                    background: 'inherit',
+                    width: 'inherit',
+                    height: 'inherit',
+                }}
+                disabled={!isViewByCurrentRecipient}
+                id={field.path}
+                name={field.path}
+                value={resolvedValue ?? ''}
+                onChange={e =>
+                    onDataChange?.({
+                        [field.path!]: e.target.value,
+                    })
+                }
+                placeholder={getFieldPlaceholderText(field, 'mm/dd/yyyy')}
+            />
+        );
+    }
+
+    return (
+        <input
+            type="text"
+            style={{
+                background: 'inherit',
+                width: 'inherit',
+                height: 'inherit',
+            }}
+            disabled={!isViewByCurrentRecipient}
+            id={field.path}
+            name={field.path}
+            value={resolvedValue ?? ''}
+            onChange={e =>
+                onDataChange?.({
+                    [field.path!]: e.target.value,
+                })
+            }
+            placeholder={getFieldPlaceholderText(field)}
+        />
+    );
+};