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 :

1. Nous allons créer un composant React qui affichera une liste de variables disponibles.
2. Chaque variable sera un élément déplaçable (draggable).
3. Nous aurons un champ de texte (textarea) qui pourra recevoir ces variables (droppable).
4. Lorsque vous déposez une variable dans le champ de texte, sa valeur (par exemple, {{nom_variable}}) sera insérée à la position du curseur.

Ce composant VariableInputField vous permet de :

• Afficher une liste de variables sous forme de pastilles (badges).
• Glisser ces pastilles dans un champ de texte.
• Insérer la valeur de la variable (par exemple {{firstName}}) à l'endroit où vous la déposez dans le texte.
• Voir un aperçu du texte final.

Vous pouvez personnaliser la liste des availableVariables et le initialText dans app/page.tsx selon vos besoins.

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é :

1. Le champ de texte est maintenant un div contentEditable.
2. Lorsqu'une variable est déposée, un <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.
3. Ces étiquettes ne seront pas modifiables directement (contenteditable="false" sur le span), mais pourront être supprimées comme un seul caractère.
4. Nous aurons des fonctions pour convertir le texte brut initial (avec {{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:

  • Utilise un div contentEditable au lieu de Textarea.
  • Les fonctions 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.
  • Un useEffect gère la mise à jour de editorHtml si initialValue ou variables changent.
  • J'ai ajouté un   (espace insécable) après l'insertion de la pastille pour faciliter la saisie de texte immédiatement après.

• app/page.tsx:

  • Passe initialValue (texte brut) au composant.
  • Récupère le texte brut mis à jour via onValueChange et l'affiche.
  • La section "Aperçu du texte" a été renommée en "Texte brut résultant" pour clarifier son rôle.

• app/globals.css:

  • Ajout d'un style CSS pour le placeholder du div contentEditable (.custom-editor.is-empty:before).
  • Quelques styles de base pour les .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.