From c7a5557e3cf0ea16291943f6b8103d0691a5fe81 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Thu, 14 Sep 2023 17:01:53 +0900
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E3=83=8E=E3=83=BC=E3=83=88?=
 =?UTF-8?q?=E4=BD=9C=E6=88=90=E3=83=95=E3=82=A9=E3=83=BC=E3=83=A0=E3=81=AB?=
 =?UTF-8?q?MFM=E3=83=98=E3=83=AB=E3=83=97=E3=82=92=E8=A6=8B=E3=82=8B?=
 =?UTF-8?q?=E3=81=93=E3=81=A8=E3=81=8C=E3=81=A7=E3=81=8D=E3=82=8B=E3=83=9C?=
 =?UTF-8?q?=E3=82=BF=E3=83=B3=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG_CHERRYPICK.md                       |  1 +
 .../src/components/MkMfmCheatSheetDialog.vue  | 31 +++++++++++++++++++
 .../frontend/src/components/MkPostForm.vue    |  5 +++
 .../frontend/src/pages/mfm-cheat-sheet.vue    | 10 +++---
 4 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 packages/frontend/src/components/MkMfmCheatSheetDialog.vue

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index f519cbab06..be8eeb7965 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@@ -41,6 +41,7 @@
 - 신고 즉시 해결 기능 (misskey-dev/misskey#11032)
 - 어떤 이유로 클라이언트의 이모티콘 캐시가 삭제된 경우 즉시 다시 가져오도록 (MisskeyIO/misskey#163)
 - EventBus를 사용하는 코드를 EventEmitter3로 변경
+- 노트 작성 폼에 MFM 도움말을 볼 수 있는 버튼 추가
 
 ### Client
 - about-misskey 페이지에서 클라이언트 버전을 누르면 변경 사항을 볼 수 있음
diff --git a/packages/frontend/src/components/MkMfmCheatSheetDialog.vue b/packages/frontend/src/components/MkMfmCheatSheetDialog.vue
new file mode 100644
index 0000000000..bfa78d126b
--- /dev/null
+++ b/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>
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index ca2b9361d1..9f0f0939d2 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/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) {
diff --git a/packages/frontend/src/pages/mfm-cheat-sheet.vue b/packages/frontend/src/pages/mfm-cheat-sheet.vue
index 3aa6c59750..edd4d45c20 100644
--- a/packages/frontend/src/pages/mfm-cheat-sheet.vue
+++ b/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');