← Todos los artículos

Tipos de acciones

TEXTAREA: un bloc de notas multilínea en la barra de acciones — borradores, notas, snippets por dominio

15 mayo 2026 · por JustZix Team

INPUT es de una línea. SELECT es una elección de una lista. SLIDER es un rango. ¿Y cuando quieres texto libre multilínea — porque tomas notas QA durante las pruebas, escribes una respuesta en Reddit, o tienes un snippet curl de 5 líneas que quieres a mano CADA VEZ que visitas este dominio? Entonces usas TEXTAREA (desde v2.13.21) — un <textarea> nativo en la barra de acciones con memory persistente por pestaña.

¿En qué se diferencia de INPUT?

Diferencia más importante: Enter en TEXTAREA es un salto de línea, no un trigger de código. Es a propósito — es un campo de texto pensado para contener texto, no una barra de comandos. Para ejecutar el código: Tab (blur nativo) o clic fuera del textarea.

Primera acción TEXTAREA

En el editor de JustZix añade una acción TEXTAREA a la barra. Configuración:

label: "📝 Notas QA"
rows: 5
placeholder: "Descripción del bug, pasos de repro..."
defaultValue: ""  (vacío — no sugerir nada)
code: (vacío — solo queremos un bloc de notas, ninguna acción)

Visita app.com/checkout. La barra de acciones ahora tiene un campo de texto. Escribe una nota, F5 → la nota vuelve. Abre una nueva pestaña en el mismo dominio → campo vacío (cada pestaña tiene su propia memory). Cierra la pestaña → pierdes el texto en esa pestaña, pero si era la única pestaña, el backup chrome.storage.local conserva igualmente el último valor en la próxima apertura.

Tres colores + placeholder

Misma configuración de colores que INPUT (ambos comparten la misma variable CSS para el placeholder):

color           → fondo del textarea
colorText       → color del texto en sí
colorPlaceholder → color del placeholder (variable CSS --jz-placeholder-color)

Sin override el textarea parece un default nativo del navegador — borde gris, fondo blanco, texto negro. Para integrarlo visualmente con el resto de la barra de acciones (p. ej. un tema oscuro para toolbar QA) pon color="#1A1A1A" + colorText="#E5E5E5" + colorPlaceholder="#888".

Modelo de memory — qué sobrevive al F5

TEXTAREA usa un storage híbrido (idéntico a INPUT):

1. sessionStorage (primario) — guardado síncrono en cada pulsación. Clave: jz_action_memory_{id}. Mantiene el valor durante toda la sesión de la pestaña, incluido el F5.
2. chrome.storage.local (backup) — guardado asíncrono al pulsar. Sobrevive a un reinicio del navegador en la misma pestaña (si la pestaña vuelve mediante «Restaurar sesión»).

Guardado en cada pulsación — incluso una sola letra aterriza enseguida en sessionStorage. El código arranca solo al blur. Es una separación deliberada: guardar = a menudo (seguridad), ejecutar = rara vez (eficiencia).

Caso de uso 1 — Bloc de notas QA por dominio

Estás probando un flujo de checkout en 3 entornos de staging. Cada uno tiene sus peculiaridades. Añade un TEXTAREA «Notas QA» a una regla con scope *staging*.app.com:

label: "🐛 Notas QA"
rows: 8
placeholder: "Qué estás probando, pasos de repro, errores..."

Visita staging1 → campo con la sesión anterior. Modifica. Visita staging2 → vacío (pestaña distinta = memory distinta). Abre Slack para reportar el bug → el texto está listo para copiar, no lo has perdido entre las páginas. Sin Notion, sin Sticky Notes, sin F12.

Caso de uso 2 — Borrador de comentario en Reddit/GitHub

Estás escribiendo un comentario largo en una PR de GitHub. Caída de red → pierdes el borrador. O «vuelvo enseguida» → 2 horas de otra navegación → vuelves → página actualizada, borrador desaparecido. Fix con TEXTAREA:

// En el editor de JustZix → regla sobre github.com:
label: "💬 Borrador"
rows: 12
code: (vacío — solo un bloc de notas)

Mientras escribes un comentario → copia en el TEXTAREA una vez por minuto. ¿F5? sessionStorage lo mantiene. ¿Error de red? sessionStorage lo mantiene. Incluso cerrar la pestaña y reabrirla (mediante «Restaurar sesión») → el backup chrome.storage.local vuelve.

Bonus: en lugar de escribir en el textarea de GitHub, escribe en el TEXTAREA de JustZix, luego copia. Así ni siquiera una carga de página fallida destruye el texto — JustZix vive independientemente de la página.

Caso de uso 3 — Snippet curl precompilado

Pruebas a menudo la misma API. Reensamblar el curl cada vez. TEXTAREA con un 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: (vacío — solo quieres conservar una plantilla)

Visita el dominio → el campo ya tiene la plantilla de curl. Modifica una vez por sesión (p. ej. pega el token), copia al terminal. Pestaña siguiente en este dominio → defaultValue vuelve si no había memory anterior, o tu versión modificada si la había.

Caso de uso 4 — Snippet JSON para la inyección

Una config JSON de prueba que pegas en el textarea de la app. En lugar de tenerla en un archivo, tenla en una acción TEXTAREA con código ejecutado al blur:

label: "📋 Config de prueba"
rows: 15
code: |
  // Tras el blur — inyecta value en el verdadero textarea de la app
  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 inyectada (' + value.length + ' caracteres)');
  }

Modifica el JSON en el campo JustZix → Tab → el código lo copia automáticamente al verdadero textarea de la app + dispara los eventos input/change (así el framework de la página lo ve). Sin copia-pega manual.

Trampas

• Enter NO activa el código. Tab o clic en otro sitio sí. Distinto de INPUT — importante para el modelo mental del usuario. Best practice: usa labels como «Notas» / «Borrador» / «📝 …» (señal clara «esto es un campo de texto, no una barra de comandos»).
• rows hace clamp a 1-20. Los valores más grandes se fijan en 20. Para contenidos muy largos (instrucciones, documentos) usa en su lugar un JS pane (también multilínea, pero en un panel flotante).
• Memory por pestaña, no global. Cada pestaña tiene su propio sessionStorage. Para compartir texto entre pestañas — el backup chrome.storage.local lo hace en parte (al «Restaurar sesión»), pero no es sync en tiempo real. Para una verdadera sync entre pestañas → CSS pane / JS pane (tienen un modelo distinto).
• El arrastre de la barra está bloqueado durante la escritura. mousedown sobre el textarea bloquea la propagación, así que no puedes arrastrar la barra agarrando el textarea. Es a propósito — arrastrarías la barra en lugar de seleccionar el texto.
• placeholder hace fallback a la label. Si no pones un placeholder separado, muestra la label. Puedes tener ambos — p. ej. label «Notas» + placeholder «Escribe aquí tus notas QA...».

Qué hacer después

TEXTAREA es «memory minimalista» en la barra de acciones — sin código, sin overhead de UI, solo un textarea. Combina espléndidamente con otros tipos de acción: JZ.value('Notas') lee el valor desde otra acción (p. ej. un BUTTON que envía las notas a algún sitio), y JZ.setValue('Notas', '') lo vacía después de usarlo.

Mira también los artículos relacionados:

• TOGGLE3 — segmented control de 3 estados con código por estado
• SLIDER — controlador de rango nativo para las variables CSS
• Mini-IDE en la pestaña — mapa completo de todas las ventanas y acciones

Instala JustZix — completamente gratuito, sin cuenta, sin servidor.