Metodologia

1. Architektura edytora

Obszar roboczy używa trzech edytorów tekstu dla HTML, CSS i JavaScript z marginesami numerów linii, obsługą wcięć tabulatorem, kontrolą rozmiaru czcionki i opcjonalnym zawijaniem wierszy.

2. Przetwarzanie HTML

HTML z panelu HTML jest umieszczany w body wygenerowanego dokumentu. Narzędzie nie wykonuje HTML jako interfejsu strony nadrzędnej.

3. Wstrzykiwanie CSS

CSS jest wstawiany do elementu style w head wygenerowanego dokumentu, aby reguły dotyczyły wyłącznie dokumentu podglądu.

4. Wykonywanie JavaScript

JavaScript jest umieszczany w elemencie script wewnątrz dokumentu podglądu. Uruchamia się w kontekście przeglądania iframe po Run.

5. Renderowanie iframe

Połączony dokument jest przypisywany do iframe.srcdoc, tworząc nowy dokument podglądu bez nawigacji strony nadrzędnej.

6. Izolacja sandbox

iframe używa atrybutu sandbox (skrypty dozwolone do podglądu). Nadrzędne API DOM nie są udostępniane do wykonywania kodu użytkownika.

7. Obsługa konsoli

Mały most w podglądzie przekazuje console.log/info/warn/error i błędy wykonania do rodzica przez postMessage w celu wyświetlenia.

8. API przeglądarki

To, co skrypty mogą robić, zależy od polityki przeglądarki i uprawnień sandbox. Niektóre API zachowują się inaczej w iframe niż na stronach najwyższego poziomu.

9. Pamięć lokalna

Stan edytora może być zapisywany w kluczach localStorage ograniczonych do tego pochodzenia, aby odświeżenie nie usuwało trwającej pracy.

10. Ograniczenia

Nie ma kompilacji po stronie serwera dla standardowego HTML/CSS/JS. Złożone potoki budowania, prywatne pakiety i uprzywilejowane API urządzeń są poza zakresem.

11. Kwestie prywatności

Składanie podglądu odbywa się po stronie klienta. Lokalna trwałość pozostaje w przeglądarce, chyba że wyeksportujesz lub skopiujesz treść gdzie indziej.