@elementor/editor-canvas 0.6.1 → 0.7.1

package/src/styles-renderer/errors.ts

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

package/src/styles-renderer/render.ts

@@ -1,9 +1,13 @@
 import { type Props } from '@elementor/editor-props';
-import { type Breakpoint, type BreakpointId, type BreakpointsMap } from '@elementor/editor-responsive';
-import { type StyleDefinition, type StyleVariant } from '@elementor/editor-styles';
-import { ensureError } from '@elementor/utils';
-
-import { getStylesSchema } from './get-styles-schema';
+import { type Breakpoint, type BreakpointsMap } from '@elementor/editor-responsive';
+import {
+	getStylesSchema,
+	type StyleDefinition,
+	type StyleDefinitionState,
+	type StyleDefinitionType,
+} from '@elementor/editor-styles';
+
+import { UnknownStyleTypeError } from './errors';
 import { resolve } from './resolve';
 import { type TransformersMap } from './types';
 
@@ -11,81 +15,87 @@ type RenderParams = {
 	transformers: TransformersMap;
 	styles: StyleDefinition[];
 	breakpoints: BreakpointsMap;
+	selectorPrefix?: string;
+	signal?: AbortSignal;
 };
 
-export default function render( { transformers, styles, breakpoints }: RenderParams ) {
-	const cssStyle: string[] = [];
-
-	try {
-		styles.forEach( ( styleDef ) => {
-			const style = renderStyle( styleDef, transformers, breakpoints );
+const SELECTORS_MAP: Record< StyleDefinitionType, string > = {
+	class: '.',
+};
 
-			cssStyle.push( wrapWithStyleElement( styleDef.id, style ) );
+export default async function render( {
+	transformers,
+	styles,
+	breakpoints,
+	selectorPrefix = '',
+	signal,
+}: RenderParams ) {
+	const stylesCssPromises = styles.map( async ( style ) => {
+		const variantCssPromises = Object.values( style.variants ).map( async ( variant ) => {
+			const css = await propsToCss( variant.props, transformers, signal );
+
+			return createStyleWrapper()
+				.forStyle( style )
+				.withPrefix( selectorPrefix )
+				.withState( variant.meta.state )
+				.withMediaQuery( variant.meta.breakpoint ? breakpoints[ variant.meta.breakpoint ] : null )
+				.wrap( css );
 		} );
-	} catch ( error: unknown ) {
-		// eslint-disable-next-line no-console
-		console.error( `Cannot render style': ${ ensureError( error ).message }` );
-	}
 
-	return cssStyle.join( '' );
-}
+		const variantsCss = await Promise.all( variantCssPromises );
 
-function renderStyle( style: StyleDefinition, transformers: TransformersMap, breakpoints: BreakpointsMap ) {
-	const baseSelector = getBaseSelector( style );
+		return wrapCssWithStyleElement( style.id, variantsCss.join( '' ) );
+	} );
 
-	if ( ! baseSelector ) {
-		return '';
-	}
+	const stylesCss = await Promise.all( stylesCssPromises );
 
-	const stylesheet: string[] = [];
+	return stylesCss.join( '' );
+}
 
-	Object.values( style.variants ).forEach( ( variant ) => {
-		const styleDeclaration = variantToStyleDeclaration( baseSelector, variant, transformers, breakpoints );
+function createStyleWrapper( value: string = '', wrapper?: ( css: string ) => string ) {
+	return {
+		forStyle: ( { id, type }: StyleDefinition ) => {
+			const symbol = SELECTORS_MAP[ type ];
 
-		if ( styleDeclaration ) {
-			stylesheet.push( styleDeclaration );
-		}
-	} );
+			if ( ! symbol ) {
+				throw new UnknownStyleTypeError( { context: { type } } );
+			}
 
-	return stylesheet.join( '' );
-}
+			return createStyleWrapper( `${ value }${ symbol }${ id }`, wrapper );
+		},
 
-function getBaseSelector( styleDef: StyleDefinition ) {
-	const map = {
-		class: '.',
-	};
+		withPrefix: ( prefix: string ) =>
+			createStyleWrapper( [ prefix, value ].filter( Boolean ).join( ' ' ), wrapper ),
 
-	return `${ map[ styleDef.type ] }${ styleDef.id }`;
-}
+		withState: ( state: StyleDefinitionState ) =>
+			createStyleWrapper( state ? `${ value }:${ state }` : value, wrapper ),
 
-function variantToStyleDeclaration(
-	baseSelector: string,
-	variant: StyleVariant,
-	transformers: TransformersMap,
-	breakpoints: BreakpointsMap
-) {
-	const css = propsToCss( variant.props, transformers );
+		withMediaQuery: ( breakpoint: Breakpoint | null ) => {
+			if ( ! breakpoint?.type ) {
+				return createStyleWrapper( value, wrapper );
+			}
 
-	if ( ! css ) {
-		return '';
-	}
+			const size = `${ breakpoint.type }:${ breakpoint.width }px`;
 
-	const state = variant.meta.state ? `:${ variant.meta.state }` : '';
-	const selector = `${ baseSelector }${ state }`;
+			return createStyleWrapper( value, ( css ) => `@media(${ size }){${ css }}` );
+		},
 
-	let styleDeclaration = `${ selector }{${ css }}`;
+		wrap: ( css: string ) => {
+			const res = `${ value }{${ css }}`;
 
-	if ( variant.meta.breakpoint ) {
-		styleDeclaration = wrapWithMediaQuery( breakpoints, variant.meta.breakpoint, styleDeclaration );
-	}
+			if ( ! wrapper ) {
+				return res;
+			}
 
-	return styleDeclaration;
+			return wrapper( res );
+		},
+	};
 }
 
-function propsToCss( props: Props, transformers: TransformersMap ): string {
+async function propsToCss( props: Props, transformers: TransformersMap, signal?: AbortSignal ) {
 	const schema = getStylesSchema();
 
-	const transformed = resolve( { props, schema, transformers } );
+	const transformed = await resolve( { props, schema, transformers, signal } );
 
 	return Object.entries( transformed )
 		.reduce< string[] >( ( acc, [ propName, propValue ] ) => {
@@ -96,15 +106,6 @@ function propsToCss( props: Props, transformers: TransformersMap ): string {
 		.join( '' );
 }
 
-function wrapWithMediaQuery( breakpoints: BreakpointsMap, breakpoint: BreakpointId, css: string ) {
-	const size = getBreakpointSize( breakpoints[ breakpoint ] );
-	return size ? `@media(${ size }){${ css }}` : css;
-}
-
-function getBreakpointSize( breakpoint: Breakpoint ) {
-	return breakpoint.type ? `${ breakpoint.type }:${ breakpoint.width }px` : null;
-}
-
-function wrapWithStyleElement( id: string, content: string ) {
-	return `<style data-style-id="${ id }">${ content }</style>`;
+function wrapCssWithStyleElement( id: string, css: string ) {
+	return `<style data-style-id="${ id }">${ css }</style>`;
 }

package/src/styles-renderer/resolve.ts

@@ -10,38 +10,39 @@ type ResolveArgs = {
 	props: Props;
 	schema: PropsSchema;
 	transformers: TransformersMap;
+	signal?: AbortSignal;
 };
 
-export function resolve( { props, schema, transformers }: ResolveArgs ) {
-	const resolved: Props = {};
+export async function resolve( { props, schema, transformers, signal }: ResolveArgs ) {
+	const promises = Promise.all(
+		Object.entries( schema ).map( async ( [ propKey, propType ] ) => {
+			const value = props[ propKey ] ?? propType.default;
 
-	Object.entries( schema ).forEach( ( [ key, propType ] ) => {
-		const value = props[ key ] ?? propType.default;
+			const transformed = await transform( value, propKey, propType, transformers, 0, signal );
 
-		const transformed = transform( value, key, propType, transformers );
+			if ( transformed === null ) {
+				return;
+			}
 
-		if ( transformed === null ) {
-			return;
-		}
-
-		if ( isMultiProps( transformed ) ) {
-			Object.assign( resolved, getMultiPropsValue( transformed ) );
-			return;
-		}
+			if ( isMultiProps( transformed ) ) {
+				return getMultiPropsValue( transformed );
+			}
 
-		resolved[ key ] = transformed;
-	} );
+			return { [ propKey ]: transformed };
+		} )
+	);
 
-	return resolved;
+	return Object.assign( {}, ...( await promises ).filter( Boolean ) );
 }
 
-function transform(
+async function transform(
 	value: PropValue,
 	propKey: PropKey,
 	propType: PropType,
 	transformers: TransformersMap,
-	depth: number = 0
-) {
+	depth: number = 0,
+	signal?: AbortSignal
+): Promise< unknown > {
 	if ( ! value && value !== 0 ) {
 		return null;
 	}
@@ -70,16 +71,19 @@ function transform(
 	let resolvedValue = value.value;
 
 	if ( propType.kind === 'object' ) {
-		resolvedValue = resolve( {
+		resolvedValue = await resolve( {
 			transformers,
 			props: resolvedValue,
 			schema: propType.shape,
+			signal,
 		} );
 	}
 
 	if ( propType.kind === 'array' ) {
-		resolvedValue = resolvedValue.map( ( item: PropValue ) =>
-			transform( item, propKey, propType.item_prop_type, transformers, depth )
+		resolvedValue = await Promise.all(
+			resolvedValue.map( ( item: PropValue ) =>
+				transform( item, propKey, propType.item_prop_type, transformers, depth, signal )
+			)
 		);
 	}
 
@@ -90,9 +94,9 @@ function transform(
 	}
 
 	try {
-		const transformed = transformer( resolvedValue, propKey );
+		const transformed = await transformer( resolvedValue, { key: propKey, signal } );
 
-		return transform( transformed, propKey, propType, transformers, depth + 1 );
+		return transform( transformed, propKey, propType, transformers, depth + 1, signal );
 	} catch {
 		return null;
 	}

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

@@ -2,10 +2,30 @@ import { type BackgroundImageOverlayPropValue } from '@elementor/editor-props';
 
 import { type Transformer } from '../types';
 
-export const mockBackgroundImageUrl = 'https://bit.ly/2rlzaXi';
+export const defaultPositionValue = '0% 0%';
 
-const backgroundImageOverlayTransformer: Transformer< BackgroundImageOverlayPropValue > = () => {
-	return `url("${ mockBackgroundImageUrl }")`;
+const backgroundImageOverlayTransformer: Transformer< BackgroundImageOverlayPropValue[ 'value' ] > = ( value ) => {
+	const { 'image-src': imageSrc, size = null, position = null, repeat = null, attachment = null } = value;
+
+	let resultBackgroundStyle = imageSrc;
+
+	if ( repeat ) {
+		resultBackgroundStyle += ` ${ repeat }`;
+	}
+
+	if ( attachment ) {
+		resultBackgroundStyle += ` ${ attachment }`;
+	}
+
+	if ( position && ! size ) {
+		resultBackgroundStyle += ` ${ position }`;
+	}
+
+	if ( size ) {
+		resultBackgroundStyle += ` ${ position || defaultPositionValue } / ${ size }`;
+	}
+
+	return resultBackgroundStyle;
 };
 
 export default backgroundImageOverlayTransformer;

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

@@ -5,7 +5,7 @@ import { type Transformer } from '../types';
 
 const validKeys = [ 'top', 'right', 'bottom', 'left' ];
 
-const dimensions: Transformer< DimensionsPropValue[ 'value' ] > = ( value, key ) => {
+const dimensions: Transformer< DimensionsPropValue[ 'value' ] > = ( value, { key } ) => {
 	const parsed = Object.entries( value ).reduce< Props >( ( acc, [ dimensionKey, dimensionValue ] ) => {
 		if ( dimensionValue && validKeys.includes( dimensionKey ) ) {
 			acc[ `${ key }-${ dimensionKey }` ] = dimensionValue;

package/src/styles-renderer/transformers/image-attachment.ts

@@ -0,0 +1,14 @@
+import { type ImageSrcPropValue } from '@elementor/editor-props';
+import { getMediaAttachment } from '@elementor/wp-media';
+
+import { type Transformer } from '../types';
+
+export const imageAttachmentTransformer: Transformer< ImageSrcPropValue[ 'value' ][ 'id' ] > = async ( value ) => {
+	const attachment = await getMediaAttachment( { id: value } );
+
+	if ( ! attachment ) {
+		return null;
+	}
+
+	return attachment.url;
+};

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

@@ -0,0 +1,11 @@
+import { type ImageSrcPropValue } from '@elementor/editor-props';
+
+import { type Transformer } from '../types';
+
+export const imageSrcTransformer: Transformer< ImageSrcPropValue[ 'value' ] > = ( value ) => {
+	const url = value.id ?? value.url?.value;
+
+	if ( url ) {
+		return `url(${ url })`;
+	}
+};

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

@@ -6,7 +6,9 @@ import { default as createCombineArrayTransformer } from './create-combine-array
 import createCornerSizesTransformer from './create-corner-sizes-transformer';
 import createEdgeSizesTransformer from './create-edge-sizes-transformer';
 import { default as dimensions } from './dimensions';
-import { default as gap } from './gap-transformer';
+import { imageAttachmentTransformer } from './image-attachment';
+import { imageSrcTransformer } from './image-src';
+import { default as layoutDirection } from './layout-direction-transformer';
 import { primitiveTransformer } from './primitive-transformer';
 import { default as shadow } from './shadow-transformer';
 import { default as size } from './size-transformer';
@@ -16,7 +18,6 @@ export default {
 	size,
 	shadow,
 	stroke,
-	gap,
 	background,
 
 	color: primitiveTransformer,
@@ -32,4 +33,9 @@ export default {
 
 	'border-width': createEdgeSizesTransformer( ( edgeKey ) => `border-${ edgeKey }-width` ),
 	'border-radius': createCornerSizesTransformer( ( cornerKey ) => `border-${ cornerKey }-radius` ),
+
+	'image-attachment-id': imageAttachmentTransformer,
+	'image-src': imageSrcTransformer,
+
+	'layout-direction': layoutDirection,
 } satisfies TransformersMap;

package/src/styles-renderer/transformers/{gap-transformer.ts → layout-direction-transformer.ts}

@@ -1,11 +1,11 @@
-import { type GapPropValue, type Props } from '@elementor/editor-props';
+import { type LayoutDirectionPropValue, type Props } from '@elementor/editor-props';
 
 import { createMultiPropsValue } from '../multi-props';
 import { type Transformer } from '../types';
 
 const validKeys = [ 'row', 'column' ];
 
-const gapTransformer: Transformer< GapPropValue[ 'value' ] > = ( value, key ) => {
+const layoutDirectionTransformer: Transformer< LayoutDirectionPropValue[ 'value' ] > = ( value, { key } ) => {
 	const parsed = Object.entries( value ).reduce< Props >( ( acc, [ dimensionKey, dimensionValue ] ) => {
 		if ( dimensionValue && validKeys.includes( dimensionKey ) ) {
 			acc[ `${ dimensionKey }-${ key }` ] = dimensionValue;
@@ -17,4 +17,4 @@ const gapTransformer: Transformer< GapPropValue[ 'value' ] > = ( value, key ) =>
 	return createMultiPropsValue( parsed );
 };
 
-export default gapTransformer;
+export default layoutDirectionTransformer;

package/src/styles-renderer/types.ts

@@ -1,6 +1,16 @@
 import { type PropValue } from '@elementor/editor-props';
 
-export type Transformer< TValue extends PropValue > = ( value: TValue, key: string ) => PropValue;
+type TransformerOptions = {
+	key: string;
+	signal?: AbortSignal;
+};
+
+type MaybePromise< T > = T | Promise< T >;
+
+export type Transformer< TValue extends PropValue > = (
+	value: TValue,
+	options: TransformerOptions
+) => MaybePromise< PropValue >;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type TransformersMap = Record< string, Transformer< any > >;

package/src/styles-renderer/get-styles-schema.ts

@@ -1,17 +0,0 @@
-import { type PropKey, type PropType } from '@elementor/editor-props';
-
-type ExtendedWindow = Window & {
-	elementor?: {
-		config?: {
-			atomic?: {
-				styles_schema?: Record< PropKey, PropType >;
-			};
-		};
-	};
-};
-
-export const getStylesSchema = () => {
-	const extendedWindow = window as unknown as ExtendedWindow;
-
-	return extendedWindow.elementor?.config?.atomic?.styles_schema ?? {};
-};