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
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:
@@ -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>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user