leaflet.pub
a tool for shared writing and social publishing
fix textarea wrapping issues
awarm.space
+1
components/Blocks/BaseTextareaBlock.tsx
+1
components/Blocks/BaseTextareaBlock.tsx
+6
-4
components/utils/AutosizeTextarea.tsx
+6
-4
components/utils/AutosizeTextarea.tsx
···
10
10
export type AutosizeTextareaProps = React.DetailedHTMLProps<
11
11
React.TextareaHTMLAttributes<HTMLTextAreaElement>,
12
12
HTMLTextAreaElement
13
-
>;
13
+
> & { noWrap?: boolean };
14
14
export const AutosizeTextarea = forwardRef<
15
15
HTMLTextAreaElement,
16
16
AutosizeTextareaProps
17
-
>((props: AutosizeTextareaProps, ref) => {
17
+
>((props: AutosizeTextareaProps & { noWrap?: boolean }, ref) => {
18
18
let textarea = useRef<HTMLTextAreaElement | null>(null);
19
+
let { noWrap, ...rest } = props;
19
20
useImperativeHandle(ref, () => textarea.current as HTMLTextAreaElement);
20
21
22
+
console.log({ noWrap });
21
23
return (
22
24
<div
23
-
className={`${styles["grow-wrap"]} ${props.className} `}
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
-
{...props}
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
+5
-1
components/utils/textarea-styles.module.css
···
11
11
content: attr(data-replicated-value) " ";
12
12
13
13
/* This is how textarea text behaves */
14
-
white-space: pre;
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
+
40
+
.no-wrap::after {
41
+
white-space: pre !important;
42
+
}