fix(frontend): mfmFunctionPickerを使用して挿入する際のハンドリングを改善 (#17018)

* fix(frontend): mfmFunctionPickerを使用して絵文字を挿入する際のハンドリングを改善

* fix

* Update MkPostForm.vue

* Update Changelog

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

1 files changed, 10 insertions, 38 deletions

diff --git a/packages/frontend/src/utility/mfm-function-picker.ts b/packages/frontend/src/utility/mfm-function-picker.ts
index 09802d580b..5580435db1 100644
--- a/packages/frontend/src/utility/mfm-function-picker.ts
+++ b/packages/frontend/src/utility/mfm-function-picker.ts
@@ -3,55 +3,27 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { nextTick } from 'vue';
 import { MFM_TAGS } from '@@/js/const.js';
-import type { Ref } from 'vue';
-import type { MenuItem } from '@/types/menu.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 
 /**
  * MFMの装飾のリストを表示する
  */
-export function mfmFunctionPicker(anchorElement: HTMLElement | EventTarget | null, textArea: HTMLInputElement | HTMLTextAreaElement, textRef: Ref<string>) {
+export function mfmFunctionPicker(anchorElement: HTMLElement | EventTarget | null, onChosen: (tag: string) => void, onClosed?: () => void) {
 	os.popupMenu([{
 		text: i18n.ts.addMfmFunction,
 		type: 'label',
-	}, ...getFunctionList(textArea, textRef)], anchorElement);
-}
-
-function getFunctionList(textArea: HTMLInputElement | HTMLTextAreaElement, textRef: Ref<string>): MenuItem[] {
-	return MFM_TAGS.map(tag => ({
+	}, ...MFM_TAGS.map(tag => ({
 		text: tag,
 		icon: 'ti ti-icons',
-		action: () => add(textArea, textRef, tag),
-	}));
-}
-
-function add(textArea: HTMLInputElement | HTMLTextAreaElement, textRef: Ref<string>, type: string) {
-	const caretStart: number = textArea.selectionStart as number;
-	const caretEnd: number = textArea.selectionEnd as number;
-
-	MFM_TAGS.forEach(tag => {
-		if (type === tag) {
-			if (caretStart === caretEnd) {
-				// 単純にFunctionを追加
-				const trimmedText = `${textRef.value.substring(0, caretStart)}$[${type} ]${textRef.value.substring(caretEnd)}`;
-				textRef.value = trimmedText;
-			} else {
-				// 選択範囲を囲むようにFunctionを追加
-				const trimmedText = `${textRef.value.substring(0, caretStart)}$[${type} ${textRef.value.substring(caretStart, caretEnd)}]${textRef.value.substring(caretEnd)}`;
-				textRef.value = trimmedText;
-			}
-		}
-	});
-
-	const nextCaretStart: number = caretStart + 3 + type.length;
-	const nextCaretEnd: number = caretEnd + 3 + type.length;
-
-	// キャレットを戻す
-	nextTick(() => {
-		textArea.focus();
-		textArea.setSelectionRange(nextCaretStart, nextCaretEnd);
+		action: () => {
+			onChosen(tag);
+		},
+	}))], anchorElement, {
+		onClosed: () => {
+			if (onClosed) onClosed();
+		},
 	});
 }
+