@elementor/editor-canvas 0.9.0 → 0.11.0

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

@@ -0,0 +1,16 @@
+import { type AnyTransformer, type TransformerName, type TransformersMap } from './types';
+
+export function createTransformersRegistry() {
+	const transformers: TransformersMap = {};
+
+	return {
+		register( name: TransformerName, transformer: AnyTransformer ) {
+			transformers[ name ] = transformer;
+
+			return this;
+		},
+		all() {
+			return transformers;
+		},
+	};
+}

package/src/transformers/styles/background-color-overlay-transformer.ts

@@ -0,0 +1,5 @@
+import { createTransformer } from '../create-transformer';
+
+export const backgroundColorOverlayTransformer = createTransformer(
+	( value: string ) => `linear-gradient(${ value }, ${ value })`
+);

package/src/transformers/styles/background-image-overlay-transformer.ts

@@ -0,0 +1,28 @@
+import { createTransformer } from '../create-transformer';
+
+const DEFAULT_POSITION_VALUE = '0% 0%';
+
+type BackgroundImageOverlay = {
+	image?: string;
+	size?: string;
+	position?: string;
+	repeat?: string;
+	attachment?: string;
+};
+
+export const backgroundImageOverlayTransformer = createTransformer( ( value: BackgroundImageOverlay ) => {
+	const { image, size = null, position = null, repeat = null, attachment = null } = value;
+
+	if ( ! image ) {
+		return null;
+	}
+
+	const backgroundStyles = [
+		image,
+		repeat,
+		attachment,
+		size ? `${ position || DEFAULT_POSITION_VALUE } / ${ size }` : position,
+	].filter( Boolean );
+
+	return backgroundStyles.join( ' ' );
+} );

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

@@ -0,0 +1,10 @@
+import { createTransformer } from '../create-transformer';
+
+type BackgroundImagePositionOffset = {
+	x?: string;
+	y?: string;
+};
+
+export const backgroundImagePositionOffsetTransformer = createTransformer(
+	( { x = '0px', y = '0px' }: BackgroundImagePositionOffset ) => `${ x } ${ y }`
+);

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

@@ -0,0 +1,10 @@
+import { createTransformer } from '../create-transformer';
+
+type BackgroundImageSizeScale = {
+	width?: string;
+	height?: string;
+};
+
+export const backgroundImageSizeScaleTransformer = createTransformer(
+	( { width = 'auto', height = 'auto' }: BackgroundImageSizeScale ) => `${ width } ${ height }`
+);

package/src/transformers/styles/background-transformer.ts

@@ -0,0 +1,13 @@
+import { createTransformer } from '../create-transformer';
+
+type Background = {
+	'background-overlay'?: string;
+	color?: string;
+};
+
+export const backgroundTransformer = createTransformer( ( value: Background ) => {
+	const overlays = value[ 'background-overlay' ] ?? '';
+	const color = value.color ?? '';
+
+	return `${ overlays } ${ color }`.trim();
+} );

package/src/transformers/styles/create-combine-array-transformer.ts

@@ -0,0 +1,5 @@
+import { createTransformer } from '../create-transformer';
+
+export const createCombineArrayTransformer = ( delimiter: string ) => {
+	return createTransformer( ( value: Array< string | number > ) => value.filter( Boolean ).join( delimiter ) );
+};

package/src/transformers/styles/create-multi-props-transformer.ts

@@ -0,0 +1,14 @@
+import { createMultiPropsValue } from '../../renderers/multi-props';
+import { createTransformer } from '../create-transformer';
+
+type KeyGenerator = ( { propKey, key }: { propKey: string; key: string } ) => string;
+
+export const createMultiPropsTransformer = ( keys: string[], keyGenerator: KeyGenerator ) => {
+	return createTransformer< Record< string, string > >( ( value, { key: propKey } ) => {
+		const entries = keys
+			.filter( ( key ) => value[ key ] )
+			.map( ( key ) => [ keyGenerator( { propKey, key } ), value[ key ] ] );
+
+		return createMultiPropsValue( Object.fromEntries( entries ) );
+	} );
+};

package/src/transformers/styles/image-attachment-transformer.ts

@@ -0,0 +1,15 @@
+import { getMediaAttachment } from '@elementor/wp-media';
+
+import { createTransformer } from '../create-transformer';
+
+type ImageAttachmentId = number;
+
+export const imageAttachmentTransformer = createTransformer( async ( value: ImageAttachmentId ) => {
+	const attachment = await getMediaAttachment( { id: value } );
+
+	if ( ! attachment ) {
+		return null;
+	}
+
+	return attachment;
+} );

package/src/transformers/styles/image-src-transformer.ts

@@ -0,0 +1,11 @@
+import { createTransformer } from '../create-transformer';
+
+type ImageSrc = {
+	id?: unknown;
+	url?: unknown;
+};
+
+export const imageSrcTransformer = createTransformer( ( value: ImageSrc ) => ( {
+	attachment: value.id,
+	url: value.url,
+} ) );

package/src/transformers/styles/image-transformer.ts

@@ -0,0 +1,34 @@
+import { createTransformer } from '../create-transformer';
+
+type Image = {
+	src?: {
+		url?: string;
+		attachment?: {
+			url?: string;
+			sizes?: Record< string, { url: string } >;
+		};
+	};
+	size?: string;
+};
+
+export const imageTransformer = createTransformer( ( value: Image ) => {
+	const { src, size } = value;
+
+	if ( src?.url ) {
+		return `url(${ src.url })`;
+	}
+
+	const sizeUrl = src?.attachment?.sizes?.[ size ?? '' ]?.url;
+
+	if ( sizeUrl ) {
+		return `url(${ sizeUrl })`;
+	}
+
+	const attachmentUrl = src?.attachment?.url;
+
+	if ( attachmentUrl ) {
+		return `url(${ attachmentUrl })`;
+	}
+
+	return null;
+} );

package/src/transformers/styles/primitive-transformer.ts

@@ -0,0 +1,3 @@
+import { createTransformer } from '../create-transformer';
+
+export const primitiveTransformer = createTransformer( ( value: unknown ) => value );

package/src/transformers/styles/shadow-transformer.ts

@@ -0,0 +1,16 @@
+import { createTransformer } from '../create-transformer';
+
+type Shadow = {
+	hOffset?: string;
+	vOffset?: string;
+	blur?: string;
+	spread?: string;
+	color?: string;
+	position?: string;
+};
+
+export const shadowTransformer = createTransformer( ( value: Shadow ) => {
+	return [ value.hOffset, value.vOffset, value.blur, value.spread, value.color, value.position ]
+		.filter( Boolean )
+		.join( ' ' );
+} );

package/src/transformers/styles/size-transformer.ts

@@ -0,0 +1,10 @@
+import { createTransformer } from '../create-transformer';
+
+type Size = {
+	size?: number;
+	unit?: string;
+};
+
+export const sizeTransformer = createTransformer( ( value: Size ) => {
+	return `${ value.size }${ value.unit }`;
+} );

package/src/transformers/styles/stroke-transformer.ts

@@ -0,0 +1,17 @@
+import { createMultiPropsValue } from '../../renderers/multi-props';
+import { createTransformer } from '../create-transformer';
+
+type Stroke = {
+	width?: string;
+	color?: string;
+};
+
+export const strokeTransformer = createTransformer( ( value: Stroke ) => {
+	const parsed = {
+		'-webkit-text-stroke': `${ value.width } ${ value.color }`,
+		stroke: `${ value.color }`,
+		'stroke-width': `${ value.width }`,
+	};
+
+	return createMultiPropsValue( parsed );
+} );

package/src/transformers/types.ts

@@ -0,0 +1,20 @@
+export type UnbrandedTransformer< TValue > = (
+	value: TValue,
+	options: {
+		key: string;
+		signal?: AbortSignal;
+	}
+) => unknown;
+
+const brand = Symbol( 'transformer-brand' );
+
+export type Transformer< TValue > = UnbrandedTransformer< TValue > & {
+	[ brand ]: true;
+};
+
+export type TransformerName = string;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyTransformer = Transformer< any >;
+
+export type TransformersMap = Record< string, AnyTransformer >;

package/src/renderers/style-transformers/background-color-overlay-transformer.ts

@@ -1,9 +0,0 @@
-import { type BackgroundColorOverlayPropValue } from '@elementor/editor-props';
-
-import { type Transformer } from '../types';
-
-const backgroundColorOverlayTransformer: Transformer< BackgroundColorOverlayPropValue[ 'value' ] > = ( value ) => {
-	return `linear-gradient(${ value }, ${ value })`;
-};
-
-export default backgroundColorOverlayTransformer;

package/src/renderers/style-transformers/background-image-overlay-transformer.ts

@@ -1,24 +0,0 @@
-import { type BackgroundImageOverlayPropValue } from '@elementor/editor-props';
-
-import { type Transformer } from '../types';
-
-const DEFAULT_POSITION_VALUE = '0% 0%';
-
-const backgroundImageOverlayTransformer: Transformer< BackgroundImageOverlayPropValue[ 'value' ] > = ( value ) => {
-	const { image: imageSrc, size = null, position = null, repeat = null, attachment = null } = value;
-
-	if ( ! imageSrc ) {
-		return null;
-	}
-
-	const backgroundStyles = [
-		imageSrc,
-		repeat,
-		attachment,
-		size ? `${ position || DEFAULT_POSITION_VALUE } / ${ size }` : position,
-	].filter( Boolean );
-
-	return backgroundStyles.join( ' ' );
-};
-
-export default backgroundImageOverlayTransformer;

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

@@ -1,10 +0,0 @@
-import type { BackgroundImagePositionOffsetPropValue } from '@elementor/editor-props';
-
-import { type Transformer } from '../types';
-
-const backgroundImagePositionOffsetTransformer: Transformer< BackgroundImagePositionOffsetPropValue[ 'value' ] > = ( {
-	x = '0px',
-	y = '0px',
-} ) => `${ x } ${ y }`;
-
-export default backgroundImagePositionOffsetTransformer;

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

@@ -1,10 +0,0 @@
-import type { BackgroundImageSizeScalePropValue } from '@elementor/editor-props';
-
-import { type Transformer } from '../types';
-
-const backgroundImageSizeScaleTransformer: Transformer< BackgroundImageSizeScalePropValue[ 'value' ] > = ( {
-	width = 'auto',
-	height = 'auto',
-} ) => `${ width } ${ height }`;
-
-export default backgroundImageSizeScaleTransformer;

package/src/renderers/style-transformers/background-transformer.ts

@@ -1,12 +0,0 @@
-import { type BackgroundPropValue } from '@elementor/editor-props';
-
-import { type Transformer } from '../types';
-
-const backgroundTransformer: Transformer< BackgroundPropValue[ 'value' ] > = ( value ) => {
-	const overlays = value[ 'background-overlay' ] ?? '';
-	const color = value.color ?? '';
-
-	return `${ overlays } ${ color }`.trim();
-};
-
-export default backgroundTransformer;

package/src/renderers/style-transformers/create-combine-array-transformer.ts

@@ -1,9 +0,0 @@
-import { type Transformer } from '../types';
-
-type CreateCombineArrayTransformer = ( delimiter: string ) => Transformer< Array< string | number > >;
-
-const createCombineArrayTransformer: CreateCombineArrayTransformer = ( delimiter ) => {
-	return ( value ) => value.filter( Boolean ).join( delimiter );
-};
-
-export default createCombineArrayTransformer;

package/src/renderers/style-transformers/create-corner-sizes-transformer.ts

@@ -1,31 +0,0 @@
-import { type Props, type PropValue } from '@elementor/editor-props';
-
-import { createMultiPropsValue } from '../multi-props';
-import { type Transformer } from '../types';
-
-type CornerSizes = {
-	'start-start'?: PropValue;
-	'start-end'?: PropValue;
-	'end-start'?: PropValue;
-	'end-end'?: PropValue;
-};
-
-type CreateCornerSizesTransformer = ( keyGenerator: ( cornerKey: string ) => string ) => Transformer< CornerSizes >;
-
-const validCorners = [ 'start-start', 'start-end', 'end-start', 'end-end' ];
-
-const createCornerSizesTransformer: CreateCornerSizesTransformer = ( keyGenerator ) => ( value ) => {
-	const props = Object.entries( value ).reduce< Props >( ( acc, [ corner, cornerValue ] ) => {
-		if ( validCorners.includes( corner ) ) {
-			const key = keyGenerator( corner );
-
-			acc[ key ] = cornerValue;
-		}
-
-		return acc;
-	}, {} );
-
-	return createMultiPropsValue( props );
-};
-
-export default createCornerSizesTransformer;

package/src/renderers/style-transformers/create-edge-sizes-transformer.ts

@@ -1,31 +0,0 @@
-import { type Props, type PropValue } from '@elementor/editor-props';
-
-import { createMultiPropsValue } from '../multi-props';
-import { type Transformer } from '../types';
-
-type EdgeSizes = {
-	top?: PropValue;
-	right?: PropValue;
-	bottom?: PropValue;
-	left?: PropValue;
-};
-
-type CreateEdgeSizesTransformer = ( keyGenerator: ( edgeKey: string ) => string ) => Transformer< EdgeSizes >;
-
-const validEdges = [ 'top', 'right', 'bottom', 'left' ];
-
-const createEdgeSizesTransformer: CreateEdgeSizesTransformer = ( keyGenerator ) => ( value ) => {
-	const props = Object.entries( value ).reduce< Props >( ( acc, [ edge, edgeValue ] ) => {
-		if ( validEdges.includes( edge ) ) {
-			const key = keyGenerator( edge );
-
-			acc[ key ] = edgeValue;
-		}
-
-		return acc;
-	}, {} );
-
-	return createMultiPropsValue( props );
-};
-
-export default createEdgeSizesTransformer;

package/src/renderers/style-transformers/dimensions.ts

@@ -1,20 +0,0 @@
-import { type DimensionsPropValue, type Props } from '@elementor/editor-props';
-
-import { createMultiPropsValue } from '../multi-props';
-import { type Transformer } from '../types';
-
-const validKeys = [ 'top', 'right', 'bottom', 'left' ];
-
-const dimensions: Transformer< DimensionsPropValue[ 'value' ] > = ( value, { key } ) => {
-	const parsed = Object.entries( value ).reduce< Props >( ( acc, [ dimensionKey, dimensionValue ] ) => {
-		if ( dimensionValue && validKeys.includes( dimensionKey ) ) {
-			acc[ `${ key }-${ dimensionKey }` ] = dimensionValue;
-		}
-
-		return acc;
-	}, {} );
-
-	return createMultiPropsValue( parsed );
-};
-
-export default dimensions;

package/src/renderers/style-transformers/image-attachment.ts

@@ -1,14 +0,0 @@
-import { type ImageSrcPropValue } from '@elementor/editor-props';
-import { getMediaAttachment } from '@elementor/wp-media';
-
-import { type Transformer } from '../types';
-
-export const imageAttachmentTransformer: Transformer< ImageSrcPropValue[ 'value' ][ 'id' ] > = async ( value ) => {
-	const attachment = await getMediaAttachment( { id: value } );
-
-	if ( ! attachment ) {
-		return null;
-	}
-
-	return attachment;
-};

package/src/renderers/style-transformers/image-src.ts

@@ -1,8 +0,0 @@
-import { type ImageSrcPropValue } from '@elementor/editor-props';
-
-import { type Transformer } from '../types';
-
-export const imageSrcTransformer: Transformer< ImageSrcPropValue[ 'value' ] > = ( value ) => ( {
-	attachment: value.id,
-	url: value.url,
-} );

package/src/renderers/style-transformers/image.ts

@@ -1,25 +0,0 @@
-import { type ImagePropValue } from '@elementor/editor-props';
-
-import { type Transformer } from '../types';
-
-export const imageTransformer: Transformer< ImagePropValue[ 'value' ] > = ( value ) => {
-	const { src, size } = value;
-
-	if ( src.url ) {
-		return `url(${ src.url })`;
-	}
-
-	const sizeUrl = src.attachment?.sizes[ size ]?.url;
-
-	if ( sizeUrl ) {
-		return `url(${ sizeUrl })`;
-	}
-
-	const attachmentUrl = src.attachment?.url;
-
-	if ( attachmentUrl ) {
-		return `url(${ attachmentUrl })`;
-	}
-
-	return null;
-};

package/src/renderers/style-transformers/index.ts

@@ -1,48 +0,0 @@
-import { type TransformersMap } from '../types';
-import backgroundColorOverlayTransformer from './background-color-overlay-transformer';
-import backgroundImageOverlayTransformer from './background-image-overlay-transformer';
-import backgroundImagePositionOffsetTransformer from './background-image-position-offset-transformer';
-import backgroundImageSizeScaleTransformer from './background-image-size-scale-transformer';
-import { default as background } from './background-transformer';
-import { default as createCombineArrayTransformer } from './create-combine-array-transformer';
-import createCornerSizesTransformer from './create-corner-sizes-transformer';
-import createEdgeSizesTransformer from './create-edge-sizes-transformer';
-import { default as dimensions } from './dimensions';
-import { imageTransformer } from './image';
-import { imageAttachmentTransformer } from './image-attachment';
-import { imageSrcTransformer } from './image-src';
-import { default as layoutDirection } from './layout-direction-transformer';
-import { primitiveTransformer } from './primitive-transformer';
-import { default as shadow } from './shadow-transformer';
-import { default as size } from './size-transformer';
-import { default as stroke } from './stroke-transformer';
-
-export const styleTransformers: TransformersMap = {
-	size,
-	shadow,
-	stroke,
-	background,
-
-	color: primitiveTransformer,
-	number: primitiveTransformer,
-	string: primitiveTransformer,
-	url: primitiveTransformer,
-
-	dimensions,
-	'background-color-overlay': backgroundColorOverlayTransformer,
-	'background-image-overlay': backgroundImageOverlayTransformer,
-	'background-image-position-offset': backgroundImagePositionOffsetTransformer,
-	'background-image-size-scale': backgroundImageSizeScaleTransformer,
-	'background-overlay': createCombineArrayTransformer( ',' ),
-
-	'box-shadow': createCombineArrayTransformer( ',' ),
-
-	'border-width': createEdgeSizesTransformer( ( edgeKey ) => `border-${ edgeKey }-width` ),
-	'border-radius': createCornerSizesTransformer( ( cornerKey ) => `border-${ cornerKey }-radius` ),
-
-	'image-attachment-id': imageAttachmentTransformer,
-	'image-src': imageSrcTransformer,
-	image: imageTransformer,
-
-	'layout-direction': layoutDirection,
-};

package/src/renderers/style-transformers/layout-direction-transformer.ts

@@ -1,20 +0,0 @@
-import { type LayoutDirectionPropValue, type Props } from '@elementor/editor-props';
-
-import { createMultiPropsValue } from '../multi-props';
-import { type Transformer } from '../types';
-
-const validKeys = [ 'row', 'column' ];
-
-const layoutDirectionTransformer: Transformer< LayoutDirectionPropValue[ 'value' ] > = ( value, { key } ) => {
-	const parsed = Object.entries( value ).reduce< Props >( ( acc, [ dimensionKey, dimensionValue ] ) => {
-		if ( dimensionValue && validKeys.includes( dimensionKey ) ) {
-			acc[ `${ dimensionKey }-${ key }` ] = dimensionValue;
-		}
-
-		return acc;
-	}, {} );
-
-	return createMultiPropsValue( parsed );
-};
-
-export default layoutDirectionTransformer;

package/src/renderers/style-transformers/primitive-transformer.ts

@@ -1,7 +0,0 @@
-import { type Transformer } from '../types';
-
-type Primitive = string | number | boolean;
-
-export const primitiveTransformer: Transformer< Primitive > = ( value ) => {
-	return value;
-};

package/src/renderers/style-transformers/shadow-transformer.ts

@@ -1,11 +0,0 @@
-import { type ShadowPropValue } from '@elementor/editor-props';
-
-import { type Transformer } from '../types';
-
-const shadowTransformer: Transformer< ShadowPropValue[ 'value' ] > = ( value ) => {
-	return [ value.hOffset, value.vOffset, value.blur, value.spread, value.color, value.position ]
-		.filter( Boolean )
-		.join( ' ' );
-};
-
-export default shadowTransformer;

package/src/renderers/style-transformers/size-transformer.ts

@@ -1,9 +0,0 @@
-import { type SizePropValue } from '@elementor/editor-props';
-
-import { type Transformer } from '../types';
-
-const sizeTransformer: Transformer< SizePropValue[ 'value' ] > = ( value ) => {
-	return `${ value.size }${ value.unit }`;
-};
-
-export default sizeTransformer;

package/src/renderers/style-transformers/stroke-transformer.ts

@@ -1,16 +0,0 @@
-import { type StrokePropValue } from '@elementor/editor-props';
-
-import { createMultiPropsValue } from '../multi-props';
-import { type Transformer } from '../types';
-
-const strokeTransformer: Transformer< StrokePropValue[ 'value' ] > = ( value ) => {
-	const parsed = {
-		'-webkit-text-stroke': `${ value.width } ${ value.color }`,
-		stroke: `${ value.color }`,
-		'stroke-width': `${ value.width }`,
-	};
-
-	return createMultiPropsValue( parsed );
-};
-
-export default strokeTransformer;

package/src/renderers/types.ts

@@ -1,12 +0,0 @@
-import type { PropValue } from '@elementor/editor-props';
-
-export type Transformer< TValue extends PropValue > = (
-	value: TValue,
-	options: {
-		key: string;
-		signal?: AbortSignal;
-	}
-) => unknown;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type TransformersMap = Record< string, Transformer< any > >;