Rich Text Editor

Notion-style block editor with slash commands, drag-to-reorder, markdown shortcuts, and collaborative editing support. Built on Tiptap with custom extensions.

ReactUI ComponentsBuilt with Claude

4.1k

Stars

15.3k

Installs

Deps

Comments

Install / Copy

npx create-freestack-module rich-text-editor

Code Preview

index.tsx

import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import SlashCommand from "./extensions/slash-command";

export function RichTextEditor({ content, onChange }) {
  const editor = useEditor({
    extensions: [
      StarterKit,
      SlashCommand.configure({
        commands: [
          { title: "Heading 1", command: ({ editor }) => editor.chain().toggleHeading({ level: 1 }).run() },
          { title: "Bullet List", command: ({ editor }) => editor.chain().toggleBulletList().run() },
          { title: "Code Block", command: ({ editor }) => editor.chain().toggleCodeBlock().run() },
          { title: "Image", command: ({ editor }) => openImageDialog(editor) },
        ],
      }),
    ],
    content,
    onUpdate: ({ editor }) => onChange(editor.getJSON()),
  });

  return <EditorContent editor={editor} className="prose max-w-none" />;
}