diff --git a/.eslintrc.js b/.eslintrc.js index 693c92b..08dd486 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -64,6 +64,7 @@ module.exports = { ], tailwindcss: { whitelist: [ + 'h-fill-available', 'form-input', // rabbit parts 'nostr-textnote', diff --git a/src/components/NotePostForm.tsx b/src/components/NotePostForm.tsx index 9750711..edccc8b 100644 --- a/src/components/NotePostForm.tsx +++ b/src/components/NotePostForm.tsx @@ -75,6 +75,12 @@ const NotePostForm: Component = (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 = (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 = (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 = (props) => { }); }; + const handleInput: JSX.EventHandler = (ev) => { + setText(ev.currentTarget.value); + resizeTextArea(); + }; + const handleSubmit: JSX.EventHandler = (ev) => { ev.preventDefault(); submit(); @@ -140,6 +155,7 @@ const NotePostForm: Component = (props) => { const handleDrop: JSX.EventHandler = (ev) => { ev.preventDefault(); + if (uploadFilesMutation.isLoading) return; const files = [...(ev?.dataTransfer?.files ?? [])]; uploadFilesMutation.mutate(files); }; @@ -186,7 +202,7 @@ const NotePostForm: Component = (props) => { class="rounded border-none" rows={4} placeholder={placeholder(mode())} - onInput={(ev) => setText(ev.currentTarget.value)} + onInput={handleInput} onKeyDown={handleKeyDown} onDragOver={handleDragOver} onDrop={handleDrop} diff --git a/src/index.css b/src/index.css index 28f59af..c70c365 100644 --- a/src/index.css +++ b/src/index.css @@ -23,3 +23,7 @@ code { .link { @apply underline text-blue-500; } + +.h-fill-available { + height: -webkit-fill-available; +} diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 4a18ca2..09f47d1 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -135,7 +135,7 @@ const Home: Component = () => { }); return ( -
+