The focus method throws error when it's called

[AndreyCJ]

I'm using Vue 3 + Ionic as a Ui framework. Now trying to migrate to quill 2.0, and found out that I can't use focus method. Tried to pass an argument of { preventScroll: false }, didn't work too.

Full error looks like this:

can't access property "offset", blot is null
normalizedToRange/indexes<@webpack-internal:///./node_modules/quill/core/selection.js:223:21
normalizedToRange@webpack-internal:///./node_modules/quill/core/selection.js:219:31
getRange@webpack-internal:///./node_modules/quill/core/selection.js:208:24
update@webpack-internal:///./node_modules/quill/core/selection.js:353:43
setRange@webpack-internal:///./node_modules/quill/core/selection.js:348:10
focus@webpack-internal:///./node_modules/quill/core/selection.js:103:10
focus@webpack-internal:///./node_modules/quill/core/quill.js:236:20

[luin]

Can you reproduce this in https://quilljs.com/playground/snow?

[AndreyCJ]

In the playground it's working :) here's link

I don't know what other information I can give you to help fix this. The main differences between my actual project and playground code are:

1. I'm using webpack as a bundler and yarn as package manager
2. I'm using Ionic as UI library (so my quill component is wraped in IonApp, IonContent, etc.)
3. I'm registering quill modules before creating quill editor

 Quill.register({
  'themes/snow': Snow,
  'formats/bold': Bold,
  'formats/italic': Italic,
  'formats/header': Header,
  'formats/link': Link,
});

[luin]

Looks like #4147. Merging into it

[danielpintosalazar]

Hello everyone,

I wanted to share a solution that worked for me when using Vue 3 with the Quill editor. Initially, I kept the editor in a reactive variable like this:

quill = ref(); quill = new Quill(...);

However, I encountered the "blot is null" error frequently. After some experimentation, I found a workaround by initializing the Quill editor in a non-reactive way:

var quill = undefined; quill = new Quill(...);

This change eliminated the "blot is null" error. It seems that using a reactive variable with the Quill editor can cause conflicts when events are generated within the editor. Using a non-reactive variable for the Quill instance resolved the issue for me.

I hope this helps anyone facing similar issues.

[KristupasMat]

Hi, If someone encounters this issue using Vue3 with Options API, returning Quill instance as a computed property seems to resolve the issue as well: computed: { quillEditor() { return new Quill(...) } }

Hope that helps :)

.