@elementor/editor-variables 3.33.0-104 → 3.33.0-105

package/dist/index.js

@@ -116,9 +116,66 @@ var apiClient = {
       payload.value = value;
     }
     return (0, import_http_client.httpService)().post(BASE_PATH + "/restore", payload);
+  },
+  batch: (payload) => {
+    return (0, import_http_client.httpService)().post(BASE_PATH + "/batch", payload);
   }
 };
 
+// src/batch-operations.ts
+var isTempId = (id2) => {
+  return id2.startsWith("tmp-");
+};
+var buildOperationsArray = (originalVariables, currentVariables) => {
+  const operations = [];
+  Object.entries(currentVariables).forEach(([id2, variable]) => {
+    if (isTempId(id2)) {
+      operations.push({
+        type: "create",
+        variable: {
+          ...variable,
+          id: id2
+        }
+      });
+    } else if (originalVariables[id2]) {
+      const original = originalVariables[id2];
+      if (original.deleted && !variable.deleted) {
+        operations.push({
+          type: "restore",
+          id: id2,
+          ...original.label !== variable.label && { label: variable.label },
+          ...original.value !== variable.value && { value: variable.value }
+        });
+      } else if (!variable.deleted && (original.label !== variable.label || original.value !== variable.value)) {
+        operations.push({
+          type: "update",
+          id: id2,
+          variable: {
+            ...original.label !== variable.label && { label: variable.label },
+            ...original.value !== variable.value && { value: variable.value }
+          }
+        });
+      }
+    }
+  });
+  Object.entries(originalVariables).forEach(([id2, variable]) => {
+    if (isTempId(id2) || variable.deleted) {
+      return;
+    }
+    const currentVariable = currentVariables[id2];
+    if (!currentVariable || currentVariable.deleted) {
+      operations.push({
+        type: "delete",
+        id: id2
+      });
+    }
+  });
+  return operations.filter((op) => {
+    const id2 = op.id || op.variable?.id;
+    return id2 && !(isTempId(id2) && currentVariables[id2]?.deleted);
+  });
+};
+
 // src/storage.ts
 var STORAGE_KEY = "elementor-global-variables";
 var STORAGE_WATERMARK_KEY = "elementor-global-variables-watermark";
@@ -259,6 +316,9 @@ var service = {
   variables: () => {
     return storage.load();
   },
+  getWatermark: () => {
+    return storage.state.watermark;
+  },
   init: () => {
     service.load();
   },
@@ -361,6 +421,40 @@ var service = {
         variable: restoredVariable
       };
     });
+  },
+  batchSave: (originalVariables, currentVariables) => {
+    const operations = buildOperationsArray(originalVariables, currentVariables);
+    const batchPayload = { operations, watermark: storage.state.watermark };
+    return apiClient.batch(batchPayload).then((response) => {
+      const { success, data: payload } = response.data;
+      if (!success) {
+        throw new Error("Unexpected response from server");
+      }
+      return payload;
+    }).then((data) => {
+      const { results, watermark } = data;
+      handleWatermark(OP_RW, watermark);
+      if (results) {
+        results.forEach((result) => {
+          if (result.variable) {
+            const { id: variableId, ...variableData } = result.variable;
+            if (result.type === "create") {
+              storage.add(variableId, variableData);
+            } else {
+              storage.update(variableId, variableData);
+            }
+            styleVariablesRepository.update({
+              [variableId]: variableData
+            });
+          }
+        });
+      }
+      return {
+        success: true,
+        watermark,
+        operations: operations.length
+      };
+    });
   }
 };
 var handleWatermark = (operation, newWatermark) => {
@@ -998,7 +1092,21 @@ function VariablesManagerPanel() {
   const [isDirty, setIsDirty] = (0, import_react7.useState)(false);
   const [variables, setVariables] = (0, import_react7.useState)(getVariables(false));
   const [deletedVariables, setDeletedVariables] = (0, import_react7.useState)([]);
+  const [isSaving, setIsSaving] = (0, import_react7.useState)(false);
   usePreventUnload(isDirty);
+  const handleSave = (0, import_react7.useCallback)(async () => {
+    setIsSaving(true);
+    const originalVariables = getVariables(false);
+    const result = await service.batchSave(originalVariables, variables);
+    if (result.success) {
+      await service.load();
+      const updatedVariables = service.variables();
+      setVariables(updatedVariables);
+      setIsDirty(false);
+      setDeletedVariables([]);
+    }
+    setIsSaving(false);
+  }, [variables]);
   const menuActions = [
     {
       name: (0, import_i18n5.__)("Delete", "elementor"),
@@ -1040,7 +1148,18 @@ function VariablesManagerPanel() {
         onChange: handleOnChange
       }
     )
-  ), /* @__PURE__ */ React8.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React8.createElement(import_ui8.Button, { fullWidth: true, size: "small", color: "global", variant: "contained", disabled: !isDirty }, (0, import_i18n5.__)("Save changes", "elementor"))))));
+  ), /* @__PURE__ */ React8.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React8.createElement(
+    import_ui8.Button,
+    {
+      fullWidth: true,
+      size: "small",
+      color: "global",
+      variant: "contained",
+      disabled: !isDirty || isSaving,
+      onClick: handleSave
+    },
+    (0, import_i18n5.__)("Save changes", "elementor")
+  )))));
 }
 var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React8.createElement(import_ui8.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React8.createElement(import_icons3.XIcon, { fontSize: "small" }));
 var ErrorBoundaryFallback = () => /* @__PURE__ */ React8.createElement(import_ui8.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React8.createElement(import_ui8.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React8.createElement("strong", null, (0, import_i18n5.__)("Something went wrong", "elementor"))));