@elementor/editor-canvas 0.12.0 → 0.13.0

package/src/__tests__/settings-props-resolver.test.ts

@@ -0,0 +1,193 @@
+import {
+	booleanPropTypeUtil,
+	classesPropTypeUtil,
+	imageAttachmentIdPropType,
+	imagePropTypeUtil,
+	imageSrcPropTypeUtil,
+	linkPropTypeUtil,
+	numberPropTypeUtil,
+	type Props,
+	type PropsSchema,
+	stringPropTypeUtil,
+	urlPropTypeUtil,
+} from '@elementor/editor-props';
+import { getMediaAttachment } from '@elementor/wp-media';
+
+import { initSettingsTransformers } from '../init-settings-transformers';
+import { createPropsResolver } from '../renderers/create-props-resolver';
+import { settingsTransformersRegistry } from '../settings-transformers-registry';
+import { mockAttachmentData } from './mock-attachment-data';
+import {
+	booleanPropType,
+	classesPropType,
+	imagePropType,
+	linkPropType,
+	numberPropType,
+	stringPropType,
+	urlPropType,
+} from './prop-types';
+
+jest.mock( '@elementor/wp-media' );
+
+type Payload = {
+	name: string;
+	prepare?: () => void;
+	props: Props;
+	schema: PropsSchema;
+	expected: Record< string, unknown >;
+};
+
+describe( 'settings props resolver', () => {
+	it.each< Payload >( [
+		{
+			name: 'plain props',
+			props: {
+				string: stringPropTypeUtil.create( 'test' ),
+				url: urlPropTypeUtil.create( 'url' ),
+				number: numberPropTypeUtil.create( 123 ),
+				boolean: booleanPropTypeUtil.create( true ),
+			},
+			schema: {
+				string: stringPropType(),
+				number: numberPropType(),
+				boolean: booleanPropType(),
+				url: urlPropType(),
+			},
+			expected: {
+				string: 'test',
+				url: 'url',
+				number: 123,
+				boolean: true,
+			},
+		},
+		{
+			name: 'classes',
+			props: {
+				classes: classesPropTypeUtil.create( [
+					'test-1',
+					'test-2',
+					'',
+					null as unknown as string,
+					undefined as unknown as string,
+				] ),
+			},
+			schema: {
+				classes: classesPropType(),
+			},
+			expected: {
+				classes: [ 'test-1', 'test-2' ],
+			},
+		},
+		{
+			name: 'link',
+			props: {
+				link1: linkPropTypeUtil.create( {
+					destination: 'https://elementor.com/blank',
+					isTargetBlank: true,
+				} ),
+				link2: linkPropTypeUtil.create( {
+					destination: 'https://elementor.com/self',
+					isTargetBlank: false,
+				} ),
+			},
+			schema: {
+				link1: linkPropType(),
+				link2: linkPropType(),
+			},
+			expected: {
+				link1: { href: 'https://elementor.com/blank', target: '_blank' },
+				link2: { href: 'https://elementor.com/self', target: '_self' },
+			},
+		},
+		{
+			name: 'image (url)',
+			props: {
+				image: imagePropTypeUtil.create( {
+					src: imageSrcPropTypeUtil.create( {
+						id: null,
+						url: urlPropTypeUtil.create( 'https://localhost.test/test-image.png' ),
+					} ),
+					size: stringPropTypeUtil.create( 'full' ),
+				} ),
+			},
+			schema: {
+				image: imagePropType(),
+			},
+			expected: {
+				image: {
+					src: 'https://localhost.test/test-image.png',
+				},
+			},
+		},
+		{
+			name: 'image (attachment with size)',
+			prepare: () => {
+				jest.mocked( getMediaAttachment ).mockImplementation(
+					( args ) => Promise.resolve( mockAttachmentData( args.id ) ) as never
+				);
+			},
+			props: {
+				image: imagePropTypeUtil.create( {
+					src: imageSrcPropTypeUtil.create( {
+						id: imageAttachmentIdPropType.create( 123 ),
+						url: null,
+					} ),
+					size: stringPropTypeUtil.create( 'large' ),
+				} ),
+			},
+			schema: {
+				image: imagePropType(),
+			},
+			expected: {
+				image: {
+					src: 'large-image-url-123',
+					height: 3,
+					width: 3,
+				},
+			},
+		},
+		{
+			name: 'image (attachment with non existing size)',
+			prepare: () => {
+				jest.mocked( getMediaAttachment ).mockImplementation(
+					( args ) => Promise.resolve( mockAttachmentData( args.id ) ) as never
+				);
+			},
+			props: {
+				image: imagePropTypeUtil.create( {
+					src: imageSrcPropTypeUtil.create( {
+						id: imageAttachmentIdPropType.create( 123 ),
+						url: null,
+					} ),
+					size: stringPropTypeUtil.create( 'non-existing-size' ),
+				} ),
+			},
+			schema: {
+				image: imagePropType(),
+			},
+			expected: {
+				image: {
+					src: 'original-image-url-123',
+					height: 0,
+					width: 0,
+				},
+			},
+		},
+	] )( 'it should resolve props for `$name`', async ( { prepare, props, expected, schema } ) => {
+		// Arrange.
+		prepare?.();
+
+		initSettingsTransformers();
+
+		const resolve = createPropsResolver( {
+			transformers: settingsTransformersRegistry.all(),
+			schema,
+		} );
+
+		// Act.
+		const result = await resolve( { props } );
+
+		// Assert.
+		expect( result ).toStrictEqual( expected );
+	} );
+} );

package/src/__tests__/styles-prop-resolver.test.ts

@@ -30,8 +30,10 @@ import { getMediaAttachment } from '@elementor/wp-media';
 import { initStyleTransformers } from '../init-style-transformers';
 import { createPropsResolver } from '../renderers/create-props-resolver';
 import { stylesSchemaMock } from './__mocks__/styles-schema';
+import { mockAttachmentData } from './mock-attachment-data';
 
 jest.mock( '@elementor/wp-media' );
+jest.mock( '../style-commands/init-style-commands' );
 
 type Payload = {
 	name: string;
@@ -200,8 +202,12 @@ describe( 'styles prop resolver', () => {
 				background: backgroundPropTypeUtil.create( {
 					color: colorPropTypeUtil.create( '#000' ),
 					'background-overlay': backgroundOverlayPropTypeUtil.create( [
-						backgroundColorOverlayPropTypeUtil.create( 'blue' ),
-						backgroundColorOverlayPropTypeUtil.create( 'yellow' ),
+						backgroundColorOverlayPropTypeUtil.create( {
+							color: colorPropTypeUtil.create( 'blue' ),
+						} ),
+						backgroundColorOverlayPropTypeUtil.create( {
+							color: colorPropTypeUtil.create( 'yellow' ),
+						} ),
 						backgroundImageOverlayPropTypeUtil.create( {
 							image: imagePropTypeUtil.create( {
 								src: imageSrcPropTypeUtil.create( {
@@ -352,17 +358,3 @@ describe( 'styles prop resolver', () => {
 		expect( result ).toStrictEqual( expected );
 	} );
 } );
-
-const mockAttachmentData = ( id: number | null ) => {
-	const originalUrl = `original-image-url-${ id }`;
-
-	return {
-		url: originalUrl,
-		sizes: {
-			thumbnail: { url: `thumbnail-image-url-${ id }` },
-			medium_large: { url: `medium_large-image-url-${ id }` },
-			large: { url: `large-image-url-${ id }` },
-			full: { url: originalUrl },
-		},
-	};
-};

package/src/index.ts

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

package/src/init-settings-transformers.ts

@@ -0,0 +1,19 @@
+import { settingsTransformersRegistry } from './settings-transformers-registry';
+import { arrayTransformer } from './transformers/settings/array-transformer';
+import { linkTransformer } from './transformers/settings/link-transformer';
+import { imageSrcTransformer } from './transformers/shared/image-src-transformer';
+import { imageTransformer } from './transformers/shared/image-transformer';
+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 );
+}

package/src/init-style-transformers.ts

@@ -1,4 +1,7 @@
 import { styleTransformersRegistry } from './style-transformers-registry';
+import { imageSrcTransformer } from './transformers/shared/image-src-transformer';
+import { imageTransformer } from './transformers/shared/image-transformer';
+import { plainTransformer } from './transformers/shared/plain-transformer';
 import { backgroundColorOverlayTransformer } from './transformers/styles/background-color-overlay-transformer';
 import { backgroundGradientOverlayTransformer } from './transformers/styles/background-gradient-overlay-transformer';
 import { backgroundImageOverlayTransformer } from './transformers/styles/background-image-overlay-transformer';
@@ -8,10 +11,6 @@ import { backgroundTransformer } from './transformers/styles/background-transfor
 import { colorStopTransformer } from './transformers/styles/color-stop-transformer';
 import { createCombineArrayTransformer } from './transformers/styles/create-combine-array-transformer';
 import { createMultiPropsTransformer } from './transformers/styles/create-multi-props-transformer';
-import { imageAttachmentTransformer } from './transformers/styles/image-attachment-transformer';
-import { imageSrcTransformer } from './transformers/styles/image-src-transformer';
-import { imageTransformer } from './transformers/styles/image-transformer';
-import { primitiveTransformer } from './transformers/styles/primitive-transformer';
 import { shadowTransformer } from './transformers/styles/shadow-transformer';
 import { sizeTransformer } from './transformers/styles/size-transformer';
 import { strokeTransformer } from './transformers/styles/stroke-transformer';
@@ -28,10 +27,10 @@ export function initStyleTransformers() {
 				( { propKey, key } ) => `${ propKey }-${ key }`
 			)
 		)
-		.register( 'color', primitiveTransformer )
-		.register( 'number', primitiveTransformer )
-		.register( 'string', primitiveTransformer )
-		.register( 'url', primitiveTransformer )
+		.register( 'color', plainTransformer )
+		.register( 'number', plainTransformer )
+		.register( 'string', plainTransformer )
+		.register( 'url', plainTransformer )
 		.register( 'box-shadow', createCombineArrayTransformer( ',' ) )
 		.register( 'background', backgroundTransformer )
 		.register( 'background-overlay', createCombineArrayTransformer( ',' ) )
@@ -42,7 +41,7 @@ export function initStyleTransformers() {
 		.register( 'color-stop', colorStopTransformer )
 		.register( 'background-image-position-offset', backgroundImagePositionOffsetTransformer )
 		.register( 'background-image-size-scale', backgroundImageSizeScaleTransformer )
-		.register( 'image-attachment-id', imageAttachmentTransformer )
+		.register( 'image-attachment-id', plainTransformer )
 		.register( 'image-src', imageSrcTransformer )
 		.register( 'image', imageTransformer )
 		.register(

package/src/init-styles-renderer.ts

@@ -1,7 +1,7 @@
 import { getBreakpointsMap } from '@elementor/editor-responsive';
 import { getStylesSchema } from '@elementor/editor-styles';
 import { stylesRepository } from '@elementor/editor-styles-repository';
-import { __privateListenTo as listenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';
+import { __privateListenTo as listenTo, registerDataHook, v1ReadyEvent } from '@elementor/editor-v1-adapters';
 
 import { createPropsResolver } from './renderers/create-props-resolver';
 import renderStyles from './renderers/render-styles';
@@ -22,7 +22,7 @@ export function initStylesRenderer() {
 			onPropResolve: enqueueUsedFonts,
 		} );
 
-		stylesRepository.subscribe( async () => {
+		const injectStyleElements = async () => {
 			const styleContainer = getStylesContainer();
 
 			// Styles should be printed in a reversed order, so the high priority styles will be printed last.
@@ -42,7 +42,13 @@ export function initStylesRenderer() {
 				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 );
 	} );
 }
 

package/src/init.tsx

@@ -1,12 +1,20 @@
 import { injectIntoTop } from '@elementor/editor';
 
 import { ElementsOverlays } from './components/elements-overlays';
+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 { initStyleCommands } from './style-commands/init-style-commands';
 
 export function init() {
 	initStyleTransformers();
 	initStylesRenderer();
+	initStyleCommands();
+
+	initLegacyViews();
+
+	initSettingsTransformers();
 
 	injectIntoTop( {
 		id: 'elements-overlays',

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

@@ -0,0 +1,84 @@
+import { type ElementType, type ElementView, type LegacyWindow } from './types';
+
+// Technically it shouldn't have a return type annotation, but for some
+// reason TypeScript can't infer the types properly when emitting DTS.
+//
+// See: https://github.com/microsoft/TypeScript/issues/9944#issuecomment-244448079
+export function createElementType( type: string ): typeof ElementType {
+	const legacyWindow = window as unknown as LegacyWindow;
+
+	return class extends legacyWindow.elementor.modules.elements.types.Widget {
+		getType() {
+			return type;
+		}
+
+		getView() {
+			return createElementView();
+		}
+	};
+}
+
+function createElementView(): typeof ElementView {
+	const legacyWindow = window as unknown as LegacyWindow;
+
+	return class extends legacyWindow.elementor.modules.elements.views.Widget {
+		// Dispatch `render` event so the overlay layer will be updated
+		onRender( ...args: unknown[] ) {
+			super.onRender( ...args );
+
+			this.#dispatchEvent( 'elementor/preview/atomic-widget/render' );
+		}
+
+		// Dispatch `destroy` event so the overlay layer will be updated
+		onDestroy( ...args: unknown[] ) {
+			super.onDestroy( ...args );
+
+			this.#dispatchEvent( 'elementor/preview/atomic-widget/destroy' );
+		}
+
+		attributes() {
+			return {
+				...super.attributes(),
+
+				// Mark the widget as atomic, so external APIs (such as the overlay layer) can reference it.
+				'data-atomic': '',
+
+				// Make the wrapper is non-existent in terms of CSS to mimic the frontend DOM tree.
+				style: 'display: contents !important;',
+			};
+		}
+
+		// Removes behaviors that are not needed for atomic widgets (that are implemented in the overlay layer).
+		behaviors() {
+			const disabledBehaviors = [ 'InlineEditing', 'Draggable', 'Resizable' ];
+
+			const behaviorsAsEntries = Object.entries( super.behaviors() ).filter(
+				( [ key ] ) => ! disabledBehaviors.includes( key )
+			);
+
+			return Object.fromEntries( behaviorsAsEntries );
+		}
+
+		// Change the drag handle because the $el is not the draggable element (`display: contents`).
+		getDomElement() {
+			return this.$el.find( ':first-child' );
+		}
+
+		// Remove the overlay, so we can use the new overlay layer.
+		getHandlesOverlay() {
+			return null;
+		}
+
+		#dispatchEvent( eventType: string ) {
+			window.top?.dispatchEvent(
+				new CustomEvent( eventType, {
+					detail: { id: this.model.get( 'id' ) },
+				} )
+			);
+		}
+
+		getContextMenuGroups() {
+			return super.getContextMenuGroups().filter( ( group ) => group.name !== 'save' );
+		}
+	};
+}

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

@@ -0,0 +1,22 @@
+import { getWidgetsCache } from '@elementor/editor-elements';
+import { __privateListenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';
+
+import { createElementType } from './create-element-type';
+import type { LegacyWindow } from './types';
+
+export function initLegacyViews() {
+	__privateListenTo( v1ReadyEvent(), () => {
+		const config = getWidgetsCache() ?? {};
+		const legacyWindow = window as unknown as LegacyWindow;
+
+		Object.entries( config ).forEach( ( [ type, element ] ) => {
+			if ( ! element.atomic ) {
+				return;
+			}
+
+			const ElementType = createElementType( type );
+
+			legacyWindow.elementor.elementsManager.registerElementType( new ElementType() );
+		} );
+	} );
+}

package/src/legacy/types.ts

@@ -0,0 +1,60 @@
+export type LegacyWindow = Window & {
+	elementor: {
+		modules: {
+			elements: {
+				types: {
+					Widget: typeof ElementType;
+				};
+				views: {
+					Widget: typeof ElementView;
+				};
+			};
+		};
+		elementsManager: {
+			registerElementType: ( type: ElementType ) => void;
+		};
+	};
+};
+
+export declare class ElementType {
+	getType(): string;
+
+	getView(): typeof ElementView;
+}
+
+export declare class ElementView {
+	$el: JQueryElement;
+
+	model: BackboneModel;
+
+	onRender( ...args: unknown[] ): void;
+
+	onDestroy( ...args: unknown[] ): void;
+
+	attributes(): Record< string, unknown >;
+
+	behaviors(): Record< string, unknown >;
+
+	getDomElement(): JQueryElement;
+
+	getHandlesOverlay(): JQueryElement | null;
+
+	getContextMenuGroups(): ContextMenuGroup[];
+}
+
+type JQueryElement = {
+	find: ( selector: string ) => JQueryElement;
+};
+
+type BackboneModel = {
+	get: < T extends keyof Model >( key: T ) => Model[ T ];
+};
+
+type Model = {
+	id: string;
+};
+
+type ContextMenuGroup = {
+	name: string;
+	action: unknown[];
+};

package/src/settings-transformers-registry.ts

@@ -0,0 +1,3 @@
+import { createTransformersRegistry } from './transformers/create-transformers-registry';
+
+export const settingsTransformersRegistry = createTransformersRegistry();