chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: align textarea and syntax overlay to fix cursor/text mismatch

Browse Source 
The highlighted overlay had double padding (wrapper p-4 + pre p-4) and
its own bg-card background, causing the visible text to drift from the
actual cursor position. Fix: strip pre padding/background in overlay
mode via className prop, add explicit line-height and whitespace-pre-wrap
to both layers so they wrap identically character-for-character.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-14 19:26:55 -04:00
parent 75c48eab9e
commit 099a4a2b4e
2 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/script-editor/ScriptBodyEditor.tsx
View File

@@ -37,7 +37,7 @@ export function ScriptBodyEditor({ value, onChange, disabled }: Props) {
<div className="relative rounded-xl border border-border overflow-hidden"> <div className="relative rounded-xl border border-border overflow-hidden">
{/* Highlighted overlay (read-only visual layer) — scroll synced to textarea */} {/* Highlighted overlay (read-only visual layer) — scroll synced to textarea */}
<div ref={overlayRef} className="absolute inset-0 pointer-events-none overflow-hidden p-4"> <div ref={overlayRef} className="absolute inset-0 pointer-events-none overflow-hidden p-4">
<PowerShellHighlighter script={value || ' '} /> <PowerShellHighlighter script={value || ' '} className="font-label text-sm leading-[1.5] whitespace-pre-wrap break-words m-0" />
</div> </div>
{/* Editable textarea (transparent text, visible caret) */} {/* Editable textarea (transparent text, visible caret) */}
@@ -49,7 +49,7 @@ export function ScriptBodyEditor({ value, onChange, disabled }: Props) {
onKeyDown={handleTab} onKeyDown={handleTab}
disabled={disabled} disabled={disabled}
spellCheck={false} spellCheck={false}
className="relative z-10 w-full min-h-[300px] resize-y font-label text-sm bg-transparent text-transparent caret-foreground p-4 focus:outline-none focus:ring-1 focus:ring-[rgba(6,182,212,0.2)] disabled:cursor-not-allowed disabled:opacity-50" className="relative z-10 w-full min-h-[300px] resize-y font-label text-sm leading-[1.5] bg-transparent text-transparent caret-foreground p-4 whitespace-pre-wrap break-words focus:outline-none focus:ring-1 focus:ring-[rgba(6,182,212,0.2)] disabled:cursor-not-allowed disabled:opacity-50"
placeholder="# Enter your PowerShell script here…&#10;# Use {{ param_name }} for parameter placeholders" placeholder="# Enter your PowerShell script here…&#10;# Use {{ param_name }} for parameter placeholders"
/> />
</div> </div>

5
frontend/src/components/scripts/PowerShellHighlighter.tsx
View File

@@ -62,9 +62,10 @@ function classify(token: string): string {
interface Props { interface Props {
script: string script: string
className?: string
} }
export function PowerShellHighlighter({ script }: Props) { export function PowerShellHighlighter({ script, className }: Props) {
const parts: React.ReactNode[] = [] const parts: React.ReactNode[] = []
let lastIndex = 0 let lastIndex = 0
@@ -90,7 +91,7 @@ export function PowerShellHighlighter({ script }: Props) {
} }
return ( return (
<pre className="font-label text-sm bg-card rounded-xl p-4 overflow-x-auto"> <pre className={className ?? "font-label text-sm bg-card rounded-xl p-4 overflow-x-auto"}>
<code>{parts}</code> <code>{parts}</code>
</pre> </pre>
) )