Fix/text inline edit overwrite

[mohammed-danyal]

Description

Fixed inline text editing behavior in Reframe’s text overlay system to enable natural caret positioning and partial text editing.

This PR improves text overlay interactions to behave more like professional lightweight editors such as Canva, Figma, and CapCut by ensuring:

• smooth and predictable caret positioning
• partial text editing without replacing the entire text
• stable typing behavior without unwanted selection resets
• proper separation between drag mode and edit mode
• native browser contentEditable behavior

Key improvements include:

• Fixed drag handler behavior preventing caret placement during edit mode
• Removed forced selection manipulation interfering with native editing
• Improved edit-state tracking inside drag handlers
• Preserved quick full-text selection on initial double-click
• Maintained drag/edit separation for stable interactions
• Kept implementation modular and localized to overlay editing logic

The implementation preserves Reframe’s current architecture while improving the overall text editing workflow.

---

Related Issue

Closes #1056

---

Type of Contribution

• Bug fix
• New feature
• Documentation update
• Refactor
• GSSoC contribution

---

Participant Info

• GitHub username: Mohammed-danyal
• Contribution level (Beginner/Intermediate/Advanced): Intermediate

---

Screen Recording

Reframe.Resize.trim.and.export.videos.in.your.browser.-.Brave.2026-05-24.15-43-15.mp4

---

Changes Made

DraggableTextOverlays.tsx

1. Added an early return guard in handleMouseDown when editing is active to prevent drag initialization from blocking caret placement
2. Added editingId to callback dependencies for accurate edit-state handling
3. Removed forced selection range manipulation from the onInput handler
4. Preserved double-click full-text selection behavior for quick replacement workflows
5. Maintained drag disabling during edit mode and restored dragging after editing ends

---

Testing

Tested the following scenarios:

• Double-click enters edit mode with text selected
• Clicking inside text positions the caret correctly
• Partial text editing works normally
• Continuous typing behaves correctly
• Escape key exits edit mode without saving
• Enter key saves changes
• Blur saves text changes
• Dragging is disabled during edit mode
• Dragging resumes after editing
• Multiple overlays edit independently
• Export functionality remains unaffected
• Works across Chrome, Firefox, and Safari

---

Checklist

• I have read the contribution guidelines
• My changes follow the project structure
• I have tested my changes in Chrome, Firefox, and Safari
• bun run lint passes (no ESLint errors)
• bunx tsc --noEmit passes (no TypeScript errors)
• No console.log statements left in
• This PR is related to a valid issue
• Changes are minimal and review-friendly
• No unrelated code formatting or refactoring
• Screen recording attached above (required for UI/feature/design changes)

---

[vercel]

@mohammed-danyal is attempting to deploy a commit to the magic-peach1's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

⚠️ PR Format Issues — @mohammed-danyal

Please fix the following before your PR can be reviewed:

• ⚠️ Use a conventional PR title. Examples:
  • feat: add dark mode support
  • fix: resolve aria label missing on slider
  • docs: add deployment guide to README

Push new commits after fixing — this comment will update automatically.

📖 CONTRIBUTING.md

[github-actions]

👋 Thanks for your PR, @mohammed-danyal!

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

🟠 GSSoC'26 PR detected — thanks for contributing under GirlScript Summer of Code 2026!

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

• 📖 CONTRIBUTING.md
• 🐛 Open Issues
• ⭐ Star the repo to support the project!

Happy coding! 🎉