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

package/dist/index.js

@@ -1062,6 +1062,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] = (0, import_react6.useState)(() => getVariables(false));
@@ -1089,6 +1113,26 @@ var useVariablesManagerState = () => {
     setIsDirty(true);
     return newId;
   }, []);
+  const duplicateVariable = (0, import_react6.useCallback)((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 = (0, import_react6.useCallback)((itemId) => {
     setDeletedVariables((prev) => [...prev, itemId]);
     setVariables((prev) => ({ ...prev, [itemId]: { ...prev[itemId], deleted: true } }));
@@ -1137,6 +1181,7 @@ var useVariablesManagerState = () => {
     isSaveDisabled,
     handleOnChange,
     createVariable: createVariable2,
+    duplicateVariable,
     handleDeleteVariable,
     handleStartSync,
     handleStopSync,
@@ -1952,6 +1997,7 @@ function VariablesManagerPanel() {
     isSaveDisabled,
     handleOnChange,
     createVariable: createVariable2,
+    duplicateVariable,
     handleDeleteVariable,
     handleStartSync: startSyncFromState,
     handleStopSync: stopSyncFromState,
@@ -2059,6 +2105,20 @@ function VariablesManagerPanel() {
           onStopSync: handleStopSync
         }
       });
+      const duplicateAction = {
+        name: (0, import_i18n10.__)("Duplicate", "elementor"),
+        icon: import_icons5.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: (0, import_i18n10.__)("Delete", "elementor"),
         icon: import_icons5.TrashIcon,
@@ -2072,9 +2132,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(import_editor_ui5.ThemeProvider, null, /* @__PURE__ */ React14.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React14.createElement(