@elementor/editor-canvas 0.8.0 → 0.10.0

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 = {
-	top?: PropValue;
-	right?: PropValue;
-	bottom?: PropValue;
-	left?: PropValue;
-};
-
-type CreateCornerSizesTransformer = ( keyGenerator: ( cornerKey: string ) => string ) => Transformer< CornerSizes >;
-
-const validCorners = [ 'top-left', 'top-right', 'bottom-left', 'bottom-right' ];
-
-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,9 +0,0 @@
-import { type StrokePropValue } from '@elementor/editor-props';
-
-import { type Transformer } from '../types';
-
-const strokeTransformer: Transformer< StrokePropValue[ 'value' ] > = ( value ) => {
-	return `${ value.width } ${ value.color }`;
-};
-
-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 > >;