Enhance(frontend): MFMや絵文字が使える入力ボックスでオートコンプリートを使えるように

CHANGELOG.md

@@ -36,6 +36,8 @@
 - Enhance: データセーバーの適用範囲を個別で設定できるように
 	- 従来のデータセーバーの設定はリセットされます
 - Enhance: タイムライン上のタブからリスト、アンテナ、チャンネルの管理ページにジャンプできるように
+- Enhance: ユーザー名、プロフィール、お知らせ、ページの編集画面でMFMや絵文字のオートコンプリートが使用できるように
+- Enhance: プロフィール、お知らせの編集画面でMFMのプレビューを表示できるように
 - Feat: センシティブと判断されたウェブサイトのサムネイルをぼかすように
   - ウェブサイトをセンシティブと判断する仕組みが動いていないため、summalyProxyを使用しないと機能しません。
 - fix: 「設定のバックアップ」で一部の項目がバックアップに含まれていなかった問題を修正

packages/frontend/src/components/MkFormDialog.vue

@@ -26,14 +26,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
 					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
 				</MkInput>
-				<MkInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model="values[item]" type="text">
+				<MkInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model="values[item]" type="text" :richAutocomplete="form[item].richSyntax">
 					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
 					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
 				</MkInput>
-				<MkTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model="values[item]">
+				<MkTextarea v-else-if="form[item].type === 'string' && form[item].multiline && !form[item].richSyntax" v-model="values[item]">
 					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
 					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
 				</MkTextarea>
+				<MkTextareaWithMfmPreview v-else-if="form[item].type === 'string' && form[item].multiline && form[item].richSyntax" v-model="values[item]">
+					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
+					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
+				</MkTextareaWithMfmPreview>
 				<MkSwitch v-else-if="form[item].type === 'boolean'" v-model="values[item]">
 					<span v-text="form[item].label || item"></span>
 					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
@@ -69,6 +73,7 @@ import MkRange from './MkRange.vue';
 import MkButton from './MkButton.vue';
 import MkRadios from './MkRadios.vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
+import MkTextareaWithMfmPreview from './MkTextareaWithMfmPreview.vue';
 import { i18n } from '@/i18n.js';
 
 const props = defineProps<{

packages/frontend/src/components/MkInput.vue

@@ -43,11 +43,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, nextTick, ref, shallowRef, watch, computed, toRefs } from 'vue';
+import { onMounted, onUnmounted, nextTick, ref, shallowRef, watch, computed, toRefs } from 'vue';
 import { debounce } from 'throttle-debounce';
 import MkButton from '@/components/MkButton.vue';
 import { useInterval } from '@/scripts/use-interval.js';
 import { i18n } from '@/i18n.js';
+import { Autocomplete, SuggestionType } from '@/scripts/autocomplete.js';
 
 const props = defineProps<{
 	modelValue: string | number | null;
@@ -59,6 +60,7 @@ const props = defineProps<{
 	placeholder?: string;
 	autofocus?: boolean;
 	autocomplete?: string;
+	richAutocomplete?: boolean | SuggestionType[],
 	autocapitalize?: string;
 	spellcheck?: boolean;
 	step?: any;
@@ -93,6 +95,7 @@ const height =
 	props.small ? 33 :
 	props.large ? 39 :
 	36;
+let autocomplete: Autocomplete;
 
 const focus = () => inputEl.value.focus();
 const onInput = (ev: KeyboardEvent) => {
@@ -160,6 +163,16 @@ onMounted(() => {
 			focus();
 		}
 	});
+
+	if (props.richAutocomplete) {
+		autocomplete = new Autocomplete(inputEl.value, v, props.richAutocomplete === true ? null : props.richAutocomplete);
+	}
+});
+
+onUnmounted(() => {
+	if (props.richAutocomplete) {
+		autocomplete.detach();
+	}
 });
 
 defineExpose({

packages/frontend/src/components/MkTextarea.vue

@@ -32,10 +32,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, nextTick, ref, watch, computed, toRefs, shallowRef } from 'vue';
+import { onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs, shallowRef } from 'vue';
 import { debounce } from 'throttle-debounce';
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n.js';
+import { Autocomplete, SuggestionType } from '@/scripts/autocomplete.js';
 
 const props = defineProps<{
 	modelValue: string | null;
@@ -46,6 +47,7 @@ const props = defineProps<{
 	placeholder?: string;
 	autofocus?: boolean;
 	autocomplete?: string;
+	richAutocomplete?: boolean | SuggestionType[],
 	spellcheck?: boolean;
 	debounce?: boolean;
 	manualSave?: boolean;
@@ -68,6 +70,7 @@ const changed = ref(false);
 const invalid = ref(false);
 const filled = computed(() => v.value !== '' && v.value != null);
 const inputEl = shallowRef<HTMLTextAreaElement>();
+let autocomplete: Autocomplete;
 
 const focus = () => inputEl.value.focus();
 const onInput = (ev) => {
@@ -113,6 +116,16 @@ onMounted(() => {
 			focus();
 		}
 	});
+
+	if (props.richAutocomplete) {
+		autocomplete = new Autocomplete(inputEl.value, v, props.richAutocomplete === true ? null : props.richAutocomplete);
+	}
+});
+
+onUnmounted(() => {
+	if (props.richAutocomplete) {
+		autocomplete.detach();
+	}
 });
 </script>
 

packages/frontend/src/components/MkTextareaWithMfmPreview.vue

@@ -0,0 +1,133 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<FormSlot>
+  <template #label><slot name="label"></slot></template>
+  <MkTab v-model="tab" style="margin-bottom: var(--margin);">
+    <option value="edit">{{ i18n.ts.edit }}</option>
+    <option value="preview">{{ i18n.ts.preview }}</option>
+  </MkTab>
+  <MkTextarea
+      v-show="tab === 'edit'"
+			ref="inputEl"
+			v-model="v"
+      :required="required"
+      :readonly="readonly"
+      :disabled="disabled"
+      :pattern="pattern"
+      :placeholder="placeholder"
+      :autofocus="autofocus"
+      :autocomplete="autocomplete"
+      :spellcheck="spellcheck"
+      :debounce="props.debounce"
+      :manualSave="manualSave"
+      :code="code"
+      :tall="tall"
+      :pre="pre"
+      richAutocomplete
+			@focus="focused = true"
+			@blur="focused = false"
+			@keydown="onKeydown($event)"
+			@input="onInput" />
+  <div v-show="tab === 'preview'" class="_panel" :class="{ [$style.mfmPreview]: true, [$style.tall]: tall }">
+    <Mfm :text="v" :nyaize="nyaize ?? false" :author="author" />
+  </div>
+  <template #caption><slot name="caption"></slot></template>
+</FormSlot>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, toRefs, shallowRef } from 'vue';
+import { debounce } from 'throttle-debounce';
+import { i18n } from '@/i18n.js';
+import FormSlot from '@/components/form/slot.vue';
+import MkTab from '@/components/MkTab.vue';
+import MkTextarea from '@/components/MkTextarea.vue';
+import Misskey from 'misskey-js';
+
+const props = defineProps<{
+	modelValue: string | null;
+	required?: boolean;
+	readonly?: boolean;
+	disabled?: boolean;
+	pattern?: string;
+	placeholder?: string;
+	autofocus?: boolean;
+	autocomplete?: string;
+	spellcheck?: boolean;
+	debounce?: boolean;
+	manualSave?: boolean;
+	code?: boolean;
+	tall?: boolean;
+	pre?: boolean;
+  author?: Misskey.entities.UserLite;
+  nyaize?: "respect" | boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'change', _ev: KeyboardEvent): void;
+	(ev: 'keydown', _ev: KeyboardEvent): void;
+	(ev: 'enter'): void;
+	(ev: 'update:modelValue', value: string): void;
+}>();
+
+const { modelValue } = toRefs(props);
+const v = ref<string>(modelValue.value ?? '');
+const focused = ref(false);
+const changed = ref(false);
+const inputEl = shallowRef<HTMLTextAreaElement>();
+const tab = ref("edit");
+
+const focus = () => inputEl.value.focus();
+const onInput = (ev) => {
+	changed.value = true;
+	emit('change', ev);
+};
+const onKeydown = (ev: KeyboardEvent) => {
+	if (ev.isComposing || ev.key === 'Process' || ev.keyCode === 229) return;
+
+	emit('keydown', ev);
+
+	if (ev.code === 'Enter') {
+		emit('enter');
+	}
+};
+
+const updated = () => {
+	changed.value = false;
+	emit('update:modelValue', v.value ?? '');
+};
+
+const debouncedUpdated = debounce(1000, updated);
+
+watch(modelValue, newValue => {
+	v.value = newValue;
+});
+
+watch(v, newValue => {
+	if (!props.manualSave) {
+		if (props.debounce) {
+			debouncedUpdated();
+		} else {
+			updated();
+		}
+	}
+});
+</script>
+
+<style lang="scss" module>
+.mfmPreview {
+  padding: 12px;
+  border: 1px solid var(--divider);
+  border-radius: 6px;
+  box-sizing: border-box;
+  min-height: 130px;
+}
+
+.tall {
+  min-height: 200px;
+}
+</style>

packages/frontend/src/pages/admin/announcements.vue

@@ -25,9 +25,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkInput v-model="announcement.title">
 						<template #label>{{ i18n.ts.title }}</template>
 					</MkInput>
-					<MkTextarea v-model="announcement.text">
+					<MkTextareaWithMfmPreview v-model="announcement.text">
 						<template #label>{{ i18n.ts.text }}</template>
-					</MkTextarea>
+					</MkTextareaWithMfmPreview>
 					<MkInput v-model="announcement.imageUrl" type="url">
 						<template #label>{{ i18n.ts.imageUrl }}</template>
 					</MkInput>
@@ -75,7 +75,7 @@ import { ref, computed } from 'vue';
 import XHeader from './_header_.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
-import MkTextarea from '@/components/MkTextarea.vue';
+import MkTextareaWithMfmPreview from '@/components/MkTextareaWithMfmPreview.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkRadios from '@/components/MkRadios.vue';
 import MkInfo from '@/components/MkInfo.vue';

packages/frontend/src/pages/channel-editor.vue

@@ -12,9 +12,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #label>{{ i18n.ts.name }}</template>
 			</MkInput>
 
-			<MkTextarea v-model="description">
+			<MkTextareaWithMfmPreview v-model="description">
 				<template #label>{{ i18n.ts.description }}</template>
-			</MkTextarea>
+			</MkTextareaWithMfmPreview>
 
 			<MkColorInput v-model="color">
 				<template #label>{{ i18n.ts.color }}</template>
@@ -70,7 +70,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, ref, watch, defineAsyncComponent } from 'vue';
-import MkTextarea from '@/components/MkTextarea.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkColorInput from '@/components/MkColorInput.vue';
@@ -81,6 +80,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import MkFolder from '@/components/MkFolder.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
+import MkTextareaWithMfmPreview from '@/components/MkTextareaWithMfmPreview.vue';
 
 const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 

packages/frontend/src/pages/clip.vue

@@ -101,6 +101,7 @@ const headerActions = computed(() => clip.value && isOwned.value ? [{
 				type: 'string',
 				required: false,
 				multiline: true,
+				richSyntax: true,
 				label: i18n.ts.description,
 				default: clip.value.description,
 			},

packages/frontend/src/pages/my-clips/index.vue

@@ -60,6 +60,7 @@ async function create() {
 			type: 'string',
 			required: false,
 			multiline: true,
+			richSyntax: true,
 			label: i18n.ts.description,
 		},
 		isPublic: {

packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue

@@ -9,16 +9,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #header><i class="ti ti-align-left"></i> {{ i18n.ts._pages.blocks.text }}</template>
 
 	<section>
-		<textarea v-model="text" :class="$style.textarea"></textarea>
+		<textarea ref="inputEl" v-model="text" :class="$style.textarea"></textarea>
 	</section>
 </XContainer>
 </template>
 
 <script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { watch, ref } from 'vue';
+import { watch, ref, shallowRef, onMounted, onUnmounted } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import { i18n } from '@/i18n.js';
+import { Autocomplete } from '@/scripts/autocomplete.js';
 
 const props = defineProps<{
 	modelValue: any
@@ -28,14 +29,25 @@ const emit = defineEmits<{
 	(ev: 'update:modelValue', value: any): void;
 }>();
 
+let autocomplete: Autocomplete;
+
 const text = ref(props.modelValue.text ?? '');
+const inputEl = shallowRef<HTMLTextAreaElement | null>(null);
 
 watch(text, () => {
 	emit('update:modelValue', {
 		...props.modelValue,
 		text: text.value,
 	});
 });
+
+onMounted(() => {
+	autocomplete = new Autocomplete(inputEl.value, text);
+});
+
+onUnmounted(() => {
+	autocomplete.detach();
+});
 </script>
 
 <style lang="scss" module>