fix(editor): fix editor scrolling to prevent page scroll

This commit is contained in:
2026-02-06 10:40:35 -05:00
parent 071d971854
commit 4cceefecc0

View File

@@ -1,4 +1,4 @@
import { useCallback, useEffect, useRef } from 'react' import { useRef } from 'react'
interface EditorProps { interface EditorProps {
content: string content: string
@@ -10,19 +10,6 @@ interface EditorProps {
export function Editor({ content, onChange, placeholder, disabled }: EditorProps) { export function Editor({ content, onChange, placeholder, disabled }: EditorProps) {
const textareaRef = useRef<HTMLTextAreaElement>(null) const textareaRef = useRef<HTMLTextAreaElement>(null)
// Auto-resize textarea
const adjustHeight = useCallback(() => {
const textarea = textareaRef.current
if (textarea) {
textarea.style.height = 'auto'
textarea.style.height = `${textarea.scrollHeight}px`
}
}, [])
useEffect(() => {
adjustHeight()
}, [content, adjustHeight])
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
onChange(e.target.value) onChange(e.target.value)
} }
@@ -55,11 +42,12 @@ export function Editor({ content, onChange, placeholder, disabled }: EditorProps
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
placeholder={placeholder} placeholder={placeholder}
disabled={disabled} disabled={disabled}
className="w-full h-full min-h-full p-6 resize-none outline-none border-none className="w-full h-full p-6 resize-none outline-none border-none
bg-transparent font-mono text-sm leading-relaxed bg-transparent font-mono text-sm leading-relaxed
text-gray-800 dark:text-gray-200 text-gray-800 dark:text-gray-200
placeholder-gray-400 dark:placeholder-gray-600 placeholder-gray-400 dark:placeholder-gray-600
disabled:opacity-50 disabled:cursor-not-allowed" disabled:opacity-50 disabled:cursor-not-allowed
overflow-auto"
spellCheck={false} spellCheck={false}
/> />
</div> </div>