Editable Texto Editable
Introducción
Un campo de texto en línea que se muestra como texto sin formato hasta que se activa (mediante enfoque, clic o doble clic), y luego cambia a un campo de entrada de texto totalmente editable con activadores de envío y cancelación. Perfecto para editores de detalles en línea, renombradores de documentos y listas de configuración.
El componente Editable está totalmente integrado como un bloque interactivo editable en el Page Builder, lo que permite a los autores de contenido y desarrolladores configurar etiquetas descriptivas, marcadores de posición, tamaños, modos de activación y reglas de envío directamente dentro del CMS.
Uso a través del CMS Page Builder (JSON)
Estos ejemplos ilustran cómo los editores de contenido enlazan y estructuran campos editables interactivos dentro de los esquemas de página JSON (content/pages/*.json).
1. Activación de Enfoque Estándar
El campo se activa inmediatamente al enfocarse (con tabulación) o hacer clic, permitiendo un tabulado fluido y rápido entre configuraciones de preferencias de varias filas.
{
"type": "editable",
"label": "Project Name",
"defaultValue": "Artefact UI Suite",
"placeholder": "Enter project name...",
"size": "md",
"activationMode": "focus",
"submitMode": "both",
"interactive": true
}
2. Personalizador de Título con Doble Clic
Replica el comportamiento estándar del sistema de archivos. La etiqueta se muestra como texto negrita estático y solo cambia a un campo de entrada al hacer doble clic. Ideal para encabezados de página o títulos de archivos de documentos.
{
"type": "editable",
"label": "Document Title",
"defaultValue": "Annual_Report_2025",
"placeholder": "Untitled document",
"size": "lg",
"activationMode": "dblclick",
"submitMode": "enter",
"interactive": true
}
3. Campo de Valor de Diseño Denso (Escala Extra Pequeña)
Muestra una escala de tamaño muy compacta diseñada para cuadrículas de datos tabulares densas, listados de metadatos en la barra lateral o atributos secundarios.
{
"type": "editable",
"label": "Port Config",
"defaultValue": "8080",
"placeholder": "Set port...",
"size": "xs",
"activationMode": "click",
"submitMode": "blur",
"interactive": true
}
Referencia de Configuración CMS
Estos campos se asignan directamente a las propiedades de bloque de Sveltia CMS bajo el esquema de objeto editable declarado en public/admin/config.yml.
| Propiedad | Tipo de Campo CMS | Predeterminado | Descripción / Opciones Compatibles |
|---|---|---|---|
Texto de Etiqueta (label) | string | - | Etiqueta visual descriptiva renderizada encima de la vista previa del valor editable. |
Valor Predeterminado (defaultValue) | string | - | El contenido de texto inicial cargado dentro del campo. |
Marcador de Posición (placeholder) | string | - | Texto de marcador de posición claro mostrado en la vista previa cuando el valor se deja vacío. |
Escala de Tamaño (size) | select | "md" | Escalado general de altura, relleno y tamaño de texto. • Opciones: "2xs", "xs", "sm", "md", "lg". |
Activador de Activación (activationMode) | select | "focus" | Especifica cómo el usuario activa la vista previa en línea al modo de edición. • Opciones: "focus" (al enfocar/hacer clic), "click" (clic simple), "dblclick" (doble clic), "none" (requiere clic en el activador). |
Manejador de Envío (submitMode) | select | "both" | Especifica qué interacción confirma los cambios de vuelta al estado. • Opciones: "enter" (tecla Enter), "blur" (desenfoque), "both" (tanto enter como blur), "none" (requiere clic de envío manual). |
Notas para Desarrolladores y Accesibilidad
- Hidratación Interactiva Inteligente: Dado que cambiar los estados de diseño requiere intercambio dinámico de elementos e interceptación de teclas, el componente Editable se hidrata como una isla de Preact en las máquinas cliente por defecto.
- Entradas Accesibles: El elemento de vista previa actúa como un botón semántico (
role="button",tabIndex={0}) cuando está inactivo, permitiendo que los lectores de pantalla enfoquen y activen el modo de edición mediante el teclado. - Envíos Listos para Formularios: Para integrarse fácilmente con formularios POST, el componente sincroniza sus valores activos con una entrada de formulario oculta nativa, asegurando que los envíos de formularios nativos capturen las ediciones confirmadas correctamente.