{{-- <div class="text-sm" x-data="{
    text: @entangle('data.tier_description').live,
    get count() {
        if (!this.text) return 0;
        const temp = document.createElement('div');
        temp.innerHTML = this.text;
        const plainText = temp.textContent || temp.innerText || '';
        return plainText.trim().length;
    }
}">
    Characters: <span x-text="count"></span> / 5000
</div> --}}


<div class="text-sm" x-data="{
    text: $wire.entangle('{{ $getStatePath() }}').live,
    get count() {
        if (!this.text) return 0;

        const temp = document.createElement('div');
        temp.innerHTML = this.text;
        const plainText = temp.textContent || temp.innerText || '';
        return plainText.trim().length;
    }
}">
    Characters: <span x-text="count"></span> / 5000
</div>