Pari Plus emojiAutoSpacing

locales/en-US.yml

@@ -1301,6 +1301,7 @@ enableMFMCheatsheet: "Enable MFM Cheatsheet in post form"
 enableUndoClearPostForm: "Enable undo & clear button in post form"
 disableReactionsViewer: "Disable emoji reactions viewer"
 collapsedUnexpectedLangs: "Collapse notes using unexpected languages"
+emojiAutoSpacing: "Automatically add spaces when inserting emoji"
 autoSpacing: "Auto Spacing"
 autoSpacingDescription: "Adding spaces between CJK and English characters"
 performance: "Performance"

locales/zh-CN.yml

@@ -1308,6 +1308,7 @@ enableMFMCheatsheet: "在帖文编辑框中启用MFM Cheatsheet"
 enableUndoClearPostForm: "在帖文编辑框中启用撤销/清空按钮"
 disableReactionsViewer: "禁用帖文表情回应显示"
 collapsedUnexpectedLangs: "折叠非期望语言的帖文"
+emojiAutoSpacing: "在插入 Emoji 时自动添加空格"
 autoSpacing: "自动空格"
 autoSpacingDescription: "在CJK字符和英文字符中添加空格"
 messageToFollower: "给关注者的消息"

locales/zh-TW.yml

@@ -1308,6 +1308,7 @@ enableMFMCheatsheet: "在貼文編輯框中啓用MFM Cheatsheet"
 enableUndoClearPostForm: "在貼文編輯框中啓用撤回/清除按鈕"
 disableReactionsViewer: "禁用貼文表情回應顯示"
 collapsedUnexpectedLangs: "省略顯示非期望語言的貼文"
+emojiAutoSpacing: "在插入 Emoji 時自動添加前後間距"
 autoSpacing: "自動間距"
 autoSpacingDescription: "在CJK字符和英文字符中添加間距"
 messageToFollower: "給追隨者的訊息"

packages/frontend/src/components/MkPostForm.vue

@@ -999,20 +999,38 @@ async function insertEmoji(ev: MouseEvent) {
 
 	let pos = textareaEl.value?.selectionStart ?? 0;
 	let posEnd = textareaEl.value?.selectionEnd ?? text.value.length;
-	emojiPicker.show(
+
-		target as HTMLElement,
+    const addSpacing = (before: string, emoji: string, after: string) => {
-		emoji => {
+        let result = emoji;
-			const textBefore = text.value.substring(0, pos);
+        const needSpaceBefore = before.length > 0 && !before.endsWith(' ');
-			const textAfter = text.value.substring(posEnd);
+        const needSpaceAfter = after.length > 0 && !after.startsWith(' ');
-			text.value = textBefore + emoji + textAfter;
+
-			pos += emoji.length;
+        if (needSpaceBefore) result = ' ' + result;
-			posEnd += emoji.length;
+        if (needSpaceAfter) result = result + ' ';
-		},
+
-		() => {
+        return result;
-			textAreaReadOnly.value = false;
+    };
-			nextTick(() => focus());
+
-		},
+    emojiPicker.show(
-	);
+        target as HTMLElement,
+        emoji => {
+            const textBefore = text.value.substring(0, pos);
+            const textAfter = text.value.substring(posEnd);
+
+            const processedEmoji = defaultStore.state.emojiAutoSpacing 
+                ? addSpacing(textBefore, emoji, textAfter)
+                : emoji;
+
+            text.value = textBefore + processedEmoji + textAfter;
+
+            pos += processedEmoji.length;
+            posEnd += processedEmoji.length;
+        },
+        () => {
+            textAreaReadOnly.value = false;
+            nextTick(() => focus());
+        },
+    );
 }
 
 async function insertMfmFunction(ev: MouseEvent) {

packages/frontend/src/pages/settings/pari.vue

@@ -74,6 +74,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-model="collapseNotesRepliedTo">{{ i18n.ts.collapseNotesRepliedTo }}</MkSwitch>
 				<MkSwitch v-model="disableReactionsViewer">{{ i18n.ts.disableReactionsViewer }}</MkSwitch>
 				<MkSwitch v-model="collapsedUnexpectedLangs">{{ i18n.ts.collapsedUnexpectedLangs }}</MkSwitch>
+				<MkSwitch v-model="emojiAutoSpacing">{{ i18n.ts.emojiAutoSpacing }}</MkSwitch>
 				<MkSelect v-model="autoSpacingBehaviour">
 					<template #label>{{ i18n.ts.autoSpacing }}</template>
 					<option :value="null">{{ i18n.ts.disabled }}</option>
@@ -130,6 +131,7 @@ const autoSpacingBehaviour = computed(defaultStore.makeGetterSetter('autoSpacing
 const collapseNotesRepliedTo = computed(defaultStore.makeGetterSetter('collapseNotesRepliedTo'));
 const disableReactionsViewer = computed(defaultStore.makeGetterSetter('disableReactionsViewer'));
 const collapsedUnexpectedLangs = computed(defaultStore.makeGetterSetter('collapsedUnexpectedLangs'));
+const emojiAutoSpacing = computed(defaultStore.makeGetterSetter('emojiAutoSpacing'));
 
 definePageMetadata(() => ({
 	title: 'Pari Plus!',

packages/frontend/src/store.ts

@@ -555,7 +555,11 @@ export const defaultStore = markRaw(new Storage('base', {
 	collapsedUnexpectedLangs: {
 		where: 'device',
 		default: false,
-	}
+	},
+	emojiAutoSpacing : {
+		where: 'device',
+		default: true,
+	},
 }));
 
 // TODO: 他のタブと永続化されたstateを同期