Improve type format.

ckeditor · Jan 10, 2025 · 6696ecf · 6696ecf
1 parent 47193c9
commit 6696ecf
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 41 deletions.
diff --git a/packages/ckeditor5-list/src/listconfig.ts b/packages/ckeditor5-list/src/listconfig.ts
@@ -171,47 +171,47 @@ export interface ListPropertiesStyleConfig {
 
 	/**
 	 * Defines which list styles should be available in the UI.
-	 * Accepts an array of style names or `true` to enable all styles.
-	 *
-	 * Available styles for numbered lists:
-	 * - 'decimal'
-	 * - 'decimal-leading-zero'
-	 * - 'lower-roman'
-	 * - 'upper-roman'
-	 * - 'lower-latin'
-	 * - 'upper-latin'
-	 *
-	 * Available styles for bulleted lists:
-	 * - 'disc'
-	 * - 'circle'
-	 * - 'square'
+	 * Accepts a configuration object with numbered and bulleted styles or `true` to enable all styles.
 	 *
 	 * ```ts
 	 * {
 	 *   list: {
 	 *     properties: {
 	 *       styles: {
-	 *         listStyleTypes: [ 'decimal', 'lower-roman', 'upper-roman' ]
+	 *         listTypesStyles: {
+	 *           numbered: [ 'decimal', 'lower-roman', 'upper-roman' ],
+	 *           bulleted: [ 'disc', 'circle' ]
+	 *         }
 	 *       }
 	 *     }
 	 *   }
 	 * }
 	 * ```
 	 *
-	 * @default ['decimal','decimal-leading-zero','lower-roman','upper-roman','lower-latin','upper-latin','disc','circle','square']
+	 * @default {
+	 *   numbered: ['decimal', 'decimal-leading-zero', 'lower-roman', 'upper-roman', 'lower-latin', 'upper-latin'],
+	 *   bulleted: ['disc', 'circle', 'square']
+	 * }
 	 */
-	listStyleTypes?: Array<ListPropertiesStyleListStyleType>;
+	listTypesStyles?: ListStyleTypesConfig;
+}
+
+export interface ListStyleTypesConfig {
+	numbered?: Array<NumberedListStyleType>;
+	bulleted?: Array<BulletedListStyleType>;
 }
 
 export type ListPropertiesStyleListType = 'numbered' | 'bulleted';
 
-export type ListPropertiesStyleListStyleType =
+export type NumberedListStyleType =
 	| 'decimal'
 	| 'decimal-leading-zero'
 	| 'lower-roman'
 	| 'upper-roman'
 	| 'lower-latin'
-	| 'upper-latin'
+	| 'upper-latin';
+
+export type BulletedListStyleType =
 	| 'disc'
 	| 'circle'
 	| 'square';
diff --git a/packages/ckeditor5-list/src/listproperties/listpropertiesediting.ts b/packages/ckeditor5-list/src/listproperties/listpropertiesediting.ts
@@ -269,7 +269,11 @@ function createAttributeStrategies( enabledProperties: ListPropertiesConfig ) {
 
 	if ( enabledProperties.styles ) {
 		const useAttribute = normalizedConfig.styles.useAttribute;
-		const allowedListStyleTypes = normalizedConfig.styles.listStyleTypes;
+		const configuredTypes = normalizedConfig.styles.listTypesStyles;
+		const allowedTypes = {
+			numbered: ( configuredTypes && configuredTypes.numbered ) || [],
+			bulleted: ( configuredTypes && configuredTypes.bulleted ) || []
+		};
 
 		strategies.push( {
 			attributeName: 'listStyle',
@@ -283,8 +287,11 @@ function createAttributeStrategies( enabledProperties: ListPropertiesConfig ) {
 					supportedTypes = supportedTypes.filter( styleType => !!getTypeAttributeFromListStyleType( styleType ) );
 				}
 
-				if ( Array.isArray( allowedListStyleTypes ) ) {
-					supportedTypes = supportedTypes.filter( styleType => allowedListStyleTypes.includes( styleType ) );
+				if ( allowedTypes ) {
+					supportedTypes = supportedTypes.filter( styleType => {
+						const listType = getListTypeFromListStyleType( styleType );
+						return allowedTypes[ listType as 'numbered' | 'bulleted' ].includes( styleType );
+					} );
 				}
 
 				editor.commands.add( 'listStyle', new ListStyleCommand( editor, DEFAULT_LIST_TYPE, supportedTypes ) );

diff --git a/packages/ckeditor5-list/src/listproperties/listpropertiesui.ts b/packages/ckeditor5-list/src/listproperties/listpropertiesui.ts
@@ -226,7 +226,7 @@ function getDropdownViewCreator( {
 	styleDefinitions: Array<StyleDefinition>;
 } ) {
 	const parentCommand = editor.commands.get( parentCommandName )!;
-	const allowedListStyleTypes = normalizedConfig.styles.listStyleTypes;
+	const allowedListStyleTypes = normalizedConfig.styles.listTypesStyles;
 
 	// Filter style definitions if specific styles are configured
 	const filteredStyleDefinitions = Array.isArray( allowedListStyleTypes ) ?
@@ -373,17 +373,24 @@ function createListPropertiesView( {
 
 	if ( normalizedConfig.styles.listTypes.includes( listType ) ) {
 		const listStyleCommand: LegacyListStyleCommand | ListStyleCommand = editor.commands.get( 'listStyle' )!;
-
 		const styleButtonCreator = getStyleButtonCreator( {
 			editor,
 			parentCommandName,
 			listStyleCommand
 		} );
 
-		// The command can be ListStyleCommand or DocumentListStyleCommand.
-		const isStyleTypeSupported = getStyleTypeSupportChecker( listStyleCommand );
+		const configuredTypes = normalizedConfig.styles.listTypesStyles;
+		let filteredDefinitions = styleDefinitions;
+
+		if ( configuredTypes ) {
+			const allowedTypes = configuredTypes[ listType ] || [];
+			filteredDefinitions = styleDefinitions.filter( def => allowedTypes.includes( def.type ) );
+		}
 
-		styleButtonViews = styleDefinitions.filter( isStyleTypeSupported ).map( styleButtonCreator );
+		const isStyleTypeSupported = getStyleTypeSupportChecker( listStyleCommand );
+		styleButtonViews = filteredDefinitions
+			.filter( isStyleTypeSupported )
+			.map( styleButtonCreator );
 	}
 
 	const listPropertiesView = new ListPropertiesView( locale, {
@@ -461,7 +468,21 @@ function getMenuBarStylesMenuCreator(
 			parentCommandName,
 			listStyleCommand
 		} );
-		const styleButtonViews = styleDefinitions.filter( isStyleTypeSupported ).map( styleButtonCreator );
+
+		const configuredTypes = normalizedConfig.styles.listTypesStyles;
+		let filteredDefinitions = styleDefinitions;
+
+		if ( configuredTypes ) {
+			const listType = parentCommandName.replace( 'List', '' ) as 'numbered' | 'bulleted';
+			const allowedTypes = configuredTypes[ listType ] || [];
+
+			filteredDefinitions = styleDefinitions.filter( def => allowedTypes.includes( def.type ) );
+		}
+
+		const styleButtonViews = filteredDefinitions
+			.filter( isStyleTypeSupported )
+			.map( styleButtonCreator );
+
 		const listPropertiesView = new ListPropertiesView( locale, {
 			styleGridAriaLabel,
 			enabledProperties: {

diff --git a/packages/ckeditor5-list/src/listproperties/utils/config.ts b/packages/ckeditor5-list/src/listproperties/utils/config.ts
@@ -74,7 +74,7 @@ function getNormalizedStylesConfig( styles: ListPropertiesConfig[ 'styles' ] ):
 			normalizedConfig.listTypes;
 
 		normalizedConfig.useAttribute = !!styles.useAttribute;
-		normalizedConfig.listStyleTypes = styles.listStyleTypes;
+		normalizedConfig.listTypesStyles = styles.listTypesStyles;
 	}
 
 	return normalizedConfig;
@@ -86,7 +86,10 @@ function getNormalizedStylesConfig( styles: ListPropertiesConfig[ 'styles' ] ):
 export type NormalizedListPropertiesConfig = {
 	styles: {
 		listTypes: Array<ListPropertiesStyleListType>;
-		listStyleTypes?: Array<string>;
+		listTypesStyles?: {
+			numbered?: Array<string>;
+			bulleted?: Array<string>;
+		};
 		useAttribute: boolean;
 	};
 	startIndex: boolean;

diff --git a/packages/ckeditor5-list/tests/manual/list-properties.js b/packages/ckeditor5-list/tests/manual/list-properties.js
@@ -231,17 +231,19 @@ ClassicEditor
 		list: {
 			properties: {
 				styles: {
-					listStyleTypes: [
-						'decimal',
-						'decimal-leading-zero',
-						'lower-roman',
-						'upper-roman',
-						// 'lower-latin',
-						// 'upper-latin',
-						'disc',
-						'circle',
-						'square'
-					]
+					listTypesStyles: {
+						numbered: [
+							'decimal',
+							'decimal-leading-zero',
+							'lower-roman',
+							'upper-roman'
+						],
+						bulleted: [
+							'disc',
+							'circle',
+							'square'
+						]
+					}
 				}
 			}
 		}