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

package/package.json

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

package/src/component-instance-transformer.ts

@@ -1,18 +1,10 @@
-import { createTransformer, RenderContext } from '@elementor/editor-canvas';
+import { createTransformer } from '@elementor/editor-canvas';
 import { __getState as getState } from '@elementor/store';
 
 import { type ComponentInstanceOverrideProp } from './prop-types/component-instance-override-prop-type';
 import { selectUnpublishedComponents } from './store/store';
 import { getComponentDocumentData } from './utils/component-document-data';
 
-type ComponentInstanceContext = {
-	overrides?: Record< string, unknown >;
-};
-
-export const componentInstanceContext = new RenderContext< ComponentInstanceContext >( 'component-instance', {
-	overrides: {},
-} );
-
 export const componentInstanceTransformer = createTransformer(
 	async ( {
 		component_id: id,

package/src/component-overridable-transformer.ts

@@ -1,14 +1,13 @@
-import { createTransformer, settingsTransformersRegistry } from '@elementor/editor-canvas';
+import { createTransformer, settingsTransformersRegistry, type TransformerOptions } from '@elementor/editor-canvas';
 import { type PropValue, type TransformablePropValue } from '@elementor/editor-props';
 
-import { componentInstanceContext } from './component-instance-transformer';
 import { type ComponentOverridable } from './types';
 
 export const componentOverridableTransformer = createTransformer(
-	( value: ComponentOverridable, options: { key: string } ) => {
-		const { overrides } = componentInstanceContext.get();
+	( value: ComponentOverridable, options: TransformerOptions ) => {
+		const { overrides } = options.renderContext ?? {};
 
-		const overrideValue = overrides?.[ value.override_key ];
+		const overrideValue = overrides?.[ value.override_key as keyof typeof overrides ];
 
 		if ( overrideValue ) {
 			const isOverride = isOriginValueOverride( value.origin_value );

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/create-component-type.ts

@@ -7,6 +7,8 @@ import {
 	type ElementType,
 	type ElementView,
 	type LegacyWindow,
+	type NamespacedRenderContext,
+	type RenderContext,
 } from '@elementor/editor-canvas';
 import { getCurrentDocument } from '@elementor/editor-documents';
 import { __getState as getState } from '@elementor/store';
@@ -15,7 +17,7 @@ import { __ } from '@wordpress/i18n';
 import { apiClient } from './api';
 import { type ComponentInstanceProp } from './prop-types/component-instance-prop-type';
 import { type ComponentsSlice, selectComponentByUid } from './store/store';
-import { type ExtendedWindow } from './types';
+import { type ComponentRenderContext, type ExtendedWindow } from './types';
 import { switchToComponent } from './utils/switch-to-component';
 import { trackComponentEvent } from './utils/tracking';
 
@@ -104,6 +106,7 @@ function createComponentView(
 	return class extends createTemplatedElementView( options ) {
 		legacyWindow = window as unknown as LegacyWindow & ExtendedWindow;
 		eventsManagerConfig = this.legacyWindow.elementorCommon.eventsManager.config;
+		#componentRenderContext: ComponentRenderContext | undefined;
 
 		isComponentCurrentlyEdited() {
 			const currentDocument = getCurrentDocument();
@@ -111,6 +114,36 @@ function createComponentView(
 			return currentDocument?.id === this.getComponentId();
 		}
 
+		getRenderContext(): NamespacedRenderContext | undefined {
+			const namespaceKey = this.getNamespaceKey();
+			const parentContext = this._parent?.getRenderContext?.();
+			const parentComponentContext = parentContext?.[ namespaceKey ];
+
+			if ( ! this.#componentRenderContext ) {
+				return parentContext;
+			}
+
+			const ownOverrides = this.#componentRenderContext.overrides ?? {};
+			const parentOverrides = parentComponentContext?.overrides ?? {};
+
+			return {
+				...parentContext,
+				[ namespaceKey ]: {
+					overrides: {
+						...parentOverrides,
+						...ownOverrides,
+					},
+				},
+			};
+		}
+
+		getResolverRenderContext(): RenderContext | undefined {
+			const namespaceKey = this.getNamespaceKey();
+			const context = this.getRenderContext();
+
+			return context?.[ namespaceKey ];
+		}
+
 		afterSettingsResolve( settings: { [ key: string ]: unknown } ) {
 			const componentInstance = settings.component_instance as
 				| {
@@ -120,6 +153,10 @@ function createComponentView(
 				| undefined;
 
 			if ( componentInstance ) {
+				this.#componentRenderContext = {
+					overrides: componentInstance.overrides ?? {},
+				};
+
 				this.collection = this.legacyWindow.elementor.createBackboneElementsCollection(
 					componentInstance.elements
 				);

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 };
 }

package/src/types.ts

@@ -1,3 +1,4 @@
+import { type RenderContext } from '@elementor/editor-canvas';
 import { type V1ElementData } from '@elementor/editor-elements';
 import { type PropValue, type TransformablePropValue } from '@elementor/editor-props';
 import type { StyleDefinition } from '@elementor/editor-styles';
@@ -74,6 +75,10 @@ export type ComponentOverridable = {
 	origin_value: TransformablePropValue< string >;
 };
 
+export type ComponentRenderContext = RenderContext< {
+	overrides?: Record< string, unknown >;
+} >;
+
 export type UpdatedComponentName = {
 	componentId: number;
 	title: string;