Buttons for Align don't activate properly

[ghost]

I'm trying to use buttons for the Align formatter instead of the dropdown. I found #170 for the issue and was able to get it working with the value attribute (as mentioned in the Breaking Changes).

However, I can't figure out how to get the default "left" align to become active correctly. It should be active by default, so I leave out the value. However, it isn't active by default. It only becomes active after another align format is activated. Then both align formats are active.

I did a bit of debugging and it looks like it's an issue in the modules/toolbar.js:

if (input.value) {
        let active = input.value === formats[format] ||
                     (formats[format] != null && input.value === formats[format].toString());
        input.classList.toggle('ql-active', active);
} else {
        input.classList.toggle('ql-active', formats[format] || false);
}

There's no align format by default, so nothing gets activated. Say the align format with the value "center" is applied. The "center" button is activated since it has a value and matches the format. It also activates "left" button since it doesn't have a value, but there is a format for "align".

As a workaround, I added the value "left" to the left align format (and the whitelist). That fixes multiple buttons being activated, but it still doesn't highlight "left" by default (or if there is no align format).

I'm not sure what the best way to fix this is, though. I think there needs to be a way to say that an item is active if it does not have the format. So as long as there isn't an "align" format, the "left" align format is active.

Steps for Reproduction

1. Visit http://jsfiddle.net/bwgbsd8o/2/
2. Enter text
3. Change the alignment of the text (center, for example).

Expected behavior: Only the "center" align format is highlighted

Actual behavior: Both the "left" and "center" align formats are highlighted

Platforms: Chrome 51

Version: 1.0.0-beta6

[NekR]

I think it's not fixed. I have following options:

const toolbarOptions = [
  ['align'],
  [{ align: 'right' }],
  [{ align: 'center' }],
  [{ align: 'justify' }],
];

And when I set something to be aligned to right/center/justify then align left is also highlighted.

Other moments:

['align'] and [{ align: null }] -- display align to left
[{ align: 'left' }] and [{ align: false }] -- display empty button

[clementprdhomme]

Hey @NekR ,

I had the exact same issue and I realised you have to define your options this way:

const toolbarOptions = [
  [{ align: '' }],
  [{ align: 'right' }],
  [{ align: 'center' }],
  [{ align: 'justify' }],
];

Just make sure that align is an object with an empty string as value. This worked for me with the bubble theme.

Clément

PS: I use version 1.2.0.