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:
Jure
2026-03-25 11:11:01 +01:00
parent 0604b5b452
commit 5b94162ce1
5 changed files with 54 additions and 19 deletions

View 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;
}