fix(frontend): 캡션이 512자를 초과하면 초과한 내용이 잘릴 수 있음 (#518)

  - 캡션을 512자를 초과해서 작성하면 캡션 내용을 저장하기 전에 경고를 표시합니다.

CHANGELOG_CHERRYPICK.md

@@ -52,6 +52,8 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2024xx](CHANGE
 - Fix: 특정 조건에서 노트 동작 버튼을 비활성화 해도 버튼이 사라지지 않음
   - 노트에 답글을 작성할 수 없을 때
   - 노트를 리노트할 수 없을 때
+- Fix: 캡션이 512자를 초과하면 초과한 내용이 잘릴 수 있음 (kokonect-link/cherrypick#518)
+  - 캡션을 512자를 초과해서 작성하면 캡션 내용을 저장하기 전에 경고를 표시합니다.
 
 ---
 

locales/en-US.yml

@@ -1,5 +1,7 @@
 ---
 _lang_: "English"
+invalidTextLengthError: "Too many characters entered"
+invalidTextLengthDescription: "The number of characters is limited to {limitValue} characters. The current number of characters entered is {value} characters."
 autoLoadMoreReplies: "Show more automatically replies"
 autoLoadMoreConversation: "Show more conversation automatically"
 useAutoTranslate: "Automatic translation"

locales/index.d.ts

@@ -13,6 +13,14 @@ export interface Locale extends ILocale {
      * 日本語
      */
     "_lang_": string;
+    /**
+     * 入力された文字数が多すぎます
+     */
+    "invalidTextLengthError": string;
+    /**
+     * 文字数が{limitValue}文字に制限されています。現在入力された文字数は{value}文字です。
+     */
+    "invalidTextLengthDescription": ParameterizedString<"limitValue" | "value">;
     /**
      * 返信を自動でもっと見る
      */

locales/ja-JP.yml

@@ -1,5 +1,7 @@
 _lang_: "日本語"
 
+invalidTextLengthError: "入力された文字数が多すぎます"
+invalidTextLengthDescription: "文字数が{limitValue}文字に制限されています。現在入力された文字数は{value}文字です。"
 autoLoadMoreReplies: "返信を自動でもっと見る"
 autoLoadMoreConversation: "会話を自動でもっと見る"
 useAutoTranslate: "自動翻訳"

locales/ko-KR.yml

@@ -1,5 +1,7 @@
 ---
 _lang_: "한국어"
+invalidTextLengthError: "입력된 문자수가 너무 많아요"
+invalidTextLengthDescription: "문자수가 {limitValue}자로 제한되어 있어요. 현재 입력된 문자수는 {value}자예요."
 autoLoadMoreReplies: "답글을 자동으로 더 보기"
 autoLoadMoreConversation: "대화를 자동으로 더 보기"
 useAutoTranslate: "자동 번역"

packages/frontend/src/components/MkFileCaptionEditWindow.vue

@@ -27,6 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { shallowRef, ref } from 'vue';
 import * as Misskey from 'cherrypick-js';
+import * as os from '@/os.js';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
@@ -47,7 +48,16 @@ const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
 const caption = ref(props.default);
 
 async function ok() {
-	emit('done', caption.value);
-	dialog.value?.close();
+	if (caption.value.length > 512) {
+		await os.alert({
+			type: 'error',
+			title: i18n.ts.invalidTextLengthError,
+			text: i18n.tsx.invalidTextLengthDescription({ limitValue: '512', value: caption.value.length }),
+		});
+		return;
+	}
+
+	await emit('done', caption.value);
+	await dialog.value?.close();
 }
 </script>