@servicetitan/dte-unlayer 0.153.0 → 0.154.0

package/src/store.ts

@@ -1,5 +1,6 @@
 import { loadScript } from './loadScript';
 import { logUnlayerError } from './log';
+import { toUnlayerMergeTags, type UnlayerMergeTagsConfig } from './merge-tags';
 import { defaultImageValidation } from './shared/configs';
 import type { UnlayerEditorTwin, UnlayerEventConfig, UnlayerEventRegister } from './shared/const';
 import { unlayerSupportedFonts } from './shared/fonts';
@@ -11,14 +12,19 @@ import {
 } from './shared/forms';
 import { schemaBuildMap, schemaIsDate } from './shared/schema';
 import { unlayerToolsParseTwinKey } from './shared/tools';
-import { unlayerToolsIterate } from './tools';
+import { unlayerToolsDedupeInstanceIds, unlayerToolsIterate } from './tools';
 import {
     createUnlayerEditor,
     DesignUpdatedEventType,
     EventDesignUpdated,
     Unlayer,
 } from './unlayer';
-import { CreateUnlayerEditorProps, UnlayerDesignFormat, UnlayerRef } from './unlayer-interface';
+import {
+    CreateUnlayerEditorProps,
+    UnlayerDesignFormat,
+    UnlayerEditorMergeTagInfo,
+    UnlayerRef,
+} from './unlayer-interface';
 
 const defaultScriptUrl = 'https://editor.unlayer.com/embed.js?2';
 const UNLAYER_TOOLS_READY_TIMEOUT_MS = 30000;
@@ -191,6 +197,9 @@ export class UnlayerStore {
     private toolsReadyWatchdogId?: number;
     private formFieldsByFormId: Record<number, FormFieldInfo[]> = {};
     private formFieldSamples: Record<string, unknown> = {};
+    private isEditorReady = false;
+    private isMergeTagsApplied = false;
+    private mergeTagsConfig?: UnlayerMergeTagsConfig;
 
     private onMessageCB?: (type: string, data: any) => void;
     private onChangeCB?: (info: UnlayerDesignChangeInfo) => void;
@@ -236,6 +245,9 @@ export class UnlayerStore {
             sendCalcFieldLabels: labels => {
                 this.sendCalcFieldLabels(labels);
             },
+            setMergeTags: tags => {
+                this.setMergeTags(tags);
+            },
         };
     }
 
@@ -256,6 +268,9 @@ export class UnlayerStore {
             }
 
             this.editor = createUnlayerEditor(container, this.props);
+            // The host may already have pushed a newer set through `setMergeTags`; keep it.
+            this.mergeTagsConfig ??= toUnlayerMergeTags(this.props.mergeTags);
+            this.editor.addEventListener('editor:ready', this.onEditorReady);
             this.editor.addEventListener('design:loaded', this.onDesignLoaded);
             this.editor.addEventListener('design:updated', this.onDesignUpdated);
             this.editor.registerCallback('image', this.uploadImage);
@@ -280,6 +295,7 @@ export class UnlayerStore {
         window.removeEventListener('message', this.onPostMessage);
 
         if (this.editor) {
+            this.editor.removeEventListener('editor:ready', this.onEditorReady);
             this.editor.removeEventListener('design:loaded', this.onDesignLoaded);
             this.editor.removeEventListener('design:updated', this.onDesignUpdated);
             this.editor.unregisterCallback('image', this.uploadImage);
@@ -355,7 +371,46 @@ export class UnlayerStore {
         this.sendMessage('--calc-field-labels', { labels });
     };
 
+    /**
+     * Replaces the editor's merge tag menu. Nested groups passed to `createEditor` stop DTE
+     * custom tools from registering, so init only carries the flat shape and the grouped
+     * config is applied here once the editor is ready. A call before that (including the
+     * initial props) is parked; a later call replaces it. A failed apply is retried on the
+     * next `design:loaded`.
+     */
+    setMergeTags = (tags: UnlayerEditorMergeTagInfo[] | undefined) => {
+        this.mergeTagsConfig = toUnlayerMergeTags(tags);
+        this.isMergeTagsApplied = false;
+        this.applyMergeTags();
+    };
+
+    private applyMergeTags = () => {
+        if (
+            !this.editor ||
+            !this.isEditorReady ||
+            this.isMergeTagsApplied ||
+            !this.mergeTagsConfig
+        ) {
+            return;
+        }
+
+        try {
+            this.editor.setMergeTags(this.mergeTagsConfig);
+            this.isMergeTagsApplied = true;
+        } catch (error: unknown) {
+            logUnlayerError('Failed to apply merge tags', error);
+        }
+    };
+
+    private onEditorReady = () => {
+        this.isEditorReady = true;
+        this.applyMergeTags();
+    };
+
     private onDesignLoaded = () => {
+        // A loaded design means the editor is up even if `editor:ready` never reached us.
+        this.onEditorReady();
+
         if (!this.hasDesign) {
             this.hasDesign = true;
             this.editor?.setBodyValues({
@@ -391,6 +446,11 @@ export class UnlayerStore {
                     }
                 });
 
+                // Duplicated contents/rows carry the original's instance GUIDs; give copies new ones.
+                if (unlayerToolsDedupeInstanceIds(data.design, event.item?.values?._meta?.htmlID)) {
+                    hasChanges = true;
+                }
+
                 if (hasChanges) {
                     this.setDesign(data.design);
                 }

package/src/tools.ts

@@ -1,5 +1,6 @@
 import { constGenericsEditor, UnlayerToolMetaData } from './shared/const';
 import { editIconSvg } from './shared/edit-icon';
+import { generateInstanceId, INSTANCE_ID_TOOL_SLUGS } from './shared/instance-id';
 import { unlayerToolsParseUnitKey } from './shared/tools';
 import { versions } from './unlayer';
 
@@ -202,6 +203,56 @@ export const unlayerToolsListCustom = (design: UnlayerDesignFormat): UnlayerDesi
     return tools;
 };
 
+/**
+ * Makes `values.id` unique across all instance-id tools (see `INSTANCE_ID_TOOL_SLUGS`)
+ * in the design. Duplicating content/rows in Unlayer copies the values verbatim, so
+ * every copy ends up with the original's GUID; this gives each copy a fresh one.
+ *
+ * Of the contents sharing an id, the one that keeps it is the first in document
+ * order that is not the just-added content (`addedHtmlID`), so the original always
+ * wins over its duplicate regardless of where the copy was inserted.
+ *
+ * @returns `true` when at least one id was regenerated.
+ */
+export const unlayerToolsDedupeInstanceIds = (
+    design: UnlayerDesignFormat,
+    addedHtmlID?: string
+): boolean => {
+    const byId = new Map<string, UnlayerDesignCustomTool[]>();
+
+    unlayerToolsIterateCustom(design, tool => {
+        const id = tool.values?.id;
+
+        if (INSTANCE_ID_TOOL_SLUGS.includes(tool.slug) && typeof id === 'string' && id) {
+            const key = `${tool.slug}|${id}`;
+            byId.set(key, [...(byId.get(key) ?? []), tool]);
+        }
+    });
+
+    let hasChanges = false;
+
+    byId.forEach(tools => {
+        if (tools.length < 2) {
+            return;
+        }
+
+        const keeper = tools.find(tool => tool.values?._meta?.htmlID !== addedHtmlID) ?? tools[0];
+
+        for (const tool of tools) {
+            if (tool !== keeper) {
+                /*
+                 * If no id can be generated the copy is left without one, which is still
+                 * better than two instances bound to the same image.
+                 */
+                tool.values.id = generateInstanceId();
+                hasChanges = true;
+            }
+        }
+    });
+
+    return hasChanges;
+};
+
 export const unlayerToolsBuildDesign = (tools: UnlayerDesignTool[]): UnlayerDesignFormat => {
     const design = unlayerGetDefaultDesign();
 

package/src/unlayer-interface.tsx

@@ -45,13 +45,23 @@ export interface UnlayerRef {
     sendFormList(forms: FormInfo[]): void;
     sendFormFields(formId: number, fields: FormFieldInfo[]): void;
     sendCalcFieldLabels(labels: Record<string, string>): void;
+    /**
+     * Replaces the editor's merge tag menu with `tags` (grouped). Safe to call before the editor is
+     * ready — the tags are applied once it is. Lets hosts add tags that finish loading after init
+     * (e.g. form fields) without remounting the editor.
+     */
+    setMergeTags(tags: UnlayerEditorMergeTagInfo[] | undefined): void;
 }
 
 export interface UnlayerEditorMergeTagInfo {
     id: string;
     name: string;
     propertyPath: string;
-    group?: string;
+    /**
+     * Submenu the tag is listed under. A string is a single submenu (`'Custom Fields'`);
+     * an array nests submenus in order (`['Forms', 'Customer Intake']` → Forms ▸ Customer Intake ▸ tag).
+     */
+    group?: string | string[];
 }
 
 export interface UnlayerEditorCustomTool {

package/src/unlayer.tsx

@@ -1,7 +1,7 @@
 import { emitDisplayCondition } from './display-conditions/displayConditionController';
 import { editorCoreScript, editorCoreStyles, editorCoreTools } from './editor-core';
 import { logUnlayerError } from './log';
-import { scheduleUnlayerMergeTags, toUnlayerMergeTags } from './merge-tags';
+import { toUnlayerMergeTags } from './merge-tags';
 import { constGenericsEditor } from './shared/const';
 import { unlayerSupportedFonts } from './shared/fonts';
 import {
@@ -299,6 +299,10 @@ export const createUnlayerEditor = (
                     tables: true,
                 },
             },
+            /*
+             * Flat only: nested groups here break custom tool registration. UnlayerStore applies
+             * the grouped config via setMergeTags once the editor is ready.
+             */
             mergeTags: toUnlayerMergeTags(mergeTags, { groups: false }),
             projectId: 5713,
             version: latest ? undefined : versions.unlayer,
@@ -362,8 +366,6 @@ export const createUnlayerEditor = (
         document.getElementById = currentFind;
     }
 
-    scheduleUnlayerMergeTags(result, mergeTags);
-
     if (displayConditions) {
         result.registerCallback(
             'displayCondition',