From 47193c9461d3abdbd372ebd1f36b913d24b9b9ed Mon Sep 17 00:00:00 2001 From: Mateusz Baginski Date: Fri, 10 Jan 2025 09:24:57 +0100 Subject: [PATCH] Allow to specify which list style types are shown in list type selector dropdown. --- packages/ckeditor5-list/src/listconfig.ts | 44 +++++++++++++++++++ .../listproperties/listpropertiesediting.ts | 5 +++ .../src/listproperties/listpropertiesui.ts | 8 +++- .../src/listproperties/utils/config.ts | 6 ++- .../tests/manual/list-properties.html | 4 ++ .../tests/manual/list-properties.js | 30 +++++++++++++ 6 files changed, 94 insertions(+), 3 deletions(-) diff --git a/packages/ckeditor5-list/src/listconfig.ts b/packages/ckeditor5-list/src/listconfig.ts index 7703be832c4..cd5e31231a6 100644 --- 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; } 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 index d7535ffa00a..22e8c512e4b 100644 --- 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 index 07c027189c9..bc30a59b88d 100644 --- a/packages/ckeditor5-list/src/listproperties/listpropertiesui.ts +++ b/packages/ckeditor5-list/src/listproperties/listpropertiesui.ts @@ -226,6 +226,12 @@ function getDropdownViewCreator( { styleDefinitions: Array; } ) { 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 index 90b4dd37ba0..95e12a17a8a 100644 --- 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, + 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; + listStyleTypes?: Array; useAttribute: boolean; }; startIndex: boolean; diff --git a/packages/ckeditor5-list/tests/manual/list-properties.html b/packages/ckeditor5-list/tests/manual/list-properties.html index b69b3a12cb3..dedb87c109b 100644 --- a/packages/ckeditor5-list/tests/manual/list-properties.html +++ b/packages/ckeditor5-list/tests/manual/list-properties.html @@ -27,3 +27,7 @@

Just styles

No properties enabled

+ +

Hidden lower-latin and upper-latin styles

+ +
diff --git a/packages/ckeditor5-list/tests/manual/list-properties.js b/packages/ckeditor5-list/tests/manual/list-properties.js index fa16236ff73..c15abb372ac 100644 --- 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 ); + } );