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

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 
 // src/components/variables-manager/variables-manager-panel.tsx
 import * as React8 from "react";
-import { useEffect, useState as useState4 } from "react";
+import { useCallback, useEffect, useState as useState4 } from "react";
 import {
   __createPanel as createPanel,
   Panel,
@@ -86,9 +86,66 @@ var apiClient = {
       payload.value = value;
     }
     return httpService().post(BASE_PATH + "/restore", payload);
+  },
+  batch: (payload) => {
+    return 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";
@@ -229,6 +286,9 @@ var service = {
   variables: () => {
     return storage.load();
   },
+  getWatermark: () => {
+    return storage.state.watermark;
+  },
   init: () => {
     service.load();
   },
@@ -331,6 +391,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) => {
@@ -978,7 +1072,21 @@ function VariablesManagerPanel() {
   const [isDirty, setIsDirty] = useState4(false);
   const [variables, setVariables] = useState4(getVariables(false));
   const [deletedVariables, setDeletedVariables] = useState4([]);
+  const [isSaving, setIsSaving] = useState4(false);
   usePreventUnload(isDirty);
+  const handleSave = 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: __5("Delete", "elementor"),
@@ -1020,7 +1128,18 @@ function VariablesManagerPanel() {
         onChange: handleOnChange
       }
     )
-  ), /* @__PURE__ */ React8.createElement(PanelFooter, null, /* @__PURE__ */ React8.createElement(Button, { fullWidth: true, size: "small", color: "global", variant: "contained", disabled: !isDirty }, __5("Save changes", "elementor"))))));
+  ), /* @__PURE__ */ React8.createElement(PanelFooter, null, /* @__PURE__ */ React8.createElement(
+    Button,
+    {
+      fullWidth: true,
+      size: "small",
+      color: "global",
+      variant: "contained",
+      disabled: !isDirty || isSaving,
+      onClick: handleSave
+    },
+    __5("Save changes", "elementor")
+  )))));
 }
 var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React8.createElement(IconButton3, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React8.createElement(XIcon, { fontSize: "small" }));
 var ErrorBoundaryFallback = () => /* @__PURE__ */ React8.createElement(Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React8.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React8.createElement("strong", null, __5("Something went wrong", "elementor"))));