@servicetitan/dte-pdf-editor 1.25.0 → 1.27.0

package/src/components/field-sidebar/generic-field-type-list.tsx

@@ -0,0 +1,27 @@
+import { FC, Fragment } from 'react';
+import { GENERIC_FIELD_TYPES } from '../../constants';
+import { FieldTypeOption } from '../../interface/types';
+import { FieldType } from './field-type';
+
+interface GenericFieldTypeListProps {
+    onDragStart(fieldOption: FieldTypeOption): void;
+    onDragEnd(): void;
+}
+
+export const GenericFieldTypeList: FC<GenericFieldTypeListProps> = ({ onDragEnd, onDragStart }) => {
+    return (
+        <Fragment>
+            {GENERIC_FIELD_TYPES.map(fieldOption => {
+                const key = `${fieldOption.type}-${fieldOption.path ?? fieldOption.label}`;
+                return (
+                    <FieldType
+                        key={key}
+                        label={fieldOption.label}
+                        onDragEnd={onDragEnd}
+                        onDragStart={() => onDragStart(fieldOption)}
+                    />
+                );
+            })}
+        </Fragment>
+    );
+};

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

@@ -24,6 +24,7 @@ interface PdfCanvasProps {
     onFieldMove(fieldId: string, newX: number, newY: number, pageNumber: number): void;
     onFieldResize(fieldId: string, newWidth: number, newHeight: number, pageNumber: number): void;
     onDeselectField(): void;
+    onFieldConfigChange(updates: Partial<PdfField>): void;
 }
 
 export const PdfCanvas: FC<PdfCanvasProps> = ({
@@ -37,6 +38,7 @@ export const PdfCanvas: FC<PdfCanvasProps> = ({
     onDragOver,
     onDrop,
     onFieldClick,
+    onFieldConfigChange,
     onFieldMove,
     onFieldResize,
     onLoadSuccess,
@@ -79,6 +81,7 @@ export const PdfCanvas: FC<PdfCanvasProps> = ({
                     <PdfFieldsOverlay
                         fields={fields}
                         errors={errors}
+                        onFieldConfigChange={onFieldConfigChange}
                         handleAddNewField={handleAddNewField}
                         pdfWrapperRef={pdfWrapperRef}
                         recipientsColors={recipientsColors}

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

@@ -109,6 +109,7 @@ export const PdfEditor: FC<PdfEditorProps> = ({
                     onFieldMove={moveField}
                     onFieldResize={resizeField}
                     onDeselectField={deselectField}
+                    onFieldConfigChange={updateField}
                 />
             </Flex>
         </Flex>

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

@@ -8,6 +8,7 @@ interface PdfFieldsOverlayProps {
     errors: Record<string, string>;
     pdfWrapperRef: RefObject<HTMLDivElement>;
     recipientsColors: Record<string, string>;
+    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;
@@ -19,6 +20,7 @@ export const PdfFieldsOverlay: FC<PdfFieldsOverlayProps> = ({
     fields,
     handleAddNewField,
     onFieldClick,
+    onFieldConfigChange,
     onFieldMove,
     onFieldResize,
     pdfWrapperRef,
@@ -31,6 +33,7 @@ export const PdfFieldsOverlay: FC<PdfFieldsOverlayProps> = ({
                 <PdfOverlayField
                     key={field.id}
                     field={field}
+                    onFieldConfigChange={onFieldConfigChange}
                     error={errors[field.id]}
                     handleAddNewField={handleAddNewField}
                     onFieldMove={onFieldMove}

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,7 +1,8 @@
 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 IconDataObject from '@servicetitan/anvil2/assets/icons/material/round/data_object.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';
 
 export interface MenuGroupModel {
@@ -11,7 +12,7 @@ export interface MenuGroupModel {
 }
 
 export const menuGroups: MenuGroupModel[] = [
-    { svgIcon: IconDataObject, label: 'Merge Tags', key: FieldTypeEnum.dataModel },
+    { svgIcon: IconEstimate, label: 'Merge Tags', key: FieldTypeEnum.dataModel },
     { svgIcon: IconBorderColor, label: 'E-Sign', key: FieldTypeEnum.eSign },
     {
         svgIcon: IconPhotoSizeSelectSmall,
@@ -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/useFormulaEditor.ts

@@ -127,10 +127,13 @@ export const useFormulaEditor = (params: {
             if (!editor) {
                 return;
             }
-            const inserted = `${path} `;
             const caretIndex = getCaretIndexForInsert();
             const before = draftExpression.slice(0, caretIndex);
             const after = draftExpression.slice(caretIndex);
+            const lastCharBefore = before.trimEnd().slice(-1);
+            const needsOperatorBefore =
+                lastCharBefore.length > 0 && /[A-Za-z0-9_.]/.test(lastCharBefore);
+            const inserted = needsOperatorBefore ? ` ${path} ` : `${path} `;
             const nextValue = `${before}${inserted}${after}`;
             updateSourceRef.current = 'state';
             pushHistory(nextValue, caretIndex + inserted.length);