@elementor/editor-global-classes 4.1.0-manual → 4.2.0-840

package/src/store.ts

@@ -4,6 +4,7 @@ import {
 	getVariantByMeta,
 	type StyleDefinition,
 	type StyleDefinitionID,
+	type StyleDefinitionsMap,
 	type StyleDefinitionVariant,
 } from '@elementor/editor-styles';
 import { type UpdateActionPayload } from '@elementor/editor-styles-repository';
@@ -19,12 +20,13 @@ import { GlobalClassNotFoundError } from './errors';
 import { SnapshotHistory } from './utils/snapshot-history';
 
 export type GlobalClasses = {
-	items: Record< StyleDefinitionID, StyleDefinition >;
+	items: StyleDefinitionsMap;
 	order: StyleDefinitionID[];
 };
 
 type GlobalClassesState = {
 	data: GlobalClasses;
+	classLabels: Record< StyleDefinitionID, string >;
 	initialData: {
 		frontend: GlobalClasses;
 		preview: GlobalClasses;
@@ -43,6 +45,7 @@ const localHistory = SnapshotHistory.get< GlobalClasses >( 'global-classes' );
 
 const initialState: GlobalClassesState = {
 	data: { items: {}, order: [] },
+	classLabels: {},
 	initialData: {
 		frontend: { items: {}, order: [] },
 		preview: { items: {}, order: [] },
@@ -62,15 +65,17 @@ export const slice = createSlice( {
 		load(
 			state,
 			{
-				payload: { frontend, preview },
+				payload: { frontend, preview, classLabels },
 			}: PayloadAction< {
 				frontend: GlobalClasses;
 				preview: GlobalClasses;
+				classLabels: Record< StyleDefinitionID, string >;
 			} >
 		) {
 			state.initialData.frontend = frontend;
 			state.initialData.preview = preview;
 			state.data = preview;
+			state.classLabels = classLabels;
 
 			state.isDirty = false;
 		},
@@ -79,6 +84,7 @@ export const slice = createSlice( {
 			localHistory.next( state.data );
 			state.data.items[ payload.id ] = payload;
 			state.data.order.unshift( payload.id );
+			state.classLabels[ payload.id ] = payload.label;
 
 			state.isDirty = true;
 		},
@@ -90,6 +96,8 @@ export const slice = createSlice( {
 			);
 
 			state.data.order = state.data.order.filter( ( id ) => id !== payload );
+			// eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+			delete state.classLabels[ payload ];
 
 			state.isDirty = true;
 		},
@@ -119,6 +127,7 @@ export const slice = createSlice( {
 			localHistory.next( state.data );
 			Object.entries( payload ).forEach( ( [ id, { modified } ] ) => {
 				state.data.items[ id ].label = modified;
+				state.classLabels[ id ] = modified;
 			} );
 
 			state.isDirty = false;
@@ -132,6 +141,7 @@ export const slice = createSlice( {
 				meta: StyleDefinitionVariant[ 'meta' ];
 				props: Props;
 				custom_css?: CustomCss | null;
+				mode?: 'merge' | 'replace';
 			} >
 		) {
 			const style = state.data.items[ payload.id ];
@@ -147,10 +157,16 @@ export const slice = createSlice( {
 			customCss = customCss?.raw ? customCss : null;
 
 			if ( variant ) {
-				// mergeProps fails with Proxy objects from store, manually re-create clones
-				const variantProps = JSON.parse( JSON.stringify( variant.props ) ) as Props;
 				const payloadProps = JSON.parse( JSON.stringify( payload.props ) ) as Props;
-				variant.props = mergeProps( variantProps, payloadProps );
+				const mode = payload.mode ?? 'merge';
+
+				if ( mode === 'replace' ) {
+					variant.props = payloadProps;
+				} else {
+					const variantProps = JSON.parse( JSON.stringify( variant.props ) ) as Props;
+					variant.props = mergeProps( variantProps, payloadProps );
+				}
+
 				variant.custom_css = customCss;
 
 				style.variants = getNonEmptyVariants( style );
@@ -201,6 +217,33 @@ export const slice = createSlice( {
 				state.isDirty = true;
 			}
 		},
+
+		mergeExistingClasses(
+			state,
+			{
+				payload: { preview, frontend },
+			}: PayloadAction< { preview: GlobalClasses[ 'items' ]; frontend: GlobalClasses[ 'items' ] } >
+		) {
+			Object.entries( preview ).forEach( ( [ id, previewClassData ] ) => {
+				const frontendClassData = frontend[ id ];
+
+				if ( previewClassData === null || previewClassData === undefined ) {
+					return;
+				}
+				if ( ! ( id in state.data.items ) ) {
+					state.data.items[ id ] = previewClassData;
+				}
+				if ( ! ( id in state.initialData.frontend.items ) ) {
+					state.initialData.frontend.items[ id ] = frontendClassData;
+				}
+				if ( ! ( id in state.initialData.preview.items ) ) {
+					state.initialData.preview.items[ id ] = previewClassData;
+				}
+				if ( ! ( id in state.classLabels ) ) {
+					state.classLabels[ id ] = previewClassData.label;
+				}
+			} );
+		},
 	},
 } );
 
@@ -226,9 +269,18 @@ const getNonEmptyVariants = ( style: StyleDefinition ) => {
 	);
 };
 
+export const placeholderDefinition = ( id: StyleDefinitionID, label: string ): StyleDefinition => ( {
+	id,
+	type: 'class',
+	label,
+	variants: [],
+} );
+
 // Selectors
 export const selectData = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].data;
 
+export const selectClassLabels = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].classLabels;
+
 export const selectFrontendInitialData = ( state: SliceState< typeof slice > ) =>
 	state[ SLICE_NAME ].initialData.frontend;
 
@@ -241,8 +293,17 @@ export const selectGlobalClasses = createSelector( selectData, ( { items } ) =>
 
 export const selectIsDirty = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].isDirty;
 
-export const selectOrderedClasses = createSelector( selectGlobalClasses, selectOrder, ( items, order ) =>
-	order.map( ( id ) => items[ id ] )
+export const selectOrderedClasses = createSelector( selectData, selectClassLabels, ( { items, order }, classLabels ) =>
+	order
+		.map( ( id ) => {
+			const loaded = items[ id ];
+			if ( loaded ) {
+				return loaded;
+			}
+			const label = classLabels[ id ];
+			return label !== undefined ? placeholderDefinition( id, label ) : null;
+		} )
+		.filter( ( s ): s is StyleDefinition => s !== null )
 );
 
 export const selectClass = ( state: SliceState< typeof slice >, id: StyleDefinitionID ) =>
@@ -251,3 +312,8 @@ export const selectClass = ( state: SliceState< typeof slice >, id: StyleDefinit
 export const selectEmptyCssClass = createSelector( selectData, ( { items } ) =>
 	Object.values( items ).filter( ( cssClass ) => cssClass.variants.length === 0 )
 );
+
+export const selectIsClassFetched = ( state: SliceState< typeof slice >, id: StyleDefinitionID ) =>
+	!! state[ SLICE_NAME ].initialData.preview.items[ id ] ||
+	!! state[ SLICE_NAME ].initialData.frontend.items[ id ] ||
+	false;

package/src/sync-with-document.tsx

@@ -1,18 +1,26 @@
 import { useEffect } from 'react';
-import { __privateListenTo as listenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';
+import { __privateListenTo as listenTo, isExperimentActive, v1ReadyEvent } from '@elementor/editor-v1-adapters';
 
 import { usePanelActions } from './components/class-manager/class-manager-panel';
 import { syncWithDocumentSave } from './sync-with-document-save';
 
 export function SyncWithDocumentSave() {
-	const panelActions = usePanelActions();
+	const { open: openClassPanel } = usePanelActions();
 
 	useEffect( () => {
-		listenTo( v1ReadyEvent(), () => {
-			syncWithDocumentSave( panelActions );
+		const unsubscribe = listenTo( v1ReadyEvent(), () => {
+			const open = isExperimentActive( 'e_editor_design_system_panel' )
+				? () => {
+						window.dispatchEvent( new CustomEvent( 'elementor/open-global-classes-manager' ) );
+				  }
+				: openClassPanel;
+
+			syncWithDocumentSave( { open } );
 		} );
 
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		return unsubscribe;
+
+		// eslint-disable-next-line react-hooks/exhaustive-deps -- bind once at v1 ready; openClassPanel from createPanel is stable
 	}, [] );
 
 	return null;

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

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

package/src/utils/tracking.ts

@@ -5,7 +5,7 @@ import { __getState as getState } from '@elementor/store';
 import { fetchCssClassUsage } from '../../service/css-class-usage-service';
 import { GlobalClassTrackingError } from '../errors';
 import { type FilterKey } from '../hooks/use-filtered-css-class-usage';
-import { selectClass } from '../store';
+import { placeholderDefinition, selectClass, selectClassLabels } from '../store';
 
 type EventMap = {
 	classCreated: {
@@ -220,16 +220,24 @@ const extractCssClassData = ( classId: StyleDefinitionID ) => {
 };
 
 const getCssClass = ( classId: StyleDefinitionID ) => {
-	const cssClass = selectClass( getState(), classId );
-	if ( ! cssClass ) {
-		throw new Error( `CSS class with ID ${ classId } not found` );
+	const state = getState();
+	const cssClass = selectClass( state, classId );
+
+	if ( cssClass ) {
+		return cssClass;
+	}
+
+	const label = selectClassLabels( state )[ classId ];
+	if ( label !== undefined ) {
+		return placeholderDefinition( classId, label );
 	}
-	return cssClass;
+
+	throw new Error( `CSS class with ID ${ classId } not found` );
 };
 
 const trackDeleteClass = async ( classId: StyleDefinitionID ) => {
-	const totalInstances = await getTotalInstancesByCssClassID( classId );
 	const classTitle = getCssClass( classId ).label;
+	const totalInstances = await getTotalInstancesByCssClassID( classId );
 	return { totalInstances, classTitle };
 };