@servicetitan/dte-unlayer 0.30.0 → 0.31.0

package/src/shared/const.ts

@@ -6,25 +6,32 @@ export const constGenericsEditor = {
     userConfigProperty: 'config',
 };
 
-export interface IUnlayerEditorUnit {
+export interface UnlayerEditorUnit {
     id: string;
     generic: string;
     title: string;
     values: any;
 }
 
+export interface UnlayerEditorTwin {
+    tool: string;
+    title: string;
+    values: any;
+}
+
 export interface UnlayerEventConfig {
     dummyData?: any;
     schema?: SchemaObject;
     generics?: true | string[];
     genericConfigMode?: boolean;
-    units?: IUnlayerEditorUnit[];
+    units?: UnlayerEditorUnit[];
 }
 
 export interface UnlayerEventRegister {
-    units?: IUnlayerEditorUnit[];
+    units?: UnlayerEditorUnit[];
     customTools?: {
         key: string;
         title?: string;
     }[];
+    toolTwins?: UnlayerEditorTwin[];
 }

package/src/shared/fonts.ts

@@ -1,64 +1,8 @@
 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",

package/src/shared/tools.ts

@@ -1,7 +1,7 @@
-export const unlayerUnitsGenerateToolKey = (unitId: string, unitGeneric: string) =>
+export const unlayerToolsGenerateUnitKey = (unitId: string, unitGeneric: string) =>
     `${unitGeneric}:unit:${unitId}`;
 
-export const unlayerUnitsParseToolKey = (
+export const unlayerToolsParseUnitKey = (
     toolKey: string
 ): { id: string; generic: string } | undefined => {
     const [generic, type, id] = (toolKey ?? '').split(':');
@@ -11,6 +11,19 @@ export const unlayerUnitsParseToolKey = (
     }
 };
 
+export const unlayerToolsGenerateTwinKey = (toolType: string, toolSlug?: string) =>
+    `: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(':');
+
+    if (twin === 'twin' && type) {
+        return { type, slug: slug || undefined };
+    }
+};
+
 export interface UnlayerStore {
     renderHtml(html: string, data: any): string;
     sendData(type: string, data?: any): void;

package/src/store.ts

@@ -1,5 +1,7 @@
 import { loadScript } from './loadScript';
 import { UnlayerEventConfig, UnlayerEventRegister } from './shared/const';
+import { unlayerToolsParseTwinKey } from './shared/tools';
+import { unlayerToolsIterate } from './tools';
 import {
     createUnlayerEditor,
     DesignUpdatedEventType,
@@ -12,9 +14,9 @@ const defaultScriptUrl = 'https://editor.unlayer.com/embed.js?2';
 
 export interface UnlayerDesignChangeInfo {
     isToolsListChanged: boolean;
-    event: any;
 }
 
+// We are using exclusive lists here, because we can't be sure that we know all unlayer event types
 const eventsNotChangingToolsList: DesignUpdatedEventType[] = [
     DesignUpdatedEventType.ContentMoved,
     DesignUpdatedEventType.ContentModified,
@@ -24,6 +26,13 @@ const eventsNotChangingToolsList: DesignUpdatedEventType[] = [
     DesignUpdatedEventType.BodyModified,
 ];
 
+const eventsNotAddingTools: DesignUpdatedEventType[] = [
+    ...eventsNotChangingToolsList,
+    DesignUpdatedEventType.ContentRemoved,
+    DesignUpdatedEventType.ColumnRemoved,
+    DesignUpdatedEventType.RowRemoved,
+];
+
 export class UnlayerStore {
     readonly unlayerRef: UnlayerRef;
 
@@ -123,10 +132,40 @@ export class UnlayerStore {
     };
 
     private onDesignUpdated = (event: EventDesignUpdated) => {
-        this.onChangeCB?.({
-            isToolsListChanged: !eventsNotChangingToolsList.includes(event.type),
-            event,
-        });
+        const isToolAdded = !eventsNotAddingTools.includes(event.type);
+        const isToolsListChanged = !eventsNotChangingToolsList.includes(event.type);
+
+        if (isToolAdded) {
+            this.editor?.exportHtml(data => {
+                let hasChanges = false;
+
+                unlayerToolsIterate(data.design, tool => {
+                    const realTool = tool.slug
+                        ? unlayerToolsParseTwinKey(tool.slug ?? '')
+                        : undefined;
+
+                    if (realTool) {
+                        hasChanges = true;
+
+                        if (tool.slug) {
+                            delete data.design.counters[`u_content_custom_${tool.slug}`];
+                            delete tool.values._meta;
+                        }
+
+                        tool.type = realTool.type;
+                        tool.slug = realTool.slug;
+                    }
+                });
+
+                if (hasChanges) {
+                    this.setDesign(data.design);
+                }
+
+                this.onChangeCB?.({ isToolsListChanged });
+            });
+        } else {
+            this.onChangeCB?.({ isToolsListChanged });
+        }
     };
 
     private onPostMessage = (e: MessageEvent) => {
@@ -155,6 +194,7 @@ export class UnlayerStore {
         } else if (type === '--data-loaded') {
             const data: UnlayerEventRegister = {
                 customTools: this.props.tools.map(tool => ({ key: tool.key })),
+                toolTwins: this.props.toolTwins,
                 units: this.props.units?.map(unit => ({
                     ...unit,
                     values: {

package/src/tools.ts

@@ -1,7 +1,8 @@
 import { constGenericsEditor } from './shared/const';
-import { unlayerUnitsParseToolKey } from './shared/tools';
+import { unlayerToolsParseUnitKey } from './shared/tools';
 import { versions } from './unlayer';
 import {
+    UnlayerDesignCustomTool,
     UnlayerDesignFormat,
     UnlayerDesignTool,
     UnlayerEditorCustomTool,
@@ -109,11 +110,11 @@ export const unlayerToolsIterate = (
 
 export const unlayerToolsIterateCustom = (
     design: UnlayerDesignFormat,
-    cb: (tool: UnlayerDesignTool) => boolean | undefined | void
+    cb: (tool: UnlayerDesignCustomTool) => boolean | undefined | void
 ) => {
     unlayerToolsIterate(design, tool => {
-        if (tool.type === 'custom') {
-            return cb(tool);
+        if (tool.type === 'custom' && tool.slug) {
+            return cb(tool as any);
         }
     });
 };
@@ -160,7 +161,7 @@ export const unlayerToolsCustomStat = (
 
         counters[tool.slug]++;
 
-        const isUnit = unlayerUnitsParseToolKey(tool.slug);
+        const isUnit = unlayerToolsParseUnitKey(tool.slug);
 
         if (isUnit) {
             unitIDs.add(isUnit.id);
@@ -189,8 +190,8 @@ export const unlayerToolsCustomStat = (
     };
 };
 
-export const unlayerToolsListCustom = (design: UnlayerDesignFormat): UnlayerDesignTool[] => {
-    const tools: UnlayerDesignTool[] = [];
+export const unlayerToolsListCustom = (design: UnlayerDesignFormat): UnlayerDesignCustomTool[] => {
+    const tools: UnlayerDesignCustomTool[] = [];
 
     unlayerToolsIterateCustom(design, tool => {
         tools.push(tool);

package/src/unlayer-interface.tsx

@@ -1,10 +1,14 @@
+import { UnlayerEditorTwin, UnlayerEditorUnit } from './shared/const';
 import { SchemaObject } from './shared/schema';
 
 export interface UnlayerDesignTool {
     type: string;
-    slug: string;
+    slug?: string;
     values: any;
 }
+export interface UnlayerDesignCustomTool extends UnlayerDesignTool {
+    slug: string;
+}
 
 export interface UnlayerDesignFormat {
     body: {
@@ -40,13 +44,6 @@ export interface UnlayerEditorMergeTagInfo {
     propertyPath: string;
 }
 
-export interface UnlayerEditorUnit {
-    id: string;
-    generic: string;
-    title: string;
-    values: any;
-}
-
 export interface UnlayerEditorCustomTool {
     key: string;
     title: string;
@@ -56,6 +53,7 @@ export interface UnlayerEditorCustomTool {
 
 export interface CreateUnlayerEditorProps {
     tools: UnlayerEditorCustomTool[];
+    toolTwins?: UnlayerEditorTwin[];
     dummyData?: any;
     schema?: SchemaObject;
     customCSS?: string | string[] | undefined;