← Все статьи

Типы действий

TEXTAREA: многострочный блокнот на панели действий — черновики, заметки, сниппеты по доменам

15 мая 2026 · автор JustZix Team

INPUT — однострочный. SELECT — выбор из списка. SLIDER — диапазон. А когда тебе нужен свободный многострочный текст — потому что ты делаешь QA-заметки во время тестов, пишешь ответ на Reddit, или у тебя есть curl-сниппет из 5 строк, который ты хочешь иметь под рукой КАЖДЫЙ РАЗ при визите на этот домен? Тогда используй TEXTAREA (с v2.13.21) — нативный <textarea> на панели действий с постоянной memory по вкладке.

Чем отличается от INPUT?

Самая важная разница: Enter в TEXTAREA — это перенос строки, не триггер кода. Это намеренно — это текстовое поле, предназначенное содержать текст, а не командная строка. Чтобы выполнить код: Tab (нативный blur) или клик вне textarea.

Первое действие TEXTAREA

В редакторе JustZix добавь действие TEXTAREA на панель. Конфигурация:

label: "📝 QA-заметки"
rows: 5
placeholder: "Описание бага, шаги воспроизведения..."
defaultValue: ""  (пусто — ничего не подсказывать)
code: (пусто — хотим только блокнот, никакого действия)

Посети app.com/checkout. У панели действий теперь есть текстовое поле. Напечатай заметку, F5 → заметка возвращается. Открой новую вкладку на том же домене → поле пустое (у каждой вкладки своя memory). Закрой вкладку → теряешь текст в этой вкладке, но если это была единственная вкладка, бэкап chrome.storage.local всё равно сохраняет последнее значение для следующего открытия.

Три цвета + placeholder

Та же конфигурация цветов, что у INPUT (оба разделяют одну CSS-переменную для placeholder):

color           → фон textarea
colorText       → цвет самого текста
colorPlaceholder → цвет placeholder (CSS-переменная --jz-placeholder-color)

Без переопределения textarea выглядит как нативный дефолт браузера — серая рамка, белый фон, чёрный текст. Чтобы визуально интегрировать её с остальной панелью действий (например, тёмная тема для QA-тулбара) задай color="#1A1A1A" + colorText="#E5E5E5" + colorPlaceholder="#888".

Модель memory — что переживает F5

TEXTAREA использует гибридное хранилище (идентично INPUT):

1. sessionStorage (основной) — синхронное сохранение при каждом нажатии. Ключ: jz_action_memory_{id}. Держит значение всю сессию вкладки, включая F5.
2. chrome.storage.local (бэкап) — асинхронное сохранение при нажатии. Переживает перезапуск браузера на той же вкладке (если вкладка возвращается через «Восстановить сессию»).

Сохранение при каждом нажатии — даже одна буква сразу попадает в sessionStorage. Код запускается только при blur. Это намеренное разделение: сохранять = часто (безопасность), выполнять = редко (эффективность).

Сценарий 1 — QA-блокнот по доменам

Ты тестируешь поток checkout на 3 staging-окружениях. У каждого свои особенности. Добавь TEXTAREA «QA-заметки» к правилу со scope *staging*.app.com:

label: "🐛 QA-заметки"
rows: 8
placeholder: "Что тестируешь, шаги воспроизведения, ошибки..."

Посети staging1 → поле с предыдущей сессией. Редактируй. Посети staging2 → пусто (другая вкладка = другая memory). Открой Slack, чтобы сообщить о баге → текст готов к копированию, ты не потерял его между страницами. Никакого Notion, никаких стикеров, никакого F12.

Сценарий 2 — черновик комментария на Reddit/GitHub

Ты пишешь длинный комментарий к PR на GitHub. Обрыв сети → теряешь черновик. Или «сейчас вернусь» → 2 часа другого сёрфинга → возвращаешься → страница обновилась, черновик пропал. Фикс с TEXTAREA:

// В редакторе JustZix → правило на github.com:
label: "💬 Черновик"
rows: 12
code: (пусто — только блокнот)

Пока пишешь комментарий → копируй в TEXTAREA раз в минуту. F5? sessionStorage его держит. Ошибка сети? sessionStorage его держит. Даже закрытие вкладки и повторное открытие (через «Восстановить сессию») → бэкап chrome.storage.local возвращается.

Бонус: вместо того чтобы писать в textarea GitHub, пиши в TEXTAREA JustZix, потом копируй. Так даже неудачная загрузка страницы не уничтожит текст — JustZix живёт независимо от страницы.

Сценарий 3 — предзаполненный curl-сниппет

Ты часто тестируешь один и тот же API. Пересобирать curl каждый раз. TEXTAREA с 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: (пусто — хочешь только хранить шаблон)

Посети домен → в поле уже есть шаблон curl. Отредактируй раз за сессию (например, вставь токен), скопируй в терминал. Следующая вкладка на этом домене → defaultValue возвращается, если не было предыдущей memory, или твоя отредактированная версия, если была.

Сценарий 4 — JSON-сниппет для внедрения

Тестовый JSON-конфиг, который ты вставляешь в textarea приложения. Вместо хранения в файле, держи его в действии TEXTAREA с кодом, выполняемым при blur:

label: "📋 Тестовый конфиг"
rows: 15
code: |
  // После blur — внедряем value в настоящую textarea приложения
  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('Конфиг внедрён (' + value.length + ' символов)');
  }

Отредактируй JSON в поле JustZix → Tab → код автоматически копирует его в настоящую textarea приложения + запускает события input/change (так фреймворк страницы это видит). Никакого ручного «копировать-вставить».

Ловушки

• Enter НЕ активирует код. Tab или клик в другом месте — да. Отличается от INPUT — важно для ментальной модели пользователя. Лучшая практика: используй метку вроде «Заметки» / «Черновик» / «📝 …» (чёткий сигнал «это текстовое поле, не командная строка»).
• rows делает clamp до 1-20. Большие значения фиксируются на 20. Для очень длинного контента (инструкции, документы) используй JS pane (тоже многострочный, но в плавающей панели).
• Memory по вкладке, не глобальная. У каждой вкладки свой sessionStorage. Чтобы делиться текстом между вкладками — бэкап chrome.storage.local делает это частично (при «Восстановить сессию»), но это не sync в реальном времени. Для настоящей sync между вкладками → CSS pane / JS pane (у них другая модель).
• Перетаскивание панели заблокировано во время печати. mousedown на textarea блокирует распространение, так что ты не можешь перетащить панель, схватив textarea. Это намеренно — ты перетаскивал бы панель вместо выделения текста.
• placeholder делает фолбэк на метку. Если ты не задаёшь отдельный placeholder, он показывает метку. Можно иметь оба — например, метку «Заметки» + placeholder «Пиши здесь свои QA-заметки...».

Что делать дальше

TEXTAREA — это «минималистичная memory» на панели действий — никакого кода, никаких накладных расходов UI, просто textarea. Великолепно сочетается с другими типами действий: JZ.value('Заметки') читает значение из другого действия (например, BUTTON, отправляющий заметки куда-то), а JZ.setValue('Заметки', '') очищает её после использования.

Смотри также связанные статьи:

• TOGGLE3 — трёхпозиционный сегментированный контрол с кодом по состоянию
• SLIDER — нативный контроллер диапазона для CSS-переменных
• Мини-IDE во вкладке — полная карта всех окон и действий

Установи JustZix — полностью бесплатно, без аккаунта, без сервера.