Erstellen eines RichText-Editors mit TipTap in React (mit Erwähnungen)

Wenn Sie Ihre React-App mit einem leistungsstarken, anpassbaren RichText-Editor erweitern möchten, ist TipTap eine ausgezeichnete Wahl. Dieses Tutorial führt Sie durch die Integration von TipTap in Ihr Projekt und das Hinzufügen einer Erwähnungsfunktion für ein dynamisches Benutzererlebnis.

Was Sie bauen werden

Am Ende dieses Tutorials werden Sie Folgendes haben:

1. Ein voll funktionsfähiger RichText-Editor, der mit TipTap erstellt wurde.
2. Unterstützung für durch @ ausgelöste Erwähnungen, komplett mit dynamischen Vorschlagslisten.
3. Einblick in die Lösung von Grenzfällen wie Platzhaltersichtbarkeit und Cursorerhaltung.

Weitere Informationen zu TipTap finden Sie in der offiziellen Dokumentation oder im GitHub-Repository.

Schritt 1: Abhängigkeiten installieren
Installieren Sie vor dem Eintauchen die erforderlichen Bibliotheken:

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

Schritt 2: Erstellen Sie einen einfachen RichText-Editor

Beginnen Sie mit der Erstellung einer RichTextEditor-Komponente. Hier ist eine einfache Implementierung:

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>;  
};

Schritt 3: Erwähnungen hinzufügen

Erwähnungen verbessern die Benutzerinteraktivität, insbesondere im Chat oder in kollaborativen Anwendungen. Um sie umzusetzen:

1. Installieren und konfigurieren Sie die Mention-Erweiterung

Ändern Sie die RichTextEditor-Komponente so, dass sie die Mention-Erweiterung enthält:

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;  
}

Schritt 5: Randfälle, mit denen ich während der Implementierung konfrontiert war

1. Cursorspringen: Um ein Springen des Cursors während der Eingabe zu vermeiden, stellen Sie sicher, dass bei Inhaltsaktualisierungen die Position des Cursors erhalten bleibt:

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

1. Platzhalter nicht sichtbar:

Verwenden Sie die Platzhaltererweiterung, um einen Hinweis anzuzeigen, wenn der Editor leer ist:

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

1. Erwähnungsvorschläge, die nicht angezeigt werden: Überprüfen Sie die Methode suggestion.items, um sicherzustellen, dass sie die erwartete Liste filtert und zurückgibt.

Schritt 6: In Ihre App integrieren

Schließen Sie den Editor in eine modale oder Formularkomponente ein, um ihn zu einem Teil einer größeren Funktion zu machen, z. B. Benachrichtigungen oder Kommentare. Hier ist ein Beispiel:

import React from 'react';  

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

onSubmit(content)}> Send

); };

Abschluss

Mit TipTap können Sie einen RichText-Editor erstellen, der sowohl leistungsstark als auch benutzerfreundlich ist. Durch das Hinzufügen von Erwähnungen wird die Interaktivität Ihrer App verbessert und sie für Benutzer ansprechender.

Weitere Informationen finden Sie auf der offiziellen TipTap-Website. Haben Sie aus diesem Artikel etwas Neues gelernt? Lass es mich in den Kommentaren wissen! ?