@elementor/editor-global-classes 3.33.0-117 → 3.33.0-119

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-global-classes",
-  "version": "3.33.0-117",
+  "version": "3.33.0-119",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,22 +39,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-117",
-    "@elementor/editor-current-user": "3.33.0-117",
-    "@elementor/editor-documents": "3.33.0-117",
-    "@elementor/editor-editing-panel": "3.33.0-117",
-    "@elementor/editor-panels": "3.33.0-117",
-    "@elementor/editor-props": "3.33.0-117",
-    "@elementor/editor-styles": "3.33.0-117",
-    "@elementor/editor-styles-repository": "3.33.0-117",
-    "@elementor/editor-ui": "3.33.0-117",
-    "@elementor/editor-v1-adapters": "3.33.0-117",
-    "@elementor/http-client": "3.33.0-117",
+    "@elementor/editor": "3.33.0-119",
+    "@elementor/editor-current-user": "3.33.0-119",
+    "@elementor/editor-documents": "3.33.0-119",
+    "@elementor/editor-editing-panel": "3.33.0-119",
+    "@elementor/editor-panels": "3.33.0-119",
+    "@elementor/editor-props": "3.33.0-119",
+    "@elementor/editor-styles": "3.33.0-119",
+    "@elementor/editor-styles-repository": "3.33.0-119",
+    "@elementor/editor-ui": "3.33.0-119",
+    "@elementor/editor-v1-adapters": "3.33.0-119",
+    "@elementor/http-client": "3.33.0-119",
     "@elementor/icons": "1.46.0",
-    "@elementor/query": "3.33.0-117",
-    "@elementor/store": "3.33.0-117",
+    "@elementor/query": "3.33.0-119",
+    "@elementor/store": "3.33.0-119",
     "@elementor/ui": "1.36.12",
-    "@elementor/utils": "3.33.0-117",
+    "@elementor/utils": "3.33.0-119",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/api.ts

@@ -49,3 +49,7 @@ export const apiClient = {
 			},
 		} ),
 };
+
+export const API_ERROR_CODES = {
+	DUPLICATED_LABEL: 'DUPLICATED_LABEL',
+};

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

@@ -4,6 +4,7 @@ import {
 	__useActiveDocumentActions as useActiveDocumentActions,
 } from '@elementor/editor-documents';
 import { useUserStylesCapability } from '@elementor/editor-styles-repository';
+import { SaveChangesDialog, useDialog } from '@elementor/editor-ui';
 import { IconButton, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -11,7 +12,6 @@ import { globalClassesStylesProvider } from '../../global-classes-styles-provide
 import { usePrefetchCssClassUsage } from '../../hooks/use-prefetch-css-class-usage';
 import { usePanelActions } from './class-manager-panel';
 import { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';
-import { SaveChangesDialog, useDialog } from './save-changes-dialog';
 
 export const ClassManagerButton = () => {
 	const document = useActiveDocument();

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

@@ -9,7 +9,7 @@ import {
 	PanelHeader,
 	PanelHeaderTitle,
 } from '@elementor/editor-panels';
-import { ThemeProvider } from '@elementor/editor-ui';
+import { SaveChangesDialog, ThemeProvider, useDialog } from '@elementor/editor-ui';
 import { changeEditMode } from '@elementor/editor-v1-adapters';
 import { XIcon } from '@elementor/icons';
 import { useMutation } from '@elementor/query';
@@ -42,7 +42,6 @@ import { hasDeletedItems, onDelete } from './delete-class';
 import { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';
 import { GlobalClassesList } from './global-classes-list';
 import { blockPanelInteractions, unblockPanelInteractions } from './panel-interactions';
-import { SaveChangesDialog, useDialog } from './save-changes-dialog';
 
 const id = 'global-classes-manager';
 

package/src/components/class-manager/duplicate-label-dialog.tsx

@@ -0,0 +1,159 @@
+import * as React from 'react';
+import { closeDialog, EllipsisWithTooltip } from '@elementor/editor-ui';
+import { InfoCircleFilledIcon } from '@elementor/icons';
+import {
+	Alert,
+	Box,
+	Button,
+	DialogActions,
+	DialogContent,
+	DialogHeader,
+	Divider,
+	Icon,
+	Stack,
+	Typography,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { type ModifiedLabels } from '../../store';
+
+const DUP_PREFIX = 'DUP_';
+
+export const DuplicateLabelDialog = ( {
+	modifiedLabels,
+	onApprove,
+}: {
+	modifiedLabels: ModifiedLabels;
+	onApprove?: () => void;
+} ) => {
+	const handleButtonClick = () => {
+		localStorage.setItem( 'elementor-global-classes-search', DUP_PREFIX );
+		onApprove?.();
+		closeDialog();
+	};
+
+	return (
+		<>
+			<DialogHeader logo={ false }>
+				<Box display="flex" alignItems="center" gap={ 1 }>
+					<Icon color="secondary">
+						<InfoCircleFilledIcon fontSize="medium" />
+					</Icon>
+					<Typography variant="subtitle1">
+						{ __( "We've published your page and updated class names.", 'elementor' ) }
+					</Typography>
+				</Box>
+			</DialogHeader>
+			<DialogContent>
+				<Stack spacing={ 2 } direction="column">
+					<Typography variant="body2">
+						{ __(
+							'Some new classes used the same names as existing ones. To prevent conflicts, we added the prefix',
+							'elementor'
+						) }
+						<strong> { DUP_PREFIX }</strong>
+					</Typography>
+
+					<Box>
+						<Box
+							sx={ {
+								width: '100%',
+								display: 'flex',
+								gap: 2,
+								alignItems: 'flex-start',
+							} }
+						>
+							<Typography
+								variant="subtitle2"
+								sx={ {
+									fontWeight: 'bold',
+									flex: 1,
+									flexShrink: 1,
+									flexGrow: 1,
+									minWidth: 0,
+								} }
+							>
+								{ __( 'Before', 'elementor' ) }
+							</Typography>
+							<Typography
+								variant="subtitle2"
+								sx={ {
+									minWidth: '200px',
+									fontWeight: 'bold',
+									flexShrink: 0,
+									flexGrow: 0,
+									width: '200px',
+									maxWidth: '200px',
+								} }
+							>
+								{ __( 'After', 'elementor' ) }
+							</Typography>
+						</Box>
+						<Divider sx={ { mt: 0.5, mb: 0.5 } } />
+						<Stack direction="column" gap={ 0.5 } sx={ { pb: 2 } }>
+							{ Object.values( modifiedLabels ).map( ( { original, modified }, index ) => (
+								<Box
+									key={ index }
+									sx={ {
+										width: '100%',
+										display: 'flex',
+										gap: 2,
+										alignItems: 'flex-start',
+									} }
+								>
+									<Box
+										sx={ {
+											flex: 1,
+											flexShrink: 1,
+											flexGrow: 1,
+											minWidth: 0,
+										} }
+									>
+										<EllipsisWithTooltip title={ original }>
+											<Typography variant="body2" sx={ { color: 'text.secondary' } }>
+												{ original }
+											</Typography>
+										</EllipsisWithTooltip>
+									</Box>
+									<Box
+										sx={ {
+											minWidth: '200px',
+											flexShrink: 0,
+											flexGrow: 0,
+											width: '200px',
+											maxWidth: '200px',
+										} }
+									>
+										<EllipsisWithTooltip title={ modified }>
+											<Typography variant="body2" sx={ { color: 'text.primary' } }>
+												{ modified }
+											</Typography>
+										</EllipsisWithTooltip>
+									</Box>
+								</Box>
+							) ) }
+						</Stack>
+						<Box>
+							<Alert severity="info" size="small" color="secondary">
+								<strong>{ __( 'Your designs and classes are safe.', 'elementor' ) }</strong>
+								{ __(
+									'Only the prefixes were added.Find them in Class Manager by searching',
+									'elementor'
+								) }
+								<strong>{ DUP_PREFIX }</strong>
+							</Alert>
+						</Box>
+					</Box>
+				</Stack>
+			</DialogContent>
+			<DialogActions>
+				<Button color="secondary" variant="text" onClick={ handleButtonClick }>
+					{ __( 'Go to Class Manager', 'elementor' ) }
+				</Button>
+				<Button color="secondary" variant="contained" onClick={ closeDialog }>
+					{ __( 'Done', 'elementor' ) }
+				</Button>
+			</DialogActions>
+		</>
+	);
+};

package/src/components/search-and-filter/context.tsx

@@ -35,9 +35,19 @@ const INIT_CHECKED_FILTERS: CheckedFilters = {
 
 export const SearchAndFilterProvider = ( { children }: React.PropsWithChildren ) => {
 	const [ filters, setFilters ] = React.useState< CheckedFilters >( INIT_CHECKED_FILTERS );
+
+	const getInitialSearchValue = () => {
+		const storedValue = localStorage.getItem( 'elementor-global-classes-search' );
+		if ( storedValue ) {
+			localStorage.removeItem( 'elementor-global-classes-search' );
+			return storedValue;
+		}
+		return '';
+	};
+
 	const { debouncedValue, inputValue, handleChange } = useDebounceState( {
 		delay: 300,
-		initialValue: '',
+		initialValue: getInitialSearchValue(),
 	} );
 
 	const onClearSearch = () => {

package/src/hooks/use-css-class-by-id.ts

@@ -0,0 +1,8 @@
+import { type StyleDefinitionID } from '@elementor/editor-styles';
+import { __useSelector as useSelector, type SliceState } from '@elementor/store';
+
+import { selectClass, type slice } from '../store';
+
+export const useCssClassById = ( id: StyleDefinitionID ) => {
+	return useSelector( ( state: SliceState< typeof slice > ) => selectClass( state, id ) );
+};

package/src/init.ts

@@ -6,7 +6,6 @@ import {
 } 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';
@@ -15,7 +14,7 @@ import { ConvertLocalClassToGlobalClass } from './components/convert-local-class
 import { PopulateStore } from './components/populate-store';
 import { GLOBAL_CLASSES_PROVIDER_KEY, globalClassesStylesProvider } from './global-classes-styles-provider';
 import { slice } from './store';
-import { syncWithDocumentSave } from './sync-with-document-save';
+import { SyncWithDocumentSave } from './sync-with-document';
 
 export function init() {
 	registerSlice( slice );
@@ -28,6 +27,11 @@ export function init() {
 		component: PopulateStore,
 	} );
 
+	injectIntoLogic( {
+		id: 'global-classes-sync-with-document',
+		component: SyncWithDocumentSave,
+	} );
+
 	injectIntoCssClassConvert( {
 		id: 'global-classes-convert-from-local-class',
 		component: ConvertLocalClassToGlobalClass,
@@ -42,8 +46,4 @@ export function init() {
 		name: 'global',
 		getThemeColor: ( theme ) => theme.palette.global.dark,
 	} );
-
-	listenTo( v1ReadyEvent(), () => {
-		syncWithDocumentSave();
-	} );
 }

package/src/save-global-classes.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { openDialog } from '@elementor/editor-ui';
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+import { hash } from '@elementor/utils';
+
+import { API_ERROR_CODES, apiClient, type ApiContext } from './api';
+import { DuplicateLabelDialog } from './components/class-manager/duplicate-label-dialog';
+import { type GlobalClasses, selectData, selectFrontendInitialData, selectPreviewInitialData, slice } from './store';
+
+type Options = {
+	context: ApiContext;
+	onApprove?: () => void;
+};
+
+export async function saveGlobalClasses( { context, onApprove }: Options ) {
+	const state = selectData( getState() );
+	const apiAction = context === 'preview' ? apiClient.saveDraft : apiClient.publish;
+	const currentContext = context === 'preview' ? selectPreviewInitialData : selectFrontendInitialData;
+	const response = await apiAction( {
+		items: state.items,
+		order: state.order,
+		changes: calculateChanges( state, currentContext( getState() ) ),
+	} );
+
+	dispatch( slice.actions.reset( { context } ) );
+	if ( response?.data?.data?.code === API_ERROR_CODES.DUPLICATED_LABEL ) {
+		dispatch( slice.actions.updateMultiple( response.data.data.modifiedLabels ) );
+		openDialog( {
+			component: (
+				<DuplicateLabelDialog
+					modifiedLabels={ response.data.data.modifiedLabels || [] }
+					onApprove={ onApprove }
+				/>
+			),
+		} );
+	}
+}
+
+function calculateChanges( state: GlobalClasses, initialData: GlobalClasses ) {
+	const stateIds = Object.keys( state.items );
+	const initialDataIds = Object.keys( initialData.items );
+
+	return {
+		added: stateIds.filter( ( id ) => ! initialDataIds.includes( id ) ),
+		deleted: initialDataIds.filter( ( id ) => ! stateIds.includes( id ) ),
+		modified: stateIds.filter( ( id ) => {
+			return id in initialData.items && hash( state.items[ id ] ) !== hash( initialData.items[ id ] );
+		} ),
+	};
+}

package/src/store.ts

@@ -32,6 +32,13 @@ type GlobalClassesState = {
 	isDirty: boolean;
 };
 
+export type ModifiedLabels = {
+	[ id: string ]: {
+		original: string;
+		modified: string;
+	};
+};
+
 const localHistory = SnapshotHistory.get< GlobalClasses >( 'global-classes' );
 
 const initialState: GlobalClassesState = {
@@ -108,6 +115,14 @@ export const slice = createSlice( {
 			state.isDirty = true;
 		},
 
+		updateMultiple( state, { payload }: PayloadAction< ModifiedLabels > ) {
+			localHistory.next( state.data );
+			Object.entries( payload ).forEach( ( [ id, { modified } ] ) => {
+				state.data.items[ id ].label = modified;
+			} );
+
+			state.isDirty = false;
+		},
 		updateProps(
 			state,
 			{

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

@@ -7,10 +7,10 @@ import { UPDATE_CLASS_CAPABILITY_KEY } from './capabilities';
 import { saveGlobalClasses } from './save-global-classes';
 import { selectIsDirty } from './store';
 
-export function syncWithDocumentSave() {
+export function syncWithDocumentSave( panelActions?: { open: () => void } ) {
 	const unsubscribe = syncDirtyState();
 
-	bindSaveAction();
+	bindSaveAction( panelActions );
 
 	return unsubscribe;
 }
@@ -25,7 +25,7 @@ function syncDirtyState() {
 	} );
 }
 
-function bindSaveAction() {
+function bindSaveAction( panelActions?: { open: () => void } ) {
 	registerDataHook( 'after', 'document/save/save', ( args ) => {
 		const user = getCurrentUser();
 
@@ -35,8 +35,9 @@ function bindSaveAction() {
 			return;
 		}
 
-		return saveGlobalClasses( {
+		saveGlobalClasses( {
 			context: args.status === 'publish' ? 'frontend' : 'preview',
+			onApprove: panelActions?.open,
 		} );
 	} );
 }

package/src/sync-with-document.tsx

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+import { __privateListenTo as listenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';
+
+import { usePanelActions } from './components/class-manager/class-manager-panel';
+import { syncWithDocumentSave } from './sync-with-document-save';
+
+export function SyncWithDocumentSave() {
+	const panelActions = usePanelActions();
+
+	useEffect( () => {
+		listenTo( v1ReadyEvent(), () => {
+			syncWithDocumentSave( panelActions );
+		} );
+
+		// eslint-disable-next-line react-compiler/react-compiler
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
+
+	return null;
+}

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

@@ -1,92 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { AlertTriangleFilledIcon } from '@elementor/icons';
-import {
-	Button,
-	Dialog,
-	DialogActions,
-	DialogContent,
-	DialogContentText,
-	type DialogContentTextProps,
-	type DialogProps,
-	DialogTitle,
-} from '@elementor/ui';
-
-const TITLE_ID = 'save-changes-dialog';
-
-const SaveChangesDialog = ( { children, onClose }: Pick< DialogProps, 'children' | 'onClose' > ) => (
-	<Dialog open onClose={ onClose } aria-labelledby={ TITLE_ID } maxWidth="xs">
-		{ children }
-	</Dialog>
-);
-
-const SaveChangesDialogTitle = ( { children }: React.PropsWithChildren ) => (
-	<DialogTitle id={ TITLE_ID } display="flex" alignItems="center" gap={ 1 } sx={ { lineHeight: 1 } }>
-		<AlertTriangleFilledIcon color="secondary" />
-		{ children }
-	</DialogTitle>
-);
-
-const SaveChangesDialogContent = ( { children }: React.PropsWithChildren ) => (
-	<DialogContent>{ children }</DialogContent>
-);
-
-const SaveChangesDialogContentText = ( props: DialogContentTextProps ) => (
-	<DialogContentText variant="body2" color="textPrimary" display="flex" flexDirection="column" { ...props } />
-);
-
-type Action = {
-	label: string;
-	action: () => void | Promise< void >;
-};
-
-type ConfirmationDialogActionsProps = {
-	actions: {
-		cancel?: Action;
-		confirm: Action;
-		discard?: Action;
-	};
-};
-const SaveChangesDialogActions = ( { actions }: ConfirmationDialogActionsProps ) => {
-	const [ isConfirming, setIsConfirming ] = useState( false );
-	const { cancel, confirm, discard } = actions;
-
-	const onConfirm = async () => {
-		setIsConfirming( true );
-		await confirm.action();
-		setIsConfirming( false );
-	};
-	return (
-		<DialogActions>
-			{ 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>
-		</DialogActions>
-	);
-};
-
-SaveChangesDialog.Title = SaveChangesDialogTitle;
-SaveChangesDialog.Content = SaveChangesDialogContent;
-SaveChangesDialog.ContentText = SaveChangesDialogContentText;
-SaveChangesDialog.Actions = SaveChangesDialogActions;
-
-const useDialog = () => {
-	const [ isOpen, setIsOpen ] = useState( false );
-
-	const open = () => setIsOpen( true );
-	const close = () => setIsOpen( false );
-
-	return { isOpen, open, close };
-};
-
-export { SaveChangesDialog, useDialog };

package/src/save-global-classes.ts

@@ -1,42 +0,0 @@
-import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
-import { hash } from '@elementor/utils';
-
-import { apiClient, type ApiContext } from './api';
-import { type GlobalClasses, selectData, selectFrontendInitialData, selectPreviewInitialData, slice } from './store';
-
-type Options = {
-	context: ApiContext;
-};
-
-export async function saveGlobalClasses( { context }: Options ) {
-	const state = selectData( getState() );
-
-	if ( context === 'preview' ) {
-		await apiClient.saveDraft( {
-			items: state.items,
-			order: state.order,
-			changes: calculateChanges( state, selectPreviewInitialData( getState() ) ),
-		} );
-	} else {
-		await apiClient.publish( {
-			items: state.items,
-			order: state.order,
-			changes: calculateChanges( state, selectFrontendInitialData( getState() ) ),
-		} );
-	}
-
-	dispatch( slice.actions.reset( { context } ) );
-}
-
-function calculateChanges( state: GlobalClasses, initialData: GlobalClasses ) {
-	const stateIds = Object.keys( state.items );
-	const initialDataIds = Object.keys( initialData.items );
-
-	return {
-		added: stateIds.filter( ( id ) => ! initialDataIds.includes( id ) ),
-		deleted: initialDataIds.filter( ( id ) => ! stateIds.includes( id ) ),
-		modified: stateIds.filter( ( id ) => {
-			return id in initialData.items && hash( state.items[ id ] ) !== hash( initialData.items[ id ] );
-		} ),
-	};
-}