@servicetitan/dte-unlayer 0.0.1

package/dist/unlayer.js

@@ -0,0 +1,73 @@
+export var DesignUpdatedEventType;
+(function (DesignUpdatedEventType) {
+    DesignUpdatedEventType["ContentRemoved"] = "content:removed";
+    DesignUpdatedEventType["ContentAdded"] = "content:added";
+})(DesignUpdatedEventType || (DesignUpdatedEventType = {}));
+export const createUnlayerEditor = (container, { customCSS, customJS, latest, mergeTags, noCoreTools, packageUrl, tools, }) => {
+    const customScripts = [
+        '/core.bundle.js',
+        ...tools.map(tool => `/${tool.path}`),
+        tools.map(tool => `window.dteStore.registerTool(unlayer, '${tool.key}');`).join('\n'),
+        ...(customJS ? (Array.isArray(customJS) ? customJS : [customJS]) : []),
+        '/anvilfonts.bundle.js',
+        'window.dteStore.sendData("ready")',
+    ].map(url => (url.startsWith('/') ? `${packageUrl}${url}` : url));
+    /**
+     * 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) {
+        if (id === elementId) {
+            return container;
+        }
+        return currentFind.call(document, id);
+    };
+    const result = window.unlayer.createEditor({
+        displayMode: 'web',
+        devices: ['desktop'],
+        features: {
+            preview: false,
+            userUploads: false,
+            stockImages: false,
+        },
+        mergeTags: mergeTags === null || mergeTags === void 0 ? void 0 : mergeTags.reduce((out, tag) => {
+            out[tag.id] = { name: tag.name, value: tag.propertyPath };
+            return out;
+        }, {}),
+        projectId: 5713,
+        version: latest ? undefined : '1.2.9',
+        tools: Object.assign({ 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 },
+            }
+            : {})),
+        editor: {
+            autoSelectOnDrop: true,
+        },
+        customJS: customScripts,
+        customCSS: [customCSS],
+        id,
+        fonts: {
+            showDefaultFonts: true,
+            customFonts: [
+                { label: 'Sofia Pro', value: 'Sofia Pro' },
+                { label: 'Nunito Sans', value: 'Nunito Sans' },
+                { label: 'Montserrat', value: 'Montserrat' },
+            ],
+        },
+        tabs: {
+            content: {},
+            body: {},
+            blocks: { enabled: false },
+        },
+    });
+    document.getElementById = currentFind;
+    return result;
+};
+//# sourceMappingURL=unlayer.js.map

package/dist/unlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"unlayer.js","sourceRoot":"","sources":["../src/unlayer.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,19 @@
+{
+    "name": "@servicetitan/dte-unlayer",
+    "version": "0.0.1",
+    "description": "",
+    "main": "./dist/index.js",
+    "typings": "./dist/index.d.ts",
+    "files": [
+        "dist",
+        "src"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "cli": {
+        "webpack": false
+    },
+    "peerDependencies": {
+    }
+}

package/src/editor.tsx

@@ -0,0 +1,87 @@
+import {
+    CSSProperties,
+    forwardRef,
+    useEffect,
+    useImperativeHandle,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import { UnlayerStore, UnlayerToolsInfo } from './store';
+import { UnlayerRef, CreateUnlayerEditorProps } from './unlayer-interface';
+
+interface UnlayerEditorProps {
+    id?: string;
+    design: any;
+    opts: CreateUnlayerEditorProps;
+    minHeight?: number;
+    style?: CSSProperties;
+    onReady?(): void;
+    onChange?(info: UnlayerToolsInfo): void;
+    onImage?(file: any): Promise<{ url: string }>;
+    onMessage?(type: string, data: any): void;
+}
+
+export const useUnlayerRef = () => useRef<UnlayerRef | null>(null);
+
+export const UnlayerEditor = forwardRef<UnlayerRef, UnlayerEditorProps>((props, ref) => {
+    const [status, setStatus] = useState(0);
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const store = useMemo(
+        () => new UnlayerStore(props.opts),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        []
+    );
+    const isReady = status === 2;
+
+    useEffect(() => {
+        if (containerRef.current) {
+            store
+                .init(containerRef.current)
+                .then(() => setStatus(2))
+                .catch(() => setStatus(1));
+        }
+
+        return () => store.destroy();
+    }, [store]);
+    useImperativeHandle(ref, () => store.unlayerRef, [store]);
+
+    useEffect(() => {
+        if (isReady && props.design) {
+            store.setDesign(props.design);
+        }
+    }, [isReady, props.design, store]);
+
+    useEffect(() => {
+        store.setOnChange(props.onChange);
+
+        return () => store.setOnChange();
+    }, [props.onChange, store]);
+
+    useEffect(() => {
+        store.setOnReady(props.onReady);
+
+        return () => store.setOnReady();
+    }, [props.onReady, store]);
+
+    useEffect(() => {
+        store.setOnImage(props.onImage);
+
+        return () => store.setOnImage();
+    }, [props.onImage, store]);
+
+    useEffect(() => {
+        store.setOnMessage(props.onMessage);
+
+        return () => store.setOnMessage();
+    }, [props.onMessage, store]);
+
+    const { minHeight = 800, style = {} } = props;
+
+    return (
+        <div style={{ minHeight, display: 'flex' }}>
+            {status === 1 && <p className="c-red-500">error loading editor</p>}
+            <div id={props.id ?? 'editor'} style={style} ref={containerRef} />
+        </div>
+    );
+});

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './editor';
+export * from './tools';
+export * from './unlayer-interface';
+export * from './loadScript';

package/src/loadScript.ts

@@ -0,0 +1,27 @@
+const isScriptInjected = (scriptUrl: string) => {
+    const scripts = document.querySelectorAll('script');
+    let injected = false;
+
+    scripts.forEach(script => {
+        if (script.src.includes(scriptUrl)) {
+            injected = true;
+        }
+    });
+
+    return injected;
+};
+
+export const loadScript = (scriptUrl: string): Promise<void> => {
+    return new Promise<void>(resolve => {
+        if (isScriptInjected(scriptUrl)) {
+            resolve();
+        }
+
+        const embedScript = document.createElement('script');
+        embedScript.setAttribute('src', scriptUrl);
+        embedScript.onload = () => {
+            resolve();
+        };
+        document.head.appendChild(embedScript);
+    });
+};

package/src/store.ts

@@ -0,0 +1,217 @@
+import { loadScript } from './loadScript';
+import { unlayerIterateCustomTools } from './tools';
+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 UnlayerToolsInfo {
+    notSupported: string[];
+    required: string[];
+}
+
+export class UnlayerStore {
+    readonly unlayerRef: UnlayerRef;
+
+    private editor: Unlayer | undefined;
+    private isInit = false;
+    private iframe?: HTMLIFrameElement;
+
+    private onMessageCB?: (type: string, data: any) => void;
+    private onChangeCB?: (info: UnlayerToolsInfo) => void;
+    private onReadyCB?: (info: UnlayerToolsInfo) => void;
+    private onImageCB?: (file: any) => Promise<{ url: string }>;
+
+    private currentComponents: Record<string, number> = {};
+
+    constructor(readonly props: CreateUnlayerEditorProps) {
+        this.unlayerRef = {
+            loadDesign: design => {
+                this.editor?.loadDesign(design);
+            },
+            saveDesign: cb => {
+                this.editor?.saveDesign(cb);
+            },
+            exportHtml: cb => {
+                this.editor?.exportHtml(data => {
+                    if (this.props.altTools?.length) {
+                        unlayerIterateCustomTools(data.design, tool => {
+                            if (tool.slug.includes(':')) {
+                                tool.slug = tool.slug.split(':')[0];
+                            }
+                        });
+
+                        for (const key of Object.keys(data.design.counters ?? {})) {
+                            if (key.startsWith('u_content_custom_') && key.includes(':')) {
+                                data.design.counters[key.split(':')[0]] = data.design.counters[key];
+                                delete data.design.counters[key];
+                            }
+                        }
+                    }
+
+                    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.currentComponents = {};
+        unlayerIterateCustomTools(design, tool => {
+            if (!this.currentComponents[tool.slug]) {
+                this.currentComponents[tool.slug] = 0;
+            }
+
+            this.currentComponents[tool.slug]++;
+        });
+
+        this.editor.loadDesign(design);
+    };
+
+    setOnChange = (onChange?: (info: UnlayerToolsInfo) => void) => {
+        this.onChangeCB = onChange;
+    };
+
+    setOnReady = (onReady?: (info: UnlayerToolsInfo) => void) => {
+        this.onReadyCB = onReady;
+    };
+
+    setOnImage = (onImage?: UnlayerStore['onImageCB']) => {
+        this.onImageCB = onImage;
+    };
+
+    setOnMessage = (onMessage?: UnlayerStore['onMessageCB']) => {
+        this.onMessageCB = onMessage;
+    };
+
+    private onDesignLoaded = () => {
+        this.editor?.setBodyValues({
+            backgroundColor: 'rgba(0,0,0,0)',
+            contentWidth: '100%',
+        });
+    };
+
+    private onDesignUpdated = (data: EventDesignUpdated) => {
+        if (data.type === DesignUpdatedEventType.ContentRemoved) {
+            const tool = data.item.type === 'custom' ? data.item.slug : undefined;
+
+            if (tool && this.currentComponents[tool]) {
+                this.currentComponents[tool]--;
+
+                if (!this.currentComponents[tool]) {
+                    delete this.currentComponents[tool];
+                }
+            }
+        } else if (data.type === DesignUpdatedEventType.ContentAdded) {
+            const tool = data.item.type === 'custom' ? data.item.slug : undefined;
+
+            if (tool && this.currentComponents[tool]) {
+                if (!this.currentComponents[tool]) {
+                    this.currentComponents[tool] = 0;
+                }
+
+                this.currentComponents[tool]++;
+            }
+        }
+
+        this.onChangeCB?.(this.getToolsInfo());
+    };
+
+    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') {
+            this.onReadyCB?.(this.getToolsInfo());
+            this.sendMessage(
+                '--config',
+                JSON.parse(
+                    JSON.stringify({
+                        altTools: this.props.altTools ?? [],
+                    })
+                )
+            );
+        }
+
+        this.onMessageCB?.(type, data);
+    };
+
+    private sendMessage = (type: string, data?: any) => {
+        this.iframe?.contentWindow?.postMessage(
+            {
+                '-dte-message-to': {
+                    type,
+                    data,
+                },
+            },
+            '*'
+        );
+    };
+
+    private getToolsInfo = () => {
+        return {
+            notSupported: Object.keys(this.currentComponents).filter(
+                key => !this.props.tools.some(tool => tool.key === key)
+            ),
+            required: this.props.tools
+                .filter(tool => tool.isRequired && !this.currentComponents[tool.key])
+                .map(tool => tool.key),
+        };
+    };
+
+    private uploadImage = (file: any, done: (result: any) => void) => {
+        if (!this.onImageCB) {
+            throw new Error('image upload is not implemented');
+        }
+
+        this.onImageCB(file).then(({ url }) => done({ progress: 100, url }));
+    };
+}

package/src/tools.ts

@@ -0,0 +1,53 @@
+import { UnlayerDesignFormat, UnlayerDesignTool } from './unlayer-interface';
+
+export const unlayerIterateTools = (
+    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 unlayerIterateCustomTools = (
+    design: UnlayerDesignFormat,
+    cb: (tool: UnlayerDesignTool) => boolean | undefined | void
+) => {
+    unlayerIterateTools(design, tool => {
+        if (tool.type === 'custom') {
+            return cb(tool);
+        }
+    });
+};
+
+export const unlayerGetAllCustomTools = (design: UnlayerDesignFormat): string[] => {
+    const allTools = new Set<string>();
+
+    unlayerIterateCustomTools(design, tool => {
+        allTools.add(tool.slug);
+    });
+
+    return Array.from(allTools);
+};
+
+export const unlayerFindTool = (
+    design: UnlayerDesignFormat,
+    cb: (tool: UnlayerDesignTool) => boolean | void
+): UnlayerDesignTool | undefined => {
+    let out: UnlayerDesignTool | undefined;
+
+    unlayerIterateTools(design, tool => {
+        if (cb(tool)) {
+            out = tool;
+            return false;
+        }
+    });
+
+    return out;
+};

package/src/unlayer-interface.tsx

@@ -0,0 +1,61 @@
+export interface UnlayerDesignTool {
+    type: string;
+    slug: string;
+    values: any;
+}
+
+export interface UnlayerEditorToolInfo {
+    key: string;
+    path: string;
+    isRequired?: boolean;
+}
+
+export interface UnlayerDesignFormat {
+    body: {
+        rows: {
+            cells: number[];
+            columns: {
+                contents: UnlayerDesignTool[];
+            }[];
+        }[];
+    };
+    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 UnlayerAltTool {
+    id: string;
+    tool: string;
+    label: string;
+    values: any;
+}
+
+export interface UnlayerEditorMergeTagInfo {
+    id: string;
+    name: string;
+    propertyPath: string;
+}
+
+export interface CreateUnlayerEditorProps {
+    packageUrl: string;
+    tools: UnlayerEditorToolInfo[];
+    altTools?: UnlayerAltTool[];
+    customCSS?: string;
+    customJS?: string | string[] | undefined;
+    mergeTags?: UnlayerEditorMergeTagInfo[] | undefined;
+    noCoreTools?: boolean;
+    latest?: boolean;
+    blocks?: boolean;
+}

package/src/unlayer.tsx

@@ -0,0 +1,133 @@
+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 {
+    ContentRemoved = 'content:removed',
+    ContentAdded = 'content:added',
+}
+
+export interface EventDesignUpdated {
+    type: DesignUpdatedEventType;
+    item: {
+        type: string;
+        slug?: string;
+    };
+}
+
+export interface UnlayerEditorMergeTagInfo {
+    id: string;
+    name: string;
+    propertyPath: string;
+}
+
+export const createUnlayerEditor = (
+    container: HTMLDivElement,
+    {
+        customCSS,
+        customJS,
+        latest,
+        mergeTags,
+        noCoreTools,
+        packageUrl,
+        tools,
+    }: CreateUnlayerEditorProps
+): Unlayer => {
+    const customScripts = [
+        '/core.bundle.js',
+        ...tools.map(tool => `/${tool.path}`),
+        tools.map(tool => `window.dteStore.registerTool(unlayer, '${tool.key}');`).join('\n'),
+        ...(customJS ? (Array.isArray(customJS) ? customJS : [customJS]) : []),
+        '/anvilfonts.bundle.js',
+        'window.dteStore.sendData("ready")',
+    ].map(url => (url.startsWith('/') ? `${packageUrl}${url}` : url));
+
+    /**
+     * 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 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 : '1.2.9',
+        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 },
+                  }
+                : {}),
+        },
+        editor: {
+            autoSelectOnDrop: true,
+        },
+        customJS: customScripts,
+        customCSS: [customCSS],
+        id,
+        fonts: {
+            showDefaultFonts: true,
+            customFonts: [
+                { label: 'Sofia Pro', value: 'Sofia Pro' },
+                { label: 'Nunito Sans', value: 'Nunito Sans' },
+                { label: 'Montserrat', value: 'Montserrat' },
+            ],
+        },
+        tabs: {
+            content: {},
+            body: {},
+            blocks: { enabled: false },
+        },
+    });
+
+    document.getElementById = currentFind;
+    return result;
+};