search

froala / wysiwyg-editor

The next generation Javascript WYSIWYG HTML Editor.
https://www.froala.com/wysiwyg-editor
Other
5.27k stars 673 forks source link

Firefox quirks with editor focusing and cursor getting stuck #3247

Open chrisdeeming opened 5 years ago

chrisdeeming commented 5 years ago
Expected behavior.

Multiple spaces should be inserted. The HTML should be inserted without a leading line break.

Actual behavior.

The cursor appears to get stuck. The HTML is inserted with a leading line break.

Steps to reproduce the problem.

Open the following jsFiddle in Firefox (latest version, macOS or Windows):

https://jsfiddle.net/froala/L27wmobk/1/

This simply inserts a small image representing an emoji into the editor 1000ms after the editor is initialised and the editor has been focused.

Whitespace is entered before the image which I'm led to believe should not happen if the insert happens while the editor is focused.

But, more significantly, if you click into the editor next to the emoji image and start pressing space continuously, only a single space is inserted and the cursor appears to be stuck.

OS.

macOS / Windows

Browser.

Firefox

stefanneculai commented 5 years ago

I can confirm that is is a bug. In the meanwhile, please use the following workaround: https://jsfiddle.net/4tw0Lgus/.

chrisdeeming commented 5 years ago

Thanks @stefanneculai

The workaround would be problematic if the editor isn't empty to start with as if there is existing content then the emoji would always be inserted at the start.

We discovered that the issue was exclusive to Froala 2.9.x so we have made the decision to roll back to Froala 2.8.x which had significantly fewer issues for us.

chrisdeeming commented 5 years ago

@stefanneculai while I can confirm that Firefox is no longer inserting a leading line break, the other part of the issue is not fixed.

cursor getting stuck

Multiple spaces should be inserted.

The cursor appears to get stuck.

But, more significantly, if you click into the editor next to the emoji image and start pressing space continuously, only a single space is inserted and the cursor appears to be stuck.

https://www.youtube.com/watch?v=XbyeTuuKeZQ&feature=youtu.be

stefanneculai commented 5 years ago

@chrisdeeming I am not able to reproduce this on the latest master. Is it possible to check on that and if you still have troubles to provide a few more details on the emoticons problem?

chrisdeeming commented 5 years ago

I'm sorry for the delay in responding. I do seem to be able to reproduce this reliably.

The steps to do so are really no different to what I have said previously and identical to the previously showed YouTube video:

https://www.youtube.com/watch?v=XbyeTuuKeZQ&feature=youtu.be

  1. After the image has been inserted (doesn't have to be an emoticon) click in the editor as if you want to insert text to the right of the image.

  2. Hit the space key on the keyboard continually. A maximum of one space is inserted.

I've tried this on 2.9.4 with Firefox stable and Firefox nightly on both macOS and Windows.

Is there anything about the provided steps which is unclear?