Fix commit job and OCR text editing

- OCR text is now shown in an editable textarea (plain_ocr mode) so
  users can correct it before committing
- editedOcrText state tracks edits; commit job sends the edited value
  instead of the original result.text
- Remove silent early-return guard that blocked commit when text was empty
- Copy and download also use the edited text

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Aaron Roberts
2026-06-09 17:11:49 +01:00
parent fd747e6c23
commit da7957d7d5
2 changed files with 48 additions and 27 deletions

View File

@@ -4,7 +4,7 @@ import { Copy, Download, Sparkles, Loader2, CheckCircle2, ChevronDown, Database
import ReactMarkdown from 'react-markdown'
import DOMPurify from 'dompurify'
export default function ResultPanel({ result, loading, imagePreview, onCopy, onDownload, onCommitJob, commitLoading, commitResult }) {
export default function ResultPanel({ result, loading, imagePreview, onCopy, onDownload, onCommitJob, commitLoading, commitResult, editedOcrText, onOcrTextChange }) {
const canvasRef = useRef(null)
const imgRef = useRef(null)
const [showAdvanced, setShowAdvanced] = useState(false)
@@ -226,26 +226,37 @@ export default function ResultPanel({ result, loading, imagePreview, onCopy, onD
</div>
)}
{/* Text result */}
<div className="bg-white/5 border border-white/10 rounded-xl p-4 max-h-96 overflow-y-auto">
{isHTML ? (
<div
className="prose prose-invert prose-sm max-w-none"
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(result.text) }}
style={{
color: '#e5e7eb',
}}
{/* Text result — editable textarea in plain_ocr/commit mode, rendered otherwise */}
{onCommitJob ? (
<div className="space-y-1">
<p className="text-xs text-gray-400">OCR Text <span className="text-purple-400">(editable correct before committing)</span></p>
<textarea
value={editedOcrText}
onChange={e => onOcrTextChange(e.target.value)}
rows={10}
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm text-gray-200 font-mono resize-y focus:outline-none focus:border-purple-500/50 transition-colors"
placeholder="OCR text will appear here..."
/>
) : isMarkdown ? (
<div className="prose prose-invert prose-sm max-w-none">
<ReactMarkdown>{result.text}</ReactMarkdown>
</div>
) : (
<pre className="text-sm text-gray-200 whitespace-pre-wrap font-mono">
{result.text}
</pre>
)}
</div>
</div>
) : (
<div className="bg-white/5 border border-white/10 rounded-xl p-4 max-h-96 overflow-y-auto">
{isHTML ? (
<div
className="prose prose-invert prose-sm max-w-none"
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(result.text) }}
style={{ color: '#e5e7eb' }}
/>
) : isMarkdown ? (
<div className="prose prose-invert prose-sm max-w-none">
<ReactMarkdown>{result.text}</ReactMarkdown>
</div>
) : (
<pre className="text-sm text-gray-200 whitespace-pre-wrap font-mono">
{result.text}
</pre>
)}
</div>
)}
{/* Raw Response Viewer */}
{result.raw_text && (