@elementor/editor-global-classes 4.2.0-870 → 4.2.0-872

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-global-classes",
-  "version": "4.2.0-870",
+  "version": "4.2.0-872",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,29 +39,29 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.2.0-870",
-    "@elementor/editor-current-user": "4.2.0-870",
-    "@elementor/editor-documents": "4.2.0-870",
-    "@elementor/editor-editing-panel": "4.2.0-870",
-    "@elementor/editor-mcp": "4.2.0-870",
-    "@elementor/editor-panels": "4.2.0-870",
-    "@elementor/editor-props": "4.2.0-870",
-    "@elementor/editor-variables": "4.2.0-870",
-    "@elementor/editor-styles": "4.2.0-870",
-    "@elementor/editor-canvas": "4.2.0-870",
-    "@elementor/editor-styles-repository": "4.2.0-870",
-    "@elementor/editor-ui": "4.2.0-870",
-    "@elementor/editor-v1-adapters": "4.2.0-870",
-    "@elementor/http-client": "4.2.0-870",
+    "@elementor/editor": "4.2.0-872",
+    "@elementor/editor-current-user": "4.2.0-872",
+    "@elementor/editor-documents": "4.2.0-872",
+    "@elementor/editor-editing-panel": "4.2.0-872",
+    "@elementor/editor-mcp": "4.2.0-872",
+    "@elementor/editor-panels": "4.2.0-872",
+    "@elementor/editor-props": "4.2.0-872",
+    "@elementor/editor-variables": "4.2.0-872",
+    "@elementor/editor-styles": "4.2.0-872",
+    "@elementor/editor-canvas": "4.2.0-872",
+    "@elementor/editor-styles-repository": "4.2.0-872",
+    "@elementor/editor-ui": "4.2.0-872",
+    "@elementor/editor-v1-adapters": "4.2.0-872",
+    "@elementor/http-client": "4.2.0-872",
     "@elementor/icons": "~1.75.1",
-    "@elementor/query": "4.2.0-870",
-    "@elementor/schema": "4.2.0-870",
-    "@elementor/store": "4.2.0-870",
+    "@elementor/query": "4.2.0-872",
+    "@elementor/schema": "4.2.0-872",
+    "@elementor/store": "4.2.0-872",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-870",
+    "@elementor/utils": "4.2.0-872",
     "@tanstack/react-virtual": "^3.13.24",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/events": "4.2.0-870"
+    "@elementor/events": "4.2.0-872"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/components/class-manager/global-classes-list.tsx

@@ -248,8 +248,9 @@ const useFilteredCssClasses = (): StyleDefinition[] => {
 	);
 
 	const filteredClasses = 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 ] );

package/src/components/global-styles-import-listener.tsx

@@ -1,15 +1,35 @@
 import { useEffect } from 'react';
-import { GLOBAL_STYLES_IMPORTED_EVENT } from '@elementor/editor-canvas';
+import { GLOBAL_STYLES_IMPORTED_EVENT, type ImportedGlobalStylesPayload } from '@elementor/editor-canvas';
 import { __useDispatch as useDispatch } from '@elementor/store';
 
 import { loadCurrentDocumentClasses } from '../load-document-classes';
+import { slice } from '../store';
+import { createLabelsForClasses } from '../utils/create-labels-for-classes';
 
 export function GlobalStylesImportListener() {
 	const dispatch = useDispatch();
 
 	useEffect( () => {
-		const handleGlobalStylesImported = () => {
-			loadCurrentDocumentClasses();
+		const handleGlobalStylesImported = async ( event: Event ) => {
+			const customEvent = event as CustomEvent< ImportedGlobalStylesPayload >;
+			const globalClasses = customEvent.detail?.global_classes;
+
+			if (
+				! globalClasses?.added_items_order ||
+				! globalClasses?.added_items ||
+				globalClasses?.added_items_order?.length === 0
+			) {
+				loadCurrentDocumentClasses();
+				return;
+			}
+
+			dispatch(
+				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 as EventListener );

package/src/components/open-panel-from-event.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+
+import { usePanelActions } from './class-manager/class-manager-panel';
+
+const EVENT_OPEN_GLOBAL_CLASSES_MANAGER = 'elementor/open-global-classes-manager';
+
+export function OpenPanelFromEvent() {
+	const { open } = usePanelActions();
+
+	useEffect( () => {
+		const handler = () => open();
+
+		window.addEventListener( EVENT_OPEN_GLOBAL_CLASSES_MANAGER, handler );
+
+		return () => window.removeEventListener( EVENT_OPEN_GLOBAL_CLASSES_MANAGER, handler );
+	}, [ open ] );
+
+	return null;
+}

package/src/global-classes-styles-provider.ts

@@ -27,7 +27,7 @@ import {
 } from './store';
 import { trackGlobalClasses, type TrackingEvent } from './utils/tracking';
 
-const MAX_CLASSES = 5000;
+const MAX_CLASSES = 1000;
 
 export const GLOBAL_CLASSES_PROVIDER_KEY = 'global-classes';
 const PREGENERATED_LINK_PATTERN = /^global-([0-9]+-)?(preview|frontend)-[a-zA-Z_-]+-css$/;

package/src/init.ts

@@ -14,6 +14,7 @@ import { ClassManagerButton } from './components/class-manager/class-manager-but
 import { panel } from './components/class-manager/class-manager-panel';
 import { ConvertLocalClassToGlobalClass } from './components/convert-local-class-to-global-class';
 import { GlobalStylesImportListener } from './components/global-styles-import-listener';
+import { OpenPanelFromEvent } from './components/open-panel-from-event';
 import { OpenPanelFromUrl } from './components/open-panel-from-url';
 import { PopulateStore } from './components/populate-store';
 import { GLOBAL_CLASSES_PROVIDER_KEY, globalClassesStylesProvider } from './global-classes-styles-provider';
@@ -56,6 +57,11 @@ export function init() {
 			id: 'global-classes-open-panel-from-url',
 			component: OpenPanelFromUrl,
 		} );
+
+		injectIntoLogic( {
+			id: 'global-classes-open-panel-from-event',
+			component: OpenPanelFromEvent,
+		} );
 	}
 
 	injectIntoCssClassConvert( {

package/src/store.ts

@@ -244,6 +244,35 @@ export const slice = createSlice( {
 				}
 			} );
 		},
+
+		setOrderWithoutHistory( state, { payload }: PayloadAction< StyleDefinitionID[] > ) {
+			state.data.order = payload;
+		},
+
+		updateAfterTemplateImport(
+			state,
+			{
+				payload,
+			}: PayloadAction< {
+				addedItems: StyleDefinitionsMap;
+				addedIdsOrder: StyleDefinitionID[];
+				addedClassLabels: Record< StyleDefinitionID, string >;
+			} >
+		) {
+			// Update initial data
+			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 ];
+
+			// Update current data
+			state.data.items = { ...state.data.items, ...payload.addedItems };
+			state.data.order = [ ...state.data.order, ...payload.addedIdsOrder ];
+
+			// Update class labels
+			state.classLabels = { ...state.classLabels, ...payload.addedClassLabels };
+		},
 	},
 } );
 

package/src/utils/create-labels-for-classes.ts

@@ -1,7 +1,9 @@
-import { type StyleDefinitionID } from '@elementor/editor-styles';
+import { type StyleDefinition, type StyleDefinitionID } from '@elementor/editor-styles';
 
 import { type GlobalClassIndexEntry } from '../api';
 
-export function createLabelsForClasses( entries: GlobalClassIndexEntry[] ): Record< StyleDefinitionID, string > {
+export function createLabelsForClasses(
+	entries: Array< GlobalClassIndexEntry | StyleDefinition >
+): Record< StyleDefinitionID, string > {
 	return Object.fromEntries( entries.map( ( e ) => [ e.id, e.label ] ) );
 }