Quill: Space key doesn't work on Firefox when object created by JavaScript

[screets]

Hello guys,

It seems like Quill conflicts when you create your editor by JavaScript and then apply Quill. Especially space key doesn't make any affect.

Here you go: https://jsfiddle.net/jwb1rw4z/

It works on Safari and Chrome well, but Firefox (even in Firefox Quantum).

How can we solve this issue ?

Thanks.

[jhchen]

What does created on air mean? Is this Adobe Air? It works fine on Mac + Firefox.

[screets]

@jhchen
I have updated the title. Space has no effect in Firefox/Mac when your editable object is created by JavaScript like in the example.

I am not sure if its only my installation, or its general Firefox issue.

Firefox 57.0b7 (no extensions)
MacOs Sierra 10.12.6

What Firefox version are you using? Maybe i can try with that too.

[jhchen]

Still works for me on Mac + Firefox. Can you provide detailed steps for reproduction? You might be doing something different that is not evident in this issue.

[jackmaw]

Space key doesn't work for me too in either editor created by constructor this.quill = new Quill() or here: https://jsfiddle.net/jwb1rw4z/

reproduction:
type some words, press space then type another letter, the result will be:
"fizz b" --> "fizzb"

Firefox 58.0b6 (64 bit) or 57.00(64bit)
Windows 10 Pro

[jhchen]

@jackmaw In your example you are not including the required Quill stylesheet: https://quilljs.com/docs/quickstart/. If you add it all will be well.

[jackmaw]

@jhchen thanks, for the answer with snow theme it works.
However what if i dont want to use stylesheets from snow theme?

In my opinion, this should be in base styles its a little bit weird for me that i need some theme to basically have ability to write any article on firefox quantum.

Btw, thanks for great editor i learn a lot reading quill code:)

[jhchen]

You can see from the next link in the documentation Download there is a quill.core.css that just has the basic styles.

[masonblier]

I also hit this bug. We are not using the quill.core.css file. The critical CSS needed to fix this bug is:

.quill-editor {
    white-space: pre-wrap;
}

Very surprising this bug only happens on firefox, not chrome. It might be related with how innerHTML works: Chrome replaces trailing spaces with  , but firefox does not.

[jhchen]

Forgot to close this issue as the solution was to include the required core quill styles. I would not recommend cherry-picking just the white-space rule as you may have other issues. The quill.core.css file includes the minimal styles Quill recommends for normal usage.