Création d'un éditeur RichText avec TipTap dans React (avec mentions)

Si vous souhaitez améliorer votre application React avec un éditeur RichText puissant et personnalisable, TipTap est un excellent choix. Ce tutoriel vous guidera dans l'intégration de TipTap dans votre projet et l'ajout d'une fonctionnalité de mentions pour une expérience utilisateur dynamique.

Ce que vous construirez

À la fin de ce tutoriel, vous aurez :

1. Un éditeur RichText entièrement fonctionnel construit avec TipTap.
2. Prise en charge des mentions déclenchées par @, complétée par des listes de suggestions dynamiques.
3. Aperçu de la résolution des cas extrêmes tels que la visibilité des espaces réservés et la préservation du curseur.

Pour en savoir plus sur TipTap, visitez la documentation officielle ou explorez leur référentiel GitHub.

Étape 1 : Installer les dépendances
Avant de vous lancer, installez les bibliothèques requises :

npm install @tiptap/react @tiptap/starter-kit @tiptap/extension-mention

Étape 2 : Créer un éditeur RichText de base

Commencez par créer un composant RichTextEditor. Voici une mise en œuvre simple :

import { useEditor, EditorContent } from '@tiptap/react';  

import StarterKit from '@tiptap/starter-kit';  

export const RichTextEditor = ({ content, onChange }) => {  
  const editor = useEditor({  
    extensions: [StarterKit],  
    content: content,  
    onUpdate: ({ editor }) => {  
      onChange(editor.getHTML());  
    },  
  });  
  return <editorcontent editor="{editor}"></editorcontent>;  
};

Étape 3 : ajouter des mentions

Les mentions améliorent l'interactivité des utilisateurs, notamment dans les applications de chat ou de collaboration. Pour les mettre en œuvre :

1. Installer et configurer l'extension de mention

Modifiez le composant RichTextEditor pour inclure l'extension Mention :

import Mention from '@tiptap/extension-mention';  

export const RichTextEditor = ({ content, onChange, mentions }) => {  
  const editor = useEditor({  
    extensions: [  
      StarterKit,  
      Mention.configure({  
        HTMLAttributes: { class: 'mention' },  
        suggestion: {  
          items: ({ query }) =>  
            mentions.filter(item => item.display.toLowerCase().includes(query.toLowerCase())).slice(0, 5),  
          render: () => {  
            let component;  
            let popup;  
            return {  
              onStart: (props) => {  
                popup = document.createElement('div');  
                popup.className = 'mention-popup';  
                document.body.appendChild(popup);  
                component = {  
                  updateProps: () => {  
                    popup.innerHTML = `  
                      <div>



<h3>
  
  
  Step 4: Style the Mentions Popup
</h3>

<p>Mentions should be visually distinct. Add the following styles to enhance usability:<br>
</p>

<pre class="brush:php;toolbar:false">.mention-popup {  
  background: white;  
  border-radius: 8px;  
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);  
  padding: 8px;  
  position: absolute;  
  z-index: 1000;  
}  
.mention-popup .items {  
  display: flex;  
  flex-direction: column;  
}  
.mention-popup .item {  
  padding: 8px;  
  cursor: pointer;  
  border-radius: 4px;  
}  

.mention-popup .item:hover,  
.mention-popup .item.is-selected {  
  background: #f0f0f0;  
}

Étape 5 : Cas extrêmes auxquels j'ai été confronté lors de la mise en œuvre

1. Saut de curseur : Pour éviter que le curseur ne saute lors de la saisie, assurez-vous que les mises à jour du contenu préservent la position du curseur :

const editor = useEditor({  
  extensions: [StarterKit],  
  content,  
  onUpdate: ({ editor }) => {  
    const selection = editor.state.selection;  
    onChange(editor.getHTML());  
    editor.commands.setTextSelection(selection);  
  },  
});

1. Espace réservé non visible :

Utilisez l'extension Placeholder pour afficher un indice lorsque l'éditeur est vide :

import Placeholder from '@tiptap/extension-placeholder';  
const editor = useEditor({  
  extensions: [  
    StarterKit,  
    Placeholder.configure({ placeholder: 'Type something...' }),  
  ],  
});

1. Mentionner les suggestions qui ne s'affichent pas : Vérifiez la méthode suggestion.items pour vous assurer qu'elle filtre et renvoie la liste attendue.

Étape 6 : Intégrez-la à votre application

Enveloppez l'éditeur dans un composant modal ou de formulaire pour l'intégrer à une fonctionnalité plus large, telle que des notifications ou des commentaires. Voici un exemple :

import React from 'react';  

const NotificationForm = ({ mentions, onSubmit }) => {  
  const [content, setContent] = React.useState('');  
  return (  
    

onSubmit(content)}> Send

); };

Conclusion

Avec TipTap, vous pouvez créer un éditeur RichText à la fois puissant et convivial. L'ajout de mentions améliore l'interactivité de votre application, la rendant plus attrayante pour les utilisateurs.

Pour en savoir plus, visitez le site officiel TipTap. Avez-vous appris quelque chose de nouveau grâce à cet article ? Faites-le moi savoir dans les commentaires ! ?