diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 67be7f0598..1cd743caf2 100644 --- a/packages/frontend/package.json +++ b/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", diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue index 039393887d..02ffa9c669 100644 --- a/packages/frontend/src/components/MkPostForm.vue +++ b/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; } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e3240f3108..3beef3806d 100644 --- a/pnpm-lock.yaml +++ b/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: