# Edycja na podglądzie

## Edycja na podglądzie

Renderer przekształca HTML w elementy React i podłącza wspólne mechanizmy edytora. Nie montuje surowego HTML przez `dangerouslySetInnerHTML` w panelu.

```html
<article data-canvas-card="[[ block.field_path ]].card">
  <h2 data-text-field="[[ block.settings_path ]].title" gs-text="block.settings.title"></h2>
  <p data-text-field="[[ block.settings_path ]].text" gs-text="block.settings.text"></p>
</article>
```

Dla tekstu używaj identyfikatorów rozpoznawanych przez edytor (`title`, `text`, `label`, `eyebrow`, `badge`, `meta`). Pozostałe ustawienia są dostępne w formularzu schema. Nie wpisuj indeksów lub identyfikatorów bloków na sztywno: runtime udostępnia `field_path` i `settings_path`.

Integracje wspólne:

- `data-text-field`: zaznaczenie, bogaty tekst i jego zapis;
- `data-canvas-card`: edycja powierzchni karty;
- `<gs-icon name="shield" field="items.0.icon"></gs-icon>`: istniejący katalog ikon i ich edycja;
- `<gs-image field="image_url"></gs-image>`: istniejące pole obrazu wraz z kadrowaniem;
- `<gs-canvas></gs-canvas>`: elementy dodane na płótnie;
- `<gs-slot>`: punkt integracji z funkcjami aplikacji, używany przez adaptery wbudowanych szablonów.

`gs-image` odczytuje adres i sąsiednie `image_alt` / `image_frame` z treści sekcji. Formularze, aktywne wtyczki, zgody i funkcje systemowe pozostają kontrolowane przez GrowSite.

## Linki i formularze

```html
<a href="[[ safe_url(block.settings.url) ]]" gs-text="block.settings.label"></a>
```

Adres może mieć postać `mailto:hello@example.com`, `tel:+31201234567`, `https://wa.me/31201234567`, `/#contact` albo HTTPS. Nie dołączaj zdarzeń JavaScript. Zwykły link Loom nie uruchamia automatycznie wszystkich zachowań starszego edytora przycisków.

Formularze, subskrypcje, zgody i akcje pluginów wymagają integracji platformy. Snippet nie tworzy endpointu backendu. Dla własnego pola `image_picker` można wyświetlić adres przez zwykłe `img`, lecz to samo w sobie nie podłącza kadrowania i biblioteki mediów.

## Test edycji

Sprawdź najechanie, kliknięcie, wartości domyślne, zapis, odświeżenie i wersję publiczną. Przy zmianie tekstu przez schema stary rich text nie powinien zasłaniać nowej wartości. Przesuń okno edycji i zmień wymiar elementu — okno powinno zachować pozycję. Takie zachowania są częścią wspólnego kreatora, nie kodu szablonu.


## Wygląd elementów na podglądzie

Przyciski, karty i sekcje korzystają z `data-canvas-surface="loom-surfaces.staly-klucz"`. Zachowuj ten klucz przy aktualizacji szablonu. Kliknięcie wolnego miejsca otwiera tło, kolor, obramowanie, zaokrąglenie i odstępy; tekst wewnątrz zachowuje własną edycję. Powiązanie adresu przycisku deklaruje `data-loom-link-field="loom.settings.url_1"`, a etykiety `data-text-field="loom.settings.text_8"`. Ikony używają `data-element-icon`; ich oryginalny wygląd pozostaje do czasu wybrania zamiennika. Obrazy używają `data-loom-image-field` oraz opcjonalnego `data-loom-alt-field`. Wygląd i kadrowanie zapisują się w `content.canvas.elements`, poza ustawieniami schematu szablonu. Używaj unikalnych kluczy dla powtarzanych elementów. Edycja zmienia szkic, publikacja jest osobną czynnością.


### Własna grafika zamiast ikony

W ustawieniach ikony wybierz „Wybierz lub wgraj własną ikonę”. Otworzy się biblioteka plików tej strony z opcją uploadu; obowiązują jej standardowe limity i dozwolone formaty obrazów. Grafika jest wyświetlana jako obraz z zachowaniem proporcji. Możesz zmienić rozmiar, tło, odstępy i zaokrąglenie; kolor nie przemalowuje pikseli zdjęcia. Wybranie symbolu z listy zastępuje własną grafikę, „Bez ikony” ją ukrywa, a „Domyślne” przywraca ikonę szablonu. Zapis używa istniejącego pola `icon` w elemencie lub węźle canvas: `image:/adres/pliku.png` albo `image:https://…`. Renderer traktuje plik jako obraz, nie jako kod HTML.