stylesSet.add displays out of order

[Joe]

When adding 11 or more elements to a custom stylesSet, the stylesSet displays out of order in CKEDITOR.

For example:

CKEDITOR.stylesSet.add('test',[
{ name: 'Item 1', element: 'span', attributes: {'class' : 'item1'} },
{ name: 'Item 2', element: 'span', attributes: {'class' : 'item2'} },
{ name: 'Item 3', element: 'span', attributes: {'class' : 'item3'} },
{ name: 'Item 4', element: 'span', attributes: {'class' : 'item4'} },
{ name: 'Item 5', element: 'span', attributes: {'class' : 'item5'} },
{ name: 'Item 6', element: 'span', attributes: {'class' : 'item6'} },
{ name: 'Item 7', element: 'span', attributes: {'class' : 'item7'} },
{ name: 'Item 8', element: 'span', attributes: {'class' : 'item8'} },
{ name: 'Item 9', element: 'span', attributes: {'class' : 'item9'} },
{ name: 'Item 10', element: 'span', attributes: {'class' : 'item10'} },
{ name: 'Item 11', element: 'span', attributes: {'class' : 'item11'} },
{ name: 'Item 12', element: 'span', attributes: {'class' : 'item12'} },
{ name: 'Item 13', element: 'span', attributes: {'class' : 'item13'} }

]);

Appears in the following order:

Item 7 Item 1 Item 3 Item 4 Item 5 Item 6 Item 2 Item 8 Item 9 Item 10 Item 11 Item 12 Item 13

I've tried this in CKEDITOR 3.3, 3.6, and 3.6.3.

[Jakub Ś]

I didn't get the error you are talking about.

1. I have put your code under ckeditor\_source\plugins\styles\styles\test.js and then under ckeditor\plugins\styles\styles\test.js
2. Next I have set in replace method ( stylesSet: 'test',) and run the CKEditor.

All items were displayed in correct order.

In which browser and operating system are you getting this error?
Have you made any changes in CKEditor code that might have caused this behaviour?

[jcisio]

I could reproduce this problem. I have it in both 3.x and the latest 4.0 versions. I use the Drupal ckeditor module and add stylesset in ckeditor.styles.js with

CKEDITOR.addStylesSet('drupal', [...]);

When I had 11 block styles and 7 inline styles, they appeared in the wrong order. Then I see this issue, I remove a few styles and the order is again correct.

This is a long time bug for me (at least 3.4.x to now), in both Chrome for Mac and for Linux. I don't have this bug in Firefox. Never tested in IE.

[jcisio]

I think it is due to a "bug" in Chrome ​http://stackoverflow.com/a/3027715 that disorder "equal" objects when sorting.

[Piotrek Koszuliński]

Pull request: ​https://github.com/ckeditor/ckeditor-dev/pull/20.

[Jakub Ś]

Problem can be reproduced in Chrome from CKEditor 3.0 (it is also present in CKE 4.x (v4)).

[Olek Nowodziński]

DEV

Created a new branch ​t/9029@cksource with slightly modified version of the ​pull request.

1. Ported custom weight trick and slightly modified Array.sort() callback function.
2. Changed CKEDITOR.STYLE_BLOCK, CKEDITOR.STYLE_INLINE, CKEDITOR.STYLE_OBJECT indexes in core/style.js so styles in stylescombo appear in appropriate order (preserved right order):
   1. (if available) object styles first
   2. block styles
   3. inline styles
3. Because of 2., lang labels inside of stylescombo have changed so swapped object keys and within all lang files of the plugin to make them displayed as expected.

---

Tests

Created a new branch t/9029@tests-v4 with dt for correct order of styles displayed in stylescombo.

[Olek Nowodziński]

Created dev branch ​t/9029b@cksource with simple approach that uses hash table to styles in order and doesn't touch translations at all.

Test branch t/9029@tests-v4 remains unchanged.

[Frederico Caldeira Knabben]

@jcisio, thanks!

[Olek Nowodziński]

Fixed issue with a commit ​git:f7349902ebfbce.