feat: auto resize text input

.eslintrc.js

@@ -64,6 +64,7 @@ module.exports = {
     ],
     tailwindcss: {
       whitelist: [
+        'h-fill-available',
         'form-input',
         // rabbit parts
         'nostr-textnote',

src/components/NotePostForm.tsx

@@ -75,6 +75,12 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
     },
   });
 
+  const resizeTextArea = () => {
+    if (textAreaRef == null) return;
+    textAreaRef.style.height = 'auto';
+    textAreaRef.style.height = `${textAreaRef.scrollHeight}px`;
+  };
+
   const uploadFilesMutation = createMutation({
     mutationKey: ['uploadFiles'],
     mutationFn: (files: File[]) => {
@@ -84,6 +90,7 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
             if (result.status === 'fulfilled') {
               console.log('succeeded to upload', result);
               setText((current) => `${current} ${result.value.imageUrl}`);
+              resizeTextArea();
             } else {
               console.error('failed to upload', result);
             }
@@ -102,6 +109,9 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
   };
 
   const submit = () => {
+    if (text().length === 0) return;
+    if (publishTextNoteMutation.isLoading) return;
+
     const pubkey = getPubkey();
     if (pubkey == null) {
       console.error('pubkey is not available');
@@ -117,6 +127,11 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
     });
   };
 
+  const handleInput: JSX.EventHandler<HTMLTextAreaElement, InputEvent> = (ev) => {
+    setText(ev.currentTarget.value);
+    resizeTextArea();
+  };
+
   const handleSubmit: JSX.EventHandler<HTMLFormElement, Event> = (ev) => {
     ev.preventDefault();
     submit();
@@ -140,6 +155,7 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
 
   const handleDrop: JSX.EventHandler<HTMLTextAreaElement, DragEvent> = (ev) => {
     ev.preventDefault();
+    if (uploadFilesMutation.isLoading) return;
     const files = [...(ev?.dataTransfer?.files ?? [])];
     uploadFilesMutation.mutate(files);
   };
@@ -186,7 +202,7 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
           class="rounded border-none"
           rows={4}
           placeholder={placeholder(mode())}
-          onInput={(ev) => setText(ev.currentTarget.value)}
+          onInput={handleInput}
           onKeyDown={handleKeyDown}
           onDragOver={handleDragOver}
           onDrop={handleDrop}

src/index.css

@@ -23,3 +23,7 @@ code {
 .link {
   @apply underline text-blue-500;
 }
+
+.h-fill-available {
+  height: -webkit-fill-available;
+}

src/pages/Home.tsx

@@ -135,7 +135,7 @@ const Home: Component = () => {
   });
 
   return (
-    <div class="flex h-screen w-screen flex-row overflow-hidden">
+    <div class="h-fill-available flex h-screen w-screen flex-row overflow-hidden">
       <SideBar />
       <div class="flex h-full flex-row overflow-y-hidden overflow-x-scroll">
         <Column name="ホーム" columnIndex={1} width="widest">