@elementor/editor-global-classes 4.1.0-beta1 → 4.1.0-beta2

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleDefinitionID } from '@elementor/editor-styles';
+import { StyleDefinitionID, StyleDefinition } from '@elementor/editor-styles';
 
 type ClassManagerPanelEmbeddedProps = {
     onRequestClose: () => void | Promise<void>;
@@ -20,6 +20,6 @@ type GlobalClassIndexEntry = {
 
 declare function addDocumentClasses(documentId: number): Promise<void>;
 
-declare function createLabelsForClasses(entries: GlobalClassIndexEntry[]): Record<StyleDefinitionID, string>;
+declare function createLabelsForClasses(entries: Array<GlobalClassIndexEntry | StyleDefinition>): Record<StyleDefinitionID, string>;
 
 export { ClassManagerPanelEmbedded, type ClassManagerPanelEmbeddedProps, GLOBAL_CLASSES_URI, type GlobalClassIndexEntry, addDocumentClasses, createLabelsForClasses, init, loadExistingClasses };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleDefinitionID } from '@elementor/editor-styles';
+import { StyleDefinitionID, StyleDefinition } from '@elementor/editor-styles';
 
 type ClassManagerPanelEmbeddedProps = {
     onRequestClose: () => void | Promise<void>;
@@ -20,6 +20,6 @@ type GlobalClassIndexEntry = {
 
 declare function addDocumentClasses(documentId: number): Promise<void>;
 
-declare function createLabelsForClasses(entries: GlobalClassIndexEntry[]): Record<StyleDefinitionID, string>;
+declare function createLabelsForClasses(entries: Array<GlobalClassIndexEntry | StyleDefinition>): Record<StyleDefinitionID, string>;
 
 export { ClassManagerPanelEmbedded, type ClassManagerPanelEmbeddedProps, GLOBAL_CLASSES_URI, type GlobalClassIndexEntry, addDocumentClasses, createLabelsForClasses, init, loadExistingClasses };

package/dist/index.js

@@ -282,6 +282,20 @@ var slice = (0, import_store.__createSlice)({
           state.classLabels[id2] = previewClassData.label;
         }
       });
+    },
+    setOrderWithoutHistory(state, { payload }) {
+      state.data.order = payload;
+    },
+    updateAfterTemplateImport(state, {
+      payload
+    }) {
+      state.initialData.frontend.items = { ...state.initialData.frontend.items, ...payload.addedItems };
+      state.initialData.frontend.order = [...state.initialData.frontend.order, ...payload.addedIdsOrder];
+      state.initialData.preview.items = { ...state.initialData.preview.items, ...payload.addedItems };
+      state.initialData.preview.order = [...state.initialData.preview.order, ...payload.addedIdsOrder];
+      state.data.items = { ...state.data.items, ...payload.addedItems };
+      state.data.order = [...state.data.order, ...payload.addedIdsOrder];
+      state.classLabels = { ...state.classLabels, ...payload.addedClassLabels };
     }
   }
 });
@@ -2030,8 +2044,9 @@ var useFilteredCssClasses = () => {
     [cssClasses]
   );
   const filteredClasses = (0, import_react8.useMemo)(() => {
-    if (searchValue.length > 1) {
-      return lowercaseLabels.filter((cssClass) => cssClass.lowerLabel.includes(searchValue.toLowerCase()));
+    const normalizedSearch = searchValue.replace(/[^a-zA-Z0-9_-]/g, "").toLowerCase();
+    if (normalizedSearch.length > 1) {
+      return lowercaseLabels.filter((cssClass) => cssClass.lowerLabel.includes(normalizedSearch));
     }
     return cssClasses;
   }, [searchValue, cssClasses, lowercaseLabels]);
@@ -2529,7 +2544,7 @@ async function fetchAndMergeClasses() {
 }
 
 // src/global-classes-styles-provider.ts
-var MAX_CLASSES = 5e3;
+var MAX_CLASSES = 1e3;
 var GLOBAL_CLASSES_PROVIDER_KEY = "global-classes";
 var PREGENERATED_LINK_PATTERN = /^global-([0-9]+-)?(preview|frontend)-[a-zA-Z_-]+-css$/;
 var globalClassesStylesProvider = (0, import_editor_styles_repository2.createStylesProvider)({
@@ -2672,7 +2687,7 @@ var import_editor_mcp2 = require("@elementor/editor-mcp");
 var import_editor_panels2 = require("@elementor/editor-panels");
 var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
-var import_store31 = require("@elementor/store");
+var import_store32 = require("@elementor/store");
 
 // src/components/class-manager/class-manager-button.tsx
 var React20 = __toESM(require("react"));
@@ -2820,8 +2835,20 @@ var import_store28 = require("@elementor/store");
 function GlobalStylesImportListener() {
   const dispatch7 = (0, import_store28.__useDispatch)();
   (0, import_react11.useEffect)(() => {
-    const handleGlobalStylesImported = () => {
-      loadCurrentDocumentClasses();
+    const handleGlobalStylesImported = async (event) => {
+      const customEvent = event;
+      const globalClasses = customEvent.detail?.global_classes;
+      if (!globalClasses?.added_items_order || !globalClasses?.added_items || globalClasses?.added_items_order?.length === 0) {
+        loadCurrentDocumentClasses();
+        return;
+      }
+      dispatch7(
+        slice.actions.updateAfterTemplateImport({
+          addedItems: globalClasses.added_items,
+          addedIdsOrder: globalClasses.added_items_order,
+          addedClassLabels: createLabelsForClasses(Object.values(globalClasses.added_items))
+        })
+      );
     };
     window.addEventListener(import_editor_canvas.GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
     return () => {
@@ -2831,16 +2858,29 @@ function GlobalStylesImportListener() {
   return null;
 }
 
-// src/components/open-panel-from-url.tsx
+// src/components/open-panel-from-event.tsx
 var import_react12 = require("react");
+var EVENT_OPEN_GLOBAL_CLASSES_MANAGER = "elementor/open-global-classes-manager";
+function OpenPanelFromEvent() {
+  const { open } = usePanelActions();
+  (0, import_react12.useEffect)(() => {
+    const handler2 = () => open();
+    window.addEventListener(EVENT_OPEN_GLOBAL_CLASSES_MANAGER, handler2);
+    return () => window.removeEventListener(EVENT_OPEN_GLOBAL_CLASSES_MANAGER, handler2);
+  }, [open]);
+  return null;
+}
+
+// src/components/open-panel-from-url.tsx
+var import_react13 = 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_react12.useRef)(false);
-  (0, import_react12.useEffect)(() => {
+  const hasOpened = (0, import_react13.useRef)(false);
+  (0, import_react13.useEffect)(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const activePanel = urlParams.get(ACTIVE_PANEL_PARAM);
     if (activePanel !== PANEL_ID) {
@@ -2861,10 +2901,10 @@ function OpenPanelFromUrl() {
 }
 
 // src/components/populate-store.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 function PopulateStore() {
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     loadCurrentDocumentClasses();
     (0, import_editor_v1_adapters5.registerDataHook)("after", "editor/documents/attach-preview", async () => {
       await loadCurrentDocumentClasses();
@@ -3316,14 +3356,14 @@ var initMcpIntegration = (reg, canvasMcpEntry) => {
 };
 
 // src/sync-with-document.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 
 // src/sync-with-document-save.ts
 var import_editor_current_user3 = require("@elementor/editor-current-user");
 var import_editor_documents6 = require("@elementor/editor-documents");
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
-var import_store29 = require("@elementor/store");
+var import_store30 = require("@elementor/store");
 var pendingSave = null;
 function syncWithDocumentSave(panelActions) {
   const unsubscribe = syncDirtyState();
@@ -3332,7 +3372,7 @@ function syncWithDocumentSave(panelActions) {
   return unsubscribe;
 }
 function syncDirtyState() {
-  return (0, import_store29.__subscribeWithSelector)(selectIsDirty, () => {
+  return (0, import_store30.__subscribeWithSelector)(selectIsDirty, () => {
     if (!isDirty()) {
       return;
     }
@@ -3375,13 +3415,13 @@ function bindBeforeSaveTemplateAction() {
   }));
 }
 function isDirty() {
-  return selectIsDirty((0, import_store29.__getState)());
+  return selectIsDirty((0, import_store30.__getState)());
 }
 
 // src/sync-with-document.tsx
 function SyncWithDocumentSave() {
   const { open: openClassPanel } = usePanelActions();
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const unsubscribe = (0, import_editor_v1_adapters7.__privateListenTo)((0, import_editor_v1_adapters7.v1ReadyEvent)(), () => {
       const open = (0, import_editor_v1_adapters7.isExperimentActive)("e_editor_design_system_panel") ? () => {
         window.dispatchEvent(new CustomEvent("elementor/open-global-classes-manager"));
@@ -3395,7 +3435,7 @@ function SyncWithDocumentSave() {
 
 // src/init.ts
 function init() {
-  (0, import_store31.__registerSlice)(slice);
+  (0, import_store32.__registerSlice)(slice);
   if (!(0, import_editor_v1_adapters8.isExperimentActive)("e_editor_design_system_panel")) {
     (0, import_editor_panels2.__registerPanel)(panel);
   }
@@ -3421,6 +3461,10 @@ function init() {
       id: "global-classes-open-panel-from-url",
       component: OpenPanelFromUrl
     });
+    (0, import_editor.injectIntoLogic)({
+      id: "global-classes-open-panel-from-event",
+      component: OpenPanelFromEvent
+    });
   }
   (0, import_editor_editing_panel2.injectIntoCssClassConvert)({
     id: "global-classes-convert-from-local-class",