quill icon indicating copy to clipboard operation
quill copied to clipboard

Quill in Livewire 3

Open instantia-data opened this issue 1 year ago • 3 comments

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>

instantia-data avatar May 02 '24 15:05 instantia-data

To make sure it's an issue on Quill side, could you reproduce it on https://quilljs.com/playground/snow?

luin avatar May 03 '24 00:05 luin

https://quilljs.com/playground/snow#codeN4Ig9AlgdgJgpgDwHQAsAuBbANiAXCAHhggDcACAdwgCc5cIBzKAe1oD4AdKMnso0sgGMsAQwDOYgLwcQAM1YYAtA2rMArgAcyGAEaKATDM7depgqJ1wsZedWkg4xNKwD6wYGQAkUERjhkAXwCjd08LKyCCMHCsY1MzYnIIGHtHCGdqNw9vX38goyjEuPieAgBCRUUyAFEoMTVaMjQUCDEyFph4bmgNNTQAcjafP20RNEEUODbm-zSMsgBJABEySuKSgh6+poBPDTh7Dq6ZMmGDmXcvM8DgkEoaOgxmeCx7ULP8kHW+MCKuLlMAAFemIUAAKQaCagQDRoMT9ACUAJKfDEUJhaFOzCggnOIHcgjEGhcLBxcDBCM+3xRZBgzEEaj8UDQSBEnWqJDgzIAMq00Fy4NQIVhSHAqLR6FB0v0ADRkClkSRsMjAZE0kqCbFiTFzVgLGCKsj9XWZS45EZBfoAbjV6tMmrqOqcrGqWDgTMxklp9MZXJZDDgaFd7r9ACEdvqwSb9QibSY7fatZijlyFlBep7vQyPUgAI5qQU7ADKVjgggyEK2aAA2mc3sBzXBPgBdRFx20JsgQWTysom4M5lwufMQLBYBEqjud3gO7VkEdjw1QMVkACKalHWDBAAMAMSeYDRmABbdy1Xx6c0mZ+XBGsQsCj9KeXgKx5-TsSBgAqED86jQYKyGoOJoBA2IUuel52guWBIKozAstAy7UAAEl+ACy3KGimUBphmSAkCIWAFnGUHxAEcoAIwAAzUW+F5kf2bqDsOG6Ll6MGkWRvAwUg4H9PyCBoIoEwiFAAayjYwHlmB3AKpB3ElDheF9ARREFoavHwYhUDIWhmFcYppjKemqnEESYwTByfpgsuFA1JyzKVqZAwIrGZBgGAZBftCDABtQZC8py4pwIMZCaDAYz+BgYlqERWA7O+navoZ07BAxKIpf8GWlGAaLQrC3yAlyMAgigXCFKQxjZQQ+UYmQYjUIIhxoGgGhiLgnmCDAUBIAAVmILykNQSDLmgYDphgYAwYC+hINRSCUb8fLTWxsEDQUeXooVIAyuA0DwMgA14CAIABEAA

instantia-data avatar May 03 '24 08:05 instantia-data

The code doesn't run on my side.

luin avatar May 03 '24 10:05 luin

Closing as it's likely not a bug on Quill side. Feel free to reopen if you could provide a reproducible example.

luin avatar May 06 '24 00:05 luin