Add blur MFM syntax

This commit is contained in:
syuilo 2020-12-31 03:02:09 +09:00
parent e6705b1a65
commit 4ae172be57
4 changed files with 25 additions and 2 deletions

View File

@ -747,6 +747,8 @@ _mfm:
x3Description: "内容をとても大きく表示します。"
x4: "究極に大きく"
x4Description: "内容を究極に大きく表示します。"
blur: "ぼかし"
blurDescription: "内容をぼかすことができます。ポインターを上に乗せるとはっきり見えるようになります。"
_reversi:
reversi: "リバーシ"

View File

@ -14,6 +14,15 @@ export default defineComponent({
</script>
<style lang="scss">
._mfm_blur_ {
filter: blur(6px);
transition: filter 0.3s;
&:hover {
filter: blur(0px);
}
}
@keyframes mfm-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }

View File

@ -142,8 +142,9 @@ export default defineComponent({
break;
}
case 'blur': {
// TODO
break;
return h('span', {
class: '_mfm_blur_',
}, genEl(token.children));
}
}
if (style == null) {

View File

@ -175,6 +175,16 @@
</div>
</div>
</div>
<div class="_section">
<div class="_title">{{ $ts._mfm.blur }}</div>
<div class="_content">
<p>{{ $ts._mfm.blurDescription }}</p>
<div class="preview _panel">
<Mfm :text="preview_blur"/>
<MkTextarea v-model:value="preview_blur"><span>MFM</span></MkTextarea>
</div>
</div>
</div>
<div class="_section">
<div class="_title">{{ $ts._mfm.jelly }}</div>
<div class="_content">
@ -288,6 +298,7 @@ export default defineComponent({
preview_x2: `[x2 🍮]`,
preview_x3: `[x3 🍮]`,
preview_x4: `[x4 🍮]`,
preview_blur: `[blur ${this.$ts._mfm.dummy}]`,
}
},
});