@elementor/editor-global-classes 4.1.0-686 → 4.1.0-688

package/dist/index.mjs

@@ -2474,8 +2474,59 @@ function createClassName(prefix) {
   return newClassName;
 }
 
+// src/components/global-styles-import-listener.tsx
+import { useEffect as useEffect4 } from "react";
+import { __useDispatch as useDispatch2 } from "@elementor/store";
+function GlobalStylesImportListener() {
+  const dispatch5 = useDispatch2();
+  useEffect4(() => {
+    const handleGlobalStylesImported = (event) => {
+      const importedClasses = event.detail?.global_classes;
+      if (importedClasses?.items && importedClasses?.order) {
+        dispatch5(
+          slice.actions.load({
+            preview: {
+              items: importedClasses.items,
+              order: importedClasses.order
+            },
+            frontend: {
+              items: importedClasses.items,
+              order: importedClasses.order
+            }
+          })
+        );
+      }
+      Promise.all([apiClient.all("preview"), apiClient.all("frontend")]).then(([previewRes, frontendRes]) => {
+        const { data: previewData } = previewRes;
+        const { data: frontendData } = frontendRes;
+        dispatch5(
+          slice.actions.load({
+            preview: {
+              items: previewData.data,
+              order: previewData.meta.order
+            },
+            frontend: {
+              items: frontendData.data,
+              order: frontendData.meta.order
+            }
+          })
+        );
+      }).catch(() => {
+      });
+    };
+    window.addEventListener("elementor/global-styles/imported", handleGlobalStylesImported);
+    return () => {
+      window.removeEventListener(
+        "elementor/global-styles/imported",
+        handleGlobalStylesImported
+      );
+    };
+  }, [dispatch5]);
+  return null;
+}
+
 // src/components/open-panel-from-url.tsx
-import { useEffect as useEffect4, useRef as useRef2 } from "react";
+import { useEffect as useEffect5, useRef as useRef2 } from "react";
 import { __privateListenTo as listenTo, routeOpenEvent } from "@elementor/editor-v1-adapters";
 var ACTIVE_PANEL_PARAM = "active-panel";
 var PANEL_ID = "global-classes-manager";
@@ -2483,7 +2534,7 @@ var DEFAULT_PANEL_ROUTE = "panel/elements";
 function OpenPanelFromUrl() {
   const { open } = usePanelActions();
   const hasOpened = useRef2(false);
-  useEffect4(() => {
+  useEffect5(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const activePanel = urlParams.get(ACTIVE_PANEL_PARAM);
     if (activePanel !== PANEL_ID) {
@@ -2504,11 +2555,11 @@ function OpenPanelFromUrl() {
 }
 
 // src/components/populate-store.tsx
-import { useEffect as useEffect5 } from "react";
-import { __useDispatch as useDispatch2 } from "@elementor/store";
+import { useEffect as useEffect6 } from "react";
+import { __useDispatch as useDispatch3 } from "@elementor/store";
 function PopulateStore() {
-  const dispatch5 = useDispatch2();
-  useEffect5(() => {
+  const dispatch5 = useDispatch3();
+  useEffect6(() => {
     Promise.all([apiClient.all("preview"), apiClient.all("frontend")]).then(
       ([previewRes, frontendRes]) => {
         const { data: previewData } = previewRes;
@@ -2973,7 +3024,7 @@ var initMcpIntegration = () => {
 };
 
 // src/sync-with-document.tsx
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 import { __privateListenTo as listenTo2, v1ReadyEvent } from "@elementor/editor-v1-adapters";
 
 // src/sync-with-document-save.ts
@@ -2981,9 +3032,11 @@ import { getCurrentUser } from "@elementor/editor-current-user";
 import { setDocumentModifiedStatus as setDocumentModifiedStatus2 } from "@elementor/editor-documents";
 import { registerDataHook } from "@elementor/editor-v1-adapters";
 import { __getState as getState4, __subscribeWithSelector as subscribeWithSelector2 } from "@elementor/store";
+var pendingSave = null;
 function syncWithDocumentSave(panelActions) {
   const unsubscribe = syncDirtyState();
   bindSaveAction(panelActions);
+  bindBeforeSaveTemplateAction();
   return unsubscribe;
 }
 function syncDirtyState() {
@@ -2994,20 +3047,41 @@ function syncDirtyState() {
     setDocumentModifiedStatus2(true);
   });
 }
+function triggerSave(panelActions, context2 = "preview") {
+  const user = getCurrentUser();
+  const canEdit = user?.capabilities.includes(UPDATE_CLASS_CAPABILITY_KEY);
+  if (!canEdit) {
+    return null;
+  }
+  if (pendingSave) {
+    return pendingSave;
+  }
+  const promise = saveGlobalClasses({
+    context: context2,
+    onApprove: panelActions?.open
+  });
+  pendingSave = promise;
+  promise.finally(() => {
+    pendingSave = null;
+  });
+  return promise;
+}
 function bindSaveAction(panelActions) {
   registerDataHook("dependency", "document/save/save", (args) => {
-    const user = getCurrentUser();
-    const canEdit = user?.capabilities.includes(UPDATE_CLASS_CAPABILITY_KEY);
-    if (!canEdit) {
-      return true;
-    }
-    saveGlobalClasses({
-      context: args.status === "publish" ? "frontend" : "preview",
-      onApprove: panelActions?.open
-    });
+    triggerSave(panelActions, args.status === "publish" ? "frontend" : "preview");
     return true;
   });
 }
+function bindBeforeSaveTemplateAction() {
+  window.addEventListener("elementor/global-styles/before-save", ((event) => {
+    if (!pendingSave && isDirty()) {
+      triggerSave();
+    }
+    if (pendingSave) {
+      event.detail.promises.push(pendingSave);
+    }
+  }));
+}
 function isDirty() {
   return selectIsDirty(getState4());
 }
@@ -3015,7 +3089,7 @@ function isDirty() {
 // src/sync-with-document.tsx
 function SyncWithDocumentSave() {
   const panelActions = usePanelActions();
-  useEffect6(() => {
+  useEffect7(() => {
     listenTo2(v1ReadyEvent(), () => {
       syncWithDocumentSave(panelActions);
     });
@@ -3036,6 +3110,10 @@ function init() {
     id: "global-classes-sync-with-document",
     component: SyncWithDocumentSave
   });
+  injectIntoLogic({
+    id: "global-classes-import-listener",
+    component: GlobalStylesImportListener
+  });
   injectIntoLogic({
     id: "global-classes-prefetch-css-class-usage",
     component: PrefetchCssClassUsage