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