@elementor/editor-canvas 4.4.0-beta1 → 4.4.0-beta2

package/src/mcp/resources/selected-element-resource.ts

@@ -1,5 +1,6 @@
 import { getContainer, getSelectedElements, getWidgetsCache, type V1Element } from '@elementor/editor-elements';
 import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+import { Schema } from '@elementor/editor-props';
 import {
 	__privateListenTo as listenTo,
 	commandEndEvent,
@@ -167,9 +168,14 @@ function getElementProperties(
 		return null;
 	}
 
-	const widgetConfig = widgetType ? getWidgetsCache()?.[ widgetType ] : null;
+	const widgetsCache = getWidgetsCache();
+	const widgetConfig = widgetType ? widgetsCache?.[ widgetType ] : null;
 	const controls = widgetConfig?.controls as Record< string, { default?: unknown } > | undefined;
 
+	// Atomic elements (e.g. e-div-block, e-form) have no widgetType, their config is keyed by elType.
+	const schemaType = widgetType ?? container.model.get( 'elType' ) ?? null;
+	const propsSchema = schemaType ? widgetsCache?.[ schemaType ]?.atomic_props_schema : undefined;
+
 	const filtered: Record< string, unknown > = {};
 
 	for ( const [ key, value ] of Object.entries( settings ) ) {
@@ -177,6 +183,10 @@ function getElementProperties(
 			continue;
 		}
 
+		if ( Schema.isPropSensitive( propsSchema?.[ key ] ) ) {
+			continue;
+		}
+
 		const controlDefault = controls?.[ key ]?.default;
 		if ( controlDefault !== undefined && JSON.stringify( value ) === JSON.stringify( controlDefault ) ) {
 			continue;

package/src/mcp/tools/configure-element/__tests__/tool.test.ts

@@ -13,7 +13,7 @@ jest.mock( '@elementor/editor-mcp', () => ( {
 } ) );
 
 jest.mock( '@elementor/editor-props', () => ( {
-	Schema: { isPropKeyConfigurable: () => true },
+	Schema: { isPropKeyConfigurable: jest.requireActual( '@elementor/editor-props' ).Schema.isPropKeyConfigurable },
 } ) );
 
 jest.mock( '../prompt', () => ( {
@@ -128,3 +128,55 @@ describe( 'configure-element handler unsupported props', () => {
 		).rejects.toThrow( /Invalid PropValue/ );
 	} );
 } );
+
+describe( 'configure-element handler sensitive props', () => {
+	beforeEach( () => {
+		jest.mocked( getWidgetsCache ).mockReturnValue( {
+			[ ELEMENT_TYPE ]: {
+				atomic_props_schema: {
+					title: { key: 'string', kind: 'plain', settings: {}, meta: {} },
+					api_key: { key: 'string', kind: 'plain', settings: {}, meta: { sensitive: true } },
+				},
+			},
+		} as never );
+		jest.mocked( getContainer ).mockReturnValue( {
+			settings: { get: () => ELEMENT_TYPE },
+		} as never );
+		jest.mocked( doUpdateElementProperty ).mockReset();
+	} );
+
+	it( 'rejects a write to a sensitive prop', async () => {
+		// Arrange
+		const handler = getHandler();
+
+		// Act & Assert
+		await expect(
+			handler( {
+				elementId: ELEMENT_ID,
+				elementType: ELEMENT_TYPE,
+				propertiesToChange: { api_key: { $$type: 'string', value: 'secret' } },
+				style: {},
+			} )
+		).rejects.toThrow( 'Not allowed to update api_key' );
+
+		expect( doUpdateElementProperty ).not.toHaveBeenCalled();
+	} );
+
+	it( 'still writes non sensitive props', async () => {
+		// Arrange
+		jest.mocked( doUpdateElementProperty ).mockImplementation( () => undefined );
+		const handler = getHandler();
+
+		// Act
+		const result = await handler( {
+			elementId: ELEMENT_ID,
+			elementType: ELEMENT_TYPE,
+			propertiesToChange: { title: { $$type: 'string', value: 'Hi' } },
+			style: {},
+		} );
+
+		// Assert
+		expect( result.success ).toBe( true );
+		expect( doUpdateElementProperty ).toHaveBeenCalledTimes( 1 );
+	} );
+} );

package/src/mcp/tools/configure-element/tool.ts

@@ -63,7 +63,7 @@ export const initConfigureElementTool = ( reg: MCPRegistryEntry ) => {
 			const toUpdate = Object.entries( propertiesToUpdate );
 			const skippedProps: string[] = [];
 			for ( const [ propertyName, propertyValue ] of toUpdate as [ string, PropValue ][] ) {
-				if ( ! Schema.isPropKeyConfigurable( propertyName ) ) {
+				if ( ! Schema.isPropKeyConfigurable( propertyName, widgetData.atomic_props_schema[ propertyName ] ) ) {
 					throw new Error( `Not allowed to update ${ propertyName }` );
 				}
 				try {

package/src/renderers/__tests__/create-dom-renderer.test.ts

@@ -77,6 +77,30 @@ describe( 'createDomRenderer', () => {
 			context: { url: 'javascript:alert(123)' },
 			expected: '',
 		},
+		{
+			title: 'alphanumeric element id in an alpine expression',
+			template: `x-data="{% if (id | e( 'js_identifier' )) != '' %}eTabs{{ id | e( 'js_identifier' ) }}{% else %}{}{% endif %}"`,
+			context: { id: 'tabscontainer' },
+			expected: 'x-data="eTabstabscontainer"',
+		},
+		{
+			title: 'element id with underscore in an alpine expression',
+			template: `x-data="{% if (id | e( 'js_identifier' )) != '' %}eForm{{ id | e( 'js_identifier' ) }}{% else %}{}{% endif %}"`,
+			context: { id: 'test_atomic_form_instance' },
+			expected: 'x-data="eFormtest_atomic_form_instance"',
+		},
+		{
+			title: 'element id that is a javascript expression',
+			template: `x-data="{% if (id | e( 'js_identifier' )) != '' %}eTabs{{ id | e( 'js_identifier' ) }}{% else %}{}{% endif %}"`,
+			context: { id: '=window.alert(document.domain)' },
+			expected: 'x-data="{}"',
+		},
+		{
+			title: 'element id with a hyphen',
+			template: `x-data="{% if (id | e( 'js_identifier' )) != '' %}eBackgroundVideo{{ id | e( 'js_identifier' ) }}{% else %}{}{% endif %}"`,
+			context: { id: 'foo-alert(1)' },
+			expected: 'x-data="{}"',
+		},
 	] )( 'should render template with $title', async ( { template, context, expected } ) => {
 		// Arrange.
 		const domRenderer = createDomRenderer();

package/src/renderers/create-dom-renderer.ts

@@ -11,6 +11,7 @@ export function createDomRenderer(): DomRenderer {
 
 	environment.registerEscapingStrategy( escapeHtmlTag, 'html_tag' );
 	environment.registerEscapingStrategy( escapeURL, 'full_url' );
+	environment.registerEscapingStrategy( escapeJsIdentifier, 'js_identifier' );
 
 	return {
 		register: loader.setTemplate,
@@ -34,6 +35,15 @@ function escapeHtmlTag( value: string ) {
 	return allowedTags.includes( normalizedTag ) ? value : 'div';
 }
 
+const JS_IDENTIFIER_PATTERN = /^[A-Za-z0-9_]+$/;
+
+function escapeJsIdentifier( value: unknown ): string {
+	const id = String( value ?? '' );
+	const match = id.match( JS_IDENTIFIER_PATTERN );
+
+	return match?.[ 0 ] === id ? id : '';
+}
+
 function escapeURL( value: string ) {
 	const allowedProtocols = [ 'http:', 'https:', 'mailto:', 'tel:' ];