fix(client): tweak mfm-cheat-sheet

CHANGELOG.md

@@ -17,7 +17,8 @@ You should also include the user name that made the change.
 ### Bugfixes
 - Server: ファイルのアップロードに失敗することがある問題を修正 @acid-chicken
 - Client: リアクションピッカーがアプリ内ウィンドウの後ろに表示されてしまう問題を修正 @syuilo
-- Client: ユーザー情報の取得の再試行を修正する @xianonn
+- Client: ユーザー情報の取得の再試行を修正 @xianonn
+- Client: MFMチートシートの挙動を修正 @syuilo
 
 ## 12.117.0 (2022/07/18)
 

locales/ja-JP.yml

@@ -1038,6 +1038,8 @@ _mfm:
   sparkleDescription: "キラキラしたパーティクルのエフェクトを追加します。"
   rotate: "回転"
   rotateDescription: "指定した角度で回転させます。"
+  plain: "プレーン"
+  plainDescription: "内側の構文を全て無効にします。"
 
 _instanceTicker:
   none: "表示しない"

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

@@ -1,6 +1,7 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader/></template>
+	<MkSpacer :content-max="800">
 		<div class="mwysmxbg">
 			<div>{{ $ts._mfm.intro }}</div>
 			<div class="section _block">
@@ -295,7 +296,18 @@
 					</div>
 				</div>
 			</div>
+			<div class="section _block">
+				<div class="title">{{ $ts._mfm.plain }}</div>
+				<div class="content">
+					<p>{{ $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>
 </template>
 
@@ -306,35 +318,36 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
 import { instance } from '@/instance';
 
-const preview_mention = '@example';
+let preview_mention = $ref('@example');
-const preview_hashtag = '#test';
+let preview_hashtag = $ref('#test');
-const preview_url = 'https://example.com';
+let preview_url = $ref('https://example.com');
-const preview_link = `[${i18n.ts._mfm.dummy}](https://example.com)`;
+let preview_link = $ref(`[${i18n.ts._mfm.dummy}](https://example.com)`);
-const preview_emoji = instance.emojis.length ? `:${instance.emojis[0].name}:` : ':emojiname:';
+let preview_emoji = $ref(instance.emojis.length ? `:${instance.emojis[0].name}:` : ':emojiname:');
-const preview_bold = `**${i18n.ts._mfm.dummy}**`;
+let preview_bold = $ref(`**${i18n.ts._mfm.dummy}**`);
-const preview_small = `<small>${i18n.ts._mfm.dummy}</small>`;
+let preview_small = $ref(`<small>${i18n.ts._mfm.dummy}</small>`);
-const preview_center = `<center>${i18n.ts._mfm.dummy}</center>`;
+let preview_center = $ref(`<center>${i18n.ts._mfm.dummy}</center>`);
-const preview_inlineCode = '`<: "Hello, world!"`';
+let preview_inlineCode = $ref('`<: "Hello, world!"`');
-const preview_blockCode = '```\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```';
+let 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_inlineMath = '\\(x= \\frac{-b\' \\pm \\sqrt{(b\')^2-ac}}{a}\\)';
+let preview_inlineMath = $ref('\\(x= \\frac{-b\' \\pm \\sqrt{(b\')^2-ac}}{a}\\)');
-const preview_quote = `> ${i18n.ts._mfm.dummy}`;
+let preview_quote = $ref(`> ${i18n.ts._mfm.dummy}`);
-const preview_search = `${i18n.ts._mfm.dummy} 検索`;
+let preview_search = $ref(`${i18n.ts._mfm.dummy} 検索`);
-const preview_jelly = '$[jelly 🍮] $[jelly.speed=5s 🍮]';
+let preview_jelly = $ref('$[jelly 🍮] $[jelly.speed=5s 🍮]');
-const preview_tada = '$[tada 🍮] $[tada.speed=5s 🍮]';
+let preview_tada = $ref('$[tada 🍮] $[tada.speed=5s 🍮]');
-const preview_jump = '$[jump 🍮] $[jump.speed=5s 🍮]';
+let preview_jump = $ref('$[jump 🍮] $[jump.speed=5s 🍮]');
-const preview_bounce = '$[bounce 🍮] $[bounce.speed=5s 🍮]';
+let preview_bounce = $ref('$[bounce 🍮] $[bounce.speed=5s 🍮]');
-const preview_shake = '$[shake 🍮] $[shake.speed=5s 🍮]';
+let preview_shake = $ref('$[shake 🍮] $[shake.speed=5s 🍮]');
-const preview_twitch = '$[twitch 🍮] $[twitch.speed=5s 🍮]';
+let preview_twitch = $ref('$[twitch 🍮] $[twitch.speed=5s 🍮]');
-const preview_spin = '$[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=5s 🍮]';
+let 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=5s 🍮]');
-const preview_flip = `$[flip ${i18n.ts._mfm.dummy}]\n$[flip.v ${i18n.ts._mfm.dummy}]\n$[flip.h,v ${i18n.ts._mfm.dummy}]`;
+let 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 = `$[font.serif ${i18n.ts._mfm.dummy}]\n$[font.monospace ${i18n.ts._mfm.dummy}]\n$[font.cursive ${i18n.ts._mfm.dummy}]\n$[font.fantasy ${i18n.ts._mfm.dummy}]`;
+let preview_font = $ref(`$[font.serif ${i18n.ts._mfm.dummy}]\n$[font.monospace ${i18n.ts._mfm.dummy}]\n$[font.cursive ${i18n.ts._mfm.dummy}]\n$[font.fantasy ${i18n.ts._mfm.dummy}]`);
-const preview_x2 = '$[x2 🍮]';
+let preview_x2 = $ref('$[x2 🍮]');
-const preview_x3 = '$[x3 🍮]';
+let preview_x3 = $ref('$[x3 🍮]');
-const preview_x4 = '$[x4 🍮]';
+let preview_x4 = $ref('$[x4 🍮]');
-const preview_blur = `$[blur ${i18n.ts._mfm.dummy}]`;
+let preview_blur = $ref(`$[blur ${i18n.ts._mfm.dummy}]`);
-const preview_rainbow = '$[rainbow 🍮] $[rainbow.speed=5s 🍮]';
+let preview_rainbow = $ref('$[rainbow 🍮] $[rainbow.speed=5s 🍮]');
-const preview_sparkle = '$[sparkle 🍮]';
+let preview_sparkle = $ref('$[sparkle 🍮]');
-const preview_rotate = '$[rotate 🍮]';
+let preview_rotate = $ref('$[rotate 🍮]');
+let preview_plain = $ref('<plain>**bold** @mention #hashtag `code` $[x2 🍮]</plain>');
 
 definePageMetadata({
 	title: i18n.ts._mfm.cheatSheet,