@servicetitan/dte-unlayer 0.32.0 → 0.34.0

package/src/editor.tsx

@@ -7,6 +7,7 @@ import {
     useRef,
     useState,
 } from 'react';
+import { UnlayerEditorTwin } from './shared/const';
 import { UnlayerStore, UnlayerDesignChangeInfo } from './store';
 import { UnlayerRef, CreateUnlayerEditorProps } from './unlayer-interface';
 
@@ -16,9 +17,15 @@ export interface UnlayerEditorProps {
     opts: CreateUnlayerEditorProps;
     minHeight?: number;
     style?: CSSProperties;
+
     onReady?(): void;
+
     onChange?(info: UnlayerDesignChangeInfo): void;
+
+    onSnapshotSave?(tool: UnlayerEditorTwin): void;
+
     onImage?(file: File): Promise<{ url: string }>;
+
     onMessage?(type: string, data: any): void;
 }
 
@@ -58,6 +65,12 @@ export const UnlayerEditor = forwardRef<UnlayerRef, UnlayerEditorProps>((props,
         return () => store.setOnChange();
     }, [props.onChange, store]);
 
+    useEffect(() => {
+        store.setOnSnapshotSave(props.onSnapshotSave);
+
+        return () => store.setOnSnapshotSave();
+    }, [props.onSnapshotSave, store]);
+
     useEffect(() => {
         store.setOnReady(props.onReady);
 

package/src/store.ts

@@ -1,5 +1,5 @@
 import { loadScript } from './loadScript';
-import { UnlayerEventConfig, UnlayerEventRegister } from './shared/const';
+import { UnlayerEditorTwin, UnlayerEventConfig, UnlayerEventRegister } from './shared/const';
 import { unlayerToolsParseTwinKey } from './shared/tools';
 import { unlayerToolsIterate } from './tools';
 import {
@@ -43,6 +43,7 @@ export class UnlayerStore {
 
     private onMessageCB?: (type: string, data: any) => void;
     private onChangeCB?: (info: UnlayerDesignChangeInfo) => void;
+    private onSnapshotSaveCB?: (snapshot: UnlayerEditorTwin) => void;
     private onReadyCB?: () => void;
     private onImageCB?: (file: File) => Promise<{ url: string }>;
 
@@ -109,6 +110,10 @@ export class UnlayerStore {
         this.onChangeCB = onChange;
     };
 
+    setOnSnapshotSave = (onSnapshotSave?: UnlayerStore['onSnapshotSaveCB']) => {
+        this.onSnapshotSaveCB = onSnapshotSave;
+    };
+
     setOnReady = (onReady?: UnlayerStore['onReadyCB']) => {
         this.onReadyCB = onReady;
     };
@@ -205,6 +210,23 @@ export class UnlayerStore {
             };
 
             this.sendMessage('--register', JSON.parse(JSON.stringify(data)));
+        } else if (type === '--save-snapshot') {
+            this.editor?.exportHtml(template => {
+                unlayerToolsIterate(template.design, tool => {
+                    if (tool.values?.snapshot?.id === data.id) {
+                        if (!tool.slug) {
+                            return;
+                        }
+
+                        this.onSnapshotSaveCB?.({
+                            title: '',
+                            tool: tool.slug,
+                            values: tool.values,
+                        });
+                        return false;
+                    }
+                });
+            });
         }
 
         this.onMessageCB?.(type, data);

package/src/unlayer.tsx

@@ -1,6 +1,7 @@
 import { editorCoreScript, editorCoreStyles, editorCoreTools } from './editor-core';
-import { constGenericsEditor } from './shared/const';
+import { constGenericsEditor, UnlayerEditorUnit } from './shared/const';
 import { unlayerSupportedFonts } from './shared/fonts';
+import { unlayerToolsParseUnitKey } from './shared/tools';
 import { unlayerCustomToolsGetRegisterUrls } from './tools';
 import { CreateUnlayerEditorProps } from './unlayer-interface';
 
@@ -63,7 +64,16 @@ export const versions = {
 
 export const createUnlayerEditor = (
     container: HTMLDivElement,
-    { customCSS, customJS, latest, mergeTags, noCoreTools, tools, units }: CreateUnlayerEditorProps
+    {
+        customCSS,
+        customJS,
+        latest,
+        mergeTags,
+        noCoreTools,
+        toolTwins,
+        tools,
+        units,
+    }: CreateUnlayerEditorProps
 ): Unlayer => {
     const customScripts = [
         editorCoreScript,
@@ -94,7 +104,29 @@ export const createUnlayerEditor = (
     };
 
     const acv = constGenericsEditor.adminConfigProperty;
-    const unitsConfig = (units ?? []).reduce((out, unit) => {
+
+    const unitTwins = toolTwins?.reduce((out, twin) => {
+        const isUnit = unlayerToolsParseUnitKey(twin.tool);
+        if (isUnit && twin.values.snapshot.id) {
+            const originalUnit = units?.find(unit => unit.id === isUnit.id);
+            if (!originalUnit) {
+                return out;
+            }
+
+            const values = JSON.parse(JSON.stringify(twin.values));
+            values.adminConfig = originalUnit.values.adminConfig;
+
+            out.push({
+                id: twin.values.snapshot.id,
+                generic: isUnit.generic,
+                title: twin.title,
+                values,
+            });
+        }
+        return out;
+    }, [] as UnlayerEditorUnit[]);
+
+    const unitsConfig = [...(units ?? []), ...(unitTwins ?? [])].reduce((out, unit) => {
         out[`custom#${unit.generic}:unit:${unit.id}`] = {
             data: {
                 [acv]: unit.values[acv],