Quill in Livewire 3
I'm trying to implement the text editor within a form developed in Livewire 3. When I submit the form the editor simply disappears. Basically neither the wire:ignore nor wire:ignore.self directives do not work.
<div wire:ignore>
<div class="form-group mb-2">
<label>Content</label>
<div id="editor_{{ $name }}" wire:ignore></div>
<!-- Ensure this hidden input's name matches the editor ID -->
<input type="hidden" name="{{ $name }}" wire:model="{{$name}}">
</div>
@push('scripts')
<script>
document.addEventListener('livewire:init', () => {
const editorId = 'editor_{{ $name }}';
const editorElement = document.getElementById(editorId);
const hiddenInput = document.querySelector('input[name="{{$name}}"]');
if (!editorElement.__quill) {
const quill = new Quill(`#${editorId}`, {
theme: 'snow'
});
setTimeout(function () {
quill.root.innerHTML = hiddenInput.value;
}, 100);
editorElement.__quill = quill;
quill.on('text-change', function () {
hiddenInput.value = quill.root.innerHTML;
hiddenInput.dispatchEvent(new Event('input')); // Trigger Livewire's update manually
});
}
});
</script>
@endpush
</div>
To make sure it's an issue on Quill side, could you reproduce it on https://quilljs.com/playground/snow?
https://quilljs.com/playground/snow#codeN4Ig9AlgdgJgpgDwHQAsAuBbANiAXCAHhggDcACAdwgCc5cIBzKAe1oD4AdKMnso0sgGMsAQwDOYgLwcQAM1YYAtA2rMArgAcyGAEaKATDM7depgqJ1wsZedWkg4xNKwD6wYGQAkUERjhkAXwCjd08LKyCCMHCsY1MzYnIIGHtHCGdqNw9vX38goyjEuPieAgBCRUUyAFEoMTVaMjQUCDEyFph4bmgNNTQAcjafP20RNEEUODbm-zSMsgBJABEySuKSgh6+poBPDTh7Dq6ZMmGDmXcvM8DgkEoaOgxmeCx7ULP8kHW+MCKuLlMAAFemIUAAKQaCagQDRoMT9ACUAJKfDEUJhaFOzCggnOIHcgjEGhcLBxcDBCM+3xRZBgzEEaj8UDQSBEnWqJDgzIAMq00Fy4NQIVhSHAqLR6FB0v0ADRkClkSRsMjAZE0kqCbFiTFzVgLGCKsj9XWZS45EZBfoAbjV6tMmrqOqcrGqWDgTMxklp9MZXJZDDgaFd7r9ACEdvqwSb9QibSY7fatZijlyFlBep7vQyPUgAI5qQU7ADKVjgggyEK2aAA2mc3sBzXBPgBdRFx20JsgQWTysom4M5lwufMQLBYBEqjud3gO7VkEdjw1QMVkACKalHWDBAAMAMSeYDRmABbdy1Xx6c0mZ+XBGsQsCj9KeXgKx5-TsSBgAqED86jQYKyGoOJoBA2IUuel52guWBIKozAstAy7UAAEl+ACy3KGimUBphmSAkCIWAFnGUHxAEcoAIwAAzUW+F5kf2bqDsOG6Ll6MGkWRvAwUg4H9PyCBoIoEwiFAAayjYwHlmB3AKpB3ElDheF9ARREFoavHwYhUDIWhmFcYppjKemqnEESYwTByfpgsuFA1JyzKVqZAwIrGZBgGAZBftCDABtQZC8py4pwIMZCaDAYz+BgYlqERWA7O+navoZ07BAxKIpf8GWlGAaLQrC3yAlyMAgigXCFKQxjZQQ+UYmQYjUIIhxoGgGhiLgnmCDAUBIAAVmILykNQSDLmgYDphgYAwYC+hINRSCUb8fLTWxsEDQUeXooVIAyuA0DwMgA14CAIABEAA
The code doesn't run on my side.
Closing as it's likely not a bug on Quill side. Feel free to reopen if you could provide a reproducible example.