@elementor/editor-global-classes 4.2.0-869 → 4.2.0-871

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-global-classes",
-  "version": "4.2.0-869",
+  "version": "4.2.0-871",
   "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-869",
-    "@elementor/editor-current-user": "4.2.0-869",
-    "@elementor/editor-documents": "4.2.0-869",
-    "@elementor/editor-editing-panel": "4.2.0-869",
-    "@elementor/editor-mcp": "4.2.0-869",
-    "@elementor/editor-panels": "4.2.0-869",
-    "@elementor/editor-props": "4.2.0-869",
-    "@elementor/editor-variables": "4.2.0-869",
-    "@elementor/editor-styles": "4.2.0-869",
-    "@elementor/editor-canvas": "4.2.0-869",
-    "@elementor/editor-styles-repository": "4.2.0-869",
-    "@elementor/editor-ui": "4.2.0-869",
-    "@elementor/editor-v1-adapters": "4.2.0-869",
-    "@elementor/http-client": "4.2.0-869",
+    "@elementor/editor": "4.2.0-871",
+    "@elementor/editor-current-user": "4.2.0-871",
+    "@elementor/editor-documents": "4.2.0-871",
+    "@elementor/editor-editing-panel": "4.2.0-871",
+    "@elementor/editor-mcp": "4.2.0-871",
+    "@elementor/editor-panels": "4.2.0-871",
+    "@elementor/editor-props": "4.2.0-871",
+    "@elementor/editor-variables": "4.2.0-871",
+    "@elementor/editor-styles": "4.2.0-871",
+    "@elementor/editor-canvas": "4.2.0-871",
+    "@elementor/editor-styles-repository": "4.2.0-871",
+    "@elementor/editor-ui": "4.2.0-871",
+    "@elementor/editor-v1-adapters": "4.2.0-871",
+    "@elementor/http-client": "4.2.0-871",
     "@elementor/icons": "~1.75.1",
-    "@elementor/query": "4.2.0-869",
-    "@elementor/schema": "4.2.0-869",
-    "@elementor/store": "4.2.0-869",
+    "@elementor/query": "4.2.0-871",
+    "@elementor/schema": "4.2.0-871",
+    "@elementor/store": "4.2.0-871",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-869",
+    "@elementor/utils": "4.2.0-871",
     "@tanstack/react-virtual": "^3.13.24",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/events": "4.2.0-869"
+    "@elementor/events": "4.2.0-871"
   },
   "peerDependencies": {
     "react": "^18.3.1",

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/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 ] ) );
 }