@elementor/editor-canvas 0.26.0 → 3.32.0-20

package/src/style-commands/__tests__/paste-style.test.ts

@@ -64,10 +64,12 @@ describe( 'pasteStyles', () => {
 					{
 						meta: { breakpoint: null, state: null },
 						props: { a: 0, b: 1, c: 2 },
+						custom_css: null,
 					},
 					{
 						meta: { breakpoint: null, state: 'hover' },
 						props: { a: 1, b: 2 },
+						custom_css: null,
 					},
 				],
 			} ),
@@ -84,10 +86,12 @@ describe( 'pasteStyles', () => {
 							{
 								meta: { breakpoint: null, state: null },
 								props: { a: 1, c: 2 },
+								custom_css: null,
 							},
 							{
 								meta: { breakpoint: 'tablet', state: 'hover' },
 								props: { a: 3, b: 4 },
+								custom_css: null,
 							},
 						],
 					} ),
@@ -106,6 +110,7 @@ describe( 'pasteStyles', () => {
 				breakpoint: null,
 				state: null,
 			},
+			custom_css: null,
 			props: {
 				a: 1,
 				c: 2,
@@ -119,6 +124,7 @@ describe( 'pasteStyles', () => {
 				breakpoint: 'tablet',
 				state: 'hover',
 			},
+			custom_css: null,
 			props: {
 				a: 3,
 				b: 4,
@@ -138,6 +144,7 @@ describe( 'pasteStyles', () => {
 				breakpoint: null,
 				state: null,
 			},
+			custom_css: null,
 			props: {
 				a: 0,
 				b: 1,
@@ -147,6 +154,7 @@ describe( 'pasteStyles', () => {
 				{
 					meta: { breakpoint: null, state: 'hover' },
 					props: { a: 1, b: 2 },
+					custom_css: null,
 				},
 			],
 		} );
@@ -178,10 +186,12 @@ describe( 'pasteStyles', () => {
 							{
 								meta: { breakpoint: null, state: null },
 								props: { a: 0, b: 1 },
+								custom_css: null,
 							},
 							{
 								meta: { breakpoint: null, state: 'hover' },
 								props: { a: 1, b: 2 },
+								custom_css: null,
 							},
 						],
 					} ),
@@ -205,12 +215,14 @@ describe( 'pasteStyles', () => {
 				a: 0,
 				b: 1,
 			},
+			custom_css: null,
 			additionalVariants: [
 				{
 					meta: {
 						breakpoint: null,
 						state: 'hover',
 					},
+					custom_css: null,
 					props: {
 						a: 1,
 						b: 2,
@@ -250,10 +262,12 @@ describe( 'pasteStyles', () => {
 							{
 								meta: { breakpoint: null, state: null },
 								props: { a: 1, c: 2 },
+								custom_css: null,
 							},
 							{
 								meta: { breakpoint: 'tablet', state: 'hover' },
 								props: { a: 3, b: 4 },
+								custom_css: null,
 							},
 						],
 					} ),
@@ -286,10 +300,12 @@ describe( 'pasteStyles', () => {
 					{
 						meta: { breakpoint: null, state: null },
 						props: { a: 0, b: 1 },
+						custom_css: null,
 					},
 					{
 						meta: { breakpoint: null, state: 'hover' },
 						props: { a: 1, b: 2 },
+						custom_css: null,
 					},
 				],
 			} ),
@@ -306,6 +322,7 @@ describe( 'pasteStyles', () => {
 							{
 								meta: { breakpoint: null, state: null },
 								props: { a: 1, c: 2 },
+								custom_css: null,
 							},
 						],
 					} ),
@@ -315,6 +332,7 @@ describe( 'pasteStyles', () => {
 							{
 								meta: { breakpoint: null, state: null },
 								props: { a: 3, c: 4 },
+								custom_css: null,
 							},
 						],
 					} ),
@@ -330,6 +348,7 @@ describe( 'pasteStyles', () => {
 							{
 								meta: { breakpoint: null, state: null },
 								props: { a: 4, c: 5 },
+								custom_css: null,
 							},
 						],
 					} ),
@@ -352,6 +371,7 @@ describe( 'pasteStyles', () => {
 				a: 1,
 				c: 2,
 			},
+			custom_css: null,
 		} );
 
 		expect( updateElementStyle ).toHaveBeenCalledTimes( 1 );
@@ -418,10 +438,12 @@ describe( 'pasteStyles', () => {
 								{
 									meta: { breakpoint: null, state: null },
 									props: { a: 0, b: 1 },
+									custom_css: null,
 								},
 								{
 									meta: { breakpoint: null, state: 'hover' },
 									props: { a: 1, b: 2 },
+									custom_css: null,
 								},
 							],
 						} ),
@@ -442,10 +464,12 @@ describe( 'pasteStyles', () => {
 							{
 								meta: { breakpoint: null, state: null },
 								props: { a: 0, b: 1 },
+								custom_css: null,
 							},
 							{
 								meta: { breakpoint: null, state: 'hover' },
 								props: { a: 1, b: 2 },
+								custom_css: null,
 							},
 						],
 					} ),
@@ -471,6 +495,7 @@ describe( 'pasteStyles', () => {
 				a: 0,
 				b: 1,
 			},
+			custom_css: null,
 			additionalVariants: [
 				{
 					meta: {
@@ -481,6 +506,7 @@ describe( 'pasteStyles', () => {
 						a: 1,
 						b: 2,
 					},
+					custom_css: null,
 				},
 			],
 		} );
@@ -496,6 +522,7 @@ describe( 'pasteStyles', () => {
 				a: 0,
 				b: 1,
 			},
+			custom_css: null,
 		} );
 
 		expect( updateElementStyle ).toHaveBeenCalledWith( {
@@ -509,6 +536,7 @@ describe( 'pasteStyles', () => {
 				a: 0,
 				b: 1,
 			},
+			custom_css: null,
 		} );
 
 		expect( createElementStyle ).toHaveBeenCalledTimes( 1 );
@@ -533,12 +561,14 @@ describe( 'pasteStyles', () => {
 				a: 0,
 				b: 1,
 			},
+			custom_css: null,
 			additionalVariants: [
 				{
 					meta: {
 						breakpoint: null,
 						state: 'hover',
 					},
+					custom_css: null,
 					props: {
 						a: 1,
 						b: 2,

package/src/style-commands/__tests__/reset-style.test.ts

@@ -46,10 +46,12 @@ describe( 'resetStyles', () => {
 					{
 						meta: { breakpoint: null, state: null },
 						props: { a: 0, b: 1 },
+						custom_css: null,
 					},
 					{
 						meta: { breakpoint: null, state: 'hover' },
 						props: { a: 1, b: 2 },
+						custom_css: null,
 					},
 				],
 			} ),
@@ -82,6 +84,7 @@ describe( 'resetStyles', () => {
 			elementId: 'test-container',
 			label: ELEMENTS_STYLES_RESERVED_LABEL,
 			classesProp: 'classes',
+			custom_css: null,
 			meta: {
 				breakpoint: null,
 				state: null,
@@ -96,6 +99,7 @@ describe( 'resetStyles', () => {
 						breakpoint: null,
 						state: 'hover',
 					},
+					custom_css: null,
 					props: {
 						a: 1,
 						b: 2,

package/src/style-commands/undoable-actions/paste-element-style.ts

@@ -40,12 +40,13 @@ export const undoablePasteElementStyle = () =>
 					};
 
 					if ( styleId ) {
-						newStyle.variants.forEach( ( { meta, props } ) => {
+						newStyle.variants.forEach( ( { meta, props, custom_css: customCss } ) => {
 							updateElementStyle( {
 								elementId,
 								styleId,
 								meta,
 								props,
+								custom_css: customCss,
 							} );
 						} );
 					} else {

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

@@ -0,0 +1,25 @@
+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( ' ' );
+} );

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

@@ -1,5 +1,3 @@
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
-
 import { createTransformer } from '../create-transformer';
 import { type BackgroundImageTransformed } from './background-image-overlay-transformer';
 
@@ -42,8 +40,6 @@ export const backgroundOverlayTransformer = createTransformer(
 );
 
 function normalizeOverlayValues( overlays: BackgroundOverlay ): BackgroundImageTransformed[] {
-	const isVersion330Active = isExperimentActive( 'e_v_3_30' );
-
 	const mappedValues = overlays.map( ( item ) => {
 		if ( typeof item === 'string' ) {
 			return {
@@ -58,10 +54,6 @@ function normalizeOverlayValues( overlays: BackgroundOverlay ): BackgroundImageT
 		return item;
 	} );
 
-	if ( ! isVersion330Active ) {
-		return mappedValues;
-	}
-
 	return mappedValues.filter( ( item ) => item && !! item.src );
 }
 
@@ -71,11 +63,10 @@ function getValuesString(
 	defaultValue: string,
 	preventUnification: boolean = false
 ) {
-	const isVersion330Active = isExperimentActive( 'e_v_3_30' );
 	const isEmpty = items.filter( ( item ) => item?.[ prop ] ).length === 0;
 
 	if ( isEmpty ) {
-		return isVersion330Active ? defaultValue : null;
+		return defaultValue;
 	}
 
 	const formattedValues = items.map( ( item ) => item[ prop ] ?? defaultValue );

package/src/transformers/styles/create-combine-array-transformer.ts

@@ -1,5 +1,7 @@
 import { createTransformer } from '../create-transformer';
 
 export const createCombineArrayTransformer = ( delimiter: string ) => {
-	return createTransformer( ( value: Array< string | number > ) => value.filter( Boolean ).join( delimiter ) );
+	return createTransformer( ( value: Array< string | number > ) =>
+		value?.length ? value.filter( Boolean ).join( delimiter ) : null
+	);
 };

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

@@ -1,23 +1,26 @@
-import { type FilterItemPropValue } from '@elementor/editor-props';
-
 import { createTransformer } from '../create-transformer';
 
-export const filterTransformer = createTransformer( ( filterValues: FilterItemPropValue[ 'value' ][] ) => {
+type DropShadowArgs = { xAxis: string; yAxis: string; blur: string; color: string };
+
+type FilterValue = { func: string; args: string | DropShadowArgs };
+
+export const filterTransformer = createTransformer( ( filterValues: FilterValue[] ) => {
 	if ( filterValues?.length < 1 ) {
 		return null;
 	}
 
-	return filterValues.map( mapToFilterFunctionString ).join( ' ' );
+	return filterValues.filter( Boolean ).map( mapToFilterFunctionString ).join( ' ' );
 } );
 
-const mapToFilterFunctionString = ( value: FilterItemPropValue[ 'value' ] ): string => {
-	if ( 'radius' in value ) {
-		return `blur(${ value.radius })`;
+const mapToFilterFunctionString = ( value: FilterValue ): string => {
+	if ( value.func === 'drop-shadow' ) {
+		const { xAxis, yAxis, blur, color } = value.args as DropShadowArgs;
+		return `drop-shadow(${ xAxis || '0px' } ${ yAxis || '0px' } ${ blur || '10px' } ${ color || 'transparent' })`;
 	}
 
-	if ( 'amount' in value ) {
-		return `brightness(${ value.amount })`;
+	if ( ! value.func || ! value.args ) {
+		return '';
 	}
 
-	return '';
+	return `${ value.func }(${ value.args })`;
 };

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

@@ -0,0 +1,55 @@
+import { createTransformer } from '../create-transformer';
+
+type Flex = {
+	flexGrow?: number | null;
+	flexShrink?: number | null;
+	flexBasis?: { size: number; unit: string } | string | null;
+};
+
+export const flexTransformer = createTransformer( ( value: Flex ) => {
+	const grow = value.flexGrow;
+	const shrink = value.flexShrink;
+	const basis = value.flexBasis;
+
+	const hasGrow = grow !== undefined && grow !== null;
+	const hasShrink = shrink !== undefined && shrink !== null;
+	const hasBasis = basis !== undefined && basis !== null;
+
+	if ( ! hasGrow && ! hasShrink && ! hasBasis ) {
+		return null;
+	}
+
+	if ( hasGrow && hasShrink && hasBasis ) {
+		return `${ grow } ${ shrink } ${
+			typeof basis === 'object' && basis.size !== undefined ? `${ basis.size }${ basis.unit || '' }` : basis
+		}`;
+	}
+
+	if ( hasGrow && hasShrink && ! hasBasis ) {
+		return `${ grow } ${ shrink }`;
+	}
+	if ( hasGrow && ! hasShrink && hasBasis ) {
+		return `${ grow } 1 ${
+			typeof basis === 'object' && basis.size !== undefined ? `${ basis.size }${ basis.unit || '' }` : basis
+		}`;
+	}
+	if ( ! hasGrow && hasShrink && hasBasis ) {
+		return `0 ${ shrink } ${
+			typeof basis === 'object' && basis.size !== undefined ? `${ basis.size }${ basis.unit || '' }` : basis
+		}`;
+	}
+
+	if ( hasGrow && ! hasShrink && ! hasBasis ) {
+		return `${ grow }`;
+	}
+	if ( ! hasGrow && hasShrink && ! hasBasis ) {
+		return `0 ${ shrink }`;
+	}
+	if ( ! hasGrow && ! hasShrink && hasBasis ) {
+		return `0 1 ${
+			typeof basis === 'object' && basis.size !== undefined ? `${ basis.size }${ basis.unit || '' }` : basis
+		}`;
+	}
+
+	return null;
+} );

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

@@ -6,6 +6,8 @@ type TransformMove = {
 	z: string;
 };
 
+const defaultMove = '0px';
+
 export const transformMoveTransformer = createTransformer( ( value: TransformMove ) => {
-	return `translate3d(${ value.x }, ${ value.y }, ${ value.z })`;
+	return `translate3d(${ value.x ?? defaultMove }, ${ value.y ?? defaultMove }, ${ value.z ?? defaultMove })`;
 } );

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

@@ -0,0 +1,19 @@
+import { createTransformer } from '../create-transformer';
+
+type TransformRotate = {
+	x: string;
+	y: string;
+	z: string;
+};
+
+const defaultRotate = '0deg';
+
+export const transformRotateTransformer = createTransformer( ( value: TransformRotate ) => {
+	const transforms = [
+		`rotateX(${ value?.x ?? defaultRotate })`,
+		`rotateY(${ value?.y ?? defaultRotate })`,
+		`rotateZ(${ value?.z ?? defaultRotate })`,
+	];
+
+	return transforms.join( ' ' );
+} );

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

@@ -0,0 +1,11 @@
+import { createTransformer } from '../create-transformer';
+
+type TransformScale = {
+	x: string;
+	y: string;
+	z: string;
+};
+
+export const transformScaleTransformer = createTransformer( ( value: TransformScale ) => {
+	return `scale3d(${ value.x ?? 1 }, ${ value.y ?? 1 }, ${ value.z ?? 1 })`;
+} );

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

@@ -0,0 +1,15 @@
+import { createTransformer } from '../create-transformer';
+
+type TransformSkew = {
+	x: string;
+	y: string;
+};
+
+const defaultSkew = '0deg';
+
+export const transformSkewTransformer = createTransformer( ( value: TransformSkew ) => {
+	const x = value?.x ?? defaultSkew;
+	const y = value?.y ?? defaultSkew;
+
+	return `skew(${ x }, ${ y })`;
+} );

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

@@ -0,0 +1,25 @@
+import { createTransformer } from '../create-transformer';
+
+type TransitionValue = {
+	selection: {
+		key: string;
+		value: string;
+	};
+	size: string;
+};
+
+export const transitionTransformer = createTransformer( ( transitionValues: TransitionValue[] ) => {
+	if ( transitionValues?.length < 1 ) {
+		return null;
+	}
+
+	return transitionValues.filter( Boolean ).map( mapToTransitionString ).join( ', ' );
+} );
+
+const mapToTransitionString = ( value: TransitionValue ): string => {
+	if ( ! value.selection || ! value.size ) {
+		return '';
+	}
+
+	return `${ value.selection.value } ${ value.size }`;
+};

package/.turbo/turbo-build.log

@@ -1,22 +0,0 @@
-
-> @elementor/editor-canvas@0.26.0 build
-> tsup --config=../../tsup.build.ts
-
-CLI Building entry: src/index.ts
-CLI Using tsconfig: ../../../tsconfig.json
-CLI tsup v8.5.0
-CLI Using tsup config: /home/runner/work/elementor-packages/elementor-packages/tsup.build.ts
-CLI Target: esnext
-CLI Cleaning output folder
-ESM Build start
-CJS Build start
-CJS dist/index.js     48.17 KB
-CJS dist/index.js.map 95.71 KB
-CJS ⚡️ Build success in 292ms
-ESM dist/index.mjs     44.83 KB
-ESM dist/index.mjs.map 95.49 KB
-ESM ⚡️ Build success in 293ms
-DTS Build start
-DTS ⚡️ Build success in 15187ms
-DTS dist/index.d.mts 2.42 KB
-DTS dist/index.d.ts  2.42 KB