+1

components/Blocks/BaseTextareaBlock.tsx

reviewed

··· 15 15 return ( 16 16 <AsyncValueAutosizeTextarea 17 17 {...passDownProps} 18 18 + noWrap 18 19 onKeyDown={(e) => { 19 20 if (e.key === "ArrowUp") { 20 21 let selection = e.currentTarget.selectionStart;

+6 -4

components/utils/AutosizeTextarea.tsx

reviewed

··· 10 10 export type AutosizeTextareaProps = React.DetailedHTMLProps< 11 11 React.TextareaHTMLAttributes<HTMLTextAreaElement>, 12 12 HTMLTextAreaElement 13 13 - >; 13 13 + > & { noWrap?: boolean }; 14 14 export const AutosizeTextarea = forwardRef< 15 15 HTMLTextAreaElement, 16 16 AutosizeTextareaProps 17 17 - >((props: AutosizeTextareaProps, ref) => { 17 17 + >((props: AutosizeTextareaProps & { noWrap?: boolean }, ref) => { 18 18 let textarea = useRef<HTMLTextAreaElement | null>(null); 19 19 + let { noWrap, ...rest } = props; 19 20 useImperativeHandle(ref, () => textarea.current as HTMLTextAreaElement); 20 21 22 22 + console.log({ noWrap }); 21 23 return ( 22 24 <div 23 23 - className={`${styles["grow-wrap"]} ${props.className} `} 25 25 + className={`${styles["grow-wrap"]} ${props.className} ${noWrap ? styles["no-wrap"] : ""}`} 24 26 data-replicated-value={props.value} 25 27 style={props.style} 26 28 > 27 29 <textarea 28 30 rows={1} 29 29 - {...props} 31 31 + {...rest} 30 32 ref={textarea} 31 33 className={`placeholder:text-tertiary bg-transparent ${props.className}`} 32 34 />

+5 -1

components/utils/textarea-styles.module.css

reviewed

··· 11 11 content: attr(data-replicated-value) " "; 12 12 13 13 /* This is how textarea text behaves */ 14 14 - white-space: pre; 14 14 + white-space: pre-wrap; 15 15 16 16 /* Hidden from view, clicks, and screen readers */ 17 17 visibility: hidden; ··· 36 36 .grow-wrap > textarea:focus { 37 37 outline: none; 38 38 } 39 39 + 40 40 + .no-wrap::after { 41 41 + white-space: pre !important; 42 42 + }