@elementor/editor-global-classes 4.0.0-manual → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -35,9 +35,6 @@ __export(index_exports, {
35
35
  });
36
36
  module.exports = __toCommonJS(index_exports);
37
37
 
38
- // src/mcp-integration/classes-resource.ts
39
- var import_editor_mcp = require("@elementor/editor-mcp");
40
-
41
38
  // src/global-classes-styles-provider.ts
42
39
  var import_editor_styles2 = require("@elementor/editor-styles");
43
40
  var import_editor_styles_repository = require("@elementor/editor-styles-repository");
@@ -387,6 +384,41 @@ var getSanitizedData = async (payload) => {
387
384
  return { ...payload, classTitle: getCssClass(payload.classId).label };
388
385
  }
389
386
  break;
387
+ case "classSyncToV3PopupShown":
388
+ return {
389
+ ...payload,
390
+ interaction_type: "popup_shown",
391
+ target_type: "popup",
392
+ target_name: "sync_to_v3_popup",
393
+ interaction_result: "popup_viewed",
394
+ target_location: "widget_panel",
395
+ location_l1: "class_manager"
396
+ };
397
+ case "classSyncToV3": {
398
+ const classLabel = getCssClass(payload.classId).label;
399
+ const isSync = payload.action === "sync";
400
+ return {
401
+ ...payload,
402
+ interaction_type: "click",
403
+ target_type: classLabel,
404
+ target_name: isSync ? "sync_to_v3" : "unsync_to_v3",
405
+ interaction_result: isSync ? "class_is_synced_to_V3" : "class_is_unsynced_from_V3",
406
+ target_location: "widget_panel",
407
+ location_l1: "class_manager",
408
+ interaction_description: isSync ? `user_synced_${classLabel}_to_v3` : `user_unsync_${classLabel}_from_v3`
409
+ };
410
+ }
411
+ case "classSyncToV3PopupClick": {
412
+ const isSyncAction = payload.action === "sync";
413
+ return {
414
+ ...payload,
415
+ interaction_type: "click",
416
+ target_type: "button",
417
+ target_name: isSyncAction ? "sync_to_v3" : "cancel",
418
+ interaction_result: isSyncAction ? "class_is_synced" : "cancel",
419
+ target_location: "sync_to_v3_popup"
420
+ };
421
+ }
390
422
  default:
391
423
  return payload;
392
424
  }
@@ -532,9 +564,7 @@ var updateLocalStorageCache = () => {
532
564
  const classes = globalClassesStylesProvider.actions.all();
533
565
  localStorage.setItem(STORAGE_KEY, JSON.stringify(classes));
534
566
  };
535
- var initClassesResource = () => {
536
- const canvasMcpEntry = (0, import_editor_mcp.getMCPByDomain)("canvas");
537
- const classesMcpEntry = (0, import_editor_mcp.getMCPByDomain)("classes");
567
+ var initClassesResource = (classesMcpEntry, canvasMcpEntry) => {
538
568
  [canvasMcpEntry, classesMcpEntry].forEach((entry) => {
539
569
  const { mcpServer, resource, waitForReady } = entry;
540
570
  resource(
@@ -562,9 +592,10 @@ var initClassesResource = () => {
562
592
  // src/init.ts
563
593
  var import_editor = require("@elementor/editor");
564
594
  var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
595
+ var import_editor_mcp = require("@elementor/editor-mcp");
565
596
  var import_editor_panels2 = require("@elementor/editor-panels");
566
597
  var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
567
- var import_store26 = require("@elementor/store");
598
+ var import_store28 = require("@elementor/store");
568
599
 
569
600
  // src/components/class-manager/class-manager-button.tsx
570
601
  var React20 = __toESM(require("react"));
@@ -602,7 +633,7 @@ var import_editor_current_user2 = require("@elementor/editor-current-user");
602
633
  var import_editor_documents3 = require("@elementor/editor-documents");
603
634
  var import_editor_panels = require("@elementor/editor-panels");
604
635
  var import_editor_ui9 = require("@elementor/editor-ui");
605
- var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
636
+ var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
606
637
  var import_icons11 = require("@elementor/icons");
607
638
  var import_query3 = require("@elementor/query");
608
639
  var import_store20 = require("@elementor/store");
@@ -894,6 +925,7 @@ async function saveGlobalClasses({ context: context2, onApprove }) {
894
925
  changes: calculateChanges(state, currentContext((0, import_store12.__getState)()))
895
926
  });
896
927
  (0, import_store12.__dispatch)(slice.actions.reset({ context: context2 }));
928
+ window.dispatchEvent(new CustomEvent("classes:updated", { detail: { context: context2 } }));
897
929
  if (response?.data?.data?.code === API_ERROR_CODES.DUPLICATED_LABEL) {
898
930
  (0, import_store12.__dispatch)(slice.actions.updateMultiple(response.data.data.modifiedLabels));
899
931
  trackGlobalClasses({
@@ -1251,7 +1283,6 @@ var React15 = __toESM(require("react"));
1251
1283
  var import_react6 = require("react");
1252
1284
  var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
1253
1285
  var import_editor_ui8 = require("@elementor/editor-ui");
1254
- var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
1255
1286
  var import_icons9 = require("@elementor/icons");
1256
1287
  var import_ui12 = require("@elementor/ui");
1257
1288
  var import_i18n11 = require("@wordpress/i18n");
@@ -1707,7 +1738,7 @@ var ClassItem = ({
1707
1738
  },
1708
1739
  /* @__PURE__ */ React15.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n11.__)("Rename", "elementor"))
1709
1740
  ),
1710
- (0, import_editor_v1_adapters2.isExperimentActive)("e_design_system_sync") && onToggleSync && /* @__PURE__ */ React15.createElement(
1741
+ onToggleSync && /* @__PURE__ */ React15.createElement(
1711
1742
  import_editor_ui8.MenuListItem,
1712
1743
  {
1713
1744
  onClick: () => {
@@ -1715,7 +1746,7 @@ var ClassItem = ({
1715
1746
  onToggleSync(id2, !syncToV3);
1716
1747
  }
1717
1748
  },
1718
- /* @__PURE__ */ React15.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "text.primary" } }, syncToV3 ? (0, import_i18n11.__)("Stop syncing to Version 3", "elementor") : (0, import_i18n11.__)("Sync to Version 3", "elementor"))
1749
+ /* @__PURE__ */ React15.createElement(import_ui12.Stack, { direction: "row", alignItems: "center", gap: 1 }, syncToV3 ? /* @__PURE__ */ React15.createElement(import_icons9.RefreshOffIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React15.createElement(import_icons9.RefreshIcon, { fontSize: "tiny" }), /* @__PURE__ */ React15.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "text.primary" } }, syncToV3 ? (0, import_i18n11.__)("Stop syncing to Global Fonts", "elementor") : (0, import_i18n11.__)("Sync to Global Fonts", "elementor")))
1719
1750
  ),
1720
1751
  /* @__PURE__ */ React15.createElement(
1721
1752
  import_editor_ui8.MenuListItem,
@@ -2064,17 +2095,38 @@ var import_react8 = require("react");
2064
2095
  var import_ui15 = require("@elementor/ui");
2065
2096
  var import_i18n14 = require("@wordpress/i18n");
2066
2097
  var IMAGE_URL = "https://assets.elementor.com/packages/v1/images/class-manager-sync-modal.png";
2067
- var StartSyncToV3Modal = ({ externalOpen, onExternalClose, onConfirm } = {}) => {
2098
+ var StartSyncToV3Modal = ({
2099
+ externalOpen,
2100
+ classId,
2101
+ onExternalClose,
2102
+ onConfirm
2103
+ } = {}) => {
2068
2104
  const [shouldShowAgain, setShouldShowAgain] = (0, import_react8.useState)(true);
2105
+ const hasTrackedExposure = (0, import_react8.useRef)(false);
2106
+ (0, import_react8.useEffect)(() => {
2107
+ if (externalOpen && classId && !hasTrackedExposure.current) {
2108
+ hasTrackedExposure.current = true;
2109
+ trackGlobalClasses({ event: "classSyncToV3PopupShown", classId });
2110
+ }
2111
+ if (!externalOpen) {
2112
+ hasTrackedExposure.current = false;
2113
+ }
2114
+ }, [externalOpen, classId]);
2069
2115
  const handleClose = () => {
2116
+ if (classId) {
2117
+ trackGlobalClasses({ event: "classSyncToV3PopupClick", classId, action: "cancel" });
2118
+ }
2070
2119
  onExternalClose?.();
2071
2120
  };
2072
2121
  const handleConfirm = () => {
2122
+ if (classId) {
2123
+ trackGlobalClasses({ event: "classSyncToV3PopupClick", classId, action: "sync" });
2124
+ }
2073
2125
  onConfirm?.();
2074
2126
  onExternalClose?.();
2075
2127
  };
2076
- return /* @__PURE__ */ React18.createElement(import_ui15.Dialog, { open: !!externalOpen, onClose: handleClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React18.createElement(import_ui15.DialogContent, { sx: { p: 0 } }, /* @__PURE__ */ React18.createElement(import_ui15.Box, { component: "img", src: IMAGE_URL, alt: "", sx: { width: "100%", display: "block" } }), /* @__PURE__ */ React18.createElement(import_ui15.Box, { sx: { px: 3, pt: 4, pb: 1 } }, /* @__PURE__ */ React18.createElement(import_ui15.Typography, { variant: "h6" }, (0, import_i18n14.__)("Sync class to version 3 Global Fonts", "elementor")), /* @__PURE__ */ React18.createElement(import_ui15.Typography, { variant: "body2", color: "secondary", sx: { mb: 2, pt: 1 } }, (0, import_i18n14.__)(
2077
- "Only typography settings supported in version 3 will be applied, including: font family, responsive font sizes, weight, text transform, decoration, line height, letter spacing, and word spacing. Changes made in the class will automatically apply to version 3.",
2128
+ return /* @__PURE__ */ React18.createElement(import_ui15.Dialog, { open: !!externalOpen, onClose: handleClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React18.createElement(import_ui15.DialogContent, { sx: { p: 0 } }, /* @__PURE__ */ React18.createElement(import_ui15.Box, { component: "img", src: IMAGE_URL, alt: "", sx: { width: "100%", display: "block" } }), /* @__PURE__ */ React18.createElement(import_ui15.Box, { sx: { px: 3, pt: 4, pb: 1 } }, /* @__PURE__ */ React18.createElement(import_ui15.Typography, { variant: "h6" }, (0, import_i18n14.__)("Sync class to Global Fonts", "elementor")), /* @__PURE__ */ React18.createElement(import_ui15.Typography, { variant: "body2", color: "secondary", sx: { mb: 2, pt: 1 } }, (0, import_i18n14.__)(
2129
+ "Only typography settings supported in Global Fonts will be applied, including: font family, responsive font sizes, weight, text transform, decoration, line height, letter spacing, and word spacing. Changes made in the class will automatically apply to Global Fonts.",
2078
2130
  "elementor"
2079
2131
  )))), /* @__PURE__ */ React18.createElement(import_ui15.DialogActions, { sx: { justifyContent: "space-between", px: 3, pb: 2 } }, /* @__PURE__ */ React18.createElement(
2080
2132
  import_ui15.FormControlLabel,
@@ -2088,7 +2140,7 @@ var StartSyncToV3Modal = ({ externalOpen, onExternalClose, onConfirm } = {}) =>
2088
2140
  ),
2089
2141
  label: /* @__PURE__ */ React18.createElement(import_ui15.Typography, { variant: "body2", color: "secondary" }, (0, import_i18n14.__)("Don't show again", "elementor"))
2090
2142
  }
2091
- ), /* @__PURE__ */ React18.createElement(import_ui15.Box, { sx: { display: "flex", gap: 1 } }, /* @__PURE__ */ React18.createElement(import_ui15.Button, { onClick: handleClose, color: "secondary", size: "small" }, (0, import_i18n14.__)("Cancel", "elementor")), /* @__PURE__ */ React18.createElement(import_ui15.Button, { onClick: handleConfirm, variant: "contained", size: "small" }, (0, import_i18n14.__)("Sync to version 3", "elementor")))));
2143
+ ), /* @__PURE__ */ React18.createElement(import_ui15.Box, { sx: { display: "flex", gap: 1 } }, /* @__PURE__ */ React18.createElement(import_ui15.Button, { onClick: handleClose, color: "secondary", size: "small" }, (0, import_i18n14.__)("Cancel", "elementor")), /* @__PURE__ */ React18.createElement(import_ui15.Button, { onClick: handleConfirm, variant: "contained", size: "small" }, (0, import_i18n14.__)("Sync to Global Fonts", "elementor")))));
2092
2144
  };
2093
2145
 
2094
2146
  // src/components/class-manager/class-manager-panel.tsx
@@ -2098,7 +2150,7 @@ var reloadDocument = () => {
2098
2150
  const currentDocument = (0, import_editor_documents3.getCurrentDocument)();
2099
2151
  const documentsManager = (0, import_editor_documents3.getV1DocumentsManager)();
2100
2152
  documentsManager.invalidateCache();
2101
- return (0, import_editor_v1_adapters3.__privateRunCommand)("editor/documents/switch", {
2153
+ return (0, import_editor_v1_adapters2.__privateRunCommand)("editor/documents/switch", {
2102
2154
  id: currentDocument?.id,
2103
2155
  shouldScroll: false,
2104
2156
  shouldNavigateToDefaultRoute: false
@@ -2109,11 +2161,11 @@ var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
2109
2161
  component: ClassManagerPanel,
2110
2162
  allowedEditModes: ["edit", id],
2111
2163
  onOpen: () => {
2112
- (0, import_editor_v1_adapters3.changeEditMode)(id);
2164
+ (0, import_editor_v1_adapters2.changeEditMode)(id);
2113
2165
  blockPanelInteractions();
2114
2166
  },
2115
2167
  onClose: async () => {
2116
- (0, import_editor_v1_adapters3.changeEditMode)("edit");
2168
+ (0, import_editor_v1_adapters2.changeEditMode)("edit");
2117
2169
  await reloadDocument();
2118
2170
  unblockPanelInteractions();
2119
2171
  },
@@ -2140,6 +2192,7 @@ function ClassManagerPanel() {
2140
2192
  }
2141
2193
  })
2142
2194
  );
2195
+ trackGlobalClasses({ event: "classSyncToV3", classId, action: "unsync" });
2143
2196
  setStopSyncConfirmation(null);
2144
2197
  }, []);
2145
2198
  const handleStartSync = (0, import_react9.useCallback)((classId) => {
@@ -2151,6 +2204,7 @@ function ClassManagerPanel() {
2151
2204
  }
2152
2205
  })
2153
2206
  );
2207
+ trackGlobalClasses({ event: "classSyncToV3", classId, action: "sync" });
2154
2208
  setStartSyncConfirmation(null);
2155
2209
  }, []);
2156
2210
  const handleStopSyncRequest = (0, import_react9.useCallback)(
@@ -2222,6 +2276,7 @@ function ClassManagerPanel() {
2222
2276
  StartSyncToV3Modal,
2223
2277
  {
2224
2278
  externalOpen: true,
2279
+ classId: startSyncConfirmation,
2225
2280
  onExternalClose: () => setStartSyncConfirmation(null),
2226
2281
  onConfirm: () => handleStartSync(startSyncConfirmation)
2227
2282
  }
@@ -2294,7 +2349,7 @@ var TotalCssClassCounter = () => {
2294
2349
  };
2295
2350
  var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => {
2296
2351
  const [, suppressStopSyncMessage] = (0, import_editor_current_user2.useSuppressedMessage)(STOP_SYNC_MESSAGE_KEY);
2297
- return /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.Title, { icon: FlippedColorSwatchIcon, iconColor: "primary" }, (0, import_i18n15.__)("Un-sync typography class", "elementor")), /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.Content, null, /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.ContentText, null, (0, import_i18n15.__)("You're about to stop syncing a typography class to version 3.", "elementor")), /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.ContentText, { sx: { mt: 1 } }, (0, import_i18n15.__)(
2352
+ return /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.Title, { icon: FlippedColorSwatchIcon, iconColor: "primary" }, (0, import_i18n15.__)("Un-sync typography class", "elementor")), /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.Content, null, /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.ContentText, null, (0, import_i18n15.__)("You're about to stop syncing a typography class to Global Fonts.", "elementor")), /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.ContentText, { sx: { mt: 1 } }, (0, import_i18n15.__)(
2298
2353
  "Note that if it's being used anywhere, the affected elements will inherit the default typography.",
2299
2354
  "elementor"
2300
2355
  ))), /* @__PURE__ */ React19.createElement(
@@ -2418,22 +2473,73 @@ function createClassName(prefix) {
2418
2473
  return newClassName;
2419
2474
  }
2420
2475
 
2421
- // src/components/open-panel-from-url.tsx
2476
+ // src/components/global-styles-import-listener.tsx
2422
2477
  var import_react10 = require("react");
2423
- var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
2478
+ var import_store22 = require("@elementor/store");
2479
+ function GlobalStylesImportListener() {
2480
+ const dispatch5 = (0, import_store22.__useDispatch)();
2481
+ (0, import_react10.useEffect)(() => {
2482
+ const handleGlobalStylesImported = (event) => {
2483
+ const importedClasses = event.detail?.global_classes;
2484
+ if (importedClasses?.items && importedClasses?.order) {
2485
+ dispatch5(
2486
+ slice.actions.load({
2487
+ preview: {
2488
+ items: importedClasses.items,
2489
+ order: importedClasses.order
2490
+ },
2491
+ frontend: {
2492
+ items: importedClasses.items,
2493
+ order: importedClasses.order
2494
+ }
2495
+ })
2496
+ );
2497
+ }
2498
+ Promise.all([apiClient.all("preview"), apiClient.all("frontend")]).then(([previewRes, frontendRes]) => {
2499
+ const { data: previewData } = previewRes;
2500
+ const { data: frontendData } = frontendRes;
2501
+ dispatch5(
2502
+ slice.actions.load({
2503
+ preview: {
2504
+ items: previewData.data,
2505
+ order: previewData.meta.order
2506
+ },
2507
+ frontend: {
2508
+ items: frontendData.data,
2509
+ order: frontendData.meta.order
2510
+ }
2511
+ })
2512
+ );
2513
+ }).catch(() => {
2514
+ });
2515
+ };
2516
+ window.addEventListener("elementor/global-styles/imported", handleGlobalStylesImported);
2517
+ return () => {
2518
+ window.removeEventListener(
2519
+ "elementor/global-styles/imported",
2520
+ handleGlobalStylesImported
2521
+ );
2522
+ };
2523
+ }, [dispatch5]);
2524
+ return null;
2525
+ }
2526
+
2527
+ // src/components/open-panel-from-url.tsx
2528
+ var import_react11 = require("react");
2529
+ var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
2424
2530
  var ACTIVE_PANEL_PARAM = "active-panel";
2425
2531
  var PANEL_ID = "global-classes-manager";
2426
2532
  var DEFAULT_PANEL_ROUTE = "panel/elements";
2427
2533
  function OpenPanelFromUrl() {
2428
2534
  const { open } = usePanelActions();
2429
- const hasOpened = (0, import_react10.useRef)(false);
2430
- (0, import_react10.useEffect)(() => {
2535
+ const hasOpened = (0, import_react11.useRef)(false);
2536
+ (0, import_react11.useEffect)(() => {
2431
2537
  const urlParams = new URLSearchParams(window.location.search);
2432
2538
  const activePanel = urlParams.get(ACTIVE_PANEL_PARAM);
2433
2539
  if (activePanel !== PANEL_ID) {
2434
2540
  return;
2435
2541
  }
2436
- const cleanup = (0, import_editor_v1_adapters4.__privateListenTo)((0, import_editor_v1_adapters4.routeOpenEvent)(DEFAULT_PANEL_ROUTE), () => {
2542
+ const cleanup = (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.routeOpenEvent)(DEFAULT_PANEL_ROUTE), () => {
2437
2543
  if (hasOpened.current) {
2438
2544
  return;
2439
2545
  }
@@ -2448,11 +2554,11 @@ function OpenPanelFromUrl() {
2448
2554
  }
2449
2555
 
2450
2556
  // src/components/populate-store.tsx
2451
- var import_react11 = require("react");
2452
- var import_store22 = require("@elementor/store");
2557
+ var import_react12 = require("react");
2558
+ var import_store24 = require("@elementor/store");
2453
2559
  function PopulateStore() {
2454
- const dispatch5 = (0, import_store22.__useDispatch)();
2455
- (0, import_react11.useEffect)(() => {
2560
+ const dispatch5 = (0, import_store24.__useDispatch)();
2561
+ (0, import_react12.useEffect)(() => {
2456
2562
  Promise.all([apiClient.all("preview"), apiClient.all("frontend")]).then(
2457
2563
  ([previewRes, frontendRes]) => {
2458
2564
  const { data: previewData } = previewRes;
@@ -2475,9 +2581,6 @@ function PopulateStore() {
2475
2581
  return null;
2476
2582
  }
2477
2583
 
2478
- // src/mcp-integration/index.ts
2479
- var import_editor_mcp2 = require("@elementor/editor-mcp");
2480
-
2481
2584
  // src/mcp-integration/mcp-apply-unapply-global-classes.ts
2482
2585
  var import_editor_editing_panel = require("@elementor/editor-editing-panel");
2483
2586
  var import_schema = require("@elementor/schema");
@@ -2906,61 +3009,91 @@ async function attemptDelete(opts) {
2906
3009
  }
2907
3010
 
2908
3011
  // src/mcp-integration/index.ts
2909
- var initMcpIntegration = () => {
2910
- const reg = (0, import_editor_mcp2.getMCPByDomain)("classes", {
2911
- instructions: "MCP server for management of Elementor global classes"
2912
- });
3012
+ var initMcpIntegration = (reg, canvasMcpEntry) => {
3013
+ const { setMCPDescription } = reg;
3014
+ setMCPDescription(
3015
+ `Everything related to V4 ( Atomic ) global classes.
3016
+ # Global classes
3017
+ - Create/update/delete global classes
3018
+ - Get list of global classes
3019
+ - Get details of a global class
3020
+ - Get details of a global class
3021
+ `
3022
+ );
2913
3023
  initMcpApplyUnapplyGlobalClasses(reg);
2914
3024
  initMcpApplyGetGlobalClassUsages(reg);
2915
3025
  initManageGlobalClasses(reg);
2916
- initClassesResource();
3026
+ initClassesResource(reg, canvasMcpEntry);
2917
3027
  };
2918
3028
 
2919
3029
  // src/sync-with-document.tsx
2920
- var import_react12 = require("react");
2921
- var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
3030
+ var import_react13 = require("react");
3031
+ var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
2922
3032
 
2923
3033
  // src/sync-with-document-save.ts
2924
3034
  var import_editor_current_user3 = require("@elementor/editor-current-user");
2925
3035
  var import_editor_documents5 = require("@elementor/editor-documents");
2926
- var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
2927
- var import_store24 = require("@elementor/store");
3036
+ var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
3037
+ var import_store26 = require("@elementor/store");
3038
+ var pendingSave = null;
2928
3039
  function syncWithDocumentSave(panelActions) {
2929
3040
  const unsubscribe = syncDirtyState();
2930
3041
  bindSaveAction(panelActions);
3042
+ bindBeforeSaveTemplateAction();
2931
3043
  return unsubscribe;
2932
3044
  }
2933
3045
  function syncDirtyState() {
2934
- return (0, import_store24.__subscribeWithSelector)(selectIsDirty, () => {
3046
+ return (0, import_store26.__subscribeWithSelector)(selectIsDirty, () => {
2935
3047
  if (!isDirty()) {
2936
3048
  return;
2937
3049
  }
2938
3050
  (0, import_editor_documents5.setDocumentModifiedStatus)(true);
2939
3051
  });
2940
3052
  }
3053
+ function triggerSave(panelActions, context2 = "preview") {
3054
+ const user = (0, import_editor_current_user3.getCurrentUser)();
3055
+ const canEdit = user?.capabilities.includes(UPDATE_CLASS_CAPABILITY_KEY);
3056
+ if (!canEdit) {
3057
+ return null;
3058
+ }
3059
+ if (pendingSave) {
3060
+ return pendingSave;
3061
+ }
3062
+ const promise = saveGlobalClasses({
3063
+ context: context2,
3064
+ onApprove: panelActions?.open
3065
+ });
3066
+ pendingSave = promise;
3067
+ promise.finally(() => {
3068
+ pendingSave = null;
3069
+ });
3070
+ return promise;
3071
+ }
2941
3072
  function bindSaveAction(panelActions) {
2942
- (0, import_editor_v1_adapters5.registerDataHook)("dependency", "document/save/save", (args) => {
2943
- const user = (0, import_editor_current_user3.getCurrentUser)();
2944
- const canEdit = user?.capabilities.includes(UPDATE_CLASS_CAPABILITY_KEY);
2945
- if (!canEdit) {
2946
- return true;
2947
- }
2948
- saveGlobalClasses({
2949
- context: args.status === "publish" ? "frontend" : "preview",
2950
- onApprove: panelActions?.open
2951
- });
3073
+ (0, import_editor_v1_adapters4.registerDataHook)("dependency", "document/save/save", (args) => {
3074
+ triggerSave(panelActions, args.status === "publish" ? "frontend" : "preview");
2952
3075
  return true;
2953
3076
  });
2954
3077
  }
3078
+ function bindBeforeSaveTemplateAction() {
3079
+ window.addEventListener("elementor/global-styles/before-save", ((event) => {
3080
+ if (!pendingSave && isDirty()) {
3081
+ triggerSave();
3082
+ }
3083
+ if (pendingSave) {
3084
+ event.detail.promises.push(pendingSave);
3085
+ }
3086
+ }));
3087
+ }
2955
3088
  function isDirty() {
2956
- return selectIsDirty((0, import_store24.__getState)());
3089
+ return selectIsDirty((0, import_store26.__getState)());
2957
3090
  }
2958
3091
 
2959
3092
  // src/sync-with-document.tsx
2960
3093
  function SyncWithDocumentSave() {
2961
3094
  const panelActions = usePanelActions();
2962
- (0, import_react12.useEffect)(() => {
2963
- (0, import_editor_v1_adapters6.__privateListenTo)((0, import_editor_v1_adapters6.v1ReadyEvent)(), () => {
3095
+ (0, import_react13.useEffect)(() => {
3096
+ (0, import_editor_v1_adapters5.__privateListenTo)((0, import_editor_v1_adapters5.v1ReadyEvent)(), () => {
2964
3097
  syncWithDocumentSave(panelActions);
2965
3098
  });
2966
3099
  }, []);
@@ -2969,7 +3102,7 @@ function SyncWithDocumentSave() {
2969
3102
 
2970
3103
  // src/init.ts
2971
3104
  function init() {
2972
- (0, import_store26.__registerSlice)(slice);
3105
+ (0, import_store28.__registerSlice)(slice);
2973
3106
  (0, import_editor_panels2.__registerPanel)(panel);
2974
3107
  import_editor_styles_repository5.stylesRepository.register(globalClassesStylesProvider);
2975
3108
  (0, import_editor.injectIntoLogic)({
@@ -2980,6 +3113,10 @@ function init() {
2980
3113
  id: "global-classes-sync-with-document",
2981
3114
  component: SyncWithDocumentSave
2982
3115
  });
3116
+ (0, import_editor.injectIntoLogic)({
3117
+ id: "global-classes-import-listener",
3118
+ component: GlobalStylesImportListener
3119
+ });
2983
3120
  (0, import_editor.injectIntoLogic)({
2984
3121
  id: "global-classes-prefetch-css-class-usage",
2985
3122
  component: PrefetchCssClassUsage
@@ -3000,7 +3137,10 @@ function init() {
3000
3137
  name: "global",
3001
3138
  getThemeColor: (theme) => theme.palette.global.dark
3002
3139
  });
3003
- initMcpIntegration();
3140
+ initMcpIntegration(
3141
+ (0, import_editor_mcp.getMCPByDomain)("classes", { instructions: "MCP server for management of Elementor global classes" }),
3142
+ (0, import_editor_mcp.getMCPByDomain)("canvas")
3143
+ );
3004
3144
  }
3005
3145
  // Annotate the CommonJS export names for ESM import in node:
3006
3146
  0 && (module.exports = {