@elementor/editor-global-classes 3.33.0-116 → 3.33.0-118

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-global-classes",
-  "version": "3.33.0-116",
+  "version": "3.33.0-118",
   "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-116",
-    "@elementor/editor-current-user": "3.33.0-116",
-    "@elementor/editor-documents": "3.33.0-116",
-    "@elementor/editor-editing-panel": "3.33.0-116",
-    "@elementor/editor-panels": "3.33.0-116",
-    "@elementor/editor-props": "3.33.0-116",
-    "@elementor/editor-styles": "3.33.0-116",
-    "@elementor/editor-styles-repository": "3.33.0-116",
-    "@elementor/editor-ui": "3.33.0-116",
-    "@elementor/editor-v1-adapters": "3.33.0-116",
-    "@elementor/http-client": "3.33.0-116",
+    "@elementor/editor": "3.33.0-118",
+    "@elementor/editor-current-user": "3.33.0-118",
+    "@elementor/editor-documents": "3.33.0-118",
+    "@elementor/editor-editing-panel": "3.33.0-118",
+    "@elementor/editor-panels": "3.33.0-118",
+    "@elementor/editor-props": "3.33.0-118",
+    "@elementor/editor-styles": "3.33.0-118",
+    "@elementor/editor-styles-repository": "3.33.0-118",
+    "@elementor/editor-ui": "3.33.0-118",
+    "@elementor/editor-v1-adapters": "3.33.0-118",
+    "@elementor/http-client": "3.33.0-118",
     "@elementor/icons": "1.46.0",
-    "@elementor/query": "3.33.0-116",
-    "@elementor/store": "3.33.0-116",
+    "@elementor/query": "3.33.0-118",
+    "@elementor/store": "3.33.0-118",
     "@elementor/ui": "1.36.12",
-    "@elementor/utils": "3.33.0-116",
+    "@elementor/utils": "3.33.0-118",
     "@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/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/index.ts

@@ -1,2 +1 @@
 export { init } from './init';
-export { ClearIconButton } from './components/search-and-filter/components/filter/clear-icon-button';

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/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 ] );
-		} ),
-	};
-}