@props([
    'id',
    'name',
    'value' => '',
    'placeholder' => 'Start typing...',
    'required' => false,
])

<div class="mb-3">

    <textarea
        id="{{ $id }}"
        name="{{ $name }}"
        placeholder="{{ $placeholder }}"
        class="form-control @error($name) is-invalid @enderror ckeditor"
        {{ $required ? 'required' : '' }}
    >{{ old($name, $value) }}</textarea>

    @error($name)
        <div class="invalid-feedback d-block">
            {{ $message }}
        </div>
    @enderror

</div>

@once

@push('scripts')

<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>

<script>

document.addEventListener('DOMContentLoaded', function () {

    document.querySelectorAll('.ckeditor').forEach(function (editor) {

        if (editor.dataset.loaded) {
            return;
        }

        ClassicEditor
            .create(editor, {

                toolbar: [

                    'heading',

                    '|',

                    'bold',

                    'italic',

                    'underline',

                    'strikethrough',

                    'superscript',

                    'subscript',

                    '|',

                    'fontColor',

                    'fontBackgroundColor',

                    '|',

                    'bulletedList',

                    'numberedList',

                    '|',

                    'outdent',

                    'indent',

                    '|',

                    'alignment',

                    '|',

                    'link',

                    'blockQuote',

                    'insertTable',

                    'horizontalLine',

                    'specialCharacters',

                    '|',

                    'undo',

                    'redo'

                ],

                table: {

                    contentToolbar: [

                        'tableColumn',

                        'tableRow',

                        'mergeTableCells'

                    ]

                }

            })

            .then(editorInstance => {

                editor.dataset.loaded = true;

            })

            .catch(error => {

                console.error(error);

            });

    });

});

</script>

@endpush

@endonce