@elementor/editor-global-classes 0.20.4 → 0.21.0

package/src/store.ts

@@ -15,6 +15,7 @@ import {
 
 import type { ApiContext } from './api';
 import { GlobalClassNotFoundError } from './errors';
+import { SnapshotHistory } from './utils/snapshot-history';
 
 export type GlobalClasses = {
 	items: Record< StyleDefinitionID, StyleDefinition >;
@@ -30,6 +31,8 @@ type GlobalClassesState = {
 	isDirty: boolean;
 };
 
+const localHistory = SnapshotHistory.get< GlobalClasses >( 'global-classes' );
+
 const initialState: GlobalClassesState = {
 	data: { items: {}, order: [] },
 	initialData: {
@@ -65,6 +68,7 @@ export const slice = createSlice( {
 		},
 
 		add( state, { payload }: PayloadAction< StyleDefinition > ) {
+			localHistory.next( state.data );
 			state.data.items[ payload.id ] = payload;
 			state.data.order.unshift( payload.id );
 
@@ -72,6 +76,7 @@ export const slice = createSlice( {
 		},
 
 		delete( state, { payload }: PayloadAction< StyleDefinitionID > ) {
+			localHistory.next( state.data );
 			state.data.items = Object.fromEntries(
 				Object.entries( state.data.items ).filter( ( [ id ] ) => id !== payload )
 			);
@@ -82,12 +87,14 @@ export const slice = createSlice( {
 		},
 
 		setOrder( state, { payload }: PayloadAction< StyleDefinitionID[] > ) {
+			localHistory.next( state.data );
 			state.data.order = payload;
 
 			state.isDirty = true;
 		},
 
 		update( state, { payload }: PayloadAction< { style: UpdateActionPayload } > ) {
+			localHistory.next( state.data );
 			const style = state.data.items[ payload.style.id ];
 
 			const mergedData = {
@@ -111,6 +118,7 @@ export const slice = createSlice( {
 			if ( ! style ) {
 				throw new GlobalClassNotFoundError( { context: { styleId: payload.id } } );
 			}
+			localHistory.next( state.data );
 
 			const variant = getVariantByMeta( style, payload.meta );
 
@@ -130,6 +138,7 @@ export const slice = createSlice( {
 
 		reset( state, { payload: { context } }: PayloadAction< { context: ApiContext } > ) {
 			if ( context === 'frontend' ) {
+				localHistory.reset();
 				state.initialData.frontend = state.data;
 
 				state.isDirty = false;
@@ -137,6 +146,36 @@ export const slice = createSlice( {
 
 			state.initialData.preview = state.data;
 		},
+
+		undo( state ) {
+			if ( localHistory.isLast() ) {
+				localHistory.next( state.data ); // store current before undo
+			}
+			const data = localHistory.prev();
+			if ( data ) {
+				state.data = data;
+				state.isDirty = true;
+			} else {
+				state.data = state.initialData.preview;
+			}
+		},
+
+		resetToInitialState( state, { payload: { context } }: PayloadAction< { context: ApiContext } > ) {
+			localHistory.reset();
+			state.data = state.initialData[ context ];
+			state.isDirty = false;
+		},
+
+		redo( state ) {
+			const data = localHistory.next();
+			if ( localHistory.isLast() ) {
+				localHistory.prev();
+			}
+			if ( data ) {
+				state.data = data;
+				state.isDirty = true;
+			}
+		},
 	},
 } );
 

package/src/utils/snapshot-history.ts

@@ -0,0 +1,73 @@
+type Link< T > = {
+	prev: Link< T > | null;
+	next: Link< T > | null;
+	value: T;
+};
+
+function createLink< T >( { value, next, prev }: { value: T; prev?: Link< T >; next?: Link< T > } ): Link< T > {
+	return {
+		value,
+		prev: prev || null,
+		next: next || null,
+	};
+}
+
+export class SnapshotHistory< T > {
+	private static registry: Record< string, SnapshotHistory< unknown > > = {};
+
+	public static get< K >( namespace: string ): SnapshotHistory< K > {
+		if ( ! SnapshotHistory.registry[ namespace ] ) {
+			SnapshotHistory.registry[ namespace ] = new SnapshotHistory( namespace );
+		}
+		return SnapshotHistory.registry[ namespace ] as SnapshotHistory< K >;
+	}
+
+	private first: Link< T > | null = null;
+	private current: Link< T > | null = null;
+
+	private constructor( public readonly namespace: string ) {}
+
+	private transform( item: T ): T {
+		return JSON.parse( JSON.stringify( item ) );
+	}
+
+	public reset(): void {
+		this.first = this.current = null;
+	}
+
+	public prev(): T | null {
+		if ( ! this.current || this.current === this.first ) {
+			return null;
+		}
+		this.current = this.current.prev;
+		return this.current?.value || null;
+	}
+
+	public isLast(): boolean {
+		return ! this.current || ! this.current.next;
+	}
+
+	public next( value?: T ): T | null {
+		if ( value ) {
+			if ( ! this.current ) {
+				this.first = createLink( { value: this.transform( value ) } );
+				this.current = this.first;
+				return this.current.value;
+			}
+			const nextLink = createLink( {
+				value: this.transform( value ),
+				prev: this.current,
+			} );
+			this.current.next = nextLink;
+			this.current = nextLink;
+			return this.current.value;
+		}
+
+		// No value skip to next without setting any
+		if ( ! this.current || ! this.current.next ) {
+			return null;
+		}
+		this.current = this.current.next;
+		return this.current.value;
+	}
+}