[BUG] Application crashes on "Copy Link" when Text Overlay contains emojis or non-ASCII characters

[divyansha12]

Hey @magic-peach
Bug description
The application crashes and fails to copy the share link if the user has added a Text Overlay containing an emoji or any non-ASCII character. The "Copy Link" function uses the native browser btoa() method to base64-encode the recipe JSON. Because btoa() only accepts Latin1 characters, an emoji in the JSON string throws an Uncaught DOMException: String contains an invalid character.

Steps to reproduce
Steps to reproduce the behavior:

1. Go to the Reframe editor page
2. Upload video (any format)
3. Click on the 'Text Overlay' tool and add a new text overlay
4. Edit the text to include an emoji (e.g., "Hello 🐶")
5. Click on the 'Copy Link' button below the preview canvas
6. See error (UI does not respond, link is not copied, and a DOMException appears in the browser console)

Expected behavior
The application should safely encode the text (including emojis/UTF-8 characters) into base64, copy the link to the clipboard, and display a "Copied!" confirmation in the UI.

Actual behavior
The application throws a fatal DOMException in the background. The link is not generated or copied, and the user receives no feedback.

Browser and OS info

• OS: macOS 14 / Windows 11
• Browser: Chrome / Firefox / Safari
• Version: Latest

---

I am an open-source contributor participating in GSSoC '26 and would love to work on this issue!

[github-actions]

👋 Thanks for opening an issue, @divyansha12!

Our maintainers will review this shortly 🚀

Before you start working

• 📖 Read the CONTRIBUTING.md guide
• 💬 Wait for a maintainer to assign you the issue before starting work
• 🔍 Search for existing issues to avoid duplicates

For GSSoC'26 contributors

If you're contributing under GirlScript Summer of Code 2026, please mention it in your comment when requesting assignment:

"I'd like to work on this — contributing under GSSoC'26"

Architecture notes

Reframe is a static Next.js app with output: "export". Key points:

• All video processing uses FFmpeg.wasm (client-side, no server)
• headers() in next.config.ts won't work — use vercel.json instead
• not-found.tsx requires public/404.html + vercel.json routes config

Happy contributing! ⭐ Star the repo if you find it useful!

[divyansha12]

/assign

[github-actions]

Hey @divyansha12, this issue has been assigned to you! 🎉 Please make progress within 5 days or it will be automatically unassigned due to inactivity.

[github-actions]

Hey @divyansha12, just a friendly reminder that this issue has had no activity for 2 days. Please leave an update or let us know if you need help! ⏰

[github-actions]

Hey @divyansha12, final warning! ⚠️ This issue has had no activity for 4 days and will be automatically unassigned in 24 hours if there is no update.

[divyansha12]

Update: I've already implemented the fix and opened PR #1485 for review. Currently waiting for maintainer feedback/review on the proposed changes.

[github-actions]

This issue has been unassigned from @divyansha12 due to 5 days of inactivity and is open for anyone to pick up — comment /assign to claim it!