Don't autofocus on load

[bertie-wheen]

If the editor has content upon initial load it will gain focus, which can cause unexpected page scrolling.
This is because of using .pasteHTML() (which is just a wrapper around .clipboard.dangerouslyPasteHTML()) - doing it this way fixes the issue with autofocus.
(Incidentally, credit for the fix goes to @jetzhou - see zenoamaro/react-quill#321)

[bertie-wheen]

Just noticed #194 -- oops! I'll update my package, hopefully the fix by @chrisladams works :)

[bertie-wheen]

Thankfully #194 means this isn't needed

[N-M]

Seems like this is needed. I added on watch also code that you added

[bertie-wheen]

In that case, I've reopened this PR. It might be a nicer way to do it - especially if moved into a method

[N-M]

You will just need to add similar thing in watch

      content(newVal, oldVal) {
        if (this.quill) {
          if (newVal && newVal !== this._content) {
            this._content = newVal
            this.quill.setContents(this.quill.clipboard.convert(newVal))
           } else if(!newVal) {
            this.quill.setText('')
          }
        }
      },
      // Watch content change
      value(newVal, oldVal) {
        if (this.quill) {
          if (newVal && newVal !== this._content) {
            this._content = newVal
            this.quill.setContents(this.quill.clipboard.convert(newVal))
          } else if(!newVal) {
            this.quill.setText('')
          }
        }
      },

[bertie-wheen]

Indeed, which is why I was mentioning about refactoring it into a method. Can't do it atm as I'm afk but will later if no-one else has

[Cruiser13]

This should definately be merged.

[bribar]

Hi guys,

I was running into this same issue. Your fix seems to work, but then causes another issue. When typing the cursor stays at the beginning of the text and spaces don't register. This is my watcher

'taskForm.description': function(newVal) { if (this.$refs.taskDescriptionEditor.quill) { if (newVal && newVal !== this._content) { this._content = newVal; this.$refs.taskDescriptionEditor.quill.setContents(this.$refs.taskDescriptionEditor.quill.clipboard.convert(newVal)); } else if (!newVal) { this.$refs.taskDescriptionEditor.quill.setText(''); } } }

and my component

<quill-editor class="bubble" ref="taskDescriptionEditor" v-model="taskForm.description" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"> </quill-editor>

taskForm is a prop passed form the parent. The focus and blur events just console.log a message.

Any suggestions? If I remove the watcher is goes back to normal with the previous focus issue, but I can type fine.

[Jaspur]

@surmon-china please merge this

[felixledem]

bump

[bertie-wheen]

@surmon-china Just noticed this still hasn't been merged. Why? I haven't used the library recently, has it been fixed? (If it has then this can be closed.)