@servicetitan/dte-pdf-editor 1.25.0 → 1.27.0

package/src/hooks/usePdfFieldDnD.ts

@@ -1,6 +1,11 @@
 import { DragEvent, RefObject, useCallback, useRef, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
-import { FIELD_CONSTANTS, FILLABLE_FIELD_DEFAULT_SIZES } from '../constants';
+import {
+    FIELD_CONSTANTS,
+    FILLABLE_FIELD_DEFAULT_SIZES,
+    GENERIC_FIELD_DEFAULT_SIZES,
+    GENERIC_FIELD_TABLE_ROW_HEIGHT,
+} from '../constants';
 import {
     ESignFieldType,
     FieldTypeEnum,
@@ -17,6 +22,90 @@ import {
 
 const DRAG_OVER_THROTTLE_MS = 32; // ~30fps for drop effect updates
 
+type InitializeDroppedField = (
+    baseField: PdfField,
+    option: FieldTypeOption,
+    recipientName: string,
+) => PdfField;
+
+const initializeDroppedFieldByType: Record<FieldTypeEnum, InitializeDroppedField> = {
+    [FieldTypeEnum.eSign]: (base, option, recipientName) => ({
+        ...base,
+        recipient: recipientName,
+        path: generateESignPath(recipientName, option.subType as ESignFieldType),
+    }),
+    [FieldTypeEnum.fillable]: (base, option, recipientName) => {
+        const defaultSize = FILLABLE_FIELD_DEFAULT_SIZES[base.subType!];
+        return {
+            ...base,
+            recipient: recipientName,
+            required: false,
+            path: generateFillablePath(recipientName, uuidv4()),
+            ...(defaultSize && {
+                width: defaultSize.width,
+                height: defaultSize.height,
+            }),
+        };
+    },
+    [FieldTypeEnum.calculated]: base => ({
+        ...base,
+        path: base.id,
+    }),
+    [FieldTypeEnum.dataModel]: base => base,
+    [FieldTypeEnum.generic]: base => {
+        const defaultSize = GENERIC_FIELD_DEFAULT_SIZES[base.subType!];
+        if (base.subType === 'text') {
+            return {
+                ...base,
+                x: 0,
+                data: {
+                    value: 'This is a new Text block.',
+                },
+                ...(defaultSize && {
+                    width: defaultSize.width,
+                    height: defaultSize.height,
+                }),
+            };
+        }
+
+        return {
+            ...base,
+            ...(defaultSize && {
+                width: defaultSize.width,
+                height: defaultSize.height,
+            }),
+            x: 0,
+            data: {
+                showHeader: true,
+                header: {
+                    height: GENERIC_FIELD_TABLE_ROW_HEIGHT,
+                    cells: [
+                        {
+                            value: 'id',
+                        },
+                        {
+                            value: 'username',
+                        },
+                    ],
+                },
+                body: [
+                    {
+                        height: GENERIC_FIELD_TABLE_ROW_HEIGHT,
+                        cells: [
+                            {
+                                value: '124',
+                            },
+                            {
+                                value: 'test@gmail.com',
+                            },
+                        ],
+                    },
+                ],
+            },
+        };
+    },
+};
+
 interface UsePdfFieldDnDProps {
     fields: PdfField[];
     recipients: RecipientInfo[];
@@ -87,7 +176,8 @@ export const usePdfFieldDnD = ({
             return;
         }
 
-        const newField: PdfField = {
+        const recipientName = recipients[0]?.name ?? '';
+        const baseField: PdfField = {
             id: uuidv4(),
             type: draggedFieldOption.type,
             subType: draggedFieldOption.subType,
@@ -100,31 +190,11 @@ export const usePdfFieldDnD = ({
             path: draggedFieldOption.path,
         };
 
-        const recipientName = recipients[0]?.name ?? '';
-
-        if (newField.type === FieldTypeEnum.eSign) {
-            newField.recipient = recipientName;
-            newField.path = generateESignPath(
-                recipientName,
-                draggedFieldOption.subType as ESignFieldType,
-            );
-        }
-
-        if (newField.type === FieldTypeEnum.fillable) {
-            const defaultSize = FILLABLE_FIELD_DEFAULT_SIZES[newField.subType!];
-            newField.recipient = recipientName;
-            newField.required = false;
-            newField.path = generateFillablePath(recipientName, uuidv4());
-
-            if (defaultSize) {
-                newField.width = defaultSize.width;
-                newField.height = defaultSize.height;
-            }
-        }
-
-        if (newField.type === FieldTypeEnum.calculated) {
-            newField.path = newField.id;
-        }
+        const newField = initializeDroppedFieldByType[baseField.type](
+            baseField,
+            draggedFieldOption,
+            recipientName,
+        );
 
         onFieldsChange([...fields, newField]);
         onSelectField(newField.id);

package/src/interface/types.ts

@@ -3,6 +3,7 @@ export enum FieldTypeEnum {
     eSign = 'eSign',
     fillable = 'fillable',
     calculated = 'calculated',
+    generic = 'generic',
 }
 
 export enum ESignFieldType {
@@ -14,7 +15,31 @@ export enum ESignFieldType {
 
 export type FillableFieldType = 'text' | 'date' | 'checkbox' | 'radio' | 'number';
 
-export type PdfFieldSubType = FillableFieldType | ESignFieldType;
+export type GenericFieldType = 'table' | 'text';
+
+export type PdfFieldSubType = FillableFieldType | ESignFieldType | GenericFieldType;
+
+export interface GenericFieldTableDataType {
+    showHeader: boolean;
+    header: {
+        height: number;
+        cells: {
+            value: string;
+        }[];
+    };
+    body: {
+        height: number;
+        cells: {
+            value: string;
+        }[];
+    }[];
+}
+
+export interface GenericFieldTextDataType {
+    value: string;
+}
+
+export type FieldDataType = GenericFieldTableDataType | GenericFieldTextDataType;
 
 export interface DisplayConditionState {
     behavior: 'show' | 'hide';
@@ -49,6 +74,7 @@ export interface PdfField {
     path?: string;
     recipient?: string;
     description?: string;
+    data?: FieldDataType;
     formula?: StructuredFormula;
     formulaFormat?: CalculatedFieldFormat;
     displayCondition?: DisplayConditionState | null;

package/src/styles/index.css

@@ -9,3 +9,4 @@
 @import './formula-modal.css';
 @import './field-type.css';
 @import './pdf-document-renderer.css';
+@import './inline-editable.css';

package/src/styles/inline-editable.css

@@ -0,0 +1,20 @@
+.inline-editable-input {
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+    border: 1px solid var(--border-color);
+    padding: 2px var(--spacing-half);
+    font: inherit;
+    background: var(--bg-color);
+}
+
+.inline-editable-button {
+    min-height: 20px;
+    width: 100%;
+    height: inherit;
+    cursor: pointer;
+}
+
+.inline-editable-html-text {
+    margin: var(--spacing-0, 0);
+}

package/src/styles/pdf-field-overlay.css

@@ -112,3 +112,34 @@
     pointer-events: none;
     margin: var(--spacing-0, 0);
 }
+
+.dte-pdf-field-generic-table {
+    padding: var(--spacing-0, 0);
+    margin: var(--spacing-0, 0);
+    border-spacing: var(--spacing-0, 0);
+    width: 100%;
+    table-layout: fixed;
+}
+
+.dte-pdf-field-generic-table td {
+    border-top: 1px solid var(--border-color);
+    border-left: 1px solid var(--border-color);
+    padding-inline: var(--spacing-1, 8px);
+}
+
+.dte-pdf-field-generic-table .dte-pdf-field-generic-table-header td {
+    background-color: var(--bg-color);
+    font-weight: bold;
+}
+
+.dte-pdf-field-generic-table tr:not(.dte-pdf-field-generic-table-header) td {
+    background-color: var(--bg-color-light);
+}
+
+.dte-pdf-field-generic-table tr:last-child td {
+    border-bottom: 1px solid var(--border-color);
+}
+
+.dte-pdf-field-generic-table tr td:last-child {
+    border-right: 1px solid var(--border-color);
+}

package/src/styles/variables.css

@@ -16,9 +16,15 @@
 
     /* Colors - Neutral */
     --color-neutral-0: var(--color-neutral-0, #ffffff);
+    --color-neutral-70: var(--color-neutral-70, #737475);
     --color-neutral-200: var(--color-neutral-200, #6c6d70);
     --color-neutral-300: var(--color-neutral-300, #2d2e31);
 
+    /* Background colors */
+    --bg-color-light: var(--color-neutral-0, #ffffff);
+    --bg-color: var(--color-neutral-200, #f5f5f5);
+    --bg-color-hover: #eaeaea;
+
     /* Colors - Semantic */
     --success: #28a745;
     --danger: #dc3545;

package/src/utils/formula/validate-formula.utils.ts

@@ -1,16 +1,10 @@
-import {
-    FormulaToken,
-    FORMULA_OPERATORS,
-    StructuredFormula,
-} from '../../interface/types';
+import { FormulaToken, StructuredFormula } from '../../interface/types';
 
 export interface FormulaValidationResult {
     valid: boolean;
     errors: string[];
 }
 
-const OPERATOR_SET = new Set<string>(FORMULA_OPERATORS);
-
 function isOperatorToken(t: FormulaToken): t is FormulaToken & { type: 'operator' } {
     return t.type === 'operator';
 }
@@ -54,6 +48,9 @@ export function validateFormula(
             if (prev != null && isOperatorToken(prev)) {
                 errors.push('Operand required before closing parenthesis');
             }
+            if (next != null && (isOperandToken(next) || next.type === 'lparen')) {
+                errors.push('Operator required between expressions');
+            }
         } else if (t.type === 'operator') {
             if (prev == null || next == null) {
                 errors.push('Operator must be between two operands or expressions');
@@ -66,11 +63,17 @@ export function validateFormula(
             if (!validPaths.has(t.path)) {
                 errors.push(`Unknown field: "${t.label}" (path: ${t.path})`);
             }
+            if (next != null && isOperandToken(next)) {
+                errors.push('Operator required between two fields or values');
+            }
         } else if (t.type === 'number') {
             const num = parseFloat(t.value);
             if (Number.isNaN(num)) {
                 errors.push(`Invalid number: "${t.value}"`);
             }
+            if (next != null && isOperandToken(next)) {
+                errors.push('Operator required between two fields or values');
+            }
         }
     }