@elementor/editor-global-classes 0.14.1 → 0.15.3

package/src/components/class-manager/delete-class.ts

@@ -0,0 +1,34 @@
+import { getCurrentDocument, getV1DocumentsManager } from '@elementor/editor-documents';
+import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
+
+import { globalClassesStylesProvider } from '../../global-classes-styles-provider';
+
+let isDeleted = false;
+
+export const deleteClass = ( id: string ) => {
+	globalClassesStylesProvider.actions.delete( id );
+	isDeleted = true;
+};
+
+export const onDelete = async () => {
+	await reloadDocument();
+
+	isDeleted = false;
+};
+
+export const hasDeletedItems = () => isDeleted;
+
+// When deleting a class, we remove it from all the documents that have it applied.
+// In order to reflect the changes in the active document, we need to reload it.
+const reloadDocument = () => {
+	const currentDocument = getCurrentDocument();
+	const documentsManager = getV1DocumentsManager();
+
+	documentsManager.invalidateCache();
+
+	return runCommand( 'editor/documents/switch', {
+		id: currentDocument?.id,
+		shouldScroll: false,
+		shouldNavigateToDefaultRoute: false,
+	} );
+};

package/src/components/class-manager/delete-confirmation-dialog.tsx

@@ -13,7 +13,7 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { globalClassesStylesProvider } from '../../global-classes-styles-provider';
+import { deleteClass } from './delete-class';
 
 type DeleteConfirmationDialogProps = Pick< StyleDefinition, 'id' | 'label' >;
 
@@ -50,7 +50,7 @@ const DeleteConfirmationDialog = ( { label, id }: DeleteConfirmationDialogProps
 	const { closeDialog } = useDeleteConfirmation();
 
 	const onConfirm = () => {
-		globalClassesStylesProvider.actions.delete( id );
+		deleteClass( id );
 
 		closeDialog();
 	};
@@ -59,7 +59,7 @@ const DeleteConfirmationDialog = ( { label, id }: DeleteConfirmationDialogProps
 		<Dialog open onClose={ closeDialog } aria-labelledby={ TITLE_ID } maxWidth="xs">
 			<DialogTitle id={ TITLE_ID } display="flex" alignItems="center" gap={ 1 } sx={ { lineHeight: 1 } }>
 				<AlertOctagonFilledIcon color="error" />
-				{ __( 'Delete global class', 'elementor' ) }
+				{ __( 'Delete this class?', 'elementor' ) }
 			</DialogTitle>
 			<DialogContent>
 				<DialogContentText variant="body2" color="textPrimary">
@@ -75,7 +75,7 @@ const DeleteConfirmationDialog = ( { label, id }: DeleteConfirmationDialogProps
 			</DialogContent>
 			<DialogActions>
 				<Button color="secondary" onClick={ closeDialog }>
-					{ __( 'Cancel', 'elementor' ) }
+					{ __( 'Not now', 'elementor' ) }
 				</Button>
 				<Button variant="contained" color="error" onClick={ onConfirm }>
 					{ __( 'Delete', 'elementor' ) }

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

@@ -258,11 +258,11 @@ const getIndicatorBorder = ( { isActive, isError, theme }: { isActive: boolean;
 
 const validateLabel = ( newLabel: string ) => {
 	if ( ! stylesRepository.isLabelValid( newLabel ) ) {
-		return __( 'Format is not valid', 'elementor' );
+		return __( 'Invalid format', 'elementor' );
 	}
 
 	if ( stylesRepository.isLabelExist( newLabel ) ) {
-		return __( 'Existing name', 'elementor' );
+		return __( 'Name exists', 'elementor' );
 	}
 
 	return null;

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

@@ -67,7 +67,7 @@ export const globalClassesStylesProvider = {
 	},
 	subscribe: ( cb ) => subscribeWithSelector( ( state: StateWithGlobalClasses ) => state.globalClasses, cb ),
 	labels: {
-		singular: __( 'Global class', 'elementor' ),
-		plural: __( 'Global CSS classes', 'elementor' ),
+		singular: __( 'class', 'elementor' ),
+		plural: __( 'classes', 'elementor' ),
 	},
 } satisfies StylesProvider;