Benjamin_Boenisch/breakpilot-lehrer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: show per-word colors in grid table instead of whole-cell coloring
Some checks failed
CI / go-lint (push) Has been skipped
Details
CI / python-lint (push) Has been skipped
Details
CI / nodejs-lint (push) Has been skipped
Details
CI / test-go-school (push) Successful in 38s
Details
CI / test-go-edu-search (push) Successful in 27s
Details
CI / test-python-klausur (push) Failing after 2m1s
Details
CI / test-python-agent-core (push) Successful in 16s
Details
CI / test-nodejs-website (push) Successful in 19s
Details

Browse Source 
When a cell has colored words (red !, blue phonetics), render each
word as a separate span with its own color instead of coloring the
entire input text with the first non-black color found.

Switches to editable input on cell selection (click).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-03-17 08:55:43 +01:00
parent 92a52a3199
commit dfce8415d7
1 changed files with 44 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
admin-lehrer/components/grid-editor/GridTable.tsx
View File

@@ -131,6 +131,9 @@ export function GridTable({
const isBold = col.bold || cell?.is_bold
const isLowConf = cell && cell.confidence > 0 && cell.confidence < 60
const cellColor = getCellColor(cell)
const hasColoredWords = cell?.word_boxes?.some(
(wb) => wb.color_name && wb.color_name !== 'black',
) ?? false
return (
<td
@@ -147,21 +150,47 @@ export function GridTable({
title={`Farbe: ${cell?.word_boxes?.find(wb => wb.color_name !== 'black')?.color_name}`}
/>
)}
<input
id={`cell-${cellId}`}
type="text"
value={cell?.text ?? ''}
onChange={(e) => {
if (cell) onCellTextChange(cellId, e.target.value)
}}
onFocus={() => onSelectCell(cellId)}
onKeyDown={(e) => handleKeyDown(e, cellId)}
className={`w-full px-2 py-1.5 bg-transparent border-0 outline-none ${
isBold ? 'font-bold' : 'font-normal'
} ${row.is_header ? 'text-base' : 'text-sm'}`}
style={cellColor ? { color: cellColor } : undefined}
spellCheck={false}
/>
{/* Per-word colored display when not editing */}
{hasColoredWords && !isSelected ? (
<div
className={`w-full px-2 py-1.5 cursor-text truncate ${
isBold ? 'font-bold' : 'font-normal'
} ${row.is_header ? 'text-base' : 'text-sm'}`}
onClick={() => {
onSelectCell(cellId)
setTimeout(() => document.getElementById(`cell-${cellId}`)?.focus(), 0)
}}
>
{cell!.word_boxes!.map((wb, i) => (
<span
key={i}
style={
wb.color_name && wb.color_name !== 'black'
? { color: wb.color }
: undefined
}
>
{wb.text}
{i < cell!.word_boxes!.length - 1 ? ' ' : ''}
</span>
))}
</div>
) : (
<input
id={`cell-${cellId}`}
type="text"
value={cell?.text ?? ''}
onChange={(e) => {
if (cell) onCellTextChange(cellId, e.target.value)
}}
onFocus={() => onSelectCell(cellId)}
onKeyDown={(e) => handleKeyDown(e, cellId)}
className={`w-full px-2 py-1.5 bg-transparent border-0 outline-none ${
isBold ? 'font-bold' : 'font-normal'
} ${row.is_header ? 'text-base' : 'text-sm'}`}
spellCheck={false}
/>
)}
</div>
</td>
)