@elementor/editor-variables 0.15.0 → 0.18.0

package/src/service.ts

@@ -1,3 +1,6 @@
+import { type AxiosResponse } from '@elementor/http-client';
+import { __ } from '@wordpress/i18n';
+
 import { apiClient } from './api';
 import { OP_RW, Storage, type TVariablesList } from './storage';
 import { styleVariablesRepository } from './style-variables-repository';
@@ -44,7 +47,8 @@ export const service = {
 				const { success, data: payload } = response.data;
 
 				if ( ! success ) {
-					throw new Error( 'Unexpected response from server' );
+					const errorMessage = payload?.message || __( 'Unexpected response from server', 'elementor' );
+					throw new Error( errorMessage );
 				}
 
 				return payload;
@@ -66,6 +70,10 @@ export const service = {
 					id: variableId,
 					variable: createdVariable,
 				};
+			} )
+			.catch( ( error ) => {
+				const message = getErrorMessage( error.response );
+				throw message ? new Error( message ) : error;
 			} );
 	},
 
@@ -76,7 +84,8 @@ export const service = {
 				const { success, data: payload } = response.data;
 
 				if ( ! success ) {
-					throw new Error( 'Unexpected response from server' );
+					const errorMessage = payload?.message || __( 'Unexpected response from server', 'elementor' );
+					throw new Error( errorMessage );
 				}
 
 				return payload;
@@ -98,6 +107,10 @@ export const service = {
 					id: variableId,
 					variable: updatedVariable,
 				};
+			} )
+			.catch( ( error ) => {
+				const message = getErrorMessage( error.response );
+				throw message ? new Error( message ) : error;
 			} );
 	},
 
@@ -172,3 +185,11 @@ const handleWatermark = ( operation: string, newWatermark: number ) => {
 	}
 	storage.watermark( newWatermark );
 };
+
+const getErrorMessage = ( response: AxiosResponse ) => {
+	if ( response?.data?.code === 'duplicated_label' ) {
+		return __( 'This variable name already exists. Please choose a unique name.', 'elementor' );
+	}
+
+	return __( 'There was a glitch. Try saving your variable again.', 'elementor' );
+};

package/src/sync/enqueue-font.ts

@@ -0,0 +1,7 @@
+import { type CanvasExtendedWindow, type EnqueueFont } from './types';
+
+export const enqueueFont: EnqueueFont = ( fontFamily, context = 'preview' ) => {
+	const extendedWindow = window as unknown as CanvasExtendedWindow;
+
+	return extendedWindow.elementor?.helpers?.enqueueFont?.( fontFamily, context ) ?? null;
+};

package/src/sync/types.ts

@@ -1,5 +1,10 @@
+export type EnqueueFont = ( fontFamily: string, context?: 'preview' | 'editor' ) => void;
+
 export type CanvasExtendedWindow = Window & {
 	elementor?: {
 		$preview?: [ HTMLIFrameElement ];
+		helpers?: {
+			enqueueFont?: EnqueueFont;
+		};
 	};
 };

package/src/transformers/variable-transformer.ts

@@ -1,9 +1,27 @@
 import { createTransformer } from '@elementor/editor-canvas';
 
-export const variableTransformer = createTransformer( ( value: string ) => {
-	if ( ! value.trim() ) {
+import { service } from '../service';
+
+export const variableTransformer = createTransformer( ( id: string ) => {
+	const variables = service.variables();
+
+	let name = id;
+	let fallbackValue = '';
+
+	if ( variables[ id ] ) {
+		fallbackValue = variables[ id ].value;
+		if ( ! variables[ id ]?.deleted ) {
+			name = variables[ id ].label;
+		}
+	}
+
+	if ( ! name.trim() ) {
 		return null;
 	}
 
-	return `var(--${ value })`;
+	if ( ! fallbackValue.trim() ) {
+		return `var(--${ name })`;
+	}
+
+	return `var(--${ name }, ${ fallbackValue })`;
 } );

package/src/types.ts

@@ -10,7 +10,7 @@ export type Variable = {
 	deleted_at?: string;
 };
 
-export type StyleVariables = Record< string, string >;
+export type StyleVariables = Record< string, Variable >;
 
 export type ExtendedVirtualizedItem = VirtualizedItem< 'item', string > & {
 	icon: React.ReactNode;

package/src/utils/validations.ts

@@ -0,0 +1,42 @@
+import { __ } from '@wordpress/i18n';
+
+export const VARIABLE_LABEL_MAX_LENGTH = 50;
+
+export const validateLabel = ( name: string ): string => {
+	if ( ! name.trim() ) {
+		return __( 'Give your variable a name.', 'elementor' );
+	}
+
+	const allowedChars = /^[a-zA-Z0-9_-]+$/;
+	if ( ! allowedChars.test( name ) ) {
+		return __( 'Use letters, numbers, dashes (-), or underscores (_) for the name.', 'elementor' );
+	}
+
+	const hasAlphanumeric = /[a-zA-Z0-9]/;
+	if ( ! hasAlphanumeric.test( name ) ) {
+		return __( 'Names have to include at least one non-special character.', 'elementor' );
+	}
+
+	if ( VARIABLE_LABEL_MAX_LENGTH < name.length ) {
+		return __( 'Keep names up to 50 characters.', 'elementor' );
+	}
+
+	return '';
+};
+
+export const labelHint = ( name: string ): string => {
+	const hintThreshold = VARIABLE_LABEL_MAX_LENGTH * 0.8 - 1;
+	if ( hintThreshold < name.length ) {
+		return __( 'Keep names up to 50 characters.', 'elementor' );
+	}
+
+	return '';
+};
+
+export const validateValue = ( value: string ): string => {
+	if ( ! value.trim() ) {
+		return __( 'Add a value to complete your variable.', 'elementor' );
+	}
+
+	return '';
+};

package/src/components/ui/variable-tag.tsx

@@ -1,43 +0,0 @@
-import * as React from 'react';
-import { DetachIcon } from '@elementor/icons';
-import { Box, IconButton, Stack, Typography, UnstableTag as Tag, type UnstableTagProps } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-export const SIZE = 'tiny';
-
-interface VariableTagProps extends UnstableTagProps {
-	onUnlink?: () => void;
-}
-
-export const VariableTag = ( { startIcon, label, onUnlink, ...props }: VariableTagProps ) => {
-	const actions = [];
-
-	if ( onUnlink ) {
-		actions.push(
-			<IconButton key="unlink" size={ SIZE } onClick={ onUnlink } aria-label={ __( 'Unlink', 'elementor' ) }>
-				<DetachIcon fontSize={ SIZE } />
-			</IconButton>
-		);
-	}
-
-	return (
-		<Tag
-			fullWidth
-			showActionsOnHover
-			startIcon={
-				<Stack gap={ 0.5 } direction="row" alignItems="center">
-					{ startIcon }
-				</Stack>
-			}
-			label={
-				<Box sx={ { display: 'inline-grid', minWidth: 0 } }>
-					<Typography sx={ { lineHeight: 1.34 } } variant="caption" noWrap>
-						{ label }
-					</Typography>
-				</Box>
-			}
-			actions={ actions }
-			{ ...props }
-		/>
-	);
-};