worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

enhance(MFM): limit large MFM (#8540)

Browse source 
* add CSS classes for zoom MFM

* limit nesting of x2, x3, x4 MFM

* simplify CSS calculation

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>
This commit is contained in:
Johann150 2022-05-19 13:38:14 +02:00 committed by GitHub
parent 0f33864df1
commit 60fd793bc3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
packages/client/src/components/global/misskey-flavored-markdown.vue
View file

@ -31,6 +31,32 @@ const props = withDefaults(defineProps<{
}
}
.mfm-x2 {
--mfm-zoom-size: 200%;
}
.mfm-x3 {
--mfm-zoom-size: 400%;
}
.mfm-x4 {
--mfm-zoom-size: 600%;
}
.mfm-x2, .mfm-x3, .mfm-x4 {
font-size: var(--mfm-zoom-size);
.mfm-x2, .mfm-x3, .mfm-x4 {
/* only half effective */
font-size: calc(var(--mfm-zoom-size) / 2 + 50%);
.mfm-x2, .mfm-x3, .mfm-x4 {
/* disabled */
font-size: 100%;
}
}
}
@keyframes mfm-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }

15
packages/client/src/components/mfm.ts
View file

@ -142,16 +142,19 @@ export default defineComponent({
break;
}
case 'x2': {
style = `font-size: 200%;`;
break;
return h('span', {
class: 'mfm-x2',
}, genEl(token.children));
}
case 'x3': {
style = `font-size: 400%;`;
break;
return h('span', {
class: 'mfm-x3',
}, genEl(token.children));
}
case 'x4': {
style = `font-size: 600%;`;
break;
return h('span', {
class: 'mfm-x4',
}, genEl(token.children));
}
case 'font': {
const family =