`. 'id', // La propiedad de Livewire donde vive el contenido, p. ej. `fileContents.0`. 'estado', // El lenguaje: `scss`, `js` o `yaml`. Decide el coloreado y el analizador que marca los // errores de sintaxis. 'lenguaje' => 'yaml', // El contenido actual. **Se pinta dentro del `

`**, y no es opcional de
    // verdad: sin él, un formulario de edición abre vacío y guardar borra el archivo.
    'valor' => '',
    'filas' => 15,
    'error' => false,
]));

foreach ($attributes->all() as $__key => $__value) {
    if (in_array($__key, $__propNames)) {
        $$__key = $$__key ?? $__value;
    } else {
        $__newAttributes[$__key] = $__value;
    }
}

$attributes = new \Illuminate\View\ComponentAttributeBag($__newAttributes);

unset($__propNames);
unset($__newAttributes);

foreach (array_filter(([
    // El id del `<textarea>`.
    'id',
    // La propiedad de Livewire donde vive el contenido, p. ej. `fileContents.0`.
    'estado',
    // El lenguaje: `scss`, `js` o `yaml`. Decide el coloreado y el analizador que marca los
    // errores de sintaxis.
    'lenguaje' => 'yaml',
    // El contenido actual. **Se pinta dentro del `<textarea>`**, y no es opcional de
    // verdad: sin él, un formulario de edición abre vacío y guardar borra el archivo.
    'valor' => '',
    'filas' => 15,
    'error' => false,
]), 'is_string', ARRAY_FILTER_USE_KEY) as $__key => $__value) {
    $$__key = $$__key ?? $__value;
}

$__defined_vars = get_defined_vars();

foreach ($attributes->all() as $__key => $__value) {
    if (array_key_exists($__key, $__defined_vars)) unset($$__key);
}

unset($__defined_vars, $__key, $__value); ?>

<div wire:ignore
     x-data="{
         editor: null,
         montado: false,
         errores: [],
         revisado: false,
         montar() {
             const area = this.$refs.area;

if (! area || ! window.CodeMirror || typeof window.CodeMirror.fromTextArea !== 'function') {
                 // Sin CodeMirror se queda el textarea, que funciona y guarda igual.
                 return;
             }

this.editor = window.CodeMirror.fromTextArea(area, {
                 theme: 'oneDark',
                 lenguaje: <?php echo \Illuminate\Support\Js::from($lenguaje)->toHtml() ?>,
                 // El analizador entrega sus errores en cada análisis y aquí se guardan,
                 // para poder contarlos debajo del editor y saltar al primero.
                 alAnalizar: (errores) => { this.errores = errores; },
             });

this.montado = true;

// El puente con Livewire, **por los dos caminos y a propósito**: se escribe en
             // el textarea de verdad con su evento `input` —que es lo que `wire:model`
             // escucha— y además se avisa al componente directamente. Lo segundo es lo que
             // recomienda Livewire para una librería dentro de un `wire:ignore`, y lo
             // primero deja el textarea con el valor bueno por si el editor se desmonta.
             // Las dos escrituras son el mismo valor, así que sobrar no estorba; faltar
             // una sí, y es lo que dejaba la pantalla sin poder guardar.
             this.editor.on('change', (cm) => {
                 const valor = cm.getValue();

area.value = valor;
                 area.dispatchEvent(new Event('input', { bubbles: true }));

// `false` = no dispara petición: viaja con la siguiente, que es la de
                 // guardar. Escribir no tiene por qué costar red.
                 this.$wire.set(<?php echo \Illuminate\Support\Js::from($estado)->toHtml() ?>, valor, false);

// Al escribir se deja de dar por revisado: el resultado de antes ya no
                 // vale para lo que hay ahora.
                 this.revisado = false;
             });
         },

/**
          * Revisar la sintaxis y llevar al primer error.
          *
          * No va al servidor: el análisis ya está hecho en el navegador mientras se escribe,
          * y el botón solo enseña el resultado. Decir «hay 3 errores» en un archivo de 300
          * líneas sin llevar al primero es dar trabajo, no ayuda.
          */
         revisar() {
             this.revisado = true;

if (this.errores.length > 0 && this.editor) {
                 this.editor.irA(this.errores[0].from);
             }
         },
     }"
     x-init="$nextTick(() => montar())">

<template x-if="montado">
        <div class="mb-2 flex flex-wrap items-center gap-2">
            <button type="button" x-on:click="revisar()"
                    class="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 hover:bg-gray-50">
                Revisar sintaxis
            </button>

<span x-show="revisado && errores.length === 0" x-cloak
                  class="text-xs font-semibold" style="color:#16a34a;">
                Sin errores de sintaxis.
            </span>

<span x-show="errores.length > 0" x-cloak
                  class="text-xs font-semibold" style="color:#dc2626;">
                <span x-text="errores.length"></span>
                <span x-text="errores.length === 1 ? 'error de sintaxis' : 'errores de sintaxis'"></span>
                <span x-show="revisado">— te he llevado al primero.</span>
            </span>
        </div>
    </template>

<textarea x-ref="area"
              id="<?php echo e($id); ?>"
              rows="<?php echo e($filas); ?>"
              wire:model="<?php echo e($estado); ?>"
              <?php echo e($attributes->merge([
                  'class' => 'w-full rounded-lg border px-4 py-2 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 '
                      . ($error ? 'border-red-500' : 'border-gray-200'),
              ])); ?>><?php echo e($valor); ?>