Editable Modifiable
Introduction
Un champ de texte en ligne qui s'affiche sous forme de texte simple jusqu'à ce qu'il soit activé (via le focus, le clic ou le double-clic), puis bascule vers un champ de saisie de texte entièrement éditable avec des déclencheurs d'envoi et d'annulation. Parfait pour les éditeurs de détails en ligne, les renommeurs de documents et les listes de paramètres.
Le composant Editable est entièrement intégré en tant que bloc interactif editable dans le Page Builder, permettant aux auteurs de contenu et aux développeurs de configurer des libellés descriptifs, des espaces réservés, des tailles, des modes de déclenchement et des règles d'envoi directement dans le CMS.
Utilisation via le CMS Page Builder (JSON)
Ces exemples illustrent comment les éditeurs de contenu lient et structurent des champs editables interactifs dans les schémas de page JSON (content/pages/*.json).
1. Activation par Focus Standard
Le champ s'active immédiatement lorsqu'il reçoit le focus (via tabulation) ou qu'on clique dessus, permettant une tabulation fluide et rapide à travers les configurations de préférences multi-lignes.
{
"type": "editable",
"label": "Project Name",
"defaultValue": "Artefact UI Suite",
"placeholder": "Enter project name...",
"size": "md",
"activationMode": "focus",
"submitMode": "both",
"interactive": true
}
2. Personnalisateur de Titre au Double-Clic
Réplique le comportement standard des systèmes de fichiers. Le libellé s'affiche sous forme de texte gras statique et ne bascule vers un champ de saisie qu'au double-clic. Idéal pour les en-têtes de page ou les titres de fichiers de documents.
{
"type": "editable",
"label": "Document Title",
"defaultValue": "Annual_Report_2025",
"placeholder": "Untitled document",
"size": "lg",
"activationMode": "dblclick",
"submitMode": "enter",
"interactive": true
}
3. Champ de Valeur à Mise en Page Dense (Échelle Extra-Petite)
Démontre une échelle de taille très compacte conçue pour les grilles de données tabulaires denses, les listes de métadonnées de barre latérale ou les attributs secondaires.
{
"type": "editable",
"label": "Port Config",
"defaultValue": "8080",
"placeholder": "Set port...",
"size": "xs",
"activationMode": "click",
"submitMode": "blur",
"interactive": true
}
Référence de Configuration CMS
Ces champs correspondent directement aux propriétés de bloc Sveltia CMS sous le schéma d'objet editable déclaré dans public/admin/config.yml.
| Propriété | Type de Champ CMS | Par défaut | Description / Options Prises en Charge |
|---|---|---|---|
Texte de Libellé (label) | string | - | Libellé visual descriptif rendu au-dessus de l'aperçu de valeur éditable. |
Valeur Par Défaut (defaultValue) | string | - | Le contenu textuel initial chargé dans le champ. |
Espace Réservé (placeholder) | string | - | Texte d'espace réservé léger affiché dans l'aperçu lorsque la valeur est laissée vide. |
Échelle de Taille (size) | select | "md" | Mise à l'échelle globale de la hauteur, du remplissage et de la taille du texte. • Options : "2xs", "xs", "sm", "md", "lg". |
Déclencheur d'Activation (activationMode) | select | "focus" | Spécifie comment l'utilisateur active l'aperçu en ligne en mode édition. • Options : "focus" (au focus/clic), "click" (clic simple), "dblclick" (double-clic), "none" (nécessite un clic sur le déclencheur). |
Gestionnaire d'Envoi (submitMode) | select | "both" | Spécifie quelle interaction valide les modifications vers l'état. • Options : "enter" (touche Entrée), "blur" (perte de focus), "both" (entrée et blur), "none" (nécessite un clic d'envoi manuel). |
Notes de Développement et Accessibilité
- Hydratation Interactive Intelligente : Étant donné que le changement d'états de mise en page nécessite un échange dynamique d'éléments et une interception de touches, le composant Editable s'hydrate par défaut en tant qu'îlot Preact sur les machines clientes.
- Entrées Accessibles : L'élément d'aperçu agit comme un bouton sémantique (
role="button",tabIndex={0}) lorsqu'il est inactif, permettant aux lecteurs d'écran de focaliser et d'activer le mode édition via le clavier. - Soumissions Prêtes pour les Formulaires : Pour s'intégrer facilement aux formulaires POST, le composant synchronise ses valeurs actives vers une entrée de formulaire native masquée, garantissant que les soumissions de formulaires natifs capturent correctement les éditions validées.