Update quill editor content by dynamic data in svelte

Question

I need to add quill editor to my svelte projects. I found this link online and followed his idea.

I installed his version from https://www.npmjs.com/package/@tadashi/svelte-editor-quill. Now the editor has initialized with given initial value.

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.

I just want to update editor data on call add() function. How can I do this?

That's how imported editor:

import {Editor, quill} from '@tadashi/svelte-editor-quill';

and rest code to initialize it:

let editorData =  "";

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: "Write here..",
   theme: "snow",
   // readOnly: true,
};

function onTextChange(event) {
   editorData = 'fhgfgh';
   console.log(event.detail)
}

function add(){
   editorData = "Apenas um show dfghdfgh";
   console.log(editorData);
}

Editor in HTML:

<Editor {options} on:text-change={onTextChange} bind:data={editorData} />

Answer 1

This is unfortunately not a very usable package.

The data property is not bindable and can only be used to set the initial value, if you change it later it will overwrite the editor element.

The component also does not expose the Quill instance which would give you access to its full API (like insertText). The only possible interaction is getting the text-change event.

You could recreate the entire Editor when the data changes programmatically but that is not a good approach. It can potentially cause layout shifts, unwanted scrolling and is wasteful.

I would recommend writing your own Svelte wrapper or find a better alternative.