it looks it can’t sync quill sometime after switch currentPendingId
useEffect(() => {
let quill, ydoc, ytext, provider, binding, leave
const gc = () => {
try {
window.removeEventListener('blur', leave)
binding.destroy()
provider.destroy()
ydoc.destroy()
} catch (ex) {
// console.log(ex)
}
}
if (!currentPendingId) {
gc()
return
}
quill = textareaRef.current = new Quill(document.querySelector('#detail-editor'), {
modules: {
cursors: true,
toolbar: false,
history: {
userOnly: true
}
},
placeholder: 'input your detail..',
theme: 'bubble', // 'bubble' is also great,
})
// A Yjs document holds the shared data
ydoc = new Y.Doc()
const indexeddbProvider = new IndexeddbPersistence(currentPendingId, ydoc)
indexeddbProvider.whenSynced.then(() => {
console.log('loaded data from indexed db')
})
ytext = ydoc.getText('quill')
const url = Meteor.settings.public.yjsUrl || 'ws://localhost:4444'
provider = new WebrtcProvider(currentPendingId, ydoc, { signaling: [url] })
binding = new QuillBinding(ytext, quill, provider.awareness)
leave = () => { quill.blur() }
// Remove the selection when the iframe is blurred
window.addEventListener('blur', leave)
return () => {
gc()
}
}, [currentPendingId])