quill editor

assets/views/admin/catalog/product_form.html

@@ -3,6 +3,9 @@
 
 {% block title %}{% if product %}{{ t(key="edit-product", lang=lang | default(value='sk')) }}{% else %}{{ t(key="new-product", lang=lang | default(value='sk')) }}{% endif %}{% endblock title %}
 {% block crumb %}{{ t(key="admin-products", lang=lang | default(value='sk')) }}{% endblock crumb %}
+{% block head %}
+<link href="/static/vendor/quill/quill.snow.css" rel="stylesheet" type="text/css">
+{% endblock head %}
 
 {% block content %}
 <div class="flex items-center justify-between gap-3">
@@ -117,14 +120,14 @@
   </div>
 
   <div class="space-y-1.5">
-    <label for="short_description" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="short-description", lang=lang | default(value='sk')) }}</label>
+    <span class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="short-description", lang=lang | default(value='sk')) }}</span>
     <p class="{{ sublabel }}">{{ t(key="short-description-hint", lang=lang | default(value='sk')) }}</p>
-    {{ ui::textarea(name="short_description", id="short_description", rows="2", value=v_short, attrs='maxlength="200"') }}
+    {{ ui::rich_editor(name="short_description", lang=lang | default(value='sk'), value=v_short, min_height="6rem") }}
   </div>
 
   <div class="space-y-1.5">
-    <label for="description" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="description", lang=lang | default(value='sk')) }}</label>
-    {{ ui::textarea(name="description", id="description", rows="5", value=v_desc) }}
+    <span class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="description", lang=lang | default(value='sk')) }}</span>
+    {{ ui::rich_editor(name="description", lang=lang | default(value='sk'), value=v_desc, min_height="16rem") }}
   </div>
 
   {# --- Images gallery ------------------------------------------------------- #}
@@ -216,4 +219,6 @@
     {{ ui::button(variant="outline-secondary", label=t(key="cancel", lang=lang | default(value='sk')), href="/admin/catalog/products") }}
   </div>
 </form>
+<script src="/static/vendor/quill/quill.js"></script>
+<script src="/static/js/rich-editor.js"></script>
 {% endblock content %}

assets/views/macros/ui.html

@@ -153,6 +153,34 @@
 <textarea {% if id %}id="{{ id }}" {% endif %}name="{{ name }}" rows="{{ rows }}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}{% if required %} required{% endif %} class="w-full rounded-radius border border-outline bg-surface-alt px-2.5 py-2 text-sm text-on-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark {{ extra }}" {{ attrs | safe }}>{{ value }}</textarea>
 {%- endmacro textarea %}
 
+{# Quill rich-text editor (see /static/js/rich-editor.js + /static/vendor/quill).
+   The real value rides in a hidden <textarea> the editor keeps in sync, so it
+   submits like any other field. `value` pre-fills (HTML or plain text). Several
+   editors may share one form — each is scoped to its own [data-rich-field].
+   Requires the page to load quill.js + quill.snow.css + rich-editor.js (the
+   product form does so) and a _csrf field in the form for image uploads. #}
+{% macro rich_editor(name, lang, value="", placeholder="", min_height="12rem") -%}
+<div data-rich-field>
+  <textarea name="{{ name }}" data-rich-content class="hidden">{{ value }}</textarea>
+  <div data-rich-editor class="rich-editor" style="--rich-min-height: {{ min_height }};"{% if placeholder %} data-placeholder="{{ placeholder }}"{% endif %}></div>
+  <div data-image-size-controls class="rich-image-size-controls mt-2 hidden">
+    <span class="text-xs font-medium text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="image-size", lang=lang) }}</span>
+    <button type="button" data-image-size="small">{{ t(key="image-size-small", lang=lang) }}</button>
+    <button type="button" data-image-size="medium">{{ t(key="image-size-medium", lang=lang) }}</button>
+    <button type="button" data-image-size="full">{{ t(key="image-size-full", lang=lang) }}</button>
+    <label class="inline-flex items-center gap-1.5">
+      <span class="text-xs text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="image-width-px", lang=lang) }}</span>
+      <input type="number" min="40" max="1200" step="10" data-image-width
+        class="w-20 rounded-radius border border-outline bg-surface-alt px-2 py-1 text-sm text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark">
+    </label>
+  </div>
+  <p class="mt-1 text-xs text-on-surface/60 dark:text-on-surface-dark/60" data-rich-status
+    data-uploading="{{ t(key='image-uploading', lang=lang) }}"
+    data-uploaded="{{ t(key='image-uploaded', lang=lang) }}"
+    data-error="{{ t(key='image-upload-error', lang=lang) }}"></p>
+</div>
+{%- endmacro rich_editor %}
+
 {# File input. #}
 {% macro file_input(name, id="", accept="", attrs="", extra="") -%}
 <input {% if id %}id="{{ id }}" {% endif %}name="{{ name }}" type="file"{% if accept %} accept="{{ accept }}"{% endif %} class="w-full overflow-clip rounded-radius border border-outline bg-surface-alt/50 text-sm text-on-surface file:mr-4 file:border-none file:bg-surface-alt file:px-4 file:py-2 file:font-medium file:text-on-surface-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:file:bg-surface-dark-alt dark:file:text-on-surface-dark-strong dark:focus-visible:outline-primary-dark {{ extra }}" {{ attrs | safe }}/>

assets/views/shop/_card.html

@@ -28,11 +28,13 @@
       <!-- Header: Title & Price (stacked so neither overflows the narrow card) -->
       <h3 class="break-words text-lg font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ product.name }}</h3>
       {# Short blurb for the card; falls back to the full description (clamped)
-         for products without a dedicated short one. Overflow is truncated with an
+         for products without a dedicated short one. Both are authored as rich
+         text (Quill), so render the stored HTML — `.rich-blurb` strips block
+         spacing so the line-clamp stays tidy. Overflow is truncated with an
          ellipsis: 2 lines in the grid, 3 in the roomier list row. #}
       {% if product.short_description or product.description %}
-      <p class="line-clamp-2 break-words text-sm text-on-surface/70 dark:text-on-surface-dark/70"
-        :class="view === 'list' && 'line-clamp-3'">{% if product.short_description %}{{ product.short_description }}{% else %}{{ product.description }}{% endif %}</p>
+      <div class="rich-blurb line-clamp-2 break-words text-sm text-on-surface/70 dark:text-on-surface-dark/70"
+        :class="view === 'list' && 'line-clamp-3'">{% if product.short_description %}{{ product.short_description | safe }}{% else %}{{ product.description | safe }}{% endif %}</div>
       {% endif %}
       {% if product.on_sale %}
       <div class="flex flex-wrap items-baseline gap-x-2 leading-tight">

assets/views/shop/show.html

@@ -83,7 +83,8 @@
         </div>
 
         {% if product.description %}
-        <div class="whitespace-pre-line leading-relaxed text-on-surface/80 dark:text-on-surface-dark/80">{{ product.description }}</div>
+        {# Authored as rich text (Quill) in the admin; render the stored HTML. #}
+        <div class="rich-content text-on-surface/80 dark:text-on-surface-dark/80">{{ product.description | safe }}</div>
         {% endif %}
 
         <template x-if="current.in_stock">