{% liquid
  assign label_text = label | strip_html
  assign value_attribute = value | replace:"&", "&amp;" | replace: "<", "&lt;" | replace: ">", '&gt;' | replace: "\"", "&quot;"
  assign placeholder = placeholder | default: label_text | strip_html | truncate: 200 | replace: "&", "&amp;" | replace: "<", "&lt;" | replace: ">", '&gt;' | replace: "\"", "&quot;"
%}

{%- assign label_text = label | strip_html -%}
<div class="relative group col-span-2 input-editable text-base text-gray-600 font-sans">
  <label for="field-{{ selector }}" class="hidden">{{ label_text }}</label>
  <textarea type="text" name="{{ selector }}" id="field-{{ selector }}"
            placeholder="{{ placeholder }}"
            rows="{{ rows | default : 4 }}"
            class="hidden"
            {% if form != blank %}form="{{ form }}"{% endif %}
  >{{ value_attribute }}</textarea>
  <div class="leading-5 transition-[background] duration-[50000s] overflow-y-auto max-h-[12.5rem] w-full bg-transparent grow p-0 focus:outline-none focus:text-gray-800" contenteditable="true" data-placeholder="{{ placeholder | default: label }}">{{ value }}</div>
</div>