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

…or dropdown.
ckeditor · Jan 10, 2025 · 47193c9 · 47193c9
1 parent 55ed74d
commit 47193c9
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 3 deletions.
diff --git a/packages/ckeditor5-list/src/listconfig.ts b/packages/ckeditor5-list/src/listconfig.ts
@@ -168,6 +168,50 @@ export interface ListPropertiesStyleConfig {
 	 * @default false
 	 */
 	useAttribute?: boolean;
+
+	/**
+	 * 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'
+	 *
+	 * ```ts
+	 * {
+	 *   list: {
+	 *     properties: {
+	 *       styles: {
+	 *         listStyleTypes: [ 'decimal', 'lower-roman', 'upper-roman' ]
+	 *       }
+	 *     }
+	 *   }
+	 * }
+	 * ```
+	 *
+	 * @default ['decimal','decimal-leading-zero','lower-roman','upper-roman','lower-latin','upper-latin','disc','circle','square']
+	 */
+	listStyleTypes?: Array<ListPropertiesStyleListStyleType>;
 }
 
 export type ListPropertiesStyleListType = 'numbered' | 'bulleted';
+
+export type ListPropertiesStyleListStyleType =
+	| 'decimal'
+	| 'decimal-leading-zero'
+	| 'lower-roman'
+	| 'upper-roman'
+	| 'lower-latin'
+	| 'upper-latin'
+	| 'disc'
+	| 'circle'
+	| 'square';
diff --git a/packages/ckeditor5-list/src/listproperties/listpropertiesediting.ts b/packages/ckeditor5-list/src/listproperties/listpropertiesediting.ts
@@ -269,6 +269,7 @@ function createAttributeStrategies( enabledProperties: ListPropertiesConfig ) {
 
 	if ( enabledProperties.styles ) {
 		const useAttribute = normalizedConfig.styles.useAttribute;
+		const allowedListStyleTypes = normalizedConfig.styles.listStyleTypes;
 
 		strategies.push( {
 			attributeName: 'listStyle',
@@ -282,6 +283,10 @@ function createAttributeStrategies( enabledProperties: ListPropertiesConfig ) {
 					supportedTypes = supportedTypes.filter( styleType => !!getTypeAttributeFromListStyleType( styleType ) );
 				}
 
+				if ( Array.isArray( allowedListStyleTypes ) ) {
+					supportedTypes = supportedTypes.filter( styleType => allowedListStyleTypes.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,6 +226,12 @@ function getDropdownViewCreator( {
 	styleDefinitions: Array<StyleDefinition>;
 } ) {
 	const parentCommand = editor.commands.get( parentCommandName )!;
+	const allowedListStyleTypes = normalizedConfig.styles.listStyleTypes;
+
+	// Filter style definitions if specific styles are configured
+	const filteredStyleDefinitions = Array.isArray( allowedListStyleTypes ) ?
+		styleDefinitions.filter( def => allowedListStyleTypes.includes( def.type ) ) :
+		styleDefinitions;
 
 	return ( locale: Locale ) => {
 		const dropdownView = createDropdown( locale, SplitButtonView );
@@ -256,7 +262,7 @@ function getDropdownViewCreator( {
 				dropdownView,
 				parentCommandName,
 				styleGridAriaLabel,
-				styleDefinitions
+				styleDefinitions: filteredStyleDefinitions
 			} );
 
 			dropdownView.panelView.children.add( listPropertiesView );

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,7 @@ function getNormalizedStylesConfig( styles: ListPropertiesConfig[ 'styles' ] ):
 			normalizedConfig.listTypes;
 
 		normalizedConfig.useAttribute = !!styles.useAttribute;
+		normalizedConfig.listStyleTypes = styles.listStyleTypes;
 	}
 
 	return normalizedConfig;
@@ -85,6 +86,7 @@ function getNormalizedStylesConfig( styles: ListPropertiesConfig[ 'styles' ] ):
 export type NormalizedListPropertiesConfig = {
 	styles: {
 		listTypes: Array<ListPropertiesStyleListType>;
+		listStyleTypes?: Array<string>;
 		useAttribute: boolean;
 	};
 	startIndex: boolean;

diff --git a/packages/ckeditor5-list/tests/manual/list-properties.html b/packages/ckeditor5-list/tests/manual/list-properties.html
@@ -27,3 +27,7 @@ <h2>Just styles</h2>
 <h2>No properties enabled</h2>
 
 <div id="editor-h"></div>
+
+<h2>Hidden lower-latin and upper-latin styles</h2>
+
+<div id="editor-i"></div>
diff --git a/packages/ckeditor5-list/tests/manual/list-properties.js b/packages/ckeditor5-list/tests/manual/list-properties.js
@@ -222,3 +222,33 @@ ClassicEditor
 	.catch( err => {
 		console.error( err.stack );
 	} );
+
+// ------------------------------------------------------------------
+
+ClassicEditor
+	.create( document.querySelector( '#editor-i' ), {
+		...config,
+		list: {
+			properties: {
+				styles: {
+					listStyleTypes: [
+						'decimal',
+						'decimal-leading-zero',
+						'lower-roman',
+						'upper-roman',
+						// 'lower-latin',
+						// 'upper-latin',
+						'disc',
+						'circle',
+						'square'
+					]
+				}
+			}
+		}
+	} )
+	.then( editor => {
+		CKEditorInspector.attach( { 'No properties enabled': editor } );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );