postform autosize

packages/frontend/package.json

@@ -31,6 +31,7 @@
 		"@vue/compiler-sfc": "3.4.37",
 		"aiscript-vscode": "github:aiscript-dev/aiscript-vscode#v0.1.11",
 		"astring": "1.8.6",
+		"autosize": "^6.0.1",
 		"broadcast-channel": "7.0.0",
 		"buraha": "0.0.1",
 		"canvas-confetti": "1.9.3",
@@ -97,6 +98,7 @@
 		"@storybook/vue3": "8.2.6",
 		"@storybook/vue3-vite": "8.1.11",
 		"@testing-library/vue": "8.1.0",
+		"@types/autosize": "^4.0.3",
 		"@types/escape-regexp": "0.0.3",
 		"@types/estree": "1.0.5",
 		"@types/matter-js": "0.19.7",

packages/frontend/src/components/MkPostForm.vue

@@ -105,6 +105,7 @@ import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import { toASCII } from 'punycode/';
+import autosize from 'autosize';
 import MkNoteSimple from '@/components/MkNoteSimple.vue';
 import MkNotePreview from '@/components/MkNotePreview.vue';
 import XPostFormAttaches from '@/components/MkPostFormAttaches.vue';
@@ -568,16 +569,22 @@ function clear() {
 	files.value = [];
 	poll.value = null;
 	quoteId.value = null;
+	
+	nextTick(() => textareaEl.value && autosize.update(textareaEl.value));
 }
 
 function onKeydown(ev: KeyboardEvent) {
 	if (ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey) && canPost.value) post();
 
 	if (ev.key === 'Escape') emit('esc');
+
+	nextTick(() => textareaEl.value && autosize.update(textareaEl.value));
 }
 
 function onCompositionUpdate(ev: CompositionEvent) {
 	imeText.value = ev.data;
+
+	nextTick(() => textareaEl.value && autosize.update(textareaEl.value));
 }
 
 function onCompositionEnd(ev: CompositionEvent) {
@@ -632,6 +639,7 @@ async function onPaste(ev: ClipboardEvent) {
 			const file = new File([paste], `${fileName}.txt`, { type: 'text/plain' });
 			upload(file, `${fileName}.txt`);
 		});
+		nextTick(() => textareaEl.value && autosize.update(textareaEl.value));
 	}
 }
 
@@ -1040,6 +1048,7 @@ onMounted(() => {
 		}
 
 		nextTick(() => watchForDraft());
+		nextTick(() => textareaEl.value && autosize(textareaEl.value));
 	});
 });
 
@@ -1056,6 +1065,7 @@ defineExpose({
 	&.modal {
 		width: 100%;
 		max-width: 520px;
+		overflow-y: auto;
 	}
 }
 

pnpm-lock.yaml

@@ -730,6 +730,9 @@ importers:
       astring:
         specifier: 1.8.6
         version: 1.8.6
+      autosize:
+        specifier: ^6.0.1
+        version: 6.0.1
       broadcast-channel:
         specifier: 7.0.0
         version: 7.0.0
@@ -923,6 +926,9 @@ importers:
       '@testing-library/vue':
         specifier: 8.1.0
         version: 8.1.0(@vue/compiler-sfc@3.4.37)(@vue/server-renderer@3.4.37(vue@3.4.37(typescript@5.5.4)))(vue@3.4.37(typescript@5.5.4))
+      '@types/autosize':
+        specifier: ^4.0.3
+        version: 4.0.3
       '@types/escape-regexp':
         specifier: 0.0.3
         version: 0.0.3
@@ -5022,6 +5028,9 @@ packages:
   '@types/aria-query@5.0.1':
     resolution: {integrity: sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==}
 
+  '@types/autosize@4.0.3':
+    resolution: {integrity: sha512-o0ZyU3ePp3+KRbhHsY4ogjc+ZQWgVN5h6j8BHW5RII4cFKi6PEKK9QPAcphJVkD0dGpyFnD3VRR0WMvHVjCv9w==}
+
   '@types/babel__core@7.20.0':
     resolution: {integrity: sha512-+n8dL/9GWblDO0iU6eZAwEIJVr5DWigtle+Q6HLOrh/pdbXOhOtqzq8VPPE2zvNJzSKY4vH/z3iT3tn0A3ypiQ==}
 
@@ -6000,6 +6009,9 @@ packages:
     resolution: {integrity: sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==}
     engines: {node: '>=8.0.0'}
 
+  autosize@6.0.1:
+    resolution: {integrity: sha512-f86EjiUKE6Xvczc4ioP1JBlWG7FKrE13qe/DxBCpe8GCipCq2nFw73aO8QEBKHfSbYGDN5eB9jXWKen7tspDqQ==}
+
   available-typed-arrays@1.0.5:
     resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
     engines: {node: '>= 0.4'}
@@ -11380,7 +11392,6 @@ packages:
 
   ts-case-convert@2.0.2:
     resolution: {integrity: sha512-vdKfx1VAdpvEBOBv5OpVu5ZFqRg9HdTI4sYt6qqMeICBeNyXvitrarCnFWNDAki51IKwCyx+ZssY46Q9jH5otA==}
-    bundledDependencies: []
 
   ts-dedent@2.2.0:
     resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
@@ -16857,6 +16868,8 @@ snapshots:
 
   '@types/aria-query@5.0.1': {}
 
+  '@types/autosize@4.0.3': {}
+
   '@types/babel__core@7.20.0':
     dependencies:
       '@babel/parser': 7.24.7
@@ -18006,6 +18019,8 @@ snapshots:
 
   atomic-sleep@1.0.0: {}
 
+  autosize@6.0.1: {}
+
   available-typed-arrays@1.0.5: {}
 
   avvio@8.3.0: