From 65f5c520446a4fea35fca07ccd40fd7ff7f6f9b7 Mon Sep 17 00:00:00 2001 From: xyaz1313 Date: Wed, 15 Apr 2026 00:25:40 +0800 Subject: [PATCH] fix: Text button in Edit PDF not working - invisible textarea + stale state The annotation text input textarea had transparent background and tiny height (~25px at default font 18), making it invisible on white PDF pages. Also added cleanup effect to reset drawing/textBox state when switching tools, preventing stale state from swallowing canvas clicks. Fixes #3 --- src/pages/EditPdf/EditPdf.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/EditPdf/EditPdf.jsx b/src/pages/EditPdf/EditPdf.jsx index 34eddf3..3d219b1 100644 --- a/src/pages/EditPdf/EditPdf.jsx +++ b/src/pages/EditPdf/EditPdf.jsx @@ -146,6 +146,9 @@ export function EditPdf() { // ── redraw canvas on annotation + text-edit changes ───────────────────────── useEffect(() => { pages.forEach((_, i) => redraw(i, null)); }, [annotations, pages, textEdits, textItems]); // eslint-disable-line + // Clean up stale drawing/textBox state when tool or mode changes + useEffect(() => { setTextBox(null); drawing.current = null; }, [tool, mode]); + function redraw(pi, inProgress) { const cvs = canvasRefs.current[pi]; if (!cvs) return; const ctx = cvs.getContext("2d"); ctx.clearRect(0, 0, cvs.width, cvs.height); @@ -415,7 +418,7 @@ export function EditPdf() { 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, 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:"rgba(30,30,30,0.95)", border:"2px solid #3b82f6", color: color === "#ffffff" ? "#ffffff" : color, fontSize, fontFamily:"sans-serif", lineHeight:1.2, outline:"none", resize:"none", padding:"4px 6px", minWidth:120, minHeight:Math.max(fontSize * 2.5, 48), borderRadius:4, boxShadow:"0 2px 8px rgba(0,0,0,0.5)", zIndex:25 }} /> )}