Quill: "Justify" alignment on text card does not work IE/Edge/Firefox

[DJShump08]

When using the editor with text that fills more than one line, justify alignment does not work in IE/Edge/Firefox.

Steps for Reproduction

1. Visit https://codepen.io/anon/pen/yxVdYQ
2. Highlight the text
3. Select justify alignment.

Expected behavior:
The alignment shifts so the first line is taking up the whole space

Actual behavior:
Nothing changes (if you flip between left align and justify align is its obvious no change is being made)

Platforms:
IE/Edge/Firefox

[tribis]

I see that it is due to the .ql-editor class attribute "white-space: pre-wrap". Now it only works in Chrome, if that was changed into "pre-line" justification would work as expected in all three browsers (never mind IE).

[DJShump08]

@tribis if you add pre-line , for some reason you can not hit the space bar more than once on your keyboard. The cursor doesn't move after the first space

[tribis]

@DJShump08 hmm, I see that this only happens in Firefox, not in Edge or Chrome.

[alebx]

Any news on this issue?

[Chrisstar56]

It seems like if you add white-space: pre-line only on .ql-align-justify it works without any other consequences.

[nkovacic]

Still not working even with pre-lin on ql-editor and ql-align-justify.

[CGReinhold]

As @DJShump08 said, using white-space: pre-line makes the paragraph justified, but you cannot add space bar in the end of it.
The problem only occurs on Firefox, but it seems like some Quill event making this error because a similar div works in this codepen.

[johnozbay]

It's definitely a quill event. I still couldn't figure out what's triggering it but found a very hacky fix/solution. Which, at the time of this writing, works on Chrome, Firefox, Safari and Edge Chromium. For the lack of a better option, I'll likely have to use this in production, and so far it seems to be working. 🤞🏻🍷

1) I have :

.ql-editor .ql-align-justify {
    white-space: normal;
}

2) I've added a custom keyboard binding for spacebar, only applicable to the last character / end-of justified paragraphs on Firefox.

var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
if (isFirefox) {
  keyBindings.justifiedTextSpacebarFixForFirefox = {
    key: ' ',
    handler: function(range, context) {
      if (context.format.align === "justify" && context.prefix.length >= context.offset) {
        // this is the end of the paragraph / line, and user pressed spacebar, quill will ignore this / delete this, so insert an extra space here. 
        quill.insertText(range.index, ' ', 'user');
        return true;
      } else {
        return true;
      }
    }
  };
}

3) I initialized Quill config with the custom keyboard binding :

var quillConfig = {
  modules: {  
    keyboard: {
      bindings: keyBindings
    }
  }
};

var quill = new Quill('#docs-page-wrap', quillConfig);

Important: This is a quick and insanely hacky solution. Key bindings are blocking calls, and this means you have a blocking call on each spacebar, while this hack is still quite light, it's a terrible idea to have an expensive handler for a common key binding like spacebar.

And you will definitely run into other issues. (for example "tab" instead of space etc.) Posting this duct-tape fix only as a pointer.

Hopefully, you would never ever have to have to use it in production for an urgent fix, and hopefully someone can figure out where this mysterious delete event is coming from. 😅

[matheushoeltgebaum]

Thanks to the hacky solution presented by @johnozbay, I implemented the following code:

let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
if (isFirefox) {
    keybindings.justifiedTextSpacebarFixForFirefox = {
        'justify-spacebar-fix-firefox': {
            key: ' ',
            format: { 'align': 'justify' },
            suffix: /^$/,
            handler: function (range, context) {
                quillEditor.insertText(range.index, ' ', 'user');
                return true;
            }
        }
    };
}

In this case, there is no need to use a condition inside the handler function, just passing the properties should resolve it. The format property indicates that it will only fire the function when in a justified paragraph and the suffix property is a Regex pattern that will match the text immediately after user's selection, being the end of line in this example.

Furthermore information about the keyboard module can be found in this link.