a tool for shared writing and social publishing
add autoresize textarea
+64
-2
+2
-2
components/Pages/PublicationMetadata.tsx
+2
-2
components/Pages/PublicationMetadata.tsx
···
6
6
import { updateLeafletDraftMetadata } from "actions/publications/updateLeafletDraftMetadata";
7
7
import { useReplicache } from "src/replicache";
8
8
import { useIdentityData } from "components/IdentityProvider";
9
+
import { AutosizeTextarea } from "components/utils/AutosizeTextarea";
9
10
export const PublicationMetadata = ({
10
11
cardBorderHidden,
11
12
}: {
···
58
59
}}
59
60
placeholder="Untitled"
60
61
/>
61
-
<textarea
62
-
rows={2}
62
+
<AutosizeTextarea
63
63
placeholder="add an optional description..."
64
64
className="italic text-secondary outline-none bg-transparent"
65
65
value={descriptionState}
+24
components/utils/AutosizeTextarea.tsx
+24
components/utils/AutosizeTextarea.tsx
···
1
+
import { forwardRef, useImperativeHandle, useRef } from "react";
2
+
import styles from "./textarea-styles.module.css";
3
+
4
+
type Props = React.DetailedHTMLProps<
5
+
React.TextareaHTMLAttributes<HTMLTextAreaElement>,
6
+
HTMLTextAreaElement
7
+
>;
8
+
export const AutosizeTextarea = forwardRef<HTMLTextAreaElement, Props>(
9
+
(props: Props, ref) => {
10
+
let textarea = useRef<HTMLTextAreaElement | null>(null);
11
+
useImperativeHandle(ref, () => textarea.current as HTMLTextAreaElement);
12
+
13
+
return (
14
+
<div
15
+
className={`${styles["grow-wrap"]} ${props.className}`}
16
+
data-replicated-value={props.value}
17
+
style={props.style}
18
+
>
19
+
<textarea rows={1} {...props} ref={textarea} />
20
+
</div>
21
+
);
22
+
},
23
+
);
24
+
AutosizeTextarea.displayName = "Textarea";
+38
components/utils/textarea-styles.module.css
+38
components/utils/textarea-styles.module.css
···
1
+
.grow-wrap {
2
+
/* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
3
+
display: grid;
4
+
position: relative;
5
+
max-width: 100%;
6
+
overflow-wrap: anywhere; /* limit width in chrome */
7
+
}
8
+
9
+
.grow-wrap::after {
10
+
/* Note the weird space! Needed to preventy jumpy behavior */
11
+
content: attr(data-replicated-value) " ";
12
+
13
+
/* This is how textarea text behaves */
14
+
white-space: pre-wrap;
15
+
16
+
/* Hidden from view, clicks, and screen readers */
17
+
visibility: hidden;
18
+
}
19
+
.grow-wrap > textarea {
20
+
/* You could leave this, but after a user resizes, then it ruins the auto sizing */
21
+
resize: none;
22
+
23
+
/* Firefox shows scrollbar on growth, you can hide like this. */
24
+
overflow: hidden;
25
+
}
26
+
.grow-wrap > textarea,
27
+
.grow-wrap::after {
28
+
padding: 0;
29
+
width: 100%;
30
+
font: inherit;
31
+
border: none;
32
+
/* Place on top of each other */
33
+
grid-area: 1 / 1 / 2 / 2;
34
+
}
35
+
36
+
.grow-wrap > textarea:focus {
37
+
outline: none;
38
+
}