<x-aura::fields.wrapper :field="$field">
    <div x-data="{
        init() {
            // Customize Quill's sanitization rules
            const Link = Quill.import('formats/link');
            Link.sanitize = function(url) {
                // Allow file:// protocol
                if (url.startsWith('file://')) {
                    return url;
                }
                // Default sanitization for other protocols
                return Link.sanitize(url);
            };
    
            let quill = new Quill(this.$refs.quill, {
                theme: 'snow',
                {{-- modules: {
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'],
                        ['blockquote', 'code-block'],
                        [{ 'header': 1 }, { 'header': 2 }],
                        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                        [{ 'script': 'sub' }, { 'script': 'super' }],
                        [{ 'indent': '-1' }, { 'indent': '+1' }],
                        [{ 'size': ['small', false, 'large', 'huge'] }],
                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                        [{ 'color': [] }, { 'background': [] }],
                        [{ 'font': [] }],
                        [{ 'align': [] }],
                        ['link'],
                        ['clean']
                    ]
                } --}}
            });
    
            quill.on('text-change', function() {
                $dispatch('input', quill.root.innerHTML);
            });
        },
    }" x-ref="quill" wire:ignore wire:model="form.fields.{{ optional($field)['slug'] }}">
        {!! $this->form['fields'][$field['slug']] ?? '' !!}
    </div>

    <style>
        ol li[data-list="bullet"]:before {
            content: '';
        }
    </style>
</x-aura::fields.wrapper>

{{-- border-gray-500/30 focus:border-primary-300 focus:ring focus:ring-primary-300 focus:ring-opacity-50 dark:focus:ring-primary-500 dark:focus:ring-opacity-50 rounded-md shadow-sm --}}
