# 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