Skip to content

Commit

Permalink
Add support for latin-alpha / upper-alpha list type highlighting …
Browse files Browse the repository at this point in the history 
…in list style properties buttons. (#17627)

Feature (list): Add support for `lower-alpha` / `upper-alpha` list type highlighting in list style properties buttons. Closes #17424
Fix (list): The list style buttons should show proper list type after clicking list for the first time.

MINOR BREAKING CHANGE (list): lower-alpha and upper-alpha list styles are now upcasted to `lower-latin` and `upper-latin` styles.
  • Loading branch information
@Mati365
Mati365 authored Dec 13, 2024
1 parent e228617 commit 2b2923a
Show file tree
Hide file tree
Showing 15 changed files with 260 additions and 113 deletions.
3 changes: 2 additions & 1 deletion packages/ckeditor5-list/src/legacylistproperties/legacylistpropertiesediting.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import LegacyListReversedCommand from './legacylistreversedcommand.js';
import LegacyListStartCommand from './legacyliststartcommand.js';
import { getSiblingListItem, getSiblingNodes } from '../legacylist/legacyutils.js';
import type { ListPropertiesConfig } from '../listconfig.js';
import { normalizeListStyle } from '../listproperties/utils/style.js';

const DEFAULT_LIST_TYPE = 'default';

Expand Down Expand Up @@ -307,7 +308,7 @@ function createAttributeStrategies( enabledProperties: ListPropertiesConfig ) {
},

getAttributeOnUpcast( listParent ) {
return listParent.getStyle( 'list-style-type' ) || DEFAULT_LIST_TYPE;
return normalizeListStyle( listParent.getStyle( 'list-style-type' )! ) || DEFAULT_LIST_TYPE;
}
} );
}
Expand Down
5 changes: 3 additions & 2 deletions packages/ckeditor5-list/src/listproperties/listpropertiesediting.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ import {
getAllSupportedStyleTypes,
getListTypeFromListStyleType,
getListStyleTypeFromTypeAttribute,
getTypeAttributeFromListStyleType
getTypeAttributeFromListStyleType,
normalizeListStyle
} from './utils/style.js';
import ListPropertiesUtils from './listpropertiesutils.js';
import {
Expand Down Expand Up @@ -331,7 +332,7 @@ function createAttributeStrategies( enabledProperties: ListPropertiesConfig ) {
const style = listParent.getStyle( 'list-style-type' );

if ( style ) {
return style;
return normalizeListStyle( style );
}

const attribute = listParent.getAttribute( 'type' );
Expand Down
4 changes: 1 addition & 3 deletions packages/ckeditor5-list/src/listproperties/listpropertiesui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -299,9 +299,7 @@ function getStyleButtonCreator( {

button.set( { label, icon, tooltip } );

listStyleCommand.on( 'change:value', () => {
button.isOn = listStyleCommand.value === type;
} );
button.bind( 'isOn' ).to( listStyleCommand, 'value', value => value === type );

button.on( 'execute', () => {
// If the content the selection is anchored to is a list, let's change its style.
Expand Down
12 changes: 11 additions & 1 deletion packages/ckeditor5-list/src/listproperties/ui/listpropertiesview.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
*/

import {
ButtonView,
View,
ViewCollection,
FocusCycler,
Expand All @@ -16,7 +17,6 @@ import {
createLabeledInputNumber,
addKeyboardHandlingForGrid,
CollapsibleView,
type ButtonView,
type InputNumberView,
type FocusableView
} from 'ckeditor5/src/ui.js';
Expand Down Expand Up @@ -283,6 +283,16 @@ export default class ListPropertiesView extends View {
stylesView.children.delegate( 'execute' ).to( this );

stylesView.focus = function( this: any ) {
// If there is a button that is already on, focus it.
// It's counterintuitive to focus the first button when there is already a button on.
for ( const child of this.children ) {
if ( child instanceof ButtonView && child.isOn ) {
child.focus();
return;
}
}

// ... otherwise focus the first button.
this.children.first.focus();
};

Expand Down
22 changes: 22 additions & 0 deletions packages/ckeditor5-list/src/listproperties/utils/style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,3 +61,25 @@ export function getListStyleTypeFromTypeAttribute( value: string ): string | nul
export function getTypeAttributeFromListStyleType( value: string ): string | null {
return LIST_STYLE_TO_TYPE_ATTRIBUTE[ value ] || null;
}

/**
* Normalizes list style by converting aliases to their canonical form.
*
* @param listStyle The list style value to normalize.
* @returns The canonical form of the list style.
*
* @example
* normalizeListStyle( 'lower-alpha' ); // Returns 'lower-latin'
* normalizeListStyle( 'upper-alpha' ); // Returns 'upper-latin'
* normalizeListStyle( 'disc' ); // Returns 'disc'
*/
export function normalizeListStyle( listStyle: string ): string {
switch ( listStyle ) {
case 'lower-alpha':
return 'lower-latin';
case 'upper-alpha':
return 'upper-latin';
default:
return listStyle;
}
}
60 changes: 30 additions & 30 deletions packages/ckeditor5-list/tests/legacylistproperties/legacylistpropertiesediting.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,13 +166,13 @@ describe( 'LegacyListPropertiesEditing', () => {
expect( editor.getData() ).to.equal( '<ul style="list-style-type:circle;"><li>Foo</li><li>Bar</li></ul>' );
} );

it( 'should convert single list (type: numbered, style: upper-alpha)', () => {
it( 'should convert single list (type: numbered, style: upper-latin)', () => {
setModelData( model,
'<listItem listIndent="0" listType="numbered" listStyle="upper-alpha">Foo</listItem>' +
'<listItem listIndent="0" listType="numbered" listStyle="upper-alpha">Bar</listItem>'
'<listItem listIndent="0" listType="numbered" listStyle="upper-latin">Foo</listItem>' +
'<listItem listIndent="0" listType="numbered" listStyle="upper-latin">Bar</listItem>'
);

expect( editor.getData() ).to.equal( '<ol style="list-style-type:upper-alpha;"><li>Foo</li><li>Bar</li></ol>' );
expect( editor.getData() ).to.equal( '<ol style="list-style-type:upper-latin;"><li>Foo</li><li>Bar</li></ol>' );
} );

it( 'should convert nested bulleted lists (main: circle, nested: disc)', () => {
Expand Down Expand Up @@ -334,18 +334,18 @@ describe( 'LegacyListPropertiesEditing', () => {
);
} );

it( 'should convert single list (type: numbered, style: upper-alpha)', () => {
editor.setData( '<ol style="list-style-type:upper-alpha;"><li>Foo</li><li>Bar</li></ol>' );
it( 'should convert single list (type: numbered, style: upper-latin)', () => {
editor.setData( '<ol style="list-style-type:upper-latin;"><li>Foo</li><li>Bar</li></ol>' );

expect( getModelData( model, { withoutSelection: true } ) ).to.equal(
'<listItem listIndent="0" listStyle="upper-alpha" listType="numbered">Foo</listItem>' +
'<listItem listIndent="0" listStyle="upper-alpha" listType="numbered">Bar</listItem>'
'<listItem listIndent="0" listStyle="upper-latin" listType="numbered">Foo</listItem>' +
'<listItem listIndent="0" listStyle="upper-latin" listType="numbered">Bar</listItem>'
);
} );

it( 'should convert nested and mixed lists', () => {
editor.setData(
'<ol style="list-style-type:upper-alpha;">' +
'<ol style="list-style-type:upper-latin;">' +
'<li>OL 1</li>' +
'<li>OL 2' +
'<ul style="list-style-type:circle;">' +
Expand All @@ -358,18 +358,18 @@ describe( 'LegacyListPropertiesEditing', () => {
);

expect( getModelData( model, { withoutSelection: true } ) ).to.equal(
'<listItem listIndent="0" listStyle="upper-alpha" listType="numbered">OL 1</listItem>' +
'<listItem listIndent="0" listStyle="upper-alpha" listType="numbered">OL 2</listItem>' +
'<listItem listIndent="0" listStyle="upper-latin" listType="numbered">OL 1</listItem>' +
'<listItem listIndent="0" listStyle="upper-latin" listType="numbered">OL 2</listItem>' +
'<listItem listIndent="1" listStyle="circle" listType="bulleted">UL 1</listItem>' +
'<listItem listIndent="1" listStyle="circle" listType="bulleted">UL 2</listItem>' +
'<listItem listIndent="0" listStyle="upper-alpha" listType="numbered">OL 3</listItem>'
'<listItem listIndent="0" listStyle="upper-latin" listType="numbered">OL 3</listItem>'
);
} );

it( 'should convert when the list is in the middle of the content', () => {
editor.setData(
'<p>Paragraph.</p>' +
'<ol style="list-style-type:upper-alpha;">' +
'<ol style="list-style-type:upper-latin;">' +
'<li>Foo</li>' +
'<li>Bar</li>' +
'</ol>' +
Expand All @@ -378,8 +378,8 @@ describe( 'LegacyListPropertiesEditing', () => {

expect( getModelData( model, { withoutSelection: true } ) ).to.equal(
'<paragraph>Paragraph.</paragraph>' +
'<listItem listIndent="0" listStyle="upper-alpha" listType="numbered">Foo</listItem>' +
'<listItem listIndent="0" listStyle="upper-alpha" listType="numbered">Bar</listItem>' +
'<listItem listIndent="0" listStyle="upper-latin" listType="numbered">Foo</listItem>' +
'<listItem listIndent="0" listStyle="upper-latin" listType="numbered">Bar</listItem>' +
'<paragraph>Paragraph.</paragraph>'
);
} );
Expand Down Expand Up @@ -5440,24 +5440,24 @@ describe( 'LegacyListPropertiesEditing', () => {
it( 'should inherit the attributes when merging the same kind of lists', () => {
setModelData( model,
'<paragraph>Foo Bar.[]</paragraph>' +
'<listItem listIndent="0" listReversed="true" listStart="3" listStyle="upper-alpha" listType="numbered">' +
'<listItem listIndent="0" listReversed="true" listStart="3" listStyle="upper-latin" listType="numbered">' +
'Foo' +
'</listItem>' +
'<listItem listIndent="0" listReversed="true" listStart="3" listStyle="upper-alpha" listType="numbered">' +
'<listItem listIndent="0" listReversed="true" listStart="3" listStyle="upper-latin" listType="numbered">' +
'Bar' +
'</listItem>'
);

editor.execute( 'numberedList' );

expect( getModelData( model ) ).to.equal(
'<listItem listIndent="0" listReversed="true" listStart="3" listStyle="upper-alpha" listType="numbered">' +
'<listItem listIndent="0" listReversed="true" listStart="3" listStyle="upper-latin" listType="numbered">' +
'Foo Bar.[]' +
'</listItem>' +
'<listItem listIndent="0" listReversed="true" listStart="3" listStyle="upper-alpha" listType="numbered">' +
'<listItem listIndent="0" listReversed="true" listStart="3" listStyle="upper-latin" listType="numbered">' +
'Foo' +
'</listItem>' +
'<listItem listIndent="0" listReversed="true" listStart="3" listStyle="upper-alpha" listType="numbered">' +
'<listItem listIndent="0" listReversed="true" listStart="3" listStyle="upper-latin" listType="numbered">' +
'Bar' +
'</listItem>'
);
Expand Down Expand Up @@ -5491,7 +5491,7 @@ describe( 'LegacyListPropertiesEditing', () => {
'<listItem listIndent="0" listReversed="true" listStart="2" listStyle="lower-latin" listType="numbered">' +
'Bar' +
'</listItem>' +
'<listItem listIndent="0" listStyle="upper-alpha" listType="bulleted">Foo Bar.[]</listItem>'
'<listItem listIndent="0" listStyle="upper-latin" listType="bulleted">Foo Bar.[]</listItem>'
);

editor.execute( 'numberedList' );
Expand Down Expand Up @@ -5573,7 +5573,7 @@ describe( 'LegacyListPropertiesEditing', () => {
'<listItem listIndent="0" listReversed="false" listStart="3" listStyle="lower-lating" listType="numbered">' +
'1.' +
'</listItem>' +
'<listItem listIndent="1" listReversed="true" listStart="1" listStyle="upper-alpha" listType="numbered">' +
'<listItem listIndent="1" listReversed="true" listStart="1" listStyle="upper-latin" listType="numbered">' +
'2.' +
'</listItem>' +
'<listItem listIndent="0" listReversed="false" listStart="3" listStyle="lower-lating" listType="numbered">' +
Expand All @@ -5590,10 +5590,10 @@ describe( 'LegacyListPropertiesEditing', () => {
'<listItem listIndent="0" listReversed="false" listStart="3" listStyle="lower-lating" listType="numbered">' +
'1.' +
'</listItem>' +
'<listItem listIndent="1" listReversed="true" listStart="1" listStyle="upper-alpha" listType="numbered">' +
'<listItem listIndent="1" listReversed="true" listStart="1" listStyle="upper-latin" listType="numbered">' +
'2.' +
'</listItem>' +
'<listItem listIndent="1" listReversed="true" listStart="1" listStyle="upper-alpha" listType="numbered">' +
'<listItem listIndent="1" listReversed="true" listStart="1" listStyle="upper-latin" listType="numbered">' +
'3.[]' +
'</listItem>' +
'<listItem listIndent="0" listReversed="false" listStart="3" listStyle="lower-lating" listType="numbered">' +
Expand All @@ -5607,27 +5607,27 @@ describe( 'LegacyListPropertiesEditing', () => {
describe( 'outdenting lists', () => {
it( 'should inherit the attributes from parent list', () => {
setModelData( model,
'<listItem listIndent="0" listReversed="true" listStart="2" listStyle="lower-alpha" listType="numbered">' +
'<listItem listIndent="0" listReversed="true" listStart="2" listStyle="lower-latin" listType="numbered">' +
'1.' +
'</listItem>' +
'<listItem listIndent="1" listReversed="false" listStart="3" listStyle="upper-alpha" listType="numbered">' +
'<listItem listIndent="1" listReversed="false" listStart="3" listStyle="upper-latin" listType="numbered">' +
'2.[]' +
'</listItem>' +
'<listItem listIndent="0" listReversed="true" listStart="2" listStyle="lower-alpha" listType="numbered">' +
'<listItem listIndent="0" listReversed="true" listStart="2" listStyle="lower-latin" listType="numbered">' +
'3.' +
'</listItem>'
);

editor.execute( 'outdentList' );

expect( getModelData( model ) ).to.equal(
'<listItem listIndent="0" listReversed="true" listStart="2" listStyle="lower-alpha" listType="numbered">' +
'<listItem listIndent="0" listReversed="true" listStart="2" listStyle="lower-latin" listType="numbered">' +
'1.' +
'</listItem>' +
'<listItem listIndent="0" listReversed="true" listStart="2" listStyle="lower-alpha" listType="numbered">' +
'<listItem listIndent="0" listReversed="true" listStart="2" listStyle="lower-latin" listType="numbered">' +
'2.[]' +
'</listItem>' +
'<listItem listIndent="0" listReversed="true" listStart="2" listStyle="lower-alpha" listType="numbered">' +
'<listItem listIndent="0" listReversed="true" listStart="2" listStyle="lower-latin" listType="numbered">' +
'3.' +
'</listItem>'
);
Expand Down
Loading

0 comments on commit 2b2923a

Please sign in to comment.