Allow to specify which list style types are shown in list type select…

…or dropdown. (#17734) Feature (list): Allow to specify which list style types are shown in list type selector dropdown. Closes #17176
ckeditor · Jan 22, 2025 · ce64b2c · ce64b2c
1 parent 0b637cd
commit ce64b2c
Show file tree

Hide file tree

Showing 6 changed files with 371 additions and 7 deletions.
diff --git a/packages/ckeditor5-list/src/listconfig.ts b/packages/ckeditor5-list/src/listconfig.ts
@@ -168,6 +168,74 @@ export interface ListPropertiesStyleConfig {
 	 * @default false
 	 */
 	useAttribute?: boolean;
+
+	/**
+	 * Defines which list styles should be available in the UI.
+	 * Accepts a configuration object with numbered and bulleted styles.
+	 *
+	 * ```ts
+	 * {
+	 *   list: {
+	 *     properties: {
+	 *       styles: {
+	 *         listStyleTypes: {
+	 *           numbered: [ 'decimal', 'lower-roman', 'upper-roman' ],
+	 *           bulleted: [ 'disc', 'circle' ]
+	 *         }
+	 *       }
+	 *     }
+	 *   }
+	 * }
+	 * ```
+	 *
+	 * When the `listTypes` configuration is set, `listStyleTypes` will only take effect for the enabled list types.
+	 * For example, with the following configuration:
+	 *
+	 * ```ts
+	 * {
+	 *   list: {
+	 *     properties: {
+	 *       styles: {
+	 *         listTypes: 'numbered',
+	 *         listStyleTypes: {
+	 *           numbered: [ 'decimal', 'lower-roman' ],
+	 *           bulleted: [ 'disc', 'circle' ]
+	 *         }
+	 *       }
+	 *     }
+	 *   }
+	 * }
+	 * ```
+	 *
+	 * Only the numbered list styles will be available in the UI, as the `listTypes` property limits style selection to numbered lists only.
+	 *
+	 * **Note**: This configuration works only with
+	 * {@link module:list/listproperties~ListProperties list properties}.
+	 *
+	 * @default {
+	 *   numbered: [ 'decimal', 'decimal-leading-zero', 'lower-roman', 'upper-roman', 'lower-latin', 'upper-latin' ],
+	 *   bulleted: [ 'disc', 'circle', 'square' ]
+	 * }
+	 */
+	listStyleTypes?: ListStyleTypesConfig;
+}
+
+export interface ListStyleTypesConfig {
+	numbered?: Array<NumberedListStyleType>;
+	bulleted?: Array<BulletedListStyleType>;
 }
 
 export type ListPropertiesStyleListType = 'numbered' | 'bulleted';
+
+export type NumberedListStyleType =
+	| 'decimal'
+	| 'decimal-leading-zero'
+	| 'lower-roman'
+	| 'upper-roman'
+	| 'lower-latin'
+	| 'upper-latin';
+
+export type BulletedListStyleType =
+	| 'disc'
+	| 'circle'
+	| 'square';
diff --git a/packages/ckeditor5-list/src/listproperties/listpropertiesui.ts b/packages/ckeditor5-list/src/listproperties/listpropertiesui.ts
@@ -367,17 +367,27 @@ 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 configuredListStylesTypes = normalizedConfig.styles.listStyleTypes;
+		let filteredDefinitions = styleDefinitions;
 
-		styleButtonViews = styleDefinitions.filter( isStyleTypeSupported ).map( styleButtonCreator );
+		if ( configuredListStylesTypes ) {
+			const allowedTypes = configuredListStylesTypes[ listType ];
+
+			if ( allowedTypes ) {
+				filteredDefinitions = styleDefinitions.filter( def => allowedTypes.includes( def.type ) );
+			}
+		}
+
+		const isStyleTypeSupported = getStyleTypeSupportChecker( listStyleCommand );
+		styleButtonViews = filteredDefinitions
+			.filter( isStyleTypeSupported )
+			.map( styleButtonCreator );
 	}
 
 	const listPropertiesView = new ListPropertiesView( locale, {
@@ -455,7 +465,20 @@ function getMenuBarStylesMenuCreator(
 			parentCommandName,
 			listStyleCommand
 		} );
-		const styleButtonViews = styleDefinitions.filter( isStyleTypeSupported ).map( styleButtonCreator );
+
+		const configuredListStylesTypes = normalizedConfig.styles.listStyleTypes;
+		let filteredDefinitions = styleDefinitions;
+
+		if ( configuredListStylesTypes ) {
+			const listType = listCommand.type as 'numbered' | 'bulleted';
+			const allowedTypes = configuredListStylesTypes[ listType ];
+
+			if ( allowedTypes ) {
+				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
@@ -53,8 +53,8 @@ export function getNormalizedConfig( config: ListPropertiesConfig ): NormalizedL
  * @returns An object with normalized list properties styles.
  */
 function getNormalizedStylesConfig( styles: ListPropertiesConfig[ 'styles' ] ): NormalizedListPropertiesConfig[ 'styles' ] {
-	const normalizedConfig = {
-		listTypes: [ 'bulleted', 'numbered' ] as Array<ListPropertiesStyleListType>,
+	const normalizedConfig: NormalizedListPropertiesConfig[ 'styles' ] = {
+		listTypes: [ 'bulleted', 'numbered' ],
 		useAttribute: false
 	};
 
@@ -74,6 +74,10 @@ function getNormalizedStylesConfig( styles: ListPropertiesConfig[ 'styles' ] ):
 			normalizedConfig.listTypes;
 
 		normalizedConfig.useAttribute = !!styles.useAttribute;
+
+		if ( styles.listStyleTypes ) {
+			normalizedConfig.listStyleTypes = styles.listStyleTypes;
+		}
 	}
 
 	return normalizedConfig;
@@ -85,6 +89,10 @@ function getNormalizedStylesConfig( styles: ListPropertiesConfig[ 'styles' ] ):
 export type NormalizedListPropertiesConfig = {
 	styles: {
 		listTypes: Array<ListPropertiesStyleListType>;
+		listStyleTypes?: {
+			numbered?: Array<string>;
+			bulleted?: Array<string>;
+		};
 		useAttribute: boolean;
 	};
 	startIndex: boolean;