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

package/dist/index.js

@@ -563,10 +563,119 @@ var useFilters = () => {
   }, [filters, allFilters]);
 };
 
+// src/load-existing-classes.ts
+var import_store10 = require("@elementor/store");
+
+// src/load-document-classes.ts
+var import_editor_documents2 = require("@elementor/editor-documents");
+var import_store8 = require("@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) {
+  (0, import_store8.__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 = (0, import_editor_documents2.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);
+  (0, import_store8.__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);
+  (0, import_store8.__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((0, import_store10.__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);
+  (0, import_store10.__dispatch)(slice.actions.mergeExistingClasses({ preview: previewItems, frontend: frontendItems }));
+}
+
 // src/save-global-classes.tsx
 var React3 = __toESM(require("react"));
 var import_editor_ui2 = require("@elementor/editor-ui");
-var import_store10 = require("@elementor/store");
+var import_store14 = require("@elementor/store");
 var import_utils4 = require("@elementor/utils");
 
 // src/components/class-manager/duplicate-label-dialog.tsx
@@ -671,7 +780,7 @@ var DuplicateLabelDialog = ({
 
 // src/utils/tracking.ts
 var import_events = require("@elementor/events");
-var import_store8 = require("@elementor/store");
+var import_store12 = require("@elementor/store");
 var trackGlobalClasses = async (payload) => {
   const { runAction } = payload;
   const data = await getSanitizedData(payload);
@@ -786,7 +895,7 @@ var extractCssClassData = (classId) => {
   return { classTitle };
 };
 var getCssClass = (classId) => {
-  const state = (0, import_store8.__getState)();
+  const state = (0, import_store12.__getState)();
   const cssClass = selectClass(state, classId);
   if (cssClass) {
     return cssClass;
@@ -820,10 +929,10 @@ var getRemovedInfo = (classId) => {
 
 // src/save-global-classes.tsx
 async function saveGlobalClasses2({ context: context2, onApprove }) {
-  const state = selectData((0, import_store10.__getState)());
+  const state = selectData((0, import_store14.__getState)());
   const apiAction = context2 === "preview" ? apiClient.saveDraft : apiClient.publish;
   const currentContext = context2 === "preview" ? selectPreviewInitialData : selectFrontendInitialData;
-  const changes = calculateChanges(state, currentContext((0, import_store10.__getState)()));
+  const changes = calculateChanges(state, currentContext((0, import_store14.__getState)()));
   const touchedIds = [...changes.added, ...changes.modified];
   const touchedItems = Object.fromEntries(
     touchedIds.map((id) => [id, state.items[id]]).filter(([, v]) => v)
@@ -833,10 +942,10 @@ async function saveGlobalClasses2({ context: context2, onApprove }) {
     order: state.order,
     changes
   });
-  (0, import_store10.__dispatch)(slice.actions.reset({ context: context2 }));
+  (0, import_store14.__dispatch)(slice.actions.reset({ context: context2 }));
   window.dispatchEvent(new CustomEvent("classes:updated", { detail: { context: context2 } }));
   if (response?.data?.data?.code === API_ERROR_CODES.DUPLICATED_LABEL) {
-    (0, import_store10.__dispatch)(slice.actions.updateMultiple(response.data.data.modifiedLabels));
+    (0, import_store14.__dispatch)(slice.actions.updateMultiple(response.data.data.modifiedLabels));
     trackGlobalClasses({
       event: "classPublishConflict",
       numOfConflicts: Object.keys(response.data.data.modifiedLabels).length
@@ -1159,14 +1268,14 @@ var IntroductionContent = () => {
 };
 
 // src/components/class-manager/delete-class.ts
-var import_store12 = require("@elementor/store");
+var import_store16 = require("@elementor/store");
 var isDeleted = false;
 var deleteClass = (id) => {
   trackGlobalClasses({
     event: "classDeleted",
     classId: id,
     runAction: () => {
-      (0, import_store12.__dispatch)(slice.actions.delete(id));
+      (0, import_store16.__dispatch)(slice.actions.delete(id));
       isDeleted = true;
     }
   });
@@ -1190,120 +1299,11 @@ var import_react_virtual = require("@tanstack/react-virtual");
 var import_i18n12 = require("@wordpress/i18n");
 
 // src/hooks/use-ordered-classes.ts
-var import_store14 = require("@elementor/store");
+var import_store18 = require("@elementor/store");
 var useOrderedClasses = () => {
-  return (0, import_store14.__useSelector)(selectOrderedClasses);
+  return (0, import_store18.__useSelector)(selectOrderedClasses);
 };
 
-// src/load-existing-classes.ts
-var import_store18 = require("@elementor/store");
-
-// src/load-document-classes.ts
-var import_editor_documents2 = require("@elementor/editor-documents");
-var import_store16 = require("@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) {
-  (0, import_store16.__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 = (0, import_editor_documents2.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);
-  (0, import_store16.__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);
-  (0, import_store16.__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((0, import_store18.__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);
-  (0, import_store18.__dispatch)(slice.actions.mergeExistingClasses({ preview: previewItems, frontend: frontendItems }));
-}
-
 // src/components/class-manager/class-item.tsx
 var React15 = __toESM(require("react"));
 var import_react7 = require("react");
@@ -2294,7 +2294,8 @@ function ClassManagerPanelContent({
       unblockPanelInteractions();
     };
   }, []);
-  const handleStopSync = (0, import_react10.useCallback)((classId) => {
+  const handleStopSync = (0, import_react10.useCallback)(async (classId) => {
+    await loadExistingClasses([classId]);
     (0, import_store22.__dispatch)(
       slice.actions.update({
         style: {
@@ -2306,7 +2307,8 @@ function ClassManagerPanelContent({
     trackGlobalClasses({ event: "classSyncToV3", classId, action: "unsync" });
     setStopSyncConfirmation(null);
   }, []);
-  const handleStartSync = (0, import_react10.useCallback)((classId) => {
+  const handleStartSync = (0, import_react10.useCallback)(async (classId) => {
+    await loadExistingClasses([classId]);
     (0, import_store22.__dispatch)(
       slice.actions.update({
         style: {