title: Update quill editor content by dynamic data in svelte
body: <p>I need to add quill editor to my svelte projects. I found <a href="https://svelte.dev/repl/839ad6a3e1e24b149099c704e18df476?version=3.32.3" rel="nofollow noreferrer">this link</a> online and followed his idea.</p>
  <p>I installed his version from <a href="https://www.npmjs.com/package/@tadashi/svelte-editor-quill" rel="nofollow noreferrer">https://www.npmjs.com/package/@tadashi/svelte-editor-quill</a>. Now the editor has initialized with given initial value.</p>
  <p>But I need to update the editor value dynamically and the value is changing, but the editor is not functioning properly as it is going to read-only mode.</p>
  <p>I just want to update editor data on call <code>add()</code> function. How can I do this?</p>
  <p>That's how imported editor:</p>
  <pre><code>import {Editor, quill} from '@tadashi/svelte-editor-quill';
  </code></pre>
  <p>and rest code to initialize it:</p>
  <pre><code>let editorData =  &quot;&quot;;
  
  var toolbarOptions = [
     ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
     ['link','blockquote', 'code-block'],
     [{ 'header': 1 }, { 'header': 2 }],               // custom button values
     [{ 'list': 'ordered'}, { 'list': 'bullet' }],
     [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
     [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
     [{ 'direction': 'rtl' }],                         // text direction
     [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
     [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
     [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
     [{ 'font': [] }],
     [{ 'align': [] }],
     ['clean'],                                        // remove formatting button
     ['link', 'image'],
  ];
  
  const options = {
     // debug: 'info',
     modules: {
      toolbar: toolbarOptions
     },
     placeholder: &quot;Write here..&quot;,
     theme: &quot;snow&quot;,
     // readOnly: true,
  };
  
  function onTextChange(event) {
     editorData = 'fhgfgh';
     console.log(event.detail)
  }
  
  function add(){
     editorData = &quot;Apenas um show dfghdfgh&quot;;
     console.log(editorData);
  }
  </code></pre>
  <p>Editor in HTML:</p>
  <pre><code>&lt;Editor {options} on:text-change={onTextChange} bind:data={editorData} /&gt;
  </code></pre>