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

package/dist/index.mjs

@@ -263,6 +263,20 @@ var slice = 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 };
     }
   }
 });
@@ -2062,8 +2076,9 @@ var useFilteredCssClasses = () => {
     [cssClasses]
   );
   const filteredClasses = useMemo3(() => {
-    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]);
@@ -2576,7 +2591,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 = createStylesProvider({
@@ -2874,8 +2889,20 @@ import { __useDispatch as useDispatch2 } from "@elementor/store";
 function GlobalStylesImportListener() {
   const dispatch7 = useDispatch2();
   useEffect5(() => {
-    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(GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
     return () => {
@@ -2885,8 +2912,21 @@ function GlobalStylesImportListener() {
   return null;
 }
 
+// src/components/open-panel-from-event.tsx
+import { useEffect as useEffect6 } from "react";
+var EVENT_OPEN_GLOBAL_CLASSES_MANAGER = "elementor/open-global-classes-manager";
+function OpenPanelFromEvent() {
+  const { open } = usePanelActions();
+  useEffect6(() => {
+    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
-import { useEffect as useEffect6, useRef as useRef3 } from "react";
+import { useEffect as useEffect7, useRef as useRef3 } from "react";
 import { __privateListenTo as listenTo, routeOpenEvent } from "@elementor/editor-v1-adapters";
 var ACTIVE_PANEL_PARAM = "active-panel";
 var PANEL_ID = "global-classes-manager";
@@ -2894,7 +2934,7 @@ var DEFAULT_PANEL_ROUTE = "panel/elements";
 function OpenPanelFromUrl() {
   const { open } = usePanelActions();
   const hasOpened = useRef3(false);
-  useEffect6(() => {
+  useEffect7(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const activePanel = urlParams.get(ACTIVE_PANEL_PARAM);
     if (activePanel !== PANEL_ID) {
@@ -2915,10 +2955,10 @@ function OpenPanelFromUrl() {
 }
 
 // src/components/populate-store.tsx
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect8 } from "react";
 import { registerDataHook } from "@elementor/editor-v1-adapters";
 function PopulateStore() {
-  useEffect7(() => {
+  useEffect8(() => {
     loadCurrentDocumentClasses();
     registerDataHook("after", "editor/documents/attach-preview", async () => {
       await loadCurrentDocumentClasses();
@@ -3370,7 +3410,7 @@ var initMcpIntegration = (reg, canvasMcpEntry) => {
 };
 
 // src/sync-with-document.tsx
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect9 } from "react";
 import { __privateListenTo as listenTo2, isExperimentActive as isExperimentActive3, v1ReadyEvent } from "@elementor/editor-v1-adapters";
 
 // src/sync-with-document-save.ts
@@ -3435,7 +3475,7 @@ function isDirty() {
 // src/sync-with-document.tsx
 function SyncWithDocumentSave() {
   const { open: openClassPanel } = usePanelActions();
-  useEffect8(() => {
+  useEffect9(() => {
     const unsubscribe = listenTo2(v1ReadyEvent(), () => {
       const open = isExperimentActive3("e_editor_design_system_panel") ? () => {
         window.dispatchEvent(new CustomEvent("elementor/open-global-classes-manager"));
@@ -3475,6 +3515,10 @@ function init() {
       id: "global-classes-open-panel-from-url",
       component: OpenPanelFromUrl
     });
+    injectIntoLogic({
+      id: "global-classes-open-panel-from-event",
+      component: OpenPanelFromEvent
+    });
   }
   injectIntoCssClassConvert({
     id: "global-classes-convert-from-local-class",