Feature: Advanced Rich Text Editor with Integrated Media Uploads

[AmanatAliPanhwer]

Description

This feature aims to upgrade the post-writing experience by integrating a powerful rich text editor supporting Markdown and HTML, with seamless drag-and-drop or paste uploads for images and videos.
The goal is to create a modern, intuitive, and efficient content creation workflow, enhancing the overall user experience for authors.

Acceptance Criteria

Core Features

• Unified Writing Area:
  Replace the current plain text area with an advanced rich text editor (e.g., TinyMCE, CKEditor, Tiptap, or ProseMirror).

• Markdown & HTML Support:

  • Must support Markdown writing with real-time HTML preview.
  • Provide a toggle for raw HTML editing mode.
  • Store clean HTML in the database.

• Integrated Media Uploads:

  • Images: Users can drag and drop or paste directly into the editor.
  • Videos: Users can drag and drop video files into the editor.
  • Auto-upload to Supabase Storage:
    • blog_images for images
    • videos for videos
  • Display upload progress or loading indicators.
  • Automatically insert the correct Markdown or HTML tag:
    • Images: ![alt text](url) or <img src="url" alt="alt text">
    • Videos: <video src="url" controls></video>

• Live Preview / WYSIWYG Rendering:
  Uploaded media should render directly within the editor — images inline, videos as playable previews or placeholders.

Editing Modes

• Full-Screen Mode:
  Expand the editor to full browser width/height for distraction-free writing.
  All upload and editing features should function seamlessly here.

• Normal Mode:
  Editor should work normally when embedded within the standard layout.

Accessibility & Feedback

• Must comply with WCAG accessibility standards where possible.
• Provide clear visual feedback for successful uploads and errors:
  • Unsupported file types
  • Upload size exceeded
  • Network issues
• Optionally allow editing of image/video attributes (e.g., alt, controls, autoplay, loop).

Technical Considerations

Frontend

• Evaluate modern, extensible rich text libraries:
  • Tiptap
  • Quill
  • TinyMCE
  • CKEditor
• Implement client-side drag-and-drop/paste functionality using JavaScript.
• Use the Supabase JavaScript client for uploads.
• Show progress indicators and handle async upload responses smoothly.

Supabase Integration

• Use secure Supabase Storage for file uploads.
• Buckets:
  • blog_images for images
  • videos for video uploads
• Ensure proper authentication and authorization for uploads.
• Retrieve and embed uploaded media URLs automatically.

Backend (app.py)

• Backend should primarily receive HTML content.
• Sanitize all incoming HTML to prevent XSS attacks.
• Optionally trigger post-upload video processing (HLS conversion) via:
  • Supabase Function
  • Background worker process

CSS & Styling

• Match the existing hacker-themed UI.
• Ensure consistent dark/light theme behavior.
• Use rounded corners and proper padding for embedded media elements.