feat(frontend): ノート作成フォームにMFMヘルプを見ることができるボタンを追加

CHANGELOG_CHERRYPICK.md

@@ -41,6 +41,7 @@
 - 신고 즉시 해결 기능 (misskey-dev/misskey#11032)
 - 어떤 이유로 클라이언트의 이모티콘 캐시가 삭제된 경우 즉시 다시 가져오도록 (MisskeyIO/misskey#163)
 - EventBus를 사용하는 코드를 EventEmitter3로 변경
+- 노트 작성 폼에 MFM 도움말을 볼 수 있는 버튼 추가
 
 ### Client
 - about-misskey 페이지에서 클라이언트 버전을 누르면 변경 사항을 볼 수 있음

packages/frontend/src/components/MkMfmCheatSheetDialog.vue

@@ -0,0 +1,31 @@
+<template>
+<MkModalWindow
+	ref="dialog"
+	:width="600"
+	:height="1000"
+	@close="cancel()"
+	@closed="$emit('closed')"
+>
+	<template #header>{{ i18n.ts._mfm.cheatSheet }}</template>
+	<XMfmCheatSheet :popup="true" style="background: var(--bg)"/>
+</MkModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef } from 'vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
+import XMfmCheatSheet from '@/pages/mfm-cheat-sheet.vue';
+import { i18n } from '@/i18n';
+
+const emit = defineEmits<{
+  (ev: 'done'): void;
+  (ev: 'closed'): void;
+}>();
+
+const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
+
+function cancel() {
+	emit('done');
+	dialog.value?.close();
+}
+</script>

packages/frontend/src/components/MkPostForm.vue

@@ -41,6 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<span v-else-if="reactionAcceptance === 'likeOnlyForRemote'"><i class="ti ti-heart-plus"></i></span>
 				<span v-else><i class="ti ti-icons"></i></span>
 			</button>
+			<button v-tooltip="i18n.ts._mfm.cheatSheet" class="_button" :class="$style.headerRightItem" @click="openMfmCheatSheet"><i class="ti ti-help-circle"></i></button>
 			<button v-click-anime class="_button" :class="$style.submit" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
 				<div :class="$style.submitInner">
 					<template v-if="posted"></template>
@@ -873,6 +874,10 @@ function showActions(ev) {
 	})), ev.currentTarget ?? ev.target);
 }
 
+async function openMfmCheatSheet() {
+	os.popup(defineAsyncComponent(() => import('@/components/MkMfmCheatSheetDialog.vue')), {}, {}, 'closed');
+}
+
 let postAccount = $ref<Misskey.entities.UserDetailed | null>(null);
 
 function openAccountMenu(ev: MouseEvent) {

packages/frontend/src/pages/mfm-cheat-sheet.vue

@@ -5,10 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #header><MkPageHeader v-if="!popup" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="800">
 		<div :class="$style.root">
-			<div style="margin-bottom: 30px; padding-bottom: 16px; border-bottom: solid .5px var(--divider);">{{ i18n.ts._mfm.intro }}</div>
+			<div style="margin-bottom: 30px; padding-bottom: 16px; border-bottom: solid 1px var(--divider);">{{ i18n.ts._mfm.intro }}</div>
 			<div :class="$style.section">
 				<div :class="$style.title">{{ i18n.ts._mfm.mention }}</div>
 				<div :class="$style.content">
@@ -365,13 +365,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
-import { instance } from '@/instance';
 import { customEmojis } from '@/custom-emojis';
 
+defineProps<{
+  popup?: boolean;
+}>();
+
 let preview_mention = $ref('@example');
 let preview_hashtag = $ref('#test');
 let preview_url = $ref('https://example.com');