104 lines
2.8 KiB
Markdown
104 lines
2.8 KiB
Markdown
# 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
|