mirror of
https://github.com/hoornet/vega.git
synced 2026-05-07 12:49:13 -07:00
Auto-expanding textareas and proper article comment box
Add useAutoResize hook that grows textareas to fit content up to a max. Applied to compose box, inline replies, thread replies, and article comments. Article comment input changed from single-line input to a multi-row textarea with Shift+Enter support.
This commit is contained in:
24
src/hooks/useAutoResize.ts
Normal file
24
src/hooks/useAutoResize.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import { useCallback } from "react";
|
||||
|
||||
/**
|
||||
* Auto-resize a textarea to fit its content, up to maxRows.
|
||||
* Returns an onChange handler that should be spread onto the textarea.
|
||||
* Usage: <textarea onChange={autoResize} ... />
|
||||
*/
|
||||
export function useAutoResize(minRows = 2, maxRows = 10) {
|
||||
const autoResize = useCallback(
|
||||
(e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const ta = e.target;
|
||||
// Reset to min height to measure scrollHeight accurately
|
||||
ta.style.height = "auto";
|
||||
const lineHeight = parseInt(getComputedStyle(ta).lineHeight) || 18;
|
||||
const minHeight = lineHeight * minRows;
|
||||
const maxHeight = lineHeight * maxRows;
|
||||
const newHeight = Math.min(Math.max(ta.scrollHeight, minHeight), maxHeight);
|
||||
ta.style.height = `${newHeight}px`;
|
||||
},
|
||||
[minRows, maxRows],
|
||||
);
|
||||
|
||||
return autoResize;
|
||||
}
|
||||
Reference in New Issue
Block a user