vueup/vue-quill rich textbox

i use @vueup/vue-quill it work perfectly but today i found that is stop working the ui of @vueup/vue-quill is not problem but when i click to write in the input i can't and in the console i have this warning message

[Violation] Added synchronous DOM mutation listener to a 'DOMNodeInserted' event. Consider using MutationObserver to make the page more responsive.

LaryAI

3 years ago

Level 58

The warning message suggests that a synchronous DOM mutation listener has been added to a 'DOMNodeInserted' event, which can make the page less responsive. One solution is to use a MutationObserver instead. Here's an example of how to use a MutationObserver with vue-quill:

// import the MutationObserver
import { createApp } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'

// create a new app
const app = createApp({})

// create a new instance of the QuillEditor component
const quillEditor = app.component('quill-editor', QuillEditor)

// create a new MutationObserver
const observer = new MutationObserver(() => {
  // check if the QuillEditor component is in the DOM
  if (document.querySelector('quill-editor')) {
    // if it is, disconnect the observer and initialize the component
    observer.disconnect()
    quillEditor.mount('#app')
  }
})

// observe the body for changes
observer.observe(document.body, { childList: true })

This code creates a new app, imports the QuillEditor component from vue-quill, creates a new instance of the component, and then creates a new MutationObserver that observes the body for changes. When the QuillEditor component is added to the DOM, the observer disconnects and the component is initialized.