Editable Texto Editável
Introdução
Um campo de texto embutido que é exibido como texto simples até ser ativado (por foco, clique ou duplo clique) e então troca para um campo de entrada de texto totalmente editável com gatilhos de envio e cancelamento. Perfeito para editores de detalhes embutidos, renomeadores de documentos e listas de configurações.
O componente Editable está totalmente integrado como um bloco interativo editable no Page Builder, permitindo que autores de conteúdo e desenvolvedores configurem rótulos descritivos, espaços reservados, tamanhos, modos de ativação e regras de envio diretamente no CMS.
Uso via CMS Page Builder (JSON)
Estes exemplos ilustram como os editores de conteúdo vinculam e estruturam campos editáveis interativos dentro dos esquemas de página JSON (content/pages/*.json).
1. Ativação Padrão por Foco
O campo é ativado imediatamente ao receber foco (via tab) ou ao ser clicado, permitindo uma navegação por tab suave e rápida entre configurações de preferências de várias linhas.
{
"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 com Duplo Clique
Replica o comportamento padrão do sistema de arquivos. O rótulo é exibido como texto em negrito estático e só troca para um campo de entrada ao dar duplo clique. Ideal para cabeçalhos de página ou títulos de arquivos 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 Layout Denso (Escala Extra Pequena)
Demonstra uma escala de tamanho altamente compacta projetada para grades de dados tabulares densas, listagens de metadados da barra lateral ou atributos secundários.
{
"type": "editable",
"label": "Port Config",
"defaultValue": "8080",
"placeholder": "Set port...",
"size": "xs",
"activationMode": "click",
"submitMode": "blur",
"interactive": true
}
Referência de Configuração CMS
Esses campos mapeiam diretamente para as propriedades de bloco do Sveltia CMS sob o esquema de objeto editable declarado em public/admin/config.yml.
| Propriedade | Tipo de Campo CMS | Padrão | Descrição / Opções Suportadas |
|---|---|---|---|
Texto do Rótulo (label) | string | - | Rótulo visual descritivo renderizado acima da visualização de valor editável. |
Valor Padrão (defaultValue) | string | - | O conteúdo de texto inicial carregado dentro do campo. |
Espaço Reservado (placeholder) | string | - | Texto de espaço reservado claro mostrado na visualização quando o valor é deixado vazio. |
Escala de Tamanho (size) | select | "md" | Escalonamento geral de altura, preenchimento e tamanho de texto. • Opções: "2xs", "xs", "sm", "md", "lg". |
Gatilho de Ativação (activationMode) | select | "focus" | Especifica como o usuário ativa a visualização embutida no modo de edição. • Opções: "focus" (ao focar/clicar), "click" (clique simples), "dblclick" (duplo clique), "none" (requer clique no gatilho). |
Manipulador de Envio (submitMode) | select | "both" | Especifica qual interação confirma as alterações de volta ao estado. • Opções: "enter" (tecla Enter), "blur" (desfoque), "both" (tanto enter quanto blur), "none" (requer clique de envio manual). |
Notas do Desenvolvedor e Acessibilidade
- Hidratação Interativa Inteligente: Como trocar estados de layout requer troca dinâmica de elementos e interceptação de teclas, o componente Editable é hidratado como uma ilha Preact nas máquinas cliente por padrão.
- Entradas Acessíveis: O elemento de visualização atua como um botão semântico (
role="button",tabIndex={0}) quando inativo, permitindo que leitores de tela foquem e ativem o modo de edição via teclado. - Envios Prontos para Formulários: Para integrar facilmente com formulários POST, o componente sincroniza seus valores ativos com uma entrada de formulário nativa oculta, garantindo que envios de formulários nativos capturem as edições confirmadas corretamente.