Fait moi un champs de texte dans lequel je peux ingérer des variables qui peuvent être drag and drom dans le champs de texte
Bonjour ! Je peux vous aider à créer un champ de texte avec des variables que vous pouvez glisser-déposer.
Voici comment nous pouvons procéder :
{{nom_variable}}) sera insérée à la position du curseur.Ce composant VariableInputField vous permet de :
{{firstName}}) à l'endroit où vous la déposez dans le texte.Vous pouvez personnaliser la liste des availableVariables et le initialText dans app/page.tsx selon vos besoins.
Make the tag appear as tag in the text
D'accord, je comprends. Vous souhaitez que les variables insérées dans le champ de texte apparaissent visuellement comme des "étiquettes" (tags) distinctes, et pas seulement comme du texte brut (par exemple, {{variable}}).
Pour réaliser cela, nous ne pouvons plus utiliser un simple <textarea>, car il ne permet pas d'afficher du HTML stylisé à l'intérieur de son contenu. Nous devrons utiliser un div avec l'attribut contentEditable="true". Cela complexifie un peu les choses, car nous devrons gérer manuellement le contenu HTML, la position du curseur, et la conversion entre le HTML (pour l'affichage) et le texte brut avec les placeholders (pour la sauvegarde ou l'utilisation des données).
Voici une version mise à jour du composant qui implémente cette fonctionnalité :
div contentEditable.<span> stylisé (ressemblant à une étiquette) est inséré. Cette étiquette affichera le label de la variable (ex: "Prénom") mais contiendra la valeur réelle (ex: {{firstName}}) dans un attribut data-variable-value.contenteditable="false" sur le span), mais pourront être supprimées comme un seul caractère.{{placeholders}}) en HTML avec des étiquettes, et pour reconvertir le HTML de l'éditeur en texte brut avec {{placeholders}}.Changements clés :
components/variable-input-field.tsx:
div contentEditable au lieu de Textarea.convertPlainTextToHtmlWithTags et convertHtmlToPlainText gèrent la transformation entre le texte brut et le HTML avec des étiquettes.handleDrop insère maintenant un <span> stylisé (classe .variable-tag) qui est contenteditable="false". J'ai utilisé des classes Tailwind pour le style de la pastille (bg-primary/10 text-primary px-2 py-0.5 rounded-md text-xs mx-px align-baseline).handleInput met à jour l'état HTML et appelle onValueChange avec le texte brut converti.useEffect gère la mise à jour de editorHtml si initialValue ou variables changent. (espace insécable) après l'insertion de la pastille pour faciliter la saisie de texte immédiatement après.app/page.tsx:
initialValue (texte brut) au composant.onValueChange et l'affiche.app/globals.css:
div contentEditable (.custom-editor.is-empty:before)..variable-tag pour s'assurer qu'ils s'affichent bien.C'est une solution plus complexe, mais elle permet d'obtenir l'effet visuel souhaité des variables apparaissant comme des étiquettes directement dans le champ de saisie. La gestion des contentEditable peut parfois être délicate, notamment pour la conversion HTML vers texte et la gestion du curseur, mais cette implémentation devrait bien fonctionner pour ce cas d'usage.
It is very buggy the edition so it does not work
Can you also add a variable that is for "Toutes les variables" in another color