@props(['name', 'value' => '', 'short' => false, 'placeholder' => 'Escribe el contenido aquí.'])
<div class="advanced-editor {{ $short ? 'is-short' : '' }}" data-rich-editor>
    <div class="advanced-editor-toolbar" aria-label="Herramientas de formato">
        <div>
            <button type="button" data-editor-command="heading" title="Título de sección">H2</button>
            <button type="button" data-editor-command="bold" title="Negrita"><strong>B</strong></button>
            <button type="button" data-editor-command="italic" title="Cursiva"><em>I</em></button>
            <button type="button" data-editor-command="bullet" title="Lista con viñetas">• Lista</button>
            <button type="button" data-editor-command="number" title="Lista numerada">1. Lista</button>
            <button type="button" data-editor-command="quote" title="Cita">“ Cita</button>
            <button type="button" data-editor-command="link" title="Agregar enlace">Enlace</button>
        </div>
        <div class="advanced-editor-modes">
            <button type="button" class="active" data-editor-mode="write">Editar</button>
            <button type="button" data-editor-mode="preview">Vista previa</button>
        </div>
    </div>
    <textarea class="form-textarea content-editor {{ $short ? 'content-editor-short' : '' }}" name="{{ $name }}" data-editor-input placeholder="{{ $placeholder }}" required>{{ $value }}</textarea>
    <div class="advanced-editor-preview public-copy" data-editor-preview hidden></div>
    <div class="advanced-editor-foot"><span>Formato enriquecido seguro</span><small>Encabezados, listas, citas y enlaces.</small></div>
</div>