mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-11-23 22:56:53 +09:00
Code

feat(client): mfm-cheat-sheetの復元

Browse Source
This commit is contained in:
NoriDev 2023-06-06 01:12:20 +09:00
parent ebceebcbbf
commit f690477229
7 changed files with 244 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG_CHERRYPICK.md
View File

@ -29,6 +29,7 @@
- 채팅 및 그룹 기능 유지 (revert: [misskey-dev/misskey#9919](https://github.com/misskey-dev/misskey/pull/9919), [misskey-dev/misskey#9942](https://github.com/misskey-dev/misskey/pull/9942)) - 채팅 및 그룹 기능 유지 (revert: [misskey-dev/misskey#9919](https://github.com/misskey-dev/misskey/pull/9919), [misskey-dev/misskey#9942](https://github.com/misskey-dev/misskey/pull/9942))
- 노트 수식 삽입 기능 복원 (MathML 호환을 위해 기존에 제거된 KaTex를 Temml로 대체 ([misskey-dev/misskey#9754](https://github.com/misskey-dev/misskey/issues/9754))) - 노트 수식 삽입 기능 복원 (MathML 호환을 위해 기존에 제거된 KaTex를 Temml로 대체 ([misskey-dev/misskey#9754](https://github.com/misskey-dev/misskey/issues/9754)))
- Cloud Translation - Advanced(v3) 지원 추가 ([@mk-castella](https://github.com/libnare/mk-castella/commit/3c582dd850d00f5b8faea027fd054118efb97856)) - Cloud Translation - Advanced(v3) 지원 추가 ([@mk-castella](https://github.com/libnare/mk-castella/commit/3c582dd850d00f5b8faea027fd054118efb97856))
- mfm-cheat-sheet 복원
### Client ### Client
- (Friendly) 모바일에서 스크롤 시 각종 요소들의 유동적인 높이 조절을 변경된 헤더 디자인에 대응 - (Friendly) 모바일에서 스크롤 시 각종 요소들의 유동적인 높이 조절을 변경된 헤더 디자인에 대응

4
locales/en-US.yml
View File

@ -1610,6 +1610,10 @@ _mfm:
sparkleDescription: "Gives content a sparkling particle effect." sparkleDescription: "Gives content a sparkling particle effect."
rotate: "Rotate" rotate: "Rotate"
rotateDescription: "Turns content by a specified angle." rotateDescription: "Turns content by a specified angle."
position: "Position"
positionDescription: "Moves content by a specified location."
scale: "Scale"
scaleDescription: "Loosen content by the specified value."
plain: "Plain" plain: "Plain"
plainDescription: "Deactivates the effects of all MFM contained within this MFM effect." plainDescription: "Deactivates the effects of all MFM contained within this MFM effect."
_instanceTicker: _instanceTicker:

4
locales/index.d.ts vendored
View File

@ -1716,6 +1716,10 @@ export interface Locale {
"sparkleDescription": string; "sparkleDescription": string;
"rotate": string; "rotate": string;
"rotateDescription": string; "rotateDescription": string;
"position": string;
"positionDescription": string;
"scale": string;
"scaleDescription": string;
"plain": string; "plain": string;
"plainDescription": string; "plainDescription": string;
}; };

4
locales/ja-JP.yml
View File

@ -1632,6 +1632,10 @@ _mfm:
sparkleDescription: "キラキラしたパーティクルのエフェクトを追加します。" sparkleDescription: "キラキラしたパーティクルのエフェクトを追加します。"
rotate: "回転" rotate: "回転"
rotateDescription: "指定した角度で回転させます。" rotateDescription: "指定した角度で回転させます。"
position: "位置"
positionDescription: "指定した位置に移動させます。"
scale: "スケール"
scaleDescription: "指定した値で緩めます。"
plain: "プレーン" plain: "プレーン"
plainDescription: "内側の構文を全て無効にします。" plainDescription: "内側の構文を全て無効にします。"

4
locales/ko-KR.yml
View File

@ -1611,6 +1611,10 @@ _mfm:
sparkleDescription: "반짝이는 파티클 효과를 추가해요." sparkleDescription: "반짝이는 파티클 효과를 추가해요."
rotate: "회전" rotate: "회전"
rotateDescription: "지정한 각도로 회전시켜요." rotateDescription: "지정한 각도로 회전시켜요."
position: "위치"
positionDescription: "지정한 위치로 이동시켜요."
scale: "스케일"
scaleDescription: "지정한 값으로 늘려요."
plain: "평문" plain: "평문"
plainDescription: "안에 있는 MFM 구문을 모두 무시하고 평문으로 표시해요." plainDescription: "안에 있는 MFM 구문을 모두 무시하고 평문으로 표시해요."
_instanceTicker: _instanceTicker:

387
packages/frontend/src/pages/mfm-cheat-sheet.vue
View File

@ -2,297 +2,327 @@
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="800"> <MkSpacer :contentMax="800">
<div class="mwysmxbg"> <div :class="$style.root">
<div>{{ i18n.ts._mfm.intro }}</div> <div style="margin-bottom: 30px; padding-bottom: 16px; border-bottom: solid .5px var(--divider);">{{ i18n.ts._mfm.intro }}</div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.mention }}</div> <div :class="$style.title">{{ i18n.ts._mfm.mention }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.mentionDescription }}</p> <p>{{ i18n.ts._mfm.mentionDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_mention"/> <Mfm :text="preview_mention"/>
<MkTextarea v-model="preview_mention"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_mention" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.hashtag }}</div> <div :class="$style.title">{{ i18n.ts._mfm.hashtag }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.hashtagDescription }}</p> <p>{{ i18n.ts._mfm.hashtagDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_hashtag"/> <Mfm :text="preview_hashtag"/>
<MkTextarea v-model="preview_hashtag"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_hashtag" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.url }}</div> <div :class="$style.title">{{ i18n.ts._mfm.url }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.urlDescription }}</p> <p>{{ i18n.ts._mfm.urlDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_url"/> <Mfm :text="preview_url"/>
<MkTextarea v-model="preview_url"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_url" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.link }}</div> <div :class="$style.title">{{ i18n.ts._mfm.link }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.linkDescription }}</p> <p>{{ i18n.ts._mfm.linkDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_link"/> <Mfm :text="preview_link"/>
<MkTextarea v-model="preview_link"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_link" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.emoji }}</div> <div :class="$style.title">{{ i18n.ts._mfm.emoji }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.emojiDescription }}</p> <p>{{ i18n.ts._mfm.emojiDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_emoji"/> <Mfm :text="preview_emoji"/>
<MkTextarea v-model="preview_emoji"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_emoji" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.bold }}</div> <div :class="$style.title">{{ i18n.ts._mfm.bold }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.boldDescription }}</p> <p>{{ i18n.ts._mfm.boldDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_bold"/> <Mfm :text="preview_bold"/>
<MkTextarea v-model="preview_bold"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_bold" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.small }}</div> <div :class="$style.title">{{ i18n.ts._mfm.small }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.smallDescription }}</p> <p>{{ i18n.ts._mfm.smallDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_small"/> <Mfm :text="preview_small"/>
<MkTextarea v-model="preview_small"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_small" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.quote }}</div> <div :class="$style.title">{{ i18n.ts._mfm.quote }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.quoteDescription }}</p> <p>{{ i18n.ts._mfm.quoteDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_quote"/> <Mfm :text="preview_quote"/>
<MkTextarea v-model="preview_quote"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_quote" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.center }}</div> <div :class="$style.title">{{ i18n.ts._mfm.center }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.centerDescription }}</p> <p>{{ i18n.ts._mfm.centerDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_center"/> <Mfm :text="preview_center"/>
<MkTextarea v-model="preview_center"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_center" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.inlineCode }}</div> <div :class="$style.title">{{ i18n.ts._mfm.inlineCode }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.inlineCodeDescription }}</p> <p>{{ i18n.ts._mfm.inlineCodeDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_inlineCode"/> <Mfm :text="preview_inlineCode"/>
<MkTextarea v-model="preview_inlineCode"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_inlineCode" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.blockCode }}</div> <div :class="$style.title">{{ i18n.ts._mfm.blockCode }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.blockCodeDescription }}</p> <p>{{ i18n.ts._mfm.blockCodeDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_blockCode"/> <Mfm :text="preview_blockCode"/>
<MkTextarea v-model="preview_blockCode"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_blockCode" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div>
</div>
</div>
<div :class="$style.section">
<div :class="$style.title">{{ i18n.ts._mfm.inlineMath }}</div>
<div :class="$style.content">
<p>{{ i18n.ts._mfm.inlineMathDescription }}</p>
<div :class="$style.preview">
<Mfm :text="preview_inlineMath"/>
<MkTextarea v-model="preview_inlineMath" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<!-- deprecated <!-- deprecated
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.search }}</div> <div :class="$style.title">{{ i18n.ts._mfm.search }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.searchDescription }}</p> <p>{{ i18n.ts._mfm.searchDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_search"/> <Mfm :text="preview_search"/>
<MkTextarea v-model="preview_search"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_search" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
--> -->
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.flip }}</div> <div :class="$style.title">{{ i18n.ts._mfm.flip }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.flipDescription }}</p> <p>{{ i18n.ts._mfm.flipDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_flip"/> <Mfm :text="preview_flip"/>
<MkTextarea v-model="preview_flip"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_flip" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.font }}</div> <div :class="$style.title">{{ i18n.ts._mfm.font }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.fontDescription }}</p> <p>{{ i18n.ts._mfm.fontDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_font"/> <Mfm :text="preview_font"/>
<MkTextarea v-model="preview_font"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_font" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.x2 }}</div> <div :class="$style.title">{{ i18n.ts._mfm.x2 }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.x2Description }}</p> <p>{{ i18n.ts._mfm.x2Description }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_x2"/> <Mfm :text="preview_x2"/>
<MkTextarea v-model="preview_x2"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_x2" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.x3 }}</div> <div :class="$style.title">{{ i18n.ts._mfm.x3 }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.x3Description }}</p> <p>{{ i18n.ts._mfm.x3Description }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_x3"/> <Mfm :text="preview_x3"/>
<MkTextarea v-model="preview_x3"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_x3" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.x4 }}</div> <div :class="$style.title">{{ i18n.ts._mfm.x4 }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.x4Description }}</p> <p>{{ i18n.ts._mfm.x4Description }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_x4"/> <Mfm :text="preview_x4"/>
<MkTextarea v-model="preview_x4"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_x4" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.blur }}</div> <div :class="$style.title">{{ i18n.ts._mfm.blur }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.blurDescription }}</p> <p>{{ i18n.ts._mfm.blurDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_blur"/> <Mfm :text="preview_blur"/>
<MkTextarea v-model="preview_blur"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_blur" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.jelly }}</div> <div :class="$style.title">{{ i18n.ts._mfm.jelly }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.jellyDescription }}</p> <p>{{ i18n.ts._mfm.jellyDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_jelly"/> <Mfm :text="preview_jelly"/>
<MkTextarea v-model="preview_jelly"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_jelly" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.tada }}</div> <div :class="$style.title">{{ i18n.ts._mfm.tada }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.tadaDescription }}</p> <p>{{ i18n.ts._mfm.tadaDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_tada"/> <Mfm :text="preview_tada"/>
<MkTextarea v-model="preview_tada"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_tada" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.jump }}</div> <div :class="$style.title">{{ i18n.ts._mfm.jump }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.jumpDescription }}</p> <p>{{ i18n.ts._mfm.jumpDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_jump"/> <Mfm :text="preview_jump"/>
<MkTextarea v-model="preview_jump"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_jump" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.bounce }}</div> <div :class="$style.title">{{ i18n.ts._mfm.bounce }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.bounceDescription }}</p> <p>{{ i18n.ts._mfm.bounceDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_bounce"/> <Mfm :text="preview_bounce"/>
<MkTextarea v-model="preview_bounce"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_bounce" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.spin }}</div> <div :class="$style.title">{{ i18n.ts._mfm.spin }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.spinDescription }}</p> <p>{{ i18n.ts._mfm.spinDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_spin"/> <Mfm :text="preview_spin"/>
<MkTextarea v-model="preview_spin"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_spin" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.shake }}</div> <div :class="$style.title">{{ i18n.ts._mfm.shake }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.shakeDescription }}</p> <p>{{ i18n.ts._mfm.shakeDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_shake"/> <Mfm :text="preview_shake"/>
<MkTextarea v-model="preview_shake"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_shake" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.twitch }}</div> <div :class="$style.title">{{ i18n.ts._mfm.twitch }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.twitchDescription }}</p> <p>{{ i18n.ts._mfm.twitchDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_twitch"/> <Mfm :text="preview_twitch"/>
<MkTextarea v-model="preview_twitch"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_twitch" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.rainbow }}</div> <div :class="$style.title">{{ i18n.ts._mfm.rainbow }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.rainbowDescription }}</p> <p>{{ i18n.ts._mfm.rainbowDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_rainbow"/> <Mfm :text="preview_rainbow"/>
<MkTextarea v-model="preview_rainbow"><template #label>MFM</template></MkTextarea> <MkTextarea v-model="preview_rainbow" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.sparkle }}</div> <div :class="$style.title">{{ i18n.ts._mfm.sparkle }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.sparkleDescription }}</p> <p>{{ i18n.ts._mfm.sparkleDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_sparkle"/> <Mfm :text="preview_sparkle"/>
<MkTextarea v-model="preview_sparkle"><span>MFM</span></MkTextarea> <MkTextarea v-model="preview_sparkle" :class="$style.text"><span>MFM {{ i18n.ts.sample }}</span></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.rotate }}</div> <div :class="$style.title">{{ i18n.ts._mfm.rotate }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.rotateDescription }}</p> <p>{{ i18n.ts._mfm.rotateDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_rotate"/> <Mfm :text="preview_rotate"/>
<MkTextarea v-model="preview_rotate"><span>MFM</span></MkTextarea> <MkTextarea v-model="preview_rotate" :class="$style.text"><span>MFM {{ i18n.ts.sample }}</span></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div :class="$style.section">
<div class="title">{{ i18n.ts._mfm.plain }}</div> <div :class="$style.title">{{ i18n.ts._mfm.position }}</div>
<div class="content"> <div :class="$style.content">
<p>{{ i18n.ts._mfm.positionDescription }}</p>
<div :class="$style.preview">
<Mfm :text="preview_position"/>
<MkTextarea v-model="preview_position" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div>
</div>
</div>
<div :class="$style.section">
<div :class="$style.title">{{ i18n.ts._mfm.scale }}</div>
<div :class="$style.content">
<p>{{ i18n.ts._mfm.scaleDescription }}</p>
<div :class="$style.preview">
<Mfm :text="preview_scale"/>
<MkTextarea v-model="preview_scale" :class="$style.text"><template #label>MFM {{ i18n.ts.sample }}</template></MkTextarea>
</div>
</div>
</div>
<div :class="$style.section">
<div :class="$style.title">{{ i18n.ts._mfm.plain }}</div>
<div :class="$style.content">
<p>{{ i18n.ts._mfm.plainDescription }}</p> <p>{{ i18n.ts._mfm.plainDescription }}</p>
<div class="preview"> <div :class="$style.preview">
<Mfm :text="preview_plain"/> <Mfm :text="preview_plain"/>
<MkTextarea v-model="preview_plain"><span>MFM</span></MkTextarea> <MkTextarea v-model="preview_plain" :class="$style.text"><span>MFM {{ i18n.ts.sample }}</span></MkTextarea>
</div> </div>
</div> </div>
</div> </div>
@ -319,6 +349,7 @@ let preview_small = $ref(`<small>${i18n.ts._mfm.dummy}</small>`);
let preview_center = $ref(`<center>${i18n.ts._mfm.dummy}</center>`); let preview_center = $ref(`<center>${i18n.ts._mfm.dummy}</center>`);
let preview_inlineCode = $ref('`<: "Hello, world!"`'); 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_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_inlineMath = $ref('\\(x= \\frac{-b\' \\pm \\sqrt{(b\')^2-ac}}{a}\\)');
let preview_quote = $ref(`> ${i18n.ts._mfm.dummy}`); let preview_quote = $ref(`> ${i18n.ts._mfm.dummy}`);
let preview_search = $ref(`${i18n.ts._mfm.dummy} 検索`); let preview_search = $ref(`${i18n.ts._mfm.dummy} 検索`);
let preview_jelly = $ref('$[jelly 🍮] $[jelly.speed=5s 🍮]'); let preview_jelly = $ref('$[jelly 🍮] $[jelly.speed=5s 🍮]');
@ -336,7 +367,9 @@ let preview_x4 = $ref('$[x4 🍮]');
let preview_blur = $ref(`$[blur ${i18n.ts._mfm.dummy}]`); let preview_blur = $ref(`$[blur ${i18n.ts._mfm.dummy}]`);
let preview_rainbow = $ref('$[rainbow 🍮] $[rainbow.speed=5s 🍮]'); let preview_rainbow = $ref('$[rainbow 🍮] $[rainbow.speed=5s 🍮]');
let preview_sparkle = $ref('$[sparkle 🍮]'); let preview_sparkle = $ref('$[sparkle 🍮]');
let preview_rotate = $ref('$[rotate 🍮]'); let preview_rotate = $ref('$[rotate.deg=90 🍮]');
let preview_position = $ref('$[position.x=1 🍮]\n$[position.y=-1 🍮]\n\n$[position.x=3,y=-3 🍮]');
let preview_scale = $ref('$[scale.x=2 🍮]\n$[scale.y=2 🍮]\n\n$[scale.x=2.5,y=2 🍮]');
let preview_plain = $ref('<plain>**bold** @mention #hashtag `code` $[x2 🍮]</plain>'); let preview_plain = $ref('<plain>**bold** @mention #hashtag `code` $[x2 🍮]</plain>');
const headerActions = $computed(() => []); const headerActions = $computed(() => []);
@ -349,33 +382,41 @@ definePageMetadata({
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.mwysmxbg { .root {
background: var(--bg); background: var(--bg);
}
> .section { .section {
> .title { &:not(:last-child) {
position: sticky; margin-bottom: 30px;
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;
}
}
} }
} }
.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;
}
.text {
padding: 12px 0 8px;
}
</style> </style>

16
packages/frontend/src/ui/_common_/common.ts
View File

@ -75,11 +75,21 @@ export function openInstanceMenu(ev: MouseEvent) {
icon: 'ti ti-icons', icon: 'ti ti-icons',
} : undefined], } : undefined],
}, null, { }, null, {
type: 'parent',
text: i18n.ts.help, text: i18n.ts.help,
icon: 'ti ti-help-circle', icon: 'ti ti-help-circle',
action: () => { children: [{
window.open('https://misskey-hub.net/help.html', '_blank'); text: i18n.ts.help,
}, icon: 'ti ti-help-circle',
action: () => {
window.open('https://misskey-hub.net/help.html', '_blank');
},
}, {
type: 'link',
text: i18n.ts._mfm.cheatSheet,
icon: 'ti ti-help-circle',
to: '/mfm-cheat-sheet',
}],
}, { }, {
type: 'link', type: 'link',
text: i18n.ts.aboutMisskey, text: i18n.ts.aboutMisskey,