31 lines
1.0 KiB
TypeScript
31 lines
1.0 KiB
TypeScript
import { classNames } from '@/Utils/ConcatenateClassNames'
|
|
import { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react'
|
|
|
|
// Based on: https://css-tricks.com/auto-growing-inputs-textareas/#aa-other-ideas
|
|
const AutoresizingNoteViewTextarea = forwardRef(
|
|
({ value, ...textareaProps }: ComponentPropsWithoutRef<'textarea'>, ref: ForwardedRef<HTMLTextAreaElement>) => {
|
|
return (
|
|
<div className="relative inline-grid min-h-[75vh] w-full grid-rows-1 items-stretch md:block md:flex-grow">
|
|
<pre
|
|
id="textarea-mobile-resizer"
|
|
className={classNames(
|
|
'editable font-editor break-word whitespace-pre-wrap',
|
|
'invisible [grid-area:1_/_1] md:hidden',
|
|
)}
|
|
aria-hidden
|
|
>
|
|
{value}{' '}
|
|
</pre>
|
|
<textarea
|
|
value={value}
|
|
className="editable font-editor [grid-area:1_/_1] md:h-full md:min-h-0"
|
|
{...textareaProps}
|
|
ref={ref}
|
|
></textarea>
|
|
</div>
|
|
)
|
|
},
|
|
)
|
|
|
|
export default AutoresizingNoteViewTextarea
|