@servicetitan/dte-unlayer 0.153.0 → 0.154.0

package/dist/unlayer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/unlayer.tsx"],"sourcesContent":["import { emitDisplayCondition } from './display-conditions/displayConditionController';\nimport { editorCoreScript, editorCoreStyles, editorCoreTools } from './editor-core';\nimport { logUnlayerError } from './log';\nimport { scheduleUnlayerMergeTags, toUnlayerMergeTags } from './merge-tags';\nimport { constGenericsEditor } from './shared/const';\nimport { unlayerSupportedFonts } from './shared/fonts';\nimport {\n    unlayerCustomEmptyToolState,\n    unlayerCustomToolMetaData,\n    unlayerCustomToolsGetRegisterUrls,\n} from './tools';\nimport { CreateUnlayerEditorProps } from './unlayer-interface';\n\nexport interface UnlayerExport {\n    html: string;\n    chunks: any;\n    design: any;\n    demoData?: Record<string, unknown>;\n}\n\nexport interface Unlayer {\n    addEventListener(event: string, cb: (arg: any) => void): void;\n    removeEventListener(event: string, cb: (arg: any) => void): void;\n    registerCallback(type: string, cb: (...args: any[]) => void): void;\n    unregisterCallback(type: string, cb: (...args: any[]) => void): void;\n    registerProvider(type: string, cb: (...args: any[]) => void): void;\n    unregisterProvider(type: string, cb: (...args: any[]) => void): void;\n    loadDesign(design: any): void;\n    saveDesign(callback: (design: any) => void): void;\n    exportHtml(callback: (data: UnlayerExport) => void): void;\n    setMergeTags(tags: any): void;\n    createViewer(opts: { render: (values: any) => string }): any;\n    registerTool(tool: any): void;\n    setBodyValues(values: any): void;\n}\n\nexport enum DesignUpdatedEventType {\n    ContentAdded = 'content:added',\n    ContentMoved = 'content:moved',\n    ContentRemoved = 'content:removed',\n    ContentModified = 'content:modified',\n    RowAdded = 'row:added',\n    RowMoved = 'row:moved',\n    RowRemoved = 'row:removed',\n    RowModified = 'row:modified',\n    ColumnAdded = 'column:added',\n    ColumnRemoved = 'column:removed',\n    ColumnModified = 'column:modified',\n    BodyModified = 'body:modified',\n}\n\nexport interface EventDesignUpdated {\n    type: DesignUpdatedEventType;\n    item: {\n        type: string;\n        slug?: string;\n        values: any;\n    };\n}\n\n/**\n * !!! IMPORTANT !!!\n * do not forget to update schema version when updating unlayer version\n * it is important for templates export and should be in sync\n * to know correct schema version, open unlayer editor and check output design ('schema' property)\n */\nexport const versions = {\n    unlayer: '1.421.0',\n    schema: 24,\n};\n\nexport const handlePreselectTool = (preselectToolSlug: string) => {\n    return `\n        const element = document.querySelector('.u_content_custom_${preselectToolSlug}');\n        if (element) {\n            element.click();\n        }\n    `;\n};\n\nexport const hideUnlayerContentsControls = () => {\n    return `\n        .blockbuilder-layer-controls-contents, .blockbuilder-layer-controls-rows {\n            display: none !important;\n        }\n\n        .blockbuilder-options-header .text-right .icon-delete, .blockbuilder-options-header .text-right .icon-duplicate {\n            display: none !important;\n        }\n    `;\n};\n\nexport const hideUnlayerBodyMenuItem = () => {\n    return `\n        .nav-item.tab-body {\n            display: none !important;\n        }\n    `;\n};\n\nconst injectEditorCoreStyles = () => {\n    const cssText = editorCoreStyles?.trim();\n\n    if (!cssText) {\n        return '';\n    }\n\n    return `\n        (function () {\n            var css = ${JSON.stringify(cssText)};\n            var id = 'dte-unlayer-core-styles';\n            if (document.getElementById(id)) {\n                return;\n            }\n            var style = document.createElement('style');\n            style.id = id;\n            style.type = 'text/css';\n            style.appendChild(document.createTextNode(css));\n            document.head.appendChild(style);\n        })();\n    `;\n};\n\nexport const hideMobileTabletPreview = () => `\n    [data-key=\"preview-tablet\"],\n    [data-key=\"resolution\"],\n    [data-key=\"dark-mode\"],\n    [data-key=\"preview-desktop\"],\n    [data-key=\"preview-mobile\"] {\n        display: none !important;\n    }\n`;\nexport const hideUnlayerTools = () => {\n    return `\n        .blockbuilder-content-tools {\n            display: none !important;\n        }\n           \n        .unlayer-custom-empty-tool-state {\n            display: flex;\n            margin-top: 150px;\n            flex-direction: column;\n            justify-content: center;\n        }\n        \n        .unlayer-custom-empty-tool-state-icon {\n            text-align: center;\n            margin-bottom: 12px;\n        }\n        \n        .unlayer-custom-empty-tool-state-icon svg{\n            color: #606162;\n        }\n        \n        .unlayer-custom-empty-tool-state-text {\n            text-align: center;\n            font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;\n            font-size: 16px;\n            font-style: normal;\n            font-weight: 500;\n            line-height: normal;\n            color: #606162;\n            line-height: 13px;\n        }\n    `;\n};\n\nexport const createUnlayerEditor = (\n    container: HTMLDivElement,\n    {\n        customCSS,\n        customJS,\n        displayConditions,\n        eSignFieldTypes,\n        eSignRecipients,\n        enableHTMLEditing,\n        enableHTMLEditingReadonly,\n        hideAllTools,\n        hideBodyMenuItem,\n        hideContentControls,\n        latest,\n        mergeTags,\n        noCoreTools,\n        tools,\n        units,\n    }: CreateUnlayerEditorProps,\n): Unlayer => {\n    const customScripts = [\n        editorCoreScript,\n        editorCoreTools,\n        injectEditorCoreStyles(),\n        'window.dteStore.sendData(\"--core-loaded\")',\n        ...unlayerCustomToolsGetRegisterUrls(tools),\n        unlayerCustomToolMetaData(tools),\n        ...(customJS ? (Array.isArray(customJS) ? customJS : [customJS]) : []),\n        hideAllTools ? unlayerCustomEmptyToolState() : '',\n        'window.dteStore.sendData(\"--data-loaded\")',\n    ].filter(js => !!js?.trim());\n    const customStyles = [\n        editorCoreStyles,\n        ...(customCSS ? (Array.isArray(customCSS) ? customCSS : [customCSS]) : []),\n        /*\n         * @TODO this is workaround for hiding all tools from unlayer sidebar.\n         * Will be better to use unlayer functionality for this but it is not implemented yet\n         */\n        hideMobileTabletPreview(),\n        hideAllTools ? hideUnlayerTools() : '',\n        hideContentControls ? hideUnlayerContentsControls() : '',\n        hideBodyMenuItem ? hideUnlayerBodyMenuItem() : '',\n    ].filter(css => !!css?.trim());\n\n    /**\n     * Unlayer supports only passing id of container, but when we use shadowDOM (MFE),\n     * getElementById can't find element in it\n     * so making this dirty hack to let unlayer find container in DOM\n     */\n    const id = container.id;\n    const currentFind = document.getElementById;\n    document.getElementById = function (elementId: string) {\n        if (id === elementId) {\n            return container;\n        }\n\n        return currentFind.call(document, id);\n    };\n\n    const acv = constGenericsEditor.adminConfigProperty;\n\n    const eSignTypeMapping = (eSignFieldTypes ?? []).map(key => ({\n        label: key,\n        value: key.charAt(0).toLowerCase() + key.replace(/ /g, '').slice(1),\n    }));\n\n    const unitsConfig = (units ?? []).reduce(\n        (out, unit) => {\n            out[`custom#${unit.generic}:unit:${unit.id}`] = {\n                data: {\n                    [acv]: unit.values[acv],\n                },\n                properties: {\n                    [constGenericsEditor.userConfigProperty]: {\n                        editor: {\n                            data: { [acv]: unit.values[acv] },\n                        },\n                    },\n                    [constGenericsEditor.infoDataProperty]: {\n                        editor: {\n                            data: { title: unit.title },\n                        },\n                    },\n                },\n            };\n            return out;\n        },\n        {} as Record<string, any>,\n    );\n\n    const eSignComponentRecipients = {\n        properties: {\n            eSignRecipient: {\n                editor: {\n                    data: {\n                        options: eSignRecipients?.map(item => ({\n                            label: item.displayName,\n                            value: item.name,\n                        })),\n                    },\n                },\n            },\n            eSignFieldType: {\n                editor: {\n                    data: {\n                        options: eSignTypeMapping,\n                    },\n                },\n            },\n        },\n    };\n\n    let result: Unlayer;\n\n    try {\n        const unlayerApi = (window as any).unlayer;\n\n        if (!unlayerApi?.createEditor) {\n            throw new Error(\n                'Unlayer embed is not available. window.unlayer.createEditor is missing.',\n            );\n        }\n\n        result = unlayerApi.createEditor({\n            displayMode: 'web',\n            devices: ['desktop'],\n            features: {\n                preview: true,\n                userUploads: false,\n                stockImages: false,\n                textEditor: {\n                    tables: true,\n                },\n            },\n            mergeTags: toUnlayerMergeTags(mergeTags, { groups: false }),\n            projectId: 5713,\n            version: latest ? undefined : versions.unlayer,\n            appearance: {\n                theme: 'classic_light',\n            },\n            tools: {\n                'carousel': { enabled: false },\n                'button': { enabled: false },\n                'html': {\n                    enabled: enableHTMLEditing,\n                    properties: {\n                        html: {\n                            editor: {\n                                widgetParams: {\n                                    codeMirrorOptions: {\n                                        readOnly: enableHTMLEditingReadonly,\n                                    },\n                                },\n                            },\n                        },\n                    },\n                },\n                'table': {\n                    enabled: true,\n                },\n                'menu': { enabled: false },\n                'form': { enabled: false },\n                ...(noCoreTools\n                    ? {\n                          columns: { enabled: false },\n                          text: { enabled: false },\n                          heading: { enabled: false },\n                          divider: { enabled: false },\n                          image: { enabled: false },\n                      }\n                    : {}),\n                ...unitsConfig,\n                'custom#e-sign': eSignComponentRecipients,\n            },\n            editor: {\n                autoSelectOnDrop: true,\n            },\n            customJS: customScripts,\n            customCSS: customStyles,\n            id,\n            fonts: {\n                showDefaultFonts: false,\n                customFonts: unlayerSupportedFonts,\n            },\n            tabs: {\n                content: {},\n                body: {},\n                blocks: { enabled: false },\n            },\n        });\n    } catch (error: unknown) {\n        logUnlayerError('unlayer.createEditor failed', error);\n        throw error;\n    } finally {\n        document.getElementById = currentFind;\n    }\n\n    scheduleUnlayerMergeTags(result, mergeTags);\n\n    if (displayConditions) {\n        result.registerCallback(\n            'displayCondition',\n            function (data: any, done: (condition: any) => void) {\n                emitDisplayCondition({ data, done });\n            },\n        );\n    }\n\n    return result;\n};\n"],"names":["emitDisplayCondition","editorCoreScript","editorCoreStyles","editorCoreTools","logUnlayerError","scheduleUnlayerMergeTags","toUnlayerMergeTags","constGenericsEditor","unlayerSupportedFonts","unlayerCustomEmptyToolState","unlayerCustomToolMetaData","unlayerCustomToolsGetRegisterUrls","DesignUpdatedEventType","versions","unlayer","schema","handlePreselectTool","preselectToolSlug","hideUnlayerContentsControls","hideUnlayerBodyMenuItem","injectEditorCoreStyles","cssText","trim","JSON","stringify","hideMobileTabletPreview","hideUnlayerTools","createUnlayerEditor","container","customCSS","customJS","displayConditions","eSignFieldTypes","eSignRecipients","enableHTMLEditing","enableHTMLEditingReadonly","hideAllTools","hideBodyMenuItem","hideContentControls","latest","mergeTags","noCoreTools","tools","units","customScripts","Array","isArray","filter","js","customStyles","css","id","currentFind","document","getElementById","elementId","call","acv","adminConfigProperty","eSignTypeMapping","map","key","label","value","charAt","toLowerCase","replace","slice","unitsConfig","reduce","out","unit","generic","data","values","properties","userConfigProperty","editor","infoDataProperty","title","eSignComponentRecipients","eSignRecipient","options","item","displayName","name","eSignFieldType","result","unlayerApi","window","createEditor","Error","displayMode","devices","features","preview","userUploads","stockImages","textEditor","tables","groups","projectId","version","undefined","appearance","theme","enabled","html","widgetParams","codeMirrorOptions","readOnly","columns","text","heading","divider","image","autoSelectOnDrop","fonts","showDefaultFonts","customFonts","tabs","content","body","blocks","error","registerCallback","done"],"mappings":"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"}
+{"version":3,"sources":["../src/unlayer.tsx"],"sourcesContent":["import { emitDisplayCondition } from './display-conditions/displayConditionController';\nimport { editorCoreScript, editorCoreStyles, editorCoreTools } from './editor-core';\nimport { logUnlayerError } from './log';\nimport { toUnlayerMergeTags } from './merge-tags';\nimport { constGenericsEditor } from './shared/const';\nimport { unlayerSupportedFonts } from './shared/fonts';\nimport {\n    unlayerCustomEmptyToolState,\n    unlayerCustomToolMetaData,\n    unlayerCustomToolsGetRegisterUrls,\n} from './tools';\nimport { CreateUnlayerEditorProps } from './unlayer-interface';\n\nexport interface UnlayerExport {\n    html: string;\n    chunks: any;\n    design: any;\n    demoData?: Record<string, unknown>;\n}\n\nexport interface Unlayer {\n    addEventListener(event: string, cb: (arg: any) => void): void;\n    removeEventListener(event: string, cb: (arg: any) => void): void;\n    registerCallback(type: string, cb: (...args: any[]) => void): void;\n    unregisterCallback(type: string, cb: (...args: any[]) => void): void;\n    registerProvider(type: string, cb: (...args: any[]) => void): void;\n    unregisterProvider(type: string, cb: (...args: any[]) => void): void;\n    loadDesign(design: any): void;\n    saveDesign(callback: (design: any) => void): void;\n    exportHtml(callback: (data: UnlayerExport) => void): void;\n    setMergeTags(tags: any): void;\n    createViewer(opts: { render: (values: any) => string }): any;\n    registerTool(tool: any): void;\n    setBodyValues(values: any): void;\n}\n\nexport enum DesignUpdatedEventType {\n    ContentAdded = 'content:added',\n    ContentMoved = 'content:moved',\n    ContentRemoved = 'content:removed',\n    ContentModified = 'content:modified',\n    RowAdded = 'row:added',\n    RowMoved = 'row:moved',\n    RowRemoved = 'row:removed',\n    RowModified = 'row:modified',\n    ColumnAdded = 'column:added',\n    ColumnRemoved = 'column:removed',\n    ColumnModified = 'column:modified',\n    BodyModified = 'body:modified',\n}\n\nexport interface EventDesignUpdated {\n    type: DesignUpdatedEventType;\n    item: {\n        type: string;\n        slug?: string;\n        values: any;\n    };\n}\n\n/**\n * !!! IMPORTANT !!!\n * do not forget to update schema version when updating unlayer version\n * it is important for templates export and should be in sync\n * to know correct schema version, open unlayer editor and check output design ('schema' property)\n */\nexport const versions = {\n    unlayer: '1.421.0',\n    schema: 24,\n};\n\nexport const handlePreselectTool = (preselectToolSlug: string) => {\n    return `\n        const element = document.querySelector('.u_content_custom_${preselectToolSlug}');\n        if (element) {\n            element.click();\n        }\n    `;\n};\n\nexport const hideUnlayerContentsControls = () => {\n    return `\n        .blockbuilder-layer-controls-contents, .blockbuilder-layer-controls-rows {\n            display: none !important;\n        }\n\n        .blockbuilder-options-header .text-right .icon-delete, .blockbuilder-options-header .text-right .icon-duplicate {\n            display: none !important;\n        }\n    `;\n};\n\nexport const hideUnlayerBodyMenuItem = () => {\n    return `\n        .nav-item.tab-body {\n            display: none !important;\n        }\n    `;\n};\n\nconst injectEditorCoreStyles = () => {\n    const cssText = editorCoreStyles?.trim();\n\n    if (!cssText) {\n        return '';\n    }\n\n    return `\n        (function () {\n            var css = ${JSON.stringify(cssText)};\n            var id = 'dte-unlayer-core-styles';\n            if (document.getElementById(id)) {\n                return;\n            }\n            var style = document.createElement('style');\n            style.id = id;\n            style.type = 'text/css';\n            style.appendChild(document.createTextNode(css));\n            document.head.appendChild(style);\n        })();\n    `;\n};\n\nexport const hideMobileTabletPreview = () => `\n    [data-key=\"preview-tablet\"],\n    [data-key=\"resolution\"],\n    [data-key=\"dark-mode\"],\n    [data-key=\"preview-desktop\"],\n    [data-key=\"preview-mobile\"] {\n        display: none !important;\n    }\n`;\nexport const hideUnlayerTools = () => {\n    return `\n        .blockbuilder-content-tools {\n            display: none !important;\n        }\n           \n        .unlayer-custom-empty-tool-state {\n            display: flex;\n            margin-top: 150px;\n            flex-direction: column;\n            justify-content: center;\n        }\n        \n        .unlayer-custom-empty-tool-state-icon {\n            text-align: center;\n            margin-bottom: 12px;\n        }\n        \n        .unlayer-custom-empty-tool-state-icon svg{\n            color: #606162;\n        }\n        \n        .unlayer-custom-empty-tool-state-text {\n            text-align: center;\n            font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;\n            font-size: 16px;\n            font-style: normal;\n            font-weight: 500;\n            line-height: normal;\n            color: #606162;\n            line-height: 13px;\n        }\n    `;\n};\n\nexport const createUnlayerEditor = (\n    container: HTMLDivElement,\n    {\n        customCSS,\n        customJS,\n        displayConditions,\n        eSignFieldTypes,\n        eSignRecipients,\n        enableHTMLEditing,\n        enableHTMLEditingReadonly,\n        hideAllTools,\n        hideBodyMenuItem,\n        hideContentControls,\n        latest,\n        mergeTags,\n        noCoreTools,\n        tools,\n        units,\n    }: CreateUnlayerEditorProps,\n): Unlayer => {\n    const customScripts = [\n        editorCoreScript,\n        editorCoreTools,\n        injectEditorCoreStyles(),\n        'window.dteStore.sendData(\"--core-loaded\")',\n        ...unlayerCustomToolsGetRegisterUrls(tools),\n        unlayerCustomToolMetaData(tools),\n        ...(customJS ? (Array.isArray(customJS) ? customJS : [customJS]) : []),\n        hideAllTools ? unlayerCustomEmptyToolState() : '',\n        'window.dteStore.sendData(\"--data-loaded\")',\n    ].filter(js => !!js?.trim());\n    const customStyles = [\n        editorCoreStyles,\n        ...(customCSS ? (Array.isArray(customCSS) ? customCSS : [customCSS]) : []),\n        /*\n         * @TODO this is workaround for hiding all tools from unlayer sidebar.\n         * Will be better to use unlayer functionality for this but it is not implemented yet\n         */\n        hideMobileTabletPreview(),\n        hideAllTools ? hideUnlayerTools() : '',\n        hideContentControls ? hideUnlayerContentsControls() : '',\n        hideBodyMenuItem ? hideUnlayerBodyMenuItem() : '',\n    ].filter(css => !!css?.trim());\n\n    /**\n     * Unlayer supports only passing id of container, but when we use shadowDOM (MFE),\n     * getElementById can't find element in it\n     * so making this dirty hack to let unlayer find container in DOM\n     */\n    const id = container.id;\n    const currentFind = document.getElementById;\n    document.getElementById = function (elementId: string) {\n        if (id === elementId) {\n            return container;\n        }\n\n        return currentFind.call(document, id);\n    };\n\n    const acv = constGenericsEditor.adminConfigProperty;\n\n    const eSignTypeMapping = (eSignFieldTypes ?? []).map(key => ({\n        label: key,\n        value: key.charAt(0).toLowerCase() + key.replace(/ /g, '').slice(1),\n    }));\n\n    const unitsConfig = (units ?? []).reduce(\n        (out, unit) => {\n            out[`custom#${unit.generic}:unit:${unit.id}`] = {\n                data: {\n                    [acv]: unit.values[acv],\n                },\n                properties: {\n                    [constGenericsEditor.userConfigProperty]: {\n                        editor: {\n                            data: { [acv]: unit.values[acv] },\n                        },\n                    },\n                    [constGenericsEditor.infoDataProperty]: {\n                        editor: {\n                            data: { title: unit.title },\n                        },\n                    },\n                },\n            };\n            return out;\n        },\n        {} as Record<string, any>,\n    );\n\n    const eSignComponentRecipients = {\n        properties: {\n            eSignRecipient: {\n                editor: {\n                    data: {\n                        options: eSignRecipients?.map(item => ({\n                            label: item.displayName,\n                            value: item.name,\n                        })),\n                    },\n                },\n            },\n            eSignFieldType: {\n                editor: {\n                    data: {\n                        options: eSignTypeMapping,\n                    },\n                },\n            },\n        },\n    };\n\n    let result: Unlayer;\n\n    try {\n        const unlayerApi = (window as any).unlayer;\n\n        if (!unlayerApi?.createEditor) {\n            throw new Error(\n                'Unlayer embed is not available. window.unlayer.createEditor is missing.',\n            );\n        }\n\n        result = unlayerApi.createEditor({\n            displayMode: 'web',\n            devices: ['desktop'],\n            features: {\n                preview: true,\n                userUploads: false,\n                stockImages: false,\n                textEditor: {\n                    tables: true,\n                },\n            },\n            /*\n             * Flat only: nested groups here break custom tool registration. UnlayerStore applies\n             * the grouped config via setMergeTags once the editor is ready.\n             */\n            mergeTags: toUnlayerMergeTags(mergeTags, { groups: false }),\n            projectId: 5713,\n            version: latest ? undefined : versions.unlayer,\n            appearance: {\n                theme: 'classic_light',\n            },\n            tools: {\n                'carousel': { enabled: false },\n                'button': { enabled: false },\n                'html': {\n                    enabled: enableHTMLEditing,\n                    properties: {\n                        html: {\n                            editor: {\n                                widgetParams: {\n                                    codeMirrorOptions: {\n                                        readOnly: enableHTMLEditingReadonly,\n                                    },\n                                },\n                            },\n                        },\n                    },\n                },\n                'table': {\n                    enabled: true,\n                },\n                'menu': { enabled: false },\n                'form': { enabled: false },\n                ...(noCoreTools\n                    ? {\n                          columns: { enabled: false },\n                          text: { enabled: false },\n                          heading: { enabled: false },\n                          divider: { enabled: false },\n                          image: { enabled: false },\n                      }\n                    : {}),\n                ...unitsConfig,\n                'custom#e-sign': eSignComponentRecipients,\n            },\n            editor: {\n                autoSelectOnDrop: true,\n            },\n            customJS: customScripts,\n            customCSS: customStyles,\n            id,\n            fonts: {\n                showDefaultFonts: false,\n                customFonts: unlayerSupportedFonts,\n            },\n            tabs: {\n                content: {},\n                body: {},\n                blocks: { enabled: false },\n            },\n        });\n    } catch (error: unknown) {\n        logUnlayerError('unlayer.createEditor failed', error);\n        throw error;\n    } finally {\n        document.getElementById = currentFind;\n    }\n\n    if (displayConditions) {\n        result.registerCallback(\n            'displayCondition',\n            function (data: any, done: (condition: any) => void) {\n                emitDisplayCondition({ data, done });\n            },\n        );\n    }\n\n    return result;\n};\n"],"names":["emitDisplayCondition","editorCoreScript","editorCoreStyles","editorCoreTools","logUnlayerError","toUnlayerMergeTags","constGenericsEditor","unlayerSupportedFonts","unlayerCustomEmptyToolState","unlayerCustomToolMetaData","unlayerCustomToolsGetRegisterUrls","DesignUpdatedEventType","versions","unlayer","schema","handlePreselectTool","preselectToolSlug","hideUnlayerContentsControls","hideUnlayerBodyMenuItem","injectEditorCoreStyles","cssText","trim","JSON","stringify","hideMobileTabletPreview","hideUnlayerTools","createUnlayerEditor","container","customCSS","customJS","displayConditions","eSignFieldTypes","eSignRecipients","enableHTMLEditing","enableHTMLEditingReadonly","hideAllTools","hideBodyMenuItem","hideContentControls","latest","mergeTags","noCoreTools","tools","units","customScripts","Array","isArray","filter","js","customStyles","css","id","currentFind","document","getElementById","elementId","call","acv","adminConfigProperty","eSignTypeMapping","map","key","label","value","charAt","toLowerCase","replace","slice","unitsConfig","reduce","out","unit","generic","data","values","properties","userConfigProperty","editor","infoDataProperty","title","eSignComponentRecipients","eSignRecipient","options","item","displayName","name","eSignFieldType","result","unlayerApi","window","createEditor","Error","displayMode","devices","features","preview","userUploads","stockImages","textEditor","tables","groups","projectId","version","undefined","appearance","theme","enabled","html","widgetParams","codeMirrorOptions","readOnly","columns","text","heading","divider","image","autoSelectOnDrop","fonts","showDefaultFonts","customFonts","tabs","content","body","blocks","error","registerCallback","done"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,kDAAkD;AACvF,SAASC,gBAAgB,EAAEC,gBAAgB,EAAEC,eAAe,QAAQ,gBAAgB;AACpF,SAASC,eAAe,QAAQ,QAAQ;AACxC,SAASC,kBAAkB,QAAQ,eAAe;AAClD,SAASC,mBAAmB,QAAQ,iBAAiB;AACrD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SACIC,2BAA2B,EAC3BC,yBAAyB,EACzBC,iCAAiC,QAC9B,UAAU;AA0BjB,OAAO,IAAA,AAAKC,gDAAAA;;;;;;;;;;;;;WAAAA;MAaX;AAWD;;;;;CAKC,GACD,OAAO,MAAMC,WAAW;IACpBC,SAAS;IACTC,QAAQ;AACZ,EAAE;AAEF,OAAO,MAAMC,sBAAsB,CAACC;IAChC,OAAO,CAAC;kEACsD,EAAEA,kBAAkB;;;;IAIlF,CAAC;AACL,EAAE;AAEF,OAAO,MAAMC,8BAA8B;IACvC,OAAO,CAAC;;;;;;;;IAQR,CAAC;AACL,EAAE;AAEF,OAAO,MAAMC,0BAA0B;IACnC,OAAO,CAAC;;;;IAIR,CAAC;AACL,EAAE;AAEF,MAAMC,yBAAyB;IAC3B,MAAMC,UAAUlB,6BAAAA,uCAAAA,iBAAkBmB,IAAI;IAEtC,IAAI,CAACD,SAAS;QACV,OAAO;IACX;IAEA,OAAO,CAAC;;sBAEU,EAAEE,KAAKC,SAAS,CAACH,SAAS;;;;;;;;;;;IAW5C,CAAC;AACL;AAEA,OAAO,MAAMI,0BAA0B,IAAM,CAAC;;;;;;;;AAQ9C,CAAC,CAAC;AACF,OAAO,MAAMC,mBAAmB;IAC5B,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA+BR,CAAC;AACL,EAAE;AAEF,OAAO,MAAMC,sBAAsB,CAC/BC,WACA,EACIC,SAAS,EACTC,QAAQ,EACRC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,EACfC,iBAAiB,EACjBC,yBAAyB,EACzBC,YAAY,EACZC,gBAAgB,EAChBC,mBAAmB,EACnBC,MAAM,EACNC,SAAS,EACTC,WAAW,EACXC,KAAK,EACLC,KAAK,EACkB;IAE3B,MAAMC,gBAAgB;QAClB1C;QACAE;QACAgB;QACA;WACGT,kCAAkC+B;QACrChC,0BAA0BgC;WACtBZ,WAAYe,MAAMC,OAAO,CAAChB,YAAYA,WAAW;YAACA;SAAS,GAAI,EAAE;QACrEM,eAAe3B,gCAAgC;QAC/C;KACH,CAACsC,MAAM,CAACC,CAAAA,KAAM,CAAC,EAACA,eAAAA,yBAAAA,GAAI1B,IAAI;IACzB,MAAM2B,eAAe;QACjB9C;WACI0B,YAAagB,MAAMC,OAAO,CAACjB,aAAaA,YAAY;YAACA;SAAU,GAAI,EAAE;QACzE;;;SAGC,GACDJ;QACAW,eAAeV,qBAAqB;QACpCY,sBAAsBpB,gCAAgC;QACtDmB,mBAAmBlB,4BAA4B;KAClD,CAAC4B,MAAM,CAACG,CAAAA,MAAO,CAAC,EAACA,gBAAAA,0BAAAA,IAAK5B,IAAI;IAE3B;;;;KAIC,GACD,MAAM6B,KAAKvB,UAAUuB,EAAE;IACvB,MAAMC,cAAcC,SAASC,cAAc;IAC3CD,SAASC,cAAc,GAAG,SAAUC,SAAiB;QACjD,IAAIJ,OAAOI,WAAW;YAClB,OAAO3B;QACX;QAEA,OAAOwB,YAAYI,IAAI,CAACH,UAAUF;IACtC;IAEA,MAAMM,MAAMlD,oBAAoBmD,mBAAmB;IAEnD,MAAMC,mBAAmB,CAAC3B,4BAAAA,6BAAAA,kBAAmB,EAAE,EAAE4B,GAAG,CAACC,CAAAA,MAAQ,CAAA;YACzDC,OAAOD;YACPE,OAAOF,IAAIG,MAAM,CAAC,GAAGC,WAAW,KAAKJ,IAAIK,OAAO,CAAC,MAAM,IAAIC,KAAK,CAAC;QACrE,CAAA;IAEA,MAAMC,cAAc,CAACzB,kBAAAA,mBAAAA,QAAS,EAAE,EAAE0B,MAAM,CACpC,CAACC,KAAKC;QACFD,GAAG,CAAC,CAAC,OAAO,EAAEC,KAAKC,OAAO,CAAC,MAAM,EAAED,KAAKpB,EAAE,EAAE,CAAC,GAAG;YAC5CsB,MAAM;gBACF,CAAChB,IAAI,EAAEc,KAAKG,MAAM,CAACjB,IAAI;YAC3B;YACAkB,YAAY;gBACR,CAACpE,oBAAoBqE,kBAAkB,CAAC,EAAE;oBACtCC,QAAQ;wBACJJ,MAAM;4BAAE,CAAChB,IAAI,EAAEc,KAAKG,MAAM,CAACjB,IAAI;wBAAC;oBACpC;gBACJ;gBACA,CAAClD,oBAAoBuE,gBAAgB,CAAC,EAAE;oBACpCD,QAAQ;wBACJJ,MAAM;4BAAEM,OAAOR,KAAKQ,KAAK;wBAAC;oBAC9B;gBACJ;YACJ;QACJ;QACA,OAAOT;IACX,GACA,CAAC;IAGL,MAAMU,2BAA2B;QAC7BL,YAAY;YACRM,gBAAgB;gBACZJ,QAAQ;oBACJJ,MAAM;wBACFS,OAAO,EAAEjD,4BAAAA,sCAAAA,gBAAiB2B,GAAG,CAACuB,CAAAA,OAAS,CAAA;gCACnCrB,OAAOqB,KAAKC,WAAW;gCACvBrB,OAAOoB,KAAKE,IAAI;4BACpB,CAAA;oBACJ;gBACJ;YACJ;YACAC,gBAAgB;gBACZT,QAAQ;oBACJJ,MAAM;wBACFS,SAASvB;oBACb;gBACJ;YACJ;QACJ;IACJ;IAEA,IAAI4B;IAEJ,IAAI;QACA,MAAMC,aAAa,AAACC,OAAe3E,OAAO;QAE1C,IAAI,EAAC0E,uBAAAA,iCAAAA,WAAYE,YAAY,GAAE;YAC3B,MAAM,IAAIC,MACN;QAER;QAEAJ,SAASC,WAAWE,YAAY,CAAC;YAC7BE,aAAa;YACbC,SAAS;gBAAC;aAAU;YACpBC,UAAU;gBACNC,SAAS;gBACTC,aAAa;gBACbC,aAAa;gBACbC,YAAY;oBACRC,QAAQ;gBACZ;YACJ;YACA;;;aAGC,GACD3D,WAAWlC,mBAAmBkC,WAAW;gBAAE4D,QAAQ;YAAM;YACzDC,WAAW;YACXC,SAAS/D,SAASgE,YAAY1F,SAASC,OAAO;YAC9C0F,YAAY;gBACRC,OAAO;YACX;YACA/D,OAAO;gBACH,YAAY;oBAAEgE,SAAS;gBAAM;gBAC7B,UAAU;oBAAEA,SAAS;gBAAM;gBAC3B,QAAQ;oBACJA,SAASxE;oBACTyC,YAAY;wBACRgC,MAAM;4BACF9B,QAAQ;gCACJ+B,cAAc;oCACVC,mBAAmB;wCACfC,UAAU3E;oCACd;gCACJ;4BACJ;wBACJ;oBACJ;gBACJ;gBACA,SAAS;oBACLuE,SAAS;gBACb;gBACA,QAAQ;oBAAEA,SAAS;gBAAM;gBACzB,QAAQ;oBAAEA,SAAS;gBAAM;gBACzB,GAAIjE,cACE;oBACIsE,SAAS;wBAAEL,SAAS;oBAAM;oBAC1BM,MAAM;wBAAEN,SAAS;oBAAM;oBACvBO,SAAS;wBAAEP,SAAS;oBAAM;oBAC1BQ,SAAS;wBAAER,SAAS;oBAAM;oBAC1BS,OAAO;wBAAET,SAAS;oBAAM;gBAC5B,IACA,CAAC,CAAC;gBACR,GAAGtC,WAAW;gBACd,iBAAiBY;YACrB;YACAH,QAAQ;gBACJuC,kBAAkB;YACtB;YACAtF,UAAUc;YACVf,WAAWoB;YACXE;YACAkE,OAAO;gBACHC,kBAAkB;gBAClBC,aAAa/G;YACjB;YACAgH,MAAM;gBACFC,SAAS,CAAC;gBACVC,MAAM,CAAC;gBACPC,QAAQ;oBAAEjB,SAAS;gBAAM;YAC7B;QACJ;IACJ,EAAE,OAAOkB,OAAgB;QACrBvH,gBAAgB,+BAA+BuH;QAC/C,MAAMA;IACV,SAAU;QACNvE,SAASC,cAAc,GAAGF;IAC9B;IAEA,IAAIrB,mBAAmB;QACnBwD,OAAOsC,gBAAgB,CACnB,oBACA,SAAUpD,IAAS,EAAEqD,IAA8B;YAC/C7H,qBAAqB;gBAAEwE;gBAAMqD;YAAK;QACtC;IAER;IAEA,OAAOvC;AACX,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicetitan/dte-unlayer",
-  "version": "0.153.0",
+  "version": "0.154.0",
   "description": "",
   "main": "./dist/index.js",
   "typings": "./dist/index.d.ts",

package/src/__tests__/merge-tags.test.ts

@@ -1,4 +1,4 @@
-import { scheduleUnlayerMergeTags, toUnlayerMergeTags } from '../merge-tags';
+import { toUnlayerMergeTags } from '../merge-tags';
 
 const customerNameTag = {
     id: '10',
@@ -75,7 +75,7 @@ describe('toUnlayerMergeTags', () => {
                     name: 'Customer Name',
                     value: '{{Customer.Name | safe | nl2br }}',
                 },
-                custom_fields: {
+                'custom_fields': {
                     name: 'Custom Fields',
                     mergeTags: {
                         custom_field_12345: {
@@ -124,6 +124,101 @@ describe('toUnlayerMergeTags', () => {
         });
     });
 
+    describe('when group is a path', () => {
+        const intakeScoreTag = {
+            id: 'form-7-abc123',
+            name: 'Score',
+            propertyPath: '{{ __submission_fields["7"]["abc123"] | safe | nl2br }}',
+            group: ['Forms', 'Customer Intake'],
+        };
+        const intakeNotesTag = {
+            id: 'form-7-def456',
+            name: 'Notes',
+            propertyPath: '{{ __submission_fields["7"]["def456"] | safe | nl2br }}',
+            group: ['Forms', 'Customer Intake'],
+        };
+        const inspectionDateTag = {
+            id: 'form-9-fed987',
+            name: 'Inspection Date',
+            propertyPath: '{{ __submission_fields["9"]["fed987"] | safe | nl2br }}',
+            group: ['Forms', 'Inspection'],
+        };
+
+        const subject = () =>
+            toUnlayerMergeTags([
+                contractTermTag,
+                renewalDateTag,
+                intakeScoreTag,
+                intakeNotesTag,
+                inspectionDateTag,
+            ]);
+
+        test('nests one submenu per path segment', () => {
+            expect(subject()).toEqual({
+                ...groupedCustomFields,
+                forms: {
+                    name: 'Forms',
+                    mergeTags: {
+                        customer_intake: {
+                            name: 'Customer Intake',
+                            mergeTags: {
+                                form_7_abc123: {
+                                    name: 'Score',
+                                    value: '{{ __submission_fields["7"]["abc123"] | safe | nl2br }}',
+                                },
+                                form_7_def456: {
+                                    name: 'Notes',
+                                    value: '{{ __submission_fields["7"]["def456"] | safe | nl2br }}',
+                                },
+                            },
+                        },
+                        inspection: {
+                            name: 'Inspection',
+                            mergeTags: {
+                                form_9_fed987: {
+                                    name: 'Inspection Date',
+                                    value: '{{ __submission_fields["9"]["fed987"] | safe | nl2br }}',
+                                },
+                            },
+                        },
+                    },
+                },
+            });
+        });
+
+        test('drops blank segments and keeps the remaining path', () => {
+            expect(toUnlayerMergeTags([{ ...intakeScoreTag, group: [' ', 'Forms', ''] }])).toEqual({
+                forms: {
+                    name: 'Forms',
+                    mergeTags: {
+                        form_7_abc123: {
+                            name: 'Score',
+                            value: '{{ __submission_fields["7"]["abc123"] | safe | nl2br }}',
+                        },
+                    },
+                },
+            });
+        });
+
+        test('treats an all-blank path as ungrouped', () => {
+            expect(toUnlayerMergeTags([{ ...intakeScoreTag, group: [] }])).toEqual({
+                form_7_abc123: {
+                    name: 'Score',
+                    value: '{{ __submission_fields["7"]["abc123"] | safe | nl2br }}',
+                },
+            });
+        });
+
+        test('flattens the path when groups are disabled', () => {
+            expect(toUnlayerMergeTags([intakeScoreTag], { groups: false })).toEqual({
+                form_7_abc123: {
+                    name: 'Score',
+                    value: '{{ __submission_fields["7"]["abc123"] | safe | nl2br }}',
+                },
+            });
+        });
+    });
+
     describe('when group is blank', () => {
         const subject = () =>
             toUnlayerMergeTags([
@@ -153,7 +248,7 @@ describe('toUnlayerMergeTags', () => {
                     name: 'Customer Name',
                     value: '{{Customer.Name | safe | nl2br }}',
                 },
-                custom_field_12345: {
+                'custom_field_12345': {
                     name: 'Contract Term',
                     value: '{{ __custom_fields["Contract Term"] | safe | nl2br }}',
                 },
@@ -161,76 +256,3 @@ describe('toUnlayerMergeTags', () => {
         });
     });
 });
-
-describe('scheduleUnlayerMergeTags', () => {
-    describe('when grouped tags exist', () => {
-        const setMergeTags = jest.fn();
-        const addEventListener = jest.fn();
-
-        beforeEach(() => {
-            setMergeTags.mockReset();
-            addEventListener.mockReset();
-            scheduleUnlayerMergeTags(
-                { addEventListener, setMergeTags },
-                [customerNameTag, contractTermTag, renewalDateTag],
-            );
-        });
-
-        test('does not apply grouped merge tags until the editor is ready', () => {
-            expect(setMergeTags).not.toHaveBeenCalled();
-            expect(addEventListener).toHaveBeenCalledWith('editor:ready', expect.any(Function));
-            expect(addEventListener).toHaveBeenCalledWith('design:loaded', expect.any(Function));
-        });
-
-        test('applies grouped merge tags when the editor is ready', () => {
-            addEventListener.mock.calls[0][1]();
-
-            expect(setMergeTags).toHaveBeenCalledWith({
-                '10': {
-                    name: 'Customer Name',
-                    value: '{{Customer.Name | safe | nl2br }}',
-                },
-                ...groupedCustomFields,
-            });
-        });
-
-        test('applies grouped merge tags only once', () => {
-            addEventListener.mock.calls[0][1]();
-            addEventListener.mock.calls[1][1]();
-
-            expect(setMergeTags).toHaveBeenCalledTimes(1);
-        });
-
-        test('retries on design:loaded when setMergeTags throws', () => {
-            const consoleError = jest.spyOn(console, 'error').mockImplementation(() => undefined);
-            setMergeTags.mockImplementationOnce(() => {
-                throw new Error('setMergeTags failed');
-            });
-
-            addEventListener.mock.calls[0][1]();
-            addEventListener.mock.calls[1][1]();
-
-            expect(setMergeTags).toHaveBeenCalledTimes(2);
-            expect(consoleError).toHaveBeenCalledWith(
-                '[dte-unlayer]',
-                'Failed to apply grouped merge tags',
-                expect.any(Error),
-            );
-            consoleError.mockRestore();
-        });
-    });
-
-    describe('when tags are missing', () => {
-        const setMergeTags = jest.fn();
-        const addEventListener = jest.fn();
-
-        beforeEach(() => {
-            scheduleUnlayerMergeTags({ addEventListener, setMergeTags }, undefined);
-        });
-
-        test('does not touch the editor', () => {
-            expect(setMergeTags).not.toHaveBeenCalled();
-            expect(addEventListener).not.toHaveBeenCalled();
-        });
-    });
-});

package/src/__tests__/store.merge-tags.test.ts

@@ -0,0 +1,186 @@
+import { UnlayerStore } from '../store';
+import type { CreateUnlayerEditorProps } from '../unlayer-interface';
+
+const editorMock = {
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    registerCallback: jest.fn(),
+    unregisterCallback: jest.fn(),
+    setMergeTags: jest.fn(),
+    loadDesign: jest.fn(),
+    setBodyValues: jest.fn(),
+};
+
+jest.mock('../loadScript', () => ({ loadScript: jest.fn().mockResolvedValue(undefined) }));
+jest.mock('../unlayer', () => ({
+    ...jest.requireActual('../unlayer'),
+    createUnlayerEditor: jest.fn(() => editorMock),
+}));
+
+const customerNameTag = {
+    id: '10',
+    name: 'Customer Name',
+    propertyPath: '{{Customer.Name | safe | nl2br }}',
+};
+
+const scoreTag = {
+    id: 'form-7-abc',
+    name: 'Score',
+    propertyPath: '{{ __submission_fields["7"]["abc"] | safe | nl2br }}',
+    group: ['Forms', 'Customer Intake'],
+};
+
+const flatCustomer = {
+    '10': { name: 'Customer Name', value: '{{Customer.Name | safe | nl2br }}' },
+};
+
+const groupedScore = {
+    forms: {
+        name: 'Forms',
+        mergeTags: {
+            customer_intake: {
+                name: 'Customer Intake',
+                mergeTags: {
+                    form_7_abc: {
+                        name: 'Score',
+                        value: '{{ __submission_fields["7"]["abc"] | safe | nl2br }}',
+                    },
+                },
+            },
+        },
+    },
+};
+
+const fireEditorEvent = (event: string) => {
+    editorMock.addEventListener.mock.calls
+        .filter(([name]) => name === event)
+        .forEach(([, handler]) => handler());
+};
+
+describe('UnlayerStore merge tags', () => {
+    let store: UnlayerStore;
+    let consoleError: jest.SpyInstance;
+
+    const createStore = (props: Partial<CreateUnlayerEditorProps> = {}) => {
+        store = new UnlayerStore({ tools: [], ...props });
+        return store;
+    };
+
+    const initStore = async () => {
+        (window as any).unlayer = {};
+        const container = document.createElement('div');
+        container.appendChild(document.createElement('iframe'));
+        await store.init(container);
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        consoleError = jest.spyOn(console, 'error').mockImplementation(() => undefined);
+    });
+
+    afterEach(() => {
+        store.destroy();
+        consoleError.mockRestore();
+    });
+
+    describe('when the editor initializes with merge tags', () => {
+        beforeEach(async () => {
+            createStore({ mergeTags: [customerNameTag, scoreTag] });
+            await initStore();
+        });
+
+        test('does not touch the editor before it is ready', () => {
+            expect(editorMock.setMergeTags).not.toHaveBeenCalled();
+        });
+
+        test('applies the grouped shape once on editor:ready', () => {
+            fireEditorEvent('editor:ready');
+            fireEditorEvent('design:loaded');
+
+            expect(editorMock.setMergeTags).toHaveBeenCalledTimes(1);
+            expect(editorMock.setMergeTags).toHaveBeenCalledWith({
+                ...flatCustomer,
+                ...groupedScore,
+            });
+        });
+
+        test('applies on design:loaded when editor:ready never fires', () => {
+            fireEditorEvent('design:loaded');
+
+            expect(editorMock.setMergeTags).toHaveBeenCalledTimes(1);
+            expect(editorMock.setMergeTags).toHaveBeenCalledWith({
+                ...flatCustomer,
+                ...groupedScore,
+            });
+        });
+
+        test('retries on design:loaded when the first apply throws', () => {
+            editorMock.setMergeTags.mockImplementationOnce(() => {
+                throw new Error('not ready');
+            });
+
+            fireEditorEvent('editor:ready');
+            fireEditorEvent('design:loaded');
+            fireEditorEvent('design:loaded');
+
+            expect(editorMock.setMergeTags).toHaveBeenCalledTimes(2);
+            expect(consoleError).toHaveBeenCalledWith(
+                '[dte-unlayer]',
+                'Failed to apply merge tags',
+                expect.any(Error),
+            );
+        });
+    });
+
+    describe('with setMergeTags', () => {
+        describe('when called before the editor is ready', () => {
+            beforeEach(async () => {
+                createStore({ mergeTags: [customerNameTag] });
+                store.unlayerRef.setMergeTags([customerNameTag, scoreTag]);
+                await initStore();
+            });
+
+            test('replaces the initial tags and applies once on ready', () => {
+                fireEditorEvent('editor:ready');
+
+                expect(editorMock.setMergeTags).toHaveBeenCalledTimes(1);
+                expect(editorMock.setMergeTags).toHaveBeenCalledWith({
+                    ...flatCustomer,
+                    ...groupedScore,
+                });
+            });
+        });
+
+        describe('when called after the editor is ready', () => {
+            beforeEach(async () => {
+                createStore({ mergeTags: [customerNameTag] });
+                await initStore();
+                fireEditorEvent('editor:ready');
+                editorMock.setMergeTags.mockClear();
+            });
+
+            test('applies immediately', () => {
+                store.unlayerRef.setMergeTags([customerNameTag, scoreTag]);
+
+                expect(editorMock.setMergeTags).toHaveBeenCalledTimes(1);
+                expect(editorMock.setMergeTags).toHaveBeenCalledWith({
+                    ...flatCustomer,
+                    ...groupedScore,
+                });
+            });
+
+            test('does not re-apply on later design:loaded events', () => {
+                store.unlayerRef.setMergeTags([customerNameTag, scoreTag]);
+                fireEditorEvent('design:loaded');
+
+                expect(editorMock.setMergeTags).toHaveBeenCalledTimes(1);
+            });
+
+            test('ignores an empty set', () => {
+                store.unlayerRef.setMergeTags([]);
+
+                expect(editorMock.setMergeTags).not.toHaveBeenCalled();
+            });
+        });
+    });
+});

package/src/index.ts

@@ -3,13 +3,12 @@ export * from './tools';
 export * from './api-core';
 export * from './api-custom-tools';
 export * from './unlayer-interface';
-export { isUnlayerMergeTagGroup, scheduleUnlayerMergeTags, toUnlayerMergeTags } from './merge-tags';
+export { isUnlayerMergeTagGroup, toUnlayerMergeTags } from './merge-tags';
 export type {
     ToUnlayerMergeTagsOptions,
     UnlayerMergeTagGroup,
     UnlayerMergeTagLeaf,
     UnlayerMergeTagsConfig,
-    UnlayerMergeTagsEditor,
 } from './merge-tags';
 export * from './loadScript';
 export * from './shared/const';

package/src/merge-tags.ts

@@ -1,4 +1,3 @@
-import { logUnlayerError } from './log';
 import { UnlayerEditorMergeTagInfo } from './unlayer-interface';
 
 export interface UnlayerMergeTagLeaf {
@@ -8,7 +7,8 @@ export interface UnlayerMergeTagLeaf {
 
 export interface UnlayerMergeTagGroup {
     name: string;
-    mergeTags: Record<string, UnlayerMergeTagLeaf>;
+    /** Nested submenu: leaves and/or further groups (Unlayer supports arbitrary depth). */
+    mergeTags: UnlayerMergeTagsConfig;
 }
 
 export type UnlayerMergeTagsConfig = Record<string, UnlayerMergeTagLeaf | UnlayerMergeTagGroup>;
@@ -21,11 +21,6 @@ export interface ToUnlayerMergeTagsOptions {
     groups?: boolean;
 }
 
-export interface UnlayerMergeTagsEditor {
-    addEventListener(event: string, cb: (arg: any) => void): void;
-    setMergeTags(tags: UnlayerMergeTagsConfig): void;
-}
-
 export function isUnlayerMergeTagGroup(
     entry: UnlayerMergeTagLeaf | UnlayerMergeTagGroup,
 ): entry is UnlayerMergeTagGroup {
@@ -42,6 +37,43 @@ const toMergeTagKey = (value: string) => {
     return key || value;
 };
 
+/**
+ * Normalizes the host `group` into the submenu path the tag belongs to:
+ * `'Custom Fields'` → `['Custom Fields']`, `['Forms', 'Intake']` → `['Forms', 'Intake']`.
+ * Blank segments are dropped; an empty result means the tag stays at the top level.
+ */
+const toGroupPath = (group: UnlayerEditorMergeTagInfo['group']): string[] => {
+    const segments = Array.isArray(group) ? group : group === undefined ? [] : [group];
+
+    return segments.map(segment => segment.trim()).filter(Boolean);
+};
+
+/** Returns the `mergeTags` record of the (possibly nested) group at `path`, creating groups on the way. */
+const ensureGroup = (root: UnlayerMergeTagsConfig, path: string[]) => {
+    let current = root;
+
+    for (const groupName of path) {
+        const groupKey = toMergeTagKey(groupName);
+        const existing = current[groupKey];
+
+        if (existing && isUnlayerMergeTagGroup(existing)) {
+            current = existing.mergeTags;
+            continue;
+        }
+
+        const created: UnlayerMergeTagGroup = { name: groupName, mergeTags: {} };
+        current[groupKey] = created;
+        current = created.mergeTags;
+    }
+
+    return current;
+};
+
+/**
+ * Builds Unlayer's `mergeTags` config. With `groups` enabled (default) tags nest under the
+ * submenu path in `group`; `UnlayerStore` applies that shape once the editor is ready, since
+ * nested groups at `createEditor` time prevent DTE custom tools from loading.
+ */
 export const toUnlayerMergeTags = (
     tags: UnlayerEditorMergeTagInfo[] | undefined,
     options?: ToUnlayerMergeTagsOptions,
@@ -58,61 +90,10 @@ export const toUnlayerMergeTags = (
             value: tag.propertyPath,
         };
         const tagKey = toMergeTagKey(tag.id);
-        const groupName = groupsEnabled ? tag.group?.trim() : undefined;
-
-        if (!groupName) {
-            out[tagKey] = mergeTag;
-            return out;
-        }
-
-        const groupKey = toMergeTagKey(groupName);
-        const existing = out[groupKey];
-
-        if (existing && isUnlayerMergeTagGroup(existing)) {
-            existing.mergeTags[tagKey] = mergeTag;
-            return out;
-        }
+        const groupPath = groupsEnabled ? toGroupPath(tag.group) : [];
 
-        out[groupKey] = {
-            name: groupName,
-            mergeTags: {
-                [tagKey]: mergeTag,
-            },
-        };
+        ensureGroup(out, groupPath)[tagKey] = mergeTag;
 
         return out;
     }, {});
 };
-
-/**
- * Nested Unlayer groups passed to createEditor prevent DTE custom tools from
- * loading in the host app. Apply the 0.151 flat shape at init, then upgrade to
- * grouped submenus once the editor (and customJS tools) are ready.
- */
-export const scheduleUnlayerMergeTags = (
-    editor: UnlayerMergeTagsEditor,
-    tags: UnlayerEditorMergeTagInfo[] | undefined,
-) => {
-    const grouped = toUnlayerMergeTags(tags);
-
-    if (!grouped) {
-        return;
-    }
-
-    let isApplied = false;
-    const apply = () => {
-        if (isApplied) {
-            return;
-        }
-
-        try {
-            editor.setMergeTags(grouped);
-            isApplied = true;
-        } catch (error: unknown) {
-            logUnlayerError('Failed to apply grouped merge tags', error);
-        }
-    };
-
-    editor.addEventListener('editor:ready', apply);
-    editor.addEventListener('design:loaded', apply);
-};

package/src/shared/instance-id.ts

@@ -0,0 +1,23 @@
+/**
+ * Custom tools whose `values.id` is a per-instance GUID that must stay unique
+ * within a design. When such a tool is duplicated (content or row duplicate),
+ * Unlayer copies the values as-is, so the host regenerates the id of the copy.
+ */
+export const INSTANCE_ID_TOOL_SLUGS = ['embedded-image'];
+
+/**
+ * Generates an RFC 4122 v4 GUID (`3fa85f64-5717-4562-b3fc-2c963f66afa6`) with the
+ * platform `crypto.randomUUID()`. It is only exposed in secure contexts (https /
+ * localhost); when missing the error is logged and no id is produced.
+ */
+export const generateInstanceId = (): string | undefined => {
+    if (typeof globalThis.crypto?.randomUUID !== 'function') {
+        // eslint-disable-next-line no-console
+        console.error(
+            'crypto.randomUUID is not available (insecure context?), cannot generate an instance id',
+        );
+        return undefined;
+    }
+
+    return globalThis.crypto.randomUUID();
+};