@elementor/editor-canvas 3.33.0-262 → 3.33.0-263

package/dist/index.js

@@ -1179,17 +1179,36 @@ var transformSkewTransformer = createTransformer((value) => {
 });
 
 // src/transformers/styles/transition-transformer.ts
+var import_editor_controls = require("@elementor/editor-controls");
+var getAllowedProperties = () => {
+  const allowedProperties = /* @__PURE__ */ new Set();
+  import_editor_controls.transitionProperties.forEach((category) => {
+    category.properties.forEach((property) => {
+      allowedProperties.add(property.value);
+    });
+  });
+  return allowedProperties;
+};
 var transitionTransformer = createTransformer((transitionValues) => {
   if (transitionValues?.length < 1) {
     return null;
   }
-  return transitionValues.filter(Boolean).map(mapToTransitionString).join(", ");
+  const allowedProperties = getAllowedProperties();
+  const validTransitions = transitionValues.map((value) => mapToTransitionString(value, allowedProperties)).filter(Boolean);
+  if (validTransitions.length === 0) {
+    return null;
+  }
+  return validTransitions.join(", ");
 });
-var mapToTransitionString = (value) => {
+var mapToTransitionString = (value, allowedProperties) => {
   if (!value.selection || !value.size) {
     return "";
   }
-  return `${value.selection.value} ${value.size}`;
+  const property = value.selection.value;
+  if (!allowedProperties.has(property)) {
+    return "";
+  }
+  return `${property} ${value.size}`;
 };
 
 // src/init-style-transformers.ts

package/dist/index.mjs

@@ -1143,17 +1143,36 @@ var transformSkewTransformer = createTransformer((value) => {
 });
 
 // src/transformers/styles/transition-transformer.ts
+import { transitionProperties } from "@elementor/editor-controls";
+var getAllowedProperties = () => {
+  const allowedProperties = /* @__PURE__ */ new Set();
+  transitionProperties.forEach((category) => {
+    category.properties.forEach((property) => {
+      allowedProperties.add(property.value);
+    });
+  });
+  return allowedProperties;
+};
 var transitionTransformer = createTransformer((transitionValues) => {
   if (transitionValues?.length < 1) {
     return null;
   }
-  return transitionValues.filter(Boolean).map(mapToTransitionString).join(", ");
+  const allowedProperties = getAllowedProperties();
+  const validTransitions = transitionValues.map((value) => mapToTransitionString(value, allowedProperties)).filter(Boolean);
+  if (validTransitions.length === 0) {
+    return null;
+  }
+  return validTransitions.join(", ");
 });
-var mapToTransitionString = (value) => {
+var mapToTransitionString = (value, allowedProperties) => {
   if (!value.selection || !value.size) {
     return "";
   }
-  return `${value.selection.value} ${value.size}`;
+  const property = value.selection.value;
+  if (!allowedProperties.has(property)) {
+    return "";
+  }
+  return `${property} ${value.size}`;
 };
 
 // src/init-style-transformers.ts

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "3.33.0-262",
+  "version": "3.33.0-263",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,21 +37,21 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-262",
-    "@elementor/editor-controls": "3.33.0-262",
-    "@elementor/editor-documents": "3.33.0-262",
-    "@elementor/editor-elements": "3.33.0-262",
-    "@elementor/editor-interactions": "3.33.0-262",
-    "@elementor/editor-notifications": "3.33.0-262",
-    "@elementor/editor-props": "3.33.0-262",
-    "@elementor/editor-responsive": "3.33.0-262",
-    "@elementor/editor-styles": "3.33.0-262",
-    "@elementor/editor-styles-repository": "3.33.0-262",
-    "@elementor/editor-v1-adapters": "3.33.0-262",
-    "@elementor/twing": "3.33.0-262",
+    "@elementor/editor": "3.33.0-263",
+    "@elementor/editor-controls": "3.33.0-263",
+    "@elementor/editor-documents": "3.33.0-263",
+    "@elementor/editor-elements": "3.33.0-263",
+    "@elementor/editor-interactions": "3.33.0-263",
+    "@elementor/editor-notifications": "3.33.0-263",
+    "@elementor/editor-props": "3.33.0-263",
+    "@elementor/editor-responsive": "3.33.0-263",
+    "@elementor/editor-styles": "3.33.0-263",
+    "@elementor/editor-styles-repository": "3.33.0-263",
+    "@elementor/editor-v1-adapters": "3.33.0-263",
+    "@elementor/twing": "3.33.0-263",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.33.0-262",
-    "@elementor/wp-media": "3.33.0-262",
+    "@elementor/utils": "3.33.0-263",
+    "@elementor/wp-media": "3.33.0-263",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/transformers/styles/__tests__/transition-transformer.test.ts

@@ -0,0 +1,52 @@
+import { transitionProperties } from '@elementor/editor-controls';
+
+import { transitionTransformer, type TransitionValue } from '../transition-transformer';
+
+function run( values: TransitionValue[] ) {
+	return transitionTransformer( values, { key: 'transition', signal: undefined } );
+}
+
+describe( 'transition-transformer', () => {
+	it( 'returns null when all transitions are invalid', () => {
+		const invalidTransitions: TransitionValue[] = [
+			{
+				selection: { key: 'invalid-property', value: 'invalid-property' },
+				size: '200ms',
+			},
+		];
+
+		expect( run( invalidTransitions ) ).toBeNull();
+	} );
+
+	it( 'returns valid transition string for allowed property', () => {
+		const allowedProperty = transitionProperties[ 0 ].properties[ 0 ].value;
+		const validTransitions: TransitionValue[] = [
+			{
+				selection: { key: 'all', value: allowedProperty },
+				size: '200ms',
+			},
+		];
+
+		expect( run( validTransitions ) ).toBe( `${ allowedProperty } 200ms` );
+	} );
+
+	it( 'filters out non-allowed transitions and returns only valid ones', () => {
+		const allowedProperty = transitionProperties[ 0 ].properties[ 0 ].value;
+		const transitionsWithMixedValidity: TransitionValue[] = [
+			{
+				selection: { key: 'all', value: allowedProperty },
+				size: '200ms',
+			},
+			{
+				selection: { key: 'invalid', value: 'invalid-property' },
+				size: '300ms',
+			},
+			{
+				selection: { key: 'another-invalid', value: 'another-invalid-property' },
+				size: '400ms',
+			},
+		];
+
+		expect( run( transitionsWithMixedValidity ) ).toBe( `${ allowedProperty } 200ms` );
+	} );
+} );

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

@@ -1,6 +1,8 @@
+import { transitionProperties } from '@elementor/editor-controls';
+
 import { createTransformer } from '../create-transformer';
 
-type TransitionValue = {
+export type TransitionValue = {
 	selection: {
 		key: string;
 		value: string;
@@ -8,18 +10,46 @@ type TransitionValue = {
 	size: string;
 };
 
+const getAllowedProperties = (): Set< string > => {
+	const allowedProperties = new Set< string >();
+
+	transitionProperties.forEach( ( category ) => {
+		category.properties.forEach( ( property ) => {
+			allowedProperties.add( property.value );
+		} );
+	} );
+
+	return allowedProperties;
+};
+
 export const transitionTransformer = createTransformer( ( transitionValues: TransitionValue[] ) => {
 	if ( transitionValues?.length < 1 ) {
 		return null;
 	}
 
-	return transitionValues.filter( Boolean ).map( mapToTransitionString ).join( ', ' );
+	const allowedProperties = getAllowedProperties();
+
+	const validTransitions = transitionValues
+		.map( ( value ) => mapToTransitionString( value, allowedProperties ) )
+		.filter( Boolean );
+
+	if ( validTransitions.length === 0 ) {
+		return null;
+	}
+
+	return validTransitions.join( ', ' );
 } );
 
-const mapToTransitionString = ( value: TransitionValue ): string => {
+const mapToTransitionString = ( value: TransitionValue, allowedProperties: Set< string > ): string => {
 	if ( ! value.selection || ! value.size ) {
 		return '';
 	}
 
-	return `${ value.selection.value } ${ value.size }`;
+	const property = value.selection.value;
+
+	if ( ! allowedProperties.has( property ) ) {
+		return '';
+	}
+
+	return `${ property } ${ value.size }`;
 };