@servicetitan/dte-unlayer 0.150.0 → 0.152.0

package/src/index.ts

@@ -3,6 +3,7 @@ export * from './tools';
 export * from './api-core';
 export * from './api-custom-tools';
 export * from './unlayer-interface';
+export * from './merge-tags';
 export * from './loadScript';
 export * from './shared/const';
 export * from './shared/forms';

package/src/merge-tags.ts

@@ -0,0 +1,65 @@
+import { UnlayerEditorMergeTagInfo } from './unlayer-interface';
+
+export interface UnlayerMergeTagLeaf {
+    name: string;
+    value: string;
+}
+
+export interface UnlayerMergeTagGroup {
+    name: string;
+    mergeTags: Record<string, UnlayerMergeTagLeaf>;
+}
+
+export type UnlayerMergeTagsConfig = Record<string, UnlayerMergeTagLeaf | UnlayerMergeTagGroup>;
+
+export function isUnlayerMergeTagGroup(
+    entry: UnlayerMergeTagLeaf | UnlayerMergeTagGroup,
+): entry is UnlayerMergeTagGroup {
+    return 'mergeTags' in entry;
+}
+
+const toMergeTagGroupKey = (groupName: string) => {
+    const key = groupName
+        .toLowerCase()
+        .split(/[^a-z0-9]+/)
+        .filter(Boolean)
+        .join('_');
+
+    return key || groupName;
+};
+
+export const toUnlayerMergeTags = (tags: UnlayerEditorMergeTagInfo[] | undefined) => {
+    if (!tags?.length) {
+        return undefined;
+    }
+
+    return tags.reduce<UnlayerMergeTagsConfig>((out, tag) => {
+        const mergeTag: UnlayerMergeTagLeaf = {
+            name: tag.name,
+            value: tag.propertyPath,
+        };
+        const groupName = tag.group?.trim();
+
+        if (!groupName) {
+            out[tag.id] = mergeTag;
+            return out;
+        }
+
+        const groupKey = toMergeTagGroupKey(groupName);
+        const existing = out[groupKey];
+
+        if (existing && isUnlayerMergeTagGroup(existing)) {
+            existing.mergeTags[tag.id] = mergeTag;
+            return out;
+        }
+
+        out[groupKey] = {
+            name: groupName,
+            mergeTags: {
+                [tag.id]: mergeTag,
+            },
+        };
+
+        return out;
+    }, {});
+};

package/src/unlayer-interface.tsx

@@ -51,6 +51,7 @@ export interface UnlayerEditorMergeTagInfo {
     id: string;
     name: string;
     propertyPath: string;
+    group?: string;
 }
 
 export interface UnlayerEditorCustomTool {
@@ -83,7 +84,11 @@ export interface CreateUnlayerEditorProps {
     hideContentControls?: boolean;
     hideBodyMenuItem?: boolean;
     displayConditions?: boolean;
-    /** Override portal target for the display-conditions dialog (defaults: shadow root when embedded, else `document.body`). */
+    /**
+     * Optional portal target for the display-conditions dialog. Prefer unset so the dialog
+     * stays under the host `AnvilProvider` (`.anvil2` CSS scope). When set, content is wrapped
+     * in `ThemeProvider` so Anvil2 styles still apply after portaling.
+     */
     displayConditionModalPortalContainer?: Element | DocumentFragment | null;
     enableHTMLEditing?: boolean;
     enableHTMLEditingReadonly?: boolean;

package/src/unlayer.tsx

@@ -1,5 +1,6 @@
 import { emitDisplayCondition } from './display-conditions/displayConditionController';
 import { editorCoreScript, editorCoreStyles, editorCoreTools } from './editor-core';
+import { toUnlayerMergeTags } from './merge-tags';
 import { constGenericsEditor } from './shared/const';
 import { unlayerSupportedFonts } from './shared/fonts';
 import {
@@ -286,14 +287,7 @@ export const createUnlayerEditor = (
                 tables: true,
             },
         },
-        mergeTags: mergeTags?.reduce(
-            (out, tag) => {
-                out[tag.id] = { name: tag.name, value: tag.propertyPath };
-
-                return out;
-            },
-            {} as Record<string, { name: string; value: string }>,
-        ),
+        mergeTags: toUnlayerMergeTags(mergeTags),
         projectId: 5713,
         version: latest ? undefined : versions.unlayer,
         appearance: {