@elementor/editor-canvas 0.13.0 → 0.14.0

package/src/components/elements-overlays.tsx

@@ -1,12 +1,17 @@
 import * as React from 'react';
-import { useElementsDomRef, useSelectedElement } from '@elementor/editor-elements';
-import { __privateUseIsRouteActive as useIsRouteActive, useEditMode } from '@elementor/editor-v1-adapters';
+import { getElements, useSelectedElement } from '@elementor/editor-elements';
+import {
+	__privateUseIsRouteActive as useIsRouteActive,
+	__privateUseListenTo as useListenTo,
+	useEditMode,
+	windowEvent,
+} from '@elementor/editor-v1-adapters';
 
 import { ElementOverlay } from './element-overlay';
 
 export function ElementsOverlays() {
 	const selected = useSelectedElement();
-	const domElements = useElementsDomRef();
+	const elements = useElementsDom();
 	const currentEditMode = useEditMode();
 
 	const isEditMode = currentEditMode === 'edit';
@@ -16,12 +21,24 @@ export function ElementsOverlays() {
 
 	return (
 		isActive &&
-		domElements.map( ( el ) => (
-			<ElementOverlay
-				element={ el }
-				key={ el.dataset.id }
-				isSelected={ selected.element?.id === el.dataset.id }
-			/>
+		elements.map( ( [ id, element ] ) => (
+			<ElementOverlay key={ id } id={ id } element={ element } isSelected={ selected.element?.id === id } />
 		) )
 	);
 }
+
+const ELEMENTS_DATA_ATTR = 'atomic';
+
+type IdElementTuple = [ string, HTMLElement ];
+
+function useElementsDom() {
+	return useListenTo(
+		[ windowEvent( 'elementor/editor/element-rendered' ), windowEvent( 'elementor/editor/element-destroyed' ) ],
+		() => {
+			return getElements()
+				.filter( ( el ) => ELEMENTS_DATA_ATTR in ( el.view?.el?.dataset ?? {} ) )
+				.map( ( element ) => [ element.id, element.view?.getDomElement?.()?.get?.( 0 ) ] )
+				.filter( ( item ): item is IdElementTuple => !! item[ 1 ] );
+		}
+	);
+}

package/src/hooks/use-floating-on-element.ts

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { autoUpdate, offset, size, useFloating } from '@floating-ui/react';
 
 type Options = {
@@ -14,11 +14,7 @@ export function useFloatingOnElement( { element, isSelected }: Options ) {
 		open: isOpen || isSelected,
 		onOpenChange: setIsOpen,
 
-		// Add an animation frame to support scroll events (without it the floating element will stay in the same position).
-		whileElementsMounted: ( ...args ) => autoUpdate( ...args, { animationFrame: true } ),
-
-		// The first element in the canvas is `display: contents` so we need to use the first child.
-		elements: { reference: element.firstElementChild },
+		whileElementsMounted: autoUpdate,
 
 		middleware: [
 			// Match the floating element's size to the reference element.
@@ -36,6 +32,13 @@ export function useFloatingOnElement( { element, isSelected }: Options ) {
 		],
 	} );
 
+	useEffect( () => {
+		// Update the reference manually because Floating UI does not recalculate
+		// the reference element when it is being used in `option.elements.reference`.
+		// @link https://github.com/floating-ui/floating-ui/blob/master/packages/react/src/hooks/useFloatingRootContext.ts
+		refs.setReference( element );
+	}, [ element, refs ] );
+
 	return {
 		isVisible: isOpen || isSelected,
 		context,

package/src/init-settings-transformers.ts

@@ -7,13 +7,9 @@ import { plainTransformer } from './transformers/shared/plain-transformer';
 
 export function initSettingsTransformers() {
 	settingsTransformersRegistry
-		.register( 'string', plainTransformer )
-		.register( 'url', plainTransformer )
-		.register( 'number', plainTransformer )
-		.register( 'boolean', plainTransformer )
 		.register( 'classes', arrayTransformer )
 		.register( 'link', linkTransformer )
 		.register( 'image', imageTransformer )
 		.register( 'image-src', imageSrcTransformer )
-		.register( 'image-attachment-id', plainTransformer );
+		.registerFallback( plainTransformer );
 }

package/src/init-style-transformers.ts

@@ -27,10 +27,6 @@ export function initStyleTransformers() {
 				( { propKey, key } ) => `${ propKey }-${ key }`
 			)
 		)
-		.register( 'color', plainTransformer )
-		.register( 'number', plainTransformer )
-		.register( 'string', plainTransformer )
-		.register( 'url', plainTransformer )
 		.register( 'box-shadow', createCombineArrayTransformer( ',' ) )
 		.register( 'background', backgroundTransformer )
 		.register( 'background-overlay', createCombineArrayTransformer( ',' ) )
@@ -41,7 +37,6 @@ export function initStyleTransformers() {
 		.register( 'color-stop', colorStopTransformer )
 		.register( 'background-image-position-offset', backgroundImagePositionOffsetTransformer )
 		.register( 'background-image-size-scale', backgroundImageSizeScaleTransformer )
-		.register( 'image-attachment-id', plainTransformer )
 		.register( 'image-src', imageSrcTransformer )
 		.register( 'image', imageTransformer )
 		.register(
@@ -61,5 +56,6 @@ export function initStyleTransformers() {
 				[ 'start-start', 'start-end', 'end-start', 'end-end' ],
 				( { key } ) => `border-${ key }-radius`
 			)
-		);
+		)
+		.registerFallback( plainTransformer );
 }

package/src/init-styles-renderer.ts

@@ -17,7 +17,7 @@ export function initStylesRenderer() {
 		let abortController: AbortController | null = null;
 
 		const resolve = createPropsResolver( {
-			transformers: styleTransformersRegistry.all(),
+			transformers: styleTransformersRegistry,
 			schema: getStylesSchema(),
 			onPropResolve: enqueueUsedFonts,
 		} );

package/src/renderers/__tests__/create-dom-renderer.test.ts

@@ -0,0 +1,66 @@
+/* eslint-disable testing-library/render-result-naming-convention */
+import { createDomRenderer } from '../create-dom-renderer';
+
+describe( 'createDomRenderer', () => {
+	it.each( [
+		{
+			title: 'basic string',
+			template: 'Hello {{ name }}',
+			context: { name: 'StyleShit' },
+			expected: 'Hello StyleShit',
+		},
+		{
+			title: 'allowed html tags',
+			template: `<{{ tag | e( 'html_tag' ) }}></{{ tag | e( 'html_tag' ) }}>`,
+			context: { tag: 'a' },
+			expected: '<a></a>',
+		},
+		{
+			title: 'disallowed html tags',
+			template: `<{{ tag | e( 'html_tag' ) }}></{{ tag | e( 'html_tag' ) }}>`,
+			context: { tag: 'script' },
+			expected: '<div></div>',
+		},
+		{
+			title: 'allowed url (http)',
+			template: `{{ url | e( 'full_url' ) }}`,
+			context: { url: 'http://localhost/test-page' },
+			expected: 'http://localhost/test-page',
+		},
+		{
+			title: 'allowed url (https)',
+			template: `{{ url | e( 'full_url' ) }}`,
+			context: { url: 'https://localhost/test-page' },
+			expected: 'https://localhost/test-page',
+		},
+		{
+			title: 'allowed url (tel)',
+			template: `{{ url | e( 'full_url' ) }}`,
+			context: { url: 'tel:050-1234567' },
+			expected: 'tel:050-1234567',
+		},
+		{
+			title: 'allowed url (mailto)',
+			template: `{{ url | e( 'full_url' ) }}`,
+			context: { url: 'mailto:user@example.com' },
+			expected: 'mailto:user@example.com',
+		},
+		{
+			title: 'disallowed url',
+			template: `{{ url | e( 'full_url' ) }}`,
+			context: { url: 'javascript:alert(123)' },
+			expected: '',
+		},
+	] )( 'should render template with $title', async ( { template, context, expected } ) => {
+		// Arrange.
+		const domRenderer = createDomRenderer();
+
+		domRenderer.register( 'test-template', template );
+
+		// Act.
+		const result = await domRenderer.render( 'test-template', context );
+
+		// Assert.
+		expect( result ).toBe( expected );
+	} );
+} );

package/src/renderers/__tests__/create-props-resolver.test.ts

@@ -1,13 +1,19 @@
 import { createMockPropType } from 'test-utils';
 
 import { createTransformer } from '../../transformers/create-transformer';
+import { createTransformersRegistry } from '../../transformers/create-transformers-registry';
 import { createPropsResolver } from '../create-props-resolver';
 
 describe( 'createPropsResolver', () => {
 	it( 'should resolve simple props', async () => {
 		// Arrange.
+		const transformers = createTransformersRegistry().register(
+			'int',
+			createTransformer( ( value: number ) => value + 1 )
+		);
+
 		const resolve = createPropsResolver( {
-			transformers: { int: createTransformer( ( value: number ) => value + 1 ) },
+			transformers,
 			schema: { int: createMockPropType( { kind: 'plain', key: 'int' } ) },
 		} );
 
@@ -24,8 +30,13 @@ describe( 'createPropsResolver', () => {
 
 	it( 'should skip disabled props', async () => {
 		// Arrange.
+		const transformers = createTransformersRegistry().register(
+			'int',
+			createTransformer( ( value: number ) => value + 1 )
+		);
+
 		const resolve = createPropsResolver( {
-			transformers: { int: createTransformer( ( value: number ) => value + 1 ) },
+			transformers,
 			schema: { int: createMockPropType( { kind: 'plain', key: 'int' } ) },
 		} );
 
@@ -41,13 +52,18 @@ describe( 'createPropsResolver', () => {
 		} );
 
 		// Assert.
-		expect( result ).toEqual( {} );
+		expect( result ).toEqual( { int: null } );
 	} );
 
 	it( 'should fallback to default value when there is no value', async () => {
 		// Arrange.
+		const transformers = createTransformersRegistry().register(
+			'int',
+			createTransformer( ( value: number ) => value + 1 )
+		);
+
 		const resolve = createPropsResolver( {
-			transformers: { int: createTransformer( ( value: number ) => value + 1 ) },
+			transformers,
 			schema: {
 				int: createMockPropType( {
 					kind: 'plain',
@@ -66,8 +82,13 @@ describe( 'createPropsResolver', () => {
 
 	it( 'should skip props that are not in the schema', async () => {
 		// Arrange.
+		const transformers = createTransformersRegistry().register(
+			'int',
+			createTransformer( ( value: number ) => value + 1 )
+		);
+
 		const resolve = createPropsResolver( {
-			transformers: { int: createTransformer( ( value: number ) => value + 1 ) },
+			transformers,
 			schema: {
 				int: createMockPropType( { kind: 'plain', key: 'int' } ),
 			},
@@ -93,8 +114,13 @@ describe( 'createPropsResolver', () => {
 
 	it( "should skip props that don't have a transformer", async () => {
 		// Arrange.
+		const transformers = createTransformersRegistry().register(
+			'int',
+			createTransformer( ( value: number ) => value + 1 )
+		);
+
 		const resolve = createPropsResolver( {
-			transformers: { int: createTransformer( ( value: number ) => value + 1 ) },
+			transformers,
 			schema: {
 				int: createMockPropType( { kind: 'plain', key: 'int' } ),
 				invalid: createMockPropType( { kind: 'plain', key: 'invalid' } ),
@@ -116,17 +142,94 @@ describe( 'createPropsResolver', () => {
 		} );
 
 		// Assert.
-		expect( result ).toEqual( { int: 2 } );
+		expect( result ).toEqual( { int: 2, invalid: null } );
 	} );
 
-	it( 'should skip props when their transformer throws an error', async () => {
+	it( 'should not skip props if there is a fallback transformer', async () => {
+		// Arrange.
+		const transformers = createTransformersRegistry()
+			.register(
+				'int',
+				createTransformer( ( value: number ) => value + 1 )
+			)
+			.registerFallback( createTransformer( ( value: string ) => value + ' world' ) );
+
 		const resolve = createPropsResolver( {
-			transformers: {
-				int: createTransformer( ( value: number ) => value + 1 ),
-				throws: createTransformer< number >( () => {
-					throw new Error( 'Not Working!' );
-				} ),
+			transformers,
+			schema: {
+				int: createMockPropType( { kind: 'plain', key: 'int' } ),
+				greet: createMockPropType( { kind: 'plain', key: 'string' } ),
+			},
+		} );
+
+		// Act.
+		const result = await resolve( {
+			props: {
+				int: {
+					$$type: 'int',
+					value: 1,
+				},
+				greet: {
+					$$type: 'string',
+					value: 'hello',
+				},
+			},
+		} );
+
+		// Assert.
+		expect( result ).toEqual( { int: 2, greet: 'hello world' } );
+	} );
+
+	it( 'should return null if the prop is value is not match the prop type', async () => {
+		// Arrange.
+		const transformers = createTransformersRegistry()
+			.register(
+				'int',
+				createTransformer( ( value: number ) => value + 1 )
+			)
+			.registerFallback( createTransformer( ( value: string ) => value + ' world' ) );
+
+		const resolve = createPropsResolver( {
+			transformers,
+			schema: {
+				int: createMockPropType( { kind: 'plain', key: 'int' } ),
+				greet: createMockPropType( { kind: 'plain', key: 'string' } ),
 			},
+		} );
+
+		// Act.
+		const result = await resolve( {
+			props: {
+				int: {
+					$$type: 'int',
+					value: 1,
+				},
+				greet: {
+					$$type: 'int',
+					value: 2,
+				},
+			},
+		} );
+
+		// Assert.
+		expect( result ).toEqual( { int: 2, greet: null } );
+	} );
+
+	it( 'should skip props when their transformer throws an error', async () => {
+		const transformers = createTransformersRegistry()
+			.register(
+				'int',
+				createTransformer( ( value: number ) => value + 1 )
+			)
+			.register(
+				'throws',
+				createTransformer< number >( () => {
+					throw new Error( 'Not Working!' );
+				} )
+			);
+
+		const resolve = createPropsResolver( {
+			transformers,
 			schema: {
 				int: createMockPropType( { kind: 'plain', key: 'int' } ),
 				invalid: createMockPropType( { kind: 'plain', key: 'throws' } ),
@@ -148,14 +251,19 @@ describe( 'createPropsResolver', () => {
 		} );
 
 		// Assert.
-		expect( result ).toEqual( { int: 2 } );
+		expect( result ).toEqual( { int: 2, invalid: null } );
 	} );
 
 	it( 'should trigger onResolve when resolving a prop', async () => {
+		const transformers = createTransformersRegistry().register(
+			'int',
+			createTransformer( ( value: number ) => value + 1 )
+		);
+
 		const onResolve = jest.fn();
 
 		const resolve = createPropsResolver( {
-			transformers: { int: createTransformer( ( value: number ) => value + 1 ) },
+			transformers,
 			schema: {
 				int: createMockPropType( { kind: 'plain', key: 'int' } ),
 				int2: createMockPropType( { kind: 'plain', key: 'int' } ),

package/src/renderers/create-dom-renderer.ts

@@ -0,0 +1,56 @@
+import { createArrayLoader, createEnvironment, type TwingArrayLoader, type TwingEnvironment } from '@elementor/twing';
+
+type DomRenderer = {
+	register: TwingArrayLoader[ 'setTemplate' ];
+	render: TwingEnvironment[ 'render' ];
+};
+
+export function createDomRenderer(): DomRenderer {
+	const loader = createArrayLoader( {} );
+	const environment = createEnvironment( loader );
+
+	environment.registerEscapingStrategy( escapeHtmlTag, 'html_tag' );
+	environment.registerEscapingStrategy( escapeURL, 'full_url' );
+
+	return {
+		register: loader.setTemplate,
+		render: environment.render,
+	};
+}
+
+function escapeHtmlTag( value: string ) {
+	const allowedTags = [
+		'a',
+		'article',
+		'aside',
+		'button',
+		'div',
+		'footer',
+		'h1',
+		'h2',
+		'h3',
+		'h4',
+		'h5',
+		'h6',
+		'header',
+		'main',
+		'nav',
+		'p',
+		'section',
+		'span',
+	];
+
+	return allowedTags.includes( value ) ? value : 'div';
+}
+
+function escapeURL( value: string ) {
+	const allowedProtocols = [ 'http:', 'https:', 'mailto:', 'tel:' ];
+
+	try {
+		const parsed = new URL( value );
+
+		return allowedProtocols.includes( parsed.protocol ) ? value : '';
+	} catch {
+		return '';
+	}
+}

package/src/renderers/create-props-resolver.ts

@@ -7,11 +7,11 @@ import {
 	type PropValue,
 } from '@elementor/editor-props';
 
-import { type TransformersMap } from '../transformers/types';
+import { type TransformersRegistry } from '../transformers/create-transformers-registry';
 import { getMultiPropsValue, isMultiProps } from './multi-props';
 
 type CreatePropResolverArgs = {
-	transformers: TransformersMap;
+	transformers: TransformersRegistry;
 	schema: PropsSchema;
 	onPropResolve?: ( args: { key: string; value: unknown } ) => void;
 };
@@ -44,10 +44,6 @@ export function createPropsResolver( { transformers, schema: initialSchema, onPr
 
 				const transformed = await transform( { value, key, type, signal } );
 
-				if ( transformed === null ) {
-					return;
-				}
-
 				onPropResolve?.( { key, value: transformed } );
 
 				if ( isMultiProps( transformed ) ) {
@@ -86,6 +82,10 @@ export function createPropsResolver( { transformers, schema: initialSchema, onPr
 			}
 		}
 
+		if ( value.$$type !== type.key ) {
+			return null;
+		}
+
 		// Warning: This variable is loosely-typed - use with caution.
 		let resolvedValue = value.value;
 
@@ -105,7 +105,7 @@ export function createPropsResolver( { transformers, schema: initialSchema, onPr
 			);
 		}
 
-		const transformer = transformers[ value.$$type ];
+		const transformer = transformers.get( value.$$type );
 
 		if ( ! transformer ) {
 			return null;

package/src/renderers/render-styles.ts

@@ -97,6 +97,10 @@ async function propsToCss( { props, resolve, signal }: PropsToCssArgs ) {
 
 	return Object.entries( transformed )
 		.reduce< string[] >( ( acc, [ propName, propValue ] ) => {
+			if ( propValue === null ) {
+				return acc;
+			}
+
 			acc.push( propName + ':' + propValue + ';' );
 
 			return acc;

package/src/transformers/create-transformers-registry.ts

@@ -1,16 +1,27 @@
-import { type AnyTransformer, type TransformerName, type TransformersMap } from './types';
+import { type PropTypeKey } from '@elementor/editor-props';
+
+import { type AnyTransformer, type TransformersMap } from './types';
+
+export type TransformersRegistry = ReturnType< typeof createTransformersRegistry >;
 
 export function createTransformersRegistry() {
 	const transformers: TransformersMap = {};
 
+	let fallbackTransformer: AnyTransformer | null = null;
+
 	return {
-		register( name: TransformerName, transformer: AnyTransformer ) {
-			transformers[ name ] = transformer;
+		register( type: PropTypeKey, transformer: AnyTransformer ) {
+			transformers[ type ] = transformer;
+
+			return this;
+		},
+		registerFallback( transformer: AnyTransformer ) {
+			fallbackTransformer = transformer;
 
 			return this;
 		},
-		all() {
-			return transformers;
+		get( type: PropTypeKey ): AnyTransformer | null {
+			return transformers[ type ] ?? fallbackTransformer;
 		},
 	};
 }

package/src/transformers/styles/background-image-position-offset-transformer.ts

@@ -6,5 +6,5 @@ type BackgroundImagePositionOffset = {
 };
 
 export const backgroundImagePositionOffsetTransformer = createTransformer(
-	( { x = '0px', y = '0px' }: BackgroundImagePositionOffset ) => `${ x } ${ y }`
+	( { x, y }: BackgroundImagePositionOffset ) => `${ x ?? '0px' } ${ y ?? '0px' }`
 );

package/src/transformers/styles/background-image-size-scale-transformer.ts

@@ -6,5 +6,5 @@ type BackgroundImageSizeScale = {
 };
 
 export const backgroundImageSizeScaleTransformer = createTransformer(
-	( { width = 'auto', height = 'auto' }: BackgroundImageSizeScale ) => `${ width } ${ height }`
+	( { width, height }: BackgroundImageSizeScale ) => `${ width ?? 'auto' } ${ height ?? 'auto' }`
 );

package/src/transformers/types.ts

@@ -6,14 +6,10 @@ export type UnbrandedTransformer< TValue > = (
 	}
 ) => unknown;
 
-const brand = Symbol( 'transformer-brand' );
-
 export type Transformer< TValue > = UnbrandedTransformer< TValue > & {
-	[ brand ]: true;
+	__transformer: true;
 };
 
-export type TransformerName = string;
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type AnyTransformer = Transformer< any >;