@servicetitan/dte-unlayer 0.34.0 → 0.36.0

package/src/editor.tsx

@@ -71,6 +71,12 @@ export const UnlayerEditor = forwardRef<UnlayerRef, UnlayerEditorProps>((props,
         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/const.ts

@@ -24,6 +24,7 @@ export interface UnlayerEventConfig {
     schema?: SchemaObject;
     generics?: true | string[];
     genericConfigMode?: boolean;
+    isSnapshotMode?: boolean;
     units?: UnlayerEditorUnit[];
 }
 

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

@@ -94,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;
@@ -154,7 +159,7 @@ export class UnlayerStore {
 
                         if (tool.slug) {
                             delete data.design.counters[`u_content_custom_${tool.slug}`];
-                            delete tool.values._meta;
+                            delete tool.values._meta.htmlID;
                         }
 
                         tool.type = realTool.type;
@@ -193,6 +198,7 @@ export class UnlayerStore {
                 schema: this.props.schema,
                 generics: this.props.generics,
                 genericConfigMode: this.props.genericConfigMode,
+                isSnapshotMode: this.props.isSnapshotMode,
             };
 
             this.sendMessage('--config', JSON.parse(JSON.stringify(data)));

package/src/unlayer-interface.tsx

@@ -53,7 +53,9 @@ export interface UnlayerEditorCustomTool {
 
 export interface CreateUnlayerEditorProps {
     tools: UnlayerEditorCustomTool[];
+    newSnapshot?: UnlayerEditorTwin;
     toolTwins?: UnlayerEditorTwin[];
+    isSnapshotMode?: boolean;
     dummyData?: any;
     schema?: SchemaObject;
     customCSS?: string | string[] | undefined;

package/src/unlayer.tsx

@@ -1,7 +1,6 @@
 import { editorCoreScript, editorCoreStyles, editorCoreTools } from './editor-core';
-import { constGenericsEditor, UnlayerEditorUnit } from './shared/const';
+import { constGenericsEditor } from './shared/const';
 import { unlayerSupportedFonts } from './shared/fonts';
-import { unlayerToolsParseUnitKey } from './shared/tools';
 import { unlayerCustomToolsGetRegisterUrls } from './tools';
 import { CreateUnlayerEditorProps } from './unlayer-interface';
 
@@ -64,16 +63,7 @@ export const versions = {
 
 export const createUnlayerEditor = (
     container: HTMLDivElement,
-    {
-        customCSS,
-        customJS,
-        latest,
-        mergeTags,
-        noCoreTools,
-        toolTwins,
-        tools,
-        units,
-    }: CreateUnlayerEditorProps
+    { customCSS, customJS, latest, mergeTags, noCoreTools, tools, units }: CreateUnlayerEditorProps
 ): Unlayer => {
     const customScripts = [
         editorCoreScript,
@@ -105,28 +95,7 @@ export const createUnlayerEditor = (
 
     const acv = constGenericsEditor.adminConfigProperty;
 
-    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) => {
+    const unitsConfig = (units ?? []).reduce((out, unit) => {
         out[`custom#${unit.generic}:unit:${unit.id}`] = {
             data: {
                 [acv]: unit.values[acv],