一部のMFM構文をopt-inに

あとMFMチートシートはMisskey Hubに移動

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
 -

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: "リモートユーザーに表示"

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});`;