@elementor/editor-global-classes 0.4.0 → 0.5.0

package/dist/index.js

@@ -26,31 +26,35 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var import_editor = require("@elementor/editor");
 var import_editor_editing_panel = require("@elementor/editor-editing-panel");
 var import_editor_panels2 = require("@elementor/editor-panels");
-var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_store7 = require("@elementor/store");
+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");
 
 // src/components/class-manager/class-manager-button.tsx
-var React3 = __toESM(require("react"));
-var import_icons2 = require("@elementor/icons");
-var import_ui3 = require("@elementor/ui");
-var import_i18n2 = require("@wordpress/i18n");
+var React5 = __toESM(require("react"));
+var import_icons5 = require("@elementor/icons");
+var import_ui5 = require("@elementor/ui");
+var import_i18n5 = require("@wordpress/i18n");
 
 // src/components/class-manager/class-manager-panel.tsx
-var React2 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 var import_editor_panels = require("@elementor/editor-panels");
-var import_icons = require("@elementor/icons");
-var import_ui2 = require("@elementor/ui");
-var import_i18n = require("@wordpress/i18n");
+var import_icons4 = require("@elementor/icons");
+var import_ui4 = require("@elementor/ui");
+var import_i18n4 = require("@wordpress/i18n");
 
 // src/components/class-manager/global-classes-list.tsx
-var React = __toESM(require("react"));
+var React3 = __toESM(require("react"));
+var import_editor_styles_repository = require("@elementor/editor-styles-repository");
 var import_editor_ui = require("@elementor/editor-ui");
-var import_ui = require("@elementor/ui");
+var import_icons3 = require("@elementor/icons");
+var import_ui3 = require("@elementor/ui");
+var import_i18n3 = 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/global-classes-styles-provider.ts
+var import_editor_styles2 = require("@elementor/editor-styles");
+var import_store2 = require("@elementor/store");
+var import_i18n = require("@wordpress/i18n");
 
 // src/errors.ts
 var import_utils = require("@elementor/utils");
@@ -58,11 +62,19 @@ var GlobalClassNotFoundError = (0, import_utils.createError)({
   code: "global_class_not_found",
   message: "Global class not found."
 });
+var GlobalClassLabelAlreadyExistsError = (0, import_utils.createError)({
+  code: "global_class_label_already_exists",
+  message: "Class with this name already exists."
+});
 
 // 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: []
+  order: [],
+  isDirty: false
 };
 var SLICE_NAME = "globalClasses";
 var slice = (0, import_store.__createSlice)({
@@ -72,14 +84,29 @@ var slice = (0, import_store.__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
@@ -94,73 +121,396 @@ var slice = (0, import_store.__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 = (0, import_store.__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 = (0, import_store.__useSelector)(selectOrderedGlobalClasses);
   return items;
 };
+var useGlobalClassesOrder = () => (0, import_store.__useSelector)(selectOrder);
+
+// src/global-classes-styles-provider.ts
+var globalClassesStylesProvider = {
+  key: "global-classes",
+  priority: 30,
+  actions: {
+    get: () => selectOrderedGlobalClasses((0, import_store2.__getState)()),
+    getById: (id) => selectClass((0, import_store2.__getState)(), id),
+    create: (label) => {
+      const classes = selectGlobalClasses((0, import_store2.__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)(
+        slice.actions.add({
+          id,
+          type: "class",
+          label,
+          variants: []
+        })
+      );
+      return id;
+    },
+    update: (payload) => {
+      (0, import_store2.__dispatch)(
+        slice.actions.update({
+          style: payload
+        })
+      );
+    },
+    delete: (id) => {
+      (0, import_store2.__dispatch)(slice.actions.delete(id));
+    },
+    setOrder: (order) => {
+      (0, import_store2.__dispatch)(slice.actions.setOrder(order));
+    },
+    updateProps: (args) => {
+      (0, import_store2.__dispatch)(
+        slice.actions.updateProps({
+          id: args.id,
+          meta: args.meta,
+          props: args.props
+        })
+      );
+    }
+  },
+  subscribe: (cb) => (0, import_store2.__subscribeWithSelector)((state) => state.globalClasses, cb),
+  labels: {
+    singular: (0, import_i18n.__)("Global class", "elementor"),
+    plural: (0, import_i18n.__)("Global CSS Classes", "elementor")
+  }
+};
+
+// src/components/class-manager/delete-confirmation-dialog.tsx
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_icons = require("@elementor/icons");
+var import_ui = require("@elementor/ui");
+var import_i18n2 = require("@wordpress/i18n");
+var context = (0, import_react.createContext)(null);
+var DeleteConfirmationProvider = ({ children }) => {
+  const [dialogProps, setDialogProps] = (0, import_react.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(import_ui.Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React.createElement(import_ui.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React.createElement(import_icons.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n2.__)("Delete global class", "elementor")), /* @__PURE__ */ React.createElement(import_ui.DialogContent, null, /* @__PURE__ */ React.createElement(import_ui.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n2.__)("Deleting", "elementor"), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), (0, import_i18n2.__)(
+    "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(import_ui.DialogActions, null, /* @__PURE__ */ React.createElement(import_ui.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n2.__)("Cancel", "elementor")), /* @__PURE__ */ React.createElement(import_ui.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n2.__)("Delete", "elementor"))));
+};
+var useDeleteConfirmation = () => {
+  const contextValue = (0, import_react.useContext)(context);
+  if (!contextValue) {
+    throw new Error("useDeleteConfirmation must be used within a DeleteConfirmationProvider");
+  }
+  return contextValue;
+};
+
+// src/components/class-manager/sortable.tsx
+var React2 = __toESM(require("react"));
+var import_icons2 = require("@elementor/icons");
+var import_ui2 = require("@elementor/ui");
+var SortableProvider = (props) => /* @__PURE__ */ React2.createElement(import_ui2.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(import_icons2.GripVerticalIcon, { fontSize: "tiny" }));
+var SortableItem = ({ children, id }) => {
+  return /* @__PURE__ */ React2.createElement(
+    import_ui2.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 = (0, import_ui2.styled)(import_ui2.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 = (0, import_ui2.styled)(import_ui2.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(import_ui.Stack, null, /* @__PURE__ */ React.createElement(import_ui.List, { role: "list" }, cssClasses?.map(({ id, label }) => {
-    return /* @__PURE__ */ React.createElement(import_ui.Stack, { key: id, direction: "row", alignItems: "center", gap: 1, role: "listitem" }, /* @__PURE__ */ React.createElement(import_ui.ListItemButton, { sx: { borderRadius: 1 } }, /* @__PURE__ */ React.createElement(import_editor_ui.EllipsisWithTooltip, { title: label, as: import_ui.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(import_ui3.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
+  } = (0, import_editor_ui.useEditable)({
+    value: label,
+    onSubmit: renameClass,
+    validation: validateLabel
+  });
+  const { openDialog } = useDeleteConfirmation();
+  const popupState = (0, import_ui3.usePopupState)({
+    variant: "popover",
+    disableAutoFocus: true
+  });
+  return /* @__PURE__ */ React3.createElement(import_ui3.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(
+        import_ui3.Tooltip,
+        {
+          placement: "top",
+          className: "class-item-more-actions",
+          title: (0, import_i18n3.__)("More actions", "elementor")
+        },
+        /* @__PURE__ */ React3.createElement(import_ui3.IconButton, { size: "tiny", ...(0, import_ui3.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React3.createElement(import_icons3.DotsVerticalIcon, { fontSize: "tiny" }))
+      )
+    },
+    /* @__PURE__ */ React3.createElement(
+      import_ui3.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(
+        import_editor_ui.EditableField,
+        {
+          ref: editableRef,
+          error,
+          as: import_ui3.Typography,
+          variant: "caption",
+          ...getEditableProps()
+        }
+      ) : /* @__PURE__ */ React3.createElement(import_editor_ui.EllipsisWithTooltip, { title: label, as: import_ui3.Typography, variant: "caption" }))
+    ),
+    children,
+    /* @__PURE__ */ React3.createElement(
+      import_ui3.Menu,
+      {
+        ...(0, import_ui3.bindMenu)(popupState),
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "right"
+        }
+      },
+      /* @__PURE__ */ React3.createElement(
+        import_ui3.MenuItem,
+        {
+          sx: { minWidth: "160px" },
+          onClick: () => {
+            popupState.close();
+            openEditMode();
+          }
+        },
+        /* @__PURE__ */ React3.createElement(import_ui3.ListItemText, { primary: (0, import_i18n3.__)("Rename", "elementor") })
+      ),
+      /* @__PURE__ */ React3.createElement(
+        import_ui3.MenuItem,
+        {
+          onClick: () => {
+            popupState.close();
+            openDialog({ id, label });
+          }
+        },
+        /* @__PURE__ */ React3.createElement(import_ui3.ListItemText, { primary: (0, import_i18n3.__)("Delete", "elementor"), sx: { color: "error.light" } })
+      )
+    )
+  ));
+};
+var StyledListItem = (0, import_ui3.styled)(import_ui3.ListItem)`
+	.class-item-more-actions {
+		visibility: hidden;
+	}
+	&:hover {
+		.class-item-more-actions {
+			visibility: visible;
+		}
+	}
+`;
+var EmptyState = () => /* @__PURE__ */ React3.createElement(import_ui3.Stack, { alignItems: "center", gap: 3, pt: 4, px: 0.5 }, /* @__PURE__ */ React3.createElement(import_icons3.PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React3.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, (0, import_i18n3.__)("No CSS classes created yet", "elementor")), /* @__PURE__ */ React3.createElement(import_ui3.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n3.__)(
+  "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 = (0, import_ui3.styled)(import_ui3.Typography)(({ theme, variant }) => ({
+  "&.MuiTypography-root": {
+    ...theme.typography[variant]
+  }
+}));
+var Indicator = (0, import_ui3.styled)(import_ui3.Box, {
+  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 (!import_editor_styles_repository.stylesRepository.isLabelValid(newLabel)) {
+    return (0, import_i18n3.__)("Format is not valid", "elementor");
+  }
+  if (import_editor_styles_repository.stylesRepository.isLabelExist(newLabel)) {
+    return (0, import_i18n3.__)("Existing name", "elementor");
+  }
 };
 
 // src/components/class-manager/class-manager-panel.tsx
-var { panel, usePanelActions, usePanelStatus } = (0, import_editor_panels.__createPanel)({
+var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
   id: "class-manager-panel",
   component: ClassManagerPanel
 });
 function ClassManagerPanel() {
-  return /* @__PURE__ */ React2.createElement(import_ui2.ErrorBoundary, { fallback: /* @__PURE__ */ React2.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React2.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React2.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React2.createElement(import_ui2.Stack, { p: 1, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React2.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React2.createElement(import_icons.ColorSwatchIcon, { fontSize: "inherit", sx: { transform: "rotate(90deg)" } }), (0, import_i18n.__)("CSS Class manager")), /* @__PURE__ */ React2.createElement(CloseButton, { sx: { marginLeft: "auto" } }))), /* @__PURE__ */ React2.createElement(import_editor_panels.PanelBody, { px: 2 }, /* @__PURE__ */ React2.createElement(GlobalClassesList, null))));
+  return /* @__PURE__ */ React4.createElement(import_ui4.ErrorBoundary, { fallback: /* @__PURE__ */ React4.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React4.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React4.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React4.createElement(import_ui4.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React4.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React4.createElement(import_icons4.ColorSwatchIcon, { fontSize: "inherit", sx: { transform: "rotate(90deg)" } }), (0, import_i18n4.__)("CSS Class manager")), /* @__PURE__ */ React4.createElement(CloseButton, { sx: { marginLeft: "auto" } }))), /* @__PURE__ */ React4.createElement(import_editor_panels.PanelBody, { px: 2 }, /* @__PURE__ */ React4.createElement(GlobalClassesList, null))));
 }
 var CloseButton = (props) => {
   const { close } = usePanelActions();
-  return /* @__PURE__ */ React2.createElement(import_ui2.IconButton, { size: "small", color: "secondary", onClick: close, ...props }, /* @__PURE__ */ React2.createElement(import_icons.XIcon, { fontSize: "small" }));
+  return /* @__PURE__ */ React4.createElement(import_ui4.IconButton, { size: "small", color: "secondary", onClick: close, ...props }, /* @__PURE__ */ React4.createElement(import_icons4.XIcon, { fontSize: "small" }));
 };
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React2.createElement(import_ui2.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React2.createElement(import_ui2.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React2.createElement("strong", null, (0, import_i18n.__)("Something went wrong", "elementor"))));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React4.createElement(import_ui4.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React4.createElement(import_ui4.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React4.createElement("strong", null, (0, import_i18n4.__)("Something went wrong", "elementor"))));
 
 // src/components/class-manager/class-manager-button.tsx
 var ClassManagerButton = () => {
   const { open } = usePanelActions();
-  return /* @__PURE__ */ React3.createElement(import_ui3.Tooltip, { title: (0, import_i18n2.__)("Class manager"), placement: "top" }, /* @__PURE__ */ React3.createElement(import_ui3.IconButton, { onClick: open }, /* @__PURE__ */ React3.createElement(import_icons2.ColorSwatchIcon, { fontSize: "tiny" })));
+  return /* @__PURE__ */ React5.createElement(import_ui5.Tooltip, { title: (0, import_i18n5.__)("Class manager"), placement: "top" }, /* @__PURE__ */ React5.createElement(import_ui5.IconButton, { onClick: open }, /* @__PURE__ */ React5.createElement(import_icons5.ColorSwatchIcon, { fontSize: "tiny" })));
 };
 
-// src/components/logic-hooks.tsx
-var import_react = require("react");
-var import_store3 = require("@elementor/store");
+// src/components/populate-store.tsx
+var import_react2 = 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: async () => {
-    return (0, import_http.httpService)().get(RESOURCE_URL);
-  },
-  post: async (data) => {
-    return (0, import_http.httpService)().post(RESOURCE_URL, data);
-  },
-  put: async (id, data) => {
-    return (0, import_http.httpService)().put(`${RESOURCE_URL}/${id}`, data);
-  }
+  all: () => (0, import_http.httpService)().get("elementor/v1" + RESOURCE_URL),
+  update: (payload) => (0, import_http.httpService)().put("elementor/v1" + RESOURCE_URL, payload)
 };
 
-// src/components/logic-hooks.tsx
-function LogicHooks() {
-  const dispatch2 = (0, import_store3.__useDispatch)();
-  (0, import_react.useEffect)(() => {
+// src/components/populate-store.tsx
+function PopulateStore() {
+  const dispatch2 = (0, import_store5.__useDispatch)();
+  (0, import_react2.useEffect)(() => {
     apiClient.all().then((res) => {
       const { data, meta } = res.data;
       dispatch2(slice.actions.init({ items: data, order: meta.order }));
@@ -169,69 +519,55 @@ function LogicHooks() {
   return null;
 }
 
-// src/global-classes-styles-provider.ts
-var import_store5 = require("@elementor/store");
-var import_i18n3 = require("@wordpress/i18n");
-var globalClassesStylesProvider = {
-  key: "global-classes",
-  priority: 30,
-  actions: {
-    get: () => selectOrderedGlobalClasses((0, import_store5.__getState)()),
-    getById: (id) => selectClass((0, import_store5.__getState)(), id),
-    create: async (style) => {
-      const res = await apiClient.post(style);
-      const { data, meta } = res.data;
-      (0, import_store5.__dispatch)(
-        slice.actions.add({
-          style: data,
-          order: meta.order
-        })
-      );
-      return data;
-    },
-    update: async (payload) => {
-      const style = selectClass((0, import_store5.__getState)(), payload.id);
-      const mergedData = { ...style, ...payload };
-      const res = await apiClient.put(payload.id, mergedData);
-      const { data, meta } = res.data;
-      (0, import_store5.__dispatch)(
-        slice.actions.update({
-          style: data,
-          order: meta.order
-        })
-      );
-      return data;
-    },
-    updateProps: (args) => {
-      (0, import_store5.__dispatch)(
-        slice.actions.updateProps({
-          id: args.id,
-          meta: args.meta,
-          props: args.props
-        })
-      );
+// src/sync-with-document-save.ts
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+var import_store7 = require("@elementor/store");
+function syncWithDocumentSave() {
+  const unsubscribe = syncDirtyState();
+  bindSaveAction();
+  return unsubscribe;
+}
+function syncDirtyState() {
+  return (0, import_store7.__subscribeWithSelector)(selectIsDirty, () => {
+    if (!isDirty()) {
+      return;
     }
-  },
-  subscribe: (cb) => (0, import_store5.__subscribeWithSelector)((state) => state.globalClasses, cb),
-  labels: {
-    singular: (0, import_i18n3.__)("Global CSS Class", "elementor"),
-    plural: (0, import_i18n3.__)("Global CSS Classes", "elementor")
-  }
-};
+    (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());
+  });
+}
+function isDirty() {
+  return selectIsDirty((0, import_store7.__getState)());
+}
 
 // src/init.ts
 function init() {
-  (0, import_store7.__registerSlice)(slice);
+  (0, import_store9.__registerSlice)(slice);
   (0, import_editor_panels2.__registerPanel)(panel);
-  import_editor_styles_repository.stylesRepository.register(globalClassesStylesProvider);
+  import_editor_styles_repository2.stylesRepository.register(globalClassesStylesProvider);
   (0, import_editor.injectIntoLogic)({
-    id: "global-classes-hooks",
-    component: LogicHooks
+    id: "global-classes-populate-store",
+    component: PopulateStore
   });
   (0, import_editor_editing_panel.injectIntoClassSelectorActions)({
-    id: "global-classes",
+    id: "global-classes-manager-button",
     component: ClassManagerButton
   });
+  (0, import_editor_v1_adapters2.__privateListenTo)((0, import_editor_v1_adapters2.v1ReadyEvent)(), () => {
+    syncWithDocumentSave();
+  });
 }
 
 // src/index.ts