@servicetitan/dte-unlayer 0.0.1-test1

package/src/store.ts

@@ -0,0 +1,197 @@
+import { loadScript } from './loadScript';
+import { UnlayerEventConfig, UnlayerEventRegister } from './shared/const';
+import {
+    createUnlayerEditor,
+    DesignUpdatedEventType,
+    EventDesignUpdated,
+    Unlayer,
+} from './unlayer';
+import { CreateUnlayerEditorProps, UnlayerDesignFormat, UnlayerRef } from './unlayer-interface';
+
+const defaultScriptUrl = 'https://editor.unlayer.com/embed.js?2';
+
+export interface UnlayerDesignChangeInfo {
+    isToolsListChanged: boolean;
+    event: any;
+}
+
+const eventsNotChangingToolsList: DesignUpdatedEventType[] = [
+    DesignUpdatedEventType.ContentMoved,
+    DesignUpdatedEventType.ContentModified,
+    DesignUpdatedEventType.ColumnModified,
+    DesignUpdatedEventType.RowMoved,
+    DesignUpdatedEventType.RowModified,
+    DesignUpdatedEventType.BodyModified,
+];
+
+export class UnlayerStore {
+    readonly unlayerRef: UnlayerRef;
+
+    private editor: Unlayer | undefined;
+    private isInit = false;
+    private iframe?: HTMLIFrameElement;
+    private hasDesign = false;
+
+    private onMessageCB?: (type: string, data: any) => void;
+    private onChangeCB?: (info: UnlayerDesignChangeInfo) => void;
+    private onReadyCB?: () => void;
+    private onImageCB?: (file: File) => Promise<{ url: string }>;
+
+    constructor(readonly props: CreateUnlayerEditorProps) {
+        this.unlayerRef = {
+            loadDesign: design => {
+                this.editor?.loadDesign(design);
+            },
+            saveDesign: cb => {
+                this.editor?.saveDesign(cb);
+            },
+            exportHtml: cb => {
+                this.editor?.exportHtml(data => {
+                    cb(data);
+                });
+            },
+        };
+    }
+
+    init = async (container: HTMLDivElement) => {
+        if (this.isInit) {
+            return;
+        }
+
+        this.isInit = true;
+
+        window.addEventListener('message', this.onPostMessage);
+
+        await loadScript(defaultScriptUrl);
+
+        this.editor = createUnlayerEditor(container, this.props);
+        this.editor.addEventListener('design:loaded', this.onDesignLoaded);
+        this.editor.addEventListener('design:updated', this.onDesignUpdated);
+        this.editor.registerCallback('image', this.uploadImage);
+
+        this.iframe = container.querySelector(`iframe`) ?? undefined;
+    };
+
+    destroy = () => {
+        window.removeEventListener('message', this.onPostMessage);
+
+        if (this.editor) {
+            this.editor.removeEventListener('design:loaded', this.onDesignLoaded);
+            this.editor.removeEventListener('design:updated', this.onDesignUpdated);
+            this.editor.unregisterCallback('image', this.uploadImage);
+
+            this.editor = undefined;
+        }
+    };
+
+    setDesign = (design?: UnlayerDesignFormat) => {
+        if (!this.editor) {
+            return;
+        }
+
+        this.hasDesign = !!design;
+
+        if (design) {
+            this.editor.loadDesign(design);
+        }
+    };
+
+    setOnChange = (onChange?: UnlayerStore['onChangeCB']) => {
+        this.onChangeCB = onChange;
+    };
+
+    setOnReady = (onReady?: UnlayerStore['onReadyCB']) => {
+        this.onReadyCB = onReady;
+    };
+
+    setOnImage = (onImage?: UnlayerStore['onImageCB']) => {
+        this.onImageCB = onImage;
+    };
+
+    setOnMessage = (onMessage?: UnlayerStore['onMessageCB']) => {
+        this.onMessageCB = onMessage;
+    };
+
+    private onDesignLoaded = () => {
+        if (!this.hasDesign) {
+            this.hasDesign = true;
+            this.editor?.setBodyValues({
+                backgroundColor: 'rgba(0,0,0,0)',
+                contentWidth: '100%',
+            });
+        }
+    };
+
+    private onDesignUpdated = (event: EventDesignUpdated) => {
+        this.onChangeCB?.({
+            isToolsListChanged: !eventsNotChangingToolsList.includes(event.type),
+            event,
+        });
+    };
+
+    private onPostMessage = (e: MessageEvent) => {
+        if (!e.data?.['-dte-message-from']) {
+            return;
+        }
+
+        const type = e.data?.['-dte-message-from']?.type;
+        const data = e.data?.['-dte-message-from']?.data;
+
+        if (!type) {
+            return;
+        }
+
+        if (type === '--ready' || type === '--registered') {
+            this.onReadyCB?.();
+        } else if (type === '--core-loaded') {
+            const data: UnlayerEventConfig = {
+                dummyData: this.props.dummyData,
+                schema: this.props.schema,
+                generics: this.props.generics,
+                genericConfigMode: this.props.genericConfigMode,
+            };
+
+            this.sendMessage('--config', JSON.parse(JSON.stringify(data)));
+        } else if (type === '--data-loaded') {
+            const data: UnlayerEventRegister = {
+                customTools: this.props.tools.map(tool => ({ key: tool.key })),
+                units: this.props.units?.map(unit => ({
+                    ...unit,
+                    values: {
+                        ...unit.values,
+                        adminConfig: undefined,
+                    },
+                })),
+            };
+
+            this.sendMessage('--register', JSON.parse(JSON.stringify(data)));
+        }
+
+        this.onMessageCB?.(type, data);
+    };
+
+    private sendMessage = (type: string, data?: any) => {
+        this.iframe?.contentWindow?.postMessage(
+            {
+                '-dte-message-to': {
+                    type,
+                    data,
+                },
+            },
+            '*'
+        );
+    };
+
+    private uploadImage = (data: any, done: (result: any) => void) => {
+        if (!this.onImageCB) {
+            done({ progress: 100 });
+            throw new Error('image upload is not implemented');
+        }
+
+        if (data.attachments?.length) {
+            this.onImageCB(data.attachments[0])
+                .then(({ url }) => done({ progress: 100, url }))
+                .catch(() => done({ progress: 100 }));
+        }
+    };
+}

package/src/tools.ts

@@ -0,0 +1,213 @@
+import { constGenericsEditor } from './shared/const';
+import { unlayerUnitsParseToolKey } from './shared/tools';
+import { versions } from './unlayer';
+import { UnlayerDesignFormat, UnlayerDesignTool } from './unlayer-interface';
+
+/* eslint-disable @typescript-eslint/naming-convention */
+export const unlayerGetDefaultDesign = (): UnlayerDesignFormat => ({
+    counters: {
+        u_column: 1,
+        u_row: 1,
+        u_content_custom_generic_list_of_fields: 1,
+    },
+    body: {
+        rows: [
+            {
+                cells: [1],
+                columns: [
+                    {
+                        contents: [],
+                        values: {
+                            backgroundColor: '',
+                            padding: '0px',
+                            border: {},
+                            _meta: {
+                                htmlID: 'u_column_1',
+                                htmlClassNames: 'u_column',
+                            },
+                        },
+                    },
+                ],
+                values: {
+                    displayCondition: null,
+                    columns: false,
+                    backgroundColor: '',
+                    columnsBackgroundColor: '',
+                    backgroundImage: {
+                        url: '',
+                        fullWidth: true,
+                        repeat: false,
+                        center: true,
+                        cover: false,
+                    },
+                    padding: '0px',
+                    hideDesktop: false,
+                    hideMobile: false,
+                    noStackMobile: false,
+                    _meta: {
+                        htmlID: 'u_row_1',
+                        htmlClassNames: 'u_row',
+                    },
+                    selectable: true,
+                    draggable: true,
+                    duplicatable: true,
+                    deletable: true,
+                },
+            },
+        ],
+        values: {
+            backgroundColor: 'rgba(0,0,0,0)',
+            backgroundImage: {
+                url: '',
+                fullWidth: true,
+                repeat: false,
+                center: true,
+                cover: false,
+            },
+            contentWidth: '100%',
+            contentAlign: 'center',
+            fontFamily: {
+                label: 'Arial',
+                value: 'arial,helvetica,sans-serif',
+            },
+            preheaderText: '',
+            linkStyle: {
+                body: true,
+                linkColor: '#0000ee',
+                linkHoverColor: '#0000ee',
+                linkUnderline: true,
+                linkHoverUnderline: true,
+            },
+            _meta: {
+                htmlID: 'u_body',
+                htmlClassNames: 'u_body',
+            },
+        },
+    },
+    schemaVersion: versions.schema,
+});
+/* eslint-enable @typescript-eslint/naming-convention */
+
+export const unlayerToolsIterate = (
+    design: UnlayerDesignFormat,
+    cb: (tool: UnlayerDesignTool) => boolean | undefined | void
+) => {
+    for (const row of design?.body?.rows ?? []) {
+        for (const column of row.columns) {
+            for (const content of column.contents) {
+                if (cb(content) === false) {
+                    return;
+                }
+            }
+        }
+    }
+};
+
+export const unlayerToolsIterateCustom = (
+    design: UnlayerDesignFormat,
+    cb: (tool: UnlayerDesignTool) => boolean | undefined | void
+) => {
+    unlayerToolsIterate(design, tool => {
+        if (tool.type === 'custom') {
+            return cb(tool);
+        }
+    });
+};
+
+export const unlayerToolsListCustomKeys = (design: UnlayerDesignFormat): string[] => {
+    return Array.from(new Set(unlayerToolsListCustom(design).map(tool => tool.slug)));
+};
+
+export const unlayerToolsFind = (
+    design: UnlayerDesignFormat,
+    cb: (tool: UnlayerDesignTool) => boolean | void
+): UnlayerDesignTool | undefined => {
+    let out: UnlayerDesignTool | undefined;
+
+    unlayerToolsIterate(design, tool => {
+        if (cb(tool)) {
+            out = tool;
+            return false;
+        }
+    });
+
+    return out;
+};
+
+export interface UnlayerCustomToolsStat {
+    counters: Record<string, number>;
+    missing: string[];
+    notSupported: string[];
+}
+
+export const unlayerToolsCustomStat = (
+    design: UnlayerDesignFormat,
+    tools?: { key: string; isRequired?: boolean }[],
+    units?: { id: string; generic: string; isRequired?: boolean }[]
+): UnlayerCustomToolsStat => {
+    const counters: Record<string, number> = {};
+    const notSupported = new Set<string>();
+    const unitIDs = new Set<string>();
+
+    unlayerToolsIterateCustom(design, tool => {
+        if (!counters[tool.slug]) {
+            counters[tool.slug] = 0;
+        }
+
+        counters[tool.slug]++;
+
+        const isUnit = unlayerUnitsParseToolKey(tool.slug);
+
+        if (isUnit) {
+            unitIDs.add(isUnit.id);
+        }
+
+        if (
+            (isUnit && !units?.some(unit => unit.id === isUnit.id)) ||
+            (!isUnit && !tools?.some(t => t.key === tool.slug))
+        ) {
+            notSupported.add(tool.slug);
+        }
+    });
+
+    return {
+        counters,
+        notSupported: Array.from(notSupported),
+
+        missing: [
+            ...(tools
+                ?.filter(tool => tool.isRequired && !counters[tool.key])
+                .map(tool => tool.key) ?? []),
+            ...(units
+                ?.filter(unit => unit.isRequired && !unitIDs.has(unit.id))
+                .map(unit => unit.id) ?? []),
+        ],
+    };
+};
+
+export const unlayerToolsListCustom = (design: UnlayerDesignFormat): UnlayerDesignTool[] => {
+    const tools: UnlayerDesignTool[] = [];
+
+    unlayerToolsIterateCustom(design, tool => {
+        tools.push(tool);
+    });
+
+    return tools;
+};
+
+export const unlayerToolsBuildDesign = (tools: UnlayerDesignTool[]): UnlayerDesignFormat => {
+    const design = unlayerGetDefaultDesign();
+
+    design.body.rows[0].columns[0].contents = tools;
+    return design;
+};
+
+export const unlayerUnitsGetIdFromValues = (values?: any): string | undefined =>
+    values?.[constGenericsEditor.adminConfigProperty]?.crossId;
+export const unlayerUnitsGetTitleFromValues = (values?: any): string | undefined =>
+    values?.[constGenericsEditor.adminConfigProperty]?.title;
+
+export const unlayerUnitsGetId = (tool: UnlayerDesignTool): string | undefined =>
+    unlayerUnitsGetIdFromValues(tool.values);
+export const unlayerUnitsGetTitle = (tool: UnlayerDesignTool): string | undefined =>
+    unlayerUnitsGetTitleFromValues(tool.values);

package/src/unlayer-interface.tsx

@@ -0,0 +1,71 @@
+import { UnlayerCoreApi } from './api-core';
+import { SchemaObject } from './shared/schema';
+
+export interface UnlayerDesignTool {
+    type: string;
+    slug: string;
+    values: any;
+}
+
+export interface UnlayerDesignFormat {
+    body: {
+        rows: {
+            cells: number[];
+            columns: {
+                contents: UnlayerDesignTool[];
+                values?: any;
+            }[];
+            values?: any;
+        }[];
+        values?: any;
+    };
+    counters: Record<string, number>;
+    schemaVersion: number;
+}
+
+export interface UnlayerExport {
+    html: string;
+    chunks: any;
+    design: UnlayerDesignFormat;
+}
+
+export interface UnlayerRef {
+    loadDesign(design: any): void;
+    saveDesign(cb: (design: any) => void): void;
+    exportHtml(cb: (data: UnlayerExport) => void): void;
+}
+
+export interface UnlayerEditorMergeTagInfo {
+    id: string;
+    name: string;
+    propertyPath: string;
+}
+
+export interface UnlayerEditorUnit {
+    id: string;
+    generic: string;
+    title: string;
+    values: any;
+}
+
+export interface UnlayerEditorCustomTool {
+    key: string;
+    title: string;
+    path: string;
+}
+
+export interface CreateUnlayerEditorProps {
+    tools: UnlayerEditorCustomTool[];
+    dummyData?: any;
+    schema?: SchemaObject;
+    customCSS?: string | string[] | undefined;
+    customJS?: string | string[] | undefined;
+    mergeTags?: UnlayerEditorMergeTagInfo[] | undefined;
+    genericConfigMode?: boolean;
+    generics?: true | string[];
+    units?: UnlayerEditorUnit[];
+    noCoreTools?: boolean;
+    latest?: boolean;
+    blocks?: boolean;
+    coreApi: UnlayerCoreApi;
+}

package/src/unlayer.tsx

@@ -0,0 +1,176 @@
+import { constGenericsEditor } from './shared/const';
+import { unlayerSupportedFonts } from './shared/fonts';
+import { CreateUnlayerEditorProps } from './unlayer-interface';
+
+export interface UnlayerExport {
+    html: string;
+    chunks: any;
+    design: any;
+}
+
+export interface Unlayer {
+    addEventListener(event: string, cb: (arg: any) => void): void;
+    removeEventListener(event: string, cb: (arg: any) => void): void;
+    registerCallback(type: string, cb: (...args: any[]) => void): void;
+    unregisterCallback(type: string, cb: (...args: any[]) => void): void;
+    registerProvider(type: string, cb: (...args: any[]) => void): void;
+    unregisterProvider(type: string, cb: (...args: any[]) => void): void;
+    loadDesign(design: any): void;
+    saveDesign(callback: (design: any) => void): void;
+    exportHtml(callback: (data: UnlayerExport) => void): void;
+    setMergeTags(tags: any): void;
+    createViewer(opts: { render: (values: any) => string }): any;
+    registerTool(tool: any): void;
+    setBodyValues(values: any): void;
+}
+
+export enum DesignUpdatedEventType {
+    ContentAdded = 'content:added',
+    ContentMoved = 'content:moved',
+    ContentRemoved = 'content:removed',
+    ContentModified = 'content:modified',
+    RowAdded = 'row:added',
+    RowMoved = 'row:moved',
+    RowRemoved = 'row:removed',
+    RowModified = 'row:modified',
+    ColumnAdded = 'column:added',
+    ColumnRemoved = 'column:removed',
+    ColumnModified = 'column:modified',
+    BodyModified = 'body:modified',
+}
+
+export interface EventDesignUpdated {
+    type: DesignUpdatedEventType;
+    item: {
+        type: string;
+        slug?: string;
+        values: any;
+    };
+}
+
+/**
+ * !!! IMPORTANT !!!
+ * do not forget to update schema version when updating unlayer version
+ * it is important for templates export and should be in sync
+ * to know correct schema version, open unlayer editor and check output design ('schema' property)
+ */
+export const versions = {
+    unlayer: '1.2.9',
+    schema: 5,
+};
+
+export const createUnlayerEditor = (
+    container: HTMLDivElement,
+    {
+        coreApi,
+        customCSS,
+        customJS,
+        latest,
+        mergeTags,
+        noCoreTools,
+        tools,
+        units,
+    }: CreateUnlayerEditorProps
+): Unlayer => {
+    const customScripts = [
+        ...coreApi.pathsCore,
+        ...coreApi.pathsCoreTools,
+        'window.dteStore.sendData("--core-loaded")',
+        ...tools.map(tool => tool.path),
+        ...(customJS ? (Array.isArray(customJS) ? customJS : [customJS]) : []),
+        'window.dteStore.sendData("--data-loaded")',
+    ].filter(js => !!js?.trim());
+    const customStyles = [
+        coreApi.customCss,
+        ...(customCSS ? (Array.isArray(customCSS) ? customCSS : [customCSS]) : []),
+    ].filter(css => !!css?.trim());
+
+    console.log('###unlayer init', customScripts, customStyles);
+    /**
+     * Unlayer supports only passing id of container, but when we use shadowDOM (MFE),
+     * getElementById can't find element in it
+     * so making this dirty hack to let unlayer find container in DOM
+     */
+    const id = container.id;
+    const currentFind = document.getElementById;
+    document.getElementById = function (elementId: string) {
+        if (id === elementId) {
+            return container;
+        }
+
+        return currentFind.call(document, id);
+    };
+
+    const acv = constGenericsEditor.adminConfigProperty;
+    const unitsConfig = (units ?? []).reduce((out, unit) => {
+        out[`custom#${unit.generic}:unit:${unit.id}`] = {
+            data: {
+                [acv]: unit.values[acv],
+            },
+            properties: {
+                [constGenericsEditor.userConfigProperty]: {
+                    editor: {
+                        data: { [acv]: unit.values[acv] },
+                    },
+                },
+                [constGenericsEditor.infoDataProperty]: {
+                    editor: {
+                        data: { title: unit.title },
+                    },
+                },
+            },
+        };
+        return out;
+    }, {} as Record<string, any>);
+
+    const result = (window as any).unlayer.createEditor({
+        displayMode: 'web',
+        devices: ['desktop'],
+        features: {
+            preview: false,
+            userUploads: false,
+            stockImages: false,
+        },
+        mergeTags: mergeTags?.reduce((out, tag) => {
+            out[tag.id] = { name: tag.name, value: tag.propertyPath };
+
+            return out;
+        }, {} as Record<string, { name: string; value: string }>),
+        projectId: 5713,
+        version: latest ? undefined : versions.unlayer,
+        tools: {
+            button: { enabled: false },
+            html: { enabled: false },
+            menu: { enabled: false },
+            form: { enabled: false },
+            image: { enabled: false },
+            ...(noCoreTools
+                ? {
+                      columns: { enabled: false },
+                      text: { enabled: false },
+                      heading: { enabled: false },
+                      divider: { enabled: false },
+                  }
+                : {}),
+            ...unitsConfig,
+        },
+        editor: {
+            autoSelectOnDrop: true,
+        },
+        customJS: customScripts,
+        customCSS: customStyles,
+        id,
+        fonts: {
+            showDefaultFonts: false,
+            customFonts: unlayerSupportedFonts,
+        },
+        tabs: {
+            content: {},
+            body: {},
+            blocks: { enabled: false },
+        },
+    });
+
+    document.getElementById = currentFind;
+    return result;
+};