Add embedded viewer for Google Docs/Sheets/Slides links

[tejswini-tiwari]

🎯 Problem

When students click on external links (Google Docs, Sheets, Dropbox, etc.) in article content, they navigate away from the course, interrupting the learning experience and losing their place in the article.

✅ Solution

Added an embedded document viewer that displays Google Docs/Sheets/Slides content directly within the course interface, allowing students to access resources without leaving the article.

📋 Changes Made

Features Added:

• Resources & Links Section: Automatically extracts all external links from article content and displays them in a dedicated panel below the article
• Embedded Document Viewer: Click any link to open it in an embedded iframe preview
• Google Docs Support: Converts Google Docs URLs to preview mode for seamless viewing
• Google Sheets Support: Displays Google Sheets in embedded preview mode
• Google Slides Support: Shows Google Slides presentations in embedded viewer
• Fullscreen Mode: Maximize button to expand viewer to fullscreen
• Back to Links Button: Easily return to the links list
• Open in New Tab Option: Direct access to edit documents if needed
• Smart Link Handling:
  • Embeddable links (Google Docs/Sheets/Slides) open in viewer
  • Non-embeddable links (Dropbox, OneDrive) open in new tab automatically
• Link Deduplication: Removes duplicate links automatically
• Link Truncation: Long link names are truncated for better UI

Technical Details:

• Added convertToEmbedUrl() helper function to convert URLs to embeddable format
• Added state management for link extraction and viewer selection
• Implemented iframe-based document viewer with security measures
• Fixed TypeScript type errors for better type safety
• Maintained existing article functionality and styling

🎨 User Experience Flow

1. Student reads article with embedded links
2. "Resources & Links" section appears below article (if links exist)
3. Student clicks on a resource link button
4. Document opens in embedded viewer below the article
5. Student can view, fullscreen, or open in new tab as needed
6. Student can click "Back to Links" to return and select another resource
7. Student stays within the course interface throughout

✨ Benefits

✅ Improved Learning Experience - Students don't leave the course context
✅ Better Resource Access - Seamless document viewing without tab switching
✅ Safety - Uses security measures (noopener, noreferrer) for external links

📝 Notes

• This feature automatically detects and extracts links from article content
• No changes needed to article creation process - works with existing links
• Backward compatible with existing articles

🧪 Testing

• Test with Google Docs links
• Test with Google Sheets links
• Test with Google Slides links
• Test with Dropbox/OneDrive links (should open in new tab)
• Test fullscreen functionality
• Test on mobile and desktop
• Test dark/light mode compatibility