fix(editor): fix editor scrolling to prevent page scroll
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user