@elementor/editor-components 3.35.0-478 → 3.35.0-480

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "3.35.0-478",
+  "version": "3.35.0-480",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,30 +40,30 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.35.0-478",
-    "@elementor/editor-canvas": "3.35.0-478",
-    "@elementor/editor-controls": "3.35.0-478",
-    "@elementor/editor-documents": "3.35.0-478",
-    "@elementor/editor-editing-panel": "3.35.0-478",
-    "@elementor/editor-elements": "3.35.0-478",
-    "@elementor/editor-elements-panel": "3.35.0-478",
-    "@elementor/editor-mcp": "3.35.0-478",
-    "@elementor/editor-panels": "3.35.0-478",
-    "@elementor/editor-props": "3.35.0-478",
-    "@elementor/editor-styles-repository": "3.35.0-478",
-    "@elementor/editor-ui": "3.35.0-478",
-    "@elementor/editor-v1-adapters": "3.35.0-478",
-    "@elementor/http-client": "3.35.0-478",
+    "@elementor/editor": "3.35.0-480",
+    "@elementor/editor-canvas": "3.35.0-480",
+    "@elementor/editor-controls": "3.35.0-480",
+    "@elementor/editor-documents": "3.35.0-480",
+    "@elementor/editor-editing-panel": "3.35.0-480",
+    "@elementor/editor-elements": "3.35.0-480",
+    "@elementor/editor-elements-panel": "3.35.0-480",
+    "@elementor/editor-mcp": "3.35.0-480",
+    "@elementor/editor-panels": "3.35.0-480",
+    "@elementor/editor-props": "3.35.0-480",
+    "@elementor/editor-styles-repository": "3.35.0-480",
+    "@elementor/editor-ui": "3.35.0-480",
+    "@elementor/editor-v1-adapters": "3.35.0-480",
+    "@elementor/http-client": "3.35.0-480",
     "@elementor/icons": "^1.63.0",
-    "@elementor/mixpanel": "3.35.0-478",
-    "@elementor/query": "3.35.0-478",
-    "@elementor/schema": "3.35.0-478",
-    "@elementor/store": "3.35.0-478",
+    "@elementor/mixpanel": "3.35.0-480",
+    "@elementor/query": "3.35.0-480",
+    "@elementor/schema": "3.35.0-480",
+    "@elementor/store": "3.35.0-480",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-478",
+    "@elementor/utils": "3.35.0-480",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "3.35.0-478",
-    "@elementor/editor-current-user": "3.35.0-478"
+    "@elementor/editor-notifications": "3.35.0-480",
+    "@elementor/editor-current-user": "3.35.0-480"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/api.ts

@@ -100,21 +100,23 @@ export const apiClient = {
 				},
 			} )
 			.then( ( res ) => res.data.data ),
-	updateArchivedComponents: async ( componentIds: number[] ) =>
+	updateArchivedComponents: async ( componentIds: number[], status: DocumentSaveStatus ) =>
 		await httpService()
 			.post< { data: { failedIds: number[]; successIds: number[]; success: boolean } } >(
 				`${ BASE_URL }/archive`,
 				{
 					componentIds,
+					status,
 				}
 			)
 			.then( ( res ) => res.data.data ),
-	updateComponentTitle: ( updatedComponentNames: UpdatedComponentName[] ) =>
+	updateComponentTitle: ( updatedComponentNames: UpdatedComponentName[], status: DocumentSaveStatus ) =>
 		httpService()
 			.post< { data: { failedIds: number[]; successIds: number[]; success: boolean } } >(
 				`${ BASE_URL }/update-titles`,
 				{
 					components: updatedComponentNames,
+					status,
 				}
 			)
 			.then( ( res ) => res.data.data ),

package/src/components/overridable-props/overridable-prop-form.tsx

@@ -20,8 +20,10 @@ type Props = {
 };
 
 export function OverridablePropForm( { onSubmit, groups, currentValue, existingLabels = [], sx }: Props ) {
+	const selectGroups = groups?.length ? groups : [ DEFAULT_GROUP ];
+
 	const [ propLabel, setPropLabel ] = useState< string | null >( currentValue?.label ?? null );
-	const [ group, setGroup ] = useState< string | null >( currentValue?.groupId ?? groups?.[ 0 ]?.value ?? null );
+	const [ group, setGroup ] = useState< string | null >( currentValue?.groupId ?? selectGroups[ 0 ]?.value ?? null );
 	const [ error, setError ] = useState< string | null >( null );
 
 	const name = __( 'Name', 'elementor' );
@@ -98,16 +100,17 @@ export function OverridablePropForm( { onSubmit, groups, currentValue, existingL
 							}
 							displayEmpty
 							renderValue={ ( selectedValue: string | null ) => {
-								if ( ! selectedValue || selectedValue === '' ) {
-									const [ firstGroup = DEFAULT_GROUP ] = groups ?? [];
-
-									return firstGroup.label;
+								if ( ! selectedValue ) {
+									return selectGroups[ 0 ].label;
 								}
 
-								return groups?.find( ( { value } ) => value === selectedValue )?.label ?? selectedValue;
+								return (
+									selectGroups.find( ( { value } ) => value === selectedValue )?.label ??
+									selectedValue
+								);
 							} }
 						>
-							{ ( groups ?? [ DEFAULT_GROUP ] ).map( ( { label: groupLabel, ...props } ) => (
+							{ selectGroups.map( ( { label: groupLabel, ...props } ) => (
 								<MenuListItem key={ props.value } { ...props } value={ props.value ?? '' }>
 									{ groupLabel }
 								</MenuListItem>

package/src/sync/before-save.ts

@@ -3,10 +3,10 @@ import { type V1Element, type V1ElementData } from '@elementor/editor-elements';
 
 import { type DocumentSaveStatus } from '../types';
 import { createComponentsBeforeSave } from './create-components-before-save';
+import { publishDraftComponentsInPageBeforeSave } from './publish-draft-components-in-page-before-save';
 import { setComponentOverridablePropsSettingsBeforeSave } from './set-component-overridable-props-settings-before-save';
 import { updateArchivedComponentBeforeSave } from './update-archived-component-before-save';
 import { updateComponentTitleBeforeSave } from './update-component-title-before-save';
-import { updateComponentsBeforeSave } from './update-components-before-save';
 
 type Options = {
 	container: V1Element & {
@@ -24,10 +24,29 @@ export const beforeSave = ( { container, status }: Options ) => {
 	const elements = container?.model.get( 'elements' ).toJSON?.() ?? [];
 
 	return Promise.all( [
-		updateArchivedComponentBeforeSave(),
-		createComponentsBeforeSave( { elements, status } ),
-		updateComponentsBeforeSave( { elements, status } ),
+		syncComponents( { elements, status } ),
 		setComponentOverridablePropsSettingsBeforeSave( { container } ),
-		updateComponentTitleBeforeSave(),
 	] );
 };
+
+// These operations run sequentially to prevent race conditions when multiple
+// edits occur on the same component simultaneously.
+// TODO: Consolidate these into a single PUT /components endpoint.
+const syncComponents = async ( { elements, status }: { elements: V1ElementData[]; status: DocumentSaveStatus } ) => {
+	// This order is important - first update existing components, then create new components,
+	// Since new component validation depends on the existing components (preventing duplicate names).
+	await updateExistingComponentsBeforeSave( { elements, status } );
+	await createComponentsBeforeSave( { elements, status } );
+};
+
+const updateExistingComponentsBeforeSave = async ( {
+	elements,
+	status,
+}: {
+	elements: V1ElementData[];
+	status: DocumentSaveStatus;
+} ) => {
+	await updateComponentTitleBeforeSave( status );
+	await updateArchivedComponentBeforeSave( status );
+	await publishDraftComponentsInPageBeforeSave( { elements, status } );
+};

package/src/sync/{update-components-before-save.ts → publish-draft-components-in-page-before-save.ts}

@@ -11,7 +11,7 @@ type Options = {
 	elements: V1ElementData[];
 };
 
-export async function updateComponentsBeforeSave( { status, elements }: Options ) {
+export async function publishDraftComponentsInPageBeforeSave( { status, elements }: Options ) {
 	if ( status !== 'publish' ) {
 		return;
 	}

package/src/sync/update-archived-component-before-save.ts

@@ -3,6 +3,7 @@ import { __getState as getState } from '@elementor/store';
 
 import { apiClient } from '../api';
 import { selectArchivedThisSession } from '../store/store';
+import { type DocumentSaveStatus } from '../types';
 
 const failedNotification = ( message: string ): NotificationData => ( {
 	type: 'error',
@@ -10,7 +11,7 @@ const failedNotification = ( message: string ): NotificationData => ( {
 	id: 'failed-archived-components-notification',
 } );
 
-export const updateArchivedComponentBeforeSave = async () => {
+export const updateArchivedComponentBeforeSave = async ( status: DocumentSaveStatus ) => {
 	try {
 		const archivedComponents = selectArchivedThisSession( getState() );
 
@@ -18,7 +19,7 @@ export const updateArchivedComponentBeforeSave = async () => {
 			return;
 		}
 
-		const result = await apiClient.updateArchivedComponents( archivedComponents );
+		const result = await apiClient.updateArchivedComponents( archivedComponents, status );
 
 		const failedIds = result.failedIds.join( ', ' );
 

package/src/sync/update-component-title-before-save.ts

@@ -2,15 +2,16 @@ import { __dispatch as dispatch, __getState as getState } from '@elementor/store
 
 import { apiClient } from '../api';
 import { selectUpdatedComponentNames, slice } from '../store/store';
+import { type DocumentSaveStatus } from '../types';
 
-export const updateComponentTitleBeforeSave = async () => {
+export const updateComponentTitleBeforeSave = async ( status: DocumentSaveStatus ) => {
 	const updatedComponentNames = selectUpdatedComponentNames( getState() );
 
 	if ( ! updatedComponentNames.length ) {
 		return;
 	}
 
-	const result = await apiClient.updateComponentTitle( updatedComponentNames );
+	const result = await apiClient.updateComponentTitle( updatedComponentNames, status );
 
 	if ( result.failedIds.length === 0 ) {
 		dispatch( slice.actions.cleanUpdatedComponentNames() );