@elementor/editor-global-classes 0.4.0 → 0.5.0

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.push( 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() );
+}