@elementor/editor-canvas 0.15.4 → 0.18.0

package/src/renderers/{render-styles.ts → create-styles-renderer.ts}

@@ -1,15 +1,25 @@
-import { type Props } from '@elementor/editor-props';
+import type { Props } from '@elementor/editor-props';
 import { type Breakpoint, type BreakpointsMap } from '@elementor/editor-responsive';
 import { type StyleDefinition, type StyleDefinitionState, type StyleDefinitionType } from '@elementor/editor-styles';
 
 import { type PropsResolver } from './create-props-resolver';
 import { UnknownStyleTypeError } from './errors';
 
-type RenderParams = {
+export type StyleItem = {
+	id: string;
+	value: string;
+};
+
+export type StyleRenderer = ReturnType< typeof createStylesRenderer >;
+
+type CreateStyleRendererArgs = {
 	resolve: PropsResolver;
-	styles: StyleDefinition[];
 	breakpoints: BreakpointsMap;
 	selectorPrefix?: string;
+};
+
+type StyleRendererArgs = {
+	styles: StyleDefinition[];
 	signal?: AbortSignal;
 };
 
@@ -23,33 +33,30 @@ const SELECTORS_MAP: Record< StyleDefinitionType, string > = {
 	class: '.',
 };
 
-export default async function renderStyles( {
-	resolve,
-	styles,
-	breakpoints,
-	selectorPrefix = '',
-	signal,
-}: RenderParams ) {
-	const stylesCssPromises = styles.map( async ( style ) => {
-		const variantCssPromises = Object.values( style.variants ).map( async ( variant ) => {
-			const css = await propsToCss( { props: variant.props, resolve, signal } );
-
-			return createStyleWrapper()
-				.forStyle( style )
-				.withPrefix( selectorPrefix )
-				.withState( variant.meta.state )
-				.withMediaQuery( variant.meta.breakpoint ? breakpoints[ variant.meta.breakpoint ] : null )
-				.wrap( css );
+export function createStylesRenderer( { resolve, breakpoints, selectorPrefix = '' }: CreateStyleRendererArgs ) {
+	return async ( { styles, signal }: StyleRendererArgs ): Promise< StyleItem[] > => {
+		const stylesCssPromises = styles.map( async ( style ) => {
+			const variantCssPromises = Object.values( style.variants ).map( async ( variant ) => {
+				const css = await propsToCss( { props: variant.props, resolve, signal } );
+
+				return createStyleWrapper()
+					.forStyle( style )
+					.withPrefix( selectorPrefix )
+					.withState( variant.meta.state )
+					.withMediaQuery( variant.meta.breakpoint ? breakpoints[ variant.meta.breakpoint ] : null )
+					.wrap( css );
+			} );
+
+			const variantsCss = await Promise.all( variantCssPromises );
+
+			return {
+				id: style.id,
+				value: variantsCss.join( '' ),
+			};
 		} );
 
-		const variantsCss = await Promise.all( variantCssPromises );
-
-		return wrapCssWithStyleElement( style.id, variantsCss.join( '' ) );
-	} );
-
-	const stylesCss = await Promise.all( stylesCssPromises );
-
-	return stylesCss.join( '' );
+		return await Promise.all( stylesCssPromises );
+	};
 }
 
 function createStyleWrapper( value: string = '', wrapper?: ( css: string ) => string ) {
@@ -107,7 +114,3 @@ async function propsToCss( { props, resolve, signal }: PropsToCssArgs ) {
 		}, [] )
 		.join( '' );
 }
-
-function wrapCssWithStyleElement( id: string, css: string ) {
-	return `<style data-style-id="${ id }">${ css }</style>`;
-}

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

@@ -11,7 +11,7 @@ import {
 	updateElementStyle,
 } from '@elementor/editor-elements';
 import { type StyleDefinition } from '@elementor/editor-styles';
-import { LOCAL_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
+import { ELEMENTS_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
 
 import { initPasteStyleCommand } from '../paste-style';
 import { getClassesProp, getClipboardElements, isAtomicWidget } from '../utils';
@@ -132,7 +132,7 @@ describe( 'pasteStyles', () => {
 		expect( createElementStyle ).toHaveBeenCalledWith( {
 			elementId: 'test-container',
 			styleId: 's-1',
-			label: LOCAL_STYLES_RESERVED_LABEL,
+			label: ELEMENTS_STYLES_RESERVED_LABEL,
 			classesProp: 'classes',
 			meta: {
 				breakpoint: null,
@@ -195,7 +195,7 @@ describe( 'pasteStyles', () => {
 		// Assert.
 		expect( createElementStyle ).toHaveBeenCalledWith( {
 			elementId: 'test-container',
-			label: LOCAL_STYLES_RESERVED_LABEL,
+			label: ELEMENTS_STYLES_RESERVED_LABEL,
 			classesProp: 'classes',
 			meta: {
 				breakpoint: null,
@@ -461,7 +461,7 @@ describe( 'pasteStyles', () => {
 		// Assert.
 		expect( createElementStyle ).toHaveBeenCalledWith( {
 			elementId: 'test-container-1',
-			label: LOCAL_STYLES_RESERVED_LABEL,
+			label: ELEMENTS_STYLES_RESERVED_LABEL,
 			classesProp: 'classes',
 			meta: {
 				breakpoint: null,
@@ -522,7 +522,7 @@ describe( 'pasteStyles', () => {
 
 		expect( createElementStyle ).toHaveBeenCalledWith( {
 			elementId: 'test-container-2',
-			label: LOCAL_STYLES_RESERVED_LABEL,
+			label: ELEMENTS_STYLES_RESERVED_LABEL,
 			classesProp: 'classes',
 			styleId: 's-1',
 			meta: {

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

@@ -5,7 +5,7 @@ import {
 	mockHistoryManager,
 } from 'test-utils';
 import { createElementStyle, deleteElementStyle, getElementStyles } from '@elementor/editor-elements';
-import { LOCAL_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
+import { ELEMENTS_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
 
 import { initResetStyleCommand } from '../reset-style';
 import { getClassesProp, hasAtomicWidgets, isAtomicWidget } from '../utils';
@@ -80,7 +80,7 @@ describe( 'resetStyles', () => {
 		// Assert.
 		expect( createElementStyle ).toHaveBeenCalledWith( {
 			elementId: 'test-container',
-			label: LOCAL_STYLES_RESERVED_LABEL,
+			label: ELEMENTS_STYLES_RESERVED_LABEL,
 			classesProp: 'classes',
 			meta: {
 				breakpoint: null,

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

@@ -6,7 +6,7 @@ import {
 	type V1Element,
 } from '@elementor/editor-elements';
 import { type StyleDefinition } from '@elementor/editor-styles';
-import { LOCAL_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
+import { ELEMENTS_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
 import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
@@ -55,7 +55,7 @@ export const undoablePasteElementStyle = () =>
 						revertData.styleId = createElementStyle( {
 							elementId,
 							classesProp,
-							label: LOCAL_STYLES_RESERVED_LABEL,
+							label: ELEMENTS_STYLES_RESERVED_LABEL,
 							...firstVariant,
 							additionalVariants,
 						} );
@@ -92,7 +92,7 @@ export const undoablePasteElementStyle = () =>
 					createElementStyle( {
 						elementId: container.id,
 						classesProp,
-						label: LOCAL_STYLES_RESERVED_LABEL,
+						label: ELEMENTS_STYLES_RESERVED_LABEL,
 						styleId: revertData.styleId,
 						...firstVariant,
 						additionalVariants,

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

@@ -1,5 +1,5 @@
 import { createElementStyle, deleteElementStyle, getElementStyles, type V1Element } from '@elementor/editor-elements';
-import { LOCAL_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
+import { ELEMENTS_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
 import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
@@ -45,7 +45,7 @@ export const undoableResetElementStyle = () =>
 							elementId,
 							classesProp,
 							styleId,
-							label: LOCAL_STYLES_RESERVED_LABEL,
+							label: ELEMENTS_STYLES_RESERVED_LABEL,
 							...firstVariant,
 							additionalVariants,
 						} );

package/src/sync/{get-canvas-iframe-body.ts → get-canvas-iframe-head.ts}

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

package/src/sync/types.ts

@@ -1,3 +1,5 @@
+import { type StorageContent } from '../prevent-link-in-link-commands';
+
 export type EnqueueFont = ( fontFamily: string, context?: 'preview' | 'editor' ) => void;
 
 export type CanvasExtendedWindow = Window & {
@@ -7,4 +9,9 @@ export type CanvasExtendedWindow = Window & {
 			enqueueFont?: EnqueueFont;
 		};
 	};
+	elementorCommon?: {
+		storage?: {
+			get: ( key?: string ) => StorageContent;
+		};
+	};
 };

package/src/utils/abort-previous-runs.ts

@@ -0,0 +1,16 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function abortPreviousRuns< TArgs extends any[], TReturn >(
+	cb: ( abortController: AbortController, ...args: TArgs ) => TReturn
+): ( ...args: TArgs ) => TReturn {
+	let abortController: AbortController | null = null;
+
+	return ( ...args: TArgs ) => {
+		if ( abortController ) {
+			abortController.abort();
+		}
+
+		abortController = new AbortController();
+
+		return cb( abortController, ...args );
+	};
+}

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

@@ -1,112 +0,0 @@
-import { createDOMElement, createMockPropType, createMockStyleDefinition, dispatchV1ReadyEvent } from 'test-utils';
-import { type BreakpointsMap, getBreakpointsMap } from '@elementor/editor-responsive';
-import { getStylesSchema } from '@elementor/editor-styles';
-import { stylesRepository } from '@elementor/editor-styles-repository';
-import { registerDataHook } from '@elementor/editor-v1-adapters';
-import { waitFor } from '@testing-library/react';
-
-import { initStylesRenderer as initStylesRendererBase } from '../init-styles-renderer';
-import { createPropsResolver } from '../renderers/create-props-resolver';
-import renderStyles from '../renderers/render-styles';
-import { getCanvasIframeBody } from '../sync/get-canvas-iframe-body';
-
-jest.mock( '@elementor/editor-styles-repository' );
-jest.mock( '@elementor/editor-responsive' );
-jest.mock( '@elementor/editor-styles' );
-jest.mock( '@elementor/editor-v1-adapters', () => ( {
-	...jest.requireActual( '@elementor/editor-v1-adapters' ),
-	registerDataHook: jest.fn(),
-} ) );
-jest.mock( '../renderers/render-styles' );
-jest.mock( '../renderers/create-props-resolver' );
-jest.mock( '../sync/get-canvas-iframe-body' );
-
-const initStylesRenderer = () => {
-	initStylesRendererBase();
-	dispatchV1ReadyEvent();
-};
-
-describe( 'initStylesRenderer', () => {
-	it( 'should trigger styles render on each change in the styles repo', async () => {
-		// Arrange.
-		let triggerRepoChange = () => {};
-		let triggerDataHook = () => {};
-		const mockStyleDef = createMockStyleDefinition();
-		const mockSchema = { test: createMockPropType( { key: 'test', kind: 'plain' } ) };
-
-		const mockedResolveProps = jest.fn();
-
-		jest.mocked( getStylesSchema ).mockReturnValue( mockSchema );
-		jest.mocked( createPropsResolver ).mockReturnValue( mockedResolveProps );
-		jest.mocked( stylesRepository.subscribe ).mockImplementation( ( cb ) => ( triggerRepoChange = cb ) );
-		jest.mocked( registerDataHook ).mockImplementation( ( type, hook, cb ) => {
-			if ( type === 'after' && hook === 'editor/documents/attach-preview' ) {
-				triggerDataHook = cb as never;
-			}
-
-			return null as never;
-		} );
-		jest.mocked( stylesRepository.all ).mockReturnValue( [ mockStyleDef ] );
-		jest.mocked( getBreakpointsMap ).mockReturnValue( {
-			mobile: { id: 'mobile', label: 'Mobile' },
-		} as BreakpointsMap );
-
-		// Act.
-		initStylesRenderer();
-
-		triggerRepoChange();
-		triggerRepoChange();
-		triggerDataHook();
-
-		// Assert.
-		expect( createPropsResolver ).toHaveBeenCalledTimes( 1 );
-		expect( createPropsResolver ).toHaveBeenCalledWith( {
-			transformers: expect.any( Object ),
-			schema: mockSchema,
-			onPropResolve: expect.any( Function ),
-		} );
-
-		expect( renderStyles ).toHaveBeenCalledTimes( 3 );
-		expect( renderStyles ).toHaveBeenCalledWith( {
-			resolve: mockedResolveProps,
-			styles: [ mockStyleDef ],
-			selectorPrefix: '.elementor',
-			breakpoints: { mobile: { id: 'mobile', label: 'Mobile' } },
-			signal: expect.any( AbortSignal ),
-		} );
-	} );
-
-	it( 'should create a style container and fill it with render result', async () => {
-		// Arrange.
-		const wrapperEl = createDOMElement( { tag: 'div' } );
-		let triggerStylesChange = () => {};
-
-		jest.mocked( stylesRepository.subscribe ).mockImplementation( ( cb ) => ( triggerStylesChange = cb ) );
-		jest.mocked( getCanvasIframeBody ).mockReturnValue( wrapperEl );
-		jest.mocked( renderStyles ).mockReturnValue( Promise.resolve( '.a { color: red; }' ) );
-
-		// Act.
-		initStylesRenderer();
-
-		triggerStylesChange();
-
-		// Assert.
-		await waitFor( () => {
-			expect( wrapperEl.innerHTML ).toEqual(
-				'<div style="display: none;" data-styles-container="">.a { color: red; }</div>'
-			);
-		} );
-
-		// Act.
-		jest.mocked( renderStyles ).mockResolvedValue( '.a { color: red; display: block; }' );
-
-		triggerStylesChange();
-
-		// Assert.
-		await waitFor( () => {
-			expect( wrapperEl.innerHTML ).toEqual(
-				'<div style="display: none;" data-styles-container="">.a { color: red; display: block; }</div>'
-			);
-		} );
-	} );
-} );

package/src/init-styles-renderer.ts

@@ -1,84 +0,0 @@
-import { getBreakpointsMap } from '@elementor/editor-responsive';
-import { getStylesSchema } from '@elementor/editor-styles';
-import { stylesRepository } from '@elementor/editor-styles-repository';
-import { __privateListenTo as listenTo, registerDataHook, v1ReadyEvent } from '@elementor/editor-v1-adapters';
-
-import { createPropsResolver } from './renderers/create-props-resolver';
-import renderStyles from './renderers/render-styles';
-import { styleTransformersRegistry } from './style-transformers-registry';
-import { enqueueFont } from './sync/enqueue-font';
-import { getCanvasIframeBody } from './sync/get-canvas-iframe-body';
-
-const WRAPPER_DATA_ATTR = 'data-styles-container';
-const SELECTOR_PREFIX = '.elementor';
-
-export function initStylesRenderer() {
-	listenTo( v1ReadyEvent(), () => {
-		let abortController: AbortController | null = null;
-
-		const resolve = createPropsResolver( {
-			transformers: styleTransformersRegistry,
-			schema: getStylesSchema(),
-			onPropResolve: enqueueUsedFonts,
-		} );
-
-		const injectStyleElements = async () => {
-			const styleContainer = getStylesContainer();
-
-			// Styles should be printed in a reversed order, so the high priority styles will be printed last.
-			const styles = stylesRepository.all().reverse();
-			const breakpoints = getBreakpointsMap();
-
-			if ( abortController ) {
-				abortController.abort();
-			}
-
-			abortController = new AbortController();
-
-			styleContainer.innerHTML = await renderStyles( {
-				styles,
-				resolve,
-				breakpoints,
-				selectorPrefix: SELECTOR_PREFIX,
-				signal: abortController.signal,
-			} );
-		};
-
-		stylesRepository.subscribe( injectStyleElements );
-
-		// Add initial styles rendering as a hook to ensure the whole editor
-		// waits for styles to render before hiding the loaders.
-		registerDataHook( 'after', 'editor/documents/attach-preview', injectStyleElements );
-	} );
-}
-
-function getStylesContainer() {
-	const preview = getCanvasIframeBody();
-	const stylesContainer = preview?.querySelector( `[${ WRAPPER_DATA_ATTR }]` );
-
-	if ( stylesContainer ) {
-		return stylesContainer;
-	}
-
-	const el = createStylesContainer();
-
-	preview?.prepend( el );
-
-	return el;
-}
-
-function createStylesContainer() {
-	const el = document.createElement( 'div' );
-	el.style.display = 'none';
-	el.setAttribute( WRAPPER_DATA_ATTR, '' );
-
-	return el;
-}
-
-function enqueueUsedFonts( { key, value }: { key: string; value: unknown } ) {
-	if ( key !== 'font-family' || typeof value !== 'string' ) {
-		return;
-	}
-
-	enqueueFont( value );
-}