Edytor strony

Przegląd

Edytor strony to wizualny edytor Cmssy do komponowania stron z bloków. Cmssy to headless CMS: komponenty bloków budujesz we własnej aplikacji Next.js (App Router) z @cmssy/react + @cmssy/next i sam wdrażasz tę stronę. Edytor osadza Twoją wdrożoną stronę w iframe (Preview URL workspace + ?cmssyEdit=1) i steruje nią przez most postMessage — więc przeciągasz, klikasz i edytujesz na prawdziwej stronie. Gdy publikujesz, treść staje się wersją opublikowaną serwowaną przez delivery API, którą renderuje Twoja strona.

Układ

Edytor dzieli się na pięć stref:

• Górny pasek — tytuł strony, plakietka Draft (dla niezopublikowanych zmian), przyciski Cofnij/Ponów, przełącznik języka i menu trzech kropek z akcjami strony (Publikuj, Cofnij do opublikowanej, Podgląd itp.).
• Lewy sidebar — drzewo stron Twojego workspace. Kliknij stronę żeby otworzyć. Przeciągaj strony żeby zmienić kolejność. Zmiennej szerokości (256-512 px).
• Prawy drawer (Biblioteka Bloków) — katalog bloków zarejestrowanych przez Ciebie z defineBlock w Twojej aplikacji, pogrupowany po kategorii. Edytor poznaje schemat każdego bloku przez most SDK. Przeciągaj stąd na płótno żeby dodać.
• Płótno — Twoja prawdziwa wdrożona strona, osadzona w iframe. Bloki renderują się dokładnie tak jak na produkcji. Kliknij dowolny blok żeby go zaznaczyć.
• Panel właściwości — wysuwa się z prawej gdy zaznaczysz blok. Każde pole ze schematu bloku (zadeklarowane przez fields) pojawia się tutaj (inputy tekstowe, pickery mediów, linków, kolorów itp.).

Dodawanie bloku

1. Otwórz Bibliotekę Bloków po prawej.
2. Znajdź blok którego chcesz (scroll lub przeglądanie kategorii).
3. Przeciągnij go na płótno.
4. Upuść na dole (dopina) lub między istniejące bloki (wstawia na tę pozycję).

Po upuszczeniu blok pojawia się z domyślną treścią (ze schematu bloku) i renderuje się na żywo w osadzonej stronie. Kliknij go żeby otworzyć panel właściwości i dostosować. Zobacz Bloki i Tworzenie bloków, żeby zobaczyć jak definiuje się bloki.

W bibliotece pojawiają się tylko bloki zarejestrowane w Twojej aplikacji — edytor czyta je przez most SDK, więc picker zawsze odpowiada temu, co Twoja strona potrafi wyrenderować.

Edycja treści bloku

Kliknij dowolny blok na płótnie żeby go zaznaczyć. Panel właściwości otwiera się po prawej. Pola renderują się na podstawie schematu bloku:

• Tekst — inline input / textarea.
• Rich text — otwiera dedykowany edytor pływający na dole (bold, italic, listy, linki).
• Media (obraz/wideo) — picker mediów otwiera bibliotekę; wybierz istniejące lub wgraj nowe.
• Link — URL + etykieta; picker też sugeruje wewnętrzne strony.
• Kolor — picker koloru z tokenami motywu.
• Select / checkbox / radio — dropdown lub togglers z listy opcji schematu.
• Repeater — dla bloków z listami sub-elementów (np. testimonials, FAQ), dodaj/usuń wiersze inline.

Każda edycja jest wysyłana do osadzonej strony przez most, więc zmiany pojawiają się na żywo w prawdziwej stronie gdy piszesz.

Edycja per język

Przełącznik języka w górnym pasku przełącza, którego locale treść edytujesz. Przełączenie z angielskiego na polski:

• Zapisuje aktualne wartości pól do kopii angielskiej.
• Ładuje kopię polską do panelu właściwości i płótna.
• Pola puste w polskim pokazują placeholder, nie fallback na angielski.

Każde pole tekstowe jest przechowywane per język. Liczby, ID i ustawienia (np. URL-e obrazów) są współdzielone między językami.

Przenoszenie i usuwanie bloków

Najedź kursorem na blok na płótnie żeby odsłonić kontrolki:

• Uchwyt do przeciągania (ikona grip) — przeciągaj góra/dół żeby zmienić kolejność.
• Usuń — kliknij ikonę kosza LUB naciśnij Delete / Backspace gdy blok jest zaznaczony (i żadne pole tekstowe nie jest sfocusowane).
• Duplikuj — skrót klawiszowy Cmd+D (macOS) / Ctrl+D (Win/Linux).

Dialog potwierdzenia się nie pojawia — usunięcia są natychmiastowe ale w pełni odwracalne przez Cofnij.

Cofnij i ponów

• Cmd+Z / Ctrl+Z — cofnij ostatnią zmianę.
• Cmd+Shift+Z / Ctrl+Shift+Z — ponów.

Historia jest trzymana per strona, do 50 kroków. Przełączenie na inną stronę zachowuje historie obu stron niezależnie. Edycja tekstu ma własne natywne cofanie które nie zjada historii bloków.

Autosave draftu i publikacja

Twój draft to robocza kopia treści strony, przechowywana w Cmssy. Gdy edytujesz, zmiany zapisują się do draftu — otwórz edytor później i podnosisz od miejsca gdzie byłeś. Draft to to, co osadzona strona renderuje w trybie podglądu; odwiedzający nadal widzą wersję opublikowaną dopóki nie opublikujesz.

Draft żyje w Cmssy, nie w Twojej przeglądarce, więc idzie za tobą między urządzeniami i przeglądarkami — ostatni zapisany draft jest zawsze dostępny gdy ponownie otworzysz stronę.

Draft vs opublikowane

Każda strona ma dwa stany swoich bloków:

• Draft — to co widzisz i edytujesz w edytorze, i co renderuje tryb podglądu. Zawsze najnowsze.
• Opublikowane — to co serwuje delivery API i co odwiedzający widzą na Twojej wdrożonej stronie.

Plakietka Draft w górnym pasku pojawia się zawsze gdy strona ma niezopublikowane zmiany (lub nigdy nie była opublikowana).

Z menu trzech kropek:

• Publikuj — promuje aktualny draft do opublikowanej. Delivery API zaczyna ją serwować; Twoja wdrożona strona Next.js ponownie renderuje stronę (ISR rewaliduje przy publikacji przez webhook /api/revalidate), więc zmiana dociera do odwiedzających w ciągu sekund.
• Wycofaj publikację — usuwa stronę z delivery API (Twoja strona zwraca dla niej 404). Draft pozostaje.
• Cofnij do opublikowanej — odrzuca wszystkie zmiany draftu, resetuje do ostatniej opublikowanej wersji. Nieodwracalne poza głębokością cofania.

Bloki layoutu (header / footer / sidebary)

Bloki layoutu — header, footer, sidebary — renderują się na każdej stronie przez dziedziczenie. W osadzonej stronie pojawiają się wokół treści strony z własnymi kontrolkami overlay.

• Kliknij blok layoutu żeby go edytować tak jak każdy inny.
• Zmiany w dziedziczonym bloku layoutu propagują się na wszystkie strony które go dziedziczą.
• Konkretna strona może nadpisać blok layoutu — zmiana dotyczy wtedy tylko tej strony.

Pełne szczegóły: Layouty.

Tryb podglądu

Menu trzech kropek → Podgląd otwiera Twój aktualny draft w nowej zakładce. Ładuje Twoją wdrożoną stronę w trybie podglądu (draft) pod podpisanym URL-em, żebyś mógł zweryfikować jak niezopublikowana treść wygląda na prawdziwej stronie przed publikacją.

Menu trzech kropek → Otwórz stronę otwiera opublikowany URL na Twojej wdrożonej stronie (404 jeśli nieopublikowana).

Tryb interakcji

Przełącznik w prawym dolnym rogu płótna przełącza między dwoma trybami:

• Tryb edycji (domyślny) — kontrolki overlay widoczne, kliknięcia zaznaczają bloki, linki w blokach są nieaktywne.
• Tryb interakcji — overlay ukryte, linki i formularze działają dokładnie tak jak na Twojej żywej stronie (to jest Twoja żywa strona). Użyj żeby przetestować interaktywne zachowanie bez opuszczania edytora.

Edycja z AI (MCP)

Poza wizualnym edytorem Cmssy udostępnia serwer MCP, więc Claude może tworzyć strony, dodawać bloki i edytować treść za Ciebie — tę samą treść, którą serwuje delivery API. Zobacz Serwer MCP.

Skróty klawiszowe — referencja

Zamień Cmd na Ctrl na Windows i Linux. Wszystkie skróty są zablokowane gdy piszesz w polu tekstowym — więc natywne cofanie tekstu, usuwanie itp. nadal działają normalnie.

Czego edytor jeszcze nie robi

• Brak przełącznika podglądu responsywnego. Płótno jest płynne ale nie symuluje konkretnych szerokości urządzeń. Użyj przycisku Podgląd i zmieniaj rozmiar przeglądarki żeby przetestować.
• Brak real-time collaboration. Jeśli dwóch użytkowników edytuje tę samą stronę jednocześnie, ostatni save wygrywa. Koordynujcie edycje po stronach lub sekcjach.
• Brak historii wersji poza cofaniem. Cofnij do opublikowanej to najgłębszy rollback. Jeśli potrzebujesz nazwanych wersji lub długoterminowej historii, eksportuj przed dużymi zmianami.