@servicetitan/dte-pdf-editor 1.56.0 → 1.58.0

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

@@ -1,6 +1,11 @@
 import { FC, useMemo } from 'react';
 import { DataModelValues, PdfField, PdfViewMode } from '../../interface/types';
-import { evaluateFormula, formatCalculatedResult, resolvePdfDataValues } from '../../utils';
+import {
+    evaluateFormula,
+    formatCalculatedResult,
+    getFieldTextClipClassName,
+    resolvePdfDataValues,
+} from '../../utils';
 
 interface PdfViewCalculatedProps {
     field: PdfField;
@@ -33,5 +38,7 @@ export const PdfViewCalculated: FC<PdfViewCalculatedProps> = ({
     const shouldShowPreviewFallback = isPreview && displayValue === '';
     const content = shouldShowPreviewFallback ? field.label || 'Calculated Field' : displayValue;
 
-    return <div className="dte-pdf-field-value">{content}</div>;
+    return (
+        <div className={`dte-pdf-field-value ${getFieldTextClipClassName(field)}`}>{content}</div>
+    );
 };

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

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { DataModelValues, PdfField } from '../../interface/types';
-import { nl2br, resolvePdfDataValues } from '../../utils';
+import { getFieldTextClipClassName, nl2br, resolvePdfDataValues } from '../../utils';
 
 interface PdfViewDataModelProps {
     field: PdfField;
@@ -16,7 +16,7 @@ export const PdfViewDataModel: FC<PdfViewDataModelProps> = ({ data, field }) =>
      */
     return (
         <div
-            className="dte-pdf-field-value"
+            className={`dte-pdf-field-value ${getFieldTextClipClassName(field)}`}
             // eslint-disable-next-line react/no-danger, @typescript-eslint/naming-convention
             dangerouslySetInnerHTML={{ __html: nl2br(resolvedValue ?? '') }}
         />

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

@@ -9,10 +9,9 @@ export const PdfViewESign: FC<PdfViewESignProps> = ({ field }) => {
     return (
         <span>
             {field.label} {field.required ? '*' : ''}
-            <div
-                className="dte-pdf-field-value"
-                style={{ opacity: 0.1, color: '#fff' }}
-            >{`{{${field.path}}}`}</div>
+            <div className="dte-pdf-field-value" style={{ fontSize: '8px' }}>
+                {field.path}
+            </div>
         </span>
     );
 };

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

@@ -3,9 +3,8 @@ import { DataModelValues, PdfField } from '../../interface/types';
 import {
     evaluateDisplayCondition,
     getFieldBackgroundColor,
-    getFieldFontSizeInPixels,
+    getFieldBoundsStyle,
     getPagePosition,
-    supportsFieldFontSize,
 } from '../../utils';
 
 interface PdfViewFieldContainer {
@@ -35,21 +34,12 @@ export const PdfViewFieldContainer: FC<PropsWithChildren<PdfViewFieldContainer>>
     const bgColor = getFieldBackgroundColor(field.recipient, recipientsColors);
     return (
         <div
-            style={{
-                display: 'flex',
-                alignItems: 'center',
-                position: 'absolute',
-                padding: '4px',
-                background: bgColor,
-                left: `${pagePos.left + field.x}px`,
-                top: `${pagePos.top + field.y}px`,
-                width: `${field.width}px`,
-                height: `${field.height}px`,
-                ...(supportsFieldFontSize(field)
-                    ? { fontSize: `${getFieldFontSizeInPixels(field)}px` }
-                    : {}),
+            className="dte-pdf-field-view"
+            style={getFieldBoundsStyle(field, {
+                pageOffset: pagePos,
+                backgroundColor: bgColor,
                 borderColor: error ? 'red' : undefined,
-            }}
+            })}
         >
             {children}
             {error && (

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

@@ -1,6 +1,11 @@
 import { FC } from 'react';
 import { DataChangePayload, DataModelValues, PdfField, PdfViewMode } from '../../interface/types';
-import { dateToUtcZero, getFieldPlaceholderText, toDateInputValue } from '../../utils';
+import {
+    dateToUtcZero,
+    getFieldPlaceholderText,
+    getFieldTextClipClassName,
+    toDateInputValue,
+} from '../../utils';
 
 interface PdfViewFillableProps {
     field: PdfField;
@@ -21,10 +26,13 @@ interface FillableTextInputProps {
 
 const fillableTextStyles = {
     background: 'inherit',
-    width: 'inherit',
-    height: 'inherit',
-    borderColor: 'inherit',
+    width: '100%',
+    height: '100%',
+    border: 'none',
     fontSize: 'inherit',
+    boxSizing: 'border-box' as const,
+    padding: 0,
+    margin: 0,
 } as const;
 
 export const FillableTextInput: FC<FillableTextInputProps> = ({
@@ -38,6 +46,7 @@ export const FillableTextInput: FC<FillableTextInputProps> = ({
         <input
             readOnly={readOnly}
             type="text"
+            className={`dte-pdf-field-fillable ${getFieldTextClipClassName(field)}`}
             style={fillableTextStyles}
             disabled={disabled}
             id={field.path}
@@ -59,6 +68,7 @@ export const FillableTextareaInput: FC<FillableTextInputProps> = ({
     return (
         <textarea
             readOnly={readOnly}
+            className={`dte-pdf-field-fillable ${getFieldTextClipClassName(field)}`}
             style={{ ...fillableTextStyles, resize: 'none' }}
             disabled={disabled}
             id={field.path}
@@ -96,20 +106,20 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
     if (field.subType === 'checkbox') {
         return (
             <div
+                className="dte-pdf-field-content"
                 style={{
                     display: 'flex',
                     alignItems: 'center',
                     background: 'inherit',
-                    width: 'inherit',
-                    height: 'inherit',
                 }}
             >
                 <input
+                    title={field.label}
                     style={{
-                        width: 'inherit',
-                        height: 'inherit',
+                        width: field.width,
+                        height: field.height,
                         margin: 0,
-                        borderColor: 'inherit',
+                        border: 'none',
                     }}
                     type="checkbox"
                     checked={resolvedValue ?? false}
@@ -125,20 +135,21 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
     if (field.subType === 'radio') {
         return (
             <div
+                className="dte-pdf-field-content"
                 style={{
                     display: 'flex',
                     alignItems: 'center',
                     background: 'inherit',
-                    width: 'inherit',
-                    height: 'inherit',
+                    width: '100%',
+                    height: '100%',
                 }}
             >
                 <input
                     style={{
-                        width: 'inherit',
-                        height: 'inherit',
+                        width: field.width,
+                        height: field.height,
                         margin: 0,
-                        borderColor: 'inherit',
+                        border: 'none',
                     }}
                     type="radio"
                     value={field.id}
@@ -158,13 +169,8 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
             <input
                 readOnly={readOnly}
                 type="date"
-                style={{
-                    background: 'inherit',
-                    width: 'inherit',
-                    height: 'inherit',
-                    borderColor: 'inherit',
-                    fontSize: 'inherit',
-                }}
+                className={`dte-pdf-field-fillable ${getFieldTextClipClassName(field)}`}
+                style={fillableTextStyles}
                 disabled={!isFillable}
                 id={field.path}
                 name={field.path}
@@ -183,13 +189,8 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
             <input
                 readOnly={readOnly}
                 type="number"
-                style={{
-                    background: 'inherit',
-                    width: 'inherit',
-                    height: 'inherit',
-                    borderColor: 'inherit',
-                    fontSize: 'inherit',
-                }}
+                className={`dte-pdf-field-fillable ${getFieldTextClipClassName(field)}`}
+                style={fillableTextStyles}
                 disabled={!isFillable}
                 id={field.path}
                 name={field.path}

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

@@ -24,7 +24,7 @@ interface GenericFieldTextProps {
 
 export const GenericFieldText: FC<GenericFieldTextProps> = ({ data }) => {
     return (
-        <div className="dte-pdf-field-value">
+        <div className="dte-pdf-field-value dte-pdf-field-text--wrapped">
             <pre className="inline-editable-html-text">{data?.value ?? ''}</pre>
         </div>
     );

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

@@ -111,7 +111,10 @@ export const PdfView: FC<PdfViewProps> = ({
                             >
                                 {(field.type === FieldTypeEnum.dataModel ||
                                     field.type === FieldTypeEnum.forms) && (
-                                    <PdfViewDataModel field={field} data={data} />
+                                    <PdfViewDataModel
+                                        field={field}
+                                        data={viewMode === 'preview' ? previewData : data}
+                                    />
                                 )}
                                 {field.type === FieldTypeEnum.eSign && (
                                     <PdfViewESign field={field} />

package/src/constants/field.constants.ts

@@ -20,6 +20,11 @@ export const FIELD_CONSTANTS = {
 
 export const DEFAULT_FIELD_FONT_SIZE = 8;
 
+/** Matches the PdfSharp default face used by `/conversions/templatetopdf`. */
+export const DEFAULT_FIELD_FONT_FAMILY = 'Arial, Helvetica, sans-serif';
+
+export const DEFAULT_FIELD_FONT_WEIGHT = 'normal' as const;
+
 export const FIELD_FONT_SIZE_OPTIONS = Array.from({ length: 17 }, (_, index) => {
     return 4 + index;
 });

package/src/interface/types.ts

@@ -85,6 +85,8 @@ export interface DisplayConditionSingle {
 
 export interface PdfFieldStyles {
     fontSize?: number;
+    fontFamily?: string;
+    fontWeight?: 'normal' | 'bold';
 }
 
 export interface PdfField {

package/src/styles/inline-editable.css

@@ -18,4 +18,5 @@
 .inline-editable-html-text {
     margin: var(--spacing-0, 0);
     white-space: pre-wrap;
+    font-family: 'Arial', sans-serif;
 }

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

@@ -11,38 +11,34 @@
     pointer-events: auto;
 }
 
-.dte-pdf-field {
-    position: absolute;
-    border: 1px dashed #999;
-    display: flex;
-    align-items: center;
-    font-size: var(--typescale-1, 14px);
-    padding: var(--spacing-half, 4px);
-    box-sizing: content-box;
+/* Editor-only chrome. Layout metrics come from getFieldBoundsStyle. */
+.dte-pdf-field-editor {
+    outline: 1px dashed #999;
+    outline-offset: 0;
+    border: none;
     pointer-events: auto;
 }
 
-.dte-pdf-field.--selected {
-    border: 2px solid var(--border-color-active);
+.dte-pdf-field-editor.--selected {
+    outline: 2px solid var(--border-color-active);
     cursor: move;
 }
 
-.dte-pdf-field.--unselected {
+.dte-pdf-field-editor.--unselected {
     cursor: pointer;
 }
 
-.dte-pdf-field.--dragging {
+.dte-pdf-field-editor.--dragging {
     opacity: 0.5;
-    will-change: left, top;
 }
 
-.dte-pdf-field.--colored:not(.--selected) {
-    border-color: var(--border-color-active) !important;
+.dte-pdf-field-editor.--colored:not(.--selected) {
+    outline-color: var(--border-color-active) !important;
     box-shadow: 0 0 2px 0 var(--border-color-active);
 }
 
-.dte-pdf-field.--error {
-    border-color: var(--danger) !important;
+.dte-pdf-field-editor.--error {
+    outline-color: var(--danger) !important;
     box-shadow: 0 0 4px 0 var(--danger);
 }
 
@@ -82,38 +78,95 @@
     height: 20px;
 }
 
-.dte-pdf-field:hover .dte-add-field-button {
+.dte-pdf-field-editor:hover .dte-add-field-button {
     display: block;
 }
 
 .dte-pdf-field-view {
     border: none;
+    outline: none;
     cursor: default;
+    pointer-events: auto;
+}
+
+.dte-pdf-field-content {
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
     overflow: hidden;
+    line-height: 1;
+}
+
+/*
+ * Printed PDF text modes (no ellipsis — hard clip like PdfSharp).
+ */
+.dte-pdf-field-text--single-line {
+    width: 100%;
+    min-width: 0;
+    line-height: 1;
     white-space: nowrap;
-    pointer-events: none;
-    justify-content: left;
-    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
-.dte-pdf-field-value {
-    font-weight: normal;
-    color: #333;
+.dte-pdf-field-text--multiline {
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    line-height: 1;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    overflow: hidden;
+}
+
+.dte-pdf-field-text--wrapped {
+    width: 100%;
+    min-width: 0;
+    line-height: 1;
     white-space: normal;
+    overflow-wrap: break-word;
     overflow: hidden;
-    text-overflow: ellipsis;
+}
+
+.dte-pdf-field-value {
+    color: #333;
+    font: inherit;
 }
 
 .dte-pdf-field-fillable {
     width: 100%;
     height: 100%;
+    min-width: 0;
+    min-height: 0;
+    box-sizing: border-box;
     background: inherit;
     border: none;
-    pointer-events: none;
-    margin: var(--spacing-0, 0);
+    padding: var(--spacing-0);
+    margin: var(--spacing-0);
+    line-height: 1;
     font-size: inherit;
 }
 
+.dte-pdf-field-editor .dte-pdf-field-fillable {
+    pointer-events: none;
+}
+
+.dte-pdf-field-view .dte-pdf-field-fillable {
+    pointer-events: auto;
+}
+
+.dte-pdf-field-fillable.dte-pdf-field-text--single-line {
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.dte-pdf-field-fillable.dte-pdf-field-text--multiline {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    overflow: hidden;
+    resize: none;
+}
+
 .dte-pdf-field-generic-table {
     padding: var(--spacing-0, 0);
     margin: var(--spacing-0, 0);

package/src/utils/field/__tests__/get-field-bounds-style.utils.test.ts

@@ -0,0 +1,50 @@
+import { FieldTypeEnum, PdfField } from '../../../interface/types';
+import { getFieldBoundsStyle } from '../get-field-bounds-style.utils';
+
+const buildField = (overrides: Partial<PdfField> = {}): PdfField => ({
+    id: 'field-1',
+    type: FieldTypeEnum.fillable,
+    subType: 'text',
+    x: 10,
+    y: 20,
+    page: 1,
+    label: 'Label',
+    width: 200,
+    height: 25,
+    ...overrides,
+});
+
+describe('getFieldBoundsStyle', () => {
+    const subject = (field: PdfField, options?: Parameters<typeof getFieldBoundsStyle>[1]) =>
+        getFieldBoundsStyle(field, options);
+
+    test('positions the field using page offset and field coordinates', () => {
+        expect(subject(buildField(), { pageOffset: { left: 5, top: 15 } })).toMatchObject({
+            left: 15,
+            top: 35,
+            width: 200,
+            height: 25,
+        });
+    });
+
+    test('matches printed PDF clip rect layout', () => {
+        expect(subject(buildField())).toMatchObject({
+            boxSizing: 'border-box',
+            padding: 0,
+            alignItems: 'flex-start',
+            justifyContent: 'flex-start',
+            overflow: 'hidden',
+            lineHeight: 1,
+        });
+    });
+
+    test('converts font size from points to editor pixels', () => {
+        const style = subject(buildField({ styles: { fontSize: 12 } }));
+        expect(style.fontSize).toBe(`${(12 * 980) / 612}px`);
+    });
+
+    test('omits font size for field types that do not support it', () => {
+        const style = subject(buildField({ type: FieldTypeEnum.eSign, subType: 'signature' }));
+        expect(style.fontSize).toBeUndefined();
+    });
+});

package/src/utils/field/__tests__/get-field-text-clip.utils.test.ts

@@ -0,0 +1,43 @@
+import { FieldTypeEnum, PdfField } from '../../../interface/types';
+import { getFieldTextClipClassName, getFieldTextClipMode } from '../get-field-text-clip.utils';
+
+const buildField = (overrides: Partial<PdfField> = {}): PdfField => ({
+    id: 'field-1',
+    type: FieldTypeEnum.fillable,
+    subType: 'text',
+    x: 0,
+    y: 0,
+    page: 1,
+    label: 'Label',
+    width: 200,
+    height: 25,
+    ...overrides,
+});
+
+describe('getFieldTextClipMode', () => {
+    const subject = (field: PdfField) => getFieldTextClipMode(field);
+
+    test('uses multiline for multiline fillable fields', () => {
+        expect(subject(buildField({ multiline: true }))).toBe('multiline');
+    });
+
+    test('uses single-line for standard fillable fields', () => {
+        expect(subject(buildField())).toBe('single-line');
+    });
+
+    test('uses wrapped for data model and generic text fields', () => {
+        expect(subject(buildField({ type: FieldTypeEnum.dataModel }))).toBe('wrapped');
+        expect(
+            subject(buildField({ type: FieldTypeEnum.generic, subType: 'text' })),
+        ).toBe('wrapped');
+    });
+});
+
+describe('getFieldTextClipClassName', () => {
+    const subject = (field: PdfField) => getFieldTextClipClassName(field);
+
+    test('maps mode to css class', () => {
+        expect(subject(buildField())).toBe('dte-pdf-field-text--single-line');
+        expect(subject(buildField({ multiline: true }))).toBe('dte-pdf-field-text--multiline');
+    });
+});

package/src/utils/field/__tests__/get-field-typography.utils.test.ts

@@ -0,0 +1,56 @@
+import { FieldTypeEnum, PdfField } from '../../../interface/types';
+import {
+    DEFAULT_FIELD_FONT_FAMILY,
+    DEFAULT_FIELD_FONT_WEIGHT,
+} from '../../../constants/field.constants';
+import { getFieldTypographyStyle } from '../get-field-typography.utils';
+
+const buildField = (overrides: Partial<PdfField> = {}): PdfField => ({
+    id: 'field-1',
+    type: FieldTypeEnum.fillable,
+    subType: 'text',
+    x: 0,
+    y: 0,
+    page: 1,
+    label: 'Label',
+    width: 200,
+    height: 25,
+    ...overrides,
+});
+
+describe('getFieldTypographyStyle', () => {
+    const subject = (field: PdfField) => getFieldTypographyStyle(field);
+
+    test('applies backend default font family and weight', () => {
+        expect(subject(buildField())).toEqual({
+            fontFamily: DEFAULT_FIELD_FONT_FAMILY,
+            fontWeight: DEFAULT_FIELD_FONT_WEIGHT,
+            fontSize: `${(8 * 980) / 612}px`,
+        });
+    });
+
+    test('uses per-field typography overrides when provided', () => {
+        expect(
+            subject(
+                buildField({
+                    styles: {
+                        fontSize: 12,
+                        fontFamily: 'Times New Roman',
+                        fontWeight: 'bold',
+                    },
+                }),
+            ),
+        ).toEqual({
+            fontFamily: 'Times New Roman',
+            fontWeight: 'bold',
+            fontSize: `${(12 * 980) / 612}px`,
+        });
+    });
+
+    test('omits font size for unsupported field types', () => {
+        expect(subject(buildField({ type: FieldTypeEnum.eSign, subType: 'signature' }))).toEqual({
+            fontFamily: DEFAULT_FIELD_FONT_FAMILY,
+            fontWeight: DEFAULT_FIELD_FONT_WEIGHT,
+        });
+    });
+});

package/src/utils/field/get-field-bounds-style.utils.ts

@@ -0,0 +1,65 @@
+import { CSSProperties } from 'react';
+import { FieldTypeEnum, PdfField, PdfFieldSubType } from '../../interface/types';
+import { getFieldTypographyStyle } from './get-field-typography.utils';
+
+interface FieldBoundsStyleOptions {
+    pageOffset?: { left: number; top: number };
+    backgroundColor?: string;
+    borderColor?: string;
+}
+
+const getFieldTypeSpecificStyle = (field: PdfField): CSSProperties => {
+    if (!field.subType) {
+        return {};
+    }
+    const styles = {
+        [FieldTypeEnum.fillable]: {
+            checkbox: {
+                width: 'unset',
+                height: 'unset',
+            },
+            radio: {
+                width: 'unset',
+                height: 'unset',
+            },
+        },
+    } as Record<FieldTypeEnum, Record<PdfFieldSubType, CSSProperties>>;
+
+    return styles[field.type]?.[field.subType] ?? {};
+};
+
+/**
+ * Shared absolute-position style for PDF field overlays.
+ *
+ * Matches the backend `/conversions/templatetopdf` clip rectangle and
+ * `PdfView` preview: content-box sizing, top-left alignment,
+ * and shared typography (font size / family / weight).
+ */
+export const getFieldBoundsStyle = (
+    field: PdfField,
+    options?: FieldBoundsStyleOptions,
+): CSSProperties => {
+    const { backgroundColor, borderColor, pageOffset = { left: 0, top: 0 } } = options ?? {};
+
+    return {
+        position: 'absolute',
+        left: pageOffset.left + field.x,
+        top: pageOffset.top + field.y,
+        width: field.width,
+        height: field.height,
+        display: 'flex',
+        alignItems: 'flex-start',
+        justifyContent: 'flex-start',
+        boxSizing: 'content-box',
+        padding: 4,
+        margin: 0,
+        minWidth: 0,
+        minHeight: 0,
+        overflow: 'hidden',
+        lineHeight: 1,
+        ...getFieldTypeSpecificStyle(field),
+        ...getFieldTypographyStyle(field),
+        ...(backgroundColor ? { backgroundColor } : {}),
+        ...(borderColor ? { borderColor } : {}),
+    };
+};

package/src/utils/field/get-field-text-clip.utils.ts

@@ -0,0 +1,31 @@
+import { FieldTypeEnum, PdfField } from '../../interface/types';
+
+export type FieldTextClipMode = 'single-line' | 'multiline' | 'wrapped';
+
+/**
+ * Text layout mode for a field overlay.
+ *
+ * Mirrors the backend PDF renderer:
+ * - single-line: no wrap, hard clip at the field rect (no ellipsis)
+ * - multiline: pre-wrap with word breaks, clip overflow vertically
+ * - wrapped: word-wrap for HTML / long prose blocks
+ */
+export const getFieldTextClipMode = (field: PdfField): FieldTextClipMode => {
+    if (field.type === FieldTypeEnum.fillable && field.multiline) {
+        return 'multiline';
+    }
+
+    if (field.type === FieldTypeEnum.generic && field.subType === 'text') {
+        return 'wrapped';
+    }
+
+    if (field.type === FieldTypeEnum.dataModel || field.type === FieldTypeEnum.forms) {
+        return 'wrapped';
+    }
+
+    return 'single-line';
+};
+
+export const getFieldTextClipClassName = (field: PdfField) => {
+    return `dte-pdf-field-text--${getFieldTextClipMode(field)}`;
+};