diff --git a/frontend/src/components/script-editor/ScriptBodyEditor.tsx b/frontend/src/components/script-editor/ScriptBodyEditor.tsx index 9890cd5e..a61d41ff 100644 --- a/frontend/src/components/script-editor/ScriptBodyEditor.tsx +++ b/frontend/src/components/script-editor/ScriptBodyEditor.tsx @@ -9,6 +9,14 @@ interface Props { export function ScriptBodyEditor({ value, onChange, disabled }: Props) { const textareaRef = useRef(null) + const overlayRef = useRef(null) + + const handleScroll = useCallback(() => { + if (textareaRef.current && overlayRef.current) { + overlayRef.current.scrollTop = textareaRef.current.scrollTop + overlayRef.current.scrollLeft = textareaRef.current.scrollLeft + } + }, []) const handleTab = useCallback((e: React.KeyboardEvent) => { if (e.key === 'Tab') { @@ -26,9 +34,9 @@ export function ScriptBodyEditor({ value, onChange, disabled }: Props) { }, [value, onChange]) return ( -
- {/* Highlighted overlay (read-only visual layer) */} -
+
+ {/* Highlighted overlay (read-only visual layer) — scroll synced to textarea */} +
@@ -37,6 +45,7 @@ export function ScriptBodyEditor({ value, onChange, disabled }: Props) { ref={textareaRef} value={value} onChange={e => onChange(e.target.value)} + onScroll={handleScroll} onKeyDown={handleTab} disabled={disabled} spellCheck={false} diff --git a/frontend/src/pages/ScriptManagePage.tsx b/frontend/src/pages/ScriptManagePage.tsx index f38028ad..570e8b29 100644 --- a/frontend/src/pages/ScriptManagePage.tsx +++ b/frontend/src/pages/ScriptManagePage.tsx @@ -27,16 +27,18 @@ export default function ScriptManagePage() { } return ( -
- {mode === 'list' ? ( - - ) : ( - - )} +
+
+ {mode === 'list' ? ( + + ) : ( + + )} +
) }