fancy-area

Fancy Area: GitHub-Style Textarea with @Mentions and Preview

Fancy Area is a React component that replicates GitHub's PR comment section textarea, featuring robust @mention support with hover cards and markdown rendering. It's designed to provide this rich functionality without relying on heavy text editor libraries, focusing on core browser capabilities and utility functions for a lightweight and efficient user experience. The UI is built using shadcn/ui components and styled with Tailwind CSS.

Features:

• @Mention Functionality: Type "@" to trigger a user suggestion combobox, inspired by GitHub.
• Mention Hover Cards: Displays user details on hover in the preview area for @mentions.
• Markdown Rendering: Supports writing in Markdown with a live preview of the formatted content.
• Raw HTML Support: Allows embedding and rendering raw HTML within the input, processed safely.
• Lightweight Design: Achieves rich text features without relying on heavy external text editor libraries.
• Modern UI Components: Built using shadcn/ui (Tabs, Command, Textarea, HoverCard, Avatar).
• Tailwind CSS Styling: Styled with Tailwind CSS, including @tailwindcss/typography for clean preview typography.
• Caret-Aware Suggestion Box: Intelligently positions the @mention suggestion box relative to the text caret.
• Keyboard Navigation for Mentions: Full keyboard control for selecting mentions without losing textarea focus.
• Markdown to React Transformation: Utilizes unified and Rehype/Remark plugins to convert Markdown to React components.
• Custom Element Handling: Demonstrates processing custom HTML elements like <mention> for specialized rendering.
• Undo Support for Replacements: Leverages document.execCommand for word replacement to maintain undo history.

Summary:

This tool offers developers a 'Fancy Area' textarea, integrating GitHub-like @mention functionality with hover cards and a live markdown preview. Built with React and shadcn/ui, it uses custom utilities for text manipulation and content transformation, providing a focused alternative to complex rich text editors for specific needs, emphasizing a lightweight approach.