@elementor/editor-canvas 0.24.0 → 0.25.0

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

@@ -8,12 +8,15 @@ import {
 	backgroundImageSizeScalePropTypeUtil,
 	backgroundOverlayPropTypeUtil,
 	backgroundPropTypeUtil,
+	blurFilterPropTypeUtil,
 	borderRadiusPropTypeUtil,
 	borderWidthPropTypeUtil,
 	boxShadowPropTypeUtil,
+	brightnessFilterPropTypeUtil,
 	colorPropTypeUtil,
 	colorStopPropTypeUtil,
 	dimensionsPropTypeUtil,
+	filterPropTypeUtil,
 	gradientColorStopPropTypeUtil,
 	imageAttachmentIdPropType,
 	imagePropTypeUtil,
@@ -267,6 +270,22 @@ describe( 'styles prop resolver', () => {
 				'background-size': 'auto auto,auto auto,1400px auto,auto',
 			},
 		},
+		{
+			name: 'filter',
+			props: {
+				filter: filterPropTypeUtil.create( [
+					blurFilterPropTypeUtil.create( {
+						radius: sizePropTypeUtil.create( { size: 1, unit: 'px' } ),
+					} ),
+					brightnessFilterPropTypeUtil.create( {
+						amount: sizePropTypeUtil.create( { size: 90, unit: '%' } ),
+					} ),
+				] ),
+			},
+			expected: {
+				filter: 'blur(1px) brightness(90%)',
+			},
+		},
 		{
 			name: 'background (url only repeat and attachment)',
 			prepare: () => {

package/src/components/element-overlay.tsx

@@ -11,13 +11,14 @@ type Props = {
 	element: HTMLElement;
 	isSelected: boolean;
 	id: string;
+	isSmallerOffset?: boolean;
 };
 
-const OverlayBox = styled( Box, { shouldForwardProp: ( prop ) => prop !== 'isSelected' } )<
-	Pick< Props, 'isSelected' >
->( ( { theme, isSelected } ) => ( {
+const OverlayBox = styled( Box, {
+	shouldForwardProp: ( prop ) => prop !== 'isSelected' && prop !== 'isSmallerOffset',
+} )< Pick< Props, 'isSelected' | 'isSmallerOffset' > >( ( { theme, isSelected, isSmallerOffset } ) => ( {
 	outline: `${ isSelected ? '2px' : '1px' } solid ${ theme.palette.primary.light }`,
-	outlineOffset: isSelected ? '-2px' : '-1px',
+	outlineOffset: isSelected && ! isSmallerOffset ? '-2px' : '-1px',
 	pointerEvents: 'none',
 } ) );
 
@@ -26,6 +27,7 @@ export function ElementOverlay( { element, isSelected, id }: Props ) {
 	const { getFloatingProps, getReferenceProps } = useInteractions( [ useHover( context ) ] );
 
 	useBindReactPropsToElement( element, getReferenceProps );
+	const isSmallerOffset = element.offsetHeight <= 1;
 
 	return (
 		isVisible && (
@@ -36,6 +38,7 @@ export function ElementOverlay( { element, isSelected, id }: Props ) {
 					style={ floating.styles }
 					data-element-overlay={ id }
 					role="presentation"
+					isSmallerOffset={ isSmallerOffset }
 					{ ...getFloatingProps() }
 				/>
 			</FloatingPortal>

package/src/init-style-transformers.ts

@@ -11,6 +11,7 @@ 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 { filterTransformer } from './transformers/styles/filter-transformer';
 import { positionTransformer } from './transformers/styles/position-transformer';
 import { shadowTransformer } from './transformers/styles/shadow-transformer';
 import { sizeTransformer } from './transformers/styles/size-transformer';
@@ -28,6 +29,7 @@ export function initStyleTransformers() {
 				( { propKey, key } ) => `${ propKey }-${ key }`
 			)
 		)
+		.register( 'filter', filterTransformer )
 		.register( 'box-shadow', createCombineArrayTransformer( ',' ) )
 		.register( 'background', backgroundTransformer )
 		.register( 'background-overlay', backgroundOverlayTransformer )

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

@@ -0,0 +1,23 @@
+import { type FilterItemPropValue } from '@elementor/editor-props';
+
+import { createTransformer } from '../create-transformer';
+
+export const filterTransformer = createTransformer( ( filterValues: FilterItemPropValue[ 'value' ][] ) => {
+	if ( filterValues?.length < 1 ) {
+		return null;
+	}
+
+	return filterValues.map( mapToFilterFunctionString ).join( ' ' );
+} );
+
+const mapToFilterFunctionString = ( value: FilterItemPropValue[ 'value' ] ): string => {
+	if ( 'radius' in value ) {
+		return `blur(${ value.radius })`;
+	}
+
+	if ( 'amount' in value ) {
+		return `brightness(${ value.amount })`;
+	}
+
+	return '';
+};