Fix GridTable: replace ternary chain with IIFE for cell rendering
Some checks failed
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-school (push) Successful in 44s
CI / test-go-edu-search (push) Successful in 36s
CI / test-python-klausur (push) Failing after 2m28s
CI / test-python-agent-core (push) Successful in 36s
CI / test-nodejs-website (push) Successful in 31s

Chained ternary (colored ? div : multiline ? textarea : input) caused
webpack SWC parser issues. Replaced with IIFE {(() => { if/return })()}
which is more robust and readable.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-04-13 18:10:22 +02:00
parent 947ff6bdcb
commit 2c2bdf903a

View File

@@ -504,62 +504,71 @@ export function GridTable({
/> />
)} )}
{/* Per-word colored display when not editing */} {/* Per-word colored display when not editing */}
{hasColoredWords && !isSelected ? ( {(() => {
<div const cellText = cell?.text ?? ''
className={`w-full px-2 cursor-text truncate ${isBold ? 'font-bold' : 'font-normal'}`} const isMultiLine = cellText.includes('\n')
onClick={(e) => { if (hasColoredWords && !isSelected) {
if ((e.metaKey || e.ctrlKey) && onToggleCellSelection) { return (
onToggleCellSelection(cellId) <div
} else { className={`w-full px-2 cursor-text truncate ${isBold ? 'font-bold' : 'font-normal'}`}
onSelectCell(cellId) onClick={(e) => {
setTimeout(() => document.getElementById(`cell-${cellId}`)?.focus(), 0) if ((e.metaKey || e.ctrlKey) && onToggleCellSelection) {
} onToggleCellSelection(cellId)
}} } else {
> onSelectCell(cellId)
{cell!.word_boxes!.map((wb, i) => ( setTimeout(() => document.getElementById(`cell-${cellId}`)?.focus(), 0)
<span }
key={i} }}
style={
wb.color_name && wb.color_name !== 'black'
? { color: wb.color }
: undefined
}
> >
{wb.text} {cell!.word_boxes!.map((wb, i) => (
{i < cell!.word_boxes!.length - 1 ? ' ' : ''} <span
</span> key={i}
))} style={
</div> wb.color_name && wb.color_name !== 'black'
) : (cell?.text ?? '').includes('\n') ? ( ? { color: wb.color }
<textarea : undefined
id={`cell-${cellId}`} }
value={cell?.text ?? ''} >
onChange={(e) => onCellTextChange(cellId, e.target.value)} {wb.text}
onFocus={() => onSelectCell(cellId)} {i < cell!.word_boxes!.length - 1 ? ' ' : ''}
onClick={(e) => { </span>
if ((e.metaKey || e.ctrlKey) && onToggleCellSelection) { ))}
e.preventDefault() </div>
onToggleCellSelection(cellId) )
} }
}} if (isMultiLine) {
onKeyDown={(e) => { return (
if (e.key === 'Tab') { <textarea
e.preventDefault() id={`cell-${cellId}`}
onNavigate(cellId, e.shiftKey ? 'left' : 'right') value={cellText}
} onChange={(e) => onCellTextChange(cellId, e.target.value)}
}} onFocus={() => onSelectCell(cellId)}
rows={(cell?.text ?? '').split('\n').length} onClick={(e) => {
className={`w-full px-2 bg-transparent border-0 outline-none resize-none ${ if ((e.metaKey || e.ctrlKey) && onToggleCellSelection) {
isBold ? 'font-bold' : 'font-normal' e.preventDefault()
}`} onToggleCellSelection(cellId)
style={{ color: cellColor || undefined }} }
spellCheck={false} }}
/> onKeyDown={(e) => {
) : ( if (e.key === 'Tab') {
e.preventDefault()
onNavigate(cellId, e.shiftKey ? 'left' : 'right')
}
}}
rows={cellText.split('\n').length}
className={`w-full px-2 bg-transparent border-0 outline-none resize-none ${
isBold ? 'font-bold' : 'font-normal'
}`}
style={{ color: cellColor || undefined }}
spellCheck={false}
/>
)
}
return (
<input <input
id={`cell-${cellId}`} id={`cell-${cellId}`}
type="text" type="text"
value={cell?.text ?? ''} value={cellText}
onChange={(e) => onCellTextChange(cellId, e.target.value)} onChange={(e) => onCellTextChange(cellId, e.target.value)}
onFocus={() => onSelectCell(cellId)} onFocus={() => onSelectCell(cellId)}
onClick={(e) => { onClick={(e) => {
@@ -576,7 +585,7 @@ export function GridTable({
spellCheck={false} spellCheck={false}
/> />
) )
)} })()}
</div> </div>
) )
}) })