@props([
    'height' => 200,
    'wireModel' => '',
    'id' => null,
])

@php
    $editorId = $id ?: 'quill-' . md5($wireModel ?: 'editor');
@endphp

<div>
    <div wire:ignore x-data x-init="
        const quill = new Quill('#{{ $editorId }}', {
            theme: 'snow',
            modules: {
                toolbar: [
                    ['bold', 'italic', 'underline', 'strike'],
                    ['blockquote', 'code-block', 'image'],
                    [{ header: 1 }, { header: 2 }],
                    [{ list: 'ordered' }, { list: 'bullet' }]
                ]
            }
        });

        const input = document.getElementById('{{ $editorId }}-content');

        if (input && input.value) {
            const parser = new DOMParser();
            const doc = parser.parseFromString(input.value, 'text/html');
            quill.setText((doc.body.textContent || '').trim());
        }

        quill.on('text-change', () => {
            input.value = quill.getText().trimEnd();
            input.dispatchEvent(new Event('input', { bubbles: true }));
        });
    ">
        <div id="{{ $editorId }}" style="height: {{ $height }}px; max-width: 600px;"></div>
    </div>

    <input type="hidden" id="{{ $editorId }}-content" wire:model="{{ $wireModel }}">
</div>