@props([
    'height' => '300px',
    'label' => null,
    'value' => $attributes->wire('model')->value(),
    'name' => $attributes->wire('model')->name(),
    'readOnly' => false,
])
<div>
    <div class="form-group">
        @if ($label)
            <label class="form-label">{{ $label }}</label>
        @endif

        <div wire:ignore>
            <textarea x-data x-init="ClassicEditor
                .create($el, {
                    height: '{{ $height }}',
                    toolbar: ['undo', 'redo', '|', 'heading', '|', 'bold', 'italic', '|', 'link', 'insertTable', 'mediaEmbed', '|', 'bulletedList', 'numberedList', '|', 'alignment', '|', 'blockQuote'],
                    language: document.documentElement.lang,
                })
                .then(editor => {
                    @if ($readOnly)
                        editor.enableReadOnlyMode('lock-id');
                    @endif
                    editor.model.document.on('change:data', () => {
                        @this.set('{{ $attributes->wire('model')->value() }}', editor.getData())
                    });
                })
                .catch(error => console.error(error));" {{ $attributes }} class="form-control">{{ $value }}</textarea>
        </div>

        @error($name)
            <div class="text-danger form-text">{{ $message }}</div>
        @enderror
    </div>
</div>