Fix: Text Button Not Working in Edit PDF Tool#71
Merged
Conversation
👷 Deploy request for quickstpdf pending review.Visit the deploys page to approve it
|
Contributor
|
@ManthanTerse is attempting to deploy a commit to the jhasourav07's projects Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
Author
|
Hello @JhaSourav07 |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR aims to fix the Edit PDF text-annotation workflow so users can select the Text tool, place a text box on the page, and type successfully. It updates the Edit PDF toolbar/overlay behavior and adds a focused regression test around the annotation flow.
Changes:
- Adds icon-based annotation tool buttons with labels and explicit button type in the Edit PDF toolbar.
- Adjusts the inline text-box overlay styling for text annotations.
- Adds a new Vitest/Testing Library regression test for selecting the Text tool and committing a text edit.
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
src/pages/EditPdf/EditPdf.jsx |
Updates the annotation tool button rendering and tweaks the text-box overlay used when placing text annotations. |
src/pages/EditPdf/EditPdf.test.jsx |
Adds a regression test covering Text tool selection, textbox placement, and committing an edit. |
package-lock.json |
Records lockfile metadata updates for existing transitive dependencies. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
Author
|
Hello @JhaSourav07 ! |
Contributor
Author
|
Hello @JhaSourav07 ! Thankyou! |
Contributor
Author
|
Hello @JhaSourav07 ! Thankyou! |
Owner
|
Issue is not of to edit text in pdf, it was of adding a new text box in pdf which we are not able to do. |
Contributor
Author
|
Ok @JhaSourav07 ! |
Contributor
Author
|
Hello @JhaSourav07 ! Screen.Recording.2026-05-07.101913.mp4 |
Owner
|
Could you also make it adjustable? As you can see, when we add the textbox, it does not stay in place after pressing Enter, which results in a poor user experience. |
This PR aims to fix the Edit PDF text-annotation workflow so users can select the Text tool, place a text box on the page, and type successfully. It updates the Edit PDF toolbar/overlay behavior and adds a focused regression test around the annotation flow.
Changes:
Adds icon-based annotation tool buttons with labels and explicit button type in the Edit PDF toolbar.
Adjusts the inline text-box overlay styling for text annotations.
Adds a new Vitest/Testing Library regression test for selecting the Text tool and committing a text edit.
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 3 comments.
File Description
src/pages/EditPdf/EditPdf.jsx Updates the annotation tool button rendering and tweaks the text-box overlay used when placing text annotations.
src/pages/EditPdf/EditPdf.test.jsx Adds a regression test covering Text tool selection, textbox placement, and committing an edit.
package-lock.json Records lockfile metadata updates for existing transitive dependencies.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/pages/EditPdf/EditPdf.jsx
onKeyDown={e => { if (e.key==="Enter" && !e.shiftKey) { commitTextBox(); e.preventDefault(); } if (e.key==="Escape") setTextBox(null); }}
onBlur={commitTextBox}
style={{ position:"absolute", left:textBox.x, top:textBox.y - fontSize, background:"transparent", border:"1px dashed rgba(255,255,255,0.4)", color, fontSize, fontFamily:"sans-serif", lineHeight:1.2, outline:"none", resize:"none", padding:"2px 4px", minWidth:80, minHeight:fontSize+8 }}
style={{ position:"absolute", left:textBox.x, top:textBox.y - fontSize, background:"transparent", border:"1px dashed rgba(255,255,255,0.4)", color:"#ffffff", fontSize, fontFamily:"sans-serif", lineHeight:1.2, outline:"none", resize:"none", padding:"2px 4px", minWidth:80, minHeight:fontSize+8, zIndex:15 }}
Copilot commented 2 minutes ago
Copilot
Copilot
AI
2 minutes ago
Hard-coding the textarea preview color to white breaks the text annotation workflow: the text box no longer reflects the currently selected annotation color, and on the common white PDF background the user's typed text becomes nearly invisible until after commit. commitTextBox() still saves with color, so the preview and saved output can now disagree.
Suggested changeset 1 (1)
src/pages/EditPdf/EditPdf.jsx
Original file line number Diff line number Diff line change
onChange={e => setTextBox(t => ({ ...t, value: e.target.value }))}
onKeyDown={e => { if (e.key==="Enter" && !e.shiftKey) { commitTextBox(); e.preventDefault(); } if (e.key==="Escape") setTextBox(null); }}
onBlur={commitTextBox}
style={{ position:"absolute", left:textBox.x, top:textBox.y - fontSize, background:"transparent", border:"1px dashed rgba(255,255,255,0.4)", color:"#ffffff", fontSize, fontFamily:"sans-serif", lineHeight:1.2, outline:"none", resize:"none", padding:"2px 4px", minWidth:80, minHeight:fontSize+8, zIndex:15 }}
style={{ position:"absolute", left:textBox.x, top:textBox.y - fontSize, background:"transparent", border:"1px dashed rgba(255,255,255,0.4)", color, caretColor: color, fontSize, fontFamily:"sans-serif", lineHeight:1.2, outline:"none", resize:"none", padding:"2px 4px", minWidth:80, minHeight:fontSize+8, zIndex:15 }}
/>
)}
</div>
Copilot uses AI. Check for mistakes.
@ManthanTerse Reply...
src/pages/EditPdf/EditPdf.jsx
<div className="flex gap-1">
{ANN_TOOLS.map(({ id, label }) => (
<button key={id} title={label} onClick={() => setTool(id)}
<button key={id} type="button" aria-label={label} title={label} onClick={() => setTool(id)}
Copilot commented 2 minutes ago
Copilot
Copilot
AI
2 minutes ago
These buttons act as a single-selection tool picker, but the new implementation still doesn't expose which tool is currently active to assistive technology. Adding only aria-label makes the buttons discoverable, but screen-reader users still can't tell whether "Text" (or any other tool) is selected unless the active state is also conveyed with semantics such as aria-pressed or radio-style roles.
Suggested changeset 1 (1)
src/pages/EditPdf/EditPdf.jsx
Original file line number Diff line number Diff line change
<div className="h-4 w-px bg-white/10" />
<div className="flex gap-1">
{ANN_TOOLS.map(({ id, label }) => (
<button key={id} type="button" aria-label={label} title={label} onClick={() => setTool(id)}
<button key={id} type="button" aria-label={label} aria-pressed={tool === id} title={label} onClick={() => setTool(id)}
className={`p-2 rounded-xl transition-all ${tool===id?"bg-white text-black":"text-zinc-400 hover:text-white hover:bg-white/10"}`}>
{React.createElement(TOOL_ICONS[id], { className: "w-4 h-4" })}
</button>
Copilot uses AI. Check for mistakes.
@ManthanTerse Reply...
src/pages/EditPdf/EditPdf.jsx
Comment on lines +25 to +31
const TOOL_ICONS = {
draw: Pencil,
text: Type,
highlight: Highlighter,
rect: Square,
eraser: Eraser,
};
Copilot commented 2 minutes ago
Copilot
Copilot
AI
2 minutes ago
TOOL_ICONS duplicates the IDs already defined in ANN_TOOLS, so future tool changes now have to update two separate data structures. If one is missed, React.createElement(TOOL_ICONS[id]) will receive undefined and fail at runtime, so keeping the icon alongside each tool definition would be safer to maintain.updated textarea overlay
Contributor
Author
|
Hello @JhaSourav07 ! Video Snippet: Screen.Recording.2026-05-07.222025.mp4 |
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Owner
|
Its working I am merging this PR. |
Contributor
Author
|
Yup @JhaSourav07 Thankyou! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🔍 Issue
The Text button in the Edit PDF tool was not functioning properly. Users were unable to add text after clicking the button.
⚙️ Changes Made
Fixed event handler for the Text tool button
Ensured proper activation of text mode on click
Resolved UI state issue preventing text input
Improved tool selection feedback (active state)
✅ Text should now be added successfully
📌 Expected Behavior
Clicking the Text button enables text mode
User can click anywhere on PDF and add text
📷 After Fix:
Screen.Recording.2026-05-07.101913.mp4
🚀 Additional Notes
No breaking changes
Improves user experience in PDF editing feature
Fixes #3 —
Review this PR
and if any other changes needed let me know!
Thankyou!