From b0616b52eaebad83c982f9b3295f950147b28404 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 11 Feb 2023 11:31:18 +0900
Subject: [PATCH] =?UTF-8?q?=E4=B8=80=E9=83=A8=E3=81=AEMFM=E6=A7=8B?=
=?UTF-8?q?=E6=96=87=E3=82=92opt-in=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
あとMFMチートシートはMisskey Hubに移動
---
CHANGELOG.md | 1 +
locales/ja-JP.yml | 70 +---
packages/frontend/src/components/mfm.ts | 31 +-
.../frontend/src/pages/mfm-cheat-sheet.vue | 377 ------------------
.../frontend/src/pages/settings/general.vue | 6 +-
.../pages/settings/preferences-backups.vue | 1 +
packages/frontend/src/router.ts | 3 -
packages/frontend/src/store.ts | 4 +
8 files changed, 31 insertions(+), 462 deletions(-)
delete mode 100644 packages/frontend/src/pages/mfm-cheat-sheet.vue
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 984061f238..a0c760b47e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ You should also include the user name that made the change.
### Improvements
- コンディショナルロールもバッジとして表示可能に
- enhance(client): 一度見たノートのRenoteは省略して表示するように
+- 一部のMFM構文をopt-inに
### Bugfixes
-
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 79b78f3f98..031e90215f 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -467,7 +467,8 @@ youHaveNoGroups: "グループがありません"
joinOrCreateGroup: "既存のグループに招待してもらうか、新しくグループを作成してください。"
noHistory: "履歴はありません"
signinHistory: "ログイン履歴"
-disableAnimatedMfm: "動きのあるMFMを無効にする"
+enableAdvancedMfm: "高度なMFMを有効にする"
+enableAnimatedMfm: "動きのあるMFMを有効にする"
doing: "やっています"
category: "カテゴリ"
tags: "タグ"
@@ -1347,73 +1348,6 @@ _nsfw:
ignore: "閲覧注意のメディアを隠さない"
force: "常にメディアを隠す"
-_mfm:
- cheatSheet: "MFMチートシート"
- intro: "MFMは、Misskey内の様々な場所で使用できる専用のマークアップ言語です。ここでは、MFMで使用可能な構文一覧が確認できます。"
- dummy: "MisskeyでFediverseの世界が広がります"
- mention: "メンション"
- mentionDescription: "アットマーク + ユーザー名で、特定のユーザーを示すことができます。"
- hashtag: "ハッシュタグ"
- hashtagDescription: "ナンバーサイン + タグで、ハッシュタグを示すことができます。"
- url: "URL"
- urlDescription: "URLを示すことができます。"
- link: "リンク"
- linkDescription: "文章の特定の範囲を、URLに紐づけることができます。"
- bold: "太字"
- boldDescription: "文字を太く表示して強調することができます。"
- small: "目立たなく"
- smallDescription: "内容を小さく・薄く表示させることができます。"
- center: "中央寄せ"
- centerDescription: "内容を中央寄せで表示させることができます。"
- inlineCode: "コード(インライン)"
- inlineCodeDescription: "プログラムなどのコードをインラインでシンタックスハイライトします。"
- blockCode: "コード(ブロック)"
- blockCodeDescription: "複数行のプログラムなどのコードをブロックでシンタックスハイライトします。"
- inlineMath: "数式(インライン)"
- inlineMathDescription: "数式(KaTeX)をインラインで表示します。"
- blockMath: "数式(ブロック)"
- blockMathDescription: "複数行の数式(KaTeX)をブロックで表示します。"
- quote: "引用"
- quoteDescription: "内容が引用であることを示すことができます。"
- emoji: "カスタム絵文字"
- emojiDescription: "コロンでカスタム絵文字名を囲むと、カスタム絵文字を表示させることができます。"
- search: "検索"
- searchDescription: "入力済み検索ボックスを表示させることができます。"
- flip: "反転"
- flipDescription: "内容を上下または左右に反転させます。"
- jelly: "アニメーション(びよんびよん)"
- jellyDescription: "びよんびよんするアニメーションを与えます。"
- tada: "アニメーション(じゃーん)"
- tadaDescription: "ジャーン！という感じのアニメーションを与えます。"
- 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: "指定した角度で回転させます。"
- plain: "プレーン"
- plainDescription: "内側の構文を全て無効にします。"
-
_instanceTicker:
none: "表示しない"
remote: "リモートユーザーに表示"
diff --git a/packages/frontend/src/components/mfm.ts b/packages/frontend/src/components/mfm.ts
index 8cc35e4781..816a42a5fb 100644
--- a/packages/frontend/src/components/mfm.ts
+++ b/packages/frontend/src/components/mfm.ts
@@ -65,6 +65,8 @@ export default defineComponent({
return t.match(/^[0-9.]+s$/) ? t : null;
};
+ const useAnim = defaultStore.state.advancedMfm && defaultStore.state.animatedMfm;
+
const genEl = (ast: mfm.MfmNode[]) => ast.map((token): VNode | string | (VNode | string)[] => {
switch (token.type) {
case 'text': {
@@ -103,22 +105,22 @@ export default defineComponent({
switch (token.props.name) {
case 'tada': {
const speed = validTime(token.props.args.speed) ?? '1s';
- style = 'font-size: 150%;' + (defaultStore.state.animatedMfm ? `animation: tada ${speed} linear infinite both;` : '');
+ style = 'font-size: 150%;' + (useAnim ? `animation: tada ${speed} linear infinite both;` : '');
break;
}
case 'jelly': {
const speed = validTime(token.props.args.speed) ?? '1s';
- style = (defaultStore.state.animatedMfm ? `animation: mfm-rubberBand ${speed} linear infinite both;` : '');
+ style = (useAnim ? `animation: mfm-rubberBand ${speed} linear infinite both;` : '');
break;
}
case 'twitch': {
const speed = validTime(token.props.args.speed) ?? '0.5s';
- style = defaultStore.state.animatedMfm ? `animation: mfm-twitch ${speed} ease infinite;` : '';
+ style = useAnim ? `animation: mfm-twitch ${speed} ease infinite;` : '';
break;
}
case 'shake': {
const speed = validTime(token.props.args.speed) ?? '0.5s';
- style = defaultStore.state.animatedMfm ? `animation: mfm-shake ${speed} ease infinite;` : '';
+ style = useAnim ? `animation: mfm-shake ${speed} ease infinite;` : '';
break;
}
case 'spin': {
@@ -131,17 +133,17 @@ export default defineComponent({
token.props.args.y ? 'mfm-spinY' :
'mfm-spin';
const speed = validTime(token.props.args.speed) ?? '1.5s';
- style = defaultStore.state.animatedMfm ? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};` : '';
+ style = useAnim ? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};` : '';
break;
}
case 'jump': {
const speed = validTime(token.props.args.speed) ?? '0.75s';
- style = defaultStore.state.animatedMfm ? `animation: mfm-jump ${speed} linear infinite;` : '';
+ style = useAnim ? `animation: mfm-jump ${speed} linear infinite;` : '';
break;
}
case 'bounce': {
const speed = validTime(token.props.args.speed) ?? '0.75s';
- style = defaultStore.state.animatedMfm ? `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;` : '';
+ style = useAnim ? `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;` : '';
break;
}
case 'flip': {
@@ -154,17 +156,17 @@ export default defineComponent({
}
case 'x2': {
return h('span', {
- class: 'mfm-x2',
+ class: defaultStore.state.advancedMfm ? 'mfm-x2' : '',
}, genEl(token.children));
}
case 'x3': {
return h('span', {
- class: 'mfm-x3',
+ class: defaultStore.state.advancedMfm ? 'mfm-x3' : '',
}, genEl(token.children));
}
case 'x4': {
return h('span', {
- class: 'mfm-x4',
+ class: defaultStore.state.advancedMfm ? 'mfm-x4' : '',
}, genEl(token.children));
}
case 'font': {
@@ -186,11 +188,11 @@ export default defineComponent({
}
case 'rainbow': {
const speed = validTime(token.props.args.speed) ?? '1s';
- style = defaultStore.state.animatedMfm ? `animation: mfm-rainbow ${speed} linear infinite;` : '';
+ style = useAnim ? `animation: mfm-rainbow ${speed} linear infinite;` : '';
break;
}
case 'sparkle': {
- if (!defaultStore.state.animatedMfm) {
+ if (!useAnim) {
return genEl(token.children);
}
return h(MkSparkle, {}, genEl(token.children));
@@ -201,12 +203,17 @@ export default defineComponent({
break;
}
case 'position': {
+ if (!defaultStore.state.advancedMfm) break;
const x = parseFloat(token.props.args.x ?? '0');
const y = parseFloat(token.props.args.y ?? '0');
style = `transform: translateX(${x}em) translateY(${y}em);`;
break;
}
case 'scale': {
+ if (!defaultStore.state.advancedMfm) {
+ style = '';
+ break;
+ }
const x = Math.min(parseFloat(token.props.args.x ?? '1'), 5);
const y = Math.min(parseFloat(token.props.args.y ?? '1'), 5);
style = `transform: scale(${x}, ${y});`;
diff --git a/packages/frontend/src/pages/mfm-cheat-sheet.vue b/packages/frontend/src/pages/mfm-cheat-sheet.vue
deleted file mode 100644
index 73a5716236..0000000000
--- a/packages/frontend/src/pages/mfm-cheat-sheet.vue
+++ /dev/null
@@ -1,377 +0,0 @@
-<template>
-<MkStickyContainer>
- <template #header><MkPageHeader/></template>
- <MkSpacer :content-max="800">
- <div class="mwysmxbg">
- <div>{{ i18n.ts._mfm.intro }}</div>
- <div class="section">
- <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">
- <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">
- <div class="title">{{ i18n.ts._mfm.url }}</div>
- <div class="content">
- <p>{{ i18n.ts._mfm.urlDescription }}</p>
- <div class="preview">
- <Mfm :text="preview_url"/>
- <MkTextarea v-model="preview_url"><template #label>MFM</template></MkTextarea>
- </div>
- </div>
- </div>
- <div class="section">
- <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">
- <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">
- <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">
- <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">
- <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">
- <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">
- <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">
- <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>
- <!-- deprecated
- <div class="section">
- <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">
- <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">
- <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">
- <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">
- <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">
- <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">
- <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">
- <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">
- <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">
- <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">
- <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">
- <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">
- <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">
- <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">
- <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">
- <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">
- <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">
- <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>
-</template>
-
-<script lang="ts" setup>
-import { defineComponent } 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';
-
-let preview_mention = $ref('@example');
-let preview_hashtag = $ref('#test');
-let preview_url = $ref('https://example.com');
-let preview_link = $ref(`[${i18n.ts._mfm.dummy}](https://example.com)`);
-let preview_emoji = $ref(customEmojis.value.length ? `:${customEmojis.value[0].name}:` : ':emojiname:');
-let preview_bold = $ref(`**${i18n.ts._mfm.dummy}**`);
-let preview_small = $ref(`<small>${i18n.ts._mfm.dummy}</small>`);
-let preview_center = $ref(`<center>${i18n.ts._mfm.dummy}</center>`);
-let preview_inlineCode = $ref('`<: "Hello, world!"`');
-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```');
-let preview_quote = $ref(`> ${i18n.ts._mfm.dummy}`);
-let preview_search = $ref(`${i18n.ts._mfm.dummy} 検索`);
-let preview_jelly = $ref('$[jelly 🍮] $[jelly.speed=5s 🍮]');
-let preview_tada = $ref('$[tada 🍮] $[tada.speed=5s 🍮]');
-let preview_jump = $ref('$[jump 🍮] $[jump.speed=5s 🍮]');
-let preview_bounce = $ref('$[bounce 🍮] $[bounce.speed=5s 🍮]');
-let preview_shake = $ref('$[shake 🍮] $[shake.speed=5s 🍮]');
-let preview_twitch = $ref('$[twitch 🍮] $[twitch.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 🍮]');
-let preview_flip = $ref(`$[flip ${i18n.ts._mfm.dummy}]\n$[flip.v ${i18n.ts._mfm.dummy}]\n$[flip.h,v ${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}]`);
-let preview_x2 = $ref('$[x2 🍮]');
-let preview_x3 = $ref('$[x3 🍮]');
-let preview_x4 = $ref('$[x4 🍮]');
-let preview_blur = $ref(`$[blur ${i18n.ts._mfm.dummy}]`);
-let preview_rainbow = $ref('$[rainbow 🍮] $[rainbow.speed=5s 🍮]');
-let preview_sparkle = $ref('$[sparkle 🍮]');
-let preview_rotate = $ref('$[rotate 🍮]');
-let preview_plain = $ref('<plain>**bold** @mention #hashtag `code` $[x2 🍮]</plain>');
-
-definePageMetadata({
- title: i18n.ts._mfm.cheatSheet,
- icon: 'ti ti-question-circle',
-});
-</script>
-
-<style lang="scss" scoped>
-.mwysmxbg {
- background: var(--bg);
-
- > .section {
- > .title {
- position: sticky;
- z-index: 1;
- top: var(--stickyTop, 0px);
- padding: 16px;
- font-weight: bold;
- -webkit-backdrop-filter: var(--blur, blur(10px));
- backdrop-filter: var(--blur, blur(10px));
- background-color: var(--X16);
- }
-
- > .content {
- > p {
- margin: 0;
- padding: 16px;
- }
-
- > .preview {
- border-top: solid 0.5px var(--divider);
- padding: 16px;
- }
- }
- }
-}
-</style>
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index 0ce66b065f..b4851df176 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -45,7 +45,8 @@
<div class="_gaps_m">
<div class="_gaps_s">
- <MkSwitch v-model="disableAnimatedMfm">{{ i18n.ts.disableAnimatedMfm }}</MkSwitch>
+ <MkSwitch v-model="advancedMfm">{{ i18n.ts.enableAdvancedMfm }}</MkSwitch>
+ <MkSwitch v-if="advancedMfm" v-model="animatedMfm">{{ i18n.ts.enableAnimatedMfm }}</MkSwitch>
<MkSwitch v-model="reduceAnimation">{{ i18n.ts.reduceUiAnimation }}</MkSwitch>
<MkSwitch v-model="useBlurEffect">{{ i18n.ts.useBlurEffect }}</MkSwitch>
<MkSwitch v-model="useBlurEffectForModal">{{ i18n.ts.useBlurEffectForModal }}</MkSwitch>
@@ -142,7 +143,8 @@ const reduceAnimation = computed(defaultStore.makeGetterSetter('animation', v =>
const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEffectForModal'));
const useBlurEffect = computed(defaultStore.makeGetterSetter('useBlurEffect'));
const showGapBetweenNotesInTimeline = computed(defaultStore.makeGetterSetter('showGapBetweenNotesInTimeline'));
-const disableAnimatedMfm = computed(defaultStore.makeGetterSetter('animatedMfm', v => !v, v => !v));
+const animatedMfm = computed(defaultStore.makeGetterSetter('animatedMfm'));
+const advancedMfm = computed(defaultStore.makeGetterSetter('advancedMfm'));
const emojiStyle = computed(defaultStore.makeGetterSetter('emojiStyle'));
const disableDrawer = computed(defaultStore.makeGetterSetter('disableDrawer'));
const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('disableShowingAnimatedImages'));
diff --git a/packages/frontend/src/pages/settings/preferences-backups.vue b/packages/frontend/src/pages/settings/preferences-backups.vue
index 87a08612fc..0512a8d0c9 100644
--- a/packages/frontend/src/pages/settings/preferences-backups.vue
+++ b/packages/frontend/src/pages/settings/preferences-backups.vue
@@ -62,6 +62,7 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
'nsfw',
'animation',
'animatedMfm',
+ 'advancedMfm',
'loadRawImages',
'imageNewTab',
'disableShowingAnimatedImages',
diff --git a/packages/frontend/src/router.ts b/packages/frontend/src/router.ts
index 87d42c5c87..9004262689 100644
--- a/packages/frontend/src/router.ts
+++ b/packages/frontend/src/router.ts
@@ -224,9 +224,6 @@ export const routes = [{
path: '/api-console',
component: page(() => import('./pages/api-console.vue')),
loginRequired: true,
-}, {
- path: '/mfm-cheat-sheet',
- component: page(() => import('./pages/mfm-cheat-sheet.vue')),
}, {
path: '/scratchpad',
component: page(() => import('./pages/scratchpad.vue')),
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index 94892ff526..9ad931ee80 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -158,6 +158,10 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device',
default: false,
},
+ advancedMfm: {
+ where: 'device',
+ default: false,
+ },
loadRawImages: {
where: 'device',
default: false,