リアクション絵文字設定をいい感じに (#6074)

* リアクション絵文字設定をいい感じに

* みじかく

src/client/pages/my-settings/reaction.vue

@@ -2,11 +2,14 @@
 <section class="_card">
 	<div class="_title"><fa :icon="faLaugh"/> {{ $t('reaction') }}</div>
 	<div class="_content">
-		<mk-textarea v-model="reactions">{{ $t('reaction') }}<template #desc>{{ $t('reactionSettingDescription') }}</template></mk-textarea>
+		<mk-input v-model="reactions" style="font-family: 'Segoe UI Emoji', 'Noto Color Emoji', Roboto, HelveticaNeue, Arial, sans-serif">
+			{{ $t('reaction') }}<template #desc>{{ $t('reactionSettingDescription') }}</template>
+		</mk-input>
 	</div>
 	<div class="_footer">
 		<mk-button @click="save()" primary inline :disabled="!changed"><fa :icon="faSave"/> {{ $t('save') }}</mk-button>
 		<mk-button inline @click="preview"><fa :icon="faEye"/> {{ $t('preview') }}</mk-button>
+		<mk-button inline @click="setDefault"><fa :icon="faUndo"/> {{ $t('default') }}</mk-button>
 	</div>
 </section>
 </template>
@@ -14,24 +17,26 @@
 <script lang="ts">
 import Vue from 'vue';
 import { faLaugh, faSave, faEye } from '@fortawesome/free-regular-svg-icons';
-import MkTextarea from '../../components/ui/textarea.vue';
+import { faUndo } from '@fortawesome/free-solid-svg-icons';
+import MkInput from '../../components/ui/input.vue';
 import MkButton from '../../components/ui/button.vue';
 import MkReactionPicker from '../../components/reaction-picker.vue';
 import i18n from '../../i18n';
+import { emojiRegexWithCustom } from '../../../misc/emoji-regex';
 
 export default Vue.extend({
 	i18n,
 
 	components: {
-		MkTextarea,
+		MkInput,
 		MkButton,
 	},
 	
 	data() {
 		return {
-			reactions: this.$store.state.settings.reactions.join('\n'),
+			reactions: this.$store.state.settings.reactions.join(''),
 			changed: false,
-			faLaugh, faSave, faEye
+			faLaugh, faSave, faEye, faUndo
 		}
 	},
 
@@ -41,22 +46,32 @@ export default Vue.extend({
 		}
 	},
 
+	computed: {
+		splited(): any {
+			return this.reactions.match(emojiRegexWithCustom);
+		},
+	},
+
 	methods: {
 		save() {
-			this.$store.dispatch('settings/set', { key: 'reactions', value: this.reactions.trim().split('\n') });
+			this.$store.dispatch('settings/set', { key: 'reactions', value: this.splited });
 			this.changed = false;
 		},
 
 		preview(ev) {
 			const picker = this.$root.new(MkReactionPicker, {
 				source: ev.currentTarget || ev.target,
-				reactions: this.reactions.trim().split('\n'),
+				reactions: this.splited,
 				showFocus: false,
 			});
 			picker.$once('chosen', reaction => {
 				picker.close();
 			});
-		}
+		},
+
+		setDefault() {
+			this.reactions = '👍❤😆🤔😮🎉💢😥😇🍮';
+		},
 	}
 });
 </script>