@servicetitan/dte-unlayer 0.91.0 → 0.93.0

package/src/editor.tsx

@@ -39,7 +39,7 @@ export const UnlayerEditor = forwardRef<UnlayerRef, UnlayerEditorProps>((props,
     const store = useMemo(
         () => new UnlayerStore(props.opts),
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        []
+        [],
     );
 
     useEffect(() => {

package/src/shared/schema.ts

@@ -1,5 +1,5 @@
-export type SchemaNodeAvailableTypes = 'object' | 'array' | 'string';
-export const schemaNodeAvailableTypes = ['object', 'array', 'string'];
+export type SchemaNodeAvailableTypes = 'object' | 'array' | 'string' | 'number';
+export const schemaNodeAvailableTypes = ['object', 'array', 'string', 'number'];
 
 export type SchemaNodeStringSubTypes = 'string' | 'text' | 'html' | 'image';
 export const schemaNodeStringSubTypes = ['string', 'text', 'html', 'image'];
@@ -35,7 +35,11 @@ export interface SchemaSimpleString extends SchemaNodeProps {
     subType?: SchemaNodeStringSubTypes;
 }
 
-export type SchemaSimple = SchemaSimpleString;
+export interface SchemaSimpleNumber extends SchemaNodeProps {
+    type: 'number';
+}
+
+export type SchemaSimple = SchemaSimpleString | SchemaSimpleNumber;
 
 export const schemaArrayRootKey = '[]';
 export type SchemaNode = SchemaObject | SchemaArray | SchemaSimple;
@@ -46,6 +50,8 @@ export const schemaIsArrayOfObjects = (node?: SchemaNode): node is SchemaArray =
 export const schemaIsArray = (node?: SchemaNode): node is SchemaArray => node?.type === 'array';
 export const schemaIsString = (node?: SchemaNode): node is SchemaSimpleString =>
     node?.type === 'string';
+export const schemaIsNumber = (node?: SchemaNode): node is SchemaSimpleNumber =>
+    node?.type === 'number';
 export const schemaIsStringHtml = (node?: SchemaNode): node is SchemaSimpleString =>
     node?.type === 'string' && node?.subType === 'html';
 
@@ -94,15 +100,15 @@ export const schemaFindParentNode = (schema: SchemaNode, key: string): SchemaNod
     return keys.length
         ? schemaFindNode(schema, keys.join('.'))
         : schemaIsObject(schema) && schema.properties[key]
-        ? schema
-        : undefined;
+          ? schema
+          : undefined;
 };
 
 export const schemaGetFieldKey = (fullKey: string): string => fullKey.split('.').pop() ?? '';
 
 export const schemaBuildNode = (
     type: SchemaNodeAvailableTypes,
-    arrayItemType?: SchemaNodeAvailableTypes
+    arrayItemType?: SchemaNodeAvailableTypes,
 ): SchemaNode => {
     if (type === 'object') {
         return { type: 'object', properties: {}, options: {} };
@@ -135,7 +141,7 @@ export const schemaBuildMap = (schema: SchemaObject): { map: SchemaMap; dummyDat
         nodeKey: string,
         parentNodes: { key: string; title: string }[],
         isArrayed: boolean,
-        dummyDataNode: any
+        dummyDataNode: any,
     ) => {
         const nodeLabel = node.title ?? nodeKey;
         const isArrayRoot = nodeKey === schemaArrayRootKey;
@@ -148,7 +154,7 @@ export const schemaBuildMap = (schema: SchemaObject): { map: SchemaMap; dummyDat
                 fieldKey: nodeKey,
                 fullKey,
                 fullTitle,
-                title: node.title ?? isArrayed ? nodeLabel : fullTitle,
+                title: (node.title ?? isArrayed) ? nodeLabel : fullTitle,
                 node,
                 isArrayed,
                 isValue: !schemaIsObject(node) && !schemaIsArray(node),
@@ -174,7 +180,7 @@ export const schemaBuildMap = (schema: SchemaObject): { map: SchemaMap; dummyDat
                     key,
                     nodeKey ? [...parentNodes, { key: nodeKey, title: nodeLabel }] : [],
                     isArrayed,
-                    dummyDataObject
+                    dummyDataObject,
                 );
             }
         } else if (schemaIsArray(node)) {
@@ -186,16 +192,18 @@ export const schemaBuildMap = (schema: SchemaObject): { map: SchemaMap; dummyDat
                 schemaArrayRootKey,
                 nodeKey ? [...parentNodes, { key: nodeKey, title: nodeLabel }] : [],
                 true,
-                dummyDataNode[nodeKey]
+                dummyDataNode[nodeKey],
             );
         } else if (nodeKey) {
+            const sampleData = node?.options?.sampleData;
             const placeholder = node?.options?.placeholder;
+            const value = sampleData !== undefined ? sampleData : placeholder;
 
-            if (placeholder !== undefined) {
+            if (value !== undefined) {
                 if (isArrayRoot) {
-                    dummyDataNode.push?.(placeholder);
+                    dummyDataNode.push?.(value);
                 } else {
-                    dummyDataNode[nodeKey] = placeholder;
+                    dummyDataNode[nodeKey] = value;
                 }
             }
         }

package/src/unlayer.tsx

@@ -61,8 +61,8 @@ export interface EventDesignUpdated {
  * to know correct schema version, open unlayer editor and check output design ('schema' property)
  */
 export const versions = {
-    unlayer: '1.9.1',
-    schema: 16,
+    unlayer: '1.339.0',
+    schema: 22,
 };
 
 export const handlePreselectTool = (preselectToolSlug: string) => {
@@ -94,6 +94,29 @@ export const hideUnlayerBodyMenuItem = () => {
     `;
 };
 
+const injectEditorCoreStyles = () => {
+    const cssText = editorCoreStyles?.trim();
+
+    if (!cssText) {
+        return '';
+    }
+
+    return `
+        (function () {
+            var css = ${JSON.stringify(cssText)};
+            var id = 'dte-unlayer-core-styles';
+            if (document.getElementById(id)) {
+                return;
+            }
+            var style = document.createElement('style');
+            style.id = id;
+            style.type = 'text/css';
+            style.appendChild(document.createTextNode(css));
+            document.head.appendChild(style);
+        })();
+    `;
+};
+
 export const hideMobileTabletPreview = () => `
     [data-key="preview-tablet"],
     [data-key="resolution"],
@@ -155,11 +178,12 @@ export const createUnlayerEditor = (
         noCoreTools,
         tools,
         units,
-    }: CreateUnlayerEditorProps
+    }: CreateUnlayerEditorProps,
 ): Unlayer => {
     const customScripts = [
         editorCoreScript,
         editorCoreTools,
+        injectEditorCoreStyles(),
         'window.dteStore.sendData("--core-loaded")',
         ...unlayerCustomToolsGetRegisterUrls(tools),
         unlayerCustomToolMetaData(tools),
@@ -202,26 +226,29 @@ export const createUnlayerEditor = (
         value: key.charAt(0).toLowerCase() + key.replace(/ /g, '').slice(1),
     }));
 
-    const unitsConfig = (units ?? []).reduce((out, unit) => {
-        out[`custom#${unit.generic}:unit:${unit.id}`] = {
-            data: {
-                [acv]: unit.values[acv],
-            },
-            properties: {
-                [constGenericsEditor.userConfigProperty]: {
-                    editor: {
-                        data: { [acv]: unit.values[acv] },
-                    },
+    const unitsConfig = (units ?? []).reduce(
+        (out, unit) => {
+            out[`custom#${unit.generic}:unit:${unit.id}`] = {
+                data: {
+                    [acv]: unit.values[acv],
                 },
-                [constGenericsEditor.infoDataProperty]: {
-                    editor: {
-                        data: { title: unit.title },
+                properties: {
+                    [constGenericsEditor.userConfigProperty]: {
+                        editor: {
+                            data: { [acv]: unit.values[acv] },
+                        },
+                    },
+                    [constGenericsEditor.infoDataProperty]: {
+                        editor: {
+                            data: { title: unit.title },
+                        },
                     },
                 },
-            },
-        };
-        return out;
-    }, {} as Record<string, any>);
+            };
+            return out;
+        },
+        {} as Record<string, any>,
+    );
 
     const eSignComponentRecipients = {
         properties: {
@@ -252,18 +279,25 @@ export const createUnlayerEditor = (
             preview: true,
             userUploads: false,
             stockImages: false,
+            textEditor: {
+                tables: true,
+            },
         },
-        mergeTags: mergeTags?.reduce((out, tag) => {
-            out[tag.id] = { name: tag.name, value: tag.propertyPath };
+        mergeTags: mergeTags?.reduce(
+            (out, tag) => {
+                out[tag.id] = { name: tag.name, value: tag.propertyPath };
 
-            return out;
-        }, {} as Record<string, { name: string; value: string }>),
+                return out;
+            },
+            {} as Record<string, { name: string; value: string }>,
+        ),
         projectId: 5713,
         version: latest ? undefined : versions.unlayer,
         appearance: {
             theme: 'classic_light',
         },
         tools: {
+            'carousel': { enabled: false },
             'button': { enabled: false },
             'html': {
                 enabled: enableHTMLEditing,
@@ -279,6 +313,9 @@ export const createUnlayerEditor = (
                     },
                 },
             },
+            'table': {
+                enabled: true,
+            },
             'menu': { enabled: false },
             'form': { enabled: false },
             ...(noCoreTools