@elementor/editor-canvas 3.33.0-99 → 3.34.2

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

@@ -2,20 +2,22 @@ import type { Props } from '@elementor/editor-props';
 import { type Breakpoint, type BreakpointsMap } from '@elementor/editor-responsive';
 import {
 	type CustomCss,
+	isClassState,
+	isPseudoState,
 	type StyleDefinition,
 	type StyleDefinitionState,
 	type StyleDefinitionType,
 } from '@elementor/editor-styles';
-import { EXPERIMENTAL_FEATURES, isExperimentActive } from '@elementor/editor-v1-adapters';
 import { decodeString } from '@elementor/utils';
 
 import { type PropsResolver } from './create-props-resolver';
-import { UnknownStyleTypeError } from './errors';
+import { UnknownStyleStateError, UnknownStyleTypeError } from './errors';
 
 export type StyleItem = {
 	id: string;
 	value: string;
 	breakpoint: string;
+	state: StyleDefinitionState | null;
 };
 
 export type StyleRenderer = ReturnType< typeof createStylesRenderer >;
@@ -66,6 +68,7 @@ export function createStylesRenderer( { resolve, breakpoints, selectorPrefix = '
 				id: style.id,
 				breakpoint: style?.variants[ 0 ]?.meta?.breakpoint || 'desktop',
 				value: variantsCss.join( '' ),
+				state: style?.variants[ 0 ]?.meta?.state || null,
 			};
 		} );
 
@@ -88,9 +91,21 @@ function createStyleWrapper( value: string = '', wrapper?: ( css: string ) => st
 		withPrefix: ( prefix: string ) =>
 			createStyleWrapper( [ prefix, value ].filter( Boolean ).join( ' ' ), wrapper ),
 
-		withState: ( state: StyleDefinitionState ) =>
-			createStyleWrapper( state ? `${ value }:${ state }` : value, wrapper ),
+		withState: ( state: StyleDefinitionState ) => {
+			if ( ! state ) {
+				return createStyleWrapper( value, wrapper );
+			}
+
+			if ( isClassState( state ) ) {
+				return createStyleWrapper( `${ value }.${ state }`, wrapper );
+			}
+
+			if ( isPseudoState( state ) ) {
+				return createStyleWrapper( `${ value }:${ state }`, wrapper );
+			}
 
+			throw new UnknownStyleStateError( { context: { state } } );
+		},
 		withMediaQuery: ( breakpoint: Breakpoint | null ) => {
 			if ( ! breakpoint?.type ) {
 				return createStyleWrapper( value, wrapper );
@@ -130,11 +145,7 @@ async function propsToCss( { props, resolve, signal }: PropsToCssArgs ) {
 }
 
 function customCssToString( customCss: CustomCss | null ): string {
-	if ( ! isExperimentActive( EXPERIMENTAL_FEATURES.CUSTOM_CSS ) || ! customCss?.raw ) {
-		return '';
-	}
-
-	const decoded = decodeString( customCss.raw );
+	const decoded = decodeString( customCss?.raw || '' );
 
 	if ( ! decoded.trim() ) {
 		return '';

package/src/renderers/errors.ts

@@ -1,6 +1,12 @@
+import { type StyleDefinitionState } from '@elementor/editor-styles';
 import { createError } from '@elementor/utils';
 
 export const UnknownStyleTypeError = createError< { type: string } >( {
 	code: 'unknown_style_type',
 	message: 'Unknown style type',
 } );
+
+export const UnknownStyleStateError = createError< { state: StyleDefinitionState } >( {
+	code: 'unknown_style_state',
+	message: 'Unknown style state',
+} );

package/src/sync/drag-element-from-panel.ts

@@ -0,0 +1,49 @@
+import { type V1ElementModelProps } from '@elementor/editor-elements';
+
+import { type CanvasExtendedWindow } from './types';
+
+export const startDragElementFromPanel = ( props: Omit< V1ElementModelProps, 'id' > ) => {
+	const channels = getElementorChannels();
+
+	channels?.editor.reply( 'element:dragged', null );
+
+	channels?.panelElements
+		.reply( 'element:selected', getLegacyPanelElementView( props ) )
+		.trigger( 'element:drag:start' );
+};
+
+export const endDragElementFromPanel = () => {
+	getElementorChannels()?.panelElements?.trigger( 'element:drag:end' );
+};
+
+const getElementorChannels = () => {
+	const extendedWindow = window as unknown as CanvasExtendedWindow;
+	const channels = extendedWindow.elementor?.channels;
+
+	if ( ! channels ) {
+		throw new Error(
+			'Elementor channels not found: Elementor editor is not initialized or channels are unavailable.'
+		);
+	}
+
+	return channels;
+};
+
+const getLegacyPanelElementView = ( { settings, ...rest }: Omit< V1ElementModelProps, 'id' > ) => {
+	const extendedWindow = window as unknown as CanvasExtendedWindow;
+	const LegacyElementModel = extendedWindow.elementor?.modules?.elements?.models?.Element;
+
+	if ( ! LegacyElementModel ) {
+		throw new Error( 'Elementor legacy Element model not found in editor modules' );
+	}
+
+	const elementModel = new LegacyElementModel( {
+		...rest,
+		custom: {
+			isPreset: !! settings,
+			preset_settings: settings,
+		},
+	} );
+
+	return { model: elementModel };
+};

package/src/sync/types.ts

@@ -1,17 +1,48 @@
-import { type StorageContent } from '../prevent-link-in-link-commands';
+import { type V1ElementModelProps, type V1ElementSettingsProps } from '@elementor/editor-elements';
 
+import { type StorageContent } from '../prevent-link-in-link-commands';
 export type EnqueueFont = ( fontFamily: string, context?: 'preview' | 'editor' ) => void;
 
+export type ElementModelProps = Omit< V1ElementModelProps, 'id' > & {
+	custom: {
+		isPreset: boolean;
+		preset_settings?: V1ElementSettingsProps;
+	};
+};
+
+type Channel = {
+	reply: ( event: string, data: unknown ) => Channel;
+	trigger: ( event: string ) => void;
+};
+
+type ElementorChannels = {
+	editor: Channel;
+	panelElements: Channel;
+};
+
 export type CanvasExtendedWindow = Window & {
 	elementor?: {
 		$preview?: [ HTMLIFrameElement ];
 		helpers?: {
 			enqueueFont?: EnqueueFont;
 		};
+		channels?: ElementorChannels;
+		modules?: {
+			elements?: {
+				models?: {
+					Element?: new ( props: ElementModelProps ) => unknown;
+				};
+			};
+		};
 	};
 	elementorCommon?: {
 		storage?: {
 			get: ( key?: string ) => StorageContent;
 		};
+		config?: {
+			urls?: {
+				assets?: string;
+			};
+		};
 	};
 };

package/src/transformers/settings/__tests__/attributes-transformer.test.ts

@@ -0,0 +1,15 @@
+import { attributesTransformer } from '../attributes-transformer';
+
+describe( 'attributesTransformer', () => {
+	it( 'always returns empty string in core', () => {
+		const result = attributesTransformer(
+			[
+				{ key: 'data-id', value: '123' },
+				{ key: 'role', value: 'button' },
+			],
+			{ key: 'attributes' }
+		);
+
+		expect( result ).toBe( '' );
+	} );
+} );

package/src/transformers/settings/__tests__/classes-transformer.test.ts

@@ -0,0 +1,83 @@
+import { createClassesTransformer } from '../classes-transformer';
+
+jest.mock( '@elementor/editor-styles-repository', () => ( {
+	stylesRepository: {
+		getProviders: jest.fn(),
+		getProviderByKey: jest.fn(),
+	},
+} ) );
+
+const mockStylesRepository = require( '@elementor/editor-styles-repository' ).stylesRepository;
+
+describe( 'createClassesTransformer', () => {
+	const createMockProvider = ( key: string, styles: Array< { id: string } > = [] ) => ( {
+		getKey: () => key,
+		actions: {
+			all: () => styles,
+			resolveCssName: jest.fn( ( id: string ): string | null => `resolved-${ id }` ),
+		},
+	} );
+
+	const createMockStyle = ( id: string ) => ( { id } );
+
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should transform class IDs using provider CSS names', () => {
+		const provider = createMockProvider( 'test-provider', [ createMockStyle( 'class-1' ) ] );
+		const provider2 = createMockProvider( 'test-provider-2', [ createMockStyle( 'class-2' ) ] );
+		mockStylesRepository.getProviders.mockReturnValue( [ provider, provider2 ] );
+		mockStylesRepository.getProviderByKey.mockReturnValueOnce( provider ).mockReturnValueOnce( provider2 );
+		const transformer = createClassesTransformer();
+
+		const result = transformer( [ 'class-1', 'class-2' ], { key: 'test-key' } );
+
+		expect( result ).toEqual( [ 'resolved-class-1', 'resolved-class-2' ] );
+		expect( provider.actions.resolveCssName ).toHaveBeenCalledWith( 'class-1' );
+	} );
+
+	it( 'should return original ID when no provider is found', () => {
+		mockStylesRepository.getProviders.mockReturnValue( [] );
+		const transformer = createClassesTransformer();
+
+		const result = transformer( [ 'unknown-class' ], { key: 'test-key' } );
+
+		expect( result ).toEqual( [ 'unknown-class' ] );
+	} );
+
+	it( 'should return original ID when provider has no matching style', () => {
+		const provider = createMockProvider( 'test-provider', [ createMockStyle( 'other-class' ) ] );
+		mockStylesRepository.getProviders.mockReturnValue( [ provider ] );
+		const transformer = createClassesTransformer();
+
+		const result = transformer( [ 'unknown-class' ], { key: 'test-key' } );
+
+		expect( result ).toEqual( [ 'unknown-class' ] );
+	} );
+
+	it( 'should cache provider keys to avoid repeated lookups', () => {
+		const provider = createMockProvider( 'test-provider', [ createMockStyle( 'class-1' ) ] );
+		mockStylesRepository.getProviders.mockReturnValue( [ provider ] );
+		mockStylesRepository.getProviderByKey.mockReturnValue( provider );
+		const transformer = createClassesTransformer();
+
+		transformer( [ 'class-1' ], { key: 'test-key' } );
+		transformer( [ 'class-1' ], { key: 'test-key' } );
+
+		expect( mockStylesRepository.getProviders ).toHaveBeenCalledTimes( 1 );
+		expect( provider.actions.resolveCssName ).toHaveBeenCalledTimes( 2 );
+	} );
+
+	it( 'should handle multiple class IDs', () => {
+		const provider1 = createMockProvider( 'provider-1', [ createMockStyle( 'class-1' ) ] );
+		const provider2 = createMockProvider( 'provider-2', [ createMockStyle( 'class-2' ) ] );
+		mockStylesRepository.getProviders.mockReturnValue( [ provider1, provider2 ] );
+		mockStylesRepository.getProviderByKey.mockReturnValueOnce( provider1 ).mockReturnValueOnce( provider2 );
+		const transformer = createClassesTransformer();
+
+		const result = transformer( [ 'class-1', 'class-2' ], { key: 'test-key' } );
+
+		expect( result ).toEqual( [ 'resolved-class-1', 'resolved-class-2' ] );
+	} );
+} );

package/src/transformers/settings/attributes-transformer.ts

@@ -1,25 +1,3 @@
 import { createTransformer } from '../create-transformer';
 
-function escapeHtmlAttribute( value: string ): string {
-	const specialChars: Record< string, string > = {
-		'&': '&amp;',
-		'<': '&lt;',
-		'>': '&gt;',
-		"'": '&#39;',
-		'"': '&quot;',
-	};
-
-	return value.replace( /[&<>'"]/g, ( char ) => specialChars[ char ] || char );
-}
-
-export const attributesTransformer = createTransformer( ( values: { key: string; value: string }[] ) => {
-	return values
-		.map( ( value ) => {
-			if ( ! value.key || ! value.value ) {
-				return '';
-			}
-			const escapedValue = escapeHtmlAttribute( value.value );
-			return `${ value.key }="${ escapedValue }"`;
-		} )
-		.join( ' ' );
-} );
+export const attributesTransformer = createTransformer< { key: string; value: string }[] >( () => '' );

package/src/transformers/settings/classes-transformer.ts

@@ -2,30 +2,30 @@ import { stylesRepository } from '@elementor/editor-styles-repository';
 
 import { createTransformer } from '../create-transformer';
 
+function transformClassId( id: string, cache: Map< string, string > ): string {
+	if ( ! cache.has( id ) ) {
+		const provider = stylesRepository.getProviders().find( ( p ) => {
+			return p.actions.all().find( ( style ) => style.id === id );
+		} );
+
+		if ( ! provider ) {
+			return id;
+		}
+
+		cache.set( id, provider.getKey() );
+	}
+
+	const providerKey = cache.get( id ) as string;
+
+	const provider = stylesRepository.getProviderByKey( providerKey );
+
+	return provider?.actions.resolveCssName( id ) ?? id;
+}
+
 export function createClassesTransformer() {
 	const cache = new Map< string, string >();
 
 	return createTransformer( ( value: string[] ) => {
-		return value
-			.map( ( id ) => {
-				if ( ! cache.has( id ) ) {
-					cache.set( id, getCssName( id ) );
-				}
-
-				return cache.get( id );
-			} )
-			.filter( Boolean );
-	} );
-}
-
-function getCssName( id: string ) {
-	const provider = stylesRepository.getProviders().find( ( p ) => {
-		return p.actions.all().find( ( style ) => style.id === id );
+		return value.map( ( id ) => transformClassId( id, cache ) ).filter( Boolean );
 	} );
-
-	if ( ! provider ) {
-		return id;
-	}
-
-	return provider.actions.resolveCssName( id );
 }

package/src/transformers/settings/date-time-transformer.ts

@@ -0,0 +1,12 @@
+import { createTransformer } from '../create-transformer';
+
+export const dateTimeTransformer = createTransformer( ( values: { date?: string; time?: string }[] ) => {
+	return values
+		.map( ( value ) => {
+			const date = ( value.date || '' ).trim();
+			const time = ( value.time || '' ).trim();
+
+			return ! date && ! time ? '' : `${ date } ${ time }`.trim();
+		} )
+		.join( ' ' );
+} );

package/src/transformers/settings/query-transformer.ts

@@ -0,0 +1,10 @@
+import { createTransformer } from '../create-transformer';
+
+type Query = {
+	id: number;
+	label: string;
+};
+
+export const queryTransformer = createTransformer( ( { id }: Query ) => {
+	return id ?? null;
+} );

package/src/transformers/styles/__tests__/transform-origin-transformer.test.ts

@@ -0,0 +1,24 @@
+import { type TransformOrigin, transformOriginTransformer } from '../transform-origin-transformer';
+
+function run( val: TransformOrigin ) {
+	return transformOriginTransformer(
+		{
+			x: val.x as string,
+			y: val.y as string,
+			z: val.z as string,
+		},
+		{ key: 'transform-origin', signal: undefined }
+	);
+}
+
+describe( 'transform-origin-transformer', () => {
+	it( 'returns null for defaults (50% 50% 0px)', () => {
+		expect( run( { x: '50%', y: '50%', z: '0px' } ) ).toBeNull();
+	} );
+
+	it( 'returns value when non-default provided', () => {
+		expect( run( { x: '51%', y: '50%', z: '0px' } ) ).toBe( '51% 50% 0px' );
+		expect( run( { x: '50%', y: '49%', z: '0px' } ) ).toBe( '50% 49% 0px' );
+		expect( run( { x: '50%', y: '50%', z: '1px' } ) ).toBe( '50% 50% 1px' );
+	} );
+} );

package/src/transformers/styles/__tests__/transition-transformer.test.ts

@@ -0,0 +1,52 @@
+import { transitionProperties } from '@elementor/editor-controls';
+
+import { transitionTransformer, type TransitionValue } from '../transition-transformer';
+
+function run( values: TransitionValue[] ) {
+	return transitionTransformer( values, { key: 'transition', signal: undefined } );
+}
+
+describe( 'transition-transformer', () => {
+	it( 'returns null when all transitions are invalid', () => {
+		const invalidTransitions: TransitionValue[] = [
+			{
+				selection: { key: 'invalid-property', value: 'invalid-property' },
+				size: '200ms',
+			},
+		];
+
+		expect( run( invalidTransitions ) ).toBeNull();
+	} );
+
+	it( 'returns valid transition string for allowed property', () => {
+		const allowedProperty = transitionProperties[ 0 ].properties[ 0 ].value;
+		const validTransitions: TransitionValue[] = [
+			{
+				selection: { key: 'all', value: allowedProperty },
+				size: '200ms',
+			},
+		];
+
+		expect( run( validTransitions ) ).toBe( `${ allowedProperty } 200ms` );
+	} );
+
+	it( 'filters out non-allowed transitions and returns only valid ones', () => {
+		const allowedProperty = transitionProperties[ 0 ].properties[ 0 ].value;
+		const transitionsWithMixedValidity: TransitionValue[] = [
+			{
+				selection: { key: 'all', value: allowedProperty },
+				size: '200ms',
+			},
+			{
+				selection: { key: 'invalid', value: 'invalid-property' },
+				size: '300ms',
+			},
+			{
+				selection: { key: 'another-invalid', value: 'another-invalid-property' },
+				size: '400ms',
+			},
+		];
+
+		expect( run( transitionsWithMixedValidity ) ).toBe( `${ allowedProperty } 200ms` );
+	} );
+} );

package/src/transformers/styles/background-transformer.ts

@@ -5,13 +5,15 @@ import { type BackgroundOverlayTransformed } from './background-overlay-transfor
 type Background = {
 	'background-overlay'?: BackgroundOverlayTransformed;
 	color?: string;
+	clip?: 'border-box' | 'padding-box' | 'content-box' | 'text' | null;
 };
 
 export const backgroundTransformer = createTransformer( ( value: Background ) => {
-	const { color = null, 'background-overlay': overlays = null } = value;
+	const { color = null, 'background-overlay': overlays = null, clip = null } = value;
 
 	return createMultiPropsValue( {
 		...overlays,
 		'background-color': color,
+		'background-clip': clip,
 	} );
 } );

package/src/transformers/styles/transform-origin-transformer.ts

@@ -1,17 +1,27 @@
 import { createTransformer } from '../create-transformer';
 
-type TransformOrigin = {
+export type TransformOrigin = {
 	x: string;
 	y: string;
 	z: string;
 };
 
 const EMPTY_VALUE = '0px';
+const DEFAULT_XY = '50%';
+const DEFAULT_Z = EMPTY_VALUE;
 
 function getVal( val: string ) {
 	return `${ val ?? EMPTY_VALUE }`;
 }
 
 export const transformOriginTransformer = createTransformer( ( value: TransformOrigin ) => {
-	return `${ getVal( value.x ) } ${ getVal( value.y ) } ${ getVal( value.z ) }`;
+	const x = getVal( value.x );
+	const y = getVal( value.y );
+	const z = getVal( value.z );
+
+	if ( x === DEFAULT_XY && y === DEFAULT_XY && z === DEFAULT_Z ) {
+		return null;
+	}
+
+	return `${ x } ${ y } ${ z }`;
 } );

package/src/transformers/styles/transition-transformer.ts

@@ -1,6 +1,8 @@
+import { transitionProperties } from '@elementor/editor-controls';
+
 import { createTransformer } from '../create-transformer';
 
-type TransitionValue = {
+export type TransitionValue = {
 	selection: {
 		key: string;
 		value: string;
@@ -8,18 +10,46 @@ type TransitionValue = {
 	size: string;
 };
 
+const getAllowedProperties = (): Set< string > => {
+	const allowedProperties = new Set< string >();
+
+	transitionProperties.forEach( ( category ) => {
+		category.properties.forEach( ( property ) => {
+			allowedProperties.add( property.value );
+		} );
+	} );
+
+	return allowedProperties;
+};
+
 export const transitionTransformer = createTransformer( ( transitionValues: TransitionValue[] ) => {
 	if ( transitionValues?.length < 1 ) {
 		return null;
 	}
 
-	return transitionValues.filter( Boolean ).map( mapToTransitionString ).join( ', ' );
+	const allowedProperties = getAllowedProperties();
+
+	const validTransitions = transitionValues
+		.map( ( value ) => mapToTransitionString( value, allowedProperties ) )
+		.filter( Boolean );
+
+	if ( validTransitions.length === 0 ) {
+		return null;
+	}
+
+	return validTransitions.join( ', ' );
 } );
 
-const mapToTransitionString = ( value: TransitionValue ): string => {
+const mapToTransitionString = ( value: TransitionValue, allowedProperties: Set< string > ): string => {
 	if ( ! value.selection || ! value.size ) {
 		return '';
 	}
 
-	return `${ value.selection.value } ${ value.size }`;
+	const property = value.selection.value;
+
+	if ( ! allowedProperties.has( property ) ) {
+		return '';
+	}
+
+	return `${ property } ${ value.size }`;
 };

package/src/types/element-overlay.ts

@@ -0,0 +1,18 @@
+import type * as React from 'react';
+
+export type ElementOverlayProps = {
+	element: HTMLElement;
+	id: string;
+	isSelected: boolean;
+};
+
+export type OverlayFilterArgs = {
+	id: string;
+	element: HTMLElement;
+	isSelected: boolean;
+};
+
+export type ElementOverlayConfig = {
+	component: React.ComponentType< ElementOverlayProps >;
+	shouldRender: ( args: OverlayFilterArgs ) => boolean;
+};

package/src/utils/inline-editing-utils.ts

@@ -0,0 +1,43 @@
+import { getContainer, getElementType, type V1Element } from '@elementor/editor-elements';
+
+const WIDGET_PROPERTY_MAP: Record< string, string > = {
+	'e-heading': 'title',
+	'e-paragraph': 'paragraph',
+};
+
+const getHtmlPropertyName = ( container: V1Element | null ): string => {
+	const widgetType = container?.model?.get( 'widgetType' ) ?? container?.model?.get( 'elType' );
+
+	if ( ! widgetType ) {
+		return '';
+	}
+
+	if ( WIDGET_PROPERTY_MAP[ widgetType ] ) {
+		return WIDGET_PROPERTY_MAP[ widgetType ];
+	}
+
+	const propsSchema = getElementType( widgetType )?.propsSchema;
+
+	if ( ! propsSchema ) {
+		return '';
+	}
+
+	const entry = Object.entries( propsSchema ).find( ( [ , propType ] ) => propType.key === 'html' );
+
+	return entry?.[ 0 ] ?? '';
+};
+
+export const hasInlineEditableProperty = ( containerId: string ): boolean => {
+	const container = getContainer( containerId );
+	const widgetType = container?.model?.get( 'widgetType' ) ?? container?.model?.get( 'elType' );
+
+	if ( ! widgetType ) {
+		return false;
+	}
+
+	return widgetType in WIDGET_PROPERTY_MAP;
+};
+
+export const getInlineEditablePropertyName = ( container: V1Element | null ): string => {
+	return getHtmlPropertyName( container );
+};