@elementor/editor-global-classes 0.4.0 → 0.6.0

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

@@ -1,25 +1,261 @@
 import * as React from 'react';
-import { EllipsisWithTooltip } from '@elementor/editor-ui';
-import { List, ListItemButton, Stack, Typography } from '@elementor/ui';
+import { type StyleDefinitionID } from '@elementor/editor-styles';
+import { stylesRepository } from '@elementor/editor-styles-repository';
+import { EditableField, EllipsisWithTooltip, useEditable } from '@elementor/editor-ui';
+import { DotsVerticalIcon, PhotoIcon } from '@elementor/icons';
+import {
+	bindMenu,
+	bindTrigger,
+	Box,
+	IconButton,
+	List,
+	ListItem,
+	ListItemButton,
+	ListItemText,
+	Menu,
+	MenuItem,
+	Stack,
+	styled,
+	type Theme,
+	Tooltip,
+	Typography,
+	type TypographyProps,
+	usePopupState,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
 
-import { useOrderedGlobalClasses } from '../../store';
+import { globalClassesStylesProvider } from '../../global-classes-styles-provider';
+import { useGlobalClassesOrder, useOrderedGlobalClasses } from '../../store';
+import { DeleteConfirmationProvider, useDeleteConfirmation } from './delete-confirmation-dialog';
+import { SortableItem, SortableItemIndicator, SortableProvider } from './sortable';
 
 export const GlobalClassesList = () => {
 	const cssClasses = useOrderedGlobalClasses();
 
+	const [ classesOrder, reorderClasses ] = useClassesOrder();
+
+	if ( ! cssClasses?.length ) {
+		return <EmptyState />;
+	}
+
 	return (
-		<Stack>
-			<List role="list">
-				{ cssClasses?.map( ( { id, label } ) => {
-					return (
-						<Stack key={ id } direction="row" alignItems="center" gap={ 1 } role="listitem">
-							<ListItemButton sx={ { borderRadius: 1 } }>
-								<EllipsisWithTooltip title={ label } as={ Typography } variant="caption" />
-							</ListItemButton>
-						</Stack>
-					);
-				} ) }
+		<DeleteConfirmationProvider>
+			<List sx={ { display: 'flex', flexDirection: 'column', gap: 0.5 } }>
+				<SortableProvider value={ classesOrder } onChange={ reorderClasses }>
+					{ cssClasses?.map( ( { id, label } ) => {
+						const renameClass = ( newLabel: string ) => {
+							globalClassesStylesProvider.actions.update( { label: newLabel, id } );
+						};
+
+						return (
+							<SortableItem key={ id } id={ id }>
+								{ ( { isDragged, showDropIndication, dropIndicationStyle } ) => (
+									<ClassItem
+										id={ id }
+										label={ label }
+										renameClass={ renameClass }
+										selected={ isDragged }
+									>
+										{ showDropIndication && (
+											<SortableItemIndicator style={ dropIndicationStyle } />
+										) }
+									</ClassItem>
+								) }
+							</SortableItem>
+						);
+					} ) }
+				</SortableProvider>
 			</List>
+		</DeleteConfirmationProvider>
+	);
+};
+
+const useClassesOrder = () => {
+	const order = useGlobalClassesOrder();
+
+	const reorder = ( newIds: StyleDefinitionID[] ) => {
+		globalClassesStylesProvider.actions.setOrder( newIds );
+	};
+
+	return [ order, reorder ] as const;
+};
+
+const ClassItem = ( {
+	id,
+	label,
+	renameClass,
+	selected,
+	children,
+}: React.PropsWithChildren< {
+	id: string;
+	label: string;
+	renameClass: ( newLabel: string ) => void;
+	selected: boolean;
+} > ) => {
+	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,
+	} );
+
+	return (
+		<Stack direction="row" alignItems="center" gap={ 1 } flexGrow={ 1 } flexShrink={ 0 }>
+			<StyledListItem
+				component={ 'div' }
+				disablePadding
+				disableGutters
+				secondaryAction={
+					<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>
+				}
+			>
+				<ListItemButton
+					dense
+					disableGutters
+					shape="rounded"
+					onDoubleClick={ openEditMode }
+					selected={ selected || popupState.isOpen }
+					focusVisibleClassName="visible-class-item"
+					sx={ {
+						minHeight: '36px',
+						display: 'flex',
+						'&.visible-class-item': {
+							boxShadow: 'none !important',
+						},
+					} }
+				>
+					<Indicator isActive={ isEditing } isError={ !! error }>
+						{ isEditing ? (
+							<EditableField
+								ref={ editableRef }
+								error={ error }
+								as={ Typography }
+								variant="caption"
+								{ ...getEditableProps() }
+							/>
+						) : (
+							<EllipsisWithTooltip title={ label } as={ Typography } variant="caption" />
+						) }
+					</Indicator>
+				</ListItemButton>
+				{ children }
+				<Menu
+					{ ...bindMenu( popupState ) }
+					anchorOrigin={ {
+						vertical: 'bottom',
+						horizontal: 'right',
+					} }
+					transformOrigin={ {
+						vertical: 'top',
+						horizontal: 'right',
+					} }
+				>
+					<MenuItem
+						sx={ { minWidth: '160px' } }
+						onClick={ () => {
+							popupState.close();
+							openEditMode();
+						} }
+					>
+						<ListItemText primary={ __( 'Rename', 'elementor' ) } />
+					</MenuItem>
+					<MenuItem
+						onClick={ () => {
+							popupState.close();
+							openDialog( { id, label } );
+						} }
+					>
+						<ListItemText primary={ __( 'Delete', 'elementor' ) } sx={ { color: 'error.light' } } />
+					</MenuItem>
+				</Menu>
+			</StyledListItem>
 		</Stack>
 	);
 };
+
+const StyledListItem = styled( ListItem )`
+	.class-item-more-actions {
+		visibility: hidden;
+	}
+	&:hover {
+		.class-item-more-actions {
+			visibility: visible;
+		}
+	}
+`;
+
+const EmptyState = () => (
+	<Stack alignItems="center" gap={ 3 } pt={ 4 } px={ 0.5 }>
+		<PhotoIcon fontSize="large" />
+		<StyledHeader variant="subtitle2" component="h2" color="text.secondary">
+			{ __( 'No CSS classes created yet', 'elementor' ) }
+		</StyledHeader>
+		<Typography align="center" variant="caption" color="text.secondary">
+			{ __(
+				'CSS classes created in the editor panel will appear here. Once they are available, you can arrange their hierarchy, rename them, or delete them as needed.',
+				'elementor'
+			) }
+		</Typography>
+	</Stack>
+);
+
+// Override panel reset styles.
+const StyledHeader = styled( Typography )< TypographyProps >( ( { theme, variant } ) => ( {
+	'&.MuiTypography-root': {
+		...( theme.typography[ variant as keyof typeof theme.typography ] as React.CSSProperties ),
+	},
+} ) );
+
+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,
+} ) );
+
+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 ) => {
+	if ( ! stylesRepository.isLabelValid( newLabel ) ) {
+		return __( 'Format is not valid', 'elementor' );
+	}
+
+	if ( stylesRepository.isLabelExist( newLabel ) ) {
+		return __( 'Existing name', 'elementor' );
+	}
+};

package/src/components/class-manager/sortable.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { GripVerticalIcon } from '@elementor/icons';
+import {
+	Box,
+	Paper,
+	styled,
+	UnstableSortableItem,
+	type UnstableSortableItemProps,
+	type UnstableSortableItemRenderProps,
+	UnstableSortableProvider,
+	type UnstableSortableProviderProps,
+} from '@elementor/ui';
+
+export const SortableProvider = < T extends string >( props: UnstableSortableProviderProps< T > ) => (
+	<UnstableSortableProvider restrictAxis variant="static" dragPlaceholderStyle={ { opacity: '1' } } { ...props } />
+);
+
+const SortableTrigger = ( props: React.HTMLAttributes< HTMLDivElement > ) => (
+	<div { ...props } role="button" className="class-item-sortable-trigger">
+		<GripVerticalIcon fontSize="tiny" />
+	</div>
+);
+
+type ItemRenderProps = Record< string, unknown > & {
+	isDragged: boolean;
+	showDropIndication: boolean;
+	dropIndicationStyle: React.CSSProperties;
+};
+
+type SortableItemProps = {
+	id: UnstableSortableItemProps[ 'id' ];
+	children: ( props: ItemRenderProps ) => React.ReactNode;
+};
+
+export const SortableItem = ( { children, id }: SortableItemProps ) => {
+	return (
+		<UnstableSortableItem
+			id={ id }
+			render={ ( {
+				itemProps,
+				isDragged,
+				triggerProps,
+				itemStyle,
+				triggerStyle,
+				dropIndicationStyle,
+				showDropIndication,
+			}: UnstableSortableItemRenderProps ) => {
+				return (
+					<StyledSortableItem { ...itemProps } elevation={ 0 } sx={ itemStyle } role="listitem">
+						<SortableTrigger { ...triggerProps } style={ triggerStyle } />
+						{ children( {
+							itemProps,
+							isDragged,
+							triggerProps,
+							itemStyle,
+							triggerStyle,
+							dropIndicationStyle,
+							showDropIndication,
+						} ) }
+					</StyledSortableItem>
+				);
+			} }
+		/>
+	);
+};
+
+const StyledSortableItem = styled( Paper )`
+	position: relative;
+
+	&:hover {
+		& .class-item-sortable-trigger {
+			visibility: visible;
+		}
+	}
+
+	& .class-item-sortable-trigger {
+		visibility: hidden;
+		position: absolute;
+		left: 0;
+		top: 50%;
+		transform: translate( -75%, -50% );
+	}
+`;
+
+export const SortableItemIndicator = styled( Box )`
+	width: 100%;
+	height: 3px;
+	border-radius: ${ ( { theme } ) => theme.spacing( 0.5 ) };
+	background-color: ${ ( { theme } ) => theme.palette.text.primary };
+`;

package/src/components/{logic-hooks.tsx → populate-store.tsx}

@@ -4,7 +4,7 @@ import { __useDispatch as useDispatch } from '@elementor/store';
 import { apiClient } from '../api';
 import { slice } from '../store';
 
-export function LogicHooks() {
+export function PopulateStore() {
 	const dispatch = useDispatch();
 
 	useEffect( () => {

package/src/errors.ts

@@ -4,3 +4,8 @@ export const GlobalClassNotFoundError = createError< { styleId: string } >( {
 	code: 'global_class_not_found',
 	message: 'Global class not found.',
 } );
+
+export const GlobalClassLabelAlreadyExistsError = createError< { label: string } >( {
+	code: 'global_class_label_already_exists',
+	message: 'Class with this name already exists.',
+} );

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

@@ -1,3 +1,4 @@
+import { generateId } from '@elementor/editor-styles';
 import type { StylesProvider } from '@elementor/editor-styles-repository';
 import {
 	__dispatch as dispatch,
@@ -6,8 +7,14 @@ import {
 } from '@elementor/store';
 import { __ } from '@wordpress/i18n';
 
-import { apiClient } from './api';
-import { type GlobalClassesState, selectClass, selectOrderedGlobalClasses, slice } from './store';
+import { GlobalClassLabelAlreadyExistsError } from './errors';
+import {
+	selectClass,
+	selectGlobalClasses,
+	selectOrderedGlobalClasses,
+	slice,
+	type StateWithGlobalClasses,
+} from './store';
 
 export const globalClassesStylesProvider = {
 	key: 'global-classes',
@@ -15,38 +22,42 @@ export const globalClassesStylesProvider = {
 	actions: {
 		get: () => selectOrderedGlobalClasses( getState() ),
 		getById: ( id ) => selectClass( getState(), id ),
-		create: async ( style ) => {
-			const res = await apiClient.post( style );
+		create: ( label ) => {
+			const classes = selectGlobalClasses( getState() );
+
+			const existingLabels = Object.values( classes ).map( ( style ) => style.label );
+
+			if ( existingLabels.includes( label ) ) {
+				throw new GlobalClassLabelAlreadyExistsError( { context: { label } } );
+			}
 
-			const { data, meta } = res.data;
+			const existingIds = Object.keys( classes );
+			const id = generateId( 'g-', existingIds );
 
 			dispatch(
 				slice.actions.add( {
-					style: data,
-					order: meta.order,
+					id,
+					type: 'class',
+					label,
+					variants: [],
 				} )
 			);
 
-			return data;
+			return id;
 		},
-		update: async ( payload ) => {
-			const style = selectClass( getState(), payload.id );
-			const mergedData = { ...style, ...payload };
-
-			const res = await apiClient.put( payload.id, mergedData );
-
-			const { data, meta } = res.data;
-
+		update: ( payload ) => {
 			dispatch(
 				slice.actions.update( {
-					style: data,
-					order: meta.order,
+					style: payload,
 				} )
 			);
-
-			return data;
 		},
-
+		delete: ( id ) => {
+			dispatch( slice.actions.delete( id ) );
+		},
+		setOrder: ( order ) => {
+			dispatch( slice.actions.setOrder( order ) );
+		},
 		updateProps: ( args ) => {
 			dispatch(
 				slice.actions.updateProps( {
@@ -57,9 +68,9 @@ export const globalClassesStylesProvider = {
 			);
 		},
 	},
-	subscribe: ( cb ) => subscribeWithSelector( ( state: GlobalClassesState ) => state.globalClasses, cb ),
+	subscribe: ( cb ) => subscribeWithSelector( ( state: StateWithGlobalClasses ) => state.globalClasses, cb ),
 	labels: {
-		singular: __( 'Global CSS Class', 'elementor' ),
+		singular: __( 'Global class', 'elementor' ),
 		plural: __( 'Global CSS Classes', 'elementor' ),
 	},
 } satisfies StylesProvider;

package/src/init.ts

@@ -2,13 +2,15 @@ import { injectIntoLogic } from '@elementor/editor';
 import { injectIntoClassSelectorActions } 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';
 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 { LogicHooks } from './components/logic-hooks';
+import { PopulateStore } from './components/populate-store';
 import { globalClassesStylesProvider } from './global-classes-styles-provider';
 import { slice } from './store';
+import { syncWithDocumentSave } from './sync-with-document-save';
 
 export function init() {
 	registerSlice( slice );
@@ -17,12 +19,16 @@ export function init() {
 	stylesRepository.register( globalClassesStylesProvider );
 
 	injectIntoLogic( {
-		id: 'global-classes-hooks',
-		component: LogicHooks,
+		id: 'global-classes-populate-store',
+		component: PopulateStore,
 	} );
 
 	injectIntoClassSelectorActions( {
-		id: 'global-classes',
+		id: 'global-classes-manager-button',
 		component: ClassManagerButton,
 	} );
+
+	listenTo( v1ReadyEvent(), () => {
+		syncWithDocumentSave();
+	} );
 }

package/src/store.ts

@@ -5,6 +5,7 @@ import {
 	type StyleDefinitionID,
 	type StyleDefinitionVariant,
 } from '@elementor/editor-styles';
+import { type UpdateActionPayload } from '@elementor/editor-styles-repository';
 import {
 	__createSelector as createSelector,
 	__createSlice as createSlice,
@@ -15,36 +16,60 @@ import {
 
 import { GlobalClassNotFoundError } from './errors';
 
-export type State = {
+export type GlobalClassesState = {
 	items: Record< StyleDefinitionID, StyleDefinition >;
 	order: StyleDefinitionID[];
+	isDirty: boolean;
 };
 
-const initialState: State = {
+const initialState: GlobalClassesState = {
 	items: {},
 	order: [],
+	isDirty: false,
 };
 
-export type GlobalClassesState = SliceState< typeof slice >;
+export type StateWithGlobalClasses = SliceState< typeof slice >;
 
 // Slice
-export const SLICE_NAME = 'globalClasses';
+const SLICE_NAME = 'globalClasses';
 
 export const slice = createSlice( {
 	name: SLICE_NAME,
 	initialState,
 	reducers: {
-		init( state, { payload }: PayloadAction< State > ) {
+		init( state, { payload }: PayloadAction< Pick< GlobalClassesState, 'items' | 'order' > > ) {
 			state.items = payload.items;
 			state.order = payload.order;
+
+			state.isDirty = false;
 		},
-		add( state, { payload }: PayloadAction< { style: StyleDefinition; order: State[ 'order' ] } > ) {
-			state.items[ payload.style.id ] = payload.style;
-			state.order = payload.order;
+		add( state, { payload }: PayloadAction< StyleDefinition > ) {
+			state.items[ payload.id ] = payload;
+			state.order.unshift( payload.id );
+
+			state.isDirty = true;
 		},
-		update( state, { payload }: PayloadAction< { style: StyleDefinition; order: State[ 'order' ] } > ) {
-			state.items[ payload.style.id ] = payload.style;
-			state.order = payload.order;
+		delete( state, { payload }: PayloadAction< StyleDefinitionID > ) {
+			state.items = Object.fromEntries( Object.entries( state.items ).filter( ( [ id ] ) => id !== payload ) );
+
+			state.order = state.order.filter( ( id ) => id !== payload );
+
+			state.isDirty = true;
+		},
+		setOrder( state, { payload }: PayloadAction< StyleDefinitionID[] > ) {
+			state.order = payload;
+		},
+		update( state, { payload }: PayloadAction< { style: UpdateActionPayload } > ) {
+			const style = state.items[ payload.style.id ];
+
+			const mergedData = {
+				...style,
+				...payload.style,
+			};
+
+			state.items[ payload.style.id ] = mergedData;
+
+			state.isDirty = true;
 		},
 		updateProps(
 			state,
@@ -65,23 +90,34 @@ export const slice = createSlice( {
 			} else {
 				style.variants.push( { meta: payload.meta, props: payload.props } );
 			}
+
+			state.isDirty = true;
+		},
+
+		setPristine( state ) {
+			state.isDirty = false;
 		},
 	},
 } );
 
 // Selectors
-const selectItems = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].items;
 const selectOrder = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].order;
 
-export const selectOrderedGlobalClasses = createSelector( selectItems, selectOrder, ( items, order ) =>
+export const selectGlobalClasses = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].items;
+
+export const selectOrderedGlobalClasses = createSelector( selectGlobalClasses, selectOrder, ( items, order ) =>
 	order.map( ( id ) => items[ id ] )
 );
 
 export const selectClass = ( state: SliceState< typeof slice >, id: StyleDefinitionID ) =>
 	state[ SLICE_NAME ].items[ id ] ?? null;
 
+export const selectIsDirty = ( state: SliceState< typeof slice > ) => state.globalClasses.isDirty;
+
 export const useOrderedGlobalClasses = () => {
 	const items = useSelector( selectOrderedGlobalClasses );
 
 	return items;
 };
+
+export const useGlobalClassesOrder = () => useSelector( selectOrder );

package/src/sync-with-document-save.ts

@@ -0,0 +1,44 @@
+import { __privateRunCommandSync as runCommandSync, registerDataHook } from '@elementor/editor-v1-adapters';
+import { __dispatch, __getState as getState, __subscribeWithSelector as subscribeWithSelector } from '@elementor/store';
+
+import { apiClient } from './api';
+import { type GlobalClassesState, selectIsDirty, slice } from './store';
+
+export function syncWithDocumentSave() {
+	const unsubscribe = syncDirtyState();
+
+	bindSaveAction();
+
+	return unsubscribe;
+}
+
+function syncDirtyState() {
+	return subscribeWithSelector( selectIsDirty, () => {
+		if ( ! isDirty() ) {
+			return;
+		}
+
+		runCommandSync( 'document/save/set-is-modified', { status: true }, { internal: true } );
+	} );
+}
+
+function bindSaveAction() {
+	registerDataHook( 'after', 'document/save/save', async () => {
+		if ( ! isDirty() ) {
+			return;
+		}
+
+		const state: GlobalClassesState = getState().globalClasses;
+
+		await apiClient.update( {
+			items: state.items,
+			order: state.order,
+		} );
+
+		__dispatch( slice.actions.setPristine() );
+	} );
+}
+
+function isDirty() {
+	return selectIsDirty( getState() );
+}