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 changedB = diff ? changedLineNums(diff, 'b') : new Set();
const ta = { ...S.inp, fontSize:12, fontFamily:"'Courier New',monospace", width:'100%', 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 }) { function LineNumCol({ text, changedSet }) {
return ( return (
@@ -1017,9 +1018,10 @@ function TextDiff({ mobile }) {
padding:'7px 6px', minWidth:36, textAlign:'right', userSelect:'none', padding:'7px 6px', minWidth:36, textAlign:'right', userSelect:'none',
fontFamily:"'Courier New',monospace", fontSize:12, lineHeight:'1.6', 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)', 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) => ( {(text||' ').split('\n').map((_,i) => (
<div key={i} style={{ <div key={i} style={{
height:'1.6em',
color: changedSet.has(i+1) ? '#ff6b9d' : 'rgba(255,255,255,0.25)', color: changedSet.has(i+1) ? '#ff6b9d' : 'rgba(255,255,255,0.25)',
background: changedSet.has(i+1) ? 'rgba(255,107,157,0.12)' : 'transparent', background: changedSet.has(i+1) ? 'rgba(255,107,157,0.12)' : 'transparent',
}}>{i+1}</div> }}>{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)'}}> <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}/> <LineNumCol text={val} changedSet={cset}/>
<textarea style={{...ta, border:'none', borderRadius:0, background:'transparent', flex:1, resize:'vertical'}} <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); }}/> onChange={e=>{ setter(e.target.value); setDiff(null); }}/>
</div> </div>
</div> </div>