Cannot read properties of null (reading 'offset') on custom handler getSelection()

[erodriguezg]

I was trying to implement a custom handler for image loading, which gave me the following error:

quill.js?v=ad3ea11b:12611 Uncaught TypeError: Cannot read properties of null (reading 'offset') at quill.js?v=ad3ea11b:12611:26 at Array.map () at Proxy.normalizedToRange (quill.js?v=ad3ea11b:12608:31) at Proxy.getRange (quill.js?v=ad3ea11b:12597:25) at Proxy.update (quill.js?v=ad3ea11b:12734:43) at Proxy.update (quill.js?v=ad3ea11b:13811:20) at Proxy.getSelection (quill.js?v=ad3ea11b:13705:10) at Toolbar.imageHandler (EditPublicationPage.vue:42:31) at HTMLButtonElement. (quill.js?v=ad3ea11b:17165:31)

I downgraded to 1.3.7 from 2.0.2 (also tested 2.0.1 and 2.0.0 with no success) and the same code now works flawlessly.

The Handler:

function imageHandler () { if (quill.value) { quill.value.focus() const range = quill.value.getSelection() // this line throws error const value = prompt('please copy paste the image url here.') if (value) { quill.value.insertEmbed(range.index, 'image', value, Quill.sources.USER) } } }

all source code of my component:

``

``

[jxjj]

I ran into a similar issue using vue with refs, also described here: https://github.com/slab/quill/issues/4293

Changing to a plain variable resolved things for me.

//  ❌ doesn't work with Quill2 for me
const quillRef = ref<Quill | null>(null)

onMounted(() => {
  quillRef.value = new Quill(...)
});

// ✅  works with quill2
let quill: Quill | null = null

onMounted(() => {
   quill = new Quill(...)
})

[erodriguezg]

thanks @jxjj , that worked

[ngd-b]

thanks! that's good!

[cyrusDev1]

thanks!! it works

[eiinu]

thanks!! and there is another way

// ✅ 
const quillRef = ref<Quill | null>(null)

onMounted(() => {
  quillRef.value = markRaw(new Quill(...))
});

https://vuejs.org/api/reactivity-advanced.html#markraw

[tt-a1i]

The error occurs because of a conflict between Vue 3's reactivity system (Proxy-based) and Quill's internal DOM/selection management.

When using ref, each .value access triggers Vue's reactivity system, which can cause async updates and interfere with Quill's synchronous operations:

// Problem:
const quill = ref(null)  // Proxy intercepts -> async -> timing issues

// Solution:
let quill = null  // Direct reference, no reactivity wrapper

[sakurawaifu]

use shallowRef. 😄

May be due to Vue's reactivity causing unexpected errors inside the Quill instance.

So, If you want use reactivity system while avoiding this error, don't make the Quill instance itself reactive. Such as shallowRef.

[fankangsong]

I ran into a similar issue using vue with refs, also described here: #4293

Changing to a plain variable resolved things for me.

// ❌ doesn't work with Quill2 for me const quillRef = ref<Quill | null>(null)

onMounted(() => { quillRef.value = new Quill(...) }); // ✅ works with quill2 let quill: Quill | null = null

onMounted(() => { quill = new Quill(...) })

thanks, it works well.