@elementor/editor-components 3.35.0-419 → 3.35.0-420

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "3.35.0-419",
+  "version": "3.35.0-420",
   "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-419",
-    "@elementor/editor-canvas": "3.35.0-419",
-    "@elementor/editor-controls": "3.35.0-419",
-    "@elementor/editor-documents": "3.35.0-419",
-    "@elementor/editor-editing-panel": "3.35.0-419",
-    "@elementor/editor-elements": "3.35.0-419",
-    "@elementor/editor-elements-panel": "3.35.0-419",
-    "@elementor/editor-mcp": "3.35.0-419",
-    "@elementor/editor-panels": "3.35.0-419",
-    "@elementor/editor-props": "3.35.0-419",
-    "@elementor/editor-styles-repository": "3.35.0-419",
-    "@elementor/editor-ui": "3.35.0-419",
-    "@elementor/editor-v1-adapters": "3.35.0-419",
-    "@elementor/http-client": "3.35.0-419",
+    "@elementor/editor": "3.35.0-420",
+    "@elementor/editor-canvas": "3.35.0-420",
+    "@elementor/editor-controls": "3.35.0-420",
+    "@elementor/editor-documents": "3.35.0-420",
+    "@elementor/editor-editing-panel": "3.35.0-420",
+    "@elementor/editor-elements": "3.35.0-420",
+    "@elementor/editor-elements-panel": "3.35.0-420",
+    "@elementor/editor-mcp": "3.35.0-420",
+    "@elementor/editor-panels": "3.35.0-420",
+    "@elementor/editor-props": "3.35.0-420",
+    "@elementor/editor-styles-repository": "3.35.0-420",
+    "@elementor/editor-ui": "3.35.0-420",
+    "@elementor/editor-v1-adapters": "3.35.0-420",
+    "@elementor/http-client": "3.35.0-420",
     "@elementor/icons": "^1.63.0",
-    "@elementor/mixpanel": "3.35.0-419",
-    "@elementor/query": "3.35.0-419",
-    "@elementor/schema": "3.35.0-419",
-    "@elementor/store": "3.35.0-419",
+    "@elementor/mixpanel": "3.35.0-420",
+    "@elementor/query": "3.35.0-420",
+    "@elementor/schema": "3.35.0-420",
+    "@elementor/store": "3.35.0-420",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-419",
+    "@elementor/utils": "3.35.0-420",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "3.35.0-419",
-    "@elementor/editor-current-user": "3.35.0-419"
+    "@elementor/editor-notifications": "3.35.0-420",
+    "@elementor/editor-current-user": "3.35.0-420"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/components/create-component-form/create-component-form.tsx

@@ -4,13 +4,16 @@ import { getElementLabel, type V1ElementData } from '@elementor/editor-elements'
 import { notify } from '@elementor/editor-notifications';
 import { Form as FormElement, ThemeProvider } from '@elementor/editor-ui';
 import { StarIcon } from '@elementor/icons';
+import { __getState as getState } from '@elementor/store';
 import { Alert, Button, FormLabel, Grid, Popover, Snackbar, Stack, TextField, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useComponents } from '../../hooks/use-components';
 import { findNonAtomicElementsInElement } from '../../prevent-non-atomic-nesting';
 import { createUnpublishedComponent } from '../../store/actions/create-unpublished-component';
-import { type ComponentFormValues } from '../../types';
+import { selectComponentByUid } from '../../store/store';
+import { type ComponentFormValues, type PublishedComponent } from '../../types';
+import { switchToComponent } from '../../utils/switch-to-component';
 import { trackComponentEvent } from '../../utils/tracking';
 import { useForm } from './hooks/use-form';
 import { createBaseComponentSchema, createSubmitComponentSchema } from './utils/component-form-schema';
@@ -79,13 +82,25 @@ export function CreateComponentForm() {
 		};
 	}, [] );
 
-	const handleSave = ( values: ComponentFormValues ) => {
+	const handleSave = async ( values: ComponentFormValues ) => {
 		try {
 			if ( ! element ) {
 				throw new Error( `Can't save element as component: element not found` );
 			}
 
-			const uid = createUnpublishedComponent( values.componentName, element.element, eventData.current );
+			const { uid, instanceId } = await createUnpublishedComponent(
+				values.componentName,
+				element.element,
+				eventData.current
+			);
+
+			const publishedComponentId = ( selectComponentByUid( getState(), uid ) as PublishedComponent )?.id;
+
+			if ( publishedComponentId ) {
+				switchToComponent( publishedComponentId, instanceId );
+			} else {
+				throw new Error( 'Failed to find published component' );
+			}
 
 			setResultNotification( {
 				show: true,

package/src/components/create-component-form/utils/replace-element-with-component.ts

@@ -9,8 +9,8 @@ type ComponentInstanceParams = {
 	overridableProps?: OverridableProps;
 };
 
-export const replaceElementWithComponent = ( element: V1ElementData, component: ComponentInstanceParams ) => {
-	replaceElement( {
+export const replaceElementWithComponent = async ( element: V1ElementData, component: ComponentInstanceParams ) => {
+	return await replaceElement( {
 		currentElement: element,
 		newElement: createComponentModel( component ),
 		withHistory: false,

package/src/store/actions/create-unpublished-component.ts

@@ -9,7 +9,7 @@ import { type OverridableProps } from '../../types';
 import { trackComponentEvent } from '../../utils/tracking';
 import { slice } from '../store';
 
-export function createUnpublishedComponent(
+export async function createUnpublishedComponent(
 	name: string,
 	element: V1ElementData,
 	eventData: ComponentEventData | null,
@@ -28,7 +28,7 @@ export function createUnpublishedComponent(
 
 	dispatch( slice.actions.addCreatedThisSession( generatedUid ) );
 
-	replaceElementWithComponent( element, componentBase );
+	const componentInstance = await replaceElementWithComponent( element, componentBase );
 
 	trackComponentEvent( {
 		action: 'created',
@@ -37,7 +37,7 @@ export function createUnpublishedComponent(
 		...eventData,
 	} );
 
-	runCommand( 'document/save/auto' );
+	await runCommand( 'document/save/auto' );
 
-	return generatedUid;
+	return { uid: generatedUid, instanceId: componentInstance.id };
 }