Rich Text Editor

The Rich Text Editor is a fully customizable and lightweight WYSIWYG editor built on top of Tiptap. It provides a smooth and intuitive editing experience, making it easy to format text with bold, italics, headings, lists, links, and more.

Tiptap Editor Docs

Installation

Create the neccessary components inside the /components/ui/editor folder to keep your project structure organized. But first you must install the necessary dependencies for the correct functionality of the component.

1// Packages required to use Tiptap's functionalities
2npm install @tiptap/react @tiptap/pm @tiptap/starter-kit
3// Required Shadcn UI component for toolbar functionality
4npx shadcn@latest add toggle
5// Beautiful typographic defaults for HTML you don't control
6// Read more at https://tailwindcss.com/blog/tailwindcss-typography
7npm install -D @tailwindcss/typography
8// Then use the plugin in your TailwindCSS configuration file
9// TailwindCSS v3 (plugins: [require("@tailwindcss/typography")])
10// TailwindCSS v4 (@plugin "@tailwindcss/typography")

1"use client"
2
3import { EditorContent, useEditor } from "@tiptap/react"
4import StarterKit from "@tiptap/starter-kit"
5import { Toolbar } from "./toolbar"
6
7interface EditorProps {
8  content: string
9  onChange(text: string): void
10}
11
12export const Editor = ({ content, onChange }: EditorProps) => {
13  const editor = useEditor({
14    extensions: [StarterKit],
15    content,
16    immediatelyRender: false,
17    editorProps: {
18      attributes: {
19        class:
20          "min-h-[200px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
21      },
22    },
23    onUpdate: ({ editor }) => {
24      onChange(editor.getHTML())
25    },
26  })
27
28  return (
29    <div className="space-y-2 prose-sm prose-ol:list-decimal prose-ul:list-disc">
30      <Toolbar editor={editor} />
31      <EditorContent editor={editor} />
32    </div>
33  )
34}

Form

Note: This Rich Text Editor provides basic functionality for formatting text, including bold, italics and lists. You can customize and extend its features by referring to the Tiptap Editor documentation to add more advanced capabilities.