@elementor/editor-canvas 0.15.4 → 0.17.0

package/src/hooks/__tests__/use-style-items.test.ts

@@ -0,0 +1,136 @@
+import { createMockStyleDefinition, createMockStylesProvider } from 'test-utils';
+import { stylesRepository } from '@elementor/editor-styles-repository';
+import { registerDataHook } from '@elementor/editor-v1-adapters';
+import { act, renderHook } from '@testing-library/react';
+
+import { useStyleItems } from '../use-style-items';
+import { useStyleRenderer } from '../use-style-renderer';
+
+jest.mock( '@elementor/editor-styles-repository', () => ( {
+	stylesRepository: {
+		getProviders: jest.fn(),
+	},
+} ) );
+
+jest.mock( '@elementor/editor-v1-adapters', () => ( {
+	...jest.requireActual( '@elementor/editor-v1-adapters' ),
+	registerDataHook: jest.fn(),
+} ) );
+
+jest.mock( '../use-style-prop-resolver', () => ( {
+	useStylePropResolver: jest.fn(),
+} ) );
+
+jest.mock( '../use-style-renderer', () => ( {
+	useStyleRenderer: jest.fn(),
+} ) );
+
+describe( 'useStyleItems', () => {
+	beforeEach( () => {
+		jest.mocked( useStyleRenderer ).mockReturnValue(
+			jest
+				.fn()
+				.mockImplementation( ( { styles } ) => styles.map( ( style: { id: string } ) => ( { id: style.id } ) ) )
+		);
+	} );
+
+	it( 'should return style items from providers when subscribed', async () => {
+		// Arrange.
+		const mockProvider1 = createMockStylesProvider( {
+			key: 'provider1',
+			priority: 2,
+			styleDefinitions: [
+				createMockStyleDefinition( { id: 'style1' } ),
+				createMockStyleDefinition( { id: 'style2' } ),
+			],
+		} );
+
+		const mockProvider2 = createMockStylesProvider( {
+			key: 'provider2',
+			priority: 1,
+			styleDefinitions: [
+				createMockStyleDefinition( { id: 'style3' } ),
+				createMockStyleDefinition( { id: 'style4' } ),
+			],
+		} );
+
+		jest.mocked( stylesRepository ).getProviders.mockReturnValue( [ mockProvider1, mockProvider2 ] );
+
+		// Act.
+		const { result } = renderHook( () => useStyleItems() );
+
+		// Assert.
+		expect( result.current ).toEqual( [] );
+
+		// Act.
+		await act( async () => {
+			mockProvider1.actions.updateProps?.( {
+				id: 'style1',
+				meta: { breakpoint: null, state: null },
+				props: { a: 1 },
+			} );
+		} );
+
+		// Assert.
+		expect( result.current ).toEqual( [ { id: 'style1' }, { id: 'style2' } ] );
+
+		// Act.
+		await act( async () => {
+			mockProvider2.actions.updateProps?.( {
+				id: 'style3',
+				meta: { breakpoint: null, state: null },
+				props: { a: 1 },
+			} );
+		} );
+
+		// Assert.
+		expect( result.current ).toEqual( [ { id: 'style3' }, { id: 'style4' }, { id: 'style1' }, { id: 'style2' } ] );
+	} );
+
+	it( 'should return style items when attach-preview command is triggered', async () => {
+		// Arrange.
+		const mockProvider1 = createMockStylesProvider( {
+			key: 'provider1',
+			priority: 2,
+			styleDefinitions: [
+				createMockStyleDefinition( { id: 'style1' } ),
+				createMockStyleDefinition( { id: 'style2' } ),
+			],
+		} );
+
+		const mockProvider2 = createMockStylesProvider( {
+			key: 'provider2',
+			priority: 1,
+			styleDefinitions: [
+				createMockStyleDefinition( { id: 'style3' } ),
+				createMockStyleDefinition( { id: 'style4' } ),
+			],
+		} );
+
+		jest.mocked( stylesRepository ).getProviders.mockReturnValue( [ mockProvider1, mockProvider2 ] );
+
+		let attachPreviewCallback: () => Promise< void >;
+
+		jest.mocked( registerDataHook ).mockImplementation( ( position, command, callback ) => {
+			if ( command === 'editor/documents/attach-preview' && position === 'after' ) {
+				attachPreviewCallback = callback as never;
+			}
+
+			return null as never;
+		} );
+
+		// Act.
+		const { result } = renderHook( () => useStyleItems() );
+
+		// Assert.
+		expect( result.current ).toEqual( [] );
+
+		// Act.
+		await act( async () => {
+			await attachPreviewCallback?.();
+		} );
+
+		// Assert.
+		expect( result.current ).toEqual( [ { id: 'style3' }, { id: 'style4' }, { id: 'style1' }, { id: 'style2' } ] );
+	} );
+} );

package/src/hooks/__tests__/use-style-prop-resolver.test.ts

@@ -0,0 +1,51 @@
+import { createMockPropType } from 'test-utils';
+import { stringPropTypeUtil } from '@elementor/editor-props';
+import { getStylesSchema } from '@elementor/editor-styles';
+import { act, renderHook } from '@testing-library/react';
+
+import { initStyleTransformers } from '../../init-style-transformers';
+import { enqueueFont } from '../../sync/enqueue-font';
+import { useStylePropResolver } from '../use-style-prop-resolver';
+
+jest.mock( '../../sync/enqueue-font' );
+jest.mock( '@elementor/editor-styles' );
+
+describe( 'useStylePropResolver', () => {
+	it( 'should call enqueueFont with the correct value when font-family is resolved', async () => {
+		// Arrange.
+		initStyleTransformers();
+
+		jest.mocked( getStylesSchema ).mockReturnValue( {
+			'font-family': createMockPropType( { key: 'string', kind: 'plain' } ),
+			'another-prop': createMockPropType( { key: 'string', kind: 'plain' } ),
+		} );
+
+		const { result } = renderHook( useStylePropResolver );
+
+		// Act.
+		const resolve = result.current;
+
+		await act( () =>
+			resolve( {
+				props: {
+					'another-prop': stringPropTypeUtil.create( 'value' ),
+				},
+			} )
+		);
+
+		// Assert.
+		expect( enqueueFont ).not.toHaveBeenCalled();
+
+		// Act.
+		await act( () =>
+			resolve( {
+				props: {
+					'font-family': stringPropTypeUtil.create( 'arial' ),
+				},
+			} )
+		);
+
+		// Assert.
+		expect( enqueueFont ).toHaveBeenCalledWith( 'arial' );
+	} );
+} );

package/src/hooks/use-on-mount.ts

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from 'react';
+
+export function useOnMount( cb: () => void ) {
+	const mounted = useRef( false );
+
+	useEffect( () => {
+		if ( ! mounted.current ) {
+			mounted.current = true;
+
+			cb();
+		}
+	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
+}

package/src/hooks/use-style-items.ts

@@ -0,0 +1,78 @@
+import { type Dispatch, type SetStateAction, useEffect, useMemo, useState } from 'react';
+import { type StylesProvider, stylesRepository } from '@elementor/editor-styles-repository';
+import { registerDataHook } from '@elementor/editor-v1-adapters';
+
+import { type StyleItem, type StyleRenderer } from '../renderers/create-styles-renderer';
+import { abortPreviousRuns } from '../utils/abort-previous-runs';
+import { signalizedProcess } from '../utils/signalized-process';
+import { useOnMount } from './use-on-mount';
+import { useStylePropResolver } from './use-style-prop-resolver';
+import { useStyleRenderer } from './use-style-renderer';
+
+type ProviderAndStyleItems = { provider: StylesProvider; items: StyleItem[] };
+
+type ProviderAndSubscriber = { provider: StylesProvider; subscriber: () => Promise< void > };
+
+type ProviderAndStyleItemsMap = Record< string, ProviderAndStyleItems >;
+
+export function useStyleItems() {
+	const resolve = useStylePropResolver();
+	const renderStyles = useStyleRenderer( resolve );
+
+	const [ styleItems, setStyleItems ] = useState< ProviderAndStyleItemsMap >( {} );
+
+	const providerAndSubscribers = useMemo( () => {
+		return stylesRepository.getProviders().map( ( provider ): ProviderAndSubscriber => {
+			return {
+				provider,
+				subscriber: createProviderSubscriber( {
+					provider,
+					renderStyles,
+					setStyleItems,
+				} ),
+			};
+		} );
+	}, [ renderStyles ] );
+
+	useEffect( () => {
+		const unsubscribes = providerAndSubscribers.map( ( { provider, subscriber } ) =>
+			provider.subscribe( subscriber )
+		);
+
+		return () => {
+			unsubscribes.forEach( ( unsubscribe ) => unsubscribe() );
+		};
+	}, [ providerAndSubscribers ] );
+
+	useOnMount( () => {
+		registerDataHook( 'after', 'editor/documents/attach-preview', async () => {
+			const promises = providerAndSubscribers.map( async ( { subscriber } ) => subscriber() );
+
+			await Promise.all( promises );
+		} );
+	} );
+
+	return Object.values( styleItems )
+		.sort( ( { provider: providerA }, { provider: providerB } ) => providerA.priority - providerB.priority )
+		.flatMap( ( { items } ) => items );
+}
+
+type CreateProviderSubscriberArgs = {
+	provider: StylesProvider;
+	renderStyles: StyleRenderer;
+	setStyleItems: Dispatch< SetStateAction< ProviderAndStyleItemsMap > >;
+};
+
+function createProviderSubscriber( { provider, renderStyles, setStyleItems }: CreateProviderSubscriberArgs ) {
+	return abortPreviousRuns( ( abortController ) =>
+		signalizedProcess( abortController.signal )
+			.then( ( _, signal ) => renderStyles( { styles: provider.actions.get(), signal } ) )
+			.then( ( items ) => {
+				setStyleItems( ( prev ) => ( {
+					...prev,
+					[ provider.key ]: { provider, items },
+				} ) );
+			} )
+			.execute()
+	);
+}

package/src/hooks/use-style-prop-resolver.ts

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+import { getStylesSchema } from '@elementor/editor-styles';
+
+import { createPropsResolver } from '../renderers/create-props-resolver';
+import { styleTransformersRegistry } from '../style-transformers-registry';
+import { enqueueFont } from '../sync/enqueue-font';
+
+export function useStylePropResolver() {
+	return useMemo( () => {
+		return createPropsResolver( {
+			transformers: styleTransformersRegistry,
+			schema: getStylesSchema(),
+			onPropResolve: ( { key, value } ) => {
+				if ( key !== 'font-family' || typeof value !== 'string' ) {
+					return;
+				}
+
+				enqueueFont( value );
+			},
+		} );
+	}, [] );
+}

package/src/hooks/use-style-renderer.ts

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import { useBreakpointsMap } from '@elementor/editor-responsive';
+
+import { type PropsResolver } from '../renderers/create-props-resolver';
+import { createStylesRenderer } from '../renderers/create-styles-renderer';
+
+const SELECTOR_PREFIX = '.elementor';
+
+export function useStyleRenderer( resolve: PropsResolver ) {
+	const breakpoints = useBreakpointsMap();
+
+	return useMemo( () => {
+		return createStylesRenderer( {
+			selectorPrefix: SELECTOR_PREFIX,
+			breakpoints,
+			resolve,
+		} );
+	}, [ resolve, breakpoints ] );
+}

package/src/index.ts

@@ -2,5 +2,6 @@ import { init } from './init';
 
 export { styleTransformersRegistry } from './style-transformers-registry';
 export { settingsTransformersRegistry } from './settings-transformers-registry';
+export { createTransformer } from './transformers/create-transformer';
 
 init();

package/src/init.tsx

@@ -1,17 +1,19 @@
 import { injectIntoTop } from '@elementor/editor';
 
 import { ElementsOverlays } from './components/elements-overlays';
+import { StyleRenderer } from './components/style-renderer';
 import { initSettingsTransformers } from './init-settings-transformers';
 import { initStyleTransformers } from './init-style-transformers';
-import { initStylesRenderer } from './init-styles-renderer';
 import { initLegacyViews } from './legacy/init-legacy-views';
+import { initLinkInLinkPrevention } from './prevent-link-in-link-commands';
 import { initStyleCommands } from './style-commands/init-style-commands';
 
 export function init() {
 	initStyleTransformers();
-	initStylesRenderer();
 	initStyleCommands();
 
+	initLinkInLinkPrevention();
+
 	initLegacyViews();
 
 	initSettingsTransformers();
@@ -20,4 +22,9 @@ export function init() {
 		id: 'elements-overlays',
 		component: ElementsOverlays,
 	} );
+
+	injectIntoTop( {
+		id: 'canvas-style-render',
+		component: StyleRenderer,
+	} );
 }

package/src/legacy/create-element-type.ts

@@ -27,6 +27,7 @@ export function createElementViewClassDeclaration(): typeof ElementView {
 			super.onRender( ...args );
 
 			this.#dispatchEvent( 'elementor/preview/atomic-widget/render' );
+			this.#dispatchPreviewEvent( 'elementor/element/render' );
 		}
 
 		// Dispatch `destroy` event so the overlay layer will be updated
@@ -34,6 +35,7 @@ export function createElementViewClassDeclaration(): typeof ElementView {
 			super.onDestroy( ...args );
 
 			this.#dispatchEvent( 'elementor/preview/atomic-widget/destroy' );
+			this.#dispatchPreviewEvent( 'elementor/element/destroy' );
 		}
 
 		attributes() {
@@ -77,6 +79,18 @@ export function createElementViewClassDeclaration(): typeof ElementView {
 			);
 		}
 
+		#dispatchPreviewEvent( eventType: string ) {
+			legacyWindow.elementor?.$preview?.[ 0 ]?.contentWindow.dispatchEvent(
+				new CustomEvent( eventType, {
+					detail: {
+						id: this.model.get( 'id' ),
+						type: this.model.get( 'widgetType' ),
+						element: this.getDomElement().get( 0 ),
+					},
+				} )
+			);
+		}
+
 		getContextMenuGroups() {
 			return super.getContextMenuGroups().filter( ( group ) => group.name !== 'save' );
 		}

package/src/legacy/create-templated-element-type.ts

@@ -3,8 +3,8 @@ import type { V1ElementConfig } from '@elementor/editor-elements';
 import { type DomRenderer } from '../renderers/create-dom-renderer';
 import { createPropsResolver, type PropsResolver } from '../renderers/create-props-resolver';
 import { settingsTransformersRegistry } from '../settings-transformers-registry';
+import { signalizedProcess } from '../utils/signalized-process';
 import { createElementViewClassDeclaration } from './create-element-type';
-import { signalizedProcess } from './signalized-process';
 import { type ElementType, type ElementView, type LegacyWindow } from './types';
 
 type CreateTypeOptions = {

package/src/legacy/types.ts

@@ -15,6 +15,13 @@ export type LegacyWindow = Window & {
 		elementsManager: {
 			registerElementType: ( type: ElementType ) => void;
 		};
+		$preview: [
+			{
+				contentWindow: {
+					dispatchEvent: ( event: Event ) => void;
+				};
+			},
+		];
 	};
 };
 
@@ -62,6 +69,7 @@ export declare class ElementView {
 type JQueryElement = {
 	find: ( selector: string ) => JQueryElement;
 	html: ( html: string ) => void;
+	get: ( index: number ) => HTMLElement;
 };
 
 type BackboneModel< Model extends object > = {
@@ -72,6 +80,7 @@ type BackboneModel< Model extends object > = {
 type ElementModel = {
 	id: string;
 	settings: BackboneModel< Props >;
+	widgetType: string;
 };
 
 type ToJSON< T > = {

package/src/prevent-link-in-link-commands.ts

@@ -0,0 +1,132 @@
+import {
+	getAnchoredAncestorId,
+	getAnchoredDescendantId,
+	isElementAnchored,
+	type V1Element,
+} from '@elementor/editor-elements';
+import { type NotificationData, notify } from '@elementor/editor-notifications';
+import { blockCommand } from '@elementor/editor-v1-adapters';
+import { type ButtonProps } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { type CanvasExtendedWindow } from './sync/types';
+
+export function initLinkInLinkPrevention() {
+	blockCommand( {
+		command: 'document/elements/paste',
+		condition: blockLinkInLinkPaste,
+	} );
+
+	blockCommand( {
+		command: 'document/elements/move',
+		condition: blockLinkInLinkMove,
+	} );
+}
+
+type PasteArgs = {
+	containers?: V1Element[];
+	container?: V1Element;
+	storageType?: string;
+};
+
+type MoveArgs = {
+	containers?: V1Element[];
+	container?: V1Element;
+	target?: V1Element;
+};
+
+export type StorageContent = {
+	clipboard?: {
+		elements?: { id?: string }[];
+	};
+};
+
+const learnMoreActionProps: Partial< ButtonProps > = {
+	href: 'https://go.elementor.com/element-link-inside-link-infotip',
+	target: '_blank',
+	color: 'inherit',
+	variant: 'text',
+	sx: {
+		marginInlineStart: '20px',
+	},
+	children: 'Learn more',
+};
+
+function blockLinkInLinkPaste( args: PasteArgs ): boolean {
+	const { containers = [ args.container ], storageType } = args;
+	const targetElements = containers;
+
+	if ( storageType !== 'localstorage' ) {
+		return false;
+	}
+
+	const data = ( window as CanvasExtendedWindow )?.elementorCommon?.storage?.get();
+
+	if ( ! data?.clipboard?.elements ) {
+		return false;
+	}
+
+	const sourceElements = data.clipboard.elements;
+
+	const notification: NotificationData = {
+		type: 'default',
+		message: __(
+			"To paste a link to this element, first remove the link from it's parent container.",
+			'elementor'
+		),
+		id: 'paste-in-link-blocked',
+		additionalActionProps: [ learnMoreActionProps ],
+	};
+
+	const blocked = shouldBlock( sourceElements, targetElements );
+
+	if ( blocked ) {
+		notify( notification );
+	}
+
+	return blocked;
+}
+
+function blockLinkInLinkMove( args: MoveArgs ): boolean {
+	const { containers = [ args.container ], target } = args;
+	const sourceElements = containers;
+	const targetElement = target;
+
+	const notification: NotificationData = {
+		type: 'default',
+		message: __( "To drag a link to this element, first remove the link from it's parent container.", 'elementor' ),
+		id: 'move-in-link-blocked',
+		additionalActionProps: [ learnMoreActionProps ],
+	};
+
+	const isBlocked = shouldBlock( sourceElements, [ targetElement ] );
+
+	if ( isBlocked ) {
+		notify( notification );
+	}
+
+	return isBlocked;
+}
+
+function shouldBlock(
+	sourceElements?: ( { id?: string } | undefined )[],
+	targetElements?: ( V1Element | undefined )[]
+): boolean {
+	if ( ! sourceElements?.length || ! targetElements?.length ) {
+		return false;
+	}
+
+	const isSourceContainsAnAnchor = sourceElements.some( ( src ) => {
+		return src?.id ? isElementAnchored( src.id ) || !! getAnchoredDescendantId( src.id ) : false;
+	} );
+
+	if ( ! isSourceContainsAnAnchor ) {
+		return false;
+	}
+
+	const isTargetContainsAnAnchor = targetElements.some( ( target ) => {
+		return target?.id ? isElementAnchored( target.id ) || !! getAnchoredAncestorId( target.id ) : false;
+	} );
+
+	return isTargetContainsAnAnchor;
+}

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

@@ -2,7 +2,7 @@
 import type { BreakpointsMap } from '@elementor/editor-responsive';
 import { type StyleDefinition } from '@elementor/editor-styles';
 
-import renderStyles from '../render-styles';
+import { createStylesRenderer } from '../create-styles-renderer';
 
 describe( 'renderStyles', () => {
 	it( 'should render media queries', async () => {
@@ -25,18 +25,24 @@ describe( 'renderStyles', () => {
 
 		const resolve = jest.fn( ( { props } ) => props );
 
-		// Act.
-		const cssString = await renderStyles( {
-			styles: [ styleDef ],
-			resolve,
+		const renderStyles = createStylesRenderer( {
 			breakpoints: { tablet: { width: 992, type: 'max-width' } } as BreakpointsMap,
+			resolve,
 		} );
 
+		// Act.
+		const result = await renderStyles( { styles: [ styleDef ] } );
+
 		// Assert.
 		const defaultStyle = '.test{font-size:24px;}';
 		const tabletStyle = '@media(max-width:992px){.test{font-size:18px;}}';
 
-		expect( cssString ).toBe( `<style data-style-id="test">${ defaultStyle }${ tabletStyle }</style>` );
+		expect( result ).toEqual( [
+			{
+				id: 'test',
+				value: `${ defaultStyle }${ tabletStyle }`,
+			},
+		] );
 
 		expect( resolve ).toHaveBeenCalledTimes( 2 );
 		expect( resolve ).toHaveBeenNthCalledWith( 1, { props: { 'font-size': '24px' } } );
@@ -67,21 +73,25 @@ describe( 'renderStyles', () => {
 
 		const resolve = jest.fn( ( { props } ) => props );
 
-		// Act.
-		const cssString = await renderStyles( {
-			styles: [ styleDef ],
-			resolve,
+		const renderStyles = createStylesRenderer( {
 			breakpoints: { mobile: { width: 768, type: 'max-width' } } as BreakpointsMap,
+			resolve,
 		} );
 
+		// Act.
+		const cssString = await renderStyles( { styles: [ styleDef ] } );
+
 		// Assert.
 		const defaultStyle = '.test{font-size:24px;}';
 		const hoverStyle = '.test:hover{font-size:18px;}';
 		const focusStyle = '@media(max-width:768px){.test:focus{font-size:12px;}}';
 
-		expect( cssString ).toBe(
-			`<style data-style-id="test">${ defaultStyle }${ hoverStyle }${ focusStyle }</style>`
-		);
+		expect( cssString ).toEqual( [
+			{
+				id: 'test',
+				value: `${ defaultStyle }${ hoverStyle }${ focusStyle }`,
+			},
+		] );
 	} );
 
 	it( 'should add selector prefix to the output', async () => {
@@ -100,15 +110,21 @@ describe( 'renderStyles', () => {
 
 		const resolve = jest.fn( ( { props } ) => props );
 
-		// Act.
-		const result = await renderStyles( {
-			styles: [ styleDef ],
-			resolve,
-			selectorPrefix: '.elementor-prefix',
+		const renderStyles = createStylesRenderer( {
 			breakpoints: {} as BreakpointsMap,
+			selectorPrefix: '.elementor-prefix',
+			resolve,
 		} );
 
+		// Act.
+		const result = await renderStyles( { styles: [ styleDef ] } );
+
 		// Assert.
-		expect( result ).toBe( `<style data-style-id="test">.elementor-prefix .test{font-size:24px;}</style>` );
+		expect( result ).toEqual( [
+			{
+				id: 'test',
+				value: '.elementor-prefix .test{font-size:24px;}',
+			},
+		] );
 	} );
 } );