@elementor/editor-variables 0.9.0 → 0.11.0

package/src/components/color-variable-creation.tsx

@@ -42,14 +42,14 @@ export const ColorVariableCreation = ( { popupState }: { popupState: PopupState
 	};
 
 	const handleCreate = () => {
-		const key = createVariable( {
+		createVariable( {
 			value: color,
 			label,
 			type: colorVariablePropTypeUtil.key,
+		} ).then( ( key ) => {
+			setVariable( key );
+			closePopover();
 		} );
-
-		setVariable( key );
-		closePopover();
 	};
 
 	const isInValidForm = () => {

package/src/components/variables-selection-popover.tsx

@@ -15,6 +15,7 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';
 import { type Variable } from '../types';
 import { ColorVariableCreation } from './color-variable-creation';
 
@@ -45,6 +46,8 @@ export const VariablesSelectionPopover = ( {
 	const anchorRef = useRef< HTMLDivElement >( null );
 	const { label } = selectedVariable;
 
+	const colorCreationEnabled = colorVariablePropTypeUtil.key === selectedVariable.type;
+
 	return (
 		<Box ref={ anchorRef }>
 			<Tag
@@ -81,20 +84,22 @@ export const VariablesSelectionPopover = ( {
 					<ColorFilterIcon fontSize="tiny" sx={ { mr: 0.5 } } />
 					<Typography variant="subtitle2">{ __( 'Variables', 'elementor' ) }</Typography>
 					<Stack direction="row" sx={ { ml: 'auto' } }>
-						<IconButton
-							{ ...bindTrigger( creationPopupState ) }
-							size="tiny"
-							onClick={ handleCreateButtonClick }
-						>
-							<PlusIcon fontSize="tiny" />
-						</IconButton>
+						{ colorCreationEnabled && (
+							<IconButton
+								{ ...bindTrigger( creationPopupState ) }
+								size="tiny"
+								onClick={ handleCreateButtonClick }
+							>
+								<PlusIcon fontSize="tiny" />
+							</IconButton>
+						) }
 						<CloseButton slotProps={ { icon: { fontSize: 'tiny' } } } onClick={ closePopover } />
 					</Stack>
 				</Stack>
 				{ children?.( { closePopover } ) }
 			</Popover>
 
-			<ColorVariableCreation popupState={ creationPopupState } />
+			{ colorCreationEnabled && <ColorVariableCreation popupState={ creationPopupState } /> }
 		</Box>
 	);
 };

package/src/hooks/use-prop-variables.ts

@@ -1,14 +1,18 @@
 import { useMemo } from 'react';
 import { type PropKey } from '@elementor/editor-props';
 
+import { service } from '../service';
+import { type TVariable } from '../storage';
 import { styleVariablesRepository } from '../style-variables-repository';
-import { type Variable, type Variables } from '../types';
+import { type Variable } from '../types';
 
 export const usePropVariables = ( propKey: PropKey ) => {
 	return useMemo( () => normalizeVariables( propKey ), [ propKey ] );
 };
 
 export const useVariable = ( key: string ) => {
+	const variables = service.variables();
+
 	if ( ! variables?.[ key ] ) {
 		return null;
 	}
@@ -20,6 +24,10 @@ export const useVariable = ( key: string ) => {
 };
 
 const normalizeVariables = ( propKey: string ) => {
+	const variables = service.variables();
+
+	styleVariablesRepository.update( variables );
+
 	return Object.entries( variables )
 		.filter( ( [ , { type } ] ) => type === propKey )
 		.map( ( [ key, { label, value } ] ) => ( {
@@ -29,23 +37,11 @@ const normalizeVariables = ( propKey: string ) => {
 		} ) );
 };
 
-export const createVariable = ( variable: Variable ) => {
-	const id = generateId();
-
-	variables[ id ] = variable;
-
-	styleVariablesRepository.update( {
-		[ id ]: variable,
+export const createVariable = ( newVariable: Variable ): Promise< string > => {
+	return service.create( newVariable ).then( ( { id, variable }: { id: string; variable: TVariable } ) => {
+		styleVariablesRepository.update( {
+			[ id ]: variable,
+		} );
+		return id;
 	} );
-
-	return id;
-};
-
-// @ts-expect-error the temporary solution to get the list of variables from the server
-const variables: Variables = window?.ElementorV4Variables || {};
-
-const generateId = ( prefix = 'e-gv' ) => {
-	const randomHex = Math.random().toString( 16 ).slice( 2, 9 );
-
-	return `${ prefix }${ randomHex }`;
 };

package/src/init.ts

@@ -3,12 +3,14 @@ import { injectIntoTop } from '@elementor/editor';
 import { initColorVariables } from './init-color-variables';
 import { initFontVariables } from './init-font-variables';
 import { StyleVariablesRenderer } from './renderers/style-variables-renderer';
+import { service as variablesService } from './service';
 
 export function init() {
 	initColorVariables();
-
 	initFontVariables();
 
+	variablesService.init();
+
 	injectIntoTop( {
 		id: 'canvas-style-variables-render',
 		component: StyleVariablesRenderer,

package/src/service.ts

@@ -0,0 +1,154 @@
+import { apiClient } from './api';
+import { OP_RW, Storage, type TVariable, type TVariablesList } from './storage';
+
+const storage = new Storage();
+
+export const service = {
+	variables: (): TVariablesList => {
+		return storage.load();
+	},
+
+	init: () => {
+		service.load();
+	},
+
+	load: () => {
+		return apiClient
+			.list()
+			.then( ( response ) => {
+				const { success, data: payload } = response.data;
+
+				if ( ! success ) {
+					throw new Error( 'Unexpected response from server' );
+				}
+
+				return payload;
+			} )
+			.then( ( data ) => {
+				const { variables, watermark } = data;
+
+				storage.fill( variables, watermark );
+
+				return variables;
+			} );
+	},
+
+	create: ( { type, label, value }: TVariable ) => {
+		return apiClient
+			.create( type, label, value )
+			.then( ( response ) => {
+				const { success, data: payload } = response.data;
+
+				if ( ! success ) {
+					throw new Error( 'Unexpected response from server' );
+				}
+
+				return payload;
+			} )
+			.then( ( data ) => {
+				const { variable, watermark } = data;
+
+				handleWatermark( OP_RW, watermark );
+
+				const { id: variableId, ...createdVariable } = variable;
+
+				storage.add( variableId, createdVariable );
+
+				return {
+					id: variableId,
+					variable: createdVariable,
+				};
+			} );
+	},
+
+	update: ( id: string, { label, value }: TVariable ) => {
+		return apiClient
+			.update( id, label, value )
+			.then( ( response ) => {
+				const { success, data: payload } = response.data;
+
+				if ( ! success ) {
+					throw new Error( 'Unexpected response from server' );
+				}
+
+				return payload;
+			} )
+			.then( ( data ) => {
+				const { variable, watermark } = data;
+
+				handleWatermark( OP_RW, watermark );
+
+				const { id: variableId, ...updatedVariable } = variable;
+
+				storage.update( variableId, updatedVariable );
+
+				return {
+					id: variableId,
+					variable: updatedVariable,
+				};
+			} );
+	},
+
+	delete: ( id: string ) => {
+		return apiClient
+			.delete( id )
+			.then( ( response ) => {
+				const { success, data: payload } = response.data;
+
+				if ( ! success ) {
+					throw new Error( 'Unexpected response from server' );
+				}
+
+				return payload;
+			} )
+			.then( ( data ) => {
+				const { variable, watermark } = data;
+
+				handleWatermark( OP_RW, watermark );
+
+				const { id: variableId, ...deletedVariable } = variable;
+
+				storage.update( variableId, deletedVariable );
+
+				return {
+					id: variableId,
+					variable: deletedVariable,
+				};
+			} );
+	},
+
+	restore: ( id: string ) => {
+		return apiClient
+			.restore( id )
+			.then( ( response ) => {
+				const { success, data: payload } = response.data;
+
+				if ( ! success ) {
+					throw new Error( 'Unexpected response from server' );
+				}
+
+				return payload;
+			} )
+			.then( ( data ) => {
+				const { variable, watermark } = data;
+
+				handleWatermark( OP_RW, watermark );
+
+				const { id: variableId, ...restoredVariable } = variable;
+
+				storage.update( variableId, restoredVariable );
+
+				return {
+					id: variableId,
+					variable: restoredVariable,
+				};
+			} );
+	},
+};
+
+const handleWatermark = ( operation: string, newWatermark: number ) => {
+	if ( storage.watermarkDiff( operation, newWatermark ) ) {
+		setTimeout( () => service.load(), 500 );
+	}
+	storage.watermark( newWatermark );
+};

package/src/storage.ts

@@ -0,0 +1,74 @@
+export type TVariable = {
+	type: string;
+	label: string;
+	value: string;
+	deleted?: boolean;
+	deleted_at?: string;
+};
+
+export type TVariablesList = Record< string, TVariable >;
+
+const STORAGE_KEY = 'elementor-global-variables';
+const STORAGE_WATERMARK_KEY = 'elementor-global-variables-watermark';
+
+export const OP_RW = 'RW';
+const OP_RO = 'RO';
+
+export class Storage {
+	state: {
+		watermark: number;
+		variables: TVariablesList;
+	};
+
+	constructor() {
+		this.state = {
+			watermark: -1,
+			variables: {},
+		};
+	}
+
+	load() {
+		this.state.watermark = parseInt( localStorage.getItem( STORAGE_WATERMARK_KEY ) || '-1' );
+		this.state.variables = JSON.parse( localStorage.getItem( STORAGE_KEY ) || '{}' ) as TVariablesList;
+		return this.state.variables;
+	}
+
+	fill( variables: TVariablesList, watermark: number ) {
+		this.state.watermark = watermark;
+		this.state.variables = variables;
+
+		localStorage.setItem( STORAGE_WATERMARK_KEY, this.state.watermark.toString() );
+		localStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );
+	}
+
+	add( id: string, variable: TVariable ) {
+		this.load();
+		this.state.variables[ id ] = variable;
+		localStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );
+	}
+
+	update( id: string, variable: TVariable ) {
+		this.load();
+		this.state.variables[ id ] = variable;
+		localStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );
+	}
+
+	watermark( watermark: number ) {
+		this.state.watermark = watermark;
+		localStorage.setItem( STORAGE_WATERMARK_KEY, this.state.watermark.toString() );
+	}
+
+	watermarkDiff( operation: string, newWatermark: number ) {
+		const diff = newWatermark - this.state.watermark;
+
+		if ( OP_RW === operation ) {
+			return 1 !== diff;
+		}
+
+		if ( OP_RO === operation ) {
+			return 0 !== diff;
+		}
+
+		return false;
+	}
+}