@php
    $id = md5($attributes->wire('model'));
@endphp

<div

    class="rounded-md shadow-sm"

    x-data="{
        value: @entangle('comment'),
        isFocused(){ return document.activeElement !== this.$refs.trix },
        setValue(){ this.$refs.trix.editor.loadHTML(this.value) },
    }"

    x-init="setValue(); $watch('value', () => isFocused() && setValue())"

    {{ $attributes->whereDoesntStartWith('wire:model') }}

    wire:ignore

>

<input id="{{$name}}"  type="hidden" name="{{$name}}" />
    <div
    x-on:trix-change="value = $event.target.value"
    x-on:trix-blur="value = $event.target.value"
    >
    <trix-editor id="trx-{{$name}}" input="{{$name}}" x-ref="trix" ></trix-editor>
    </div>
</div>