@servicetitan/dte-unlayer 0.34.0 → 0.35.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/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;

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

@@ -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],