Éditeur TipTap

Guide complet pour utiliser TipTap dans Wagoo.

Qu’est-ce que TipTap?

TipTap est un éditeur de texte riche headless construit sur Prosemirror.

Avantages :

✅ Framework-agnostique
✅ Plugins extensibles
✅ Lightweight (pas de jQuery)
✅ TypeScript support
✅ Keyboard shortcuts

Installation


pnpm add @tiptap/react @tiptap/starter-kit

Configuration de base


import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
 
export default function Editor() {
  const editor = useEditor({
    extensions: [StarterKit],
    content: "<h1>Bonjour!</h1>",
  });
 
  if (!editor) return null;
 
  return <EditorContent editor={editor} />;
}

Plugins disponibles

Text Formatting


import { Bold } from "@tiptap/extension-bold";
import { Italic } from "@tiptap/extension-italic";
import { Underline } from "@tiptap/extension-underline";
import { Strike } from "@tiptap/extension-strike";
 
extensions: [
  Bold,
  Italic,
  Underline,
  Strike
]

Headings


import { Heading } from "@tiptap/extension-heading";
 
extensions: [
  Heading.configure({
    levels: [1, 2, 3, 4, 5, 6],
  })
]

Lists


import { BulletList } from "@tiptap/extension-bullet-list";
import { OrderedList } from "@tiptap/extension-ordered-list";
import { ListItem } from "@tiptap/extension-list-item";
 
extensions: [BulletList, OrderedList, ListItem]

Code


import { CodeBlock } from "@tiptap/extension-code-block";
import { Code } from "@tiptap/extension-code";
 
extensions: [CodeBlock, Code]

Links


import { Link } from "@tiptap/extension-link";
 
extensions: [
  Link.configure({
    openOnClick: true,
    autolink: true,
  })
]

Images


import { Image } from "@tiptap/extension-image";
 
extensions: [
  Image.configure({
    allowBase64: true,
    HTMLAttributes: {
      class: "rounded-lg",
    },
  })
]

Mentions (pour collaborateurs)


import { Mention } from "@tiptap/extension-mention";
 
extensions: [
  Mention.configure({
    HTMLAttributes: {
      class: "mention",
    },
    suggestion: {
      items: ({ query }) => {
        return getUsers(query);
      },
    },
  })
]

Emojis


import { Emoji } from "@tiptap/extension-emoji";
 
extensions: [Emoji]


import { useEditor, EditorContent } from "@tiptap/react";
 
export default function Editor() {
  const editor = useEditor({...});
 
  if (!editor) return null;
 
  return (
    <div>
      <div className="toolbar">
        <button
          onClick={() => editor.chain().focus().toggleBold().run()}
          className={editor.isActive("bold") ? "active" : ""}
        >
          Gras
        </button>
        <button
          onClick={() => editor.chain().focus().toggleItalic().run()}
          className={editor.isActive("italic") ? "active" : ""}
        >
          Italique
        </button>
        <button
          onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
          className={editor.isActive("heading", { level: 1 }) ? "active" : ""}
        >
          H1
        </button>
      </div>
      <EditorContent editor={editor} />
    </div>
  );
}

Keyboard Shortcuts

TipTap supporte les raccourcis clavier :

Shortcut	Action
`Cmd+B`	Gras
`Cmd+I`	Italique
`Cmd+U`	Souligné
`Cmd+Alt+0`	Paragraphe
`Cmd+Alt+1`	Heading 1
`Cmd+Alt+2`	Heading 2
`/`	Slash commands

Slash Commands

Pour les slash commands (/bold, /code, etc.):


import { Slash } from "@tiptap/extension-slash-command";
 
extensions: [Slash]

Obtenir le contenu


// HTML
const html = editor.getHTML();
 
// JSON
const json = editor.getJSON();
 
// Text
const text = editor.getText();

Définir le contenu


editor.commands.setContent("<h1>Nouveau contenu</h1>");
editor.commands.setContent(json);

Collaboratio

Pour les éditions en temps réel (Yjs + WebSockets):


import { Collaboration } from "@tiptap/extension-collaboration";
import * as Y from "yjs";
 
const ydoc = new Y.Doc();
 
extensions: [
  Collaboration.configure({
    document: ydoc,
  })
]

Styling

L’éditeur hérite de Tailwind CSS.

Customiser l’apparence :


.ProseMirror {
  @apply prose prose-sm max-w-none;
}
 
.ProseMirror p {
  @apply my-2;
}
 
.ProseMirror h1 {
  @apply text-2xl font-bold;
}

Performance

Pour de gros documents :


const editor = useEditor({
  extensions: [...],
  // Limite le re-render
  shouldRerenderOnChangeProps: ['selection', 'contentSize'],
});

Exemples Wagoo

Voir le code source dans components/editor/ pour :

EditorToolbar
EditorContent
EditorMenu

Voir Patterns pour les patterns d’utilisation.