Implement Cloud Highlights, Annotations & Shareable Quotes Feature

[Copilot]

This PR implements a comprehensive text highlighting and annotation system that allows authenticated users to highlight text in MDX articles, add personal notes, and share specific quotes via deep links.

🎯 Key Features

Text Selection & Highlighting

• Select any text in articles to reveal an interactive toolbar
• Choose from 5 color options (yellow, green, blue, pink, orange)
• Add optional personal notes to highlights
• Highlights persist across devices and sessions

Smart Text Anchoring

• Uses W3C Web Annotation TextQuoteSelector pattern with exact text, prefix, and suffix for robust re-anchoring
• Handles edge cases like duplicate text through disambiguation
• Fallback to position-based selectors when needed

Sidebar Management Panel

• Collapsible "Notes" panel on article pages
• Filter highlights by color or notes
• Edit, delete, and navigate to highlights
• Toggle visibility of all highlights

Global Notes Page

• New /notes route showing all user highlights across articles
• Full-text search through highlight content and notes
• Group highlights by article with metadata
• Direct links to jump back to highlighted text

Deep Linking & Sharing

• Generate shareable URLs for specific quotes
• Uses native browser text fragments (#:~:text=) for short ASCII text
• Custom anchor fallback for longer or complex text
• Smooth scrolling with visual pulse animations

🏗 Implementation Details

Database Schema

CREATE TABLE public.article_highlights (
  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id uuid REFERENCES auth.users(id) ON DELETE CASCADE,
  article_slug text NOT NULL,
  text_quote_exact text NOT NULL,
  text_quote_prefix text,
  text_quote_suffix text,
  note text,
  color text DEFAULT 'yellow',
  is_public boolean DEFAULT false,
  created_at timestamptz DEFAULT now()
);

API Layer

• Full CRUD operations at /api/highlights and /api/highlights/[id]
• Zod validation for request bodies
• Modern Supabase SSR integration
• Row Level Security ensuring users can only access their own highlights

UI Components

• SelectionToolbar: Interactive toolbar that appears on text selection
• HighlightRenderer: DOM manipulation to render highlights as <mark> elements
• HighlightsPanel: Sidebar panel for managing article highlights
• ArticleHighlights: Main wrapper component integrating all functionality

Data Management

• React Query for optimistic updates and caching
• Efficient DOM queries and minimal re-renders
• Real-time sync across browser tabs

🎨 User Experience

1. Creating: Select text → toolbar appears → choose color → add note → click "Highlight"
2. Managing: Use sidebar panel to view, filter, edit, and delete highlights
3. Searching: Global notes page with search and article filtering
4. Sharing: Copy links that automatically scroll to highlighted text

♿ Accessibility

• ARIA labels for screen readers (aria-label="Highlight by you: note content")
• Keyboard navigation support
• Color contrast compliance
• Focus management for interactive elements

🧪 Testing

• Comprehensive unit tests for text selector algorithms
• DOM manipulation testing with jsdom
• API endpoint validation tests
• Text fragment detection and deep linking tests

The implementation follows modern React patterns, maintains excellent performance, and integrates seamlessly with the existing codebase while providing a powerful new feature for reader engagement.

Fixes #11.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.googleapis.com
  • Triggering command: node /home/REDACTED/work/DevVerse-SWE-Blog/DevVerse-SWE-Blog/node_modules/.bin/next build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[Copilot]

@hoangsonww 👋 This repository doesn't have Copilot instructions. With Copilot instructions, I can understand the repository better, work faster and produce higher quality PRs.

I can generate a .github/copilot-instructions.md file for you automatically. Click here to open a pre-filled issue and assign it to me. I'll write the instructions, and then tag you for review.

[vercel]

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

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
dev-verse-swe-blog	Ignored			Sep 23, 2025 3:43pm