@elementor/editor-global-classes 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,61 @@
 # @elementor/editor-global-classes
 
+## 0.12.0
+
+### Minor Changes
+
+- e798985: Support preview in Global Classes
+- c3a0125: Clean modified status on global classes save.
+
+### Patch Changes
+
+- a87cdd1: Add image to class manager introduction
+- Updated dependencies [7ff3371]
+- Updated dependencies [1e2dfa0]
+- Updated dependencies [1ead543]
+- Updated dependencies [c5d5e79]
+- Updated dependencies [0ed25f2]
+- Updated dependencies [6379dba]
+- Updated dependencies [d0d5d6e]
+- Updated dependencies [a789dfa]
+- Updated dependencies [dcfcd9f]
+- Updated dependencies [e798985]
+- Updated dependencies [5c469a4]
+- Updated dependencies [c63e5db]
+- Updated dependencies [d8bc786]
+- Updated dependencies [4c2935b]
+- Updated dependencies [f03fcf0]
+- Updated dependencies [8231e7c]
+- Updated dependencies [6a5dd01]
+- Updated dependencies [19f5dfe]
+- Updated dependencies [c002cba]
+- Updated dependencies [353031f]
+- Updated dependencies [51432b9]
+- Updated dependencies [03a6feb]
+- Updated dependencies [0909b4b]
+- Updated dependencies [c3a0125]
+  - @elementor/editor-editing-panel@1.18.0
+  - @elementor/editor-current-user@0.3.0
+  - @elementor/editor-ui@0.4.2
+  - @elementor/editor-v1-adapters@0.11.0
+  - @elementor/editor-props@0.11.0
+  - @elementor/editor@0.18.3
+  - @elementor/editor-documents@0.12.0
+  - @elementor/editor-panels@0.13.0
+  - @elementor/editor-styles-repository@0.7.6
+  - @elementor/editor-styles@0.6.3
+
+## 0.11.1
+
+### Patch Changes
+
+- f6a49b1: Global classes list UI updates.
+- Updated dependencies [7d37fc1]
+  - @elementor/editor-props@0.10.0
+  - @elementor/editor-editing-panel@1.17.1
+  - @elementor/editor-styles-repository@0.7.5
+  - @elementor/editor-styles@0.6.2
+
 ## 0.11.0
 
 ### Minor Changes

package/dist/index.js

@@ -32,16 +32,18 @@ var import_store16 = require("@elementor/store");
 
 // src/components/class-manager/class-manager-button.tsx
 var React8 = __toESM(require("react"));
-var import_editor_documents = require("@elementor/editor-documents");
+var import_editor_documents2 = require("@elementor/editor-documents");
 var import_ui7 = require("@elementor/ui");
 var import_i18n6 = require("@wordpress/i18n");
 
 // src/components/class-manager/class-manager-panel.tsx
 var React7 = __toESM(require("react"));
 var import_react4 = require("react");
+var import_editor_documents = require("@elementor/editor-documents");
 var import_editor_panels = require("@elementor/editor-panels");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 var import_icons6 = require("@elementor/icons");
+var import_query = require("@elementor/query");
 var import_ui6 = require("@elementor/ui");
 var import_i18n5 = require("@wordpress/i18n");
 
@@ -138,32 +140,44 @@ var useDirtyState = () => {
   return (0, import_store2.__useSelector)(selectIsDirty);
 };
 
-// src/publish-global-classes.ts
+// src/save-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)
+  all: () => (0, import_http.httpService)().get("elementor/v1" + RESOURCE_URL, {
+    params: {
+      context: "preview"
+    }
+  }),
+  publish: (payload) => (0, import_http.httpService)().put("elementor/v1" + RESOURCE_URL, payload, {
+    params: {
+      context: "frontend"
+    }
+  }),
+  saveDraft: (payload) => (0, import_http.httpService)().put("elementor/v1" + RESOURCE_URL, payload, {
+    params: {
+      context: "preview"
+    }
+  })
 };
 
-// src/publish-global-classes.ts
-async function publishGlobalClasses() {
-  if (!isDirty()) {
-    return;
-  }
+// src/save-global-classes.ts
+async function saveGlobalClasses({ context: context2 }) {
   const state = (0, import_store4.__getState)().globalClasses;
-  await apiClient.update({
+  const data = {
     items: state.items,
     order: state.order
-  });
+  };
+  if (context2 === "preview") {
+    await apiClient.saveDraft(data);
+    return;
+  }
+  await apiClient.publish(data);
   (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"));
@@ -192,7 +206,14 @@ var ClassManagerIntroduction = () => {
   );
 };
 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.__)(
+  return /* @__PURE__ */ React.createElement(import_ui.Stack, { gap: 1.5, padding: 3 }, /* @__PURE__ */ React.createElement(
+    import_ui.Image,
+    {
+      sx: { width: "100%", height: "312px" },
+      src: "https://assets.elementor.com/packages/v1/images/class-manager-intro.svg",
+      alt: ""
+    }
+  ), /* @__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.__)(
@@ -326,7 +347,7 @@ var React4 = __toESM(require("react"));
 var import_icons3 = require("@elementor/icons");
 var import_ui3 = require("@elementor/ui");
 var SortableProvider = (props) => /* @__PURE__ */ React4.createElement(import_ui3.UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
-var SortableTrigger = (props) => /* @__PURE__ */ React4.createElement("div", { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React4.createElement(import_icons3.GripVerticalIcon, { fontSize: "tiny" }));
+var SortableTrigger = (props) => /* @__PURE__ */ React4.createElement(StyledSortableTrigger, { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React4.createElement(import_icons3.GripVerticalIcon, { fontSize: "tiny" }));
 var SortableItem = ({ children, id: id2, ...props }) => {
   return /* @__PURE__ */ React4.createElement(
     import_ui3.UnstableSortableItem,
@@ -345,55 +366,45 @@ var SortableItem = ({ children, id: id2, ...props }) => {
         isDragPlaceholder
       }) => {
         return /* @__PURE__ */ React4.createElement(
-          StyledSortableItem,
+          import_ui3.Box,
           {
             ...itemProps,
-            sx: itemStyle,
+            style: itemStyle,
+            component: "li",
             role: "listitem",
-            ...isDragOverlay ? { component: import_ui3.Paper, elevation: 0 } : {}
+            sx: {
+              backgroundColor: isDragOverlay ? "background.paper" : void 0
+            }
           },
-          /* @__PURE__ */ React4.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }),
           children({
             itemProps,
             isDragged,
             triggerProps,
             itemStyle,
             triggerStyle,
-            dropIndicationStyle,
-            showDropIndication,
             isDragPlaceholder
-          })
+          }),
+          showDropIndication && /* @__PURE__ */ React4.createElement(SortableItemIndicator, { style: dropIndicationStyle })
         );
       }
     }
   );
 };
-var StyledSortableItem = (0, import_ui3.styled)(import_ui3.Box)`
-	position: relative;
-
-	&:hover {
-		& .class-item-sortable-trigger {
-			visibility: visible;
-		}
-	}
-
-	& .class-item-sortable-trigger {
-		visibility: hidden;
-		position: absolute;
-		left: 0;
-		top: 50%;
-		transform: translate( -75%, -50% );
-	}
-`;
+var StyledSortableTrigger = (0, import_ui3.styled)("div")(({ theme }) => ({
+  position: "absolute",
+  left: 0,
+  top: "50%",
+  transform: `translate( -${theme.spacing(1.5)}, -50% )`,
+  color: theme.palette.action.active
+}));
 var SortableItemIndicator = (0, import_ui3.styled)(import_ui3.Box)`
 	width: 100%;
-	height: 3px;
-	border-radius: ${({ theme }) => theme.spacing(0.5)};
+	height: 1px;
 	background-color: ${({ theme }) => theme.palette.text.primary};
 `;
 
 // src/components/class-manager/global-classes-list.tsx
-var GlobalClassesList = () => {
+var GlobalClassesList = ({ disabled }) => {
   const cssClasses = useOrderedClasses();
   const [classesOrder, reorderClasses] = useReorder();
   if (!cssClasses?.length) {
@@ -403,16 +414,16 @@ var GlobalClassesList = () => {
     const renameClass = (newLabel) => {
       globalClassesStylesProvider.actions.update({ label: newLabel, id: id2 });
     };
-    return /* @__PURE__ */ React5.createElement(SortableItem, { key: id2, id: id2 }, ({ isDragged, showDropIndication, dropIndicationStyle, isDragPlaceholder }) => /* @__PURE__ */ React5.createElement(
+    return /* @__PURE__ */ React5.createElement(SortableItem, { key: id2, id: id2 }, ({ isDragged, isDragPlaceholder, triggerProps, triggerStyle }) => /* @__PURE__ */ React5.createElement(
       ClassItem,
       {
         id: id2,
         label,
         renameClass,
         selected: isDragged,
-        disabled: isDragPlaceholder
-      },
-      showDropIndication && /* @__PURE__ */ React5.createElement(SortableItemIndicator, { style: dropIndicationStyle })
+        disabled: disabled || isDragPlaceholder,
+        sortableTriggerProps: { ...triggerProps, style: triggerStyle }
+      }
     ));
   }))));
 };
@@ -423,14 +434,7 @@ var useReorder = () => {
   };
   return [order, reorder];
 };
-var ClassItem = ({
-  id: id2,
-  label,
-  renameClass,
-  selected,
-  children,
-  disabled
-}) => {
+var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTriggerProps }) => {
   const {
     ref: editableRef,
     openEditMode,
@@ -447,99 +451,100 @@ var ClassItem = ({
     variant: "popover",
     disableAutoFocus: true
   });
-  return /* @__PURE__ */ React5.createElement(import_ui4.Stack, { direction: "row", alignItems: "center", gap: 1, flexGrow: 1, flexShrink: 0 }, /* @__PURE__ */ React5.createElement(
-    StyledListItem,
+  const isSelected = (selected || popupState.isOpen) && !disabled;
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
+    StyledListItemButton,
     {
-      component: "div",
-      disablePadding: true,
+      dense: true,
       disableGutters: true,
-      secondaryAction: /* @__PURE__ */ React5.createElement(
-        import_ui4.Tooltip,
-        {
-          placement: "top",
-          className: "class-item-more-actions",
-          title: (0, import_i18n4.__)("More actions", "elementor")
-        },
-        /* @__PURE__ */ React5.createElement(import_ui4.IconButton, { size: "tiny", ...(0, import_ui4.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React5.createElement(import_icons4.DotsVerticalIcon, { fontSize: "tiny" }))
-      )
+      showActions: isSelected || isEditing,
+      shape: "rounded",
+      onDoubleClick: openEditMode,
+      selected: isSelected,
+      disabled,
+      focusVisibleClassName: "visible-class-item"
     },
+    /* @__PURE__ */ React5.createElement(SortableTrigger, { ...sortableTriggerProps }),
+    /* @__PURE__ */ React5.createElement(Indicator, { isActive: isEditing, isError: !!error }, isEditing ? /* @__PURE__ */ React5.createElement(
+      import_editor_ui2.EditableField,
+      {
+        ref: editableRef,
+        error,
+        as: import_ui4.Typography,
+        variant: "caption",
+        ...getEditableProps()
+      }
+    ) : /* @__PURE__ */ React5.createElement(import_editor_ui2.EllipsisWithTooltip, { title: label, as: import_ui4.Typography, variant: "caption" })),
     /* @__PURE__ */ React5.createElement(
-      import_ui4.ListItemButton,
+      import_ui4.Tooltip,
       {
-        dense: true,
-        disableGutters: true,
-        shape: "rounded",
-        onDoubleClick: openEditMode,
-        selected: selected || popupState.isOpen,
-        disabled,
-        focusVisibleClassName: "visible-class-item",
-        sx: {
-          minHeight: "36px",
-          display: "flex",
-          "&.visible-class-item": {
-            boxShadow: "none !important"
-          }
-        }
+        placement: "top",
+        className: "class-item-more-actions",
+        title: (0, import_i18n4.__)("More actions", "elementor")
+      },
+      /* @__PURE__ */ React5.createElement(import_ui4.IconButton, { size: "tiny", ...(0, import_ui4.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React5.createElement(import_icons4.DotsVerticalIcon, { fontSize: "tiny" }))
+    )
+  ), /* @__PURE__ */ React5.createElement(
+    import_ui4.Menu,
+    {
+      ...(0, import_ui4.bindMenu)(popupState),
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
       },
-      /* @__PURE__ */ React5.createElement(Indicator, { isActive: isEditing, isError: !!error }, isEditing ? /* @__PURE__ */ React5.createElement(
-        import_editor_ui2.EditableField,
-        {
-          ref: editableRef,
-          error,
-          as: import_ui4.Typography,
-          variant: "caption",
-          ...getEditableProps()
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      }
+    },
+    /* @__PURE__ */ React5.createElement(
+      import_ui4.MenuItem,
+      {
+        sx: { minWidth: "160px" },
+        onClick: () => {
+          popupState.close();
+          openEditMode();
         }
-      ) : /* @__PURE__ */ React5.createElement(import_editor_ui2.EllipsisWithTooltip, { title: label, as: import_ui4.Typography, variant: "caption" }))
+      },
+      /* @__PURE__ */ React5.createElement(import_ui4.ListItemText, { primary: (0, import_i18n4.__)("Rename", "elementor") })
     ),
-    children,
     /* @__PURE__ */ React5.createElement(
-      import_ui4.Menu,
+      import_ui4.MenuItem,
       {
-        ...(0, import_ui4.bindMenu)(popupState),
-        anchorOrigin: {
-          vertical: "bottom",
-          horizontal: "right"
-        },
-        transformOrigin: {
-          vertical: "top",
-          horizontal: "right"
+        onClick: () => {
+          popupState.close();
+          openDialog({ id: id2, label });
         }
       },
-      /* @__PURE__ */ React5.createElement(
-        import_ui4.MenuItem,
-        {
-          sx: { minWidth: "160px" },
-          onClick: () => {
-            popupState.close();
-            openEditMode();
-          }
-        },
-        /* @__PURE__ */ React5.createElement(import_ui4.ListItemText, { primary: (0, import_i18n4.__)("Rename", "elementor") })
-      ),
-      /* @__PURE__ */ React5.createElement(
-        import_ui4.MenuItem,
-        {
-          onClick: () => {
-            popupState.close();
-            openDialog({ id: id2, label });
-          }
-        },
-        /* @__PURE__ */ React5.createElement(import_ui4.ListItemText, { primary: (0, import_i18n4.__)("Delete", "elementor"), sx: { color: "error.light" } })
-      )
+      /* @__PURE__ */ React5.createElement(import_ui4.ListItemText, { primary: (0, import_i18n4.__)("Delete", "elementor"), sx: { color: "error.light" } })
     )
   ));
 };
-var StyledListItem = (0, import_ui4.styled)(import_ui4.ListItem)`
-	.class-item-more-actions {
-		visibility: hidden;
+var StyledListItemButton = (0, import_ui4.styled)(import_ui4.ListItemButton, {
+  shouldForwardProp: (prop) => !["showActions"].includes(prop)
+})(
+  ({ showActions }) => `
+	min-height: 36px;
+
+	&.visible-class-item {
+		box-shadow: none !important;
+	}
+
+	.class-item-more-actions, .class-item-sortable-trigger {
+		visibility: ${showActions ? "visible" : "hidden"};
+	}
+
+	.class-item-sortable-trigger {
+		visibility: ${showActions ? "visible" : "hidden"};
 	}
-	&:hover {
-		.class-item-more-actions {
+
+	&:hover&:not(:disabled) {
+		.class-item-more-actions, .class-item-sortable-trigger  {
 			visibility: visible;
 		}
 	}
-`;
+`
+);
 var EmptyState = () => /* @__PURE__ */ React5.createElement(import_ui4.Stack, { alignItems: "center", gap: 1.5, pt: 10, px: 0.5, maxWidth: "260px", margin: "auto" }, /* @__PURE__ */ React5.createElement(FlippedColorSwatchIcon, { fontSize: "large" }), /* @__PURE__ */ React5.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, (0, import_i18n4.__)("There are no global classes yet.", "elementor")), /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n4.__)(
   "CSS classes created in the editor panel will appear here. Once they are available, you can arrange their hierarchy, rename them, or delete them as needed.",
   "elementor"
@@ -558,7 +563,8 @@ var Indicator = (0, import_ui4.styled)(import_ui4.Box, {
   borderRadius: theme.spacing(0.5),
   border: getIndicatorBorder({ isActive, isError, theme }),
   padding: `0 ${theme.spacing(1)}`,
-  marginLeft: isActive ? theme.spacing(1) : 0
+  marginLeft: isActive ? theme.spacing(1) : 0,
+  minWidth: 0
 }));
 var getIndicatorBorder = ({ isActive, isError, theme }) => {
   if (isError) {
@@ -615,36 +621,46 @@ var id = "global-classes-manager";
 var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
   id,
   component: ClassManagerPanel,
-  onOpen: () => (0, import_editor_v1_adapters.changeEditMode)(id),
-  onClose: () => (0, import_editor_v1_adapters.changeEditMode)("edit"),
-  allowedEditModes: ["edit", id]
+  allowedEditModes: ["edit", id],
+  onOpen: () => {
+    (0, import_editor_v1_adapters.changeEditMode)(id);
+    return (0, import_editor_documents.getDocumentModifiedStatus)();
+  },
+  onClose: (documentModifiedState) => {
+    (0, import_editor_v1_adapters.changeEditMode)("edit");
+    if ((0, import_editor_documents.getDocumentModifiedStatus)() !== documentModifiedState) {
+      (0, import_editor_documents.setDocumentModifiedStatus)(documentModifiedState);
+    }
+  }
 });
 function ClassManagerPanel() {
-  const isDirty3 = useDirtyState();
+  const isDirty2 = useDirtyState();
   const { close: closePanel } = usePanelActions();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
+  const { mutateAsync: publish, isPending: isPublishing } = usePublish();
   usePreventUnload();
   return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(import_ui6.ErrorBoundary, { fallback: /* @__PURE__ */ React7.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React7.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React7.createElement(import_ui6.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React7.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), (0, import_i18n5.__)("CSS Class manager", "elementor")), /* @__PURE__ */ React7.createElement(
     CloseButton,
     {
       sx: { marginLeft: "auto" },
       onClose: () => {
-        if (isDirty3) {
+        if (isDirty2) {
           openSaveChangesDialog();
           return;
         }
         closePanel();
       }
     }
-  ))), /* @__PURE__ */ React7.createElement(import_editor_panels.PanelBody, { px: 2 }, /* @__PURE__ */ React7.createElement(GlobalClassesList, null)), /* @__PURE__ */ React7.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React7.createElement(
+  ))), /* @__PURE__ */ React7.createElement(import_editor_panels.PanelBody, { px: 2 }, /* @__PURE__ */ React7.createElement(GlobalClassesList, { disabled: isPublishing })), /* @__PURE__ */ React7.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React7.createElement(
     import_ui6.Button,
     {
       fullWidth: true,
       size: "small",
-      variant: "contained",
       color: "global",
-      disabled: !isDirty3,
-      onClick: publishGlobalClasses
+      variant: "contained",
+      onClick: publish,
+      disabled: !isDirty2,
+      loading: isPublishing
     },
     (0, import_i18n5.__)("Save changes", "elementor")
   )))), /* @__PURE__ */ React7.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React7.createElement(SaveChangesDialog, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.Title, null, (0, import_i18n5.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n5.__)("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n5.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React7.createElement(
@@ -658,7 +674,7 @@ function ClassManagerPanel() {
         confirm: {
           label: (0, import_i18n5.__)("Save & Continue", "elementor"),
           action: async () => {
-            await publishGlobalClasses();
+            await publish();
             closeSaveChangesDialog();
             closePanel();
           }
@@ -670,10 +686,10 @@ function ClassManagerPanel() {
 var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React7.createElement(import_ui6.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React7.createElement(import_icons6.XIcon, { fontSize: "small" }));
 var ErrorBoundaryFallback = () => /* @__PURE__ */ React7.createElement(import_ui6.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React7.createElement(import_ui6.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React7.createElement("strong", null, (0, import_i18n5.__)("Something went wrong", "elementor"))));
 var usePreventUnload = () => {
-  const isDirty3 = useDirtyState();
+  const isDirty2 = useDirtyState();
   (0, import_react4.useEffect)(() => {
     const handleBeforeUnload = (event) => {
-      if (isDirty3) {
+      if (isDirty2) {
         event.preventDefault();
       }
     };
@@ -681,14 +697,26 @@ var usePreventUnload = () => {
     return () => {
       window.removeEventListener("beforeunload", handleBeforeUnload);
     };
-  }, [isDirty3]);
+  }, [isDirty2]);
+};
+var usePublish = () => {
+  const document = (0, import_editor_documents.__useActiveDocument)();
+  const [initialDocumentStatus] = (0, import_react4.useState)(document?.isDirty ?? false);
+  return (0, import_query.useMutation)({
+    mutationFn: () => saveGlobalClasses({ context: "frontend" }),
+    onSuccess: () => {
+      if (initialDocumentStatus !== document?.isDirty) {
+        (0, import_editor_documents.setDocumentModifiedStatus)(initialDocumentStatus);
+      }
+    }
+  });
 };
 
 // src/components/class-manager/class-manager-button.tsx
 var ClassManagerButton = () => {
-  const document = (0, import_editor_documents.__useActiveDocument)();
+  const document = (0, import_editor_documents2.__useActiveDocument)();
   const { open: openPanel } = usePanelActions();
-  const { save: saveDocument } = (0, import_editor_documents.__useActiveDocumentActions)();
+  const { save: saveDocument } = (0, import_editor_documents2.__useActiveDocumentActions)();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
   const handleOpenPanel = () => {
     if (document?.isDirty) {
@@ -736,6 +764,7 @@ function PopulateStore() {
 }
 
 // src/sync-with-document-save.ts
+var import_editor_documents3 = require("@elementor/editor-documents");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 var import_store14 = require("@elementor/store");
 function syncWithDocumentSave() {
@@ -745,16 +774,20 @@ function syncWithDocumentSave() {
 }
 function syncDirtyState() {
   return (0, import_store14.__subscribeWithSelector)(selectIsDirty, () => {
-    if (!isDirty2()) {
+    if (!isDirty()) {
       return;
     }
-    (0, import_editor_v1_adapters2.__privateRunCommandSync)("document/save/set-is-modified", { status: true }, { internal: true });
+    (0, import_editor_documents3.setDocumentModifiedStatus)(true);
   });
 }
 function bindSaveAction() {
-  (0, import_editor_v1_adapters2.registerDataHook)("after", "document/save/save", publishGlobalClasses);
+  (0, import_editor_v1_adapters2.registerDataHook)("after", "document/save/save", (args) => {
+    return saveGlobalClasses({
+      context: args.status === "publish" ? "frontend" : "preview"
+    });
+  });
 }
-function isDirty2() {
+function isDirty() {
   return selectIsDirty((0, import_store14.__getState)());
 }