DevTools TextDiff: kein Zeilenumbruch in Textarea, Zeilennummern bleiben korrekt

This commit is contained in:
2026-06-01 11:51:16 +02:00
parent 3f63a6dcd7
commit ec3bf2d176

View File

@@ -1009,7 +1009,8 @@ function TextDiff({ mobile }) {
const changedB = diff ? changedLineNums(diff, 'b') : new Set();
const ta = { ...S.inp, fontSize:12, fontFamily:"'Courier New',monospace", width:'100%',
boxSizing:'border-box', minHeight:180, resize:'vertical', lineHeight:'1.6', padding:'7px 8px' };
boxSizing:'border-box', minHeight:180, resize:'vertical', lineHeight:'1.6', padding:'7px 8px',
whiteSpace:'pre', overflowX:'auto', overflowWrap:'normal' };
function LineNumCol({ text, changedSet }) {
return (
@@ -1017,9 +1018,10 @@ function TextDiff({ mobile }) {
padding:'7px 6px', minWidth:36, textAlign:'right', userSelect:'none',
fontFamily:"'Courier New',monospace", fontSize:12, lineHeight:'1.6',
background:'rgba(0,0,0,0.2)', borderRight:'1px solid rgba(255,255,255,0.07)',
whiteSpace:'pre', flexShrink:0}}>
flexShrink:0, overflowY:'hidden'}}>
{(text||' ').split('\n').map((_,i) => (
<div key={i} style={{
height:'1.6em',
color: changedSet.has(i+1) ? '#ff6b9d' : 'rgba(255,255,255,0.25)',
background: changedSet.has(i+1) ? 'rgba(255,107,157,0.12)' : 'transparent',
}}>{i+1}</div>
@@ -1044,7 +1046,7 @@ function TextDiff({ mobile }) {
<div style={{display:'flex', borderRadius:6, overflow:'hidden', border:'1px solid rgba(255,255,255,0.1)', background:'rgba(255,255,255,0.04)'}}>
<LineNumCol text={val} changedSet={cset}/>
<textarea style={{...ta, border:'none', borderRadius:0, background:'transparent', flex:1, resize:'vertical'}}
value={val} placeholder="Text hier einfügen…"
wrap="off" value={val} placeholder="Text hier einfügen…"
onChange={e=>{ setter(e.target.value); setDiff(null); }}/>
</div>
</div>