@servicetitan/dte-pdf-editor 1.49.0 → 1.51.0

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

@@ -1,6 +1,6 @@
 import { Button, Checkbox, Combobox, Flex, Textarea, TextField } from '@servicetitan/anvil2';
 import { FC, useMemo } from 'react';
-import { E_SIGN_FIELD_TYPE_OPTIONS } from '../../constants';
+import { E_SIGN_FIELD_TYPE_OPTIONS, FIELD_FONT_SIZE_OPTIONS } from '../../constants';
 import {
     ESignFieldType,
     FieldTypeEnum,
@@ -10,7 +10,12 @@ import {
     RecipientInfo,
     SchemaObject,
 } from '../../interface/types';
-import { generateESignPath, generateFillablePath } from '../../utils';
+import {
+    generateESignPath,
+    generateFillablePath,
+    getFieldFontSize,
+    supportsFieldFontSize,
+} from '../../utils';
 import { DisplayCondition } from '../display-conditions/display-condition';
 import { FormulaGenerator } from './formula-generator';
 import { TableConfigs } from './table-configs';
@@ -86,6 +91,19 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
         }
     };
 
+    const showFontSizeControl = supportsFieldFontSize(field);
+
+    const handleFontSizeChange = (item: number | null) => {
+        if (item) {
+            onFieldConfigChange({
+                styles: {
+                    ...field.styles,
+                    fontSize: item,
+                },
+            });
+        }
+    };
+
     return (
         <Flex direction="column" gap="4">
             {[
@@ -151,7 +169,7 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
             {field.type !== FieldTypeEnum.generic && (
                 <TextField label="Data Path" value={field.path} disabled />
             )}
-            {field.type === FieldTypeEnum.fillable && field.subType !== 'checkbox' && (
+            {field.type === FieldTypeEnum.fillable && (
                 <Checkbox
                     label="Required"
                     checked={field.required}
@@ -192,6 +210,28 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
                 />
             )}
 
+            {showFontSizeControl && (
+                <Combobox
+                    items={FIELD_FONT_SIZE_OPTIONS}
+                    itemToString={item => item?.toString() ?? ''}
+                    onChange={handleFontSizeChange}
+                    selectedItem={getFieldFontSize(field)}
+                >
+                    <Combobox.SearchField label="Font Size" />
+                    <Combobox.Content>
+                        {({ items }) => (
+                            <Combobox.List>
+                                {items.map((item, i) => (
+                                    <Combobox.Item key={item} item={item} index={i}>
+                                        {item}
+                                    </Combobox.Item>
+                                ))}
+                            </Combobox.List>
+                        )}
+                    </Combobox.Content>
+                </Combobox>
+            )}
+
             {field.type === FieldTypeEnum.generic && field.subType === 'table' && (
                 <TableConfigs field={field} onFieldConfigChange={onFieldConfigChange} />
             )}

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

@@ -1,9 +1,13 @@
-import { Button, Flex, Text } from '@servicetitan/anvil2';
+import { Button, Flex, SearchField, Text } from '@servicetitan/anvil2';
 import IconArrowBack from '@servicetitan/anvil2/assets/icons/material/round/keyboard_arrow_left.svg';
 import IconArrowForward from '@servicetitan/anvil2/assets/icons/material/round/keyboard_arrow_right.svg';
 import { FC, Fragment, useMemo, useState } from 'react';
 import { FieldTypeOption, FormFieldsByFormIdI, FormInfo } from '../../interface/types';
-import { formFieldInfosToCalculationOptions, parseFormFieldKey } from '../../utils';
+import {
+    formFieldInfosToCalculationOptions,
+    getFieldSampleData,
+    parseFormFieldKey,
+} from '../../utils';
 
 interface FieldSidebarProps {
     fillableOptions: FieldTypeOption[];
@@ -31,15 +35,23 @@ export const FieldSidebar: FC<FieldSidebarProps> = ({
     selectedPaths,
 }) => {
     const [selectedFormId, setSelectedFormId] = useState<number | null>(null);
+    const [topSearchValue, setTopSearchValue] = useState('');
+    const [formFieldsSearchValue, setFormFieldsSearchValue] = useState('');
 
     const onFormClick = (formId: number) => {
         setSelectedFormId(formId);
+        setFormFieldsSearchValue('');
         const loaded = formFieldsByFormId[formId];
         if (!loaded?.length) {
             onRequestFormFields(formId);
         }
     };
 
+    const onBackToList = () => {
+        setSelectedFormId(null);
+        setFormFieldsSearchValue('');
+    };
+
     const isFormFieldsLoading = selectedFormId != null && formulaLoadingFormId === selectedFormId;
 
     const selectedForm = useMemo(
@@ -57,6 +69,36 @@ export const FieldSidebar: FC<FieldSidebarProps> = ({
               );
     }, [selectedFormId, formFieldsByFormId, selectedForm?.name]);
 
+    const filteredForms = useMemo(() => {
+        const query = topSearchValue.trim().toLowerCase();
+        if (!query) {
+            return forms;
+        }
+        return forms.filter(form => form.name.toLowerCase().includes(query));
+    }, [forms, topSearchValue]);
+
+    const filteredMergeTagOptions = useMemo(() => {
+        const query = topSearchValue.trim().toLowerCase();
+        if (!query) {
+            return mergeTagOptions;
+        }
+        return mergeTagOptions.filter(option => {
+            const label = (option.label ?? option.path ?? '').toLowerCase();
+            return label.includes(query);
+        });
+    }, [mergeTagOptions, topSearchValue]);
+
+    const filteredCalcOptions = useMemo(() => {
+        const query = formFieldsSearchValue.trim().toLowerCase();
+        if (!query) {
+            return calcOptions;
+        }
+        return calcOptions.filter(option => {
+            const label = (option.label ?? option.path ?? '').toLowerCase();
+            return label.includes(query);
+        });
+    }, [calcOptions, formFieldsSearchValue]);
+
     const formIdsReferencedInFormula = useMemo(() => {
         const ids = new Set<number>();
         for (const path of selectedPaths) {
@@ -75,7 +117,14 @@ export const FieldSidebar: FC<FieldSidebarProps> = ({
                     className={`dte-formula-sidebar-slide-track${selectedFormId ? ' --detail' : ''}`}
                 >
                     <div className="dte-formula-sidebar-slide-panel">
-                        {forms.length > 0 && (
+                        <SearchField
+                            placeholder="Search"
+                            size="small"
+                            style={{ marginLeft: '4px', marginTop: '18px' }}
+                            value={topSearchValue}
+                            onChange={e => setTopSearchValue(e.target.value ?? '')}
+                        />
+                        {filteredForms.length > 0 && (
                             <div className="dte-formula-sidebar-forms-heading">
                                 <Text variant="headline" el="h6" size="small">
                                     Forms
@@ -85,7 +134,7 @@ export const FieldSidebar: FC<FieldSidebarProps> = ({
                                     role="listbox"
                                     aria-label="Forms"
                                 >
-                                    {forms.map(form => (
+                                    {filteredForms.map(form => (
                                         <li
                                             key={form.id}
                                             role="option"
@@ -122,7 +171,7 @@ export const FieldSidebar: FC<FieldSidebarProps> = ({
                         />
                         <FieldOptionList
                             title="Merge tags"
-                            options={mergeTagOptions}
+                            options={filteredMergeTagOptions}
                             highlightElementPath={highlightElementPath}
                             selectedPaths={selectedPaths}
                             onHover={onHover}
@@ -138,7 +187,7 @@ export const FieldSidebar: FC<FieldSidebarProps> = ({
                                     size="small"
                                     icon={IconArrowBack}
                                     title={selectedForm?.name ?? 'Form fields'}
-                                    onClick={() => setSelectedFormId(null)}
+                                    onClick={onBackToList}
                                 >
                                     <Text
                                         size="medium"
@@ -148,11 +197,18 @@ export const FieldSidebar: FC<FieldSidebarProps> = ({
                                         {selectedForm?.name ?? 'Form fields'}
                                     </Text>
                                 </Button>
+                                <SearchField
+                                    style={{ margin: '4px' }}
+                                    placeholder="Search"
+                                    size="small"
+                                    value={formFieldsSearchValue}
+                                    onChange={e => setFormFieldsSearchValue(e.target.value ?? '')}
+                                />
 
                                 <FieldOptionList
                                     title=""
                                     isLoading={isFormFieldsLoading}
-                                    options={calcOptions}
+                                    options={filteredCalcOptions}
                                     highlightElementPath={highlightElementPath}
                                     selectedPaths={selectedPaths}
                                     onHover={onHover}
@@ -228,6 +284,14 @@ const FieldOptionList: FC<FieldOptionListProps> = ({
                             <span className="dte-text-ellipsis" title={opt.label ?? opt.path}>
                                 {opt.label ?? opt.path}
                             </span>
+                            <Text
+                                size="small"
+                                subdued
+                                style={{ fontSize: '12px', marginTop: '-2px' }}
+                                className="ellipsis"
+                            >
+                                e.g. {getFieldSampleData(opt.sampleData, opt.fieldType)}
+                            </Text>
                         </li>
                     ))}
                 </ul>

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

@@ -11,13 +11,17 @@ import { useFormulaEditor } from '../../hooks';
 import {
     CalculatedFieldFormat,
     DataModelFieldGroup,
+    DataModelValues,
     FieldTypeOption,
     FormFieldsByFormIdI,
     FormInfo,
     StructuredFormula,
 } from '../../interface/types';
 import {
+    evaluateFormula,
+    formatCalculatedResult,
     formFieldInfosToCalculationOptions,
+    getFieldSampleData,
     parseExpression,
     tokenizeExpression,
     tokensToExpression,
@@ -46,6 +50,20 @@ function getValidPathsSet(groups: DataModelFieldGroup[]): Set<string> {
     return set;
 }
 
+function setSampleValueAtPath(target: DataModelValues, path: string, value: unknown): void {
+    const keys = path.split('.');
+    let cursor: DataModelValues = target;
+    for (let i = 0; i < keys.length - 1; i++) {
+        const key = keys[i];
+        const next = cursor[key];
+        if (next === null || typeof next !== 'object') {
+            cursor[key] = {};
+        }
+        cursor = cursor[key];
+    }
+    cursor[keys[keys.length - 1]] = value;
+}
+
 export interface FormulaModalProps {
     initialFormula: StructuredFormula | undefined;
     initialFormat?: CalculatedFieldFormat;
@@ -197,6 +215,48 @@ export const FormulaModal: FC<FormulaModalProps> = ({
         return errors;
     }, [formulaEditor.draftExpression, validPaths]);
 
+    const optionByPath = useMemo(() => {
+        const map = new Map<string, FieldTypeOption>();
+        for (const opt of allFields) {
+            if (opt.path) {
+                map.set(opt.path, opt);
+            }
+        }
+        for (const opt of fillableFieldsFromDocument) {
+            if (opt.path) {
+                map.set(opt.path, opt);
+            }
+        }
+        for (const opt of formCalculationOptions) {
+            if (opt.path) {
+                map.set(opt.path, opt);
+            }
+        }
+        return map;
+    }, [allFields, fillableFieldsFromDocument, formCalculationOptions]);
+
+    const previewValue = useMemo(() => {
+        if (parsedTokens.length === 0 || !formulaValidation.valid) {
+            return '';
+        }
+        const sampleData: DataModelValues = {};
+        for (const token of parsedTokens) {
+            if (token.type !== 'field') {
+                continue;
+            }
+            const option = optionByPath.get(token.path);
+            const sample = getFieldSampleData(option?.sampleData, token.fieldType);
+            if (sample !== null) {
+                setSampleValueAtPath(sampleData, token.path, sample);
+            }
+        }
+        const computed = evaluateFormula({ tokens: parsedTokens }, sampleData);
+        if (computed === null) {
+            return '';
+        }
+        return formatCalculatedResult(computed, format);
+    }, [parsedTokens, formulaValidation.valid, optionByPath, format]);
+
     const handleClose = useCallback(() => {
         onClose();
     }, [onClose]);
@@ -243,6 +303,7 @@ export const FormulaModal: FC<FormulaModalProps> = ({
                         isInvalid={isInvalid && formulaEditor.isDirty}
                         validationError={validationError}
                         format={format}
+                        previewValue={previewValue}
                         onResultTypeChange={nextType => {
                             if (nextType === 'date') {
                                 setFormat(DEFAULT_DATE_CALCULATED_FORMAT);

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

@@ -30,6 +30,7 @@ interface FormulaWorkspaceProps {
     onRemoveField: (fieldIndex: number) => void;
     onResultTypeChange: (nextType: CalculatedFieldFormat['resultType']) => void;
     onToggleAdvanced: () => void;
+    previewValue: string;
     setFormat: Dispatch<SetStateAction<CalculatedFieldFormat>>;
     validationError: string;
 }
@@ -50,6 +51,7 @@ export const FormulaWorkspace: FC<FormulaWorkspaceProps> = ({
     onRemoveField,
     onResultTypeChange,
     onToggleAdvanced,
+    previewValue,
     setFormat,
     validationError,
 }) => {
@@ -74,6 +76,12 @@ export const FormulaWorkspace: FC<FormulaWorkspaceProps> = ({
 
     return (
         <Flex direction="column" flex={1} gap={2} style={{ padding: '12px' }}>
+            <Flex direction="column" gap={1}>
+                <Text variant="body" size="small">
+                    Preview (uses demo sample data)
+                </Text>
+                <div className="dte-formula-preview">{previewValue ?? ' '}</div>
+            </Flex>
             <Text variant="body" size="small">
                 Click a field on the left to add it. Use +, -,{' '}
                 {disabledOperators?.has('*') ? '' : '*, /, and '}parentheses to build formulas.

package/src/components/field-sidebar/data-model-field-type-list.tsx

@@ -1,6 +1,7 @@
 import { Flex, SearchField, Text } from '@servicetitan/anvil2';
 import { FC, Fragment, useMemo, useState } from 'react';
 import { DataModelFieldGroup, FieldTypeOption } from '../../interface/types';
+import { getFieldSampleData } from '../../utils';
 import { FieldType } from './field-type';
 
 interface DataModelFieldTypeListProps {
@@ -51,9 +52,13 @@ export const DataModelFieldTypeList: FC<DataModelFieldTypeListProps> = ({
                         return (
                             <FieldType
                                 key={key}
-                                label={fieldOption.label}
                                 onDragEnd={onDragEnd}
                                 onDragStart={() => onDragStart(fieldOption)}
+                                label={fieldOption.label}
+                                sampleData={getFieldSampleData(
+                                    fieldOption.sampleData,
+                                    fieldOption.fieldType,
+                                )}
                             />
                         );
                     })}

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

@@ -1,14 +1,15 @@
-import { Icon, Text } from '@servicetitan/anvil2';
+import { Flex, Icon, Text } from '@servicetitan/anvil2';
 import IconDragIndicator from '@servicetitan/anvil2/assets/icons/material/round/drag_indicator.svg';
 import { FC } from 'react';
 
 interface FieldTypeProps {
     label: string;
+    sampleData?: string | number | null;
     onDragEnd(): void;
     onDragStart(): void;
 }
 
-export const FieldType: FC<FieldTypeProps> = ({ label, onDragEnd, onDragStart }) => {
+export const FieldType: FC<FieldTypeProps> = ({ label, onDragEnd, onDragStart, sampleData }) => {
     return (
         <div
             draggable
@@ -22,7 +23,19 @@ export const FieldType: FC<FieldTypeProps> = ({ label, onDragEnd, onDragStart })
             className="dte-field-type-item"
         >
             <Icon svg={IconDragIndicator} size="medium" />
-            <Text size="small">{label}</Text>
+            <Flex direction="column" style={{ overflow: 'hidden' }}>
+                <Text size="small">{label}</Text>
+                {sampleData && (
+                    <Text
+                        size="small"
+                        subdued
+                        style={{ fontSize: '12px', marginTop: '-2px' }}
+                        className="ellipsis"
+                    >
+                        e.g. {sampleData}
+                    </Text>
+                )}
+            </Flex>
         </div>
     );
 };

package/src/components/field-sidebar/form-fields-type-list.tsx

@@ -4,6 +4,7 @@ import IconArrowForward from '@servicetitan/anvil2/assets/icons/material/round/k
 import { Stack } from '@servicetitan/design-system';
 import { FC, Fragment } from 'react';
 import { FieldTypeOption, FormInfo } from '../../interface/types';
+import { getFieldSampleData } from '../../utils';
 import { FieldType } from './field-type';
 
 export interface FormFieldsTypeListProps {
@@ -97,6 +98,10 @@ export const FormFieldsTypeList: FC<FormFieldsTypeListProps> = ({
                                             <FieldType
                                                 key={option.path}
                                                 label={option.label}
+                                                sampleData={getFieldSampleData(
+                                                    option.sampleData,
+                                                    option.fieldType,
+                                                )}
                                                 onDragEnd={onDragEnd}
                                                 onDragStart={() => onDragStart(option)}
                                             />

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

@@ -2,7 +2,12 @@ import { FC, MouseEvent, RefObject } from 'react';
 import { DISABLE_FIELD_RESIZE } from '../../constants';
 import { useFieldDrag, useFieldResize } from '../../hooks';
 import { FieldTypeEnum, PdfField } from '../../interface/types';
-import { getFieldBackgroundColor, getPagePosition } from '../../utils';
+import {
+    getFieldBackgroundColor,
+    getFieldFontSizeInPixels,
+    getPagePosition,
+    supportsFieldFontSize,
+} from '../../utils';
 import { PdfOverlayFieldCalculated } from './pdf-overlay-field-calculated';
 import { PdfOverlayFieldDataModel } from './pdf-overlay-field-data-model';
 import { PdfOverlayFieldESign } from './pdf-overlay-field-e-sign';
@@ -64,6 +69,9 @@ export const PdfOverlayField: FC<PdfOverlayFieldProps> = ({
         width: field.width,
         height: field.height,
         backgroundColor: getFieldBackgroundColor(field.recipient, recipientsColors),
+        ...(supportsFieldFontSize(field)
+            ? { fontSize: `${getFieldFontSizeInPixels(field)}px` }
+            : {}),
     };
 
     return (

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

@@ -1,6 +1,12 @@
 import { FC, PropsWithChildren, RefObject } from 'react';
 import { DataModelValues, PdfField } from '../../interface/types';
-import { evaluateDisplayCondition, getFieldBackgroundColor, getPagePosition } from '../../utils';
+import {
+    evaluateDisplayCondition,
+    getFieldBackgroundColor,
+    getFieldFontSizeInPixels,
+    getPagePosition,
+    supportsFieldFontSize,
+} from '../../utils';
 
 interface PdfViewFieldContainer {
     pdfWrapperRef: RefObject<HTMLDivElement>;
@@ -39,6 +45,9 @@ export const PdfViewFieldContainer: FC<PropsWithChildren<PdfViewFieldContainer>>
                 top: `${pagePos.top + field.y}px`,
                 width: `${field.width}px`,
                 height: `${field.height}px`,
+                ...(supportsFieldFontSize(field)
+                    ? { fontSize: `${getFieldFontSizeInPixels(field)}px` }
+                    : {}),
                 borderColor: error ? 'red' : undefined,
             }}
         >

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

@@ -22,6 +22,7 @@ const fillableTextStyles = {
     width: 'inherit',
     height: 'inherit',
     borderColor: 'inherit',
+    fontSize: 'inherit',
 } as const;
 
 export const FillableTextInput: FC<FillableTextInputProps> = ({
@@ -149,6 +150,7 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
                     width: 'inherit',
                     height: 'inherit',
                     borderColor: 'inherit',
+                    fontSize: 'inherit',
                 }}
                 disabled={!isFillable}
                 id={field.path}
@@ -172,6 +174,7 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
                     width: 'inherit',
                     height: 'inherit',
                     borderColor: 'inherit',
+                    fontSize: 'inherit',
                 }}
                 disabled={!isFillable}
                 id={field.path}

package/src/constants/field.constants.ts

@@ -18,6 +18,12 @@ export const FIELD_CONSTANTS = {
     dropOffsetY: 15,
 } as const;
 
+export const DEFAULT_FIELD_FONT_SIZE = 8;
+
+export const FIELD_FONT_SIZE_OPTIONS = Array.from({ length: 17 }, (_, index) => {
+    return 4 + index;
+});
+
 export const FILLABLE_FIELD_DEFAULT_SIZES = {
     text: { width: 200, height: 25 },
     date: { width: 200, height: 25 },

package/src/hooks/usePdfFieldDnD.ts

@@ -1,6 +1,7 @@
 import { DragEvent, RefObject, useCallback, useRef, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import {
+    DEFAULT_FIELD_FONT_SIZE,
     FIELD_CONSTANTS,
     FILLABLE_FIELD_DEFAULT_SIZES,
     GENERIC_FIELD_DEFAULT_SIZES,
@@ -18,6 +19,7 @@ import {
     generateESignPath,
     generateFillablePath,
     isDragOverCanvas,
+    supportsFieldFontSize,
 } from '../utils';
 
 const DRAG_OVER_THROTTLE_MS = 32; // ~30fps for drop effect updates
@@ -39,7 +41,7 @@ const initializeDroppedFieldByType: Record<FieldTypeEnum, InitializeDroppedField
         return {
             ...base,
             recipient: recipientName,
-            required: base.subType === 'checkbox',
+            required: false,
             path: generateFillablePath(recipientName, uuidv4()),
             ...(defaultSize && {
                 width: defaultSize.width,
@@ -192,6 +194,13 @@ export const usePdfFieldDnD = ({
             width: FIELD_CONSTANTS.defaultWidth,
             height: FIELD_CONSTANTS.defaultHeight,
             path: draggedFieldOption.path,
+            ...(supportsFieldFontSize(draggedFieldOption)
+                ? {
+                      styles: {
+                          fontSize: DEFAULT_FIELD_FONT_SIZE,
+                      },
+                  }
+                : {}),
         };
 
         const newField = initializeDroppedFieldByType[baseField.type](

package/src/interface/types.ts

@@ -77,6 +77,10 @@ export interface DisplayConditionSingle {
     formSnapshot?: FormulaFieldFormSnapshot;
 }
 
+export interface PdfFieldStyles {
+    fontSize?: number;
+}
+
 export interface PdfField {
     id: string;
     type: FieldTypeEnum;
@@ -97,6 +101,7 @@ export interface PdfField {
     formulaFormat?: CalculatedFieldFormat;
     displayCondition?: DisplayConditionState | null;
     multiline?: boolean;
+    styles?: PdfFieldStyles;
 }
 
 export type SchemaFieldType = 'number' | 'date';
@@ -108,6 +113,7 @@ export interface FieldTypeOption {
     path?: string;
     fieldType?: SchemaFieldType;
     formSnapshot?: FormulaFieldFormSnapshot;
+    sampleData?: unknown;
 }
 
 export interface DataModelFieldGroup {

package/src/styles/formula-modal.css

@@ -116,6 +116,16 @@
     white-space: pre-wrap;
 }
 
+.dte-formula-preview {
+    padding: var(--spacing-1) var(--spacing-2);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    height: 20px;
+    background-color: var(--color-neutral-10, #f5f6f7);
+    font-size: var(--typescale-2);
+    line-height: var(--base-line-height);
+}
+
 .dte-formula-editor:focus {
     border-color: var(--border-color-active);
     box-shadow: 0 0 0 1px var(--border-color-active);

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

@@ -111,6 +111,7 @@
     border: none;
     pointer-events: none;
     margin: var(--spacing-0, 0);
+    font-size: inherit;
 }
 
 .dte-pdf-field-generic-table {

package/src/utils/data-model/extract-fields.utils.ts

@@ -91,6 +91,7 @@ export const extractGroupedFieldsFromDataModel = (
                     type: FieldTypeEnum.dataModel,
                     path: key,
                     fieldType: getSchemaFieldType(property),
+                    sampleData: property?.options?.sampleData,
                 });
             }
         }
@@ -132,6 +133,7 @@ const extractFieldsRecursive = (
                 type: FieldTypeEnum.dataModel,
                 path: currentPath,
                 fieldType: getSchemaFieldType(fieldProperty),
+                sampleData: fieldProperty.options?.sampleData,
             });
         } else if (fieldProperty.type === 'object' && fieldProperty.properties) {
             extractFieldsRecursive(

package/src/utils/field/get-field-font-size.utils.ts

@@ -0,0 +1,28 @@
+import { DEFAULT_FIELD_FONT_SIZE } from '../../constants';
+import { FieldTypeEnum, PdfField } from '../../interface/types';
+import { pointsToPixels } from '../pdf';
+
+export const supportsFieldFontSize = (field: Pick<PdfField, 'type' | 'subType'>) => {
+    if (field.type === FieldTypeEnum.eSign) {
+        return false;
+    }
+
+    if (field.type === FieldTypeEnum.generic && field.subType === 'table') {
+        return false;
+    }
+
+    return !(
+        field.type === FieldTypeEnum.fillable &&
+        (field.subType === 'checkbox' || field.subType === 'radio')
+    );
+};
+
+/** Returns the field font size in points, as stored and rendered by the backend. */
+export const getFieldFontSize = (field: PdfField) => {
+    return field.styles?.fontSize ?? DEFAULT_FIELD_FONT_SIZE;
+};
+
+/** Converts the field font size from points to editor pixels for CSS rendering. */
+export const getFieldFontSizeInPixels = (field: PdfField) => {
+    return pointsToPixels(getFieldFontSize(field));
+};

package/src/utils/field/index.ts

@@ -4,3 +4,4 @@ export * from './field-coordinates.utils';
 export * from './field-drag.utils';
 export * from './field-placeholder-text.utils';
 export * from './field-resize.utils';
+export * from './get-field-font-size.utils';