@servicetitan/dte-unlayer 0.33.0 → 0.35.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,18 @@ 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(() => {
+        if (props.opts.newSnapshot) {
+            store.addTwin(props.opts.newSnapshot);
+        }
+    }, [props.opts.newSnapshot, store]);
+
     useEffect(() => {
         store.setOnReady(props.onReady);
 

package/src/shared/tools.ts

@@ -12,12 +12,12 @@ export const unlayerToolsParseUnitKey = (
 };
 
 export const unlayerToolsGenerateTwinKey = (toolType: string, toolSlug?: string) =>
-    `:twin:${toolType}:${toolSlug ?? ''}:${Date.now()}${Math.round(Math.random() * 10000)}`;
+    `|twin|${toolType}|${toolSlug ?? ''}|${Date.now()}${Math.round(Math.random() * 10000)}`;
 
 export const unlayerToolsParseTwinKey = (
     toolKey: string
 ): { type: string; slug?: string } | undefined => {
-    const [, twin, type, slug] = (toolKey ?? '').split(':');
+    const [, twin, type, slug] = (toolKey ?? '').split('|');
 
     if (twin === 'twin' && type) {
         return { type, slug: slug || undefined };

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 }>;
 
@@ -93,6 +94,11 @@ export class UnlayerStore {
         }
     };
 
+    addTwin = (twin: UnlayerEditorTwin) => {
+        this.props.toolTwins?.push(twin);
+        this.sendMessage('--add-twin', JSON.parse(JSON.stringify(twin)));
+    };
+
     setDesign = (design?: UnlayerDesignFormat) => {
         if (!this.editor) {
             return;
@@ -109,6 +115,10 @@ export class UnlayerStore {
         this.onChangeCB = onChange;
     };
 
+    setOnSnapshotSave = (onSnapshotSave?: UnlayerStore['onSnapshotSaveCB']) => {
+        this.onSnapshotSaveCB = onSnapshotSave;
+    };
+
     setOnReady = (onReady?: UnlayerStore['onReadyCB']) => {
         this.onReadyCB = onReady;
     };
@@ -205,6 +215,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-interface.tsx

@@ -53,6 +53,7 @@ export interface UnlayerEditorCustomTool {
 
 export interface CreateUnlayerEditorProps {
     tools: UnlayerEditorCustomTool[];
+    newSnapshot?: UnlayerEditorTwin;
     toolTwins?: UnlayerEditorTwin[];
     dummyData?: any;
     schema?: SchemaObject;

package/src/unlayer.tsx

@@ -94,6 +94,7 @@ export const createUnlayerEditor = (
     };
 
     const acv = constGenericsEditor.adminConfigProperty;
+
     const unitsConfig = (units ?? []).reduce((out, unit) => {
         out[`custom#${unit.generic}:unit:${unit.id}`] = {
             data: {