feat: add character counter to Link's Description section

Author: javiercoronadonarvaez

templates/news/v3/create.html

@@ -135,7 +135,7 @@ <h1 class="create-post-page__title">Create Post</h1>
           </div>
 
           <div class="field create-post-page__description-field" :style="isLinkType ? 'display:flex' : 'display: none'">
-            {% include "v3/includes/_field_textarea.html" with name="description" field_id="description" label="Description" value=form.summary.value|default_if_none:"" alpine_disabled_expr="isWriteUp" alpine_x_model="linkDescription" alpine_at_input="onLinkDescriptionEdited($event)" %}
+            {% include "v3/includes/_field_textarea.html" with name="description" field_id="description" label="Description" value=form.summary.value|default_if_none:"" alpine_disabled_expr="isWriteUp" alpine_x_model="linkDescription" alpine_at_input="onLinkDescriptionEdited($event)" char_counter_max=1000 %}
             {% comment %} Auto-Generate is Link-only (Video is out of scope). Disabled until the link field holds a valid URL. Click handler / actual fetch are wired in follow-up commits. {% endcomment %}
             <div class="create-post-page__description-actions" x-show="isLink" x-cloak>
               <button type="button" class="btn btn-secondary create-post-page__generate-btn" @click="generateLinkDescription()" :disabled="!linkUrlValid || linkGenerating">Auto-Generate Description</button>

templates/v3/includes/_field_textarea.html

@@ -13,6 +13,7 @@
     alpine_disabled_expr (optional) — Alpine expression to conditionally disable the textarea
     alpine_x_model       (optional) — Alpine state property to two-way bind via x-model (e.g. "linkDescription")
     alpine_at_input      (optional) — Alpine expression for the @input handler (e.g. "onLinkDescriptionEdited($event)")
+    char_counter_max     (optional) — when set together with alpine_x_model, renders a live "N left" counter next to the label and sets maxlength on the textarea
     required             (optional) — if truthy, adds required attribute
     disabled             (optional) — if truthy, adds disabled attribute
     extra_class          (optional) — additional classes on the wrapper
@@ -23,14 +24,22 @@
 <div class="field field--textarea{% if error %} field--error{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}"
      {% if alpine_error %}:class="{ 'field--error': {{ alpine_error }} }"{% endif %}>
   {% if label %}
+  {% if char_counter_max and alpine_x_model %}
+  <div class="create-post-page__field-header">
+    <label class="field__label" for="field-{{ fid }}">{{ label }}</label>
+    <span class="create-post-page__char-counter" aria-hidden="true" x-text="({{ char_counter_max }} - ({{ alpine_x_model }} ? {{ alpine_x_model }}.length : 0)).toLocaleString() + ' left'">{{ char_counter_max }} left</span>
+  </div>
+  {% else %}
   <label class="field__label" for="field-{{ fid }}">{{ label }}</label>
   {% endif %}
+  {% endif %}
   <div class="field__control field__control--textarea{% if disabled %} field__control--disabled{% endif %}">
     <textarea
       class="field__input field__input--textarea"
       id="field-{{ fid }}"
       name="{{ name }}"
       rows="{{ rows|default:4 }}"
+      {% if char_counter_max %}maxlength="{{ char_counter_max }}"{% endif %}
       {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
       {% if required %}required{% endif %}
       {% if disabled %}disabled{% endif %}