@elementor/editor-canvas 0.13.1 → 0.15.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/legacy/__tests__/signalized-process.test.ts

@@ -0,0 +1,80 @@
+import { signalizedProcess } from '../signalized-process';
+
+describe( 'signalizedProcess', () => {
+	it( 'should run the steps in order', async () => {
+		// Arrange.
+		const abortController = new AbortController();
+
+		let value = '';
+
+		const process = signalizedProcess( abortController.signal )
+			.then( () => {
+				value += 'a';
+
+				return Promise.resolve( 'b' );
+			} )
+			.then( ( v ) => {
+				value += v;
+
+				return Promise.resolve( 'c' );
+			} )
+			.then( ( v ) => {
+				value += v;
+			} );
+
+		// Act.
+		await process.execute();
+
+		// Assert.
+		expect( value ).toBe( 'abc' );
+	} );
+
+	it( 'should not execute anything when the signal is aborted before the process has started', async () => {
+		// Arrange.
+		const abortController = new AbortController();
+
+		let value = 'initial';
+
+		const process = signalizedProcess( abortController.signal ).then( () => {
+			value = 'updated';
+		} );
+
+		// Act.
+		abortController.abort();
+
+		await process.execute();
+
+		// Assert.
+		expect( value ).toBe( 'initial' );
+	} );
+
+	it( 'should abort all queued steps when the signal is aborted', async () => {
+		// Arrange.
+		const abortController = new AbortController();
+
+		let value = '';
+
+		const process = signalizedProcess( abortController.signal )
+			.then( () => {
+				value += 'a';
+
+				return Promise.resolve( 'b' );
+			} )
+			.then( ( v ) => {
+				value += v;
+
+				abortController.abort();
+
+				return Promise.resolve( 'c' );
+			} )
+			.then( ( v ) => {
+				value += v;
+			} );
+
+		// Act.
+		await process.execute();
+
+		// Assert.
+		expect( value ).toBe( 'ab' );
+	} );
+} );

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

@@ -13,12 +13,12 @@ export function createElementType( type: string ): typeof ElementType {
 		}
 
 		getView() {
-			return createElementView();
+			return createElementViewClassDeclaration();
 		}
 	};
 }
 
-function createElementView(): typeof ElementView {
+export function createElementViewClassDeclaration(): typeof ElementView {
 	const legacyWindow = window as unknown as LegacyWindow;
 
 	return class extends legacyWindow.elementor.modules.elements.views.Widget {

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

@@ -0,0 +1,131 @@
+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 { createElementViewClassDeclaration } from './create-element-type';
+import { signalizedProcess } from './signalized-process';
+import { type ElementType, type ElementView, type LegacyWindow } from './types';
+
+type CreateTypeOptions = {
+	type: string;
+	renderer: DomRenderer;
+	element: TemplatedElementConfig;
+};
+
+type TemplatedElementConfig = Required<
+	Pick< V1ElementConfig, 'twig_templates' | 'twig_main_template' | 'atomic_props_schema' | 'base_styles_dictionary' >
+>;
+
+export function createTemplatedElementType( { type, renderer, element }: CreateTypeOptions ): typeof ElementType {
+	const legacyWindow = window as unknown as LegacyWindow;
+
+	Object.entries( element.twig_templates ).forEach( ( [ key, template ] ) => {
+		renderer.register( key, template );
+	} );
+
+	const propsResolver = createPropsResolver( {
+		transformers: settingsTransformersRegistry,
+		schema: element.atomic_props_schema,
+	} );
+
+	return class extends legacyWindow.elementor.modules.elements.types.Widget {
+		getType() {
+			return type;
+		}
+
+		getView() {
+			return createTemplatedElementViewClassDeclaration( {
+				type,
+				renderer,
+				propsResolver,
+				baseStylesDictionary: element.base_styles_dictionary,
+				templateKey: element.twig_main_template,
+			} );
+		}
+	};
+}
+
+export function canBeTemplated( element: Partial< TemplatedElementConfig > ): element is TemplatedElementConfig {
+	return !! (
+		element.atomic_props_schema &&
+		element.twig_templates &&
+		element.twig_main_template &&
+		element.base_styles_dictionary
+	);
+}
+
+type CreateViewOptions = {
+	type: string;
+	renderer: DomRenderer;
+	propsResolver: PropsResolver;
+	templateKey: string;
+	baseStylesDictionary: Record< string, string >;
+};
+
+function createTemplatedElementViewClassDeclaration( {
+	type,
+	renderer,
+	propsResolver: resolveProps,
+	templateKey,
+	baseStylesDictionary,
+}: CreateViewOptions ): typeof ElementView {
+	const BaseView = createElementViewClassDeclaration();
+
+	return class extends BaseView {
+		#abortController: AbortController | null = null;
+
+		getTemplateType() {
+			return 'twig';
+		}
+
+		renderOnChange() {
+			this.render();
+		}
+
+		// Overriding Marionette original render method to inject our renderer.
+		async _renderTemplate() {
+			this.#beforeRenderTemplate();
+
+			this.#abortController?.abort();
+			this.#abortController = new AbortController();
+
+			const process = signalizedProcess( this.#abortController.signal )
+				.then( ( _, signal ) => {
+					const settings = this.model.get( 'settings' ).toJSON();
+
+					return resolveProps( {
+						props: settings,
+						signal,
+					} );
+				} )
+				.then( ( resolvedSettings ) => {
+					// Same as the Backend.
+					const context = {
+						id: this.model.get( 'id' ),
+						type,
+						settings: resolvedSettings,
+						base_styles: baseStylesDictionary,
+					};
+
+					return renderer.render( templateKey, context );
+				} )
+				.then( ( html ) => this.$el.html( html ) );
+
+			await process.execute();
+
+			this.#afterRenderTemplate();
+		}
+
+		// Emulating the original Marionette behavior.
+		#beforeRenderTemplate() {
+			this.triggerMethod( 'before:render:template' );
+		}
+
+		#afterRenderTemplate() {
+			this.bindUIElements();
+
+			this.triggerMethod( 'render:template' );
+		}
+	};
+}

package/src/legacy/init-legacy-views.ts

@@ -1,7 +1,9 @@
 import { getWidgetsCache } from '@elementor/editor-elements';
 import { __privateListenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';
 
+import { createDomRenderer } from '../renderers/create-dom-renderer';
 import { createElementType } from './create-element-type';
+import { canBeTemplated, createTemplatedElementType } from './create-templated-element-type';
 import type { LegacyWindow } from './types';
 
 export function initLegacyViews() {
@@ -9,12 +11,16 @@ export function initLegacyViews() {
 		const config = getWidgetsCache() ?? {};
 		const legacyWindow = window as unknown as LegacyWindow;
 
+		const renderer = createDomRenderer();
+
 		Object.entries( config ).forEach( ( [ type, element ] ) => {
 			if ( ! element.atomic ) {
 				return;
 			}
 
-			const ElementType = createElementType( type );
+			const ElementType = canBeTemplated( element )
+				? createTemplatedElementType( { type, renderer, element } )
+				: createElementType( type );
 
 			legacyWindow.elementor.elementsManager.registerElementType( new ElementType() );
 		} );

package/src/legacy/signalized-process.ts

@@ -0,0 +1,35 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyFn = ( ...args: any[] ) => any;
+
+type SignalizedProcess< TNextArg = never > = {
+	then: < TReturn >(
+		cb: ( arg: TNextArg, signal: AbortSignal ) => TReturn
+	) => SignalizedProcess< Awaited< TReturn > >;
+
+	execute: () => Promise< void >;
+};
+
+export function signalizedProcess< TNextArg = never >(
+	signal: AbortSignal,
+	steps: AnyFn[] = []
+): SignalizedProcess< TNextArg > {
+	return {
+		then: ( cb ) => {
+			steps.push( cb );
+
+			return signalizedProcess( signal, steps );
+		},
+
+		execute: async () => {
+			let lastResult: TNextArg | undefined;
+
+			for ( const step of steps ) {
+				if ( signal.aborted ) {
+					break;
+				}
+
+				lastResult = await step( lastResult, signal );
+			}
+		},
+	};
+}

package/src/legacy/types.ts

@@ -1,3 +1,5 @@
+import { type Props } from '@elementor/editor-props';
+
 export type LegacyWindow = Window & {
 	elementor: {
 		modules: {
@@ -25,7 +27,7 @@ export declare class ElementType {
 export declare class ElementView {
 	$el: JQueryElement;
 
-	model: BackboneModel;
+	model: BackboneModel< ElementModel >;
 
 	onRender( ...args: unknown[] ): void;
 
@@ -40,18 +42,40 @@ export declare class ElementView {
 	getHandlesOverlay(): JQueryElement | null;
 
 	getContextMenuGroups(): ContextMenuGroup[];
+
+	/**
+	 * Templated view methods:
+	 */
+	getTemplateType(): string;
+
+	renderOnChange(): void;
+
+	render(): void;
+
+	_renderTemplate(): void;
+
+	triggerMethod( method: string ): void;
+
+	bindUIElements(): void;
 }
 
 type JQueryElement = {
 	find: ( selector: string ) => JQueryElement;
+	html: ( html: string ) => void;
 };
 
-type BackboneModel = {
+type BackboneModel< Model extends object > = {
 	get: < T extends keyof Model >( key: T ) => Model[ T ];
+	toJSON: () => ToJSON< Model >;
 };
 
-type Model = {
+type ElementModel = {
 	id: string;
+	settings: BackboneModel< Props >;
+};
+
+type ToJSON< T > = {
+	[ K in keyof T ]: T[ K ] extends BackboneModel< infer M > ? ToJSON< M > : T[ K ];
 };
 
 type ContextMenuGroup = {

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