@servicetitan/dte-unlayer 0.0.1-test1

package/src/api-custom-tools.ts

@@ -0,0 +1,79 @@
+import { loadScript } from './loadScript';
+import { UnlayerEditorCustomTool } from './unlayer-interface';
+
+export interface UnlayerCustomToolsPackageData {
+    packageUrl: string;
+    customTools: UnlayerEditorCustomTool[];
+}
+
+export class UnlayerCustomToolsApi {
+    private dataInternal?: UnlayerCustomToolsPackageData;
+    private loaded = new Set<string>();
+    private schemas?: Record<string, any>;
+
+    constructor(private packageUrl: string) {}
+
+    get data() {
+        return this.dataInternal!;
+    }
+
+    async init() {
+        await fetch(`${this.packageUrl}/data.json`)
+            .then(response =>
+                response
+                    .json()
+                    .then(data => ({ ...data, packageUrl: response.url.replace('/data.json', '') }))
+            )
+            .then(({ packageUrl, tools }) => ({
+                customTools: tools.map((tool: any) => ({
+                    key: tool.key,
+                    title: tool.title,
+                    path: `${packageUrl}/${tool.path}`,
+                })),
+                packageUrl,
+            }))
+            .then(data => {
+                this.dataInternal = data;
+            });
+    }
+
+    clean() {
+        this.dataInternal = undefined;
+        this.loaded = new Set();
+        this.schemas = undefined;
+    }
+
+    async loadSchemas(): Promise<Record<string, any>> {
+        if (this.schemas) {
+            return this.schemas;
+        }
+
+        return fetch(`${this.data.packageUrl}/schemas.json`)
+            .then(response => response.json())
+            .then(schemas => {
+                this.schemas = schemas;
+
+                return schemas;
+            });
+    }
+
+    async preloadCustomTools(tools: string[]) {
+        if (!this.dataInternal) {
+            return;
+        }
+        const toolsMap = this.data.customTools.reduce((out, t) => {
+            out[t.key] = t.path;
+
+            return out;
+        }, {} as Record<string, string>);
+
+        await Promise.all(
+            tools
+                .filter(t => !!toolsMap[t] && !this.loaded.has(t))
+                .map(t => {
+                    this.loaded.add(t);
+                    return loadScript(this.data.packageUrl + '/' + toolsMap[t]).catch(() => null);
+                })
+        );
+    }
+}

package/src/editor.tsx

@@ -0,0 +1,87 @@
+import {
+    CSSProperties,
+    forwardRef,
+    useEffect,
+    useImperativeHandle,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import { UnlayerStore, UnlayerDesignChangeInfo } from './store';
+import { UnlayerRef, CreateUnlayerEditorProps } from './unlayer-interface';
+
+export interface UnlayerEditorProps {
+    id?: string;
+    design?: any;
+    opts: CreateUnlayerEditorProps;
+    minHeight?: number;
+    style?: CSSProperties;
+    onReady?(): void;
+    onChange?(info: UnlayerDesignChangeInfo): void;
+    onImage?(file: File): 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) {
+            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,11 @@
+export * from './editor';
+export * from './tools';
+export * from './api-core';
+export * from './api-custom-tools';
+export * from './unlayer-interface';
+export * from './loadScript';
+export * from './shared/const';
+export * from './shared/schema';
+export * from './shared/tools';
+export { UnlayerDesignChangeInfo } from './store';
+export { versions } from './unlayer';

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/shared/const.ts

@@ -0,0 +1,30 @@
+import { SchemaObject } from './schema';
+
+export const constGenericsEditor = {
+    infoDataProperty: '_info',
+    adminConfigProperty: 'adminConfig',
+    userConfigProperty: 'config',
+};
+
+export interface IUnlayerEditorUnit {
+    id: string;
+    generic: string;
+    title: string;
+    values: any;
+}
+
+export interface UnlayerEventConfig {
+    dummyData?: any;
+    schema?: SchemaObject;
+    generics?: true | string[];
+    genericConfigMode?: boolean;
+    units?: IUnlayerEditorUnit[];
+}
+
+export interface UnlayerEventRegister {
+    units?: IUnlayerEditorUnit[];
+    customTools?: {
+        key: string;
+        title?: string;
+    }[];
+}

package/src/shared/fonts.ts

@@ -0,0 +1,126 @@
+export const unlayerSupportedFonts = [
+    {
+        label: 'Andale Mono',
+        value: 'andale mono,times',
+    },
+    {
+        label: 'Arial',
+        value: 'arial,helvetica,sans-serif',
+    },
+    {
+        label: 'Arial Black',
+        value: 'arial black,avant garde,arial',
+    },
+    {
+        label: 'Book Antiqua',
+        value: 'book antiqua,palatino',
+    },
+    {
+        label: 'Comic Sans MS',
+        value: 'comic sans ms,sans-serif',
+    },
+    {
+        label: 'Courier New',
+        value: 'courier new,courier',
+    },
+    {
+        label: 'Georgia',
+        value: 'georgia,palatino',
+    },
+    {
+        label: 'Helvetica',
+        value: 'helvetica,sans-serif',
+    },
+    {
+        label: 'Impact',
+        value: 'impact,chicago',
+    },
+    {
+        label: 'Symbol',
+        value: 'symbol',
+    },
+    {
+        label: 'Tahoma',
+        value: 'tahoma,arial,helvetica,sans-serif',
+    },
+    {
+        label: 'Terminal',
+        value: 'terminal,monaco',
+    },
+    {
+        label: 'Times New Roman',
+        value: 'times new roman,times',
+    },
+    {
+        label: 'Trebuchet MS',
+        value: 'trebuchet ms,geneva',
+    },
+    {
+        label: 'Verdana',
+        value: 'verdana,geneva',
+    },
+    {
+        label: 'Lobster Two',
+        value: "'Lobster Two',cursive",
+        url: 'https://fonts.googleapis.com/css?family=Lobster+Two:400,700',
+    },
+    {
+        label: 'Playfair Display',
+        value: "'Playfair Display',serif",
+        url: 'https://fonts.googleapis.com/css?family=Playfair+Display:400,700',
+    },
+    {
+        label: 'Rubik',
+        value: "'Rubik',sans-serif",
+        url: 'https://fonts.googleapis.com/css?family=Rubik:400,700',
+    },
+    {
+        label: 'Source Sans Pro',
+        value: "'Source Sans Pro',sans-serif",
+        url: 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700',
+    },
+    {
+        label: 'Open Sans',
+        value: "'Open Sans',sans-serif",
+        url: 'https://fonts.googleapis.com/css?family=Open+Sans:400,700',
+    },
+    {
+        label: 'Crimson Text',
+        value: "'Crimson Text',serif",
+        url: 'https://fonts.googleapis.com/css?family=Crimson+Text:400,700',
+    },
+    {
+        label: 'Montserrat',
+        value: "'Montserrat',sans-serif",
+        url: 'https://fonts.googleapis.com/css?family=Montserrat:400,700',
+    },
+    {
+        label: 'Old Standard TT',
+        value: "'Old Standard TT',serif",
+        url: 'https://fonts.googleapis.com/css?family=Old+Standard+TT:400,700',
+    },
+    {
+        label: 'Lato',
+        value: "'Lato',sans-serif",
+        url: 'https://fonts.googleapis.com/css?family=Lato:400,700',
+    },
+    {
+        label: 'Raleway',
+        value: "'Raleway',sans-serif",
+        url: 'https://fonts.googleapis.com/css?family=Raleway:400,700',
+    },
+    {
+        label: 'Cabin',
+        value: "'Cabin',sans-serif",
+        url: 'https://fonts.googleapis.com/css?family=Cabin:400,700',
+    },
+    {
+        label: 'Pacifico',
+        value: "'Pacifico',cursive",
+        url: 'https://fonts.googleapis.com/css?family=Pacifico',
+    },
+    // custom DTE fonts
+    { label: 'Sofia Pro', value: 'Sofia Pro' },
+    { label: 'Nunito Sans', value: 'Nunito Sans' },
+    { label: 'Montserrat', value: 'Montserrat' },
+];

package/src/shared/schema.ts

@@ -0,0 +1,190 @@
+export type SchemaNodeAvailableTypes = 'object' | 'array' | 'string';
+export const schemaNodeAvailableTypes = ['object', 'array', 'string'];
+
+export type SchemaNodeStringSubTypes = 'string' | 'text' | 'html';
+export const schemaNodeStringSubTypes = ['string', 'text', 'html'];
+
+export const schemaIsAvailableType = (type: string): type is SchemaNodeAvailableTypes =>
+    schemaNodeAvailableTypes.includes(type);
+
+export interface SchemaFieldBaseOptions {
+    placeholder?: any;
+}
+
+interface SchemaNodeProps {
+    title?: string;
+    options?: SchemaFieldBaseOptions;
+}
+
+export interface SchemaObject extends SchemaNodeProps {
+    type: 'object';
+    properties: Record<string, SchemaNode>;
+}
+
+export interface SchemaArray extends SchemaNodeProps {
+    type: 'array';
+    items: SchemaNode;
+}
+
+export interface SchemaSimpleString extends SchemaNodeProps {
+    type: 'string';
+    subType?: SchemaNodeStringSubTypes;
+}
+
+export type SchemaSimple = SchemaSimpleString;
+
+export const schemaArrayRootKey = '[]';
+export type SchemaNode = SchemaObject | SchemaArray | SchemaSimple;
+
+export const schemaIsObject = (node?: SchemaNode): node is SchemaObject => node?.type === 'object';
+export const schemaIsArray = (node?: SchemaNode): node is SchemaArray => node?.type === 'array';
+export const schemaIsString = (node?: SchemaNode): node is SchemaSimpleString =>
+    node?.type === 'string';
+export const schemaIsStringHtml = (node?: SchemaNode): node is SchemaSimpleString =>
+    node?.type === 'string' && node?.subType === 'html';
+
+export const schemaFindNode = (schema: SchemaNode, key: string): SchemaNode | undefined => {
+    const nodeFinder = (node: SchemaNode, keys: string[]): SchemaNode | undefined => {
+        if (!node) {
+            return undefined;
+        }
+
+        if (!keys.length) {
+            return node;
+        }
+
+        const key = keys.shift();
+
+        if (!key) {
+            return undefined;
+        }
+
+        if (key === schemaArrayRootKey) {
+            return schemaIsArray(node) ? nodeFinder(node.items, keys) : undefined;
+        }
+
+        return schemaIsObject(node) ? nodeFinder(node.properties[key], keys) : undefined;
+    };
+
+    return nodeFinder(schema, key.split('.'));
+};
+
+export const schemaFindParentNode = (schema: SchemaNode, key: string): SchemaNode | undefined => {
+    const keys = key.split('.');
+
+    keys.pop();
+
+    return keys.length
+        ? schemaFindNode(schema, keys.join('.'))
+        : schemaIsObject(schema) && schema.properties[key]
+        ? schema
+        : undefined;
+};
+
+export const schemaGetFieldKey = (fullKey: string): string => fullKey.split('.').pop() ?? '';
+
+export const schemaBuildNode = (
+    type: SchemaNodeAvailableTypes,
+    arrayItemType?: SchemaNodeAvailableTypes
+): SchemaNode => {
+    if (type === 'object') {
+        return { type: 'object', properties: {}, options: {} };
+    }
+    if (type === 'array') {
+        return { type: 'array', items: schemaBuildNode(arrayItemType ?? 'object'), options: {} };
+    }
+
+    return { type, options: {} };
+};
+
+export interface SchemaMetaField {
+    fieldKey: string;
+    fullKey: string;
+    node: SchemaNode;
+    title: string; // node.title or fullTitle
+    fullTitle: string; // joined title of all parents and field
+    isArrayed: boolean;
+    isValue: boolean;
+}
+
+export type SchemaMap = Record<string, SchemaMetaField>;
+
+export const schemaBuildMap = (schema: SchemaObject): { map: SchemaMap; dummyData: any } => {
+    const fieldsMap: Record<string, SchemaMetaField> = {};
+    const dummyData: any = {};
+
+    const processNode = (
+        node: SchemaNode,
+        nodeKey: string,
+        parentNodes: { key: string; title: string }[],
+        isArrayed: boolean,
+        dummyDataNode: any
+    ) => {
+        const nodeLabel = node.title ?? nodeKey;
+        const isArrayRoot = nodeKey === schemaArrayRootKey;
+
+        if (nodeKey) {
+            const fullKey = [...parentNodes.map(n => n.key), nodeKey].join('.');
+            const fullTitle = [...parentNodes.map(n => n.title), nodeLabel].join(' - ');
+
+            fieldsMap[fullKey] = {
+                fieldKey: nodeKey,
+                fullKey,
+                fullTitle,
+                title: node.title ?? fullTitle,
+                node,
+                isArrayed,
+                isValue: !schemaIsObject(node) && !schemaIsArray(node),
+            };
+        }
+
+        if (schemaIsObject(node)) {
+            const properties = node.properties ?? {};
+            const keys = Object.keys(properties ?? {}).sort();
+            let dummyDataObject = {};
+
+            if (isArrayRoot) {
+                dummyDataNode.push?.(dummyDataObject);
+            } else if (nodeKey) {
+                dummyDataNode[nodeKey] = dummyDataObject;
+            } else {
+                dummyDataObject = dummyDataNode;
+            }
+
+            for (const key of keys) {
+                processNode(
+                    properties[key],
+                    key,
+                    nodeKey ? [...parentNodes, { key: nodeKey, title: nodeLabel }] : [],
+                    isArrayed,
+                    dummyDataObject
+                );
+            }
+        } else if (schemaIsArray(node)) {
+            const items = node.items ?? {};
+
+            dummyDataNode[nodeKey] = [];
+            processNode(
+                items,
+                schemaArrayRootKey,
+                nodeKey ? [...parentNodes, { key: nodeKey, title: nodeLabel }] : [],
+                true,
+                dummyDataNode[nodeKey]
+            );
+        } else if (nodeKey) {
+            const placeholder = node?.options?.placeholder;
+
+            if (placeholder !== undefined) {
+                if (isArrayRoot) {
+                    dummyDataNode.push?.(placeholder);
+                } else {
+                    dummyDataNode[nodeKey] = placeholder;
+                }
+            }
+        }
+    };
+
+    processNode(schema, '', [], false, dummyData);
+
+    return { map: fieldsMap, dummyData };
+};

package/src/shared/tools.ts

@@ -0,0 +1,18 @@
+export const unlayerUnitsGenerateToolKey = (unitId: string, unitGeneric: string) =>
+    `${unitGeneric}:unit:${unitId}`;
+
+export const unlayerUnitsParseToolKey = (
+    toolKey: string
+): { id: string; generic: string } | undefined => {
+    const [generic, type, id] = (toolKey ?? '').split(':');
+
+    if (type === 'unit' && generic && id) {
+        return { id, generic };
+    }
+};
+
+export interface UnlayerStore {
+    renderHtml(html: string, data: any): string;
+    sendData(type: string, data?: any): void;
+    getTool(key: string): { getModel(): object; dataSources(values?: any): string[] } | undefined;
+}