@elementor/editor-components 3.33.0-248 → 3.33.0-250

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "3.33.0-248",
+  "version": "3.33.0-250",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,22 +40,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-248",
-    "@elementor/editor-canvas": "3.33.0-248",
-    "@elementor/editor-documents": "3.33.0-248",
-    "@elementor/editor-elements": "3.33.0-248",
-    "@elementor/editor-elements-panel": "3.33.0-248",
-    "@elementor/editor-props": "3.33.0-248",
-    "@elementor/editor-styles-repository": "3.33.0-248",
-    "@elementor/editor-ui": "3.33.0-248",
-    "@elementor/editor-v1-adapters": "3.33.0-248",
-    "@elementor/http-client": "3.33.0-248",
+    "@elementor/editor": "3.33.0-250",
+    "@elementor/editor-canvas": "3.33.0-250",
+    "@elementor/editor-documents": "3.33.0-250",
+    "@elementor/editor-elements": "3.33.0-250",
+    "@elementor/editor-elements-panel": "3.33.0-250",
+    "@elementor/editor-props": "3.33.0-250",
+    "@elementor/editor-styles-repository": "3.33.0-250",
+    "@elementor/editor-ui": "3.33.0-250",
+    "@elementor/editor-v1-adapters": "3.33.0-250",
+    "@elementor/http-client": "3.33.0-250",
     "@elementor/icons": "1.53.0",
-    "@elementor/query": "3.33.0-248",
-    "@elementor/schema": "3.33.0-248",
-    "@elementor/store": "3.33.0-248",
+    "@elementor/query": "3.33.0-250",
+    "@elementor/schema": "3.33.0-250",
+    "@elementor/store": "3.33.0-250",
     "@elementor/ui": "1.36.15",
-    "@elementor/utils": "3.33.0-248",
+    "@elementor/utils": "3.33.0-250",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/api.ts

@@ -2,7 +2,7 @@ import { type V1ElementData } from '@elementor/editor-elements';
 import { ajax } from '@elementor/editor-v1-adapters';
 import { type HttpResponse, httpService } from '@elementor/http-client';
 
-import { type Component, type DocumentStatus } from './types';
+import { type Component, type DocumentSaveStatus } from './types';
 
 const BASE_URL = 'elementor/v1/components';
 const LOCK_COMPONENT = `${ BASE_URL }/lock`;
@@ -10,7 +10,7 @@ const UNLOCK_COMPONENT = `${ BASE_URL }/unlock`;
 const BASE_URL_LOCK_STATUS = `${ BASE_URL }/lock-status`;
 
 export type CreateComponentPayload = {
-	status: DocumentStatus;
+	status: DocumentSaveStatus;
 	items: Array< {
 		temp_id: number;
 		title: string;
@@ -42,6 +42,11 @@ export const apiClient = {
 		httpService()
 			.post< HttpResponse< CreateComponentResponse > >( `${ BASE_URL }`, payload )
 			.then( ( res ) => res.data.data ),
+	updateStatuses: ( ids: number[], status: DocumentSaveStatus ) =>
+		httpService().put( `${ BASE_URL }/status`, {
+			ids,
+			status,
+		} ),
 	getComponentConfig: ( id: number ) => ajax.load< { id: number }, V1ElementData >( getParams( id ) ),
 	invalidateComponentConfigCache: ( id: number ) => ajax.invalidateCache< { id: number } >( getParams( id ) ),
 	getComponentLockStatus: async ( componentId: number ) =>

package/src/component-id-transformer.ts

@@ -2,32 +2,18 @@ import { createTransformer } from '@elementor/editor-canvas';
 import { __getState as getState } from '@elementor/store';
 
 import { selectUnpublishedComponents } from './store/store';
-
-type ComponentIdTransformerWindow = Window & {
-	elementor?: {
-		documents?: {
-			request: ( id: number ) => Promise< { elements?: unknown[] } >;
-		};
-	};
-};
+import { getComponentDocumentData } from './utils/component-document-data';
 
 export const componentIdTransformer = createTransformer( async ( id: number ) => {
 	const unpublishedComponents = selectUnpublishedComponents( getState() );
 
 	const unpublishedComponent = unpublishedComponents.find( ( component ) => component.id === id );
+
 	if ( unpublishedComponent ) {
 		return structuredClone( unpublishedComponent.elements );
 	}
 
-	const extendedWindow = window as unknown as ComponentIdTransformerWindow;
-
-	const documentManager = extendedWindow.elementor?.documents;
-
-	if ( ! documentManager ) {
-		throw new Error( 'Elementor documents manager not found' );
-	}
-
-	const data = await documentManager.request( id );
+	const data = await getComponentDocumentData( id );
 
-	return data.elements ?? [];
+	return data?.elements ?? [];
 } );

package/src/init.ts

@@ -23,8 +23,8 @@ import { componentsStylesProvider } from './store/components-styles-provider';
 import { loadComponentsStyles } from './store/load-components-styles';
 import { removeComponentStyles } from './store/remove-component-styles';
 import { slice } from './store/store';
+import { beforeSave } from './sync/before-save';
 import { type ExtendedWindow } from './types';
-import { beforeSave } from './utils/before-save';
 
 const COMPONENT_DOCUMENT_TYPE = 'elementor_component';
 

package/src/store/load-components-styles.ts

@@ -8,7 +8,7 @@ import { getComponentIds } from '../utils/get-component-ids';
 import { selectStyles, slice } from './store';
 
 export async function loadComponentsStyles( elements: V1ElementData[] ) {
-	const componentIds = Array.from( new Set( getComponentIds( elements ) ) );
+	const componentIds = getComponentIds( elements );
 
 	if ( ! componentIds.length ) {
 		return;

package/src/sync/before-save.ts

@@ -0,0 +1,15 @@
+import { type Container, type DocumentSaveStatus } from '../types';
+import { createComponentsBeforeSave } from './create-components-before-save';
+import { updateComponentsBeforeSave } from './update-components-before-save';
+
+type Options = {
+	container: Container;
+	status: DocumentSaveStatus;
+};
+
+export const beforeSave = ( { container, status }: Options ) => {
+	return Promise.all( [
+		createComponentsBeforeSave( { container, status } ),
+		updateComponentsBeforeSave( { container, status } ),
+	] );
+};

package/src/{utils/before-save.ts → sync/create-components-before-save.ts}

@@ -4,17 +4,15 @@ import { __dispatch as dispatch, __getState as getState } from '@elementor/store
 
 import { apiClient } from '../api';
 import { selectUnpublishedComponents, slice, type UnpublishedComponent } from '../store/store';
-import { type DocumentStatus } from '../types';
+import { type Container, type DocumentSaveStatus } from '../types';
 
-type Container = {
-	model: {
-		get: ( key: 'elements' ) => {
-			toJSON: () => V1ElementData[];
-		};
-	};
-};
-
-export const beforeSave = async ( { container, status }: { container: Container; status: DocumentStatus } ) => {
+export async function createComponentsBeforeSave( {
+	container,
+	status,
+}: {
+	container: Container;
+	status: DocumentSaveStatus;
+} ) {
 	const unpublishedComponents = selectUnpublishedComponents( getState() );
 
 	if ( ! unpublishedComponents.length ) {
@@ -39,11 +37,11 @@ export const beforeSave = async ( { container, status }: { container: Container;
 	} catch ( error ) {
 		throw new Error( `Failed to publish components and update component instances: ${ error }` );
 	}
-};
+}
 
 async function createComponents(
 	components: UnpublishedComponent[],
-	status: DocumentStatus
+	status: DocumentSaveStatus
 ): Promise< Map< number, number > > {
 	const response = await apiClient.create( {
 		status,

package/src/sync/update-components-before-save.ts

@@ -0,0 +1,41 @@
+import { apiClient } from '../api';
+import { type Container, type DocumentSaveStatus } from '../types';
+import { getComponentDocumentData, invalidateComponentDocumentData } from '../utils/component-document-data';
+import { getComponentIds } from '../utils/get-component-ids';
+
+type Options = {
+	status: DocumentSaveStatus;
+	container: Container;
+};
+
+export async function updateComponentsBeforeSave( { status, container }: Options ) {
+	if ( status !== 'publish' ) {
+		return;
+	}
+
+	const elements = container.model.get( 'elements' ).toJSON();
+
+	const componentDocumentData = await Promise.all(
+		getComponentIds( elements ).map( ( id ) => getComponentDocumentData( id ) )
+	);
+
+	const draftIds = componentDocumentData
+		.filter( ( document ) => !! document )
+		.filter( ( document ) => {
+			const isDraft = document.status.value === 'draft';
+
+			// When the component is published, but have draft version.
+			const hasAutosave = document.revisions.current_id !== document.id;
+
+			return isDraft || hasAutosave;
+		} )
+		.map( ( document ) => document.id );
+
+	if ( draftIds.length === 0 ) {
+		return;
+	}
+
+	await apiClient.updateStatuses( draftIds, 'publish' );
+
+	draftIds.forEach( ( id ) => invalidateComponentDocumentData( id ) );
+}

package/src/types.ts

@@ -1,3 +1,4 @@
+import { type V1ElementData } from '@elementor/editor-elements';
 import type { StyleDefinition } from '@elementor/editor-styles';
 
 export type ComponentFormValues = {
@@ -13,8 +14,17 @@ export type Component = {
 	name: string;
 };
 
-export type DocumentStatus = 'publish' | 'draft' | 'autosave';
+export type DocumentStatus = 'publish' | 'draft';
+export type DocumentSaveStatus = DocumentStatus | 'autosave';
 
 export type ExtendedWindow = Window & {
 	elementorCommon: Record< string, unknown >;
 };
+
+export type Container = {
+	model: {
+		get: ( key: 'elements' ) => {
+			toJSON: () => V1ElementData[];
+		};
+	};
+};

package/src/utils/component-document-data.ts

@@ -0,0 +1,47 @@
+import { type V1ElementData } from '@elementor/editor-elements';
+
+import { type DocumentStatus } from '../types';
+
+type ComponentDocumentData = {
+	id: number;
+	elements?: V1ElementData[];
+	status: { value: DocumentStatus };
+	revisions: { current_id: number };
+};
+
+type ComponentIdTransformerWindow = Window & {
+	elementor?: {
+		documents?: {
+			request: ( id: number ) => Promise< ComponentDocumentData >;
+			invalidateCache: ( id: number ) => void;
+		};
+	};
+};
+
+export const getComponentDocumentData = async ( id: number ) => {
+	const documentManager = getDocumentsManager();
+
+	try {
+		return await documentManager.request( id );
+	} catch {
+		return null;
+	}
+};
+
+export const invalidateComponentDocumentData = ( id: number ) => {
+	const documentManager = getDocumentsManager();
+
+	documentManager.invalidateCache( id );
+};
+
+function getDocumentsManager() {
+	const extendedWindow = window as unknown as ComponentIdTransformerWindow;
+
+	const documentManager = extendedWindow.elementor?.documents;
+
+	if ( ! documentManager ) {
+		throw new Error( 'Elementor documents manager not found' );
+	}
+
+	return documentManager;
+}

package/src/utils/get-component-ids.ts

@@ -2,7 +2,7 @@ import { type V1ElementData } from '@elementor/editor-elements';
 import { isTransformable } from '@elementor/editor-props';
 
 export const getComponentIds = ( elements: V1ElementData[] ) => {
-	return elements.flatMap( ( element ) => {
+	const result = elements.flatMap( ( element ) => {
 		const ids: number[] = [];
 
 		const type = element.widgetType || element.elType;
@@ -17,4 +17,6 @@ export const getComponentIds = ( elements: V1ElementData[] ) => {
 
 		return ids;
 	} );
+
+	return Array.from( new Set( result ) );
 };