fix: editor content being hidden under keyboard on mobile (#1410)

packages/web/src/javascripts/Components/NoteView/AutoresizingTextarea.tsx

@@ -0,0 +1,30 @@
+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