Wrong order of "lineHeights" in line height drop-down

[earshinov]

Copied from #4143, which was closed and not reopened

---

Expected behavior.

Line heights in the drop-down should have the same order as in the lineHeights options/configuration. Example:

lineHeights: {
      '1': 1,
      '1.15': 1.15,
      '1.5': 1.5,
      '2':  2,
      '3': 3
    }

Should be shown as 1, 1.15, 1.5, 2, 3 in the drop-down. I'd suggest to change the configuration and use an array instead, like:

lineHeights: [
  {label: '1', value: 1},
  {label: '1.15', value: 1.15},
  {label: '1.5', value: 1.5},
  {label: '2', value: 2},
  {label: '3', value: 3},
]

This could be easily implemented with backward-compatibility by checking the type of the lineHeights property. If it is an Array, use the new order defined by the array. If it is a plain object use the existing for/in loop.

Actual behavior.

Instead, the drop-down shows the line heights in this order: 1, 2, 3, 1.15, 1.5 - The entries in the drop-down are sorted by the natural order of map elements in JavaScript. The order defined by the programmer is ignored.

Steps to reproduce the problem.

Simply use the configuration from "Expected behavior".

Editor version.

3.2.3

OS.

Windows 10

Browser.

All browsers

[earshinov]

Fresh repro from comment

---

@ilyaskarim , https://jsfiddle.net/urfzbe1t/:

lineHeights: {
  '1': 1,
  '1.15': 1.15,
  '1.5': 1.5,
  '2':  2,
  '3': 3
}

Froala v4.3.0

[ilyaskarim]

Fresh repro from comment

@ilyaskarim , https://jsfiddle.net/urfzbe1t/:

lineHeights: {
  '1': 1,
  '1.15': 1.15,
  '1.5': 1.5,
  '2':  2,
  '3': 3
}

Froala v4.3.0

Thank you for sharing the additional details @earshinov. I have submitted this issue internally for further review from the dev-team.