<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>

<div id="{{ widget.editor_id }}">
    <!-- Content is set via JavaScript -->
</div>

<textarea name="{{ widget.name }}" style="display: none;"></textarea>

<script>
    (()=> {
        const quill = new Quill('#{{ widget.editor_id }}', {
            theme: 'snow',
            modules: {
                table: true,
            }
        });
    
        var htmlContent = "{{ widget.value | safe }}";
    
        quill.clipboard.dangerouslyPasteHTML(htmlContent);
    
        quill.on('text-change', function() {
            var content = quill.root.innerHTML;
            var textarea = document.querySelector('textarea[name="{{ widget.name }}"]');
            textarea.value = content;
        });
    })()
</script>

