@elementor/editor-canvas 3.33.0-102 → 3.33.0-104

package/dist/index.js

@@ -688,25 +688,25 @@ var attributesTransformer = createTransformer((values) => {
 
 // src/transformers/settings/classes-transformer.ts
 var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
+function transformClassId(id, cache) {
+  if (!cache.has(id)) {
+    const provider2 = import_editor_styles_repository3.stylesRepository.getProviders().find((p) => {
+      return p.actions.all().find((style) => style.id === id);
+    });
+    if (!provider2) {
+      return id;
+    }
+    cache.set(id, provider2.getKey());
+  }
+  const providerKey = cache.get(id);
+  const provider = import_editor_styles_repository3.stylesRepository.getProviderByKey(providerKey);
+  return provider?.actions.resolveCssName(id) ?? id;
+}
 function createClassesTransformer() {
   const cache = /* @__PURE__ */ new Map();
   return createTransformer((value) => {
-    return value.map((id) => {
-      if (!cache.has(id)) {
-        cache.set(id, getCssName(id));
-      }
-      return cache.get(id);
-    }).filter(Boolean);
-  });
-}
-function getCssName(id) {
-  const provider = import_editor_styles_repository3.stylesRepository.getProviders().find((p) => {
-    return p.actions.all().find((style) => style.id === id);
+    return value.map((id) => transformClassId(id, cache)).filter(Boolean);
   });
-  if (!provider) {
-    return id;
-  }
-  return provider.actions.resolveCssName(id);
 }
 
 // src/transformers/settings/link-transformer.ts

package/dist/index.mjs

@@ -654,25 +654,25 @@ var attributesTransformer = createTransformer((values) => {
 
 // src/transformers/settings/classes-transformer.ts
 import { stylesRepository as stylesRepository3 } from "@elementor/editor-styles-repository";
+function transformClassId(id, cache) {
+  if (!cache.has(id)) {
+    const provider2 = stylesRepository3.getProviders().find((p) => {
+      return p.actions.all().find((style) => style.id === id);
+    });
+    if (!provider2) {
+      return id;
+    }
+    cache.set(id, provider2.getKey());
+  }
+  const providerKey = cache.get(id);
+  const provider = stylesRepository3.getProviderByKey(providerKey);
+  return provider?.actions.resolveCssName(id) ?? id;
+}
 function createClassesTransformer() {
   const cache = /* @__PURE__ */ new Map();
   return createTransformer((value) => {
-    return value.map((id) => {
-      if (!cache.has(id)) {
-        cache.set(id, getCssName(id));
-      }
-      return cache.get(id);
-    }).filter(Boolean);
-  });
-}
-function getCssName(id) {
-  const provider = stylesRepository3.getProviders().find((p) => {
-    return p.actions.all().find((style) => style.id === id);
+    return value.map((id) => transformClassId(id, cache)).filter(Boolean);
   });
-  if (!provider) {
-    return id;
-  }
-  return provider.actions.resolveCssName(id);
 }
 
 // src/transformers/settings/link-transformer.ts

package/package.json

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

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

@@ -1,7 +1,5 @@
-import { createMockStyleDefinition, createMockStylesProvider } from 'test-utils';
 import {
 	booleanPropTypeUtil,
-	classesPropTypeUtil,
 	imageAttachmentIdPropType,
 	imagePropTypeUtil,
 	imageSrcPropTypeUtil,
@@ -12,7 +10,6 @@ import {
 	stringPropTypeUtil,
 	urlPropTypeUtil,
 } from '@elementor/editor-props';
-import { stylesRepository } from '@elementor/editor-styles-repository';
 import { getMediaAttachment } from '@elementor/wp-media';
 
 import { initSettingsTransformers } from '../init-settings-transformers';
@@ -21,7 +18,6 @@ import { settingsTransformersRegistry } from '../settings-transformers-registry'
 import { mockAttachmentData } from './mock-attachment-data';
 import {
 	booleanPropType,
-	classesPropType,
 	imagePropType,
 	linkPropType,
 	numberPropType,
@@ -69,42 +65,6 @@ describe( 'settings props resolver', () => {
 				boolean: true,
 			},
 		},
-		{
-			name: 'classes',
-			props: {
-				classes: classesPropTypeUtil.create( [
-					'test-1',
-					'test-2-suffix',
-					'without-provider',
-					'',
-					null as unknown as string,
-					undefined as unknown as string,
-				] ),
-			},
-			prepare: () => {
-				jest.mocked( stylesRepository.getProviders ).mockReturnValue( [
-					createMockStylesProvider( {
-						key: 'test-1-provider',
-						actions: {
-							all: () => [ createMockStyleDefinition( { id: 'test-1' } ) ],
-						},
-					} ),
-					createMockStylesProvider( {
-						key: 'test-2-provider',
-						actions: {
-							resolveCssName: ( id ) => `${ id }-suffix`,
-							all: () => [ createMockStyleDefinition( { id: 'test-2' } ) ],
-						},
-					} ),
-				] );
-			},
-			schema: {
-				classes: classesPropType(),
-			},
-			expected: {
-				classes: [ 'test-1', 'test-2-suffix', 'without-provider' ],
-			},
-		},
 		{
 			name: 'link',
 			props: {

package/src/transformers/settings/__tests__/classes-transformer.test.ts

@@ -0,0 +1,83 @@
+import { createClassesTransformer } from '../classes-transformer';
+
+jest.mock( '@elementor/editor-styles-repository', () => ( {
+	stylesRepository: {
+		getProviders: jest.fn(),
+		getProviderByKey: jest.fn(),
+	},
+} ) );
+
+const mockStylesRepository = require( '@elementor/editor-styles-repository' ).stylesRepository;
+
+describe( 'createClassesTransformer', () => {
+	const createMockProvider = ( key: string, styles: Array< { id: string } > = [] ) => ( {
+		getKey: () => key,
+		actions: {
+			all: () => styles,
+			resolveCssName: jest.fn( ( id: string ): string | null => `resolved-${ id }` ),
+		},
+	} );
+
+	const createMockStyle = ( id: string ) => ( { id } );
+
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should transform class IDs using provider CSS names', () => {
+		const provider = createMockProvider( 'test-provider', [ createMockStyle( 'class-1' ) ] );
+		const provider2 = createMockProvider( 'test-provider-2', [ createMockStyle( 'class-2' ) ] );
+		mockStylesRepository.getProviders.mockReturnValue( [ provider, provider2 ] );
+		mockStylesRepository.getProviderByKey.mockReturnValueOnce( provider ).mockReturnValueOnce( provider2 );
+		const transformer = createClassesTransformer();
+
+		const result = transformer( [ 'class-1', 'class-2' ], { key: 'test-key' } );
+
+		expect( result ).toEqual( [ 'resolved-class-1', 'resolved-class-2' ] );
+		expect( provider.actions.resolveCssName ).toHaveBeenCalledWith( 'class-1' );
+	} );
+
+	it( 'should return original ID when no provider is found', () => {
+		mockStylesRepository.getProviders.mockReturnValue( [] );
+		const transformer = createClassesTransformer();
+
+		const result = transformer( [ 'unknown-class' ], { key: 'test-key' } );
+
+		expect( result ).toEqual( [ 'unknown-class' ] );
+	} );
+
+	it( 'should return original ID when provider has no matching style', () => {
+		const provider = createMockProvider( 'test-provider', [ createMockStyle( 'other-class' ) ] );
+		mockStylesRepository.getProviders.mockReturnValue( [ provider ] );
+		const transformer = createClassesTransformer();
+
+		const result = transformer( [ 'unknown-class' ], { key: 'test-key' } );
+
+		expect( result ).toEqual( [ 'unknown-class' ] );
+	} );
+
+	it( 'should cache provider keys to avoid repeated lookups', () => {
+		const provider = createMockProvider( 'test-provider', [ createMockStyle( 'class-1' ) ] );
+		mockStylesRepository.getProviders.mockReturnValue( [ provider ] );
+		mockStylesRepository.getProviderByKey.mockReturnValue( provider );
+		const transformer = createClassesTransformer();
+
+		transformer( [ 'class-1' ], { key: 'test-key' } );
+		transformer( [ 'class-1' ], { key: 'test-key' } );
+
+		expect( mockStylesRepository.getProviders ).toHaveBeenCalledTimes( 1 );
+		expect( provider.actions.resolveCssName ).toHaveBeenCalledTimes( 2 );
+	} );
+
+	it( 'should handle multiple class IDs', () => {
+		const provider1 = createMockProvider( 'provider-1', [ createMockStyle( 'class-1' ) ] );
+		const provider2 = createMockProvider( 'provider-2', [ createMockStyle( 'class-2' ) ] );
+		mockStylesRepository.getProviders.mockReturnValue( [ provider1, provider2 ] );
+		mockStylesRepository.getProviderByKey.mockReturnValueOnce( provider1 ).mockReturnValueOnce( provider2 );
+		const transformer = createClassesTransformer();
+
+		const result = transformer( [ 'class-1', 'class-2' ], { key: 'test-key' } );
+
+		expect( result ).toEqual( [ 'resolved-class-1', 'resolved-class-2' ] );
+	} );
+} );

package/src/transformers/settings/classes-transformer.ts

@@ -2,30 +2,30 @@ import { stylesRepository } from '@elementor/editor-styles-repository';
 
 import { createTransformer } from '../create-transformer';
 
+function transformClassId( id: string, cache: Map< string, string > ): string {
+	if ( ! cache.has( id ) ) {
+		const provider = stylesRepository.getProviders().find( ( p ) => {
+			return p.actions.all().find( ( style ) => style.id === id );
+		} );
+
+		if ( ! provider ) {
+			return id;
+		}
+
+		cache.set( id, provider.getKey() );
+	}
+
+	const providerKey = cache.get( id ) as string;
+
+	const provider = stylesRepository.getProviderByKey( providerKey );
+
+	return provider?.actions.resolveCssName( id ) ?? id;
+}
+
 export function createClassesTransformer() {
 	const cache = new Map< string, string >();
 
 	return createTransformer( ( value: string[] ) => {
-		return value
-			.map( ( id ) => {
-				if ( ! cache.has( id ) ) {
-					cache.set( id, getCssName( id ) );
-				}
-
-				return cache.get( id );
-			} )
-			.filter( Boolean );
-	} );
-}
-
-function getCssName( id: string ) {
-	const provider = stylesRepository.getProviders().find( ( p ) => {
-		return p.actions.all().find( ( style ) => style.id === id );
+		return value.map( ( id ) => transformClassId( id, cache ) ).filter( Boolean );
 	} );
-
-	if ( ! provider ) {
-		return id;
-	}
-
-	return provider.actions.resolveCssName( id );
 }