@elementor/editor-global-classes 0.7.1 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @elementor/editor-global-classes
 
+## 0.9.0
+
+### Minor Changes
+
+- d723ffa: Added unsaved changes dialog to global classes.
+
+### Patch Changes
+
+- Updated dependencies [9a5fd67]
+  - @elementor/editor-editing-panel@1.14.0
+
+## 0.8.0
+
+### Minor Changes
+
+- 994025a: Added "save changes" button to global classes panel.
+
+### Patch Changes
+
+- Updated dependencies [994025a]
+  - @elementor/editor-panels@0.12.0
+  - @elementor/editor-editing-panel@1.13.1
+
 ## 0.7.1
 
 ### Patch Changes

package/dist/index.js

@@ -28,69 +28,28 @@ var import_editor_editing_panel = require("@elementor/editor-editing-panel");
 var import_editor_panels2 = require("@elementor/editor-panels");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
-var import_store9 = require("@elementor/store");
+var import_store16 = require("@elementor/store");
 
 // src/components/class-manager/class-manager-button.tsx
-var React6 = __toESM(require("react"));
-var import_icons5 = require("@elementor/icons");
-var import_ui6 = require("@elementor/ui");
+var React7 = __toESM(require("react"));
+var import_icons6 = require("@elementor/icons");
+var import_ui7 = require("@elementor/ui");
 var import_i18n6 = require("@wordpress/i18n");
 
 // src/components/class-manager/class-manager-panel.tsx
-var React5 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var import_editor_panels = require("@elementor/editor-panels");
-var import_icons4 = require("@elementor/icons");
-var import_ui5 = require("@elementor/ui");
+var import_icons5 = require("@elementor/icons");
+var import_ui6 = require("@elementor/ui");
 var import_i18n5 = require("@wordpress/i18n");
 
-// src/components/class-manager/class-manager-introduction.tsx
-var React = __toESM(require("react"));
-var import_react = require("react");
-var import_editor_current_user = require("@elementor/editor-current-user");
-var import_editor_ui = require("@elementor/editor-ui");
-var import_ui = require("@elementor/ui");
-var import_i18n = require("@wordpress/i18n");
-var MESSAGE_KEY = "global-class-manager-4";
-var ClassManagerIntroduction = () => {
-  const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user.useSuppressedMessage)(MESSAGE_KEY);
-  const [shouldShowIntroduction, setShouldShowIntroduction] = (0, import_react.useState)(!isMessageSuppressed);
-  return /* @__PURE__ */ React.createElement(
-    import_editor_ui.IntroductionModal,
-    {
-      open: shouldShowIntroduction,
-      title: (0, import_i18n.__)("CSS Class manager", "elementor"),
-      content: /* @__PURE__ */ React.createElement(IntroductionContent, null),
-      handleClose: (shouldShowAgain) => {
-        if (!shouldShowAgain) {
-          suppressMessage();
-        }
-        setShouldShowIntroduction(false);
-      }
-    }
-  );
-};
-var IntroductionContent = () => {
-  return /* @__PURE__ */ React.createElement(import_ui.Stack, { gap: 1.5, padding: 3 }, /* @__PURE__ */ React.createElement(import_ui.Image, { sx: { width: "100%", height: "312px" }, src: "", alt: "Introduction" }), /* @__PURE__ */ React.createElement(import_ui.Box, null, /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n.__)(
-    "The CSS Class Manager allows you to manage and organize your site's CSS classes efficiently. You can reorder classes to adjust their priority, rename them to maintain clarity in your design system, and delete unused classes to keep your CSS structured.",
-    "elementor"
-  )), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n.__)(
-    "Changes apply globally\u2014any modifications will affect all elements using the class, impacting the class order and priority across your site.",
-    "elementor"
-  ))));
-};
-
-// src/components/class-manager/global-classes-list.tsx
-var React4 = __toESM(require("react"));
-var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_editor_ui2 = require("@elementor/editor-ui");
-var import_icons3 = require("@elementor/icons");
-var import_ui4 = require("@elementor/ui");
-var import_i18n4 = require("@wordpress/i18n");
-
-// src/global-classes-styles-provider.ts
-var import_editor_styles2 = require("@elementor/editor-styles");
+// src/hooks/use-dirty-state.ts
 var import_store2 = require("@elementor/store");
-var import_i18n2 = require("@wordpress/i18n");
+
+// src/store.ts
+var import_editor_props = require("@elementor/editor-props");
+var import_editor_styles = require("@elementor/editor-styles");
+var import_store = require("@elementor/store");
 
 // src/errors.ts
 var import_utils = require("@elementor/utils");
@@ -104,9 +63,6 @@ var GlobalClassLabelAlreadyExistsError = (0, import_utils.createError)({
 });
 
 // src/store.ts
-var import_editor_props = require("@elementor/editor-props");
-var import_editor_styles = require("@elementor/editor-styles");
-var import_store = require("@elementor/store");
 var initialState = {
   items: {},
   order: [],
@@ -134,6 +90,7 @@ var slice = (0, import_store.__createSlice)({
     },
     setOrder(state, { payload }) {
       state.order = payload;
+      state.isDirty = true;
     },
     update(state, { payload }) {
       const style = state.items[payload.style.id];
@@ -166,35 +123,109 @@ var slice = (0, import_store.__createSlice)({
 });
 var selectOrder = (state) => state[SLICE_NAME].order;
 var selectGlobalClasses = (state) => state[SLICE_NAME].items;
-var selectOrderedGlobalClasses = (0, import_store.__createSelector)(
+var selectOrderedClasses = (0, import_store.__createSelector)(
   selectGlobalClasses,
   selectOrder,
   (items, order) => order.map((id) => items[id])
 );
 var selectClass = (state, id) => state[SLICE_NAME].items[id] ?? null;
 var selectIsDirty = (state) => state.globalClasses.isDirty;
-var useOrderedGlobalClasses = () => {
-  const items = (0, import_store.__useSelector)(selectOrderedGlobalClasses);
-  return items;
+
+// src/hooks/use-dirty-state.ts
+var useDirtyState = () => {
+  return (0, import_store2.__useSelector)(selectIsDirty);
+};
+
+// src/publish-global-classes.ts
+var import_store4 = require("@elementor/store");
+
+// src/api.ts
+var import_http = require("@elementor/http");
+var RESOURCE_URL = "/global-classes";
+var apiClient = {
+  all: () => (0, import_http.httpService)().get("elementor/v1" + RESOURCE_URL),
+  update: (payload) => (0, import_http.httpService)().put("elementor/v1" + RESOURCE_URL, payload)
+};
+
+// src/publish-global-classes.ts
+async function publishGlobalClasses() {
+  if (!isDirty()) {
+    return;
+  }
+  const state = (0, import_store4.__getState)().globalClasses;
+  await apiClient.update({
+    items: state.items,
+    order: state.order
+  });
+  (0, import_store4.__dispatch)(slice.actions.setPristine());
+}
+function isDirty() {
+  return selectIsDirty((0, import_store4.__getState)());
+}
+
+// src/components/class-manager/class-manager-introduction.tsx
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_editor_current_user = require("@elementor/editor-current-user");
+var import_editor_ui = require("@elementor/editor-ui");
+var import_ui = require("@elementor/ui");
+var import_i18n = require("@wordpress/i18n");
+var MESSAGE_KEY = "global-class-manager-4";
+var ClassManagerIntroduction = () => {
+  const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user.useSuppressedMessage)(MESSAGE_KEY);
+  const [shouldShowIntroduction, setShouldShowIntroduction] = (0, import_react.useState)(!isMessageSuppressed);
+  return /* @__PURE__ */ React.createElement(
+    import_editor_ui.IntroductionModal,
+    {
+      open: shouldShowIntroduction,
+      title: (0, import_i18n.__)("CSS Class manager", "elementor"),
+      content: /* @__PURE__ */ React.createElement(IntroductionContent, null),
+      handleClose: (shouldShowAgain) => {
+        if (!shouldShowAgain) {
+          suppressMessage();
+        }
+        setShouldShowIntroduction(false);
+      }
+    }
+  );
+};
+var IntroductionContent = () => {
+  return /* @__PURE__ */ React.createElement(import_ui.Stack, { gap: 1.5, padding: 3 }, /* @__PURE__ */ React.createElement(import_ui.Image, { sx: { width: "100%", height: "312px" }, src: "", alt: "Introduction" }), /* @__PURE__ */ React.createElement(import_ui.Box, null, /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n.__)(
+    "The CSS Class Manager allows you to manage and organize your site's CSS classes efficiently. You can reorder classes to adjust their priority, rename them to maintain clarity in your design system, and delete unused classes to keep your CSS structured.",
+    "elementor"
+  )), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n.__)(
+    "Changes apply globally\u2014any modifications will affect all elements using the class, impacting the class order and priority across your site.",
+    "elementor"
+  ))));
 };
-var useGlobalClassesOrder = () => (0, import_store.__useSelector)(selectOrder);
+
+// src/components/class-manager/global-classes-list.tsx
+var React4 = __toESM(require("react"));
+var import_editor_styles_repository = require("@elementor/editor-styles-repository");
+var import_editor_ui2 = require("@elementor/editor-ui");
+var import_icons3 = require("@elementor/icons");
+var import_ui4 = require("@elementor/ui");
+var import_i18n4 = require("@wordpress/i18n");
 
 // src/global-classes-styles-provider.ts
+var import_editor_styles2 = require("@elementor/editor-styles");
+var import_store6 = require("@elementor/store");
+var import_i18n2 = require("@wordpress/i18n");
 var globalClassesStylesProvider = {
   key: "global-classes",
   priority: 30,
   actions: {
-    get: () => selectOrderedGlobalClasses((0, import_store2.__getState)()),
-    getById: (id) => selectClass((0, import_store2.__getState)(), id),
+    get: () => selectOrderedClasses((0, import_store6.__getState)()),
+    getById: (id) => selectClass((0, import_store6.__getState)(), id),
     create: (label) => {
-      const classes = selectGlobalClasses((0, import_store2.__getState)());
+      const classes = selectGlobalClasses((0, import_store6.__getState)());
       const existingLabels = Object.values(classes).map((style) => style.label);
       if (existingLabels.includes(label)) {
         throw new GlobalClassLabelAlreadyExistsError({ context: { label } });
       }
       const existingIds = Object.keys(classes);
       const id = (0, import_editor_styles2.generateId)("g-", existingIds);
-      (0, import_store2.__dispatch)(
+      (0, import_store6.__dispatch)(
         slice.actions.add({
           id,
           type: "class",
@@ -205,20 +236,20 @@ var globalClassesStylesProvider = {
       return id;
     },
     update: (payload) => {
-      (0, import_store2.__dispatch)(
+      (0, import_store6.__dispatch)(
         slice.actions.update({
           style: payload
         })
       );
     },
     delete: (id) => {
-      (0, import_store2.__dispatch)(slice.actions.delete(id));
+      (0, import_store6.__dispatch)(slice.actions.delete(id));
     },
     setOrder: (order) => {
-      (0, import_store2.__dispatch)(slice.actions.setOrder(order));
+      (0, import_store6.__dispatch)(slice.actions.setOrder(order));
     },
     updateProps: (args) => {
-      (0, import_store2.__dispatch)(
+      (0, import_store6.__dispatch)(
         slice.actions.updateProps({
           id: args.id,
           meta: args.meta,
@@ -227,13 +258,25 @@ var globalClassesStylesProvider = {
       );
     }
   },
-  subscribe: (cb) => (0, import_store2.__subscribeWithSelector)((state) => state.globalClasses, cb),
+  subscribe: (cb) => (0, import_store6.__subscribeWithSelector)((state) => state.globalClasses, cb),
   labels: {
     singular: (0, import_i18n2.__)("Global class", "elementor"),
     plural: (0, import_i18n2.__)("Global CSS Classes", "elementor")
   }
 };
 
+// src/hooks/use-classes-order.ts
+var import_store8 = require("@elementor/store");
+var useClassesOrder = () => {
+  return (0, import_store8.__useSelector)(selectOrder);
+};
+
+// src/hooks/use-ordered-classes.ts
+var import_store10 = require("@elementor/store");
+var useOrderedClasses = () => {
+  return (0, import_store10.__useSelector)(selectOrderedClasses);
+};
+
 // src/components/class-manager/delete-confirmation-dialog.tsx
 var React2 = __toESM(require("react"));
 var import_react2 = require("react");
@@ -330,8 +373,8 @@ var SortableItemIndicator = (0, import_ui3.styled)(import_ui3.Box)`
 
 // src/components/class-manager/global-classes-list.tsx
 var GlobalClassesList = () => {
-  const cssClasses = useOrderedGlobalClasses();
-  const [classesOrder, reorderClasses] = useClassesOrder();
+  const cssClasses = useOrderedClasses();
+  const [classesOrder, reorderClasses] = useReorder();
   if (!cssClasses?.length) {
     return /* @__PURE__ */ React4.createElement(EmptyState, null);
   }
@@ -351,8 +394,8 @@ var GlobalClassesList = () => {
     ));
   }))));
 };
-var useClassesOrder = () => {
-  const order = useGlobalClassesOrder();
+var useReorder = () => {
+  const order = useClassesOrder();
   const reorder = (newIds) => {
     globalClassesStylesProvider.actions.setOrder(newIds);
   };
@@ -512,86 +555,134 @@ var validateLabel = (newLabel) => {
   return null;
 };
 
+// src/components/class-manager/unsaved-changes-dialog.tsx
+var React5 = __toESM(require("react"));
+var import_react3 = require("react");
+var import_icons4 = require("@elementor/icons");
+var import_ui5 = require("@elementor/ui");
+var TITLE_ID2 = "unsaved-changes-dialog";
+var UnsavedChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React5.createElement(import_ui5.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
+var UnsavedChangesDialogTitle = ({ children }) => /* @__PURE__ */ React5.createElement(import_ui5.DialogTitle, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React5.createElement(import_icons4.AlertTriangleFilledIcon, { color: "secondary" }), children);
+var UnsavedChangesDialogContent = ({ children }) => /* @__PURE__ */ React5.createElement(import_ui5.DialogContent, null, /* @__PURE__ */ React5.createElement(import_ui5.DialogContentText, { variant: "body2", color: "textPrimary" }, children));
+var UnsavedChangesDialogActions = ({ actions }) => {
+  const { cancel, confirm } = actions;
+  return /* @__PURE__ */ React5.createElement(import_ui5.DialogActions, null, /* @__PURE__ */ React5.createElement(import_ui5.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), /* @__PURE__ */ React5.createElement(import_ui5.Button, { variant: "contained", color: "secondary", onClick: confirm.action }, confirm.label));
+};
+UnsavedChangesDialog.Title = UnsavedChangesDialogTitle;
+UnsavedChangesDialog.Content = UnsavedChangesDialogContent;
+UnsavedChangesDialog.Actions = UnsavedChangesDialogActions;
+var useDialog = () => {
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+  return { isOpen, open, close };
+};
+
 // src/components/class-manager/class-manager-panel.tsx
 var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
   id: "class-manager-panel",
   component: ClassManagerPanel
 });
 function ClassManagerPanel() {
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(import_ui5.ErrorBoundary, { fallback: /* @__PURE__ */ React5.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React5.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React5.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React5.createElement(import_ui5.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React5.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React5.createElement(import_icons4.ColorSwatchIcon, { fontSize: "inherit", sx: { transform: "rotate(90deg)" } }), (0, import_i18n5.__)("CSS Class manager", "elementor")), /* @__PURE__ */ React5.createElement(CloseButton, { sx: { marginLeft: "auto" } }))), /* @__PURE__ */ React5.createElement(import_editor_panels.PanelBody, { px: 2 }, /* @__PURE__ */ React5.createElement(GlobalClassesList, null)))), /* @__PURE__ */ React5.createElement(ClassManagerIntroduction, null));
+  const isDirty3 = useDirtyState();
+  const { close: closePanel } = usePanelActions();
+  const {
+    open: openUnsavedChangesDialog,
+    close: closeUnsavedChangesDialog,
+    isOpen: isUnsavedChangesDialogOpen
+  } = useDialog();
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(import_ui6.ErrorBoundary, { fallback: /* @__PURE__ */ React6.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React6.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React6.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React6.createElement(import_ui6.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React6.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React6.createElement(import_icons5.ColorSwatchIcon, { fontSize: "inherit", sx: { transform: "rotate(90deg)" } }), (0, import_i18n5.__)("CSS Class manager", "elementor")), /* @__PURE__ */ React6.createElement(
+    CloseButton,
+    {
+      sx: { marginLeft: "auto" },
+      onClose: () => {
+        if (isDirty3) {
+          openUnsavedChangesDialog();
+          return;
+        }
+        closePanel();
+      }
+    }
+  ))), /* @__PURE__ */ React6.createElement(import_editor_panels.PanelBody, { px: 2 }, /* @__PURE__ */ React6.createElement(GlobalClassesList, null)), /* @__PURE__ */ React6.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React6.createElement(
+    import_ui6.Button,
+    {
+      fullWidth: true,
+      size: "small",
+      variant: "contained",
+      color: "global",
+      disabled: !isDirty3,
+      onClick: publishGlobalClasses
+    },
+    (0, import_i18n5.__)("Save changes", "elementor")
+  )))), /* @__PURE__ */ React6.createElement(ClassManagerIntroduction, null), isUnsavedChangesDialogOpen && /* @__PURE__ */ React6.createElement(UnsavedChangesDialog, null, /* @__PURE__ */ React6.createElement(UnsavedChangesDialog.Title, null, (0, import_i18n5.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React6.createElement(UnsavedChangesDialog.Content, null, (0, import_i18n5.__)("You have unsaved changes in the Class Manager.", "elementor"), /* @__PURE__ */ React6.createElement("br", null), (0, import_i18n5.__)("To avoid losing your updates, save your changes before leaving.", "elementor")), /* @__PURE__ */ React6.createElement(
+    UnsavedChangesDialog.Actions,
+    {
+      actions: {
+        cancel: {
+          label: (0, import_i18n5.__)("Cancel", "elementor"),
+          action: closeUnsavedChangesDialog
+        },
+        confirm: {
+          label: (0, import_i18n5.__)("Save & Continue", "elementor"),
+          action: () => {
+            publishGlobalClasses();
+            closeUnsavedChangesDialog();
+            closePanel();
+          }
+        }
+      }
+    }
+  )));
 }
-var CloseButton = (props) => {
-  const { close } = usePanelActions();
-  return /* @__PURE__ */ React5.createElement(import_ui5.IconButton, { size: "small", color: "secondary", onClick: close, ...props }, /* @__PURE__ */ React5.createElement(import_icons4.XIcon, { fontSize: "small" }));
-};
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React5.createElement(import_ui5.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React5.createElement(import_ui5.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React5.createElement("strong", null, (0, import_i18n5.__)("Something went wrong", "elementor"))));
+var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React6.createElement(import_ui6.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React6.createElement(import_icons5.XIcon, { fontSize: "small" }));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React6.createElement(import_ui6.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React6.createElement(import_ui6.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React6.createElement("strong", null, (0, import_i18n5.__)("Something went wrong", "elementor"))));
 
 // src/components/class-manager/class-manager-button.tsx
 var ClassManagerButton = () => {
   const { open } = usePanelActions();
-  return /* @__PURE__ */ React6.createElement(import_ui6.Tooltip, { title: (0, import_i18n6.__)("Class manager", "elementor"), placement: "top" }, /* @__PURE__ */ React6.createElement(import_ui6.IconButton, { onClick: open }, /* @__PURE__ */ React6.createElement(import_icons5.ColorSwatchIcon, { fontSize: "tiny" })));
-};
-
-// src/components/populate-store.tsx
-var import_react3 = require("react");
-var import_store5 = require("@elementor/store");
-
-// src/api.ts
-var import_http = require("@elementor/http");
-var RESOURCE_URL = "/global-classes";
-var apiClient = {
-  all: () => (0, import_http.httpService)().get("elementor/v1" + RESOURCE_URL),
-  update: (payload) => (0, import_http.httpService)().put("elementor/v1" + RESOURCE_URL, payload)
+  return /* @__PURE__ */ React7.createElement(import_ui7.Tooltip, { title: (0, import_i18n6.__)("Class manager", "elementor"), placement: "top" }, /* @__PURE__ */ React7.createElement(import_ui7.IconButton, { onClick: open }, /* @__PURE__ */ React7.createElement(import_icons6.ColorSwatchIcon, { fontSize: "tiny" })));
 };
 
 // src/components/populate-store.tsx
+var import_react4 = require("react");
+var import_store12 = require("@elementor/store");
 function PopulateStore() {
-  const dispatch2 = (0, import_store5.__useDispatch)();
-  (0, import_react3.useEffect)(() => {
+  const dispatch3 = (0, import_store12.__useDispatch)();
+  (0, import_react4.useEffect)(() => {
     apiClient.all().then((res) => {
       const { data, meta } = res.data;
-      dispatch2(slice.actions.init({ items: data, order: meta.order }));
+      dispatch3(slice.actions.init({ items: data, order: meta.order }));
     });
-  }, [dispatch2]);
+  }, [dispatch3]);
   return null;
 }
 
 // src/sync-with-document-save.ts
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
-var import_store7 = require("@elementor/store");
+var import_store14 = require("@elementor/store");
 function syncWithDocumentSave() {
   const unsubscribe = syncDirtyState();
   bindSaveAction();
   return unsubscribe;
 }
 function syncDirtyState() {
-  return (0, import_store7.__subscribeWithSelector)(selectIsDirty, () => {
-    if (!isDirty()) {
+  return (0, import_store14.__subscribeWithSelector)(selectIsDirty, () => {
+    if (!isDirty2()) {
       return;
     }
     (0, import_editor_v1_adapters.__privateRunCommandSync)("document/save/set-is-modified", { status: true }, { internal: true });
   });
 }
 function bindSaveAction() {
-  (0, import_editor_v1_adapters.registerDataHook)("after", "document/save/save", async () => {
-    if (!isDirty()) {
-      return;
-    }
-    const state = (0, import_store7.__getState)().globalClasses;
-    await apiClient.update({
-      items: state.items,
-      order: state.order
-    });
-    (0, import_store7.__dispatch)(slice.actions.setPristine());
-  });
+  (0, import_editor_v1_adapters.registerDataHook)("after", "document/save/save", publishGlobalClasses);
 }
-function isDirty() {
-  return selectIsDirty((0, import_store7.__getState)());
+function isDirty2() {
+  return selectIsDirty((0, import_store14.__getState)());
 }
 
 // src/init.ts
 function init() {
-  (0, import_store9.__registerSlice)(slice);
+  (0, import_store16.__registerSlice)(slice);
   (0, import_editor_panels2.__registerPanel)(panel);
   import_editor_styles_repository2.stylesRepository.register(globalClassesStylesProvider);
   (0, import_editor.injectIntoLogic)({