@elementor/editor-global-classes 0.20.4 → 0.21.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 // src/init.ts
 import { injectIntoLogic } from "@elementor/editor";
-import { injectIntoClassSelectorActions } from "@elementor/editor-editing-panel";
+import { injectIntoClassSelectorActions, registerStyleProviderToColors } from "@elementor/editor-editing-panel";
 import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 import { stylesRepository } from "@elementor/editor-styles-repository";
 import { __privateListenTo as listenTo, v1ReadyEvent } from "@elementor/editor-v1-adapters";
@@ -63,6 +63,69 @@ import {
   __createSelector as createSelector,
   __createSlice as createSlice
 } from "@elementor/store";
+
+// src/utils/snapshot-history.ts
+function createLink({ value, next, prev }) {
+  return {
+    value,
+    prev: prev || null,
+    next: next || null
+  };
+}
+var SnapshotHistory = class _SnapshotHistory {
+  constructor(namespace) {
+    this.namespace = namespace;
+  }
+  static registry = {};
+  static get(namespace) {
+    if (!_SnapshotHistory.registry[namespace]) {
+      _SnapshotHistory.registry[namespace] = new _SnapshotHistory(namespace);
+    }
+    return _SnapshotHistory.registry[namespace];
+  }
+  first = null;
+  current = null;
+  transform(item) {
+    return JSON.parse(JSON.stringify(item));
+  }
+  reset() {
+    this.first = this.current = null;
+  }
+  prev() {
+    if (!this.current || this.current === this.first) {
+      return null;
+    }
+    this.current = this.current.prev;
+    return this.current?.value || null;
+  }
+  isLast() {
+    return !this.current || !this.current.next;
+  }
+  next(value) {
+    if (value) {
+      if (!this.current) {
+        this.first = createLink({ value: this.transform(value) });
+        this.current = this.first;
+        return this.current.value;
+      }
+      const nextLink = createLink({
+        value: this.transform(value),
+        prev: this.current
+      });
+      this.current.next = nextLink;
+      this.current = nextLink;
+      return this.current.value;
+    }
+    if (!this.current || !this.current.next) {
+      return null;
+    }
+    this.current = this.current.next;
+    return this.current.value;
+  }
+};
+
+// src/store.ts
+var localHistory = SnapshotHistory.get("global-classes");
 var initialState = {
   data: { items: {}, order: [] },
   initialData: {
@@ -85,11 +148,13 @@ var slice = createSlice({
       state.isDirty = false;
     },
     add(state, { payload }) {
+      localHistory.next(state.data);
       state.data.items[payload.id] = payload;
       state.data.order.unshift(payload.id);
       state.isDirty = true;
     },
     delete(state, { payload }) {
+      localHistory.next(state.data);
       state.data.items = Object.fromEntries(
         Object.entries(state.data.items).filter(([id2]) => id2 !== payload)
       );
@@ -97,10 +162,12 @@ var slice = createSlice({
       state.isDirty = true;
     },
     setOrder(state, { payload }) {
+      localHistory.next(state.data);
       state.data.order = payload;
       state.isDirty = true;
     },
     update(state, { payload }) {
+      localHistory.next(state.data);
       const style = state.data.items[payload.style.id];
       const mergedData = {
         ...style,
@@ -116,6 +183,7 @@ var slice = createSlice({
       if (!style) {
         throw new GlobalClassNotFoundError({ context: { styleId: payload.id } });
       }
+      localHistory.next(state.data);
       const variant = getVariantByMeta(style, payload.meta);
       if (variant) {
         variant.props = mergeProps(variant.props, payload.props);
@@ -129,10 +197,38 @@ var slice = createSlice({
     },
     reset(state, { payload: { context: context2 } }) {
       if (context2 === "frontend") {
+        localHistory.reset();
         state.initialData.frontend = state.data;
         state.isDirty = false;
       }
       state.initialData.preview = state.data;
+    },
+    undo(state) {
+      if (localHistory.isLast()) {
+        localHistory.next(state.data);
+      }
+      const data = localHistory.prev();
+      if (data) {
+        state.data = data;
+        state.isDirty = true;
+      } else {
+        state.data = state.initialData.preview;
+      }
+    },
+    resetToInitialState(state, { payload: { context: context2 } }) {
+      localHistory.reset();
+      state.data = state.initialData[context2];
+      state.isDirty = false;
+    },
+    redo(state) {
+      const data = localHistory.next();
+      if (localHistory.isLast()) {
+        localHistory.prev();
+      }
+      if (data) {
+        state.data = data;
+        state.isDirty = true;
+      }
     }
   }
 });
@@ -151,8 +247,9 @@ var selectClass = (state, id2) => state[SLICE_NAME].data.items[id2] ?? null;
 
 // src/global-classes-styles-provider.ts
 var MAX_CLASSES = 50;
+var GLOBAL_CLASSES_PROVIDER_KEY = "global-classes";
 var globalClassesStylesProvider = createStylesProvider({
-  key: "global-classes",
+  key: GLOBAL_CLASSES_PROVIDER_KEY,
   priority: 30,
   limit: MAX_CLASSES,
   labels: {
@@ -212,7 +309,7 @@ var globalClassesStylesProvider = createStylesProvider({
 
 // src/components/class-manager/class-manager-panel.tsx
 import * as React7 from "react";
-import { useEffect } from "react";
+import { useEffect as useEffect2 } from "react";
 import { setDocumentModifiedStatus } from "@elementor/editor-documents";
 import {
   __createPanel as createPanel,
@@ -226,7 +323,16 @@ import { ThemeProvider } from "@elementor/editor-ui";
 import { changeEditMode } from "@elementor/editor-v1-adapters";
 import { XIcon } from "@elementor/icons";
 import { useMutation } from "@elementor/query";
-import { Alert, Box as Box4, Button as Button3, ErrorBoundary, IconButton as IconButton2, Stack as Stack2 } from "@elementor/ui";
+import { __dispatch as dispatch4 } from "@elementor/store";
+import {
+  Alert,
+  Box as Box4,
+  Button as Button3,
+  DialogHeader,
+  ErrorBoundary,
+  IconButton as IconButton2,
+  Stack as Stack2
+} from "@elementor/ui";
 import { __ as __5 } from "@wordpress/i18n";
 
 // src/hooks/use-dirty-state.ts
@@ -375,7 +481,7 @@ var FlippedColorSwatchIcon = ({ sx, ...props }) => /* @__PURE__ */ React2.create
 
 // src/components/class-manager/global-classes-list.tsx
 import * as React5 from "react";
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import { validateStyleLabel } from "@elementor/editor-styles-repository";
 import { EditableField, EllipsisWithTooltip, MenuListItem, useEditable, WarningInfotip } from "@elementor/editor-ui";
 import { DotsVerticalIcon } from "@elementor/icons";
@@ -522,14 +628,31 @@ var SortableItemIndicator = styled(Box2)`
 // src/components/class-manager/global-classes-list.tsx
 var GlobalClassesList = ({ disabled }) => {
   const cssClasses = useOrderedClasses();
-  const dispatch4 = useDispatch();
+  const dispatch5 = useDispatch();
   const [classesOrder, reorderClasses] = useReorder();
+  useEffect(() => {
+    const handler = (event) => {
+      if (event.key === "z" && (event.ctrlKey || event.metaKey)) {
+        event.stopImmediatePropagation();
+        event.preventDefault();
+        if (event.shiftKey) {
+          dispatch5(slice.actions.redo());
+          return;
+        }
+        dispatch5(slice.actions.undo());
+      }
+    };
+    window.addEventListener("keydown", handler, {
+      capture: true
+    });
+    return () => window.removeEventListener("keydown", handler);
+  }, [dispatch5]);
   if (!cssClasses?.length) {
     return /* @__PURE__ */ React5.createElement(EmptyState, null);
   }
   return /* @__PURE__ */ React5.createElement(DeleteConfirmationProvider, null, /* @__PURE__ */ React5.createElement(List, { sx: { display: "flex", flexDirection: "column", gap: 0.5 } }, /* @__PURE__ */ React5.createElement(SortableProvider, { value: classesOrder, onChange: reorderClasses }, cssClasses?.map(({ id: id2, label }) => {
     const renameClass = (newLabel) => {
-      dispatch4(
+      dispatch5(
         slice.actions.update({
           style: {
             id: id2,
@@ -552,10 +675,10 @@ var GlobalClassesList = ({ disabled }) => {
   }))));
 };
 var useReorder = () => {
-  const dispatch4 = useDispatch();
+  const dispatch5 = useDispatch();
   const order = useClassesOrder();
   const reorder = (newIds) => {
-    dispatch4(slice.actions.setOrder(newIds));
+    dispatch5(slice.actions.setOrder(newIds));
   };
   return [order, reorder];
 };
@@ -748,13 +871,13 @@ var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React6.createEl
 var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React6.createElement(DialogContentText2, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
 var SaveChangesDialogActions = ({ actions }) => {
   const [isConfirming, setIsConfirming] = useState3(false);
-  const { cancel, confirm } = actions;
+  const { cancel, confirm, discard } = actions;
   const onConfirm = async () => {
     setIsConfirming(true);
     await confirm.action();
     setIsConfirming(false);
   };
-  return /* @__PURE__ */ React6.createElement(DialogActions2, null, /* @__PURE__ */ React6.createElement(Button2, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), /* @__PURE__ */ React6.createElement(Button2, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
+  return /* @__PURE__ */ React6.createElement(DialogActions2, null, cancel && /* @__PURE__ */ React6.createElement(Button2, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React6.createElement(Button2, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React6.createElement(Button2, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
 };
 SaveChangesDialog.Title = SaveChangesDialogTitle;
 SaveChangesDialog.Content = SaveChangesDialogContent;
@@ -787,6 +910,10 @@ function ClassManagerPanel() {
   const { close: closePanel } = usePanelActions();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
   const { mutateAsync: publish, isPending: isPublishing } = usePublish();
+  const resetAndClosePanel = () => {
+    dispatch4(slice.actions.resetToInitialState({ context: "frontend" }));
+    closeSaveChangesDialog();
+  };
   usePreventUnload();
   return /* @__PURE__ */ React7.createElement(ThemeProvider, null, /* @__PURE__ */ React7.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React7.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React7.createElement(Panel, null, /* @__PURE__ */ React7.createElement(PanelHeader, null, /* @__PURE__ */ React7.createElement(Stack2, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React7.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React7.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), __5("Class Manager", "elementor")), /* @__PURE__ */ React7.createElement(
     CloseButton,
@@ -813,13 +940,15 @@ function ClassManagerPanel() {
       loading: isPublishing
     },
     __5("Save changes", "elementor")
-  )))), /* @__PURE__ */ React7.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React7.createElement(SaveChangesDialog, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.Title, null, __5("You have unsaved changes", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, __5("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, __5("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React7.createElement(
+  )))), /* @__PURE__ */ React7.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React7.createElement(SaveChangesDialog, null, /* @__PURE__ */ React7.createElement(DialogHeader, { onClose: closeSaveChangesDialog, logo: false }, /* @__PURE__ */ React7.createElement(SaveChangesDialog.Title, null, __5("You have unsaved changes", "elementor"))), /* @__PURE__ */ React7.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, __5("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, __5("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React7.createElement(
     SaveChangesDialog.Actions,
     {
       actions: {
-        cancel: {
-          label: __5("Cancel", "elementor"),
-          action: closeSaveChangesDialog
+        discard: {
+          label: __5("Discard", "elementor"),
+          action: () => {
+            resetAndClosePanel();
+          }
         },
         confirm: {
           label: __5("Save & Continue", "elementor"),
@@ -837,7 +966,7 @@ var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React7.createElemen
 var ErrorBoundaryFallback = () => /* @__PURE__ */ React7.createElement(Box4, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React7.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React7.createElement("strong", null, __5("Something went wrong", "elementor"))));
 var usePreventUnload = () => {
   const isDirty2 = useDirtyState();
-  useEffect(() => {
+  useEffect2(() => {
     const handleBeforeUnload = (event) => {
       if (isDirty2) {
         event.preventDefault();
@@ -904,16 +1033,16 @@ var ClassManagerButton = () => {
 };
 
 // src/components/populate-store.tsx
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect3 } from "react";
 import { __useDispatch as useDispatch2 } from "@elementor/store";
 function PopulateStore() {
-  const dispatch4 = useDispatch2();
-  useEffect2(() => {
+  const dispatch5 = useDispatch2();
+  useEffect3(() => {
     Promise.all([apiClient.all("preview"), apiClient.all("frontend")]).then(
       ([previewRes, frontendRes]) => {
         const { data: previewData } = previewRes;
         const { data: frontendData } = frontendRes;
-        dispatch4(
+        dispatch5(
           slice.actions.load({
             preview: {
               items: previewData.data,
@@ -927,7 +1056,7 @@ function PopulateStore() {
         );
       }
     );
-  }, [dispatch4]);
+  }, [dispatch5]);
   return null;
 }
 
@@ -972,6 +1101,10 @@ function init() {
     id: "global-classes-manager-button",
     component: ClassManagerButton
   });
+  registerStyleProviderToColors(GLOBAL_CLASSES_PROVIDER_KEY, {
+    name: "global",
+    getThemeColor: (theme) => theme.palette.global.dark
+  });
   listenTo(v1ReadyEvent(), () => {
     syncWithDocumentSave();
   });