Skip to content

feat(editor): support text overlays URL query parameter and position presets (#1422) - #1818

Open
Tarulatapriya wants to merge 1 commit into
reframe-oss:mainfrom
Tarulatapriya:feat/text-overlays-query-param
Open

Tarulatapriya wants to merge 1 commit into
reframe-oss:mainfrom
Tarulatapriya:feat/text-overlays-query-param

Conversation

@Tarulatapriya

Copy link
Copy Markdown
Contributor

Summary

Resolves #1422

Supports initializing and sharing text overlays via the ?textOverlays= URL parameter and provides 9-point position preset buttons for quick placement on the canvas.

Changes

  • src/hooks/useVideoEditor.ts:
    • Wired textOverlays into URL query parameters on initial page load (supporting both plain text strings like ?textOverlays=hello and serialized JSON overlay arrays).
    • Kept active text overlays in sync with the URL search parameters.
    • Added schema validation for textOverlays in isValidValue.
  • src/components/TextControls.tsx:
    • Added 9 position presets (Top Left, Top, Top Right, Left, Center, Right, Bottom Left, Bottom, Bottom Right) for 1-click positioning.
    • Cleaned up dangling comments.
  • src/lib/editorPersistence.ts:
    • Exported sanitizeTextOverlay so query parameters and external recipe inputs are safely clamped and sanitized.
  • src/hooks/tests/useVideoEditor.test.ts:
    • Added unit test cases for loading text overlays from URL query parameters (plain string and serialized JSON).

Testing

  • npm run test (all tests pass)
  • npx tsc --noEmit (clean, 0 errors)
  • npm run lint (clean, 0 errors)
  • npm run build (Next.js webpack build succeeds)

@netlify

netlify Bot commented Oct 18, 2026

Copy link
Copy Markdown

👷 Deploy request for reframe-os pending review.

Visit the deploys page to approve it

Name Link
🔨 Latest commit 1be35ee

@github-actions github-actions Bot added level:advanced Advanced level - 55 pts type:testing Testing labels Oct 18, 2026
@github-actions

Copy link
Copy Markdown
Contributor

👋 Thanks for your PR, @Tarulatapriya!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

What happens next

  1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
  2. ✅ Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
  3. 👀 Code review — a maintainer will review your changes
  4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

  • PR title follows Conventional Commits (e.g. feat: add dark mode)
  • Linked the issue this PR closes (e.g. Closes #123)
  • Tested the changes locally (bun run dev)
  • Build passes (bun run build)

Useful links

Happy coding! 🎉

@github-actions

Copy link
Copy Markdown
Contributor

✅ PR Format Check Passed — @Tarulatapriya

Basic format checks passed. A maintainer will review your code changes.

This does not mean the PR is approved — it just means the format is correct.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

level:advanced Advanced level - 55 pts type:testing Testing

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEATURE]: Add Text Overlay Support for Video Canvas

1 participant