-
-
-
+
@@ -110,7 +110,7 @@ import * as Misskey from 'misskey-js';
import insertTextAtCursor from 'insert-text-at-cursor';
import { toASCII } from 'punycode.js';
import { host, url } from '@@/js/config.js';
-import MkUploaderItems from './MkUploaderItems.vue';
+import type { Attach } from './MkPostFormAttaches.vue';
import type { ShallowRef } from 'vue';
import type { PostFormProps } from '@/types/post-form.js';
import type { MenuItem } from '@/types/menu.js';
@@ -127,7 +127,7 @@ import { formatTimeString } from '@/utility/format-time-string.js';
import { Autocomplete } from '@/utility/autocomplete.js';
import * as os from '@/os.js';
import { misskeyApi } from '@/utility/misskey-api.js';
-import { chooseDriveFile } from '@/utility/drive.js';
+import { chooseDriveFile, chooseFileFromUrl } from '@/utility/drive.js';
import { store } from '@/store.js';
import MkInfo from '@/components/MkInfo.vue';
import { i18n } from '@/i18n.js';
@@ -213,11 +213,6 @@ const uploader = useUploader({
multiple: true,
});
-uploader.events.on('itemUploaded', ctx => {
- files.value.push(ctx.item.uploaded!);
- uploader.removeItem(ctx.item);
-});
-
const draftKey = computed((): string => {
let key = props.channel ? `channel:${props.channel.id}` : '';
@@ -274,26 +269,34 @@ const cwTextLength = computed((): number => {
const maxCwTextLength = 100;
+/**
+ * Computes whether the post data meets the required conditions for submission or enabling the post button.
+ *
+ * @param cond - Specifies the context in which the condition is being checked ('button' for UI button state, 'req' for request validation).
+ */
+function computePostDataCondition(cond: 'button' | 'req') {
+ return !uploader.uploading.value && (
+ 1 <= textLength.value ||
+ 1 <= files.value.length ||
+ (cond === 'button' ? (1 <= uploader.items.value.length) : false) ||
+ poll.value != null ||
+ renoteTargetNote.value != null ||
+ quoteId.value != null
+ ) &&
+ (textLength.value <= maxTextLength.value) &&
+ (
+ useCw.value ?
+ (
+ cw.value != null && cw.value.trim() !== '' &&
+ cwTextLength.value <= maxCwTextLength
+ ) : true
+ ) &&
+ (files.value.length <= 16) &&
+ (!poll.value || poll.value.choices.length >= 2);
+}
+
const canPost = computed((): boolean => {
- return !props.mock && !posting.value && !posted.value && !uploader.uploading.value && (uploader.items.value.length === 0 || uploader.readyForUpload.value) &&
- (
- 1 <= textLength.value ||
- 1 <= files.value.length ||
- 1 <= uploader.items.value.length ||
- poll.value != null ||
- renoteTargetNote.value != null ||
- quoteId.value != null
- ) &&
- (textLength.value <= maxTextLength.value) &&
- (
- useCw.value ?
- (
- cw.value != null && cw.value.trim() !== '' &&
- cwTextLength.value <= maxCwTextLength
- ) : true
- ) &&
- (files.value.length <= 16) &&
- (!poll.value || poll.value.choices.length >= 2);
+ return !props.mock && !posting.value && !posted.value && !uploader.uploading.value && (uploader.items.value.length === 0 || uploader.readyForUpload.value) && computePostDataCondition('button');
});
const withHashtags = computed(store.makeGetterSetter('postFormWithHashtags'));
@@ -452,6 +455,29 @@ function focus() {
}
}
+function chooseFileFrom(ev: MouseEvent) {
+ const anchorElement = ev.currentTarget ?? ev.target;
+ os.popupMenu([{
+ text: i18n.ts.attachFile,
+ type: 'label',
+ }, {
+ text: i18n.ts.upload,
+ icon: 'ti ti-upload',
+ action: () => chooseFileFromPc(ev),
+ }, {
+ text: i18n.ts.fromDrive,
+ icon: 'ti ti-cloud',
+ action: () => chooseFileFromDrive(ev),
+ }, {
+ text: i18n.ts.fromUrl,
+ icon: 'ti ti-link',
+ action: () => chooseFileFromUrl().then(file => {
+ attachOrder.set(file.id, files.value.length);
+ files.value.push(file);
+ }),
+ }], anchorElement);
+}
+
function chooseFileFromPc(ev: MouseEvent) {
if (props.mock) return;
@@ -469,21 +495,85 @@ function chooseFileFromDrive(ev: MouseEvent) {
});
}
-function detachFile(id) {
- files.value = files.value.filter(x => x.id !== id);
+uploader.events.on('itemUploaded', ({ item }) => {
+ if (!item.uploaded) return;
+ const attachesOrder = attaches.value.findIndex(f => f.id === item.id);
+ const attachOrderOrder = attachOrder.get(item.id);
+ if (attachesOrder >= 0 || attachOrderOrder != null) {
+ const index = attachesOrder >= 0 ? attachOrderOrder ?? attachesOrder : attachOrderOrder ?? attaches.value.length;
+ attachOrder.delete(item.id);
+ attachOrder.set(item.uploaded.id, index);
+ }
+ files.value.push(item.uploaded);
+ uploader.removeItem(item);
+});
+
+function detachAttaches(id: string) {
+ const attach = attaches.value.find(a => a.id === id);
+ if (!attach) return;
+ attachOrder.delete(attach.id);
+ if (attach.type === 'driveFile') {
+ files.value = files.value.filter(f => f.id !== attach.id);
+ } else if (attach.type === 'uploaderItem') {
+ uploader.removeItem(attach.file);
+ }
}
-function updateFileSensitive(file, sensitive) {
+function handleUploaderItemAbort(id: string) {
+ if (props.mock) return;
+ const item = uploader.items.value.find(i => i.id === id);
+ if (!item) return;
+ if (posting.value && attaches.value.length > 1) {
+ // このアップロードが止まってもファイルがなくならない場合はアイテムを削除して投稿を続行
+ detachAttaches(id);
+ }
+}
+
+function updateFileSensitive(file: Misskey.entities.DriveFile, sensitive: boolean) {
if (props.mock) {
emit('fileChangeSensitive', file.id, sensitive);
}
files.value[files.value.findIndex(x => x.id === file.id)].isSensitive = sensitive;
}
-function updateFileName(file, name) {
+function updateFileName(file: Misskey.entities.DriveFile, name: string) {
files.value[files.value.findIndex(x => x.id === file.id)].name = name;
}
+const attachOrder = new Map
();
+
+const attaches = computed({
+ get: () => {
+ const _attaches = [
+ ...files.value.map(f => ({ id: f.id, type: 'driveFile' as const, file: f })),
+ ...uploader.items.value.filter(i => i.uploaded == null).map(i => ({ id: i.id, type: 'uploaderItem' as const, file: i })),
+ ];
+ _attaches.forEach((a, i) => {
+ if (!attachOrder.has(a.id)) {
+ attachOrder.set(a.id, i);
+ }
+ });
+ return _attaches.sort((a, b) => {
+ const aOrder = attachOrder.get(a.id) ?? 0;
+ const bOrder = attachOrder.get(b.id) ?? 0;
+ return aOrder - bOrder;
+ });
+ },
+ set: (newAttaches: Attach[]) => {
+ attachOrder.clear();
+ newAttaches.forEach((a, i) => {
+ attachOrder.set(a.id, i);
+ });
+ files.value = newAttaches.filter(a => a.type === 'driveFile').map(a => a.file);
+ uploader.items.value = newAttaches.filter(a => a.type === 'uploaderItem').map(a => a.file);
+ },
+});
+
+function handleShowUploaderMenu(item: UploaderItem, ev: MouseEvent | KeyboardEvent) {
+ if (props.mock) return;
+ os.popupMenu(uploader.getMenu(item), ev.currentTarget ?? ev.target);
+}
+
function setVisibility() {
if (props.channel) {
visibility.value = 'public';
@@ -875,13 +965,21 @@ async function post(ev?: MouseEvent) {
}
}
+ // ここからは投稿の中身を触らせない
+ posting.value = true;
+
if (uploader.items.value.some(x => x.uploaded == null)) {
await uploadFiles();
}
let postData = {
text: text.value === '' ? null : text.value,
- fileIds: files.value.length > 0 ? files.value.map(f => f.id) : undefined,
+ fileIds: files.value.length > 0 ? files.value.map(f => f.id).sort((a, b) => {
+ // itemUploadedイベントではfilesの順番を入れ替えないため、ここでもソートして確実に順番を整える
+ const aOrder = attachOrder.get(a) ?? 0;
+ const bOrder = attachOrder.get(b) ?? 0;
+ return aOrder - bOrder;
+ }) : undefined,
replyId: props.reply ? props.reply.id : undefined,
renoteId: renoteTargetNote.value ? renoteTargetNote.value.id : quoteId.value ? quoteId.value : undefined,
channelId: props.channel ? props.channel.id : undefined,
@@ -920,6 +1018,13 @@ async function post(ev?: MouseEvent) {
}
}
+ // アップロードキャンセルでファイルの総数が変わるなどのコンディション変化が
+ // あるため、canPostを再評価する
+ if (!computePostDataCondition('req')) {
+ posting.value = false;
+ return;
+ }
+
let token: string | undefined = undefined;
if (postAccount.value) {
@@ -927,7 +1032,6 @@ async function post(ev?: MouseEvent) {
token = storedAccounts.find(x => x.id === postAccount.value?.id)?.token;
}
- posting.value = true;
misskeyApi('notes/create', postData, token).then((res) => {
if (props.freezeAfterPosted) {
posted.value = true;
diff --git a/packages/frontend/src/components/MkPostFormAttaches.vue b/packages/frontend/src/components/MkPostFormAttaches.vue
index f429db94df..7cd26faa2d 100644
--- a/packages/frontend/src/components/MkPostFormAttaches.vue
+++ b/packages/frontend/src/components/MkPostFormAttaches.vue
@@ -5,18 +5,49 @@ SPDX-License-Identifier: AGPL-3.0-only
-
+
-
-
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
@@ -32,11 +63,26 @@ SPDX-License-Identifier: AGPL-3.0-only
![]()
-
+
@@ -287,11 +287,14 @@ function showFileMenu(attach: Attach, ev: MouseEvent | KeyboardEvent): void {
margin-right: 4px;
border-radius: 8px;
overflow: hidden;
- cursor: move;
&:focus-visible {
outline-offset: 4px;
}
+
+ &.dragEnabled {
+ cursor: move;
+ }
}
.thumbnail {
@@ -405,6 +408,7 @@ function showFileMenu(attach: Attach, ev: MouseEvent | KeyboardEvent): void {
color: #fff;
opacity: 0;
transition: opacity 0.2s ease;
+ cursor: pointer;
}
.uploadProgressWrapper:global(.uploading) {
From 46915d2ae3c67fc30fd937c5916de9ef858f8c05 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 7 Jun 2025 16:43:57 +0900
Subject: [PATCH 4/5] fix: better post-posting handling
---
packages/frontend/src/components/MkPostForm.vue | 1 +
1 file changed, 1 insertion(+)
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index b5f0d25ae5..ed06b62c2e 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -1043,6 +1043,7 @@ async function post(ev?: MouseEvent) {
nextTick(() => {
deleteDraft();
+ attachOrder.clear();
emit('posted');
if (postData.text && postData.text !== '') {
const hashtags_ = mfm.parse(postData.text).map(x => x.type === 'hashtag' && x.props.hashtag).filter(x => x) as string[];
From 6d58e2c3e53f35526bc60f5ddecbe33e3d1da18b Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 7 Jun 2025 16:46:53 +0900
Subject: [PATCH 5/5] fix: better v-if handling
---
packages/frontend/src/components/MkPostFormAttaches.vue | 7 ++-----
1 file changed, 2 insertions(+), 5 deletions(-)
diff --git a/packages/frontend/src/components/MkPostFormAttaches.vue b/packages/frontend/src/components/MkPostFormAttaches.vue
index cafa3d53c4..e1d79a79e1 100644
--- a/packages/frontend/src/components/MkPostFormAttaches.vue
+++ b/packages/frontend/src/components/MkPostFormAttaches.vue
@@ -25,14 +25,11 @@ SPDX-License-Identifier: AGPL-3.0-only
@contextmenu.prevent="showFileMenu(element, $event)"
>
-
+
![]()
-
-
-
-