@servicetitan/dte-pdf-editor 1.24.0 → 1.26.0

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

@@ -0,0 +1,188 @@
+import { FC, useMemo, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import {
+    GenericFieldTableDataType,
+    GenericFieldTextDataType,
+    PdfField,
+} from '../../interface/types';
+import { InlineEditable } from '../shared';
+
+interface PdfOverlayFieldGenericProps {
+    field: PdfField;
+    onFieldConfigChange(updates: Partial<PdfField>): void;
+}
+
+export const PdfOverlayFieldGeneric: FC<PdfOverlayFieldGenericProps> = ({
+    field,
+    onFieldConfigChange,
+}) => {
+    if (field.subType === 'text') {
+        return (
+            <GenericFieldText
+                data={field.data as GenericFieldTextDataType}
+                onChange={data => {
+                    onFieldConfigChange({
+                        ...field,
+                        ...data,
+                    });
+                }}
+            />
+        );
+    }
+
+    return (
+        <GenericFieldTable
+            tableData={field.data as GenericFieldTableDataType}
+            onChange={data =>
+                onFieldConfigChange({
+                    ...field,
+                    ...data,
+                })
+            }
+        />
+    );
+};
+
+interface GenericFieldTextProps {
+    data: GenericFieldTextDataType;
+    onChange(updates: Partial<PdfField>): void;
+}
+
+const GenericFieldText: FC<GenericFieldTextProps> = ({ data, onChange }) => {
+    const [isActive, setIsActive] = useState(false);
+    const [editingValue, setEditingValue] = useState(data.value ?? '');
+    const commit = () => {
+        onChange({
+            data: {
+                value: editingValue,
+            },
+        });
+        setIsActive(false);
+    };
+
+    return isActive ? (
+        <textarea
+            style={{ width: '100%', height: '100%' }}
+            value={editingValue}
+            placeholder="Type here..."
+            onChange={e => setEditingValue(e.target.value)}
+            onBlur={commit}
+            onClick={e => e.stopPropagation()}
+            autoFocus
+        />
+    ) : (
+        <div
+            className="inline-editable-button"
+            role="button"
+            tabIndex={0}
+            onClick={() => setIsActive(true)}
+            onKeyDown={e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    setIsActive(true);
+                }
+            }}
+        >
+            <pre className="inline-editable-html-text">{data.value ?? 'Type here...'}</pre>
+        </div>
+    );
+};
+
+interface GenericFieldTableProps {
+    tableData: GenericFieldTableDataType;
+    onChange(updates: Partial<PdfField>): void;
+}
+
+const GenericFieldTable: FC<GenericFieldTableProps> = ({ onChange, tableData }) => {
+    const { body, header, showHeader } = tableData;
+
+    const headerCellsWithKeys = useMemo(() => {
+        return header.cells.map(cell => ({
+            cell,
+            key: uuidv4(),
+        }));
+    }, [header.cells]);
+
+    const bodyRowsWithKeys = useMemo(() => {
+        return body.map(row => ({
+            key: uuidv4(),
+            row,
+        }));
+    }, [body]);
+
+    const commitCellValue = (
+        section: 'header' | 'body',
+        rowIndex: number,
+        cellIndex: number,
+        value: string,
+    ) => {
+        if (section === 'header') {
+            onChange({
+                data: {
+                    ...tableData,
+                    header: {
+                        ...header,
+                        cells: header.cells.map((c, i) => (i === cellIndex ? { ...c, value } : c)),
+                    },
+                },
+            });
+        } else {
+            onChange({
+                data: {
+                    ...tableData,
+                    body: body.map((row, ri) =>
+                        ri === rowIndex
+                            ? {
+                                  ...row,
+                                  cells: row.cells.map((c, i) =>
+                                      i === cellIndex ? { ...c, value } : c,
+                                  ),
+                              }
+                            : row,
+                    ),
+                },
+            });
+        }
+    };
+
+    return (
+        <table className="dte-pdf-field-generic-table">
+            {showHeader && (
+                <tr
+                    style={{ height: header.height }}
+                    className="dte-pdf-field-generic-table-header"
+                >
+                    {headerCellsWithKeys.map(({ cell, key }, cellIndex) => (
+                        <td key={key}>
+                            <InlineEditable
+                                onCommit={value => commitCellValue('header', 0, cellIndex, value)}
+                                value={cell.value}
+                            >
+                                {cell.value}
+                            </InlineEditable>
+                        </td>
+                    ))}
+                </tr>
+            )}
+            {bodyRowsWithKeys.map(({ key: rowKey, row }, rowIndex) => (
+                <tr key={rowKey} style={{ height: row.height }}>
+                    {row.cells.map((cell, cellIndex) => {
+                        const cellKey = `body-${rowIndex}-${cellIndex}`;
+                        return (
+                            <td key={cellKey}>
+                                <InlineEditable
+                                    onCommit={value =>
+                                        commitCellValue('body', rowIndex, cellIndex, value)
+                                    }
+                                    value={cell.value}
+                                >
+                                    {cell.value}
+                                </InlineEditable>
+                            </td>
+                        );
+                    })}
+                </tr>
+            ))}
+        </table>
+    );
+};

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

@@ -1,4 +1,5 @@
 import { FC, MouseEvent, RefObject } from 'react';
+import { HIDE_FIELD_RESIZE } from '../../constants';
 import { useFieldDrag, useFieldResize } from '../../hooks';
 import { FieldTypeEnum, PdfField } from '../../interface/types';
 import { getFieldBackgroundColor, getPagePosition } from '../../utils';
@@ -6,6 +7,7 @@ import { PdfOverlayFieldCalculated } from './pdf-overlay-field-calculated';
 import { PdfOverlayFieldDataModel } from './pdf-overlay-field-data-model';
 import { PdfOverlayFieldESign } from './pdf-overlay-field-e-sign';
 import { PdfOverlayFieldFillable } from './pdf-overlay-field-fillable';
+import { PdfOverlayFieldGeneric } from './pdf-overlay-field-generic';
 import { ResizeHandle } from './resize-handle';
 
 interface PdfOverlayFieldProps {
@@ -15,6 +17,7 @@ interface PdfOverlayFieldProps {
     isSameGroup: boolean;
     recipientsColors: Record<string, string>;
     pdfWrapperRef: RefObject<HTMLDivElement>;
+    onFieldConfigChange(updates: Partial<PdfField>): void;
     handleAddNewField(field: PdfField): void;
     onFieldClick(fieldId: string, e: MouseEvent): void;
     onFieldMove(fieldId: string, newX: number, newY: number, pageNumber: number): void;
@@ -28,6 +31,7 @@ export const PdfOverlayField: FC<PdfOverlayFieldProps> = ({
     isSameGroup,
     isSelected,
     onFieldClick,
+    onFieldConfigChange,
     onFieldMove,
     onFieldResize,
     pdfWrapperRef,
@@ -74,7 +78,13 @@ export const PdfOverlayField: FC<PdfOverlayFieldProps> = ({
             {field.type === FieldTypeEnum.fillable && (
                 <PdfOverlayFieldFillable field={field} handleAddNewField={handleAddNewField} />
             )}
-            {isSelected && <ResizeHandle handleResizeStart={e => handleResizeStart(e, field)} />}
+            {field.type === FieldTypeEnum.generic && (
+                <PdfOverlayFieldGeneric field={field} onFieldConfigChange={onFieldConfigChange} />
+            )}
+            {isSelected &&
+                !(field.subType != null && HIDE_FIELD_RESIZE[field.type]?.[field.subType]) && (
+                    <ResizeHandle handleResizeStart={e => handleResizeStart(e, field)} />
+                )}
             {error && <span className="dte-pdf-field-error-message">{error}</span>}
         </div>
     );

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

@@ -0,0 +1,129 @@
+import { type CSSProperties, FC, useMemo } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import {
+    GenericFieldTableDataType,
+    GenericFieldTextDataType,
+    PdfField,
+} from '../../interface/types';
+
+interface PdfViewGenericProps {
+    field: PdfField;
+}
+
+export const PdfViewGeneric: FC<PdfViewGenericProps> = ({ field }) => {
+    if (field.subType === 'text') {
+        return <GenericFieldText data={field.data as GenericFieldTextDataType} />;
+    }
+
+    return <GenericFieldTable data={field.data as GenericFieldTableDataType} />;
+};
+
+interface GenericFieldTextProps {
+    data: GenericFieldTextDataType;
+}
+
+export const GenericFieldText: FC<GenericFieldTextProps> = ({ data }) => {
+    return (
+        <div className="dte-pdf-field-value">
+            <pre className="inline-editable-html-text">{data?.value ?? ''}</pre>
+        </div>
+    );
+};
+
+interface GenericFieldTableProps {
+    data: GenericFieldTableDataType;
+}
+
+export const GenericFieldTable: FC<GenericFieldTableProps> = ({ data }) => {
+    const { body, header, showHeader } = data;
+
+    const headerCellsWithKeys = useMemo(() => {
+        return header.cells.map(cell => ({
+            cell,
+            key: uuidv4(),
+        }));
+    }, [header.cells]);
+
+    const bodyRowsWithKeys = useMemo(() => {
+        return body.map(row => ({
+            key: uuidv4(),
+            row,
+            cellKeys: row.cells.map(() => uuidv4()),
+        }));
+    }, [body]);
+
+    const baseCellStyle: CSSProperties = {
+        borderTop: '1px solid #e0e0e0',
+        borderLeft: '1px solid #e0e0e0',
+        paddingInline: '8px',
+    };
+
+    const headerCellStyle: CSSProperties = {
+        ...baseCellStyle,
+        backgroundColor: '#f5f5f5',
+    };
+
+    const bodyRowCount = bodyRowsWithKeys.length;
+    const isLastRow = (rowIndex: number) => rowIndex === bodyRowCount - 1;
+    const getBodyCellStyle = (
+        rowIndex: number,
+        cellIndex: number,
+        row: { cells: { value: string }[] },
+    ) => {
+        const lastInRow = cellIndex === row.cells.length - 1;
+        return {
+            ...baseCellStyle,
+            backgroundColor: '#ffffff',
+            ...(isLastRow(rowIndex) ? { borderBottom: '1px solid #e0e0e0' } : {}),
+            ...(lastInRow ? { borderRight: '1px solid #e0e0e0' } : {}),
+        } as CSSProperties;
+    };
+
+    return (
+        <table
+            style={{
+                padding: 0,
+                margin: 0,
+                borderSpacing: 0,
+                width: '100%',
+                tableLayout: 'fixed',
+            }}
+        >
+            {showHeader && header && (
+                <tr style={{ height: header.height, fontWeight: 'bold' }}>
+                    {headerCellsWithKeys.map(({ cell, key }, idx) => (
+                        <td
+                            key={key}
+                            style={{
+                                ...headerCellStyle,
+                                ...(headerCellsWithKeys.length === 1 ||
+                                idx === headerCellsWithKeys.length - 1
+                                    ? { borderRight: '1px solid #e0e0e0' }
+                                    : {}),
+                                ...(bodyRowsWithKeys.length === 0
+                                    ? { borderBottom: '1px solid #e0e0e0' }
+                                    : {}),
+                            }}
+                        >
+                            {cell.value}
+                        </td>
+                    ))}
+                </tr>
+            )}
+            {bodyRowsWithKeys.map(({ cellKeys, key: rowKey, row }, rowIndex) => (
+                <tr key={rowKey} style={{ height: row.height }}>
+                    {row.cells.map((cell, cellIndex) => (
+                        <td
+                            key={cellKeys[cellIndex]}
+                            style={{
+                                ...getBodyCellStyle(rowIndex, cellIndex, row),
+                            }}
+                        >
+                            {cell.value}
+                        </td>
+                    ))}
+                </tr>
+            ))}
+        </table>
+    );
+};

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

@@ -16,6 +16,7 @@ import { PdfViewDataModel } from './pdf-view-data-model';
 import { PdfViewESign } from './pdf-view-e-sign';
 import { PdfViewFieldContainer } from './pdf-view-field-container';
 import { PdfViewFillable } from './pdf-view-fillable';
+import { PdfViewGeneric } from './pdf-view-generic';
 
 export interface PdfViewProps {
     fields: PdfField[];
@@ -116,6 +117,9 @@ export const PdfView: FC<PdfViewProps> = ({
                                         onDataChange={handleDataChange}
                                     />
                                 )}
+                                {field.type === FieldTypeEnum.generic && (
+                                    <PdfViewGeneric field={field} />
+                                )}
                             </PdfViewFieldContainer>
                         ))}
                     </div>

package/src/components/shared/index.ts

@@ -0,0 +1 @@
+export * from './inline-editable';

package/src/components/shared/inline-editable.tsx

@@ -0,0 +1,47 @@
+import { FC, PropsWithChildren, useState } from 'react';
+
+interface InlineEditableProps {
+    value: string;
+    onCommit(value: string): void;
+}
+
+export const InlineEditable: FC<PropsWithChildren<InlineEditableProps>> = ({
+    children,
+    onCommit,
+    value,
+}) => {
+    const [isActive, setIsActive] = useState(false);
+    const [editingValue, setEditingValue] = useState(value);
+
+    const commit = () => {
+        onCommit(editingValue);
+        setIsActive(false);
+    };
+
+    return isActive ? (
+        <input
+            type="text"
+            className="inline-editable-input"
+            value={editingValue}
+            onChange={e => setEditingValue(e.target.value)}
+            onBlur={commit}
+            onClick={e => e.stopPropagation()}
+            autoFocus
+        />
+    ) : (
+        <div
+            className="inline-editable-button"
+            role="button"
+            tabIndex={0}
+            onClick={() => setIsActive(true)}
+            onKeyDown={e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    setIsActive(true);
+                }
+            }}
+        >
+            {children ?? value}
+        </div>
+    );
+};

package/src/constants/field.constants.ts

@@ -4,6 +4,7 @@ import {
     FieldTypeOption,
     PdfFieldSubType,
 } from '../interface/types';
+import { BASE_PAGE_WIDTH } from './pdf-editor.constants';
 
 export const FIELD_CONSTANTS = {
     defaultWidth: 200,
@@ -21,6 +22,13 @@ export const FILLABLE_FIELD_DEFAULT_SIZES = {
     checkbox: { width: 20, height: 20 },
 } as Record<PdfFieldSubType, { width: number; height: number }>;
 
+export const GENERIC_FIELD_TABLE_ROW_HEIGHT = 40;
+
+export const GENERIC_FIELD_DEFAULT_SIZES = {
+    text: { width: BASE_PAGE_WIDTH, height: 40 },
+    table: { width: BASE_PAGE_WIDTH, height: 2 * GENERIC_FIELD_TABLE_ROW_HEIGHT },
+} as Record<PdfFieldSubType, { width: number; height: number }>;
+
 export const E_SIGN_FIELD_TYPE_OPTIONS: { name: string; id: ESignFieldType }[] = [
     { name: 'Signature', id: ESignFieldType.signature },
     { name: 'Initials', id: ESignFieldType.initials },
@@ -50,3 +58,22 @@ export const CALCULATED_FIELD_TYPES: FieldTypeOption[] = [
         type: FieldTypeEnum.calculated,
     },
 ];
+
+export const GENERIC_FIELD_TYPES: FieldTypeOption[] = [
+    {
+        label: 'Text',
+        type: FieldTypeEnum.generic,
+        subType: 'text',
+    },
+    {
+        label: 'Table',
+        type: FieldTypeEnum.generic,
+        subType: 'table',
+    },
+];
+
+export const HIDE_FIELD_RESIZE = {
+    [FieldTypeEnum.generic]: {
+        table: true,
+    },
+} as Record<FieldTypeEnum, Record<PdfFieldSubType, boolean>>;

package/src/constants/menu-group.ts

@@ -1,6 +1,7 @@
 import IconBorderColor from '@servicetitan/anvil2/assets/icons/material/round/border_color.svg';
 import IconCalculate from '@servicetitan/anvil2/assets/icons/material/round/calculate.svg';
 import IconPhotoSizeSelectSmall from '@servicetitan/anvil2/assets/icons/material/round/photo_size_select_small.svg';
+import IconCommercial from '@servicetitan/anvil2/assets/icons/st/commercial.svg';
 import IconEstimate from '@servicetitan/anvil2/assets/icons/st/estimate.svg';
 import { FieldTypeEnum } from '../interface/types';
 
@@ -23,4 +24,9 @@ export const menuGroups: MenuGroupModel[] = [
         label: 'Calculated Fields',
         key: FieldTypeEnum.calculated,
     },
+    {
+        svgIcon: IconCommercial,
+        label: 'Generic Fields',
+        key: FieldTypeEnum.generic,
+    },
 ];

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';