Text Editor

A rich text editor component built with TipTap v3 and Tailwind CSS. Supports text formatting, colors, alignment, lists, links, and custom fonts.

1. Basic Editor (Small)

The simplest variant with essential formatting tools: bold, italic, underline, text color, alignment, and bullet lists.

89 characters

import TextEditor from "@/components/ui/text-editor";
import { useState } from "react";

const [content, setContent] = useState("<p>Start typing...</p>");

<TextEditor
    initialContent={content}
    onChange={setContent}
    variant="default-sm"
/>

2. Editor with Font Controls (Medium)

Extended variant that includes font family and font size selectors, plus link insertion capabilities.

289 characters

import TextEditor from "@/components/ui/text-editor";

<TextEditor
    initialContent="<p>Your content here</p>"
    onChange={(html) => console.log(html)}
    variant="default-md"
/>

3. Floating Toolbar (Small)

A compact floating toolbar that appears above the editor with a subtle shadow and rounded corners.

import TextEditor from "@/components/ui/text-editor";

<TextEditor
    initialContent="<p>Your content</p>"
    variant="floatting-sm"
/>

4. Floating Toolbar (Medium)

Full-featured floating toolbar with all formatting options including links and images.

import TextEditor from "@/components/ui/text-editor";

<TextEditor
    initialContent="<p>Your content</p>"
    variant="floatting-md"
/>

5. Read-only Mode

Display formatted content without allowing edits. Perfect for showing previews or published content.

import TextEditor from "@/components/ui/text-editor";

<TextEditor
    initialContent="<p>Read-only content</p>"
    variant="default-sm"
    editable={false}
/>

6. Custom Placeholder

Customize the placeholder text that appears when the editor is empty.

import TextEditor from "@/components/ui/text-editor";

<TextEditor
    initialContent=""
    variant="default-md"
    placeholder="Write your amazing story here..."
/>

7. Real-time HTML Output

The editor provides real-time HTML output through the onChange callback.

HTML Output:

<p>Sélectionnez du texte pour le formater! Vous pouvez utiliser <strong>gras</strong>, <em>italique</em>, et <u>souligné</u>.</p>

import TextEditor from "@/components/ui/text-editor";
import { useState } from "react";

const [content, setContent] = useState("<p>Initial content</p>");

<TextEditor
    initialContent={content}
    onChange={setContent}
    variant="default-sm"
/>

<pre>{content}</pre> // Display the HTML output

API Reference

TextEditor Props

Prop	Type	Default	Description
initialContent?	string	""	Initial HTML content of the editor.
onChange?	(html: string) => void	—	Callback fired when content changes.
variant?	"default-sm" \| "default-md" \| "floatting-sm" \| "floatting-md"	"default-sm"	Visual variant with different toolbar options.
placeholder?	string	"Commencez à écrire..."	Placeholder text when editor is empty.
editable?	boolean	true	Whether the editor content is editable.
className?	string	—	Additional CSS classes for the editor container.

Variants Comparison

Feature	default-sm	default-md	floatting-sm	floatting-md
Bold, Italic, Underline	✓	✓	✓	✓
Text Color	✓	✓	✓	✓
Text Alignment	✓	✓	✓	✓
Bullet Lists	✓	✓	✓	✓
Font Family Selector	—	✓	—	✓
Font Size Selector	—	✓	—	✓
Link Insertion	—	✓	—	✓
Floating Toolbar	—	—	✓	✓

TipTap Extensions Used

The editor is built using the following TipTap v3 extensions:

StarterKit

Base functionality including paragraphs, headings, and basic formatting.

Underline

Adds underline text formatting capability.

TextAlign

Left, center, and right text alignment options.

Link

Insert and edit hyperlinks.

TextStyle & Color

Apply custom colors to text selections.

FontFamily

Change font family (Inter, Comic Sans, Serif).

FontSize (Custom)

Custom extension for font size control (12px-22px).

Installation

Install the required dependencies for the text editor:

npm install @tiptap/react @tiptap/starter-kit @tiptap/extension-underline @tiptap/extension-text-align @tiptap/extension-link @tiptap/extension-text-style @tiptap/extension-color @tiptap/extension-font-family @tiptap/core @radix-ui/react-toolbar

💡 Note: Make sure you're using TipTap v3.x for compatibility. Set immediatelyRender: false in the editor config to avoid SSR hydration issues with Next.js.