@elementor/editor-global-classes 0.20.4 → 0.21.0

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @elementor/editor-global-classes
 
+## 0.21.0
+
+### Minor Changes
+
+- 17b73ab: Update `@elementor/ui` version.
+- 708531f: Add history support for class removing, renaming, and reordering in class manager
+
+### Patch Changes
+
+- 29f1740: Handle provider-to-color logic from the style providers directly
+- Updated dependencies [9ccd243]
+- Updated dependencies [da0c4ca]
+- Updated dependencies [ac09e27]
+- Updated dependencies [17b73ab]
+- Updated dependencies [7a4178f]
+- Updated dependencies [29f1740]
+- Updated dependencies [8e18905]
+- Updated dependencies [3daa1c9]
+- Updated dependencies [40d00c2]
+- Updated dependencies [d5e9011]
+- Updated dependencies [93dfad1]
+- Updated dependencies [30a6d95]
+- Updated dependencies [f37c325]
+- Updated dependencies [20d04f2]
+  - @elementor/editor-editing-panel@1.46.0
+  - @elementor/editor-ui@0.12.0
+  - @elementor/editor-panels@0.16.0
+  - @elementor/editor@0.20.0
+  - @elementor/editor-styles-repository@0.10.3
+  - @elementor/editor-props@0.14.0
+  - @elementor/editor-documents@0.13.7
+  - @elementor/editor-styles@0.6.10
+
+## 0.20.5
+
+### Patch Changes
+
+- Updated dependencies [ab6320c]
+- Updated dependencies [dac8026]
+- Updated dependencies [2c11540]
+  - @elementor/editor-editing-panel@1.45.0
+  - @elementor/editor-props@0.13.0
+  - @elementor/editor-styles-repository@0.10.2
+  - @elementor/editor-styles@0.6.9
+
 ## 0.20.4
 
 ### Patch Changes

package/dist/index.js

@@ -40,7 +40,7 @@ var import_editor_editing_panel = require("@elementor/editor-editing-panel");
 var import_editor_panels2 = require("@elementor/editor-panels");
 var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
-var import_store20 = require("@elementor/store");
+var import_store22 = require("@elementor/store");
 
 // src/components/class-manager/class-manager-button.tsx
 var React8 = __toESM(require("react"));
@@ -87,6 +87,69 @@ var GlobalClassLabelAlreadyExistsError = (0, import_utils.createError)({
 var import_editor_props = require("@elementor/editor-props");
 var import_editor_styles = require("@elementor/editor-styles");
 var import_store = require("@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: {
@@ -109,11 +172,13 @@ var slice = (0, import_store.__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)
       );
@@ -121,10 +186,12 @@ var slice = (0, import_store.__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,
@@ -140,6 +207,7 @@ var slice = (0, import_store.__createSlice)({
       if (!style) {
         throw new GlobalClassNotFoundError({ context: { styleId: payload.id } });
       }
+      localHistory.next(state.data);
       const variant = (0, import_editor_styles.getVariantByMeta)(style, payload.meta);
       if (variant) {
         variant.props = (0, import_editor_props.mergeProps)(variant.props, payload.props);
@@ -153,10 +221,38 @@ var slice = (0, import_store.__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;
+      }
     }
   }
 });
@@ -175,8 +271,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 = (0, import_editor_styles_repository.createStylesProvider)({
-  key: "global-classes",
+  key: GLOBAL_CLASSES_PROVIDER_KEY,
   priority: 30,
   limit: MAX_CLASSES,
   labels: {
@@ -243,6 +340,7 @@ var import_editor_ui3 = require("@elementor/editor-ui");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var import_icons6 = require("@elementor/icons");
 var import_query = require("@elementor/query");
+var import_store16 = require("@elementor/store");
 var import_ui6 = require("@elementor/ui");
 var import_i18n5 = require("@wordpress/i18n");
 
@@ -513,14 +611,31 @@ var SortableItemIndicator = (0, import_ui3.styled)(import_ui3.Box)`
 // src/components/class-manager/global-classes-list.tsx
 var GlobalClassesList = ({ disabled }) => {
   const cssClasses = useOrderedClasses();
-  const dispatch4 = (0, import_store14.__useDispatch)();
+  const dispatch5 = (0, import_store14.__useDispatch)();
   const [classesOrder, reorderClasses] = useReorder();
+  (0, import_react3.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(import_ui4.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,
@@ -543,10 +658,10 @@ var GlobalClassesList = ({ disabled }) => {
   }))));
 };
 var useReorder = () => {
-  const dispatch4 = (0, import_store14.__useDispatch)();
+  const dispatch5 = (0, import_store14.__useDispatch)();
   const order = useClassesOrder();
   const reorder = (newIds) => {
-    dispatch4(slice.actions.setOrder(newIds));
+    dispatch5(slice.actions.setOrder(newIds));
   };
   return [order, reorder];
 };
@@ -732,13 +847,13 @@ var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React6.createEl
 var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React6.createElement(import_ui5.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
 var SaveChangesDialogActions = ({ actions }) => {
   const [isConfirming, setIsConfirming] = (0, import_react4.useState)(false);
-  const { cancel, confirm } = actions;
+  const { cancel, confirm, discard } = actions;
   const onConfirm = async () => {
     setIsConfirming(true);
     await confirm.action();
     setIsConfirming(false);
   };
-  return /* @__PURE__ */ React6.createElement(import_ui5.DialogActions, null, /* @__PURE__ */ React6.createElement(import_ui5.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), /* @__PURE__ */ React6.createElement(import_ui5.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
+  return /* @__PURE__ */ React6.createElement(import_ui5.DialogActions, null, cancel && /* @__PURE__ */ React6.createElement(import_ui5.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React6.createElement(import_ui5.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React6.createElement(import_ui5.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
 };
 SaveChangesDialog.Title = SaveChangesDialogTitle;
 SaveChangesDialog.Content = SaveChangesDialogContent;
@@ -771,6 +886,10 @@ function ClassManagerPanel() {
   const { close: closePanel } = usePanelActions();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
   const { mutateAsync: publish, isPending: isPublishing } = usePublish();
+  const resetAndClosePanel = () => {
+    (0, import_store16.__dispatch)(slice.actions.resetToInitialState({ context: "frontend" }));
+    closeSaveChangesDialog();
+  };
   usePreventUnload();
   return /* @__PURE__ */ React7.createElement(import_editor_ui3.ThemeProvider, 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.__)("Class Manager", "elementor")), /* @__PURE__ */ React7.createElement(
     CloseButton,
@@ -797,13 +916,15 @@ function ClassManagerPanel() {
       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(
+  )))), /* @__PURE__ */ React7.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React7.createElement(SaveChangesDialog, null, /* @__PURE__ */ React7.createElement(import_ui6.DialogHeader, { onClose: closeSaveChangesDialog, logo: false }, /* @__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(
     SaveChangesDialog.Actions,
     {
       actions: {
-        cancel: {
-          label: (0, import_i18n5.__)("Cancel", "elementor"),
-          action: closeSaveChangesDialog
+        discard: {
+          label: (0, import_i18n5.__)("Discard", "elementor"),
+          action: () => {
+            resetAndClosePanel();
+          }
         },
         confirm: {
           label: (0, import_i18n5.__)("Save & Continue", "elementor"),
@@ -889,15 +1010,15 @@ var ClassManagerButton = () => {
 
 // src/components/populate-store.tsx
 var import_react6 = require("react");
-var import_store16 = require("@elementor/store");
+var import_store18 = require("@elementor/store");
 function PopulateStore() {
-  const dispatch4 = (0, import_store16.__useDispatch)();
+  const dispatch5 = (0, import_store18.__useDispatch)();
   (0, import_react6.useEffect)(() => {
     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,
@@ -911,21 +1032,21 @@ function PopulateStore() {
         );
       }
     );
-  }, [dispatch4]);
+  }, [dispatch5]);
   return null;
 }
 
 // src/sync-with-document-save.ts
 var import_editor_documents4 = require("@elementor/editor-documents");
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
-var import_store18 = require("@elementor/store");
+var import_store20 = require("@elementor/store");
 function syncWithDocumentSave() {
   const unsubscribe = syncDirtyState();
   bindSaveAction();
   return unsubscribe;
 }
 function syncDirtyState() {
-  return (0, import_store18.__subscribeWithSelector)(selectIsDirty, () => {
+  return (0, import_store20.__subscribeWithSelector)(selectIsDirty, () => {
     if (!isDirty()) {
       return;
     }
@@ -940,12 +1061,12 @@ function bindSaveAction() {
   });
 }
 function isDirty() {
-  return selectIsDirty((0, import_store18.__getState)());
+  return selectIsDirty((0, import_store20.__getState)());
 }
 
 // src/init.ts
 function init() {
-  (0, import_store20.__registerSlice)(slice);
+  (0, import_store22.__registerSlice)(slice);
   (0, import_editor_panels2.__registerPanel)(panel);
   import_editor_styles_repository4.stylesRepository.register(globalClassesStylesProvider);
   (0, import_editor.injectIntoLogic)({
@@ -956,6 +1077,10 @@ function init() {
     id: "global-classes-manager-button",
     component: ClassManagerButton
   });
+  (0, import_editor_editing_panel.registerStyleProviderToColors)(GLOBAL_CLASSES_PROVIDER_KEY, {
+    name: "global",
+    getThemeColor: (theme) => theme.palette.global.dark
+  });
   (0, import_editor_v1_adapters6.__privateListenTo)((0, import_editor_v1_adapters6.v1ReadyEvent)(), () => {
     syncWithDocumentSave();
   });