@props(['name', 'label' => null, 'value' => null, 'hint' => null, 'dir' => null])
{{-- Trix editor (load resources/js/rich-text.js) writing HTML into a hidden input; the server keeps only safe formatting (App\Support\SafeHtml). --}}
@php($key = str_replace(['[', ']'], ['.', ''], $name))
@php($id = $attributes->get('id', str_replace(['[', ']'], ['_', ''], $name)))
<div>
    @if ($label)
        <label for="{{ $id }}_editor" class="form-label">{{ $label }} @if ($attributes->get('required'))<span class="text-red-500">*</span>@endif</label>
    @endif
    <input type="hidden" name="{{ $name }}" id="{{ $id }}" value="{{ old($key, $value) }}">
    <trix-editor id="{{ $id }}_editor" input="{{ $id }}" @if ($dir) dir="{{ $dir }}" @endif
                 @class(['trix-content', '!border-red-500' => $errors->has($key)])></trix-editor>
    @if ($hint)<p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">{{ $hint }}</p>@endif
    @error($key)<p class="form-error">{{ $message }}</p>@enderror
</div>