Quill: Mobile Device Text Formatting (Adding Bold / Italics / Changing Fonts...)

Created on 10 May 2017 · 10Comments · Source: quilljs/quill

Has anyone tried using this with a mobile device (I have this issue in iOS and on Android).

Whenever I try and format the text in my box - it seems to work the first time (if my selection includes the first word) but from then on NONE of my formatting changes are listened to.

Steps for Reproduction

1) Launch a quill editor on a mobile device (Android seems to be worse than iOS but either are adequate)

2) Type a sentence.

3) Select the first word in the sentence and choose to make it BOLD.

4) Select the same word that you just made bold and now make it ITALIC as well.

The word remains bold. Try any other formatting changes... the word doesn't change.

Expected behavior:

I would like the fonts and formatting to be updated.

Actual behavior:

The formatting seems to not "hear" what I have specified. I have alerted the value of the "get selection" function and noticed that the first time (when it worked) it returns values 0 (meaning it's the beginning of my string) and 5 (meaning it was a five-letter word).

From then on it returns 11 (?) and 0 (meaning that nothing is selected in my string)... which is strange.

Platforms:

iOS safari. Android Chrome... etc.

Version: NEWEST

Run Quill.version to find out

needs reproduction

Source

jbhorsewriter7

👍2

Most helpful comment

I can confirm this behaviour.

bjentsch on 15 May 2017

👍3

All 10 comments

Has anyone else run into this?

@jhchen do you have any ideas or further tests that I could run?

jbhorsewriter7 on 10 May 2017

I can confirm this behaviour.

bjentsch on 15 May 2017

👍3

Does this occur on Quill's website quilljs.com, particularly the standalone editors for example https://quilljs.com/standalone/snow? I'm not able to reproduce on a Safari 10 on iPad.

jhchen on 18 May 2017

My steps for reproducing:

I inserted some paragraphs with text by typing on the keyboard.
I highlighted the first word in the third paragraph and formatted it to bold, it worked.
I highlighted the first word in the first paragraph and formatted it to bold - it didn't work.
Also, formatting other selections now didn't work as expected.
I tapped the first word, autocorrect told me it had no suggestions for it. I pressed bold, it worked.

I noticed that after "selecting" a word with the Apple autocorrect function just by tapping it, formatting would always work. When selecting a word with the "select" functionality, also when expanding the selection, there's a high chance that formatting won't work. After trying to format, Safari resets the caret to some point that appears to be the center of my previous selection.

Description for the screenshots:
1) selected a word (step 3. from above)
2) after pressing "bold" - caret was in the middle of the first word, bold "B" is highlighted but no bold text
3) after using the autocorrect "selection" and just pressing bold, the word was formatted bold.

ipad_quill_1
ipad_quill_2
ipad_quill_3

bjentsch on 18 May 2017

I've experienced formatting issues as well. I'm on iOS 10 with an external keyboard. This is my repro:

Hit https://quilljs.com/standalone/snow in Safari
Type: "This is a test"
Using the arrow keys on the keyboard move the cursor to the work "This" and shift+arrow to highlight the word "This".
Tap the "B" (bold) button in the toolbar and the word turns bold.
Us the arrow keys to get the cursor to the word "is"
shift+arrow to select the word "is"
Tap the "I" (italic) button in the toolbar - at this point the selection moves back to the word "This" and makes it italic. The word "is" should have been made italic.

Here are some screen shots:

Highlight "This":
iosquill1

Hit B to make it bold:
iosquill1b

Highlight "is":
iosquill2

Hit "I" and it changes selection to "This" and makes it italic:
iosquill3

homerlex on 22 May 2017

👍1

Any news on this?

bjentsch on 6 Jun 2017

I've never been able to repro on my iPad but can you guys try on the latest version of Quill 1.3.0? Some selection code was changed that fixed some other mobile bugs.

jhchen on 17 Jul 2017

FYI - I tested my repro case using https://quilljs.com/standalone/snow (which now uses Quill 1.3.0) and could not reproduce the problem. I'll have to get this version into our application and test there as well.

homerlex on 17 Jul 2017

@jbhorsewriter7 I started another project https://github.com/hivecms/quillview. QuillView is to display quill format on iOS native views. Your comments are welcome.