@elementor/editor-global-classes 4.3.0-991 → 4.3.0-993

package/dist/index.mjs

@@ -526,10 +526,119 @@ var useFilters = () => {
   }, [filters, allFilters]);
 };
 
+// src/load-existing-classes.ts
+import { __dispatch as dispatch2, __getState as getState } from "@elementor/store";
+
+// src/load-document-classes.ts
+import { getCurrentDocument } from "@elementor/editor-documents";
+import { __dispatch as dispatch } from "@elementor/store";
+
+// src/utils/create-labels-for-classes.ts
+function createLabelsForClasses(entries) {
+  return Object.fromEntries(entries.map((e) => [e.id, e.label]));
+}
+
+// src/load-document-classes.ts
+function styleDefinitionsMapWithoutNull(map) {
+  return Object.fromEntries(
+    Object.entries(map).filter(
+      (entry) => entry[1] !== null
+    )
+  );
+}
+function resetGlobalClassesState(globalOrder, classLabels) {
+  dispatch(
+    slice.actions.load({
+      preview: { items: {}, order: globalOrder },
+      frontend: { items: {}, order: globalOrder },
+      classLabels
+    })
+  );
+}
+async function loadCurrentDocumentClasses() {
+  const [previewIndexRes, frontendIndexRes] = await Promise.all([
+    apiClient.all("preview"),
+    apiClient.all("frontend")
+  ]);
+  const previewIndex = previewIndexRes.data.data;
+  const frontendIndex = frontendIndexRes.data.data;
+  const classLabels = createLabelsForClasses(previewIndex);
+  const previewOrder = previewIndex.map((e) => e.id);
+  const frontendOrder = frontendIndex.map((e) => e.id);
+  resetGlobalClassesState(previewOrder, classLabels);
+  const postId = getCurrentDocument()?.id;
+  if (!postId) {
+    return;
+  }
+  const [previewPostRes, frontendPostRes] = await Promise.all([
+    apiClient.getStylesForPost(postId, "preview"),
+    apiClient.getStylesForPost(postId, "frontend")
+  ]);
+  const previewItems = styleDefinitionsMapWithoutNull(previewPostRes.data.data);
+  const frontendItems = styleDefinitionsMapWithoutNull(frontendPostRes.data.data);
+  dispatch(
+    slice.actions.load({
+      preview: { items: previewItems, order: previewOrder },
+      frontend: { items: frontendItems, order: frontendOrder },
+      classLabels
+    })
+  );
+}
+async function addDocumentClasses(documentId) {
+  const [previewPostRes, frontendPostRes] = await Promise.all([
+    apiClient.getStylesForPost(documentId, "preview"),
+    apiClient.getStylesForPost(documentId, "frontend")
+  ]);
+  const previewItems = styleDefinitionsMapWithoutNull(previewPostRes.data.data);
+  const frontendItems = styleDefinitionsMapWithoutNull(frontendPostRes.data.data);
+  dispatch(
+    slice.actions.mergeExistingClasses({
+      preview: previewItems,
+      frontend: frontendItems
+    })
+  );
+}
+
+// src/load-existing-classes.ts
+var pendingLoad = null;
+var pendingIds = /* @__PURE__ */ new Set();
+async function loadExistingClasses(classIds) {
+  const existingClasses = selectGlobalClasses(getState());
+  const missingIds = classIds.filter((id) => !(id in existingClasses));
+  if (missingIds.length === 0) {
+    return;
+  }
+  missingIds.forEach((id) => pendingIds.add(id));
+  if (pendingLoad) {
+    await pendingLoad;
+    return loadExistingClasses(classIds);
+  }
+  pendingLoad = fetchAndMergeClasses();
+  try {
+    await pendingLoad;
+  } finally {
+    pendingLoad = null;
+  }
+}
+async function fetchAndMergeClasses() {
+  const idsToFetch = Array.from(pendingIds);
+  pendingIds.clear();
+  if (idsToFetch.length === 0) {
+    return;
+  }
+  const [previewResponse, frontendResponse] = await Promise.all([
+    apiClient.getStylesByIds(idsToFetch, "preview"),
+    apiClient.getStylesByIds(idsToFetch, "frontend")
+  ]);
+  const previewItems = styleDefinitionsMapWithoutNull(previewResponse.data.data);
+  const frontendItems = styleDefinitionsMapWithoutNull(frontendResponse.data.data);
+  dispatch2(slice.actions.mergeExistingClasses({ preview: previewItems, frontend: frontendItems }));
+}
+
 // src/save-global-classes.tsx
 import * as React3 from "react";
 import { openDialog } from "@elementor/editor-ui";
-import { __dispatch as dispatch, __getState as getState2 } from "@elementor/store";
+import { __dispatch as dispatch3, __getState as getState3 } from "@elementor/store";
 import { hash } from "@elementor/utils";
 
 // src/components/class-manager/duplicate-label-dialog.tsx
@@ -645,7 +754,7 @@ var DuplicateLabelDialog = ({
 
 // src/utils/tracking.ts
 import { getMixpanel } from "@elementor/events";
-import { __getState as getState } from "@elementor/store";
+import { __getState as getState2 } from "@elementor/store";
 var trackGlobalClasses = async (payload) => {
   const { runAction } = payload;
   const data = await getSanitizedData(payload);
@@ -760,7 +869,7 @@ var extractCssClassData = (classId) => {
   return { classTitle };
 };
 var getCssClass = (classId) => {
-  const state = getState();
+  const state = getState2();
   const cssClass = selectClass(state, classId);
   if (cssClass) {
     return cssClass;
@@ -794,10 +903,10 @@ var getRemovedInfo = (classId) => {
 
 // src/save-global-classes.tsx
 async function saveGlobalClasses2({ context: context2, onApprove }) {
-  const state = selectData(getState2());
+  const state = selectData(getState3());
   const apiAction = context2 === "preview" ? apiClient.saveDraft : apiClient.publish;
   const currentContext = context2 === "preview" ? selectPreviewInitialData : selectFrontendInitialData;
-  const changes = calculateChanges(state, currentContext(getState2()));
+  const changes = calculateChanges(state, currentContext(getState3()));
   const touchedIds = [...changes.added, ...changes.modified];
   const touchedItems = Object.fromEntries(
     touchedIds.map((id) => [id, state.items[id]]).filter(([, v]) => v)
@@ -807,10 +916,10 @@ async function saveGlobalClasses2({ context: context2, onApprove }) {
     order: state.order,
     changes
   });
-  dispatch(slice.actions.reset({ context: context2 }));
+  dispatch3(slice.actions.reset({ context: context2 }));
   window.dispatchEvent(new CustomEvent("classes:updated", { detail: { context: context2 } }));
   if (response?.data?.data?.code === API_ERROR_CODES.DUPLICATED_LABEL) {
-    dispatch(slice.actions.updateMultiple(response.data.data.modifiedLabels));
+    dispatch3(slice.actions.updateMultiple(response.data.data.modifiedLabels));
     trackGlobalClasses({
       event: "classPublishConflict",
       numOfConflicts: Object.keys(response.data.data.modifiedLabels).length
@@ -1133,14 +1242,14 @@ var IntroductionContent = () => {
 };
 
 // src/components/class-manager/delete-class.ts
-import { __dispatch as dispatch2 } from "@elementor/store";
+import { __dispatch as dispatch4 } from "@elementor/store";
 var isDeleted = false;
 var deleteClass = (id) => {
   trackGlobalClasses({
     event: "classDeleted",
     classId: id,
     runAction: () => {
-      dispatch2(slice.actions.delete(id));
+      dispatch4(slice.actions.delete(id));
       isDeleted = true;
     }
   });
@@ -1169,115 +1278,6 @@ var useOrderedClasses = () => {
   return useSelector3(selectOrderedClasses);
 };
 
-// src/load-existing-classes.ts
-import { __dispatch as dispatch4, __getState as getState3 } from "@elementor/store";
-
-// src/load-document-classes.ts
-import { getCurrentDocument } from "@elementor/editor-documents";
-import { __dispatch as dispatch3 } from "@elementor/store";
-
-// src/utils/create-labels-for-classes.ts
-function createLabelsForClasses(entries) {
-  return Object.fromEntries(entries.map((e) => [e.id, e.label]));
-}
-
-// src/load-document-classes.ts
-function styleDefinitionsMapWithoutNull(map) {
-  return Object.fromEntries(
-    Object.entries(map).filter(
-      (entry) => entry[1] !== null
-    )
-  );
-}
-function resetGlobalClassesState(globalOrder, classLabels) {
-  dispatch3(
-    slice.actions.load({
-      preview: { items: {}, order: globalOrder },
-      frontend: { items: {}, order: globalOrder },
-      classLabels
-    })
-  );
-}
-async function loadCurrentDocumentClasses() {
-  const [previewIndexRes, frontendIndexRes] = await Promise.all([
-    apiClient.all("preview"),
-    apiClient.all("frontend")
-  ]);
-  const previewIndex = previewIndexRes.data.data;
-  const frontendIndex = frontendIndexRes.data.data;
-  const classLabels = createLabelsForClasses(previewIndex);
-  const previewOrder = previewIndex.map((e) => e.id);
-  const frontendOrder = frontendIndex.map((e) => e.id);
-  resetGlobalClassesState(previewOrder, classLabels);
-  const postId = getCurrentDocument()?.id;
-  if (!postId) {
-    return;
-  }
-  const [previewPostRes, frontendPostRes] = await Promise.all([
-    apiClient.getStylesForPost(postId, "preview"),
-    apiClient.getStylesForPost(postId, "frontend")
-  ]);
-  const previewItems = styleDefinitionsMapWithoutNull(previewPostRes.data.data);
-  const frontendItems = styleDefinitionsMapWithoutNull(frontendPostRes.data.data);
-  dispatch3(
-    slice.actions.load({
-      preview: { items: previewItems, order: previewOrder },
-      frontend: { items: frontendItems, order: frontendOrder },
-      classLabels
-    })
-  );
-}
-async function addDocumentClasses(documentId) {
-  const [previewPostRes, frontendPostRes] = await Promise.all([
-    apiClient.getStylesForPost(documentId, "preview"),
-    apiClient.getStylesForPost(documentId, "frontend")
-  ]);
-  const previewItems = styleDefinitionsMapWithoutNull(previewPostRes.data.data);
-  const frontendItems = styleDefinitionsMapWithoutNull(frontendPostRes.data.data);
-  dispatch3(
-    slice.actions.mergeExistingClasses({
-      preview: previewItems,
-      frontend: frontendItems
-    })
-  );
-}
-
-// src/load-existing-classes.ts
-var pendingLoad = null;
-var pendingIds = /* @__PURE__ */ new Set();
-async function loadExistingClasses(classIds) {
-  const existingClasses = selectGlobalClasses(getState3());
-  const missingIds = classIds.filter((id) => !(id in existingClasses));
-  if (missingIds.length === 0) {
-    return;
-  }
-  missingIds.forEach((id) => pendingIds.add(id));
-  if (pendingLoad) {
-    await pendingLoad;
-    return loadExistingClasses(classIds);
-  }
-  pendingLoad = fetchAndMergeClasses();
-  try {
-    await pendingLoad;
-  } finally {
-    pendingLoad = null;
-  }
-}
-async function fetchAndMergeClasses() {
-  const idsToFetch = Array.from(pendingIds);
-  pendingIds.clear();
-  if (idsToFetch.length === 0) {
-    return;
-  }
-  const [previewResponse, frontendResponse] = await Promise.all([
-    apiClient.getStylesByIds(idsToFetch, "preview"),
-    apiClient.getStylesByIds(idsToFetch, "frontend")
-  ]);
-  const previewItems = styleDefinitionsMapWithoutNull(previewResponse.data.data);
-  const frontendItems = styleDefinitionsMapWithoutNull(frontendResponse.data.data);
-  dispatch4(slice.actions.mergeExistingClasses({ preview: previewItems, frontend: frontendItems }));
-}
-
 // src/components/class-manager/class-item.tsx
 import * as React15 from "react";
 import { useRef, useState as useState4 } from "react";
@@ -2317,7 +2317,8 @@ function ClassManagerPanelContent({
       unblockPanelInteractions();
     };
   }, []);
-  const handleStopSync = useCallback((classId) => {
+  const handleStopSync = useCallback(async (classId) => {
+    await loadExistingClasses([classId]);
     dispatch5(
       slice.actions.update({
         style: {
@@ -2329,7 +2330,8 @@ function ClassManagerPanelContent({
     trackGlobalClasses({ event: "classSyncToV3", classId, action: "unsync" });
     setStopSyncConfirmation(null);
   }, []);
-  const handleStartSync = useCallback((classId) => {
+  const handleStartSync = useCallback(async (classId) => {
+    await loadExistingClasses([classId]);
     dispatch5(
       slice.actions.update({
         style: {