@elementor/editor-global-classes 0.4.0 → 0.5.0

package/dist/index.mjs

@@ -2,17 +2,18 @@
 import { injectIntoLogic } from "@elementor/editor";
 import { injectIntoClassSelectorActions } from "@elementor/editor-editing-panel";
 import { __registerPanel as registerPanel } from "@elementor/editor-panels";
-import { stylesRepository } from "@elementor/editor-styles-repository";
+import { stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
+import { __privateListenTo as listenTo, v1ReadyEvent } from "@elementor/editor-v1-adapters";
 import { __registerSlice as registerSlice } from "@elementor/store";
 
 // src/components/class-manager/class-manager-button.tsx
-import * as React3 from "react";
+import * as React5 from "react";
 import { ColorSwatchIcon as ColorSwatchIcon2 } from "@elementor/icons";
-import { IconButton as IconButton2, Tooltip } from "@elementor/ui";
-import { __ as __2 } from "@wordpress/i18n";
+import { IconButton as IconButton3, Tooltip as Tooltip2 } from "@elementor/ui";
+import { __ as __5 } from "@wordpress/i18n";
 
 // src/components/class-manager/class-manager-panel.tsx
-import * as React2 from "react";
+import * as React4 from "react";
 import {
   __createPanel as createPanel,
   Panel,
@@ -21,24 +22,41 @@ import {
   PanelHeaderTitle
 } from "@elementor/editor-panels";
 import { ColorSwatchIcon, XIcon } from "@elementor/icons";
-import { Alert, Box, ErrorBoundary, IconButton, Stack as Stack2 } from "@elementor/ui";
-import { __ } from "@wordpress/i18n";
+import { Alert, Box as Box3, ErrorBoundary, IconButton as IconButton2, Stack as Stack2 } from "@elementor/ui";
+import { __ as __4 } from "@wordpress/i18n";
 
 // src/components/class-manager/global-classes-list.tsx
-import * as React from "react";
-import { EllipsisWithTooltip } from "@elementor/editor-ui";
-import { List, ListItemButton, Stack, Typography } from "@elementor/ui";
-
-// src/store.ts
-import { mergeProps } from "@elementor/editor-props";
+import * as React3 from "react";
+import { stylesRepository } from "@elementor/editor-styles-repository";
+import { EditableField, EllipsisWithTooltip, useEditable } from "@elementor/editor-ui";
+import { DotsVerticalIcon, PhotoIcon } from "@elementor/icons";
 import {
-  getVariantByMeta
-} from "@elementor/editor-styles";
+  bindMenu,
+  bindTrigger,
+  Box as Box2,
+  IconButton,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Stack,
+  styled as styled2,
+  Tooltip,
+  Typography as Typography2,
+  usePopupState
+} from "@elementor/ui";
+import { __ as __3 } from "@wordpress/i18n";
+
+// src/global-classes-styles-provider.ts
+import { generateId } from "@elementor/editor-styles";
 import {
-  __createSelector as createSelector,
-  __createSlice as createSlice,
-  __useSelector as useSelector
+  __dispatch as dispatch,
+  __getState as getState,
+  __subscribeWithSelector as subscribeWithSelector
 } from "@elementor/store";
+import { __ } from "@wordpress/i18n";
 
 // src/errors.ts
 import { createError } from "@elementor/utils";
@@ -46,11 +64,25 @@ var GlobalClassNotFoundError = createError({
   code: "global_class_not_found",
   message: "Global class not found."
 });
+var GlobalClassLabelAlreadyExistsError = createError({
+  code: "global_class_label_already_exists",
+  message: "Class with this name already exists."
+});
 
 // src/store.ts
+import { mergeProps } from "@elementor/editor-props";
+import {
+  getVariantByMeta
+} from "@elementor/editor-styles";
+import {
+  __createSelector as createSelector,
+  __createSlice as createSlice,
+  __useSelector as useSelector
+} from "@elementor/store";
 var initialState = {
   items: {},
-  order: []
+  order: [],
+  isDirty: false
 };
 var SLICE_NAME = "globalClasses";
 var slice = createSlice({
@@ -60,14 +92,29 @@ var slice = createSlice({
     init(state, { payload }) {
       state.items = payload.items;
       state.order = payload.order;
+      state.isDirty = false;
     },
     add(state, { payload }) {
-      state.items[payload.style.id] = payload.style;
-      state.order = payload.order;
+      state.items[payload.id] = payload;
+      state.order.push(payload.id);
+      state.isDirty = true;
+    },
+    delete(state, { payload }) {
+      state.items = Object.fromEntries(Object.entries(state.items).filter(([id]) => id !== payload));
+      state.order = state.order.filter((id) => id !== payload);
+      state.isDirty = true;
+    },
+    setOrder(state, { payload }) {
+      state.order = payload;
     },
     update(state, { payload }) {
-      state.items[payload.style.id] = payload.style;
-      state.order = payload.order;
+      const style = state.items[payload.style.id];
+      const mergedData = {
+        ...style,
+        ...payload.style
+      };
+      state.items[payload.style.id] = mergedData;
+      state.isDirty = true;
     },
     updateProps(state, {
       payload
@@ -82,51 +129,395 @@ var slice = createSlice({
       } else {
         style.variants.push({ meta: payload.meta, props: payload.props });
       }
+      state.isDirty = true;
+    },
+    setPristine(state) {
+      state.isDirty = false;
     }
   }
 });
-var selectItems = (state) => state[SLICE_NAME].items;
 var selectOrder = (state) => state[SLICE_NAME].order;
+var selectGlobalClasses = (state) => state[SLICE_NAME].items;
 var selectOrderedGlobalClasses = createSelector(
-  selectItems,
+  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 = useSelector(selectOrderedGlobalClasses);
   return items;
 };
+var useGlobalClassesOrder = () => useSelector(selectOrder);
+
+// src/global-classes-styles-provider.ts
+var globalClassesStylesProvider = {
+  key: "global-classes",
+  priority: 30,
+  actions: {
+    get: () => selectOrderedGlobalClasses(getState()),
+    getById: (id) => selectClass(getState(), id),
+    create: (label) => {
+      const classes = selectGlobalClasses(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 = generateId("g-", existingIds);
+      dispatch(
+        slice.actions.add({
+          id,
+          type: "class",
+          label,
+          variants: []
+        })
+      );
+      return id;
+    },
+    update: (payload) => {
+      dispatch(
+        slice.actions.update({
+          style: payload
+        })
+      );
+    },
+    delete: (id) => {
+      dispatch(slice.actions.delete(id));
+    },
+    setOrder: (order) => {
+      dispatch(slice.actions.setOrder(order));
+    },
+    updateProps: (args) => {
+      dispatch(
+        slice.actions.updateProps({
+          id: args.id,
+          meta: args.meta,
+          props: args.props
+        })
+      );
+    }
+  },
+  subscribe: (cb) => subscribeWithSelector((state) => state.globalClasses, cb),
+  labels: {
+    singular: __("Global class", "elementor"),
+    plural: __("Global CSS Classes", "elementor")
+  }
+};
+
+// src/components/class-manager/delete-confirmation-dialog.tsx
+import * as React from "react";
+import { createContext, useContext, useState } from "react";
+import { AlertOctagonFilledIcon } from "@elementor/icons";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Typography
+} from "@elementor/ui";
+import { __ as __2 } from "@wordpress/i18n";
+var context = createContext(null);
+var DeleteConfirmationProvider = ({ children }) => {
+  const [dialogProps, setDialogProps] = useState(null);
+  const openDialog = (props) => {
+    setDialogProps(props);
+  };
+  const closeDialog = () => {
+    setDialogProps(null);
+  };
+  return /* @__PURE__ */ React.createElement(context.Provider, { value: { openDialog, closeDialog, dialogProps } }, children, !!dialogProps && /* @__PURE__ */ React.createElement(DeleteConfirmationDialog, { ...dialogProps }));
+};
+var TITLE_ID = "delete-class-dialog";
+var DeleteConfirmationDialog = ({ label, id }) => {
+  const { closeDialog } = useDeleteConfirmation();
+  const onConfirm = () => {
+    globalClassesStylesProvider.actions.delete(id);
+    closeDialog();
+  };
+  return /* @__PURE__ */ React.createElement(Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React.createElement(AlertOctagonFilledIcon, { color: "error" }), __2("Delete global class", "elementor")), /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __2("Deleting", "elementor"), /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), __2(
+    "will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.",
+    "elementor"
+  ))), /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { color: "secondary", onClick: closeDialog }, __2("Cancel", "elementor")), /* @__PURE__ */ React.createElement(Button, { variant: "contained", color: "error", onClick: onConfirm }, __2("Delete", "elementor"))));
+};
+var useDeleteConfirmation = () => {
+  const contextValue = useContext(context);
+  if (!contextValue) {
+    throw new Error("useDeleteConfirmation must be used within a DeleteConfirmationProvider");
+  }
+  return contextValue;
+};
+
+// src/components/class-manager/sortable.tsx
+import * as React2 from "react";
+import { GripVerticalIcon } from "@elementor/icons";
+import {
+  Box,
+  Paper,
+  styled,
+  UnstableSortableItem,
+  UnstableSortableProvider
+} from "@elementor/ui";
+var SortableProvider = (props) => /* @__PURE__ */ React2.createElement(UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
+var SortableTrigger = (props) => /* @__PURE__ */ React2.createElement("div", { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React2.createElement(GripVerticalIcon, { fontSize: "tiny" }));
+var SortableItem = ({ children, id }) => {
+  return /* @__PURE__ */ React2.createElement(
+    UnstableSortableItem,
+    {
+      id,
+      render: ({
+        itemProps,
+        isDragged,
+        triggerProps,
+        itemStyle,
+        triggerStyle,
+        dropIndicationStyle,
+        showDropIndication
+      }) => {
+        return /* @__PURE__ */ React2.createElement(StyledSortableItem, { ...itemProps, elevation: 0, sx: itemStyle, role: "listitem" }, /* @__PURE__ */ React2.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }), children({
+          itemProps,
+          isDragged,
+          triggerProps,
+          itemStyle,
+          triggerStyle,
+          dropIndicationStyle,
+          showDropIndication
+        }));
+      }
+    }
+  );
+};
+var StyledSortableItem = styled(Paper)`
+	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 SortableItemIndicator = styled(Box)`
+	width: 100%;
+	height: 3px;
+	border-radius: ${({ theme }) => theme.spacing(0.5)};
+	background-color: ${({ theme }) => theme.palette.text.primary};
+`;
 
 // src/components/class-manager/global-classes-list.tsx
 var GlobalClassesList = () => {
   const cssClasses = useOrderedGlobalClasses();
-  return /* @__PURE__ */ React.createElement(Stack, null, /* @__PURE__ */ React.createElement(List, { role: "list" }, cssClasses?.map(({ id, label }) => {
-    return /* @__PURE__ */ React.createElement(Stack, { key: id, direction: "row", alignItems: "center", gap: 1, role: "listitem" }, /* @__PURE__ */ React.createElement(ListItemButton, { sx: { borderRadius: 1 } }, /* @__PURE__ */ React.createElement(EllipsisWithTooltip, { title: label, as: Typography, variant: "caption" })));
-  })));
+  const [classesOrder, reorderClasses] = useClassesOrder();
+  if (!cssClasses?.length) {
+    return /* @__PURE__ */ React3.createElement(EmptyState, null);
+  }
+  return /* @__PURE__ */ React3.createElement(DeleteConfirmationProvider, null, /* @__PURE__ */ React3.createElement(List, { sx: { display: "flex", flexDirection: "column", gap: 0.5 } }, /* @__PURE__ */ React3.createElement(SortableProvider, { value: classesOrder, onChange: reorderClasses }, cssClasses?.map(({ id, label }) => {
+    const renameClass = (newLabel) => {
+      globalClassesStylesProvider.actions.update({ label: newLabel, id });
+    };
+    return /* @__PURE__ */ React3.createElement(SortableItem, { key: id, id }, ({ isDragged, showDropIndication, dropIndicationStyle }) => /* @__PURE__ */ React3.createElement(
+      ClassItem,
+      {
+        id,
+        label,
+        renameClass,
+        selected: isDragged
+      },
+      showDropIndication && /* @__PURE__ */ React3.createElement(SortableItemIndicator, { style: dropIndicationStyle })
+    ));
+  }))));
+};
+var useClassesOrder = () => {
+  const order = useGlobalClassesOrder();
+  const reorder = (newIds) => {
+    globalClassesStylesProvider.actions.setOrder(newIds);
+  };
+  return [order, reorder];
+};
+var ClassItem = ({
+  id,
+  label,
+  renameClass,
+  selected,
+  children
+}) => {
+  const {
+    ref: editableRef,
+    openEditMode,
+    isEditing,
+    error,
+    getProps: getEditableProps
+  } = useEditable({
+    value: label,
+    onSubmit: renameClass,
+    validation: validateLabel
+  });
+  const { openDialog } = useDeleteConfirmation();
+  const popupState = usePopupState({
+    variant: "popover",
+    disableAutoFocus: true
+  });
+  return /* @__PURE__ */ React3.createElement(Stack, { direction: "row", alignItems: "center", gap: 1, flexGrow: 1, flexShrink: 0 }, /* @__PURE__ */ React3.createElement(
+    StyledListItem,
+    {
+      component: "div",
+      disablePadding: true,
+      disableGutters: true,
+      secondaryAction: /* @__PURE__ */ React3.createElement(
+        Tooltip,
+        {
+          placement: "top",
+          className: "class-item-more-actions",
+          title: __3("More actions", "elementor")
+        },
+        /* @__PURE__ */ React3.createElement(IconButton, { size: "tiny", ...bindTrigger(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React3.createElement(DotsVerticalIcon, { fontSize: "tiny" }))
+      )
+    },
+    /* @__PURE__ */ React3.createElement(
+      ListItemButton,
+      {
+        dense: true,
+        disableGutters: true,
+        shape: "rounded",
+        onDoubleClick: openEditMode,
+        selected: selected || popupState.isOpen,
+        focusVisibleClassName: "visible-class-item",
+        sx: {
+          minHeight: "36px",
+          display: "flex",
+          "&.visible-class-item": {
+            boxShadow: "none !important"
+          }
+        }
+      },
+      /* @__PURE__ */ React3.createElement(Indicator, { isActive: isEditing, isError: !!error }, isEditing ? /* @__PURE__ */ React3.createElement(
+        EditableField,
+        {
+          ref: editableRef,
+          error,
+          as: Typography2,
+          variant: "caption",
+          ...getEditableProps()
+        }
+      ) : /* @__PURE__ */ React3.createElement(EllipsisWithTooltip, { title: label, as: Typography2, variant: "caption" }))
+    ),
+    children,
+    /* @__PURE__ */ React3.createElement(
+      Menu,
+      {
+        ...bindMenu(popupState),
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "right"
+        }
+      },
+      /* @__PURE__ */ React3.createElement(
+        MenuItem,
+        {
+          sx: { minWidth: "160px" },
+          onClick: () => {
+            popupState.close();
+            openEditMode();
+          }
+        },
+        /* @__PURE__ */ React3.createElement(ListItemText, { primary: __3("Rename", "elementor") })
+      ),
+      /* @__PURE__ */ React3.createElement(
+        MenuItem,
+        {
+          onClick: () => {
+            popupState.close();
+            openDialog({ id, label });
+          }
+        },
+        /* @__PURE__ */ React3.createElement(ListItemText, { primary: __3("Delete", "elementor"), sx: { color: "error.light" } })
+      )
+    )
+  ));
+};
+var StyledListItem = styled2(ListItem)`
+	.class-item-more-actions {
+		visibility: hidden;
+	}
+	&:hover {
+		.class-item-more-actions {
+			visibility: visible;
+		}
+	}
+`;
+var EmptyState = () => /* @__PURE__ */ React3.createElement(Stack, { alignItems: "center", gap: 3, pt: 4, px: 0.5 }, /* @__PURE__ */ React3.createElement(PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React3.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, __3("No CSS classes created yet", "elementor")), /* @__PURE__ */ React3.createElement(Typography2, { align: "center", variant: "caption", color: "text.secondary" }, __3(
+  "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"
+)));
+var StyledHeader = styled2(Typography2)(({ theme, variant }) => ({
+  "&.MuiTypography-root": {
+    ...theme.typography[variant]
+  }
+}));
+var Indicator = styled2(Box2, {
+  shouldForwardProp: (prop) => !["isActive", "isError"].includes(prop)
+})(({ theme, isActive, isError }) => ({
+  display: "flex",
+  width: "100%",
+  flexGrow: 1,
+  borderRadius: theme.spacing(0.5),
+  border: getIndicatorBorder({ isActive, isError, theme }),
+  padding: `0 ${theme.spacing(1)}`,
+  marginLeft: isActive ? theme.spacing(1) : 0
+}));
+var getIndicatorBorder = ({ isActive, isError, theme }) => {
+  if (isError) {
+    return `2px solid ${theme.palette.error.main}`;
+  }
+  if (isActive) {
+    return `2px solid ${theme.palette.secondary.main}`;
+  }
+  return "none";
+};
+var validateLabel = (newLabel) => {
+  if (!stylesRepository.isLabelValid(newLabel)) {
+    return __3("Format is not valid", "elementor");
+  }
+  if (stylesRepository.isLabelExist(newLabel)) {
+    return __3("Existing name", "elementor");
+  }
 };
 
 // src/components/class-manager/class-manager-panel.tsx
-var { panel, usePanelActions, usePanelStatus } = createPanel({
+var { panel, usePanelActions } = createPanel({
   id: "class-manager-panel",
   component: ClassManagerPanel
 });
 function ClassManagerPanel() {
-  return /* @__PURE__ */ React2.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React2.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React2.createElement(Panel, null, /* @__PURE__ */ React2.createElement(PanelHeader, null, /* @__PURE__ */ React2.createElement(Stack2, { p: 1, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React2.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React2.createElement(ColorSwatchIcon, { fontSize: "inherit", sx: { transform: "rotate(90deg)" } }), __("CSS Class manager")), /* @__PURE__ */ React2.createElement(CloseButton, { sx: { marginLeft: "auto" } }))), /* @__PURE__ */ React2.createElement(PanelBody, { px: 2 }, /* @__PURE__ */ React2.createElement(GlobalClassesList, null))));
+  return /* @__PURE__ */ React4.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React4.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React4.createElement(Panel, null, /* @__PURE__ */ React4.createElement(PanelHeader, null, /* @__PURE__ */ React4.createElement(Stack2, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React4.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React4.createElement(ColorSwatchIcon, { fontSize: "inherit", sx: { transform: "rotate(90deg)" } }), __4("CSS Class manager")), /* @__PURE__ */ React4.createElement(CloseButton, { sx: { marginLeft: "auto" } }))), /* @__PURE__ */ React4.createElement(PanelBody, { px: 2 }, /* @__PURE__ */ React4.createElement(GlobalClassesList, null))));
 }
 var CloseButton = (props) => {
   const { close } = usePanelActions();
-  return /* @__PURE__ */ React2.createElement(IconButton, { size: "small", color: "secondary", onClick: close, ...props }, /* @__PURE__ */ React2.createElement(XIcon, { fontSize: "small" }));
+  return /* @__PURE__ */ React4.createElement(IconButton2, { size: "small", color: "secondary", onClick: close, ...props }, /* @__PURE__ */ React4.createElement(XIcon, { fontSize: "small" }));
 };
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React2.createElement(Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React2.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React2.createElement("strong", null, __("Something went wrong", "elementor"))));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React4.createElement(Box3, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React4.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React4.createElement("strong", null, __4("Something went wrong", "elementor"))));
 
 // src/components/class-manager/class-manager-button.tsx
 var ClassManagerButton = () => {
   const { open } = usePanelActions();
-  return /* @__PURE__ */ React3.createElement(Tooltip, { title: __2("Class manager"), placement: "top" }, /* @__PURE__ */ React3.createElement(IconButton2, { onClick: open }, /* @__PURE__ */ React3.createElement(ColorSwatchIcon2, { fontSize: "tiny" })));
+  return /* @__PURE__ */ React5.createElement(Tooltip2, { title: __5("Class manager"), placement: "top" }, /* @__PURE__ */ React5.createElement(IconButton3, { onClick: open }, /* @__PURE__ */ React5.createElement(ColorSwatchIcon2, { fontSize: "tiny" })));
 };
 
-// src/components/logic-hooks.tsx
+// src/components/populate-store.tsx
 import { useEffect } from "react";
 import { __useDispatch as useDispatch } from "@elementor/store";
 
@@ -134,19 +525,12 @@ import { __useDispatch as useDispatch } from "@elementor/store";
 import { httpService } from "@elementor/http";
 var RESOURCE_URL = "/global-classes";
 var apiClient = {
-  all: async () => {
-    return httpService().get(RESOURCE_URL);
-  },
-  post: async (data) => {
-    return httpService().post(RESOURCE_URL, data);
-  },
-  put: async (id, data) => {
-    return httpService().put(`${RESOURCE_URL}/${id}`, data);
-  }
+  all: () => httpService().get("elementor/v1" + RESOURCE_URL),
+  update: (payload) => httpService().put("elementor/v1" + RESOURCE_URL, payload)
 };
 
-// src/components/logic-hooks.tsx
-function LogicHooks() {
+// src/components/populate-store.tsx
+function PopulateStore() {
   const dispatch2 = useDispatch();
   useEffect(() => {
     apiClient.all().then((res) => {
@@ -157,73 +541,55 @@ function LogicHooks() {
   return null;
 }
 
-// src/global-classes-styles-provider.ts
-import {
-  __dispatch as dispatch,
-  __getState as getState,
-  __subscribeWithSelector as subscribeWithSelector
-} from "@elementor/store";
-import { __ as __3 } from "@wordpress/i18n";
-var globalClassesStylesProvider = {
-  key: "global-classes",
-  priority: 30,
-  actions: {
-    get: () => selectOrderedGlobalClasses(getState()),
-    getById: (id) => selectClass(getState(), id),
-    create: async (style) => {
-      const res = await apiClient.post(style);
-      const { data, meta } = res.data;
-      dispatch(
-        slice.actions.add({
-          style: data,
-          order: meta.order
-        })
-      );
-      return data;
-    },
-    update: async (payload) => {
-      const style = selectClass(getState(), payload.id);
-      const mergedData = { ...style, ...payload };
-      const res = await apiClient.put(payload.id, mergedData);
-      const { data, meta } = res.data;
-      dispatch(
-        slice.actions.update({
-          style: data,
-          order: meta.order
-        })
-      );
-      return data;
-    },
-    updateProps: (args) => {
-      dispatch(
-        slice.actions.updateProps({
-          id: args.id,
-          meta: args.meta,
-          props: args.props
-        })
-      );
+// src/sync-with-document-save.ts
+import { __privateRunCommandSync as runCommandSync, registerDataHook } from "@elementor/editor-v1-adapters";
+import { __dispatch, __getState as getState2, __subscribeWithSelector as subscribeWithSelector2 } from "@elementor/store";
+function syncWithDocumentSave() {
+  const unsubscribe = syncDirtyState();
+  bindSaveAction();
+  return unsubscribe;
+}
+function syncDirtyState() {
+  return subscribeWithSelector2(selectIsDirty, () => {
+    if (!isDirty()) {
+      return;
     }
-  },
-  subscribe: (cb) => subscribeWithSelector((state) => state.globalClasses, cb),
-  labels: {
-    singular: __3("Global CSS Class", "elementor"),
-    plural: __3("Global CSS Classes", "elementor")
-  }
-};
+    runCommandSync("document/save/set-is-modified", { status: true }, { internal: true });
+  });
+}
+function bindSaveAction() {
+  registerDataHook("after", "document/save/save", async () => {
+    if (!isDirty()) {
+      return;
+    }
+    const state = getState2().globalClasses;
+    await apiClient.update({
+      items: state.items,
+      order: state.order
+    });
+    __dispatch(slice.actions.setPristine());
+  });
+}
+function isDirty() {
+  return selectIsDirty(getState2());
+}
 
 // src/init.ts
 function init() {
   registerSlice(slice);
   registerPanel(panel);
-  stylesRepository.register(globalClassesStylesProvider);
+  stylesRepository2.register(globalClassesStylesProvider);
   injectIntoLogic({
-    id: "global-classes-hooks",
-    component: LogicHooks
+    id: "global-classes-populate-store",
+    component: PopulateStore
   });
   injectIntoClassSelectorActions({
-    id: "global-classes",
+    id: "global-classes-manager-button",
     component: ClassManagerButton
   });
+  listenTo(v1ReadyEvent(), () => {
+    syncWithDocumentSave();
+  });
 }
 
 // src/index.ts