@elementor/editor-variables 4.1.0-766 → 4.1.0-768

package/dist/index.mjs

@@ -466,7 +466,7 @@ import {
 } from "@elementor/editor-panels";
 import { ConfirmationDialog as ConfirmationDialog2, SaveChangesDialog, SearchField, ThemeProvider, useDialog } from "@elementor/editor-ui";
 import { changeEditMode } from "@elementor/editor-v1-adapters";
-import { AlertTriangleFilledIcon as AlertTriangleFilledIcon2, ColorFilterIcon, TrashIcon } from "@elementor/icons";
+import { AlertTriangleFilledIcon as AlertTriangleFilledIcon2, ColorFilterIcon, CopyIcon, TrashIcon } from "@elementor/icons";
 import {
   Alert,
   AlertAction,
@@ -1042,6 +1042,30 @@ var restoreVariable = (restoreId, label, value, type) => {
   return service.restore(restoreId, label, value, type).then(extractId);
 };
 
+// src/utils/duplicate-label.ts
+var COPY_SUFFIX = "-Copy";
+var trimToFit = (base, suffix) => {
+  const combined = base + suffix;
+  if (combined.length <= VARIABLE_LABEL_MAX_LENGTH) {
+    return combined;
+  }
+  return base.slice(0, VARIABLE_LABEL_MAX_LENGTH - suffix.length) + suffix;
+};
+var generateDuplicateLabel = (originalLabel, existingLabels) => {
+  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;
+};
+
 // src/components/variables-manager/hooks/use-variables-manager-state.ts
 var useVariablesManagerState = () => {
   const [variables, setVariables] = useState2(() => getVariables(false));
@@ -1069,6 +1093,26 @@ var useVariablesManagerState = () => {
     setIsDirty(true);
     return newId;
   }, []);
+  const duplicateVariable = useCallback3((sourceId) => {
+    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 = useCallback3((itemId) => {
     setDeletedVariables((prev) => [...prev, itemId]);
     setVariables((prev) => ({ ...prev, [itemId]: { ...prev[itemId], deleted: true } }));
@@ -1117,6 +1161,7 @@ var useVariablesManagerState = () => {
     isSaveDisabled,
     handleOnChange,
     createVariable: createVariable2,
+    duplicateVariable,
     handleDeleteVariable,
     handleStartSync,
     handleStopSync,
@@ -1940,6 +1985,7 @@ function VariablesManagerPanel() {
     isSaveDisabled,
     handleOnChange,
     createVariable: createVariable2,
+    duplicateVariable,
     handleDeleteVariable,
     handleStartSync: startSyncFromState,
     handleStopSync: stopSyncFromState,
@@ -2047,6 +2093,20 @@ function VariablesManagerPanel() {
           onStopSync: handleStopSync
         }
       });
+      const duplicateAction = {
+        name: __10("Duplicate", "elementor"),
+        icon: CopyIcon,
+        color: "text.primary",
+        onClick: (itemId) => {
+          const newId = duplicateVariable(itemId);
+          startAutoEdit(newId);
+          const variableTypeOptions = getVariableType(variable.type);
+          trackVariablesManagerEvent({
+            action: "duplicate",
+            varType: variableTypeOptions?.variableType
+          });
+        }
+      };
       const deleteAction = {
         name: __10("Delete", "elementor"),
         icon: TrashIcon,
@@ -2060,9 +2120,9 @@ function VariablesManagerPanel() {
           }
         }
       };
-      return [...typeActions, deleteAction];
+      return [...typeActions, duplicateAction, deleteAction];
     },
-    [variables, handleStartSync, handleStopSync]
+    [variables, handleStartSync, handleStopSync, duplicateVariable, startAutoEdit]
   );
   const hasVariables = Object.keys(variables).length > 0;
   return /* @__PURE__ */ React14.createElement(ThemeProvider, null, /* @__PURE__ */ React14.createElement(Panel, null, /* @__PURE__ */ React14.createElement(