@servicetitan/dte-pdf-editor 1.48.0 → 1.50.0

package/dist/utils/data-model/extract-fields.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"extract-fields.utils.js","sourceRoot":"","sources":["../../../src/utils/data-model/extract-fields.utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"extract-fields.utils.js","sourceRoot":"","sources":["../../../src/utils/data-model/extract-fields.utils.ts"],"names":[],"mappings":"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"}

package/dist/utils/shared/index.d.ts

@@ -1,3 +1,5 @@
 export * from './date.utils';
 export * from './number.utils';
+export * from './sample-data.utils';
+export * from './schema.utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/shared/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC"}

package/dist/utils/shared/index.js

@@ -1,3 +1,5 @@
 export * from './date.utils';
 export * from './number.utils';
+export * from './sample-data.utils';
+export * from './schema.utils';
 //# sourceMappingURL=index.js.map

package/dist/utils/shared/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC"}

package/dist/utils/shared/sample-data.utils.d.ts

@@ -0,0 +1,3 @@
+import { PdfFieldSubType } from '../../interface/types';
+export declare const getFieldSampleData: (sampleData: unknown, fieldSubType?: PdfFieldSubType) => string | number | null;
+//# sourceMappingURL=sample-data.utils.d.ts.map

package/dist/utils/shared/sample-data.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sample-data.utils.d.ts","sourceRoot":"","sources":["../../../src/utils/shared/sample-data.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAWxD,eAAO,MAAM,kBAAkB,GAC3B,YAAY,OAAO,EACnB,eAAe,eAAe,KAC/B,MAAM,GAAG,MAAM,GAAG,IAcpB,CAAC"}

package/dist/utils/shared/sample-data.utils.js

@@ -0,0 +1,20 @@
+const DEFAULT_NUMBER_SAMPLE = 350;
+const toPrimitiveSample = (value) => {
+    if (typeof value === 'string' || typeof value === 'number') {
+        return value;
+    }
+    return undefined;
+};
+export const getFieldSampleData = (sampleData, fieldSubType) => {
+    const primitiveSample = toPrimitiveSample(sampleData);
+    if (fieldSubType === 'date') {
+        const candidate = primitiveSample !== undefined ? new Date(primitiveSample) : new Date();
+        const source = Number.isNaN(candidate.getTime()) ? new Date() : candidate;
+        return source.toISOString().slice(0, 10);
+    }
+    if (fieldSubType === 'number') {
+        return primitiveSample !== null && primitiveSample !== void 0 ? primitiveSample : DEFAULT_NUMBER_SAMPLE;
+    }
+    return primitiveSample !== null && primitiveSample !== void 0 ? primitiveSample : null;
+};
+//# sourceMappingURL=sample-data.utils.js.map

package/dist/utils/shared/sample-data.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sample-data.utils.js","sourceRoot":"","sources":["../../../src/utils/shared/sample-data.utils.ts"],"names":[],"mappings":"AAEA,MAAM,qBAAqB,GAAG,GAAG,CAAC;AAElC,MAAM,iBAAiB,GAAG,CAAC,KAAc,EAA+B,EAAE;IACtE,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QACzD,OAAO,KAAK,CAAC;IACjB,CAAC;IACD,OAAO,SAAS,CAAC;AACrB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAC9B,UAAmB,EACnB,YAA8B,EACR,EAAE;IACxB,MAAM,eAAe,GAAG,iBAAiB,CAAC,UAAU,CAAC,CAAC;IAEtD,IAAI,YAAY,KAAK,MAAM,EAAE,CAAC;QAC1B,MAAM,SAAS,GAAG,eAAe,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC;QACzF,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;QAC1E,OAAO,MAAM,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC7C,CAAC;IAED,IAAI,YAAY,KAAK,QAAQ,EAAE,CAAC;QAC5B,OAAO,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,qBAAqB,CAAC;IACpD,CAAC;IAED,OAAO,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,IAAI,CAAC;AACnC,CAAC,CAAC"}

package/dist/utils/shared/schema.utils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * React/HTML equivalent of the Nunjucks `nl2br` filter used by Unlayer's
+ * `{{ field | safe | nl2br }}` template. Replaces every `\r\n` or `\n` with `<br />\n`,
+ * keeping the original newline so the rendered HTML source still wraps in dev tools.
+ */
+export declare const nl2br: (value: string) => string;
+//# sourceMappingURL=schema.utils.d.ts.map

package/dist/utils/shared/schema.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.utils.d.ts","sourceRoot":"","sources":["../../../src/utils/shared/schema.utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,KAAK,GAAI,OAAO,MAAM,KAAG,MAErC,CAAC"}

package/dist/utils/shared/schema.utils.js

@@ -0,0 +1,9 @@
+/**
+ * React/HTML equivalent of the Nunjucks `nl2br` filter used by Unlayer's
+ * `{{ field | safe | nl2br }}` template. Replaces every `\r\n` or `\n` with `<br />\n`,
+ * keeping the original newline so the rendered HTML source still wraps in dev tools.
+ */
+export const nl2br = (value) => {
+    return value.replace(/\r\n|\n/g, '<br />\n');
+};
+//# sourceMappingURL=schema.utils.js.map

package/dist/utils/shared/schema.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.utils.js","sourceRoot":"","sources":["../../../src/utils/shared/schema.utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAa,EAAU,EAAE;IAC3C,OAAO,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;AACjD,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicetitan/dte-pdf-editor",
-  "version": "1.48.0",
+  "version": "1.50.0",
   "description": "",
   "main": "./dist/index.js",
   "typings": "./dist/index.d.ts",

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-view/pdf-view-data-model.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { DataModelValues, PdfField } from '../../interface/types';
-import { resolvePdfDataValues } from '../../utils';
+import { nl2br, resolvePdfDataValues } from '../../utils';
 
 interface PdfViewDataModelProps {
     field: PdfField;
@@ -9,5 +9,16 @@ interface PdfViewDataModelProps {
 
 export const PdfViewDataModel: FC<PdfViewDataModelProps> = ({ data, field }) => {
     const resolvedValue = field.path ? resolvePdfDataValues(data, field.path) : '';
-    return <div className="dte-pdf-field-value">{resolvedValue ?? ''}</div>;
+
+    /*
+     * Mirrors Unlayer's `{{ field | safe | nl2br }}` as
+     * conversion. The `__html` key and `dangerouslySetInnerHTML` are mandated by React's API.
+     */
+    return (
+        <div
+            className="dte-pdf-field-value"
+            // eslint-disable-next-line react/no-danger, @typescript-eslint/naming-convention
+            dangerouslySetInnerHTML={{ __html: nl2br(resolvedValue ?? '') }}
+        />
+    );
 };

package/src/interface/types.ts

@@ -108,6 +108,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/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/shared/index.ts

@@ -1,2 +1,4 @@
 export * from './date.utils';
 export * from './number.utils';
+export * from './sample-data.utils';
+export * from './schema.utils';

package/src/utils/shared/sample-data.utils.ts

@@ -0,0 +1,29 @@
+import { PdfFieldSubType } from '../../interface/types';
+
+const DEFAULT_NUMBER_SAMPLE = 350;
+
+const toPrimitiveSample = (value: unknown): string | number | undefined => {
+    if (typeof value === 'string' || typeof value === 'number') {
+        return value;
+    }
+    return undefined;
+};
+
+export const getFieldSampleData = (
+    sampleData: unknown,
+    fieldSubType?: PdfFieldSubType,
+): string | number | null => {
+    const primitiveSample = toPrimitiveSample(sampleData);
+
+    if (fieldSubType === 'date') {
+        const candidate = primitiveSample !== undefined ? new Date(primitiveSample) : new Date();
+        const source = Number.isNaN(candidate.getTime()) ? new Date() : candidate;
+        return source.toISOString().slice(0, 10);
+    }
+
+    if (fieldSubType === 'number') {
+        return primitiveSample ?? DEFAULT_NUMBER_SAMPLE;
+    }
+
+    return primitiveSample ?? null;
+};

package/src/utils/shared/schema.utils.ts

@@ -0,0 +1,8 @@
+/**
+ * React/HTML equivalent of the Nunjucks `nl2br` filter used by Unlayer's
+ * `{{ field | safe | nl2br }}` template. Replaces every `\r\n` or `\n` with `<br />\n`,
+ * keeping the original newline so the rendered HTML source still wraps in dev tools.
+ */
+export const nl2br = (value: string): string => {
+    return value.replace(/\r\n|\n/g, '<br />\n');
+};