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

package/dist/index.js

@@ -564,7 +564,7 @@ var import_editor = require("@elementor/editor");
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
 var import_editor_panels2 = require("@elementor/editor-panels");
 var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
-var import_store26 = require("@elementor/store");
+var import_store28 = require("@elementor/store");
 
 // src/components/class-manager/class-manager-button.tsx
 var React20 = __toESM(require("react"));
@@ -2418,16 +2418,67 @@ function createClassName(prefix) {
   return newClassName;
 }
 
-// src/components/open-panel-from-url.tsx
+// src/components/global-styles-import-listener.tsx
 var import_react10 = require("react");
+var import_store22 = require("@elementor/store");
+function GlobalStylesImportListener() {
+  const dispatch5 = (0, import_store22.__useDispatch)();
+  (0, import_react10.useEffect)(() => {
+    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
+var import_react11 = require("react");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var ACTIVE_PANEL_PARAM = "active-panel";
 var PANEL_ID = "global-classes-manager";
 var DEFAULT_PANEL_ROUTE = "panel/elements";
 function OpenPanelFromUrl() {
   const { open } = usePanelActions();
-  const hasOpened = (0, import_react10.useRef)(false);
-  (0, import_react10.useEffect)(() => {
+  const hasOpened = (0, import_react11.useRef)(false);
+  (0, import_react11.useEffect)(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const activePanel = urlParams.get(ACTIVE_PANEL_PARAM);
     if (activePanel !== PANEL_ID) {
@@ -2448,11 +2499,11 @@ function OpenPanelFromUrl() {
 }
 
 // src/components/populate-store.tsx
-var import_react11 = require("react");
-var import_store22 = require("@elementor/store");
+var import_react12 = require("react");
+var import_store24 = require("@elementor/store");
 function PopulateStore() {
-  const dispatch5 = (0, import_store22.__useDispatch)();
-  (0, import_react11.useEffect)(() => {
+  const dispatch5 = (0, import_store24.__useDispatch)();
+  (0, import_react12.useEffect)(() => {
     Promise.all([apiClient.all("preview"), apiClient.all("frontend")]).then(
       ([previewRes, frontendRes]) => {
         const { data: previewData } = previewRes;
@@ -2917,49 +2968,72 @@ var initMcpIntegration = () => {
 };
 
 // src/sync-with-document.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
 
 // src/sync-with-document-save.ts
 var import_editor_current_user3 = require("@elementor/editor-current-user");
 var import_editor_documents5 = require("@elementor/editor-documents");
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
-var import_store24 = require("@elementor/store");
+var import_store26 = require("@elementor/store");
+var pendingSave = null;
 function syncWithDocumentSave(panelActions) {
   const unsubscribe = syncDirtyState();
   bindSaveAction(panelActions);
+  bindBeforeSaveTemplateAction();
   return unsubscribe;
 }
 function syncDirtyState() {
-  return (0, import_store24.__subscribeWithSelector)(selectIsDirty, () => {
+  return (0, import_store26.__subscribeWithSelector)(selectIsDirty, () => {
     if (!isDirty()) {
       return;
     }
     (0, import_editor_documents5.setDocumentModifiedStatus)(true);
   });
 }
+function triggerSave(panelActions, context2 = "preview") {
+  const user = (0, import_editor_current_user3.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) {
   (0, import_editor_v1_adapters5.registerDataHook)("dependency", "document/save/save", (args) => {
-    const user = (0, import_editor_current_user3.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((0, import_store24.__getState)());
+  return selectIsDirty((0, import_store26.__getState)());
 }
 
 // src/sync-with-document.tsx
 function SyncWithDocumentSave() {
   const panelActions = usePanelActions();
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     (0, import_editor_v1_adapters6.__privateListenTo)((0, import_editor_v1_adapters6.v1ReadyEvent)(), () => {
       syncWithDocumentSave(panelActions);
     });
@@ -2969,7 +3043,7 @@ function SyncWithDocumentSave() {
 
 // src/init.ts
 function init() {
-  (0, import_store26.__registerSlice)(slice);
+  (0, import_store28.__registerSlice)(slice);
   (0, import_editor_panels2.__registerPanel)(panel);
   import_editor_styles_repository5.stylesRepository.register(globalClassesStylesProvider);
   (0, import_editor.injectIntoLogic)({
@@ -2980,6 +3054,10 @@ function init() {
     id: "global-classes-sync-with-document",
     component: SyncWithDocumentSave
   });
+  (0, import_editor.injectIntoLogic)({
+    id: "global-classes-import-listener",
+    component: GlobalStylesImportListener
+  });
   (0, import_editor.injectIntoLogic)({
     id: "global-classes-prefetch-css-class-usage",
     component: PrefetchCssClassUsage