@servicetitan/dte-unlayer 0.131.0 → 0.132.0

package/src/shared/forms.ts

@@ -7,6 +7,7 @@ export interface FormFieldInfo {
     id: string;
     header: string;
     itemType: string;
+    sampleData?: unknown;
 }
 
 export const enum FormItemType {
@@ -93,3 +94,27 @@ export const getConditionalFieldTypeFromFormItemType = (
     }
     return 'string';
 };
+
+const DEFAULT_FORM_NUMBER_SAMPLE = 44;
+const DEFAULT_FORM_DATE_SAMPLE = '2026-01-15';
+
+export const getFormFieldSampleValue = (
+    field: Pick<FormFieldInfo, 'itemType' | 'sampleData'> & { header?: string },
+    index = 0,
+): number | string => {
+    if (typeof field.sampleData === 'number' || typeof field.sampleData === 'string') {
+        return field.sampleData;
+    }
+
+    if (field.itemType === FormItemType.Number) {
+        return DEFAULT_FORM_NUMBER_SAMPLE + index;
+    }
+
+    if (field.itemType === FormItemType.Date) {
+        const [year, month, day] = DEFAULT_FORM_DATE_SAMPLE.split('-');
+        const dayNumber = Number(day) + (index % 10);
+        return `${year}-${month}-${String(dayNumber).padStart(2, '0')}`;
+    }
+
+    return field.header ? `${field.header} value` : 'sample';
+};

package/src/store.ts

@@ -2,7 +2,13 @@ import { loadScript } from './loadScript';
 import { defaultImageValidation } from './shared/configs';
 import { UnlayerEditorTwin, UnlayerEventConfig, UnlayerEventRegister } from './shared/const';
 import { unlayerSupportedFonts } from './shared/fonts';
-import { FormFieldInfo, FormInfo } from './shared/forms';
+import {
+    FormFieldInfo,
+    FormInfo,
+    getFormFieldSampleValue,
+    parseFormFieldKey,
+} from './shared/forms';
+import { schemaBuildMap, schemaIsDate } from './shared/schema';
 import { unlayerToolsParseTwinKey } from './shared/tools';
 import { unlayerToolsIterate } from './tools';
 import {
@@ -16,11 +22,7 @@ import { CreateUnlayerEditorProps, UnlayerDesignFormat, UnlayerRef } from './unl
 const defaultScriptUrl = 'https://editor.unlayer.com/embed.js?2';
 
 const normalizeFontToken = (font: string) =>
-    font
-        .replace(/["']/g, '')
-        .split(',')[0]
-        .trim()
-        .toLowerCase();
+    font.replace(/["']/g, '').split(',')[0].trim().toLowerCase();
 
 const getDesignFontTokens = (value: any, out: Set<string>) => {
     if (!value || typeof value !== 'object') {
@@ -77,7 +79,7 @@ const ensureChunksFonts = (data: any) => {
         const labelToken = normalizeFontToken(font.label);
         const valueToken = normalizeFontToken(font.value);
         const isUsedInDesign = usedFontTokens.has(labelToken) || usedFontTokens.has(valueToken);
-        const isUsedInHtml = !!html && (html.includes(labelToken) || html.includes(valueToken));
+        const isUsedInHtml = [labelToken, valueToken].some(token => html.includes(token));
 
         if ((isUsedInDesign || isUsedInHtml) && !existingLabels.has(font.label)) {
             existingFonts.push(font);
@@ -89,6 +91,69 @@ const ensureChunksFonts = (data: any) => {
     return data;
 };
 
+const FORM_FIELD_DATA_POINT_PREFIX = 'FORM_FIELD_';
+
+const getByPath = (data: unknown, path: string): unknown => {
+    if (!data || typeof data !== 'object') {
+        return undefined;
+    }
+
+    return path.split('.').reduce<unknown>((current, part) => {
+        if (!current || typeof current !== 'object') {
+            return undefined;
+        }
+
+        return (current as Record<string, unknown>)[part];
+    }, data);
+};
+
+const isPlainObject = (value: unknown): value is Record<string, unknown> =>
+    !!value && typeof value === 'object' && !Array.isArray(value);
+
+const deepMerge = (...sources: unknown[]): Record<string, unknown> => {
+    const out: Record<string, unknown> = {};
+
+    for (const source of sources) {
+        if (!isPlainObject(source)) {
+            continue;
+        }
+
+        for (const [key, value] of Object.entries(source)) {
+            if (isPlainObject(value) && isPlainObject(out[key])) {
+                out[key] = deepMerge(out[key], value);
+            } else {
+                out[key] = value;
+            }
+        }
+    }
+
+    return out;
+};
+
+const setByPath = (target: Record<string, unknown>, path: string, value: unknown) => {
+    const parts = path.split('.');
+    if (!parts.length) {
+        return;
+    }
+
+    let node: Record<string, unknown> = target;
+
+    for (let i = 0; i < parts.length - 1; i += 1) {
+        const key = parts[i];
+        if (!isPlainObject(node[key])) {
+            node[key] = {};
+        }
+        node = node[key] as Record<string, unknown>;
+    }
+
+    node[parts[parts.length - 1]] = value;
+};
+
+const tokenizeFormulaFields = (expression: string): string[] => {
+    const regex = /[A-Za-z_][A-Za-z0-9_.]*/g;
+    return expression.match(regex) ?? [];
+};
+
 export interface UnlayerDesignChangeInfo {
     isToolsListChanged: boolean;
 }
@@ -112,11 +177,15 @@ const eventsNotAddingTools: DesignUpdatedEventType[] = [
 
 export class UnlayerStore {
     readonly unlayerRef: UnlayerRef;
+    private readonly schemaDummyData: Record<string, unknown>;
+    private readonly dateSchemaFieldKeys: Set<string>;
 
     private editor: Unlayer | undefined;
     private isInit = false;
     private iframe?: HTMLIFrameElement;
     private hasDesign = false;
+    private formFieldsByFormId: Record<number, FormFieldInfo[]> = {};
+    private formFieldSamples: Record<string, unknown> = {};
 
     private onMessageCB?: (type: string, data: any) => void;
     private onChangeCB?: (info: UnlayerDesignChangeInfo) => void;
@@ -129,6 +198,14 @@ export class UnlayerStore {
     private onCalcFieldSelectCB?: (fieldKeys: string[]) => void;
 
     constructor(readonly props: CreateUnlayerEditorProps) {
+        const schemaData = this.props.schema ? schemaBuildMap(this.props.schema) : undefined;
+        this.schemaDummyData = (schemaData?.dummyData ?? {}) as Record<string, unknown>;
+        this.dateSchemaFieldKeys = new Set(
+            Object.values(schemaData?.map ?? {})
+                .filter(field => field.isValue && schemaIsDate(field.node))
+                .map(field => field.fullKey),
+        );
+
         this.props.eSignFieldTypes = ['Signature', 'Initials', 'Date Signed', 'Full Name'];
 
         this.unlayerRef = {
@@ -140,7 +217,9 @@ export class UnlayerStore {
             },
             exportHtml: cb => {
                 this.editor?.exportHtml(data => {
-                    cb(ensureChunksFonts(data));
+                    const result = ensureChunksFonts(data);
+                    result.demoData = this.buildCalculatedFieldDemoData(result.design);
+                    cb(result);
                 });
             },
             sendFormList: forms => {
@@ -244,6 +323,8 @@ export class UnlayerStore {
     };
 
     sendFormFields = (formId: number, fields: FormFieldInfo[]) => {
+        this.formFieldsByFormId[formId] = fields;
+        this.updateFormFieldSamples(formId, fields);
         this.sendMessage('--form-fields', { formId, fields });
     };
 
@@ -371,6 +452,109 @@ export class UnlayerStore {
         this.onMessageCB?.(type, data);
     };
 
+    private updateFormFieldSamples = (formId: number, fields: FormFieldInfo[]) => {
+        fields.forEach((field, index) => {
+            const normalizedFieldId = String(field.id ?? '').replaceAll('-', '');
+            if (!normalizedFieldId) {
+                return;
+            }
+
+            const sampleValue = getFormFieldSampleValue(field, index);
+            setByPath(
+                this.formFieldSamples,
+                `__submission_fields.${formId}.${normalizedFieldId}`,
+                sampleValue,
+            );
+            this.formFieldSamples[`${FORM_FIELD_DATA_POINT_PREFIX}${normalizedFieldId}`] =
+                sampleValue;
+        });
+    };
+
+    private collectCalculatedFieldKeys = (design?: UnlayerDesignFormat): Set<string> => {
+        const keys = new Set<string>();
+
+        if (!design) {
+            return keys;
+        }
+
+        unlayerToolsIterate(design, tool => {
+            const calc = tool.values?.calculation;
+            if (!calc || typeof calc !== 'object') {
+                return;
+            }
+
+            if (typeof calc.expression === 'string') {
+                for (const key of tokenizeFormulaFields(calc.expression)) {
+                    keys.add(key);
+                }
+            }
+
+            if (calc.fieldLabels && typeof calc.fieldLabels === 'object') {
+                Object.keys(calc.fieldLabels).forEach(key => keys.add(key));
+            }
+        });
+
+        return keys;
+    };
+
+    private resolveDemoValue = (
+        key: string,
+        fallbackIndex: number,
+        sourceData: Record<string, unknown>,
+    ): unknown => {
+        const parsedFormField = parseFormFieldKey(key);
+        if (parsedFormField) {
+            const normalizedFieldId = parsedFormField.fieldId;
+            const formFields = this.formFieldsByFormId[parsedFormField.formId] ?? [];
+            const fieldIndex = formFields.findIndex(
+                field => String(field.id ?? '').replaceAll('-', '') === normalizedFieldId,
+            );
+            const field = fieldIndex >= 0 ? formFields[fieldIndex] : undefined;
+            const sample = field
+                ? getFormFieldSampleValue(field, fieldIndex)
+                : getByPath(
+                      this.formFieldSamples,
+                      `__submission_fields.${parsedFormField.formId}.${normalizedFieldId}`,
+                  );
+
+            if (sample !== undefined) {
+                return sample;
+            }
+
+            return this.dateSchemaFieldKeys.has(key) ? '2026-01-15' : 44 + fallbackIndex;
+        }
+
+        const existing = getByPath(sourceData, key);
+        if (existing !== undefined) {
+            return existing;
+        }
+
+        if (this.dateSchemaFieldKeys.has(key)) {
+            return '2026-01-15';
+        }
+
+        return 44 + fallbackIndex;
+    };
+
+    private buildCalculatedFieldDemoData = (
+        design?: UnlayerDesignFormat,
+    ): Record<string, unknown> => {
+        const demoData: Record<string, unknown> = {};
+        const usedKeys = Array.from(this.collectCalculatedFieldKeys(design));
+        const sourceData = deepMerge(
+            this.schemaDummyData,
+            this.props.dummyData,
+            this.formFieldSamples,
+        );
+
+        usedKeys.forEach((key, index) => {
+            const value = this.resolveDemoValue(key, index, sourceData);
+            setByPath(demoData, key, value);
+        });
+
+        return demoData;
+    };
+
     private sendMessage = (type: string, data?: any) => {
         this.iframe?.contentWindow?.postMessage(
             {

package/src/unlayer-interface.tsx

@@ -35,6 +35,7 @@ export interface UnlayerExport {
     html: string;
     chunks: any;
     design: UnlayerDesignFormat;
+    demoData?: Record<string, unknown>;
 }
 
 export interface UnlayerRef {

package/src/unlayer.tsx

@@ -13,6 +13,7 @@ export interface UnlayerExport {
     html: string;
     chunks: any;
     design: any;
+    demoData?: Record<string, unknown>;
 }
 
 export interface Unlayer {