← Wszystkie wpisy

Typy akcji

TEXTAREA: multi-line scratch pad w pasku akcji — drafty, notatki, snippety per domena

15 maja 2026 · autor JustZix Team

INPUT to single-line. SELECT to wybór z listy. SLIDER to zakres. A co kiedy chcesz swobodny multi-line tekst — bo robisz notatki QA podczas testów, draftujesz odpowiedź na Reddit, albo masz 5-linijkowy snippet curl który chcesz mieć pod ręką ZAWSZE kiedy wchodzisz na tę domenę? Wtedy używasz TEXTAREA (od v2.13.21) — natywnego <textarea> w pasku akcji z persistent memory per-tab.

Czym to się różni od INPUT?

Najważniejsza różnica: Enter w TEXTAREA to nowa linia, nie wyzwolenie kodu. To celowe — to jest pole tekstowe które ma trzymać tekst, nie command bar. Żeby odpalić kod: Tab (natywny blur) albo klik poza textarea.

Pierwsza akcja TEXTAREA

W edytorze JustZix dodaj akcję TEXTAREA do paska akcji. Konfiguracja:

label: "📝 Notatki QA"
rows: 5
placeholder: "Opis błędu, kroki repro..."
defaultValue: ""  (puste — nic nie suggesthujemy)
code: (puste — chcemy tylko notatnik bez akcji)

Wejdź na app.com/checkout. Pasek akcji ma teraz pole tekstowe. Wpiszesz tam notatkę, F5 → notatka wraca. Otworzysz nową kartę na tej samej domenie → puste pole (każda karta ma swoją memory). Zamkniesz kartę → tracisz tekst w tej karcie, ale jeśli była tylko jedna karta, chrome.storage.local backup wciąż trzyma ostatnią wartość przy ponownym otwarciu.

Trzy kolory + placeholder

Identyczna konfiguracja kolorów co INPUT (oba korzystają z tej samej CSS variable dla placeholder'a):

color           → background tła textarea
colorText       → text-color samego tekstu
colorPlaceholder → kolor placeholder text (CSS variable --jz-placeholder-color)

Bez tych override'ów textarea wygląda jak natywny browser default — szary border, biały bg, czarny tekst. Dla integracji wizualnej z resztą paska akcji (np. ciemnym motywem QA toolbara) ustaw color="#1A1A1A" + colorText="#E5E5E5" + colorPlaceholder="#888".

Memory model — co przeżywa F5

TEXTAREA używa hybrydowego storage'u (identycznie jak INPUT):

1. sessionStorage (primary) — sync save na keystroke. Klucz: jz_action_memory_{id}. To trzyma wartość przez całą sesję karty, w tym F5.
2. chrome.storage.local (backup) — async save na keystroke. Survival across browser restart na tej samej karcie (jeśli karta wraca z "Restore session").

Save na każdy keystroke — nawet pojedyncza litera od razu trafia do sessionStorage. Code odpala się tylko na blur. To celowe rozdzielenie: saving = często (bezpieczeństwo), running = rzadko (efektywność).

Use case 1 — Scratch pad QA per domena

Testujesz checkout flow na 3 stagingach. Każdy ma swoje quirks. Dodaj TEXTAREA "QA notes" do reguły scope-owanej na *staging*.app.com:

label: "🐛 QA notes"
rows: 8
placeholder: "Co testujesz, kroki repro, błędy..."

Wejście na staging1 → pole z poprzednią sesją. Edytuj. Wejście na staging2 → puste (inna karta = inna memory). Otwórz Slacka żeby zgłosić bug → tekst już gotowy do skopiowania, nie zgubiłeś go pomiędzy stronami. Bez Notion'a, bez StickyNotes, bez F12.

Use case 2 — Draft komentarza na Reddit/GitHub

Piszesz długi komentarz na GitHub PR. Network failure → tracisz draft. Albo "zaraz wracam" → przez 2h przeglądasz inne rzeczy → wracasz → strona refresh'owała się, draft poszedł. TEXTAREA fix:

// W edytorze JustZix → reguła na github.com:
label: "💬 Draft"
rows: 12
code: (puste — tylko notatnik)

Pisanie komentarza → kopiuj raz na minutę do TEXTAREA. F5? sessionStorage trzyma. Network error? sessionStorage trzyma. Nawet zamknięcie karty i otwarcie na nowo (z "Restore session") → chrome.storage.local backup wraca.

Bonus: zamiast pisać w textarea GitHub'a, pisz w TEXTAREA JustZix, potem skopiuj. Wtedy nawet failed page load nie zniszczy tekstu — JustZix żyje niezależnie od strony.

Use case 3 — Pre-wypełniony snippet curl

Często testujesz to samo API. curl command za każdym razem zbierany na nowo. TEXTAREA z defaultValue:

label: "🔧 curl"
rows: 6
defaultValue: |
  curl -X POST \
    -H "Content-Type: application/json" \
    -H "Authorization: Bearer YOUR_TOKEN" \
    -d '{"key":"value"}' \
    https://api.app.com/v1/endpoint
code: (puste — chcesz tylko trzymać szablon)

Wejście na domenę → pole już ma curl szablon. Edytuj jeden raz na sesję (np. wstaw token), kopiuj do terminala. Następna karta na tej domenie → defaultValue wraca jeśli nie było wcześniej memory. Albo zmodyfikowana wersja jeśli była.

Use case 4 — JSON snippet do wstrzykiwania

Testowa konfiguracja JSON którą wklejasz w textarea aplikacji. Zamiast trzymać w pliku, trzymaj w akcji TEXTAREA z kodem na blur:

label: "📋 Test config"
rows: 15
code: |
  // Po blur — wstrzykuje value do prawdziwego textarea aplikacji
  const target = document.querySelector('#config-textarea');
  if (target) {
    target.value = value;
    target.dispatchEvent(new Event('input', { bubbles: true }));
    target.dispatchEvent(new Event('change', { bubbles: true }));
    JUSTZIX.log('Config injected (' + value.length + ' chars)');
  }

Edytuj JSON w polu JustZix → Tab → kod automatycznie kopiuje do prawdziwego textarea aplikacji + fires input/change events (więc framework strony to widzi). Bez ręcznego kopiowania.

Pułapki

• Enter NIE wywołuje kodu. Tab albo klik gdzie indziej. To inaczej niż INPUT — ważne dla user mental modelu. Best practice: użyj label "Notatki" / "Draft" / "📝 …" (jasna komunikacja "to jest pole tekstowe, nie command bar").
• rows clamp 1-20. Większe wartości się scupiają do 20. Dla bardzo długich treści (instrukcje, dokumentacja) lepiej użyj JS pane (też multi-line, ale w pływającym panelu).
• Memory per-tab, nie globalna. Każda karta ma swój sessionStorage. Jak chcesz dzielić tekst między kartami — chrome.storage.local backup ROBI to częściowo (przy "Restore session"), ale nie real-time sync. Dla true cross-tab sync → CSS pane / JS pane (mają inny model).
• Drag baru blocked podczas typing. mousedown na textarea blokuje propagation, więc nie da się drag baru przez chwytanie textarea. To celowe — dragowałbyś bar zamiast zaznaczać tekst.
• placeholder fallback to label. Jeśli nie podasz osobnego placeholder, pokazuje się label. Możesz mieć inne te dwa — np. label "Notes" + placeholder "Type your QA notes here...".

Co dalej

TEXTAREA to "minimalistyczna pamięć" w pasku akcji — bez kodu, bez UI overhead, po prostu textarea. Łączy się świetnie z innymi typami akcji: JZ.value('Notatki') czyta wartość z innej akcji (np. BUTTON który submit'uje notatki gdzieś), a JZ.setValue('Notatki', '') czyści po użyciu.

Sprawdź też powiązane:

• TOGGLE3 — 3-stanowe segmented controls z własnym kodem per stan
• SLIDER — natywny range controller dla CSS variables
• Mini-IDE w karcie — pełna mapa wszystkich okien i akcji

Zainstaluj JustZix — kompletnie za darmo, bez konta, bez serwera.