feat(blog): Add rich text editor for blog post content management

[codeunia-dev]

• Integrate Tiptap-based rich text editor for enhanced content creation
• Remove legacy textarea and manual image upload approach
• Add new RichTextEditor component with advanced formatting capabilities
• Simplify content image insertion and text formatting workflow
• Update blog post form to use new rich text editor component
• Remove manual content image upload logic in favor of integrated solution Improves content creation experience by providing a more intuitive and feature-rich editing interface for blog posts.

Author: @akshay0611

Summary by CodeRabbit

• New Features

  • Added a rich text editor with formatting tools (bold, italic, strikethrough, code, headings, lists, blockquotes, and links) for blog post content editing.
  • Enabled direct image uploads to storage within the editor with automatic URL insertion.
  • Improved blog post and newsletter UI with updated styling for editor components.

• Bug Fixes

  • Fixed error message formatting in the newsletter section.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
codeunia	Building	Preview	Comment	Nov 1, 2025 10:08am

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

A new RichTextEditor component powered by TipTap replaces the textarea-based content editor in the blog admin interface. Supporting styles and TipTap dependencies are added. Blog post content handling is updated to use the new component, and a minor text fix corrects an apostrophe escape in the newsletter admin error message.

Changes

Cohort / File(s)	Summary
RichTextEditor Component components/ui/rich-text-editor.tsx	New React component implementing a TipTap-based rich text editor with configurable toolbar (bold, italic, strikethrough, code, headings, lists, blockquote, link, image tools), support for Supabase image uploads to blog-images/public/..., URL-based image insertion, undo/redo, and onChange callback wiring for form integration.
Editor Styling app/globals-tiptap.css, app/globals.css	New stylesheet globals-tiptap.css provides comprehensive ProseMirror editor styling (headings, paragraphs, lists, blockquotes, code blocks, links, images, emphasis). Imported into app/globals.css after Tailwind utilities.
Blog Admin Updates app/admin/blog-posts/page.tsx	Replaced textarea content editor with RichTextEditor component. Updated content data binding to form flow. Replaced per-post content fetch logic with Promise.all-based approach for real-time likes and views aggregation. Minor formatting adjustments.
Newsletter Admin Fix app/admin/newsletter/page.tsx	Escaped apostrophe in error message text (you're instead of you're).
Dependencies package.json	Added four TipTap packages (^3.10.1): @tiptap/starter-kit, @tiptap/react, @tiptap/extension-link, @tiptap/extension-image.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Editor as RichTextEditor
    participant Upload as Supabase Storage
    participant Form as Blog Form

    User->>Editor: Click "Insert Image"
    User->>Editor: Select local file
    Editor->>Editor: Show loading state
    Editor->>Upload: Upload to blog-images/public/
    alt Upload Success
        Upload-->>Editor: Return public URL
        Editor->>Editor: Insert image into content
        Editor->>Form: Call onChange with HTML
    else Upload Failure
        Upload-->>Editor: Error response
        Editor->>Editor: Display error message
        Editor->>Editor: Reset file input
    end

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

• RichTextEditor component: Dense logic with TipTap configuration, image upload/error handling, Supabase integration, file input management, and editor state binding.
• CSS stylesheet: Comprehensive new styling with multiple selector rules and pseudo-elements requiring validation for editor accessibility and visual consistency.
• Blog admin page integration: Logic change in data-fetching pattern (Promise.all) and component replacement; requires verification of form data flow and likes/views computation.
• Multiple heterogeneous file types: CSS, React component, page updates, and config changes demand separate reasoning per area.

Poem

🐰✨ A rich text warren emerges,
Where words flow bold and images emerge!
TipTap's magic quill now graces
The editor's newfound places—
Content blooms with every keystroke! 📝

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/blogtexteditor

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ccbd19d and b80bbac.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (6)

• app/admin/blog-posts/page.tsx (17 hunks)
• app/admin/newsletter/page.tsx (1 hunks)
• app/globals-tiptap.css (1 hunks)
• app/globals.css (1 hunks)
• components/ui/rich-text-editor.tsx (1 hunks)
• package.json (2 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}