@elementor/editor-canvas 0.6.1 → 0.7.0

package/src/init-styles-renderer.ts

@@ -6,14 +6,29 @@ import enqueueUsedFonts from './styles-renderer/enqueue-used-fonts';
 import { getCanvasIframeBody } from './sync/get-canvas-iframe-body';
 
 const WRAPPER_DATA_ATTR = 'data-styles-container';
+const SELECTOR_PREFIX = '.elementor';
 
 export function initStylesRenderer() {
-	stylesRepository.subscribe( () => {
+	let abortController: AbortController | null = null;
+
+	stylesRepository.subscribe( async () => {
 		const styleContainer = getStylesContainer();
 		const styles = stylesRepository.all();
 		const breakpoints = getBreakpointsMap();
 
-		styleContainer.innerHTML = render( { transformers, styles, breakpoints } );
+		if ( abortController ) {
+			abortController.abort();
+		}
+
+		abortController = new AbortController();
+
+		styleContainer.innerHTML = await render( {
+			transformers,
+			styles,
+			breakpoints,
+			selectorPrefix: SELECTOR_PREFIX,
+			signal: abortController.signal,
+		} );
 
 		enqueueUsedFonts( styles );
 	} );

package/src/styles-renderer/__tests__/__mocks__/styles-schema.ts

@@ -533,7 +533,46 @@ export const stylesSchemaMock = {
 									key: 'string',
 									default: null,
 									meta: {},
-									settings: {},
+									settings: {
+										enum: [ 'repeat', 'repeat-x', 'repeat-y', 'no-repeat' ],
+									},
+								},
+								size: {
+									kind: 'plain',
+									key: 'string',
+									default: null,
+									meta: {},
+									settings: {
+										enum: [ 'auto', 'cover', 'contain' ],
+									},
+								},
+								attachment: {
+									kind: 'plain',
+									key: 'string',
+									default: null,
+									meta: {},
+									settings: {
+										enum: [ 'fixed', 'scroll' ],
+									},
+								},
+								position: {
+									kind: 'plain',
+									key: 'string',
+									default: null,
+									meta: {},
+									settings: {
+										enum: [
+											'center center',
+											'center left',
+											'center right',
+											'top center',
+											'top left',
+											'top right',
+											'bottom center',
+											'bottom left',
+											'bottom right',
+										],
+									},
 								},
 							},
 						},

package/src/styles-renderer/__tests__/enqueue-used-fonts.test.ts

@@ -21,7 +21,10 @@ describe( 'enqueueUsedFonts', () => {
 							state: null,
 						},
 						props: {
-							'font-family': 'Open Sans',
+							'font-family': {
+								$$type: 'string',
+								value: 'Open Sans',
+							},
 						},
 					},
 				],
@@ -36,7 +39,10 @@ describe( 'enqueueUsedFonts', () => {
 							state: 'hover',
 						},
 						props: {
-							'font-family': 'Roboto',
+							'font-family': {
+								$$type: 'string',
+								value: 'Roboto',
+							},
 						},
 					},
 				],

package/src/styles-renderer/__tests__/index.test.ts

@@ -10,21 +10,24 @@ import {
 	boxShadowPropTypeUtil,
 	colorPropTypeUtil,
 	dimensionsPropTypeUtil,
-	gapPropTypeUtil,
+	imageAttachmentIdPropType,
+	imageSrcPropTypeUtil,
+	layoutDirectionPropTypeUtil,
 	shadowPropTypeUtil,
 	sizePropTypeUtil,
 	strokePropTypeUtil,
 } from '@elementor/editor-props';
 import type { BreakpointsMap } from '@elementor/editor-responsive';
-import { type StyleDefinition } from '@elementor/editor-styles';
+import { getStylesSchema, type StyleDefinition } from '@elementor/editor-styles';
+import { getMediaAttachment } from '@elementor/wp-media';
 
-import { getStylesSchema } from '../get-styles-schema';
 import render from '../render';
 import transformers from '../transformers';
 import backgroundTransformer from '../transformers/background-transformer';
 import { stylesSchemaMock } from './__mocks__/styles-schema';
 
-jest.mock( '../get-styles-schema' );
+jest.mock( '@elementor/editor-styles' );
+jest.mock( '@elementor/wp-media' );
 
 describe( 'styles-renderer', () => {
 	beforeEach( () => {
@@ -35,7 +38,7 @@ describe( 'styles-renderer', () => {
 	 * Prop Types
 	 */
 
-	it( 'should transform stroke (including also size, number, string & color)', () => {
+	it( 'should transform stroke (including also size, number, string & color)', async () => {
 		const styleDef = createMockStyleDefinition( {
 			id: 'test',
 			props: {
@@ -49,7 +52,7 @@ describe( 'styles-renderer', () => {
 			},
 		} );
 
-		const cssString = render( {
+		const cssString = await render( {
 			styles: [ styleDef ],
 			transformers,
 			breakpoints: mockBreakpoints,
@@ -58,7 +61,7 @@ describe( 'styles-renderer', () => {
 		expect( cssString ).toBe( `<style data-style-id="test">.test{text-stroke:1px #000000;}</style>` );
 	} );
 
-	it( 'should transform box-shadow (including also shadow)', () => {
+	it( 'should transform box-shadow (including also shadow)', async () => {
 		// Arrange.
 		const shadow = shadowPropTypeUtil.create( {
 			hOffset: sizePropTypeUtil.create( {
@@ -96,7 +99,7 @@ describe( 'styles-renderer', () => {
 		} );
 
 		// Act.
-		const cssString = render( {
+		const cssString = await render( {
 			styles: [ styleDef ],
 			transformers,
 			breakpoints: mockBreakpoints,
@@ -108,7 +111,7 @@ describe( 'styles-renderer', () => {
 		);
 	} );
 
-	it( 'should transform linked-dimensions (including also size, number & string)', () => {
+	it( 'should transform linked-dimensions (including also size, number & string)', async () => {
 		// Arrange.
 		const styleDef = createMockStyleDefinition( {
 			id: 'test',
@@ -135,7 +138,7 @@ describe( 'styles-renderer', () => {
 		} );
 
 		// Act.
-		const cssString = render( {
+		const cssString = await render( {
 			styles: [ styleDef ],
 			transformers,
 			breakpoints: mockBreakpoints,
@@ -147,7 +150,7 @@ describe( 'styles-renderer', () => {
 		);
 	} );
 
-	it( 'should transform border-width (including also size, number & string)', () => {
+	it( 'should transform border-width (including also size, number & string)', async () => {
 		// Arrange.
 		const styleDef = createMockStyleDefinition( {
 			id: 'test',
@@ -173,7 +176,7 @@ describe( 'styles-renderer', () => {
 			},
 		} );
 		// Act.
-		const cssString = render( {
+		const cssString = await render( {
 			styles: [ styleDef ],
 			transformers,
 			breakpoints: mockBreakpoints,
@@ -185,7 +188,7 @@ describe( 'styles-renderer', () => {
 		);
 	} );
 
-	it( 'should transform border-radius (including also union, size, number & string)', () => {
+	it( 'should transform border-radius (including also union, size, number & string)', async () => {
 		// Arrange.
 		const styleDef = createMockStyleDefinition( {
 			id: 'test',
@@ -212,7 +215,7 @@ describe( 'styles-renderer', () => {
 		} );
 
 		// Act.
-		const cssString = render( {
+		const cssString = await render( {
 			styles: [ styleDef ],
 			transformers,
 			breakpoints: mockBreakpoints,
@@ -224,13 +227,12 @@ describe( 'styles-renderer', () => {
 		);
 	} );
 
-	it( 'should transform gap (including also size, number & string)', () => {
+	it( 'should transform layout direction', async () => {
 		// Arrange.
 		const styleDef = createMockStyleDefinition( {
 			id: 'test',
 			props: {
-				gap: gapPropTypeUtil.create( {
-					isLinked: true,
+				gap: layoutDirectionPropTypeUtil.create( {
 					row: sizePropTypeUtil.create( {
 						size: 10,
 						unit: 'px',
@@ -244,7 +246,7 @@ describe( 'styles-renderer', () => {
 		} );
 
 		// Act.
-		const cssString = render( {
+		const cssString = await render( {
 			styles: [ styleDef ],
 			transformers,
 			breakpoints: mockBreakpoints,
@@ -257,7 +259,7 @@ describe( 'styles-renderer', () => {
 	 * Features
 	 */
 
-	it( 'should render media queries', () => {
+	it( 'should render media queries', async () => {
 		// Arrange.
 		const styleDef: StyleDefinition = {
 			id: 'test',
@@ -306,7 +308,7 @@ describe( 'styles-renderer', () => {
 		};
 
 		// Act.
-		const cssString = render( {
+		const cssString = await render( {
 			styles: [ styleDef ],
 			transformers,
 			breakpoints: mockBreakpoints,
@@ -322,7 +324,7 @@ describe( 'styles-renderer', () => {
 		);
 	} );
 
-	it( 'should render pseudo classes', () => {
+	it( 'should render pseudo classes', async () => {
 		// Arrange.
 		const styleDef: StyleDefinition = {
 			id: 'test',
@@ -371,7 +373,7 @@ describe( 'styles-renderer', () => {
 		};
 
 		// Act.
-		const cssString = render( {
+		const cssString = await render( {
 			styles: [ styleDef ],
 			transformers,
 			breakpoints: mockBreakpoints,
@@ -387,7 +389,7 @@ describe( 'styles-renderer', () => {
 		);
 	} );
 
-	it( 'should skip disabled props', () => {
+	it( 'should skip disabled props', async () => {
 		// Arrange.
 		const styleDef = createMockStyleDefinition( {
 			id: 'test',
@@ -407,7 +409,7 @@ describe( 'styles-renderer', () => {
 		} );
 
 		// Act.
-		const cssString = render( {
+		const cssString = await render( {
 			styles: [ styleDef ],
 			transformers,
 			breakpoints: mockBreakpoints,
@@ -417,7 +419,7 @@ describe( 'styles-renderer', () => {
 		expect( cssString ).toBe( `<style data-style-id="test">.test{font-size:24px;}</style>` );
 	} );
 
-	it( 'should fallback to default value when there is no value', () => {
+	it( 'should fallback to default value when there is no value', async () => {
 		// Arrange.
 		const styleDef = createMockStyleDefinition( {
 			id: 'test',
@@ -438,7 +440,7 @@ describe( 'styles-renderer', () => {
 		} );
 
 		// Act.
-		const cssString = render( {
+		const cssString = await render( {
 			styles: [ styleDef ],
 			transformers,
 			breakpoints: mockBreakpoints,
@@ -448,7 +450,7 @@ describe( 'styles-renderer', () => {
 		expect( cssString ).toBe( `<style data-style-id="test">.test{overflow:hidden;}</style>` );
 	} );
 
-	it( 'should skip props that are not in the schema', () => {
+	it( 'should skip props that are not in the schema', async () => {
 		// Arrange.
 		const styleDef = createMockStyleDefinition( {
 			id: 'test',
@@ -465,7 +467,7 @@ describe( 'styles-renderer', () => {
 		} );
 
 		// Act.
-		const cssString = render( {
+		const cssString = await render( {
 			styles: [ styleDef ],
 			transformers,
 			breakpoints: mockBreakpoints,
@@ -475,7 +477,7 @@ describe( 'styles-renderer', () => {
 		expect( cssString ).toBe( `<style data-style-id="test">.test{font-size:24px;}</style>` );
 	} );
 
-	it( "should skip props that don't have a transformer", () => {
+	it( "should skip props that don't have a transformer", async () => {
 		// Arrange.
 		const styleDef = createMockStyleDefinition( {
 			id: 'test',
@@ -492,7 +494,7 @@ describe( 'styles-renderer', () => {
 		} );
 
 		// Act.
-		const cssString = render( {
+		const cssString = await render( {
 			styles: [ styleDef ],
 			transformers,
 			breakpoints: mockBreakpoints,
@@ -502,7 +504,7 @@ describe( 'styles-renderer', () => {
 		expect( cssString ).toBe( `<style data-style-id="test">.test{font-size:24px;}</style>` );
 	} );
 
-	it( 'should skip props when their transformer throws an error', () => {
+	it( 'should skip props when their transformer throws an error', async () => {
 		// Arrange.
 		const styleDef = createMockStyleDefinition( {
 			id: 'test',
@@ -516,7 +518,7 @@ describe( 'styles-renderer', () => {
 		} );
 
 		// Act.
-		const cssString = render( {
+		const cssString = await render( {
 			styles: [ styleDef ],
 			transformers: {
 				size: () => {
@@ -530,7 +532,7 @@ describe( 'styles-renderer', () => {
 		expect( cssString ).toBe( `<style data-style-id="test">.test{font-size:24px;}</style>` );
 	} );
 
-	it( 'should consider 0 as valid value', () => {
+	it( 'should consider 0 as valid value', async () => {
 		// Arrange.
 		const styleDef = createMockStyleDefinition( {
 			id: 'test',
@@ -543,7 +545,7 @@ describe( 'styles-renderer', () => {
 		} );
 
 		// Act.
-		const cssString = render( {
+		const cssString = await render( {
 			styles: [ styleDef ],
 			transformers,
 			breakpoints: mockBreakpoints,
@@ -552,6 +554,30 @@ describe( 'styles-renderer', () => {
 		// Assert.
 		expect( cssString ).toBe( `<style data-style-id="test">.test{font-size:0px;}</style>` );
 	} );
+
+	it( 'should add selector prefix to the output', async () => {
+		// Arrange.
+		const styleDef = createMockStyleDefinition( {
+			id: 'test',
+			props: {
+				'font-size': sizePropTypeUtil.create( {
+					size: 24,
+					unit: 'px',
+				} ),
+			},
+		} );
+
+		// Act.
+		const cssString = await render( {
+			styles: [ styleDef ],
+			transformers,
+			selectorPrefix: '.elementor-prefix',
+			breakpoints: mockBreakpoints,
+		} );
+
+		// Assert.
+		expect( cssString ).toBe( `<style data-style-id="test">.elementor-prefix .test{font-size:24px;}</style>` );
+	} );
 } );
 
 const backgroundExpectationWrapper = ( id: string, bgShorthand: string ) => {
@@ -563,7 +589,7 @@ describe( 'background-transformer', () => {
 		jest.mocked( getStylesSchema ).mockReturnValue( stylesSchemaMock );
 	} );
 
-	it( 'should transform background color', () => {
+	it( 'should transform background color', async () => {
 		// Arrange.
 		const styleDef = createMockStyleDefinition( {
 			id: 'bg-color',
@@ -575,7 +601,7 @@ describe( 'background-transformer', () => {
 		} );
 
 		// Act.
-		const cssString = render( {
+		const cssString = await render( {
 			styles: [ styleDef ],
 			transformers,
 			breakpoints: mockBreakpoints,
@@ -585,8 +611,12 @@ describe( 'background-transformer', () => {
 		expect( cssString ).toBe( backgroundExpectationWrapper( 'bg-color', '#ee00ff' ) );
 	} );
 
-	it( 'should transform background overlay (repeater)', () => {
+	it( 'should transform background overlay (repeater)', async () => {
 		// Arrange.
+		jest.mocked( getMediaAttachment ).mockImplementation( ( args ) => {
+			return Promise.resolve( { url: `image-url-${ args.id }` } ) as never;
+		} );
+
 		const styleDef = createMockStyleDefinition( {
 			id: 'test',
 			props: {
@@ -594,14 +624,30 @@ describe( 'background-transformer', () => {
 					'background-overlay': backgroundOverlayPropTypeUtil.create( [
 						backgroundColorOverlayPropTypeUtil.create( 'blue' ),
 						backgroundColorOverlayPropTypeUtil.create( 'yellow' ),
-						backgroundImageOverlayPropTypeUtil.create( { 'image-src': { id: 123, url: null } } ),
+						backgroundImageOverlayPropTypeUtil.create( {
+							'image-src': imageSrcPropTypeUtil.create( {
+								id: imageAttachmentIdPropType.create( 123 ),
+								url: null,
+							} ),
+							size: 'contain',
+						} ),
+						backgroundImageOverlayPropTypeUtil.create( {
+							'image-src': imageSrcPropTypeUtil.create( {
+								id: imageAttachmentIdPropType.create( 123 ),
+								url: null,
+							} ),
+							size: 'auto',
+							position: 'center right',
+							repeat: 'repeat-x',
+							attachment: 'fixed',
+						} ),
 					] ),
 				} ),
 			},
 		} );
 
 		// Act.
-		const cssString = render( {
+		const cssString = await render( {
 			styles: [ styleDef ],
 			transformers,
 			breakpoints: mockBreakpoints,
@@ -611,13 +657,17 @@ describe( 'background-transformer', () => {
 		expect( cssString ).toBe(
 			backgroundExpectationWrapper(
 				'test',
-				'linear-gradient(blue, blue),linear-gradient(yellow, yellow),url("https://bit.ly/2rlzaXi")'
+				'linear-gradient(blue, blue),linear-gradient(yellow, yellow),url(image-url-123) 0% 0% / contain,url(image-url-123) repeat-x fixed center right / auto'
 			)
 		);
 	} );
 
-	it( 'should transform background (including also background-overlay & color)', () => {
+	it( 'should transform background (including also background-overlay & color)', async () => {
 		// Arrange.
+		jest.mocked( getMediaAttachment ).mockImplementation( ( args ) => {
+			return Promise.resolve( { url: `image-url-${ args.id }` } ) as never;
+		} );
+
 		const styleDef = createMockStyleDefinition( {
 			id: 'test',
 			props: {
@@ -626,14 +676,30 @@ describe( 'background-transformer', () => {
 					'background-overlay': backgroundOverlayPropTypeUtil.create( [
 						backgroundColorOverlayPropTypeUtil.create( '#FFFFFF' ),
 						backgroundColorOverlayPropTypeUtil.create( '#FF2222' ),
-						backgroundImageOverlayPropTypeUtil.create( { 'image-src': { id: 123, url: null } } ),
+						backgroundImageOverlayPropTypeUtil.create( {
+							'image-src': imageSrcPropTypeUtil.create( {
+								id: imageAttachmentIdPropType.create( 123 ),
+								url: null,
+							} ),
+							size: 'contain',
+						} ),
+						backgroundImageOverlayPropTypeUtil.create( {
+							'image-src': imageSrcPropTypeUtil.create( {
+								id: imageAttachmentIdPropType.create( 123 ),
+								url: null,
+							} ),
+							size: 'auto',
+							position: 'center right',
+							repeat: 'repeat-y',
+							attachment: 'fixed',
+						} ),
 					] ),
 				} ),
 			},
 		} );
 
 		// Act.
-		const cssString = render( {
+		const cssString = await render( {
 			styles: [ styleDef ],
 			transformers,
 			breakpoints: mockBreakpoints,
@@ -643,7 +709,7 @@ describe( 'background-transformer', () => {
 		expect( cssString ).toBe(
 			backgroundExpectationWrapper(
 				'test',
-				'linear-gradient(#FFFFFF, #FFFFFF),linear-gradient(#FF2222, #FF2222),url("https://bit.ly/2rlzaXi") #000'
+				'linear-gradient(#FFFFFF, #FFFFFF),linear-gradient(#FF2222, #FF2222),url(image-url-123) 0% 0% / contain,url(image-url-123) repeat-y fixed center right / auto #000'
 			)
 		);
 	} );
@@ -657,7 +723,7 @@ describe( 'background-overlay-transformer', () => {
 		};
 
 		// Act.
-		const result = backgroundTransformer( initialData, 'background-overlay' );
+		const result = backgroundTransformer( initialData, { key: 'background-overlay' } );
 
 		// Assert.
 		expect( result ).toBe( '' );
@@ -672,7 +738,7 @@ describe( 'background-overlay-transformer', () => {
 		};
 
 		// Act.
-		const result = backgroundTransformer( initialData, 'background-overlay' );
+		const result = backgroundTransformer( initialData, { key: 'background-overlay' } );
 
 		// Assert.
 		expect( result ).toBe( backgroundColor );
@@ -688,7 +754,7 @@ describe( 'background-overlay-transformer', () => {
 		};
 
 		// Act.
-		const result = backgroundTransformer( initialData, 'background-overlay' );
+		const result = backgroundTransformer( initialData, { key: 'background-overlay' } );
 
 		// Assert.
 		expect( result ).toBe( expected );

package/src/styles-renderer/enqueue-used-fonts.ts

@@ -1,3 +1,4 @@
+import { type StringPropValue } from '@elementor/editor-props';
 import { type StyleDefinition } from '@elementor/editor-styles';
 import { ensureError } from '@elementor/utils';
 
@@ -7,10 +8,10 @@ export default function enqueueUsedFonts( styles: StyleDefinition[] ) {
 	try {
 		styles.forEach( ( styleDef ) => {
 			Object.values( styleDef.variants ).forEach( ( variant ) => {
-				const fontFamily = variant.props[ 'font-family' ] ?? null;
+				const fontFamily = variant.props[ 'font-family' ] as StringPropValue;
 
-				if ( fontFamily && typeof fontFamily === 'string' ) {
-					enqueueFont( fontFamily );
+				if ( fontFamily?.value ) {
+					enqueueFont( fontFamily.value );
 				}
 			} );
 		} );

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',
+} );