@elementor/editor-canvas 4.2.0-938 → 4.2.0-940

package/src/mcp/utils/__tests__/resolve-canonical-prop-name.test.ts

@@ -0,0 +1,111 @@
+import { getWidgetsCache } from '@elementor/editor-elements';
+
+import { resolveCanonicalPropKeys, resolveCanonicalPropName } from '../resolve-canonical-prop-name';
+
+jest.mock( '@elementor/editor-elements', () => ( {
+	getWidgetsCache: jest.fn(),
+} ) );
+
+const ELEMENT_TYPE = 'e-paragraph';
+
+const widgetsCacheFixture = {
+	[ ELEMENT_TYPE ]: {
+		atomic_props_schema: {
+			paragraph: {
+				key: 'html-v3',
+				meta: {
+					aliases: [ 'text', 'content' ],
+				},
+			},
+			tag: {
+				key: 'string',
+			},
+		},
+	},
+};
+
+describe( 'resolveCanonicalPropName', () => {
+	beforeEach( () => {
+		// @ts-ignore: Mock values for test
+		jest.mocked( getWidgetsCache ).mockReturnValue( widgetsCacheFixture );
+	} );
+
+	it( 'returns canonical property names unchanged', () => {
+		// Act
+		const resolved = resolveCanonicalPropName( ELEMENT_TYPE, 'paragraph' );
+
+		// Assert
+		expect( resolved ).toBe( 'paragraph' );
+	} );
+
+	it( 'resolves alias property names to canonical keys', () => {
+		// Act
+		const resolved = resolveCanonicalPropName( ELEMENT_TYPE, 'text' );
+
+		// Assert
+		expect( resolved ).toBe( 'paragraph' );
+	} );
+
+	it( 'returns unknown property names unchanged', () => {
+		// Act
+		const resolved = resolveCanonicalPropName( ELEMENT_TYPE, 'unknown' );
+
+		// Assert
+		expect( resolved ).toBe( 'unknown' );
+	} );
+
+	it( 'returns property names unchanged when element type has no schema', () => {
+		// Arrange
+		jest.mocked( getWidgetsCache ).mockReturnValue( null );
+
+		// Act
+		const resolved = resolveCanonicalPropName( 'missing-widget', 'text' );
+
+		// Assert
+		expect( resolved ).toBe( 'text' );
+	} );
+} );
+
+describe( 'resolveCanonicalPropKeys', () => {
+	beforeEach( () => {
+		// @ts-ignore: Mock values for test
+		jest.mocked( getWidgetsCache ).mockReturnValue( widgetsCacheFixture );
+	} );
+
+	it( 'rewrites alias keys to canonical keys', () => {
+		// Act
+		const resolved = resolveCanonicalPropKeys( ELEMENT_TYPE, {
+			text: 'hello',
+		} );
+
+		// Assert
+		expect( resolved ).toEqual( {
+			paragraph: 'hello',
+		} );
+	} );
+
+	it( 'prefers canonical keys when alias and canonical are both provided', () => {
+		// Act
+		const resolved = resolveCanonicalPropKeys( ELEMENT_TYPE, {
+			paragraph: 'canonical',
+			text: 'alias',
+		} );
+
+		// Assert
+		expect( resolved ).toEqual( {
+			paragraph: 'canonical',
+		} );
+	} );
+
+	it( 'passes unknown keys through for downstream validation', () => {
+		// Act
+		const resolved = resolveCanonicalPropKeys( ELEMENT_TYPE, {
+			unknown: 'value',
+		} );
+
+		// Assert
+		expect( resolved ).toEqual( {
+			unknown: 'value',
+		} );
+	} );
+} );

package/src/mcp/utils/do-update-element-property.ts

@@ -12,6 +12,7 @@ import { type Utils as IUtils } from '@elementor/editor-variables';
 import { type z } from '@elementor/schema';
 
 import { mergeCustomCssText, readStoredCustomCssText } from './merge-custom-css';
+import { resolveCanonicalPropName } from './resolve-canonical-prop-name';
 import { DYNAMIC_PROP_TYPE_KEY, dynamicTagLLMResolver } from './resolve-dynamic-tag';
 
 // TODO: see https://elementor.atlassian.net/browse/ED-22513 for better cross-module access
@@ -47,7 +48,11 @@ export function resolvePropValue( value: unknown, forceKey?: string ): PropValue
  * Also, it supports updating styles "on-the-way" by checking for "_styles" property with PropValue bag that fits the common style schema.
  */
 export const doUpdateElementProperty = ( params: OwnParams ) => {
-	const { elementId, propertyName, propertyValue, elementType, customCssWriteMode = 'replace' } = params;
+	const { elementId, propertyValue, elementType, customCssWriteMode = 'replace' } = params;
+	const propertyName =
+		params.propertyName === '_styles'
+			? params.propertyName
+			: resolveCanonicalPropName( elementType, params.propertyName );
 	if ( propertyName === '_styles' ) {
 		const elementStyles = getElementStyles( elementId ) || {};
 		const propertyMapValue = propertyValue as Record< string, PropValue >;

package/src/mcp/utils/resolve-canonical-prop-name.ts

@@ -0,0 +1,71 @@
+import { getWidgetsCache } from '@elementor/editor-elements';
+import { type PropsSchema } from '@elementor/editor-props';
+
+function buildAliasToCanonicalMap( schema: PropsSchema ): Record< string, string > {
+	const aliasToCanonical: Record< string, string > = {};
+
+	for ( const [ canonical, propType ] of Object.entries( schema ) ) {
+		const aliases = propType.meta?.aliases;
+
+		if ( ! Array.isArray( aliases ) ) {
+			continue;
+		}
+
+		for ( const alias of aliases ) {
+			if ( typeof alias === 'string' && alias ) {
+				aliasToCanonical[ alias ] = canonical;
+			}
+		}
+	}
+
+	return aliasToCanonical;
+}
+
+export function resolveCanonicalPropName( elementType: string, propertyName: string ): string {
+	const schema = getWidgetsCache()?.[ elementType ]?.atomic_props_schema;
+
+	if ( ! schema || schema[ propertyName ] ) {
+		return propertyName;
+	}
+
+	return buildAliasToCanonicalMap( schema )[ propertyName ] ?? propertyName;
+}
+
+export function resolveCanonicalPropKeys(
+	elementType: string,
+	props: Record< string, unknown >
+): Record< string, unknown > {
+	const schema = getWidgetsCache()?.[ elementType ]?.atomic_props_schema;
+
+	if ( ! schema ) {
+		return { ...props };
+	}
+
+	const aliasToCanonical = buildAliasToCanonicalMap( schema );
+	const resolved: Record< string, unknown > = {};
+
+	for ( const [ key, value ] of Object.entries( props ) ) {
+		if ( schema[ key ] ) {
+			resolved[ key ] = value;
+		}
+	}
+
+	for ( const [ key, value ] of Object.entries( props ) ) {
+		if ( schema[ key ] ) {
+			continue;
+		}
+
+		const canonical = aliasToCanonical[ key ];
+
+		if ( ! canonical ) {
+			resolved[ key ] = value;
+			continue;
+		}
+
+		if ( ! Object.prototype.hasOwnProperty.call( resolved, canonical ) ) {
+			resolved[ canonical ] = value;
+		}
+	}
+
+	return resolved;
+}

package/src/renderers/__tests__/create-props-resolver.test.ts

@@ -287,8 +287,18 @@ describe( 'createPropsResolver', () => {
 
 		// Assert.
 		expect( onResolve ).toHaveBeenCalledTimes( 2 );
-		expect( onResolve ).toHaveBeenNthCalledWith( 1, { key: 'int', value: 2 } );
-		expect( onResolve ).toHaveBeenNthCalledWith( 2, { key: 'int2', value: 4 } );
+		expect( onResolve ).toHaveBeenNthCalledWith( 1, {
+			key: 'int',
+			value: 2,
+			propValue: { $$type: 'int', value: 1 },
+			propType: createMockPropType( { kind: 'plain', key: 'int' } ),
+		} );
+		expect( onResolve ).toHaveBeenNthCalledWith( 2, {
+			key: 'int2',
+			value: 4,
+			propValue: { $$type: 'int', value: 3 },
+			propType: createMockPropType( { kind: 'plain', key: 'int' } ),
+		} );
 	} );
 
 	it( 'should pass renderContext to transformers', async () => {

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

@@ -79,6 +79,36 @@ describe( 'renderStyles', () => {
 		expect( resolve ).toHaveBeenNthCalledWith( 5, { props: { 'font-size': '50px' } } );
 	} );
 
+	it.each( [
+		[ '"Open Sans"', 'font-family:"Open Sans";' ],
+		[ 'Arial', 'font-family:Arial;' ],
+		[ 'var(--primary-font)', 'font-family:var(--primary-font);' ],
+	] )( 'should pass through font-family "%s" as-is in CSS output', async ( fontFamily, expected ) => {
+		// Arrange.
+		const styleDef: RendererStyleDefinition = {
+			id: 'test',
+			type: 'class',
+			cssName: 'test',
+			label: 'Test',
+			variants: [
+				{
+					meta: { breakpoint: null, state: null },
+					props: { 'font-family': fontFamily },
+					custom_css: null,
+				},
+			],
+		};
+
+		const resolve = jest.fn( ( { props } ) => props );
+		const renderStyles = createStylesRenderer( { breakpoints: {} as BreakpointsMap, resolve } );
+
+		// Act.
+		const result = await renderStyles( { styles: [ styleDef ] } );
+
+		// Assert.
+		expect( result[ 0 ].value ).toContain( expected );
+	} );
+
 	it( 'should add selector prefix to the output', async () => {
 		// Arrange.
 		const styleDef: RendererStyleDefinition = {

package/src/renderers/__tests__/enqueue-font-from-style-prop.test.ts

@@ -0,0 +1,29 @@
+import { createMockPropType } from 'test-utils';
+import { fontFamilyPropTypeUtil } from '@elementor/editor-props';
+import { enqueueFont } from '@elementor/editor-v1-adapters';
+
+import { maybeEnqueueFontFromStyleProp } from '../enqueue-font-from-style-prop';
+
+jest.mock( '@elementor/editor-v1-adapters' );
+
+describe( 'maybeEnqueueFontFromStyleProp', () => {
+	it( 'should enqueue when prop type implements getEnqueueFontFamily', () => {
+		maybeEnqueueFontFromStyleProp(
+			createMockPropType( { key: 'font-family', kind: 'plain' } ),
+			fontFamilyPropTypeUtil.create( 'Open Sans' ),
+			enqueueFont
+		);
+
+		expect( enqueueFont ).toHaveBeenCalledWith( 'Open Sans' );
+	} );
+
+	it( 'should not enqueue when prop type does not implement font enqueue', () => {
+		maybeEnqueueFontFromStyleProp(
+			createMockPropType( { key: 'string', kind: 'plain' } ),
+			{ $$type: 'string', value: 'red' },
+			enqueueFont
+		);
+
+		expect( enqueueFont ).not.toHaveBeenCalled();
+	} );
+} );

package/src/renderers/create-props-resolver.ts

@@ -15,7 +15,7 @@ import { getMultiPropsValue, isMultiProps } from './multi-props';
 type CreatePropResolverArgs = {
 	transformers: TransformersRegistry;
 	schema: PropsSchema;
-	onPropResolve?: ( args: { key: string; value: unknown } ) => void;
+	onPropResolve?: ( args: { key: string; value: unknown; propValue: unknown; propType: PropType } ) => void;
 };
 
 type ResolveArgs = {
@@ -48,7 +48,7 @@ export function createPropsResolver( { transformers, schema: initialSchema, onPr
 				const value = props[ key ] ?? type.default;
 				const transformed = ( await transform( { value, key, type, signal, renderContext } ) ) as PropValue;
 
-				onPropResolve?.( { key, value: transformed } );
+				onPropResolve?.( { key, value: transformed, propValue: value, propType: type } );
 
 				if ( isMultiProps( transformed ) ) {
 					return getMultiPropsValue( transformed );

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

@@ -1,4 +1,4 @@
-import type { Props } from '@elementor/editor-props';
+import { type Props } from '@elementor/editor-props';
 import { type Breakpoint, type BreakpointsMap } from '@elementor/editor-responsive';
 import {
 	type CustomCss,

package/src/renderers/enqueue-font-from-style-prop.ts

@@ -0,0 +1,34 @@
+import { getPropSchemaFromCache, isTransformable, type PropType } from '@elementor/editor-props';
+
+export const maybeEnqueueFontFromStyleProp = (
+	propType: PropType,
+	propValue: unknown,
+	enqueue: ( font: string ) => void
+): void => {
+	if ( ! isTransformable( propValue ) || propValue.disabled ) {
+		return;
+	}
+
+	const typeKey = propType.kind === 'union' ? propValue.$$type : propType.key;
+	const propTypeUtil = getPropSchemaFromCache( typeKey );
+
+	if (
+		! propTypeUtil ||
+		! ( 'getEnqueueFontFamily' in propTypeUtil ) ||
+		typeof propTypeUtil.getEnqueueFontFamily !== 'function'
+	) {
+		return;
+	}
+
+	const stored = propValue.value;
+
+	if ( typeof stored !== 'string' ) {
+		return;
+	}
+
+	const font = propTypeUtil.getEnqueueFontFamily( stored );
+
+	if ( font ) {
+		enqueue( font );
+	}
+};

package/src/transformers/styles/__tests__/font-family-transformer.test.ts

@@ -0,0 +1,20 @@
+import { fontFamilyTransformer } from '../font-family-transformer';
+
+function run( value: string | null ) {
+	return fontFamilyTransformer( value, { key: 'font-family', signal: undefined } );
+}
+
+describe( 'fontFamilyTransformer', () => {
+	it( 'wraps font names in quotes', () => {
+		expect( run( ' Open Sans ' ) ).toBe( '"Open Sans"' );
+		expect( run( 'Arial' ) ).toBe( '"Arial"' );
+	} );
+
+	it( 'passes through already quoted values', () => {
+		expect( run( '"Open Sans"' ) ).toBe( '"Open Sans"' );
+	} );
+
+	it( 'returns null for non-string values', () => {
+		expect( run( null ) ).toBeNull();
+	} );
+} );

package/src/transformers/styles/font-family-transformer.ts

@@ -0,0 +1,18 @@
+import { createTransformer } from '../create-transformer';
+
+export const fontFamilyTransformer = createTransformer( ( value: string | null ) => {
+	if ( typeof value !== 'string' || ! value.trim() ) {
+		return null;
+	}
+
+	const trimmed = value.trim();
+
+	if (
+		( trimmed.startsWith( '"' ) && trimmed.endsWith( '"' ) ) ||
+		( trimmed.startsWith( "'" ) && trimmed.endsWith( "'" ) )
+	) {
+		return trimmed;
+	}
+
+	return `"${ trimmed }"`;
+} );