@dotcms/uve 1.2.1 → 1.2.2

package/public.cjs.js

@@ -237,24 +237,10 @@ function getDotContentletAttributes(contentlet, container) {
     'data-dot-inode': contentlet?.inode,
     'data-dot-type': contentlet?.contentType,
     'data-dot-container': container,
-    'data-dot-on-number-of-pages': contentlet?.['onNumberOfPages'] || '1'
-  };
-}
-/**
- * Helper function that returns an object containing analytics-specific data attributes.
- * These attributes are used by the DotCMS Analytics SDK to track content interactions.
- *
- * @param {DotCMSBasicContentlet} contentlet - The contentlet to get the analytics attributes for
- * @returns {DotAnalyticsAttributes} The analytics data attributes
- * @internal
- */
-function getDotAnalyticsAttributes(contentlet) {
-  return {
-    'data-dot-analytics-identifier': contentlet?.identifier,
-    'data-dot-analytics-inode': contentlet?.inode,
-    'data-dot-analytics-basetype': contentlet?.baseType,
-    'data-dot-analytics-contenttype': contentlet?.contentType,
-    'data-dot-analytics-title': contentlet?.['widgetTitle'] || contentlet?.title
+    'data-dot-on-number-of-pages': contentlet?.['onNumberOfPages'] || '1',
+    ...(contentlet?.dotStyleProperties && {
+      'data-dot-style-properties': JSON.stringify(contentlet.dotStyleProperties)
+    })
   };
 }
 /**
@@ -287,6 +273,8 @@ const getContainersData = (dotCMSPageAsset, columContainer) => {
     container
   } = dotContainer;
   const acceptTypes = containerStructures?.map(structure => structure.contentTypeVar).join(',') ?? '';
+  // TODO: Check if the variantId is needed and we need to find another way to get it.
+  // Since the parentPermissionable is not available after: https://github.com/dotCMS/core/pull/32890
   const variantId = container?.parentPermissionable?.variantId;
   const maxContentlets = container?.maxContentlets ?? 0;
   const path = container?.path;
@@ -490,7 +478,10 @@ function onContentletHovered(callback) {
       contentType: foundElement.dataset?.['dotType'],
       baseType: foundElement.dataset?.['dotBasetype'],
       widgetTitle: foundElement.dataset?.['dotWidgetTitle'],
-      onNumberOfPages: foundElement.dataset?.['dotOnNumberOfPages']
+      onNumberOfPages: foundElement.dataset?.['dotOnNumberOfPages'],
+      ...(foundElement.dataset?.['dotStyleProperties'] && {
+        dotStyleProperties: JSON.parse(foundElement.dataset['dotStyleProperties'])
+      })
     };
     const vtlFiles = findDotCMSVTLData(foundElement);
     const contentletPayload = {
@@ -614,10 +605,6 @@ const EMPTY_CONTAINER_STYLE_ANGULAR = {
  * @internal
  */
 const CUSTOM_NO_COMPONENT = 'CustomNoComponent';
-// Analytics active flag key
-const ANALYTICS_WINDOWS_ACTIVE_KEY = '__dotAnalyticsActive__';
-// Analytics cleanup function key
-const ANALYTICS_WINDOWS_CLEANUP_KEY = '__dotAnalyticsCleanup';
 
 /**
  * Gets the current state of the Universal Visual Editor (UVE).
@@ -703,57 +690,6 @@ function createUVESubscription(eventType, callback) {
   }
   return eventCallback(callback);
 }
-/**
- * Checks if DotCMS Analytics is active by verifying the global window flag.
- *
- * This function checks for the presence of the `__dotAnalyticsActive__` flag on the window object,
- * which is set by the `@dotcms/analytics` SDK when Analytics is successfully initialized.
- *
- * This utility can be used in any JavaScript framework (React, Angular, Vue, etc.) to conditionally
- * enable analytics-related features or data attributes.
- *
- * @export
- * @returns {boolean} true if Analytics is initialized and active, false otherwise
- *
- * @example
- * ```ts
- * // React example
- * import { isAnalyticsActive } from '@dotcms/uve/internal';
- *
- * function MyComponent() {
- *   const shouldTrack = isAnalyticsActive();
- *
- *   if (shouldTrack) {
- *     // Add analytics tracking
- *   }
- * }
- * ```
- *
- * @example
- * ```ts
- * // Angular example
- * import { isAnalyticsActive } from '@dotcms/uve/internal';
- *
- * if (isAnalyticsActive()) {
- *   // Apply analytics attributes to elements
- *   element.setAttribute('data-dot-object', 'contentlet');
- * }
- * ```
- *
- * @example
- * ```ts
- * // Vanilla JavaScript / Any framework
- * import { isAnalyticsActive } from '@dotcms/uve/internal';
- *
- * if (isAnalyticsActive()) {
- *   console.log('DotCMS Analytics is active');
- * }
- * ```
- */
-function isAnalyticsActive() {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return typeof window !== 'undefined' && window[ANALYTICS_WINDOWS_ACTIVE_KEY] === true;
-}
 
 /**
  * Sets the bounds of the containers in the editor.
@@ -1176,8 +1112,6 @@ function initUVE(config = {}) {
   };
 }
 
-exports.ANALYTICS_WINDOWS_ACTIVE_KEY = ANALYTICS_WINDOWS_ACTIVE_KEY;
-exports.ANALYTICS_WINDOWS_CLEANUP_KEY = ANALYTICS_WINDOWS_CLEANUP_KEY;
 exports.CUSTOM_NO_COMPONENT = CUSTOM_NO_COMPONENT;
 exports.DEVELOPMENT_MODE = DEVELOPMENT_MODE;
 exports.EMPTY_CONTAINER_STYLE_ANGULAR = EMPTY_CONTAINER_STYLE_ANGULAR;
@@ -1198,7 +1132,6 @@ exports.getClosestDotCMSContainerData = getClosestDotCMSContainerData;
 exports.getColumnPositionClasses = getColumnPositionClasses;
 exports.getContainersData = getContainersData;
 exports.getContentletsInContainer = getContentletsInContainer;
-exports.getDotAnalyticsAttributes = getDotAnalyticsAttributes;
 exports.getDotCMSContainerData = getDotCMSContainerData;
 exports.getDotCMSContentletsBound = getDotCMSContentletsBound;
 exports.getDotCMSPageBounds = getDotCMSPageBounds;
@@ -1207,7 +1140,6 @@ exports.getDotContentletAttributes = getDotContentletAttributes;
 exports.getUVEState = getUVEState;
 exports.initInlineEditing = initInlineEditing;
 exports.initUVE = initUVE;
-exports.isAnalyticsActive = isAnalyticsActive;
 exports.isValidBlocks = isValidBlocks;
 exports.reorderMenu = reorderMenu;
 exports.sendMessageToUVE = sendMessageToUVE;

package/public.esm.js

@@ -235,24 +235,10 @@ function getDotContentletAttributes(contentlet, container) {
     'data-dot-inode': contentlet?.inode,
     'data-dot-type': contentlet?.contentType,
     'data-dot-container': container,
-    'data-dot-on-number-of-pages': contentlet?.['onNumberOfPages'] || '1'
-  };
-}
-/**
- * Helper function that returns an object containing analytics-specific data attributes.
- * These attributes are used by the DotCMS Analytics SDK to track content interactions.
- *
- * @param {DotCMSBasicContentlet} contentlet - The contentlet to get the analytics attributes for
- * @returns {DotAnalyticsAttributes} The analytics data attributes
- * @internal
- */
-function getDotAnalyticsAttributes(contentlet) {
-  return {
-    'data-dot-analytics-identifier': contentlet?.identifier,
-    'data-dot-analytics-inode': contentlet?.inode,
-    'data-dot-analytics-basetype': contentlet?.baseType,
-    'data-dot-analytics-contenttype': contentlet?.contentType,
-    'data-dot-analytics-title': contentlet?.['widgetTitle'] || contentlet?.title
+    'data-dot-on-number-of-pages': contentlet?.['onNumberOfPages'] || '1',
+    ...(contentlet?.dotStyleProperties && {
+      'data-dot-style-properties': JSON.stringify(contentlet.dotStyleProperties)
+    })
   };
 }
 /**
@@ -285,6 +271,8 @@ const getContainersData = (dotCMSPageAsset, columContainer) => {
     container
   } = dotContainer;
   const acceptTypes = containerStructures?.map(structure => structure.contentTypeVar).join(',') ?? '';
+  // TODO: Check if the variantId is needed and we need to find another way to get it.
+  // Since the parentPermissionable is not available after: https://github.com/dotCMS/core/pull/32890
   const variantId = container?.parentPermissionable?.variantId;
   const maxContentlets = container?.maxContentlets ?? 0;
   const path = container?.path;
@@ -488,7 +476,10 @@ function onContentletHovered(callback) {
       contentType: foundElement.dataset?.['dotType'],
       baseType: foundElement.dataset?.['dotBasetype'],
       widgetTitle: foundElement.dataset?.['dotWidgetTitle'],
-      onNumberOfPages: foundElement.dataset?.['dotOnNumberOfPages']
+      onNumberOfPages: foundElement.dataset?.['dotOnNumberOfPages'],
+      ...(foundElement.dataset?.['dotStyleProperties'] && {
+        dotStyleProperties: JSON.parse(foundElement.dataset['dotStyleProperties'])
+      })
     };
     const vtlFiles = findDotCMSVTLData(foundElement);
     const contentletPayload = {
@@ -612,10 +603,6 @@ const EMPTY_CONTAINER_STYLE_ANGULAR = {
  * @internal
  */
 const CUSTOM_NO_COMPONENT = 'CustomNoComponent';
-// Analytics active flag key
-const ANALYTICS_WINDOWS_ACTIVE_KEY = '__dotAnalyticsActive__';
-// Analytics cleanup function key
-const ANALYTICS_WINDOWS_CLEANUP_KEY = '__dotAnalyticsCleanup';
 
 /**
  * Gets the current state of the Universal Visual Editor (UVE).
@@ -701,57 +688,6 @@ function createUVESubscription(eventType, callback) {
   }
   return eventCallback(callback);
 }
-/**
- * Checks if DotCMS Analytics is active by verifying the global window flag.
- *
- * This function checks for the presence of the `__dotAnalyticsActive__` flag on the window object,
- * which is set by the `@dotcms/analytics` SDK when Analytics is successfully initialized.
- *
- * This utility can be used in any JavaScript framework (React, Angular, Vue, etc.) to conditionally
- * enable analytics-related features or data attributes.
- *
- * @export
- * @returns {boolean} true if Analytics is initialized and active, false otherwise
- *
- * @example
- * ```ts
- * // React example
- * import { isAnalyticsActive } from '@dotcms/uve/internal';
- *
- * function MyComponent() {
- *   const shouldTrack = isAnalyticsActive();
- *
- *   if (shouldTrack) {
- *     // Add analytics tracking
- *   }
- * }
- * ```
- *
- * @example
- * ```ts
- * // Angular example
- * import { isAnalyticsActive } from '@dotcms/uve/internal';
- *
- * if (isAnalyticsActive()) {
- *   // Apply analytics attributes to elements
- *   element.setAttribute('data-dot-object', 'contentlet');
- * }
- * ```
- *
- * @example
- * ```ts
- * // Vanilla JavaScript / Any framework
- * import { isAnalyticsActive } from '@dotcms/uve/internal';
- *
- * if (isAnalyticsActive()) {
- *   console.log('DotCMS Analytics is active');
- * }
- * ```
- */
-function isAnalyticsActive() {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return typeof window !== 'undefined' && window[ANALYTICS_WINDOWS_ACTIVE_KEY] === true;
-}
 
 /**
  * Sets the bounds of the containers in the editor.
@@ -1174,4 +1110,4 @@ function initUVE(config = {}) {
   };
 }
 
-export { ANALYTICS_WINDOWS_ACTIVE_KEY as A, getContentletsInContainer as B, CUSTOM_NO_COMPONENT as C, DEVELOPMENT_MODE as D, END_CLASS as E, getDotContainerAttributes as F, setBounds as G, isValidBlocks as H, PRODUCTION_MODE as P, START_CLASS as S, __UVE_EVENTS__ as _, initInlineEditing as a, enableBlockEditorInline as b, createUVESubscription as c, initUVE as d, editContentlet as e, __UVE_EVENT_ERROR_FALLBACK__ as f, getUVEState as g, EMPTY_CONTAINER_STYLE_REACT as h, isAnalyticsActive as i, EMPTY_CONTAINER_STYLE_ANGULAR as j, ANALYTICS_WINDOWS_CLEANUP_KEY as k, getDotCMSPageBounds as l, getDotCMSContentletsBound as m, getDotCMSContainerData as n, getClosestDotCMSContainerData as o, findDotCMSElement as p, findDotCMSVTLData as q, reorderMenu as r, sendMessageToUVE as s, computeScrollIsInBottom as t, updateNavigation as u, combineClasses as v, getColumnPositionClasses as w, getDotContentletAttributes as x, getDotAnalyticsAttributes as y, getContainersData as z };
+export { isValidBlocks as A, CUSTOM_NO_COMPONENT as C, DEVELOPMENT_MODE as D, END_CLASS as E, PRODUCTION_MODE as P, START_CLASS as S, __UVE_EVENTS__ as _, enableBlockEditorInline as a, initUVE as b, createUVESubscription as c, __UVE_EVENT_ERROR_FALLBACK__ as d, editContentlet as e, EMPTY_CONTAINER_STYLE_REACT as f, getUVEState as g, EMPTY_CONTAINER_STYLE_ANGULAR as h, initInlineEditing as i, getDotCMSPageBounds as j, getDotCMSContentletsBound as k, getDotCMSContainerData as l, getClosestDotCMSContainerData as m, findDotCMSElement as n, findDotCMSVTLData as o, computeScrollIsInBottom as p, combineClasses as q, reorderMenu as r, sendMessageToUVE as s, getColumnPositionClasses as t, updateNavigation as u, getDotContentletAttributes as v, getContainersData as w, getContentletsInContainer as x, getDotContainerAttributes as y, setBounds as z };

package/src/index.d.ts

@@ -1,2 +1,4 @@
 export * from './lib/core/core.utils';
 export * from './lib/editor/public';
+export * from './lib/style-editor/types';
+export * from './lib/style-editor/public';

package/src/internal/constants.d.ts

@@ -74,5 +74,3 @@ export declare const EMPTY_CONTAINER_STYLE_ANGULAR: {
  * @internal
  */
 export declare const CUSTOM_NO_COMPONENT = "CustomNoComponent";
-export declare const ANALYTICS_WINDOWS_ACTIVE_KEY = "__dotAnalyticsActive__";
-export declare const ANALYTICS_WINDOWS_CLEANUP_KEY = "__dotAnalyticsCleanup";

package/src/lib/core/core.utils.d.ts

@@ -47,51 +47,3 @@ export declare function getUVEState(): UVEState | undefined;
  * ```
  */
 export declare function createUVESubscription<T extends UVEEventType>(eventType: T, callback: (payload: UVEEventPayloadMap[T] extends undefined ? void : UVEEventPayloadMap[T]) => void): UVEEventSubscription;
-/**
- * Checks if DotCMS Analytics is active by verifying the global window flag.
- *
- * This function checks for the presence of the `__dotAnalyticsActive__` flag on the window object,
- * which is set by the `@dotcms/analytics` SDK when Analytics is successfully initialized.
- *
- * This utility can be used in any JavaScript framework (React, Angular, Vue, etc.) to conditionally
- * enable analytics-related features or data attributes.
- *
- * @export
- * @returns {boolean} true if Analytics is initialized and active, false otherwise
- *
- * @example
- * ```ts
- * // React example
- * import { isAnalyticsActive } from '@dotcms/uve/internal';
- *
- * function MyComponent() {
- *   const shouldTrack = isAnalyticsActive();
- *
- *   if (shouldTrack) {
- *     // Add analytics tracking
- *   }
- * }
- * ```
- *
- * @example
- * ```ts
- * // Angular example
- * import { isAnalyticsActive } from '@dotcms/uve/internal';
- *
- * if (isAnalyticsActive()) {
- *   // Apply analytics attributes to elements
- *   element.setAttribute('data-dot-object', 'contentlet');
- * }
- * ```
- *
- * @example
- * ```ts
- * // Vanilla JavaScript / Any framework
- * import { isAnalyticsActive } from '@dotcms/uve/internal';
- *
- * if (isAnalyticsActive()) {
- *   console.log('DotCMS Analytics is active');
- * }
- * ```
- */
-export declare function isAnalyticsActive(): boolean;

package/src/lib/dom/dom.utils.d.ts

@@ -1,5 +1,5 @@
 import { DotCMSBasicContentlet, DotCMSColumnContainer, DotCMSPageAsset, DotPageAssetLayoutColumn, EditableContainerData } from '@dotcms/types';
-import { DotAnalyticsAttributes, DotCMSContainerBound, DotCMSContentletBound, DotContainerAttributes, DotContentletAttributes } from '@dotcms/types/internal';
+import { DotCMSContainerBound, DotCMSContentletBound, DotContainerAttributes, DotContentletAttributes } from '@dotcms/types/internal';
 /**
  * Calculates the bounding information for each page element within the given containers.
  *
@@ -152,15 +152,6 @@ export declare const getColumnPositionClasses: (column: DotPageAssetLayoutColumn
  * @returns {DotContentletAttributes} The dotCMS data attributes
  */
 export declare function getDotContentletAttributes(contentlet: DotCMSBasicContentlet, container: string): DotContentletAttributes;
-/**
- * Helper function that returns an object containing analytics-specific data attributes.
- * These attributes are used by the DotCMS Analytics SDK to track content interactions.
- *
- * @param {DotCMSBasicContentlet} contentlet - The contentlet to get the analytics attributes for
- * @returns {DotAnalyticsAttributes} The analytics data attributes
- * @internal
- */
-export declare function getDotAnalyticsAttributes(contentlet: DotCMSBasicContentlet): DotAnalyticsAttributes;
 /**
  *
  *

package/src/lib/style-editor/internal.d.ts

@@ -0,0 +1,71 @@
+import { StyleEditorForm, StyleEditorFormSchema } from './types';
+/**
+ * Normalizes a complete form definition into the schema format expected by UVE.
+ *
+ * This is the main entry point for converting a developer-friendly form definition
+ * into the normalized schema structure that UVE (Universal Visual Editor) can consume.
+ * The normalization process transforms the entire form hierarchy:
+ *
+ * **Normalization Process:**
+ * 1. Preserves the `contentType` identifier
+ * 2. Processes each section using `normalizeSection`, which:
+ *    - Normalizes all fields in the section using `normalizeField`
+ *    - Organizes fields into the required multi-dimensional array structure
+ * 3. Returns a fully normalized schema with consistent structure across all sections
+ *
+ * The resulting schema has all field-specific properties moved into `config` objects
+ * and all sections using the consistent single-column array structure, regardless
+ * of the input format.
+ *
+ * @experimental This method is experimental and may be subject to change.
+ *
+ * @param form - The complete form definition to normalize
+ * @param form.contentType - The content type identifier this form is associated with
+ * @param form.sections - Array of section definitions, each containing a title and fields
+ * @returns The normalized form schema ready to be sent to UVE, with all fields and sections normalized
+ *
+ * @example
+ * ```typescript
+ * const schema = normalizeForm({
+ *   contentType: 'my-content-type',
+ *   sections: [
+ *     {
+ *       title: 'Typography',
+ *       fields: [
+ *         { type: 'input', id: 'font-size', label: 'Font Size', inputType: 'number' },
+ *         { type: 'dropdown', id: 'font-family', label: 'Font Family', options: ['Arial', 'Helvetica'] }
+ *       ]
+ *     },
+ *     {
+ *       title: 'Colors',
+ *       fields: [
+ *         { type: 'input', id: 'primary-color', label: 'Primary Color', inputType: 'text' }
+ *       ]
+ *     }
+ *   ]
+ * });
+ * // Returns: {
+ * //   contentType: 'my-content-type',
+ * //   sections: [
+ * //     {
+ * //       title: 'Typography',
+ * //       fields: [
+ * //         [
+ * //           { type: 'input', id: 'font-size', label: 'Font Size', config: { inputType: 'number' } },
+ * //           { type: 'dropdown', id: 'font-family', label: 'Font Family', config: { options: [...] } }
+ * //         ]
+ * //       ]
+ * //     },
+ * //     {
+ * //       title: 'Colors',
+ * //       fields: [
+ * //         [
+ * //           { type: 'input', id: 'primary-color', label: 'Primary Color', config: { inputType: 'text' } }
+ * //         ]
+ * //       ]
+ * //     }
+ * //   ]
+ * // }
+ * ```
+ */
+export declare function normalizeForm(form: StyleEditorForm): StyleEditorFormSchema;