Company Edit WYSIWYG + Live Preview

Data: 2026-02-18 Status: Approved Cel: Usprawnienie UX edycji profilu firmy - dodanie edytora wizualnego i podglądu na żywo

Problem

Obecny formularz edycji (/firma/edytuj/<id>) jest zbyt "surowy":

Textarea z informacją "Dozwolone tagi HTML: <p>, <strong>..." - komunikat dla programisty
Brak podglądu - użytkownik edytuje "na ślepo"
Formularzowy layout bez wizualnego kontekstu

Rozwiązanie

1. WYSIWYG Editor (Quill.js v2)

Źródło: CDN cdn.jsdelivr.net/npm/quill@2/dist/quill.min.js

Pola z WYSIWYG:

description_full (Pełny opis działalności)
founding_history (Historia i doświadczenie)
core_values (Wartości i misja)
services_offered (Oferowane usługi)

Pola BEZ WYSIWYG (pozostają textarea/input):

description_short (500 znaków, plain text)
technologies_used (zwykle lista, plain text)
operational_area, languages_offered (krótkie text inputy)

Konfiguracja toolbara:

Bold, Italic
Lista numerowana, Lista punktowana
Link (href)
Wyczyść formatowanie

Mechanizm:

Każda instancja Quill powiązana z ukrytym <textarea name="...">
onTextChange synchronizuje HTML z Quill do textarea
Formularz POST działa bez zmian - istniejący sanitize_html() z bleach waliduje output

2. Live Preview Panel

Desktop (>1024px): Split view 60% edytor / 40% preview

Panel sticky (position: sticky; top: 80px)
Scrolluje się niezależnie od formularza
Aktualizacja na text-change z debounce 300ms
Stylowanie identyczne jak company_detail.html
Pokazuje sekcje odpowiadające aktywnej zakładce

Mobile (<768px): Formularz na 100% szerokości

Sticky przycisk "Podgląd" u dołu ekranu
Otwiera bottom sheet z podglądem profilu
Przycisk zamknięcia wraca do edycji

3. Layout zmiana

Przed:

.ce-container (max-width: 860px, centered)
  .ce-header
  .ce-card
    .ce-tabs
    form
      .ce-tab-content (active)
    .ce-actions

Po:

.ce-container (max-width: 1400px, centered)
  .ce-header
  .ce-layout (display: grid, 60% / 40%)
    .ce-card (formularz - lewa strona)
      .ce-tabs
      form
        .ce-tab-content (active)
      .ce-actions
    .ce-preview (podgląd - prawa strona, sticky)
      .preview-header (logo + nazwa)
      .preview-section (aktualizowany live)

Poza zakresem

Auto-save / drafts
Profile completeness indicator
Inline editing na company_detail
Zmiany w systemie uprawnień
Zmiany w backendzie (routes, sanitization)

Pliki do modyfikacji

Plik	Zmiana
`templates/company_edit.html`	Layout, Quill init, preview panel, responsive CSS
`templates/base.html`	(opcjonalnie) Quill CDN w head jeśli globalnie

Zależności

Quill.js v2 (CDN, ~40KB gzipped)
Quill Snow theme CSS (CDN)
Zero zmian serwerowych

2.8 KiB Raw Permalink Blame History