@elementor/editor-styles-repository 0.8.1 → 0.8.4

package/src/utils/__tests__/create-styles-repository.test.ts

@@ -10,8 +10,8 @@ describe( 'createStylesRepository', () => {
 		// Arrange
 		const repo = createStylesRepository();
 
-		repo.register( createMockStylesProvider( { key: 'mock1', priority: 10, styleDefinitions: [ styleDef1 ] } ) );
-		repo.register( createMockStylesProvider( { key: 'mock2', priority: 20, styleDefinitions: [ styleDef2 ] } ) );
+		repo.register( createMockStylesProvider( { key: 'mock1', priority: 10 }, [ styleDef1 ] ) );
+		repo.register( createMockStylesProvider( { key: 'mock2', priority: 20 }, [ styleDef2 ] ) );
 
 		// Assert
 		expect( repo.all() ).toEqual( [ styleDef2, styleDef1 ] );
@@ -21,17 +21,21 @@ describe( 'createStylesRepository', () => {
 		// Arrange
 		const repo = createStylesRepository();
 
-		const mockStylesProvider1 = createMockStylesProvider( {
-			key: 'mock1',
-			priority: 10,
-			styleDefinitions: [ styleDef1 ],
-		} );
-
-		const mockStylesProvider2 = createMockStylesProvider( {
-			key: 'mock2',
-			priority: 20,
-			styleDefinitions: [ styleDef2 ],
-		} );
+		const mockStylesProvider1 = createMockStylesProvider(
+			{
+				key: 'mock1',
+				priority: 10,
+			},
+			[ styleDef1 ]
+		);
+
+		const mockStylesProvider2 = createMockStylesProvider(
+			{
+				key: 'mock2',
+				priority: 20,
+			},
+			[ styleDef2 ]
+		);
 
 		repo.register( mockStylesProvider1 );
 		repo.register( mockStylesProvider2 );
@@ -64,84 +68,4 @@ describe( 'createStylesRepository', () => {
 		// Assert
 		expect( cb ).toHaveBeenCalledTimes( 2 );
 	} );
-
-	it( 'should return true if label is valid', () => {
-		// Arrange
-		const repo = createStylesRepository();
-
-		// Act
-		const result = repo.isLabelValid( 'valid-label' );
-
-		// Assert
-		expect( result ).toBe( true );
-	} );
-
-	it( 'should return false if label is not valid', () => {
-		// Arrange
-		const repo = createStylesRepository();
-
-		// Act
-		const result = repo.isLabelValid( '.invalid-label' );
-
-		// Assert
-		expect( result ).toBe( false );
-	} );
-
-	it( 'should return true if label is reserved', () => {
-		// Arrange
-		const repo = createStylesRepository();
-
-		const mockStylesProvider1 = createMockStylesProvider( {
-			key: 'mock1',
-			priority: 10,
-			styleDefinitions: [],
-			reservedLabel: 'reserved-label',
-		} );
-
-		repo.register( mockStylesProvider1 );
-
-		// Act
-		const result = repo.isLabelExist( 'reserved-label' );
-
-		// Assert
-		expect( result ).toBe( true );
-	} );
-
-	it( 'should return true if label exist', () => {
-		// Arrange
-		const repo = createStylesRepository();
-
-		const mockStylesProvider1 = createMockStylesProvider( {
-			key: 'mock1',
-			priority: 10,
-			styleDefinitions: [ styleDef1 ],
-		} );
-
-		repo.register( mockStylesProvider1 );
-
-		// Act
-		const result = repo.isLabelExist( styleDef1.label );
-
-		// Assert
-		expect( result ).toBe( true );
-	} );
-
-	it( 'should return false if label does not exist', () => {
-		// Arrange
-		const repo = createStylesRepository();
-
-		const mockStylesProvider1 = createMockStylesProvider( {
-			key: 'mock1',
-			priority: 10,
-			styleDefinitions: [],
-		} );
-
-		repo.register( mockStylesProvider1 );
-
-		// Act
-		const result = repo.isLabelExist( 'new-label' );
-
-		// Assert
-		expect( result ).toBe( false );
-	} );
 } );

package/src/utils/__tests__/validate-style-label.test.ts

@@ -0,0 +1,37 @@
+import { createMockStyleDefinition } from 'test-utils';
+import { stylesRepository, validateStyleLabel } from '@elementor/editor-styles-repository';
+
+jest.mock( '../../styles-repository' );
+
+describe( 'validateStyleLabel', () => {
+	beforeEach( () => {
+		jest.mocked( stylesRepository.all ).mockReturnValue( [
+			createMockStyleDefinition( { id: '1', label: 'class-1' } ),
+			createMockStyleDefinition( { id: '2', label: 'class-2' } ),
+		] );
+	} );
+
+	it( 'should pass validation if label is valid', () => {
+		// Act.
+		const result = validateStyleLabel( 'valid-label' );
+
+		// Assert.
+		expect( result.isValid ).toBe( true );
+		expect( result.error ).toBeNull();
+	} );
+
+	it.each( [
+		{ reason: 'label is empty', label: '', message: 'Cannot be empty' },
+		{ reason: 'label is too long', label: 'a'.repeat( 51 ), message: 'Cannot be longer than 50 characters' },
+		{ reason: 'label contains invalid characters', label: 'invalid label!', message: 'Invalid format' },
+		{ reason: 'label already exists', label: 'class-1', message: 'Name exists' },
+		{ reason: 'label is reserved', label: 'local', message: 'Name exists' },
+	] )( 'should fail validation if $reason', ( { label, message } ) => {
+		// Act.
+		const result = validateStyleLabel( label );
+
+		// Assert.
+		expect( result.isValid ).toBe( false );
+		expect( result.error ).toBe( message );
+	} );
+} );

package/src/utils/create-styles-provider.ts

@@ -0,0 +1,51 @@
+import { type StylesProvider } from '../types';
+
+export type CreateStylesProviderOptions = {
+	key: string | ( () => string );
+	priority?: number;
+	limit?: number;
+	subscribe?: ( callback: () => void ) => () => void;
+	labels?: {
+		singular: string;
+		plural: string;
+	};
+	actions: {
+		all: StylesProvider[ 'actions' ][ 'all' ];
+		get: StylesProvider[ 'actions' ][ 'get' ];
+		create?: StylesProvider[ 'actions' ][ 'create' ];
+		delete?: StylesProvider[ 'actions' ][ 'delete' ];
+		update?: StylesProvider[ 'actions' ][ 'update' ];
+		updateProps?: StylesProvider[ 'actions' ][ 'updateProps' ];
+	};
+};
+
+const DEFAULT_LIMIT = 10000;
+const DEFAULT_PRIORITY = 10;
+
+export function createStylesProvider( {
+	key,
+	priority = DEFAULT_PRIORITY,
+	limit = DEFAULT_LIMIT,
+	subscribe = () => () => {},
+	labels,
+	actions,
+}: CreateStylesProviderOptions ): StylesProvider {
+	return {
+		getKey: typeof key === 'string' ? () => key : key,
+		priority,
+		limit,
+		subscribe,
+		labels: {
+			singular: labels?.singular ?? null,
+			plural: labels?.plural ?? null,
+		},
+		actions: {
+			all: actions.all,
+			get: actions.get,
+			create: actions.create,
+			delete: actions.delete,
+			update: actions.update,
+			updateProps: actions.updateProps,
+		},
+	};
+}

package/src/utils/create-styles-repository.ts

@@ -1,40 +1,4 @@
-import { type Props } from '@elementor/editor-props';
-import { type StyleDefinition, type StyleDefinitionID, type StyleDefinitionVariant } from '@elementor/editor-styles';
-
-type MakeOptional< T, K extends keyof T > = Omit< T, K > & Partial< T >;
-
-export type UpdateActionPayload = MakeOptional< StyleDefinition, 'label' | 'variants' | 'type' >;
-
-export type UpdatePropsActionPayload = {
-	id: StyleDefinitionID;
-	meta: StyleDefinitionVariant[ 'meta' ];
-	props: Props;
-};
-
-export type Meta = Record< string, unknown >;
-
-export type StylesProvider = {
-	key: string;
-	priority: number;
-	actions: {
-		get: ( meta?: Meta ) => StyleDefinition[];
-		getById: ( id: StyleDefinitionID, meta?: Meta ) => StyleDefinition | null;
-		create?: ( label: StyleDefinition[ 'label' ] ) => StyleDefinitionID;
-		delete?: ( id: StyleDefinitionID ) => void;
-		setOrder?: ( order: StyleDefinitionID[] ) => void;
-		update?: ( data: UpdateActionPayload ) => void;
-		updateProps?: ( args: UpdatePropsActionPayload, meta?: Meta ) => void;
-	};
-	subscribe: ( callback: () => void ) => () => void;
-	labels?: {
-		singular: string;
-		plural: string;
-	};
-	reservedLabel?: string;
-	limit?: number;
-};
-
-const VALID_SELECTOR_REGEX = /^[a-zA-Z0-9_-]+$/;
+import { type Meta, type StylesProvider } from '../types';
 
 export const createStylesRepository = () => {
 	const providers: StylesProvider[] = [];
@@ -48,7 +12,7 @@ export const createStylesRepository = () => {
 	};
 
 	const all = ( meta: Meta = {} ) => {
-		return getProviders().flatMap( ( provider ) => provider.actions.get( meta ) );
+		return getProviders().flatMap( ( provider ) => provider.actions.all( meta ) );
 	};
 
 	const subscribe = ( cb: () => void ) => {
@@ -62,33 +26,14 @@ export const createStylesRepository = () => {
 	};
 
 	const getProviderByKey = ( key: string ) => {
-		return providers.find( ( provider ) => provider.key === key );
-	};
-
-	const isLabelExist = ( newLabel: string ) => {
-		const classes = all();
-		const reservedLabels = providers.map( ( { reservedLabel } ) => reservedLabel ).filter( Boolean );
-
-		if ( reservedLabels.includes( newLabel ) ) {
-			return true;
-		}
-
-		if ( ! classes?.length ) {
-			return false;
-		}
-
-		return classes.some( ( { label } ) => label.toLowerCase() === newLabel.toLowerCase() );
+		return providers.find( ( provider ) => provider.getKey() === key );
 	};
 
-	const isLabelValid = ( newLabel: string ) => VALID_SELECTOR_REGEX.test( newLabel );
-
 	return {
 		all,
 		register,
 		subscribe,
 		getProviders,
 		getProviderByKey,
-		isLabelExist,
-		isLabelValid,
 	};
 };

package/src/utils/is-elements-styles-provider.ts

@@ -0,0 +1,5 @@
+import { ELEMENTS_STYLES_PROVIDER_KEY_PREFIX } from '../providers/document-elements-styles-provider';
+
+export function isElementsStylesProvider( key: string ) {
+	return new RegExp( `^${ ELEMENTS_STYLES_PROVIDER_KEY_PREFIX }\\d+$` ).test( key );
+}

package/src/utils/validate-style-label.ts

@@ -0,0 +1,38 @@
+import { z } from '@elementor/schema';
+import { __ } from '@wordpress/i18n';
+
+import { ELEMENTS_STYLES_RESERVED_LABEL } from '../providers/document-elements-styles-provider';
+import { stylesRepository } from '../styles-repository';
+
+const VALID_LABEL_REGEX = /^[a-zA-Z0-9_-]+$/;
+
+const schema = z
+	.string()
+	.min( 1, __( 'Cannot be empty', 'elementor' ) )
+	.max( 50, __( 'Cannot be longer than 50 characters', 'elementor' ) )
+	.regex( VALID_LABEL_REGEX, __( 'Invalid format', 'elementor' ) );
+
+export function validateStyleLabel( label: string ) {
+	const existingLabels = new Set( [
+		ELEMENTS_STYLES_RESERVED_LABEL,
+		...stylesRepository.all().map( ( styleDef ) => styleDef.label.toLowerCase() ),
+	] );
+
+	const result = schema
+		.refine( ( value ) => ! existingLabels.has( value ), {
+			message: __( 'Name exists', 'elementor' ),
+		} )
+		.safeParse( label.toLowerCase() );
+
+	if ( result.success ) {
+		return {
+			isValid: true,
+			error: null,
+		};
+	}
+
+	return {
+		isValid: false,
+		error: result.error.format()._errors[ 0 ],
+	};
+}

package/src/element-base-styles-provider.ts

@@ -1,26 +0,0 @@
-import { getWidgetsCache } from '@elementor/editor-elements';
-
-import { type StylesProvider } from './utils/create-styles-repository';
-
-const ELEMENTS_BASE_STYLES_PROVIDER_KEY = 'element-base-styles';
-
-export const elementBaseStylesProvider: StylesProvider = {
-	key: ELEMENTS_BASE_STYLES_PROVIDER_KEY,
-	priority: 10,
-	actions: {
-		get() {
-			const widgetsCache = getWidgetsCache();
-
-			return Object.values( widgetsCache ?? {} ).flatMap( ( widget ) =>
-				Object.values( widget.base_styles ?? {} )
-			);
-		},
-
-		getById( id ) {
-			return this.get().find( ( style ) => style.id === id ) ?? null;
-		},
-	},
-	subscribe: () => {
-		return () => {};
-	},
-};