Add mfm cheatsheet in portform

locales/en-US.yml

@@ -1295,6 +1295,79 @@ passkeyVerificationFailed: "Passkey verification has failed."
 passkeyVerificationSucceededButPasswordlessLoginDisabled: "Passkey verification has succeeded but password-less login is disabled."
 messageToFollower: "Message to followers"
 target: "Target"
+_mfm:
+  intro: "MFM is a markup language used on Misskey, Sharkey, Firefish, Akkoma, and more that can be used in many places. Here you can view a list of all available MFM syntax."
+  dummy: "Welcome to Pari Cafe"
+  mention: "Mention"
+  mentionDescription: "You can specify a user by using an At-Symbol and a username."
+  hashtag: "Hashtag"
+  hashtagDescription: "You can specify a hashtag using a number sign and text."
+  url: "URL"
+  urlDescription: "URLs can be displayed."
+  link: "Link"
+  linkDescription: "Specific parts of text can be displayed as a URL."
+  bold: "Bold"
+  boldDescription: "Highlights letters by making them thicker."
+  small: "Small"
+  smallDescription: "Displays content small and thin."
+  center: "Center"
+  centerDescription: "Displays content centered."
+  inlineCode: "Code (Inline)"
+  inlineCodeDescription: "Displays inline syntax highlighting for (program) code."
+  blockCode: "Code (Block)"
+  blockCodeDescription: "Displays syntax highlighting for multi-line (program) code in a block."
+  quote: "Quote"
+  quoteDescription: "Displays content as a quote."
+  emoji: "Custom Emoji"
+  emojiDescription: "By surrounding a custom emoji name with colons, custom emoji can be displayed."
+  search: "Search"
+  searchDescription: "Displays a search box with pre-entered text."
+  flip: "Flip"
+  flipDescription: "Flips content horizontally or vertically."
+  jelly: "Animation (Jelly)"
+  jellyDescription: "Gives content a jelly-like animation."
+  tada: "Animation (Tada)"
+  tadaDescription: "Gives content a \"Tada!\"-like animation."
+  jump: "Animation (Jump)"
+  jumpDescription: "Gives content a jumping animation."
+  bounce: "Animation (Bounce)"
+  bounceDescription: "Gives content a bouncy animation."
+  shake: "Animation (Shake)"
+  shakeDescription: "Gives content a shaking animation."
+  twitch: "Animation (Twitch)"
+  twitchDescription: "Gives content a strongly twitching animation."
+  spin: "Animation (Spin)"
+  spinDescription: "Gives content a spinning animation."
+  x2: "Big"
+  x2Description: "Displays content bigger."
+  x3: "Very big"
+  x3Description: "Displays content even bigger."
+  x4: "Unbelievably big"
+  x4Description: "Displays content even bigger than bigger than big."
+  blur: "Blur"
+  blurDescription: "Blurs content. It will be displayed clearly when hovered over."
+  font: "Font"
+  fontDescription: "Sets the font to display content in."
+  rainbow: "Rainbow"
+  rainbowDescription: "Makes the content appear in rainbow colors."
+  sparkle: "Sparkle"
+  sparkleDescription: "Gives content a sparkling particle effect."
+  rotate: "Rotate"
+  rotateDescription: "Turns content by a specified angle."
+  position: "Position"
+  positionDescription: "Move content by a specified amount."
+  crop: "Crop"
+  cropDescription: "Crop content."
+  scale: "Scale"
+  scaleDescription: "Scale content by a specified amount."
+  foreground: "Foreground color"
+  foregroundDescription: "Change the foreground color of text."
+  fade: 'Fade'
+  fadeDescription: 'Fade text in and out.'
+  background: "Background color"
+  backgroundDescription: "Change the background color of text."
+  plain: "Plain"
+  plainDescription: "Deactivates the effects of all MFM contained within this MFM effect."
 _abuseUserReport:
   forward: "Forward"
   forwardDescription: "Forward the report to a remote server as an anonymous system account."

locales/zh-CN.yml

@@ -1301,6 +1301,80 @@ prohibitedWordsForNameOfUser: "用户名中禁止的词"
 prohibitedWordsForNameOfUserDescription: "更改用户名时，如果用户名中包含此列表里的词汇，用户的改名请求将被拒绝。持有管理员权限的用户不受此限制。"
 yourNameContainsProhibitedWords: "目标用户名包含违禁词"
 yourNameContainsProhibitedWordsDescription: "用户名内含有违禁词。若想使用此用户名，请联系服务器管理员。"
+_mfm:
+  intro: "MFM是一种在Misskey、Sharkey、Firefish、Akkoma等平台上使用的标记语言，可以在多处使用。在这里你可以查看所有可用的MFM语法。"
+  dummy: "Welcome to Pari Cafe"
+  mention: "提及"
+  mentionDescription: "你可以使用@符号和用户名来指定一个用户。"
+  hashtag: "话题标签"
+  hashtagDescription: "你可以使用#号和文本来指定一个话题标签。"
+  url: "URL"
+  urlDescription: "可以显示URL链接。"
+  link: "链接"
+  linkDescription: "可以将特定的文本部分显示为URL链接。"
+  bold: "粗体"
+  boldDescription: "通过加粗来突出显示文字。"
+  small: "小号"
+  smallDescription: "以小号和细体显示内容。"
+  center: "居中"
+  centerDescription: "使内容居中显示。"
+  inlineCode: "代码（行内）"
+  inlineCodeDescription: "为（程序）代码显示行内语法高亮。"
+  blockCode: "代码（块）"
+  blockCodeDescription: "在代码块中显示多行（程序）代码的语法高亮。"
+  quote: "引用"
+  quoteDescription: "将内容显示为引用。"
+  emoji: "自定义表情"
+  emojiDescription: "通过冒号包围自定义表情名称，可以显示自定义表情。"
+  search: "搜索"
+  searchDescription: "显示一个预填充文本的搜索框。"
+  flip: "翻转"
+  flipDescription: "水平或垂直翻转内容。"
+  jelly: "动画（果冻）"
+  jellyDescription: "给内容添加果冻般的动画效果。"
+  tada: "动画（Ta-da！）"
+  tadaDescription: "给内容添加Ta-da！式的动画效果。"
+  jump: "动画（跳跃）"
+  jumpDescription: "给内容添加跳跃动画效果。"
+  bounce: "动画（弹跳）"
+  bounceDescription: "给内容添加弹跳动画效果。"
+  shake: "动画（摇晃）"
+  shakeDescription: "给内容添加摇晃动画效果。"
+  twitch: "动画（抽搐）"
+  twitchDescription: "给内容添加强烈抽搐的动画效果。"
+  spin: "动画（旋转）"
+  spinDescription: "给内容添加旋转动画效果。"
+  x2: "大号"
+  x2Description: "以更大尺寸显示内容。"
+  x3: "特大号"
+  x3Description: "以更更大尺寸显示内容。"
+  x4: "超大号"
+  x4Description: "以比大号还要大的尺寸显示内容。"
+  blur: "模糊"
+  blurDescription: "使内容模糊化。鼠标悬停时会清晰显示。"
+  font: "字体"
+  fontDescription: "设置显示内容的字体。"
+  rainbow: "彩虹"
+  rainbowDescription: "使内容呈现彩虹色。"
+  sparkle: "闪耀"
+  sparkleDescription: "给内容添加闪耀的粒子效果。"
+  rotate: "旋转"
+  rotateDescription: "将内容旋转指定角度。"
+  position: "位置"
+  positionDescription: "将内容移动指定距离。"
+  crop: "裁剪"
+  cropDescription: "裁剪内容。"
+  scale: "缩放"
+  scaleDescription: "按指定比例缩放内容。"
+  foreground: "前景色"
+  foregroundDescription: "更改文本的前景色。"
+  fade: "渐变"
+  fadeDescription: "使文本淡入淡出。"
+  background: "背景色"
+  backgroundDescription: "更改文本的背景色。"
+  plain: "普通文本"
+  plainDescription: "停用此MFM效果中包含的所有MFM效果。"
+
 _abuseUserReport:
   forward: "转发"
   forwardDescription: "目标是匿名系统账户，将把举报转发给远程服务器。"

locales/zh-TW.yml

@@ -1301,6 +1301,79 @@ prohibitedWordsForNameOfUser: "禁止使用的字詞（使用者名稱）"
 prohibitedWordsForNameOfUserDescription: "如果使用者名稱包含此清單中的任何字串，則拒絕重新命名使用者。 具有審查員權限的使用者不受此限制的影響。"
 yourNameContainsProhibitedWords: "您嘗試更改的名稱包含禁止的字串"
 yourNameContainsProhibitedWordsDescription: "名稱中包含禁止使用的字串。 如果您想使用此名稱，請聯絡您的伺服器管理員。"
+_mfm:
+  intro: "MFM是一種在Misskey、Sharkey、Firefish、Akkoma等平臺上使用的標記語言，可以在多處使用。在這裡你可以查看所有可用的MFM語法。"
+  dummy: "Welcome to Pari Cafe"
+  mention: "提及"
+  mentionDescription: "你可以使用@符號和用戶名來指定一個用戶。"
+  hashtag: "話題標籤"
+  hashtagDescription: "你可以使用#號和文本來指定一個話題標籤。"
+  url: "URL"
+  urlDescription: "可以顯示URL鏈接。"
+  link: "鏈接"
+  linkDescription: "可以將特定的文本部分顯示為URL鏈接。"
+  bold: "粗體"
+  boldDescription: "通過加粗來突出顯示文字。"
+  small: "小號"
+  smallDescription: "以小號和細體顯示內容。"
+  center: "居中"
+  centerDescription: "使內容居中顯示。"
+  inlineCode: "程式碼（行內）"
+  inlineCodeDescription: "為（程式）程式碼顯示行內語法高亮。"
+  blockCode: "程式碼（塊）"
+  blockCodeDescription: "在程式碼塊中顯示多行（程式）程式碼的語法高亮。"
+  quote: "引用"
+  quoteDescription: "將內容顯示為引用。"
+  emoji: "自定義表情"
+  emojiDescription: "通過冒號包圍自定義表情名稱，可以顯示自定義表情。"
+  search: "搜索"
+  searchDescription: "顯示一個預填充文本的搜索框。"
+  flip: "翻轉"
+  flipDescription: "水平或垂直翻轉內容。"
+  jelly: "動畫（果凍）"
+  jellyDescription: "給內容添加果凍般的動畫效果。"
+  tada: "動畫（Ta-da！）"
+  tadaDescription: "給內容添加「Ta-da！」式的動畫效果。"
+  jump: "動畫（跳躍）"
+  jumpDescription: "給內容添加跳躍動畫效果。"
+  bounce: "動畫（彈跳）"
+  bounceDescription: "給內容添加彈跳動畫效果。"
+  shake: "動畫（搖晃）"
+  shakeDescription: "給內容添加搖晃動畫效果。"
+  twitch: "動畫（抽搐）"
+  twitchDescription: "給內容添加強烈抽搐的動畫效果。"
+  spin: "動畫（旋轉）"
+  spinDescription: "給內容添加旋轉動畫效果。"
+  x2: "大號"
+  x2Description: "以更大尺寸顯示內容。"
+  x3: "特大號"
+  x3Description: "以更更大尺寸顯示內容。"
+  x4: "超大號"
+  x4Description: "以比大號還要大的尺寸顯示內容。"
+  blur: "模糊"
+  blurDescription: "使內容模糊化。滑鼠懸停時會清晰顯示。"
+  font: "字體"
+  fontDescription: "設置顯示內容的字體。"
+  rainbow: "彩虹"
+  rainbowDescription: "使內容呈現彩虹色。"
+  sparkle: "閃耀"
+  sparkleDescription: "給內容添加閃耀的粒子效果。"
+  rotate: "旋轉"
+  rotateDescription: "將內容旋轉指定角度。"
+  position: "位置"
+  positionDescription: "將內容移動指定距離。"
+  crop: "裁剪"
+  cropDescription: "裁剪內容。"
+  scale: "縮放"
+  scaleDescription: "按指定比例縮放內容。"
+  foreground: "前景色"
+  foregroundDescription: "更改文本的前景色。"
+  fade: "漸變"
+  fadeDescription: "使文本淡入淡出。"
+  background: "背景色"
+  backgroundDescription: "更改文本的背景色。"
+  plain: "普通文本"
+  plainDescription: "停用此MFM效果中包含的所有MFM效果。"
 _abuseUserReport:
   forward: "轉發"
   forwardDescription: "以匿名系統帳戶將檢舉轉發至遠端伺服器。"

packages/frontend/src/components/MkMfmWindow.vue

@@ -0,0 +1,507 @@
+<!--
+SPDX-FileCopyrightText: marie and other Sharkey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+    <MkWindow
+        ref="window"
+        :initialWidth="600"
+        :initialHeight="800"
+        :canResize="true"
+        @closed="emit('closed')"
+    >
+        <template #header>
+            MFM Cheatsheet
+        </template>
+        <MkStickyContainer>
+            <MkSpacer :contentMax="800">
+                <div class="mfm-cheat-sheet">
+                    <div>{{ i18n.ts._mfm.intro }}</div>
+                    <br/>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.mention }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.mentionDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_mention"/>
+                                <MkTextarea v-model="preview_mention"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.hashtag }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.hashtagDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_hashtag"/>
+                                <MkTextarea v-model="preview_hashtag"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.link }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.linkDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_link"/>
+                                <MkTextarea v-model="preview_link"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.emoji }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.emojiDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_emoji"/>
+                                <MkTextarea v-model="preview_emoji"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.bold }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.boldDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_bold"/>
+                                <MkTextarea v-model="preview_bold"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">Italic</div>
+                        <div class="content">
+                            <div class="preview">
+                                <Mfm :text="preview_italic"/>
+                                <MkTextarea v-model="preview_italic"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.small }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.smallDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_small"/>
+                                <MkTextarea v-model="preview_small"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.quote }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.quoteDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_quote"/>
+                                <MkTextarea v-model="preview_quote"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">Strikethrough</div>
+                        <div class="content">
+                            <div class="preview">
+                                <Mfm :text="preview_cross"/>
+                                <MkTextarea v-model="preview_cross"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.center }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.centerDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_center"/>
+                                <MkTextarea v-model="preview_center"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.inlineCode }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.inlineCodeDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_inlineCode"/>
+                                <MkTextarea v-model="preview_inlineCode"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.blockCode }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.blockCodeDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_blockCode"/>
+                                <MkTextarea v-model="preview_blockCode"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">Ruby</div>
+                        <div class="content">
+                            <div class="preview">
+                                <Mfm :text="preview_ruby"/>
+                                <MkTextarea v-model="preview_ruby"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">Border</div>
+                        <div class="content">
+                            <div class="preview">
+                                <Mfm :text="preview_border"/>
+                                <MkTextarea v-model="preview_border"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.search }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.searchDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_search"/>
+                                <MkTextarea v-model="preview_search"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.flip }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.flipDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_flip"/>
+                                <MkTextarea v-model="preview_flip"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.font }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.fontDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_font"/>
+                                <MkTextarea v-model="preview_font"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.x2 }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.x2Description }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_x2"/>
+                                <MkTextarea v-model="preview_x2"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.x3 }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.x3Description }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_x3"/>
+                                <MkTextarea v-model="preview_x3"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.x4 }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.x4Description }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_x4"/>
+                                <MkTextarea v-model="preview_x4"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.blur }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.blurDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_blur"/>
+                                <MkTextarea v-model="preview_blur"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.jelly }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.jellyDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_jelly"/>
+                                <MkTextarea v-model="preview_jelly"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.tada }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.tadaDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_tada"/>
+                                <MkTextarea v-model="preview_tada"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.jump }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.jumpDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_jump"/>
+                                <MkTextarea v-model="preview_jump"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.bounce }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.bounceDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_bounce"/>
+                                <MkTextarea v-model="preview_bounce"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.spin }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.spinDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_spin"/>
+                                <MkTextarea v-model="preview_spin"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.shake }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.shakeDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_shake"/>
+                                <MkTextarea v-model="preview_shake"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.twitch }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.twitchDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_twitch"/>
+                                <MkTextarea v-model="preview_twitch"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.rainbow }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.rainbowDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_rainbow"/>
+                                <MkTextarea v-model="preview_rainbow"><template #label>MFM</template></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.sparkle }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.sparkleDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_sparkle"/>
+                                <MkTextarea v-model="preview_sparkle"><span>MFM</span></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.rotate }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.rotateDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_rotate"/>
+                                <MkTextarea v-model="preview_rotate"><span>MFM</span></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.position }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.positionDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_position"/>
+                                <MkTextarea v-model="preview_position"><span>MFM</span></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.scale }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.scaleDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_scale"/>
+                                <MkTextarea v-model="preview_scale"><span>MFM</span></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.foreground }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.foregroundDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_fg"/>
+                                <MkTextarea v-model="preview_fg"><span>MFM</span></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.background }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.backgroundDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_bg"/>
+                                <MkTextarea v-model="preview_bg"><span>MFM</span></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section _block">
+                        <div class="title">{{ i18n.ts._mfm.plain }}</div>
+                        <div class="content">
+                            <p>{{ i18n.ts._mfm.plainDescription }}</p>
+                            <div class="preview">
+                                <Mfm :text="preview_plain"/>
+                                <MkTextarea v-model="preview_plain"><span>MFM</span></MkTextarea>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </MkSpacer>
+        </MkStickyContainer>
+    </MkWindow>
+    </template>
+    
+    <script lang="ts" setup>
+    import { ref } from 'vue';
+    import MkInfo from './MkInfo.vue';
+    import MkWindow from '@/components/MkWindow.vue';
+    import MkTextarea from '@/components/MkTextarea.vue';
+    import { i18n } from '@/i18n.js';
+    
+    const emit = defineEmits<{
+        (ev: 'closed'): void;
+    }>();
+    
+    const preview_mention = ref('@example');
+    const preview_hashtag = ref('#test');
+    const preview_link = ref(`[${i18n.ts._mfm.dummy}](https://pari.cafe)`);
+    const preview_emoji = ref(':heart:');
+    const preview_bold = ref(`**${i18n.ts._mfm.dummy}**`);
+    const preview_small = ref(
+        `<small>${i18n.ts._mfm.dummy}</small>`,
+    );
+    const preview_center = ref(
+        `<center>${i18n.ts._mfm.dummy}</center>`,
+    );
+    const preview_inlineCode = ref('`<: "Hello, world!"`');
+    const preview_blockCode = ref(
+        '```\n~ (#i, 100) {\n\t<: ? ((i % 15) = 0) "FizzBuzz"\n\t\t.? ((i % 3) = 0) "Fizz"\n\t\t.? ((i % 5) = 0) "Buzz"\n\t\t. i\n}\n```',
+    );
+    const preview_quote = ref(`> ${i18n.ts._mfm.dummy}`);
+    const preview_search = ref(
+        `${i18n.ts._mfm.dummy} [search]\n${i18n.ts._mfm.dummy} [検索]`,
+    );
+    const preview_jelly = ref(
+        '$[jelly ☕] $[jelly.speed=3s ☕] $[jelly.delay=3s ☕] $[jelly.loop=3 ☕]',
+    );
+    const preview_tada = ref(
+        '$[tada ☕] $[tada.speed=3s ☕] $[tada.delay=3s ☕] $[tada.loop=3 ☕]',
+    );
+    const preview_jump = ref(
+        '$[jump ☕] $[jump.speed=3s ☕] $[jump.delay=3s ☕] $[jump.loop=3 ☕]',
+    );
+    const preview_bounce = ref(
+        '$[bounce ☕] $[bounce.speed=3s ☕] $[bounce.delay=3s ☕] $[bounce.loop=3 ☕]',
+    );
+    const preview_shake = ref(
+        '$[shake ☕] $[shake.speed=3s ☕] $[shake.delay=3s ☕] $[shake.loop=3 ☕]',
+    );
+    const preview_twitch = ref(
+        '$[twitch ☕] $[twitch.speed=3s ☕] $[twitch.delay=3s ☕] $[twitch.loop=3 ☕]',
+    );
+    const preview_spin = ref(
+        '$[spin ☕] $[spin.left ☕] $[spin.alternate ☕]\n$[spin.x ☕] $[spin.x,left ☕] $[spin.x,alternate ☕]\n$[spin.y ☕] $[spin.y,left ☕] $[spin.y,alternate ☕]\n\n$[spin.speed=3s ☕] $[spin.delay=3s ☕] $[spin.loop=3 ☕]',
+    );
+    const preview_flip = ref(
+        `$[flip ${i18n.ts._mfm.dummy}]\n$[flip.v ${i18n.ts._mfm.dummy}]\n$[flip.h,v ${i18n.ts._mfm.dummy}]`,
+    );
+    const preview_font = ref(
+        `$[font.serif ${i18n.ts._mfm.dummy}]\n$[font.monospace ${i18n.ts._mfm.dummy}]`,
+    );
+    const preview_x2 = ref('$[x2 ☕]');
+    const preview_x3 = ref('$[x3 ☕]');
+    const preview_x4 = ref('$[x4 ☕]');
+    const preview_blur = ref(`$[blur ${i18n.ts._mfm.dummy}]`);
+    const preview_rainbow = ref(
+        '$[rainbow ☕] $[rainbow.speed=3s ☕] $[rainbow.delay=3s ☕] $[rainbow.loop=3 ☕]',
+    );
+    const preview_sparkle = ref('$[sparkle ☕]');
+    const preview_rotate = ref(
+        '$[rotate ☕]\n$[rotate.deg=45 ☕]\n$[rotate.x,deg=45 Hello, world!]',
+    );
+    const preview_position = ref('$[position.y=-1 ☕]\n$[position.x=-1 ☕]');
+    const preview_scale = ref(
+        '$[scale.x=1.3 ☕]\n$[scale.x=1.5,y=3 ☕]\n$[scale.y=0.3 ☕]',
+    );
+    const preview_fg = ref('$[fg.color=eb6f92 Text color]');
+    const preview_bg = ref('$[bg.color=31748f Background color]');
+    const preview_plain = ref(
+        '<plain>**bold** @mention #hashtag `code` $[x2 ☕]</plain>',
+    );
+    const preview_cross = ref('~~Hello world~~');
+    const preview_ruby = ref('$[ruby 帕里咖啡 PariCafe]');
+    const preview_italic = ref('<i>italic</i> *italic2*');
+    const preview_border = ref(
+        `$[border a default border]
+    
+    $[border.width=2 a thick border]
+    
+    $[border.style=double,width=5 a double border]
+    
+    $[border.color=0f0 a green border]
+    
+    $[border.radius=10 a rounded border]`,
+    );
+    </script>
+    
+    <style lang="scss" scoped>
+    .mfm-cheat-sheet {
+        > .section {
+            > .title {
+                position: sticky;
+                z-index: 1;
+                top: var(--stickyTop, 0px);
+                padding: 16px;
+                font-weight: bold;
+                font-size: 1.1em;
+                -webkit-backdrop-filter: var(--blur, blur(10px));
+                backdrop-filter: var(--blur, blur(10px));
+                background-color: var(--X16);
+            }
+    
+            > .content {
+                > p {
+                    margin: 0;
+                    padding: 16px;
+                    padding-top: 0;
+                }
+    
+                > .preview {
+                    border-top: solid 0.5px var(--divider);
+                    padding: 16px;
+                }
+            }
+        }
+    }
+    </style>
+    

packages/frontend/src/components/MkPostForm.vue

@@ -90,6 +90,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 		<div :class="$style.footerRight">
 			<button v-tooltip="i18n.ts.previewNoteText" class="_button" :class="[$style.footerButton, { [$style.previewButtonActive]: showPreview }]" @click="showPreview = !showPreview"><i class="ti ti-eye"></i></button>
+			<button v-tooltip="'MFM Cheatsheet'" class="_button" :class="$style.footerButton" @click="MFMWindow"><i class="ti ti-notepad"></i></button>
 			<!--<button v-tooltip="i18n.ts.more" class="_button" :class="$style.footerButton" @click="showingOptions = !showingOptions"><i class="ti ti-dots"></i></button>-->
 		</div>
 	</footer>
@@ -374,6 +375,15 @@ function watchForDraft() {
 	watch(reactionAcceptance, () => saveDraft());
 }
 
+function MFMWindow() {
+	const { dispose } = os.popup(
+		defineAsyncComponent(() => import('@/components/MkMfmWindow.vue')),
+		{},
+		{
+			closed: () => dispose(),
+		});
+}
+
 function checkMissingMention() {
 	if (visibility.value === 'specified') {
 		const ast = mfm.parse(text.value);