@elementor/editor-global-classes 0.20.5 → 0.21.1

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

@@ -1,237 +1,110 @@
 import * as React from 'react';
-import { useRef } from 'react';
+import { useEffect, useMemo } from 'react';
 import { type StyleDefinitionID } from '@elementor/editor-styles';
-import { validateStyleLabel } from '@elementor/editor-styles-repository';
-import { EditableField, EllipsisWithTooltip, MenuListItem, useEditable, WarningInfotip } from '@elementor/editor-ui';
-import { DotsVerticalIcon } from '@elementor/icons';
 import { __useDispatch as useDispatch } from '@elementor/store';
-import {
-	bindMenu,
-	bindTrigger,
-	Box,
-	IconButton,
-	List,
-	ListItemButton,
-	type ListItemButtonProps,
-	Menu,
-	Stack,
-	styled,
-	type Theme,
-	Tooltip,
-	Typography,
-	type TypographyProps,
-	usePopupState,
-} from '@elementor/ui';
+import { List, Stack, styled, Typography, type TypographyProps } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useClassesOrder } from '../../hooks/use-classes-order';
 import { useOrderedClasses } from '../../hooks/use-ordered-classes';
 import { slice } from '../../store';
-import { DeleteConfirmationProvider, useDeleteConfirmation } from './delete-confirmation-dialog';
+import { ClassItem } from './class-item';
+import { CssClassNotFound } from './class-manager-class-not-found';
+import { DeleteConfirmationProvider } from './delete-confirmation-dialog';
 import { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';
-import { SortableItem, SortableProvider, SortableTrigger, type SortableTriggerProps } from './sortable';
+import { SortableItem, SortableProvider } from './sortable';
 
-export const GlobalClassesList = ( { disabled }: { disabled?: boolean } ) => {
+type GlobalClassesListProps = {
+	disabled?: boolean;
+	searchValue: string;
+	onSearch: ( searchValue: string ) => void;
+};
+
+export const GlobalClassesList = ( { disabled, searchValue, onSearch }: GlobalClassesListProps ) => {
 	const cssClasses = useOrderedClasses();
 	const dispatch = useDispatch();
 
 	const [ classesOrder, reorderClasses ] = useReorder();
 
+	const lowercaseLabels = useMemo(
+		() =>
+			cssClasses.map( ( cssClass ) => ( {
+				...cssClass,
+				lowerLabel: cssClass.label.toLowerCase(),
+			} ) ),
+		[ cssClasses ]
+	);
+
+	const filteredClasses = useMemo( () => {
+		return searchValue.length > 1
+			? lowercaseLabels.filter( ( cssClass ) =>
+					cssClass.lowerLabel.toLowerCase().includes( searchValue.toLowerCase() )
+			  )
+			: cssClasses;
+	}, [ searchValue, cssClasses, lowercaseLabels ] );
+
+	useEffect( () => {
+		const handler = ( event: KeyboardEvent ) => {
+			if ( event.key === 'z' && ( event.ctrlKey || event.metaKey ) ) {
+				event.stopImmediatePropagation();
+				event.preventDefault();
+				if ( event.shiftKey ) {
+					dispatch( slice.actions.redo() );
+					return;
+				}
+				dispatch( slice.actions.undo() );
+			}
+		};
+		window.addEventListener( 'keydown', handler, {
+			capture: true,
+		} );
+		return () => window.removeEventListener( 'keydown', handler );
+	}, [ dispatch ] );
+
 	if ( ! cssClasses?.length ) {
 		return <EmptyState />;
 	}
 
 	return (
 		<DeleteConfirmationProvider>
-			<List sx={ { display: 'flex', flexDirection: 'column', gap: 0.5 } }>
-				<SortableProvider value={ classesOrder } onChange={ reorderClasses }>
-					{ cssClasses?.map( ( { id, label } ) => {
-						const renameClass = ( newLabel: string ) => {
-							dispatch(
-								slice.actions.update( {
-									style: {
-										id,
-										label: newLabel,
-									},
-								} )
+			{ filteredClasses.length <= 0 && searchValue.length > 1 ? (
+				<CssClassNotFound onClear={ () => onSearch( '' ) } searchValue={ searchValue } />
+			) : (
+				<List sx={ { display: 'flex', flexDirection: 'column', gap: 0.5 } }>
+					<SortableProvider value={ classesOrder } onChange={ reorderClasses }>
+						{ filteredClasses?.map( ( { id, label } ) => {
+							return (
+								<SortableItem key={ id } id={ id }>
+									{ ( { isDragged, isDragPlaceholder, triggerProps, triggerStyle } ) => (
+										<ClassItem
+											isSearchActive={ searchValue.length < 2 }
+											id={ id }
+											label={ label }
+											renameClass={ ( newLabel: string ) => {
+												dispatch(
+													slice.actions.update( {
+														style: {
+															id,
+															label: newLabel,
+														},
+													} )
+												);
+											} }
+											selected={ isDragged }
+											disabled={ disabled || isDragPlaceholder }
+											sortableTriggerProps={ { ...triggerProps, style: triggerStyle } }
+										/>
+									) }
+								</SortableItem>
 							);
-						};
-
-						return (
-							<SortableItem key={ id } id={ id }>
-								{ ( { isDragged, isDragPlaceholder, triggerProps, triggerStyle } ) => (
-									<ClassItem
-										id={ id }
-										label={ label }
-										renameClass={ renameClass }
-										selected={ isDragged }
-										disabled={ disabled || isDragPlaceholder }
-										sortableTriggerProps={ { ...triggerProps, style: triggerStyle } }
-									/>
-								) }
-							</SortableItem>
-						);
-					} ) }
-				</SortableProvider>
-			</List>
+						} ) }
+					</SortableProvider>
+				</List>
+			) }
 		</DeleteConfirmationProvider>
 	);
 };
 
-const useReorder = () => {
-	const dispatch = useDispatch();
-	const order = useClassesOrder();
-
-	const reorder = ( newIds: StyleDefinitionID[] ) => {
-		dispatch( slice.actions.setOrder( newIds ) );
-	};
-
-	return [ order, reorder ] as const;
-};
-
-type ClassItemProps = React.PropsWithChildren< {
-	id: string;
-	label: string;
-	renameClass: ( newLabel: string ) => void;
-	selected?: boolean;
-	disabled?: boolean;
-	sortableTriggerProps: SortableTriggerProps;
-} >;
-
-const ClassItem = ( { id, label, renameClass, selected, disabled, sortableTriggerProps }: ClassItemProps ) => {
-	const itemRef = useRef< HTMLElement >( null );
-
-	const {
-		ref: editableRef,
-		openEditMode,
-		isEditing,
-		error,
-		getProps: getEditableProps,
-	} = useEditable( {
-		value: label,
-		onSubmit: renameClass,
-		validation: validateLabel,
-	} );
-
-	const { openDialog } = useDeleteConfirmation();
-
-	const popupState = usePopupState( {
-		variant: 'popover',
-		disableAutoFocus: true,
-	} );
-
-	const isSelected = ( selected || popupState.isOpen ) && ! disabled;
-
-	return (
-		<>
-			<Stack p={ 0 }>
-				<WarningInfotip
-					open={ Boolean( error ) }
-					text={ error ?? '' }
-					placement="bottom"
-					width={ itemRef.current?.getBoundingClientRect().width }
-					offset={ [ 0, -15 ] }
-				>
-					<StyledListItemButton
-						ref={ itemRef }
-						dense
-						disableGutters
-						showActions={ isSelected || isEditing }
-						shape="rounded"
-						onDoubleClick={ openEditMode }
-						selected={ isSelected }
-						disabled={ disabled }
-						focusVisibleClassName="visible-class-item"
-					>
-						<SortableTrigger { ...sortableTriggerProps } />
-						<Indicator isActive={ isEditing } isError={ !! error }>
-							{ isEditing ? (
-								<EditableField
-									ref={ editableRef }
-									as={ Typography }
-									variant="caption"
-									{ ...getEditableProps() }
-								/>
-							) : (
-								<EllipsisWithTooltip title={ label } as={ Typography } variant="caption" />
-							) }
-						</Indicator>
-						<Tooltip
-							placement="top"
-							className={ 'class-item-more-actions' }
-							title={ __( 'More actions', 'elementor' ) }
-						>
-							<IconButton size="tiny" { ...bindTrigger( popupState ) } aria-label="More actions">
-								<DotsVerticalIcon fontSize="tiny" />
-							</IconButton>
-						</Tooltip>
-					</StyledListItemButton>
-				</WarningInfotip>
-			</Stack>
-			<Menu
-				{ ...bindMenu( popupState ) }
-				anchorOrigin={ {
-					vertical: 'bottom',
-					horizontal: 'right',
-				} }
-				transformOrigin={ {
-					vertical: 'top',
-					horizontal: 'right',
-				} }
-			>
-				<MenuListItem
-					sx={ { minWidth: '160px' } }
-					onClick={ () => {
-						popupState.close();
-						openEditMode();
-					} }
-				>
-					<Typography variant="caption" sx={ { color: 'text.primary' } }>
-						{ __( 'Rename', 'elementor' ) }
-					</Typography>
-				</MenuListItem>
-				<MenuListItem
-					onClick={ () => {
-						popupState.close();
-						openDialog( { id, label } );
-					} }
-				>
-					<Typography variant="caption" sx={ { color: 'error.light' } }>
-						{ __( 'Delete', 'elementor' ) }
-					</Typography>
-				</MenuListItem>
-			</Menu>
-		</>
-	);
-};
-
-// Custom styles for sortable list item, until the component is available in the UI package.
-const StyledListItemButton = styled( ListItemButton, {
-	shouldForwardProp: ( prop: string ) => ! [ 'showActions' ].includes( prop ),
-} )< ListItemButtonProps & { showActions: boolean } >(
-	( { showActions } ) => `
-	min-height: 36px;
-
-	&.visible-class-item {
-		box-shadow: none !important;
-	}
-
-	.class-item-more-actions, .class-item-sortable-trigger {
-		visibility: ${ showActions ? 'visible' : 'hidden' };
-	}
-
-	.class-item-sortable-trigger {
-		visibility: ${ showActions ? 'visible' : 'hidden' };
-	}
-
-	&:hover&:not(:disabled) {
-		.class-item-more-actions, .class-item-sortable-trigger  {
-			visibility: visible;
-		}
-	}
-`
-);
-
 const EmptyState = () => (
 	<Stack alignItems="center" gap={ 1.5 } pt={ 10 } px={ 0.5 } maxWidth="260px" margin="auto">
 		<FlippedColorSwatchIcon fontSize="large" />
@@ -254,37 +127,13 @@ const StyledHeader = styled( Typography )< TypographyProps >( ( { theme, variant
 	},
 } ) );
 
-const Indicator = styled( Box, {
-	shouldForwardProp: ( prop: string ) => ! [ 'isActive', 'isError' ].includes( prop ),
-} )< { isActive: boolean; isError: boolean } >( ( { theme, isActive, isError } ) => ( {
-	display: 'flex',
-	width: '100%',
-	flexGrow: 1,
-	borderRadius: theme.spacing( 0.5 ),
-	border: getIndicatorBorder( { isActive, isError, theme } ),
-	padding: `0 ${ theme.spacing( 1 ) }`,
-	marginLeft: isActive ? theme.spacing( 1 ) : 0,
-	minWidth: 0,
-} ) );
-
-const getIndicatorBorder = ( { isActive, isError, theme }: { isActive: boolean; isError: boolean; theme: Theme } ) => {
-	if ( isError ) {
-		return `2px solid ${ theme.palette.error.main }`;
-	}
-
-	if ( isActive ) {
-		return `2px solid ${ theme.palette.secondary.main }`;
-	}
-
-	return 'none';
-};
-
-const validateLabel = ( newLabel: string ) => {
-	const result = validateStyleLabel( newLabel, 'rename' );
+const useReorder = () => {
+	const dispatch = useDispatch();
+	const order = useClassesOrder();
 
-	if ( result.isValid ) {
-		return null;
-	}
+	const reorder = ( newIds: StyleDefinitionID[] ) => {
+		dispatch( slice.actions.setOrder( newIds ) );
+	};
 
-	return result.errorMessage;
+	return [ order, reorder ] as const;
 };

package/src/components/class-manager/save-changes-dialog.tsx

@@ -42,13 +42,14 @@ type Action = {
 
 type ConfirmationDialogActionsProps = {
 	actions: {
-		cancel: Action;
+		cancel?: Action;
 		confirm: Action;
+		discard?: Action;
 	};
 };
 const SaveChangesDialogActions = ( { actions }: ConfirmationDialogActionsProps ) => {
 	const [ isConfirming, setIsConfirming ] = useState( false );
-	const { cancel, confirm } = actions;
+	const { cancel, confirm, discard } = actions;
 
 	const onConfirm = async () => {
 		setIsConfirming( true );
@@ -57,9 +58,16 @@ const SaveChangesDialogActions = ( { actions }: ConfirmationDialogActionsProps )
 	};
 	return (
 		<DialogActions>
-			<Button variant="text" color="secondary" onClick={ cancel.action }>
-				{ cancel.label }
-			</Button>
+			{ cancel && (
+				<Button variant="text" color="secondary" onClick={ cancel.action }>
+					{ cancel.label }
+				</Button>
+			) }
+			{ discard && (
+				<Button variant="text" color="secondary" onClick={ discard.action }>
+					{ discard.label }
+				</Button>
+			) }
 			<Button variant="contained" color="secondary" onClick={ onConfirm } loading={ isConfirming }>
 				{ confirm.label }
 			</Button>

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

@@ -14,8 +14,10 @@ import { selectClass, selectGlobalClasses, selectOrderedClasses, slice, type Sta
 
 const MAX_CLASSES = 50;
 
+export const GLOBAL_CLASSES_PROVIDER_KEY = 'global-classes';
+
 export const globalClassesStylesProvider = createStylesProvider( {
-	key: 'global-classes',
+	key: GLOBAL_CLASSES_PROVIDER_KEY,
 	priority: 30,
 	limit: MAX_CLASSES,
 	labels: {

package/src/init.ts

@@ -1,5 +1,5 @@
 import { injectIntoLogic } from '@elementor/editor';
-import { injectIntoClassSelectorActions } from '@elementor/editor-editing-panel';
+import { injectIntoClassSelectorActions, registerStyleProviderToColors } from '@elementor/editor-editing-panel';
 import { __registerPanel as registerPanel } from '@elementor/editor-panels';
 import { stylesRepository } from '@elementor/editor-styles-repository';
 import { __privateListenTo as listenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';
@@ -8,7 +8,7 @@ import { __registerSlice as registerSlice } from '@elementor/store';
 import { ClassManagerButton } from './components/class-manager/class-manager-button';
 import { panel } from './components/class-manager/class-manager-panel';
 import { PopulateStore } from './components/populate-store';
-import { globalClassesStylesProvider } from './global-classes-styles-provider';
+import { GLOBAL_CLASSES_PROVIDER_KEY, globalClassesStylesProvider } from './global-classes-styles-provider';
 import { slice } from './store';
 import { syncWithDocumentSave } from './sync-with-document-save';
 
@@ -28,6 +28,11 @@ export function init() {
 		component: ClassManagerButton,
 	} );
 
+	registerStyleProviderToColors( GLOBAL_CLASSES_PROVIDER_KEY, {
+		name: 'global',
+		getThemeColor: ( theme ) => theme.palette.global.dark,
+	} );
+
 	listenTo( v1ReadyEvent(), () => {
 		syncWithDocumentSave();
 	} );

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;
+	}
+}