@elementor/editor-variables 4.1.0-767 → 4.1.0-769

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "4.1.0-767",
+  "version": "4.1.0-769",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,22 +39,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.1.0-767",
-    "@elementor/editor-canvas": "4.1.0-767",
-    "@elementor/editor-controls": "4.1.0-767",
-    "@elementor/editor-current-user": "4.1.0-767",
-    "@elementor/editor-mcp": "4.1.0-767",
-    "@elementor/editor-panels": "4.1.0-767",
-    "@elementor/editor-props": "4.1.0-767",
-    "@elementor/editor-ui": "4.1.0-767",
-    "@elementor/editor-v1-adapters": "4.1.0-767",
-    "@elementor/menus": "4.1.0-767",
-    "@elementor/http-client": "4.1.0-767",
+    "@elementor/editor": "4.1.0-769",
+    "@elementor/editor-canvas": "4.1.0-769",
+    "@elementor/editor-controls": "4.1.0-769",
+    "@elementor/editor-current-user": "4.1.0-769",
+    "@elementor/editor-mcp": "4.1.0-769",
+    "@elementor/editor-panels": "4.1.0-769",
+    "@elementor/editor-props": "4.1.0-769",
+    "@elementor/editor-ui": "4.1.0-769",
+    "@elementor/editor-v1-adapters": "4.1.0-769",
+    "@elementor/menus": "4.1.0-769",
+    "@elementor/http-client": "4.1.0-769",
     "@elementor/icons": "^1.72.0",
-    "@elementor/events": "4.1.0-767",
-    "@elementor/schema": "4.1.0-767",
+    "@elementor/events": "4.1.0-769",
+    "@elementor/schema": "4.1.0-769",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.1.0-767",
+    "@elementor/utils": "4.1.0-769",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/variables-manager/hooks/use-variables-manager-state.ts

@@ -4,6 +4,7 @@ import { generateTempId } from '../../../batch-operations';
 import { getVariables } from '../../../hooks/use-prop-variables';
 import { service } from '../../../service';
 import { type TVariablesList } from '../../../storage';
+import { generateDuplicateLabel } from '../../../utils/duplicate-label';
 import { filterBySearch } from '../../../utils/filter-by-search';
 import { applySelectionFilters, variablesToList } from '../../../utils/variables-to-list';
 import { getVariableTypes } from '../../../variables-registry/variable-type-registry';
@@ -39,6 +40,33 @@ export const useVariablesManagerState = () => {
 		return newId;
 	}, [] );
 
+	const duplicateVariable = useCallback( ( sourceId: string ): string => {
+		const newId = generateTempId();
+
+		setVariables( ( prev ) => {
+			const source = prev[ sourceId ];
+			if ( ! source || source.deleted ) {
+				return prev;
+			}
+
+			const existingLabels = Object.values( prev )
+				.filter( ( v ) => ! v.deleted )
+				.map( ( v ) => v.label );
+
+			return {
+				...prev,
+				[ newId ]: {
+					label: generateDuplicateLabel( source.label, existingLabels ),
+					value: source.value,
+					type: source.type,
+				},
+			};
+		} );
+
+		setIsDirty( true );
+		return newId;
+	}, [] );
+
 	const handleDeleteVariable = useCallback( ( itemId: string ) => {
 		setDeletedVariables( ( prev ) => [ ...prev, itemId ] );
 		setVariables( ( prev ) => ( { ...prev, [ itemId ]: { ...prev[ itemId ], deleted: true } } ) );
@@ -97,6 +125,7 @@ export const useVariablesManagerState = () => {
 		isSaveDisabled,
 		handleOnChange,
 		createVariable,
+		duplicateVariable,
 		handleDeleteVariable,
 		handleStartSync,
 		handleStopSync,

package/src/components/variables-manager/variables-manager-panel.tsx

@@ -11,7 +11,7 @@ import {
 } from '@elementor/editor-panels';
 import { ConfirmationDialog, SaveChangesDialog, SearchField, ThemeProvider, useDialog } from '@elementor/editor-ui';
 import { changeEditMode } from '@elementor/editor-v1-adapters';
-import { AlertTriangleFilledIcon, ColorFilterIcon, TrashIcon } from '@elementor/icons';
+import { AlertTriangleFilledIcon, ColorFilterIcon, CopyIcon, TrashIcon } from '@elementor/icons';
 import {
 	Alert,
 	AlertAction,
@@ -75,6 +75,7 @@ export function VariablesManagerPanel() {
 		isSaveDisabled,
 		handleOnChange,
 		createVariable,
+		duplicateVariable,
 		handleDeleteVariable,
 		handleStartSync: startSyncFromState,
 		handleStopSync: stopSyncFromState,
@@ -200,6 +201,22 @@ export function VariablesManagerPanel() {
 				},
 			} );
 
+			const duplicateAction = {
+				name: __( 'Duplicate', 'elementor' ),
+				icon: CopyIcon,
+				color: 'text.primary',
+				onClick: ( itemId: string ) => {
+					const newId = duplicateVariable( itemId );
+					startAutoEdit( newId );
+
+					const variableTypeOptions = getVariableType( variable.type );
+					trackVariablesManagerEvent( {
+						action: 'duplicate',
+						varType: variableTypeOptions?.variableType,
+					} );
+				},
+			};
+
 			const deleteAction = {
 				name: __( 'Delete', 'elementor' ),
 				icon: TrashIcon,
@@ -215,9 +232,9 @@ export function VariablesManagerPanel() {
 				},
 			};
 
-			return [ ...typeActions, deleteAction ];
+			return [ ...typeActions, duplicateAction, deleteAction ];
 		},
-		[ variables, handleStartSync, handleStopSync ]
+		[ variables, handleStartSync, handleStopSync, duplicateVariable, startAutoEdit ]
 	);
 
 	const hasVariables = Object.keys( variables ).length > 0;

package/src/utils/duplicate-label.ts

@@ -0,0 +1,29 @@
+import { VARIABLE_LABEL_MAX_LENGTH } from './validations';
+
+export const COPY_SUFFIX = '-Copy';
+
+const trimToFit = ( base: string, suffix: string ): string => {
+	const combined = base + suffix;
+	if ( combined.length <= VARIABLE_LABEL_MAX_LENGTH ) {
+		return combined;
+	}
+	return base.slice( 0, VARIABLE_LABEL_MAX_LENGTH - suffix.length ) + suffix;
+};
+
+export const generateDuplicateLabel = ( originalLabel: string, existingLabels: string[] ): string => {
+	const labelsSet = new Set( existingLabels );
+
+	const firstCandidate = trimToFit( originalLabel, COPY_SUFFIX );
+	if ( ! labelsSet.has( firstCandidate ) ) {
+		return firstCandidate;
+	}
+
+	for ( let i = 2; i <= labelsSet.size + 1; i++ ) {
+		const candidate = trimToFit( originalLabel, `${ COPY_SUFFIX }-${ i }` );
+		if ( ! labelsSet.has( candidate ) ) {
+			return candidate;
+		}
+	}
+
+	return firstCandidate;
+};

package/src/utils/tracking.ts

@@ -24,7 +24,7 @@ export const trackVariableEvent = ( { varType, controlPath, action }: VariableEv
 };
 
 type VariablesManagerEventData = {
-	action: 'openManager' | 'add' | 'saveChanges' | 'delete';
+	action: 'openManager' | 'add' | 'saveChanges' | 'delete' | 'duplicate';
 	varType?: string;
 	controlPath?: string;
 };