@elementor/editor-canvas 0.1.0 → 0.3.0

package/src/styles-renderer/transformers/__tests__/shadow-transformer.test.ts

@@ -0,0 +1,127 @@
+import shadowTransformer from '../shadow-transformer';
+
+describe( 'box-shadow-transformer', () => {
+	const validShadow = {
+		position: 'inset',
+		hOffset: {
+			$$type: 'size',
+			value: { unit: 'px', size: 1 },
+		},
+		vOffset: {
+			$$type: 'size',
+			value: { unit: 'px', size: 2 },
+		},
+		blur: {
+			$$type: 'size',
+			value: { unit: 'px', size: 3 },
+		},
+		spread: {
+			$$type: 'size',
+			value: { unit: 'px', size: 4 },
+		},
+		color: {
+			$$type: 'color',
+			value: 'rgba(0, 0, 0, 1)',
+		},
+	};
+
+	it.each( [ 'position', 'hOffset', 'vOffset', 'blur', 'spread', 'color' ] )(
+		'should return undefined if %s is missing',
+		( prop ) => {
+			// Arrange.
+			const transform = jest.fn( ( item ) => item?.value.size ?? item?.value );
+			const { [ prop as never ]: _, ...shadowWithoutProp } = validShadow;
+			const data = {
+				$$type: 'shadow',
+				value: {
+					...shadowWithoutProp,
+					'invalid-key': undefined,
+				},
+			};
+
+			// Act.
+			const result = shadowTransformer( data, { transform } );
+
+			// Assert.
+			expect( result ).toBe( undefined );
+			expect( transform ).not.toHaveBeenCalled();
+		}
+	);
+
+	it( 'should transform box-shadow to a string position is null', () => {
+		// Arrange.
+
+		const transform = jest.fn( ( item ) => item?.value.size ?? item?.value );
+		const data = {
+			$$type: 'shadow',
+			value: {
+				position: null,
+				hOffset: {
+					$$type: 'size',
+					value: { unit: 'px', size: 1 },
+				},
+				vOffset: {
+					$$type: 'size',
+					value: { unit: 'px', size: 2 },
+				},
+				blur: {
+					$$type: 'size',
+					value: { unit: 'px', size: 3 },
+				},
+				spread: {
+					$$type: 'size',
+					value: { unit: 'px', size: 4 },
+				},
+				color: {
+					$$type: 'color',
+					value: 'rgba(0, 0, 0, 1)',
+				},
+			},
+		};
+
+		// Act.
+		const result = shadowTransformer( data, { transform } );
+
+		// Assert.
+		expect( result ).toBe( '1 2 3 4 rgba(0, 0, 0, 1)' );
+		expect( transform ).toHaveBeenCalledTimes( 5 );
+	} );
+
+	it( 'should transform box-shadow to a string if all the props exist', () => {
+		// Arrange.
+		const transform = jest.fn( ( item ) => item?.value.size ?? item?.value );
+		const data = {
+			$$type: 'shadow',
+			value: {
+				position: 'inset',
+				hOffset: {
+					$$type: 'size',
+					value: { unit: 'px', size: 1 },
+				},
+				vOffset: {
+					$$type: 'size',
+					value: { unit: 'px', size: 2 },
+				},
+				blur: {
+					$$type: 'size',
+					value: { unit: 'px', size: 3 },
+				},
+				spread: {
+					$$type: 'size',
+					value: { unit: 'px', size: 4 },
+				},
+				color: {
+					$$type: 'color',
+					value: 'rgba(0, 0, 0, 1)',
+				},
+			},
+		};
+
+		// Act.
+		const result = shadowTransformer( data, { transform } );
+
+		// Assert.
+		expect( result ).toBe( '1 2 3 4 rgba(0, 0, 0, 1) inset' );
+		expect( transform ).toHaveBeenCalledTimes( 5 );
+	} );
+} );

package/src/styles-renderer/transformers/__tests__/size-transformer.test.ts

@@ -0,0 +1,37 @@
+import sizeTransformer from '../size-transformer';
+
+describe( 'size-transformer', () => {
+	it( 'should return undefined if invalid', () => {
+		// Arrange.
+		const transform = jest.fn( ( value ) => value );
+		const props = [ '20px', { unit: 'px' }, { size: 20 } ].map( ( array ) => ( { $$type: 'array', array } ) );
+
+		// Act.
+		const results = props.map( ( prop ) => sizeTransformer( prop, { transform } ) );
+
+		// Assert.
+		results.forEach( ( result ) => {
+			expect( result ).toBe( undefined );
+		} );
+		expect( transform ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should transform a valid transformable size prop to a string', () => {
+		// Arrange.
+		const transform = jest.fn();
+		const prop = {
+			$$type: 'size',
+			value: {
+				unit: 'px',
+				size: 20,
+			},
+		};
+
+		// Act.
+		const result = sizeTransformer( prop, { transform } );
+
+		// Assert.
+		expect( result ).toBe( '20px' );
+		expect( transform ).not.toHaveBeenCalled();
+	} );
+} );

package/src/styles-renderer/transformers/__tests__/stroke-transformer.test.ts

@@ -0,0 +1,59 @@
+import strokeTransformer from '../stroke-transformer';
+
+describe( 'stroke-transformer', () => {
+	it( 'should return undefined if invalid', () => {
+		// Arrange.
+		const transform = jest.fn( ( item ) => item );
+		const initialData = {
+			$$type: 'stroke',
+			value: {
+				color: {
+					$$type: 'color',
+					value: 'red',
+				},
+				width: {
+					$$type: 'size',
+					value: {
+						unit: 'px',
+					},
+				},
+				'invalid-key': null,
+			},
+		};
+
+		// Act.
+		const result = strokeTransformer( initialData, { transform } );
+
+		expect( result ).toBe( undefined );
+		expect( transform ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should transform valid stroke to text-stroke string', () => {
+		const transform = jest.fn( ( item ) =>
+			item?.value.size ? `${ item.value.size }${ item.value.unit }` : item?.value
+		);
+
+		const prop = {
+			$$type: 'stroke',
+			value: {
+				color: {
+					$$type: 'color',
+					value: '#ff0000',
+				},
+				width: {
+					$$type: 'size',
+					value: {
+						unit: 'px',
+						size: 5,
+					},
+				},
+			},
+		};
+
+		// Act.
+		const result = strokeTransformer( prop, { transform } );
+
+		// Assert.
+		expect( result ).toBe( '5px #ff0000' );
+	} );
+} );

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

@@ -0,0 +1,13 @@
+import { colorGradientPropTypeUtil } from '@elementor/editor-props';
+
+import { type Transformer } from '../types';
+
+const backgroundOverlayTransformer: Transformer = ( propValue, { transform } ) => {
+	if ( colorGradientPropTypeUtil.isValid( propValue ) ) {
+		return `linear-gradient( ${ [ transform( propValue.value.color ) ] }, ${ [
+			transform( propValue.value.color ),
+		] } )`;
+	}
+};
+
+export default backgroundOverlayTransformer;

package/src/styles-renderer/transformers/border-radius-transformer.ts

@@ -0,0 +1,20 @@
+import { borderRadiusPropTypeUtil } from '@elementor/editor-props';
+
+import { type Transformer } from '../types';
+
+const borderRadiusTransformer: Transformer = ( propValue, { transform } ) => {
+	if ( borderRadiusPropTypeUtil.isValid( propValue ) ) {
+		const {
+			'top-left': topLeft,
+			'top-right': topRight,
+			'bottom-right': bottomRight,
+			'bottom-left': bottomLeft,
+		} = propValue.value || {};
+
+		return `${ transform( topLeft ) || 'unset' } ${ transform( topRight ) || 'unset' } ${
+			transform( bottomRight ) || 'unset'
+		} ${ transform( bottomLeft ) || 'unset' }`;
+	}
+};
+
+export default borderRadiusTransformer;

package/src/styles-renderer/transformers/border-width-transformer.ts

@@ -0,0 +1,15 @@
+import { borderWidthPropTypeUtil } from '@elementor/editor-props';
+
+import { type Transformer } from '../types';
+
+const borderWidthTransformer: Transformer = ( propValue, { transform } ) => {
+	if ( borderWidthPropTypeUtil.isValid( propValue ) ) {
+		const { top, right, bottom, left } = propValue.value || {};
+
+		return `${ transform( top ) || 'unset' } ${ transform( right ) || 'unset' } ${
+			transform( bottom ) || 'unset'
+		} ${ transform( left ) || 'unset' }`;
+	}
+};
+
+export default borderWidthTransformer;

package/src/styles-renderer/transformers/color-transformer.ts

@@ -0,0 +1,11 @@
+import { colorPropTypeUtil } from '@elementor/editor-props';
+
+import { type Transformer } from '../types';
+
+const colorTransformer: Transformer = ( propValue ) => {
+	if ( colorPropTypeUtil.isValid( propValue ) ) {
+		return propValue.value;
+	}
+};
+
+export default colorTransformer;

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

@@ -0,0 +1,20 @@
+import { z } from '@elementor/schema';
+
+import { type Transformer } from '../types';
+
+export const schema = z.object( {
+	$$type: z.string(),
+	value: z.array( z.any() ),
+} );
+
+const createCombineArrayTransformer =
+	( delimiter: string ): Transformer =>
+	( propValue, { transform } ) => {
+		const { success, data } = schema.safeParse( propValue );
+
+		if ( success ) {
+			return data.value.map( ( item ) => transform( item ) ).join( delimiter );
+		}
+	};
+
+export default createCombineArrayTransformer;

package/src/styles-renderer/transformers/index.ts

@@ -0,0 +1,26 @@
+import { default as backgroundOverlay } from './background-overlay-transformer';
+import { default as borderRadius } from './border-radius-transformer';
+import { default as borderWidth } from './border-width-transformer';
+import { default as color } from './color-transformer';
+import { default as createCombineArrayTransformer } from './create-combine-array-transformer';
+import { default as linkedDimensions } from './linked-dimensions-transformer';
+import { default as number } from './number-transformer';
+import { default as shadow } from './shadow-transformer';
+import { default as size } from './size-transformer';
+import { default as string } from './string-transformer';
+import { default as stroke } from './stroke-transformer';
+
+export default {
+	color,
+	number,
+	size,
+	shadow,
+	string,
+	stroke,
+	'border-radius': borderRadius,
+	'border-width': borderWidth,
+	'box-shadow': createCombineArrayTransformer( ', ' ),
+	'background-image': createCombineArrayTransformer( ', ' ),
+	'linked-dimensions': linkedDimensions,
+	'background-overlay': backgroundOverlay,
+};

package/src/styles-renderer/transformers/linked-dimensions-transformer.ts

@@ -0,0 +1,15 @@
+import { linkedDimensionsPropTypeUtil } from '@elementor/editor-props';
+
+import { type Transformer } from '../types';
+
+const linkedDimensionsTransformer: Transformer = ( propValue, { transform } ) => {
+	if ( linkedDimensionsPropTypeUtil.isValid( propValue ) ) {
+		const { top, right, bottom, left } = propValue.value || {};
+
+		return `${ transform( top ) || 'unset' } ${ transform( right ) || 'unset' } ${
+			transform( bottom ) || 'unset'
+		} ${ transform( left ) || 'unset' }`;
+	}
+};
+
+export default linkedDimensionsTransformer;

package/src/styles-renderer/transformers/number-transformer.ts

@@ -0,0 +1,11 @@
+import { numberPropTypeUtil } from '@elementor/editor-props';
+
+import { type Transformer } from '../types';
+
+const numberTransformer: Transformer = ( propValue ) => {
+	if ( numberPropTypeUtil.isValid( propValue ) ) {
+		return propValue.value;
+	}
+};
+
+export default numberTransformer;

package/src/styles-renderer/transformers/shadow-transformer.ts

@@ -0,0 +1,22 @@
+import { shadowPropTypeUtil } from '@elementor/editor-props';
+
+import { type Transformer } from '../types';
+
+const shadowTransformer: Transformer = ( propValue, { transform } ) => {
+	if ( shadowPropTypeUtil.isValid( propValue ) ) {
+		const { position, hOffset, vOffset, blur, spread, color } = propValue.value || {};
+
+		return [
+			transform( hOffset ),
+			transform( vOffset ),
+			transform( blur ),
+			transform( spread ),
+			transform( color ),
+			position,
+		]
+			.filter( Boolean )
+			.join( ' ' );
+	}
+};
+
+export default shadowTransformer;

package/src/styles-renderer/transformers/size-transformer.ts

@@ -0,0 +1,11 @@
+import { sizePropTypeUtil } from '@elementor/editor-props';
+
+import { type Transformer } from '../types';
+
+const sizeTransformer: Transformer = ( propValue ) => {
+	if ( sizePropTypeUtil.isValid( propValue ) ) {
+		return propValue.value && propValue.value.size + propValue.value.unit;
+	}
+};
+
+export default sizeTransformer;

package/src/styles-renderer/transformers/string-transformer.ts

@@ -0,0 +1,11 @@
+import { stringPropTypeUtil } from '@elementor/editor-props';
+
+import { type Transformer } from '../types';
+
+const stringTransformer: Transformer = ( propValue ) => {
+	if ( stringPropTypeUtil.isValid( propValue ) ) {
+		return propValue.value;
+	}
+};
+
+export default stringTransformer;

package/src/styles-renderer/transformers/stroke-transformer.ts

@@ -0,0 +1,11 @@
+import { strokePropTypeUtil } from '@elementor/editor-props';
+
+import { type Transformer } from '../types';
+
+const strokeTransformer: Transformer = ( propValue, { transform } ) => {
+	if ( strokePropTypeUtil.isValid( propValue ) ) {
+		return `${ transform( propValue.value?.width ) } ${ transform( propValue.value?.color ) }`;
+	}
+};
+
+export default strokeTransformer;

package/src/styles-renderer/types.ts

@@ -0,0 +1,9 @@
+import { type PropValue } from '@elementor/editor-props';
+
+type TransformerOptions = {
+	transform: ( value: PropValue ) => PropValue;
+};
+
+export type Transformer = ( value: PropValue, options: TransformerOptions ) => PropValue;
+
+export type TransformersMap = Record< string, Transformer >;

package/src/sync/enqueue-font.ts

@@ -0,0 +1,7 @@
+import { type CanvasExtendedWindow, type EnqueueFont } from './types';
+
+export const enqueueFont: EnqueueFont = ( fontFamily, context = 'preview' ) => {
+	const extendedWindow = window as unknown as CanvasExtendedWindow;
+
+	return extendedWindow.elementor?.helpers?.enqueueFont?.( fontFamily, context ) ?? null;
+};

package/src/sync/get-canvas-iframe-body.ts

@@ -0,0 +1,7 @@
+import type { CanvasExtendedWindow } from './types';
+
+export function getCanvasIframeBody() {
+	const extendedWindow = window as unknown as CanvasExtendedWindow;
+
+	return extendedWindow.elementor?.$preview?.[ 0 ]?.contentDocument?.body;
+}

package/src/sync/types.ts

@@ -0,0 +1,10 @@
+export type EnqueueFont = ( fontFamily: string, context?: 'preview' | 'editor' ) => void;
+
+export type CanvasExtendedWindow = Window & {
+	elementor?: {
+		$preview?: [ HTMLIFrameElement ];
+		helpers?: {
+			enqueueFont?: EnqueueFont;
+		};
+	};
+};